diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index cb95264af5..63647f1ad7 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@dnd-kit/vue": "^0.5.0",
+		"@floating-ui/vue": "^2.0.1",
 		"@modrinth/api-client": "workspace:^",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/ui": "workspace:*",
@@ -32,9 +33,7 @@
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
 		"@vueuse/core": "^11.1.0",
-		"ace-builds": "^1.43.5",
 		"dayjs": "^1.11.10",
-		"@floating-ui/vue": "^2.0.1",
 		"fuse.js": "^6.6.2",
 		"intl-messageformat": "^10.7.7",
 		"motion-v": "2.2.1",
@@ -46,7 +45,6 @@
 		"vue-i18n": "^10.0.0",
 		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8",
-		"vue3-ace-editor": "^2.2.4",
 		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {
diff --git a/apps/app-frontend/src/features/settings/syncing/command-history-modal.vue b/apps/app-frontend/src/features/settings/syncing/command-history-modal.vue
index 432ba3c75c..ac7098830e 100644
--- a/apps/app-frontend/src/features/settings/syncing/command-history-modal.vue
+++ b/apps/app-frontend/src/features/settings/syncing/command-history-modal.vue
@@ -2,6 +2,7 @@
 import { SaveIcon, XIcon } from '@modrinth/assets'
 import {
 	Button,
+	CodeEditor,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
@@ -9,7 +10,7 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { defineAsyncComponent, nextTick, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import { set_command_history } from '@/helpers/instance'
 import { commandHistoryQueryOptions, syncedOptionsKeys } from '@/helpers/synced-options'
@@ -20,14 +21,6 @@ const queryClient = useQueryClient()
 const modal = ref<InstanceType<typeof NewModal> | null>(null)
 const commandHistory = ref('')
 const historyQuery = useQuery({ ...commandHistoryQueryOptions(), enabled: false })
-const CommandHistoryEditor = defineAsyncComponent(async () => {
-	const [editor] = await Promise.all([
-		import('vue3-ace-editor'),
-		import('@modrinth/ui/src/utils/ace-theme'),
-		import('@modrinth/ui/src/utils/ace-mode-mcfunction'),
-	])
-	return editor.VAceEditor
-})
 const saveMutation = useMutation({
 	mutationFn: set_command_history,
 	onSuccess: (history) => {
@@ -78,13 +71,11 @@ defineExpose({ show })
 		max-width="700px"
 		width="700px"
 	>
-		<CommandHistoryEditor
-			v-model:value="commandHistory"
-			lang="mcfunction"
-			theme="modrinth"
-			:print-margin="false"
-			class="command-history-editor ace-modrinth"
-			style="height: 420px; font-size: 0.875rem"
+		<CodeEditor
+			v-model="commandHistory"
+			language="mcfunction"
+			class="h-[420px] text-sm"
+			@save="saveCommandHistory"
 		/>
 		<template #actions>
 			<div class="flex justify-end gap-2">
@@ -100,25 +91,3 @@ defineExpose({ show })
 		</template>
 	</NewModal>
 </template>
-
-<style>
-.command-history-editor.ace-modrinth {
-	background-color: var(--surface-2);
-}
-
-.command-history-editor.ace-modrinth .ace_gutter {
-	background: var(--surface-1);
-}
-
-.command-history-editor.ace-modrinth .ace_marker-layer .ace_active-line {
-	background: var(--surface-2-5);
-}
-
-.command-history-editor.ace-modrinth .ace_gutter-active-line {
-	background-color: var(--surface-1-5);
-}
-
-.command-history-editor.ace-modrinth.ace_multiselect .ace_selection.ace_start {
-	box-shadow: 0 0 3px 0 var(--surface-2);
-}
-</style>
diff --git a/apps/app-frontend/src/main.js b/apps/app-frontend/src/main.js
index 9607cfb4fe..5dc85bf62b 100644
--- a/apps/app-frontend/src/main.js
+++ b/apps/app-frontend/src/main.js
@@ -1,6 +1,6 @@
 import 'overlayscrollbars/overlayscrollbars.css'
 
-import { installTooltipDirective } from '@modrinth/ui'
+import { installTooltipDirective, useCodeHighlightTheme } from '@modrinth/ui'
 import { VueQueryPlugin } from '@tanstack/vue-query'
 import { createApp } from 'vue'
 
@@ -24,6 +24,7 @@ if (import.meta.env.DEV) {
 app.use(i18nPlugin)
 app.use(i18nDebugPlugin)
 installTooltipDirective(app)
+useCodeHighlightTheme().start()
 app.directive('overlay-scrollbars', overlayScrollbarsDirective)
 
 async function mount() {
diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index d8fff05680..aaabd24299 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -110,6 +110,10 @@ export default defineNuxtConfig({
 				external: ['cloudflare:workers'],
 			},
 		},
+		worker: {
+			// The toolbox workers (archives, decompilation) lazily import their dependencies
+			format: 'es',
+		},
 	},
 	hooks: {
 		async 'build:before'() {
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 6254af7eeb..f34070b381 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -38,8 +38,10 @@
 		"wrangler": "^4.115.0"
 	},
 	"dependencies": {
+		"@codemirror/autocomplete": "^6.20.0",
 		"@codemirror/commands": "^6.3.2",
 		"@codemirror/language": "^6.9.3",
+		"@codemirror/state": "^6.5.4",
 		"@codemirror/view": "^6.22.1",
 		"@contentauth/c2pa-web": "^0.13.1",
 		"@floating-ui/vue": "^2.0.1",
@@ -58,7 +60,6 @@
 		"@vue-email/render": "^0.0.9",
 		"@vueuse/core": "^11.1.0",
 		"@zip.js/zip.js": "^2.8.34",
-		"ace-builds": "^1.36.2",
 		"ansi-to-html": "^0.7.2",
 		"chart.js": "^4.5.1",
 		"dayjs": "^1.11.7",
@@ -81,7 +82,6 @@
 		"vue-confetti-explosion": "^1.0.2",
 		"vue-router": "*",
 		"vue-typed-virtual-list": "^1.0.10",
-		"vue3-ace-editor": "^2.2.4",
 		"vue3-apexcharts": "^1.5.2",
 		"xss": "^1.0.14"
 	},
diff --git a/apps/frontend/src/components/project-review/conversation-panel.vue b/apps/frontend/src/components/project-review/conversation-panel.vue
new file mode 100644
index 0000000000..c06f94b0da
--- /dev/null
+++ b/apps/frontend/src/components/project-review/conversation-panel.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="flex h-full min-h-0 min-w-0 flex-col">
+		<slot />
+		<ReviewOutcomeButtons v-if="hostsOutcome" class="mt-2.5" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+
+import { injectReviewPanelVisible } from './layout/context'
+import ReviewOutcomeButtons from './review-outcome-buttons/index.vue'
+
+/**
+ * One of the review's conversation panels (re-review, thread, issues), which reports whether it's
+ * shown and, when it's the one picked to, hosts the review's outcome buttons below its content.
+ */
+defineProps<{
+	hostsOutcome: boolean
+}>()
+
+const emit = defineEmits<{
+	shown: [shown: boolean]
+}>()
+
+const visible = injectReviewPanelVisible()
+watch(visible, (shown) => emit('shown', shown), { immediate: true })
+</script>
diff --git a/apps/frontend/src/components/project-review/description/index.vue b/apps/frontend/src/components/project-review/description/index.vue
index abfcc933af..50c3104616 100644
--- a/apps/frontend/src/components/project-review/description/index.vue
+++ b/apps/frontend/src/components/project-review/description/index.vue
@@ -1,18 +1,16 @@
 <template>
 	<div
 		ref="interactionScope"
-		class="editable-review-section flex h-full min-h-0 flex-col gap-2.5 overflow-y-auto overflow-x-hidden px-2 pb-2"
+		class="editable-review-section flex h-full min-h-0 flex-col gap-2.5 px-2 pb-2"
 	>
-		<div
-			class="sticky top-0 z-10 flex shrink-0 items-start justify-between gap-4 bg-surface-1 pt-2"
-		>
+		<div class="flex shrink-0 items-start justify-between gap-4">
 			<ReviewPanel
 				mode="inline"
 				:target="{ kind: 'description' }"
 				hide-title
 				:disabled="isLoading || !!error"
 				:interaction-scope="interactionScope"
-				class="!w-auto min-w-0 flex-1 pb-2.5"
+				class="!w-auto min-w-0 flex-1"
 			/>
 			<div class="mt-0.5 flex shrink-0 justify-end gap-1">
 				<template v-if="editing">
@@ -36,7 +34,7 @@
 				/>
 			</div>
 		</div>
-		<div class="min-h-0 flex-1">
+		<div class="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
 			<p v-if="!selection" class="m-0 text-secondary">No project selected</p>
 			<p v-else-if="isLoading" role="status" class="m-0">Loading...</p>
 			<div v-else-if="error" role="alert">
@@ -48,8 +46,8 @@
 					ref="editor"
 					v-model="draft"
 					:disabled="saving"
-					:hide-formatting-buttons="
-						settings.get(moderationSettings.General.HideMarkdownFormattingButtons)
+					:formatting-buttons-visibility="
+						settings.get(moderationSettings.General.MarkdownFormattingButtonsVisibility)
 					"
 				/>
 				<p v-if="validationMessage" class="m-0 text-sm text-red" role="alert">
diff --git a/apps/frontend/src/components/project-review/disclosures/index.vue b/apps/frontend/src/components/project-review/disclosures/index.vue
index dd0ea6aef4..cdeb29891f 100644
--- a/apps/frontend/src/components/project-review/disclosures/index.vue
+++ b/apps/frontend/src/components/project-review/disclosures/index.vue
@@ -1,6 +1,6 @@
 <template>
-	<div v-if="project" class="flex h-full min-h-0 flex-col gap-1 overflow-hidden">
-		<div class="shrink-0 p-2">
+	<div v-if="project" class="flex h-full min-h-0 flex-col gap-2.5">
+		<div class="shrink-0 px-2">
 			<ReviewPanel mode="inline" :target="{ kind: 'disclosures' }" hide-title />
 		</div>
 		<p v-if="isPending" role="status">Loading disclosures…</p>
@@ -15,7 +15,7 @@
 			description="Come back once you've uploaded your versions."
 		/>
 		<template v-else>
-			<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-2 pt-3">
+			<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pt-2">
 				<DisclosureCards
 					:editor="disclosures"
 					:project-title="project.name"
diff --git a/apps/frontend/src/components/project-review/index.vue b/apps/frontend/src/components/project-review/index.vue
index a28cf5962d..f936083a49 100644
--- a/apps/frontend/src/components/project-review/index.vue
+++ b/apps/frontend/src/components/project-review/index.vue
@@ -42,48 +42,84 @@
 				</div>
 			</template>
 		</NewModal>
-		<ProjectReviewLayout :tabs="visibleTabs" :reset-key="selection" :ready="layoutReady">
-			<template #left><ProjectInfo /></template>
-			<template #right>
-				<div
-					:key="projectId"
-					class="flex h-full min-h-0 min-w-0 flex-col gap-2.5 [&_.cm-editor]:text-xs"
-				>
+		<ProjectReviewLayout
+			ref="layout"
+			:tabs="visibleTabs"
+			:side-panels="sidePanels"
+			:counts="panelCounts"
+			:reset-key="selection"
+			:ready="layoutReady"
+		>
+			<template #project><ProjectInfo /></template>
+			<template #rulings>
+				<div :key="projectId" class="flex h-full min-h-0 min-w-0 flex-col">
 					<ProjectWideChecks :inert="pending" />
-					<section class="flex min-h-0 min-w-0 flex-1 flex-col">
-						<div class="flex shrink-0 flex-wrap items-center gap-2 pb-2.5">
-							<Tabs v-model:value="activeReviewTab" wrap :tabs="rightPanelTabs" />
-							<div class="ml-auto flex items-center gap-1">
-								<Tooltip v-if="!pending && project" text="Reset issues">
-									<Button
-										type="quiet"
-										size="sm"
-										icon-only
-										:disabled="resetting"
-										aria-label="Reset issues"
-										@click="resetIssuesModal?.show()"
-									>
-										<RotateCounterClockwiseIcon aria-hidden="true" />
-									</Button>
-								</Tooltip>
-								<IssuePicker ref="issuePicker" @selected="activeReviewTab = 'issues'" />
-							</div>
-						</div>
-						<IssueList v-show="activeReviewTab === 'issues'" />
-						<IssueList v-show="activeReviewTab === 're-review'" re-review />
-						<MessageThread v-show="activeReviewTab === 'thread'" ref="messageThread" />
-					</section>
-					<ReviewOutcomeButtons />
 				</div>
 			</template>
+			<template #issues>
+				<ConversationPanel
+					:key="projectId"
+					:hosts-outcome="outcomeHost === 'issues'"
+					class="[&_.cm-editor]:text-xs"
+					@shown="(shown) => setConversationShown('issues', shown)"
+				>
+					<div class="flex shrink-0 items-center justify-end gap-1 pb-2">
+						<Tooltip v-if="!pending && project" text="Reset issues">
+							<Button
+								type="quiet"
+								size="sm"
+								icon-only
+								:disabled="resetting"
+								aria-label="Reset issues"
+								@click="resetIssuesModal?.show()"
+							>
+								<RotateCounterClockwiseIcon aria-hidden="true" />
+							</Button>
+						</Tooltip>
+						<IssuePicker ref="issuePicker" @selected="reveal('issues')" />
+					</div>
+					<IssueList />
+				</ConversationPanel>
+			</template>
+			<template #re-review>
+				<ConversationPanel
+					:key="projectId"
+					:hosts-outcome="outcomeHost === 're-review'"
+					class="[&_.cm-editor]:text-xs"
+					@shown="(shown) => setConversationShown('re-review', shown)"
+				>
+					<IssueList re-review />
+				</ConversationPanel>
+			</template>
+			<template #thread>
+				<ConversationPanel
+					:key="projectId"
+					:hosts-outcome="outcomeHost === 'thread'"
+					@shown="(shown) => setConversationShown('thread', shown)"
+				>
+					<MessageThread />
+				</ConversationPanel>
+			</template>
 			<template #footer><QueueBar /></template>
+			<template #settings="{ floating }"><ReviewSettings :floating="floating" /></template>
 			<template #description><Description :key="projectId" /></template>
 			<template #gallery><Gallery :key="projectId" /></template>
 			<template #disclosures><Disclosures :key="projectId" /></template>
 			<template #permissions><Permissions :key="projectId" /></template>
 			<template #versions><Versions :key="projectId" /></template>
 			<template #tech-review><TechReview :key="projectId" /></template>
-			<template #slicer><Slicer :key="projectId" /></template>
+			<template #archive-source="{ projectShown }">
+				<ArchiveProjectDetails
+					v-if="project"
+					:project="project"
+					:versions="versions"
+					:version="archive.version.value ?? null"
+					:file="archive.file.value ?? null"
+					:hide-project="projectShown"
+					@select-version="archive.selectVersion"
+					@select-file="archive.selectFile"
+				/>
+			</template>
 		</ProjectReviewLayout>
 		<template #fallback>
 			<p class="m-0 p-4 text-secondary" role="status">Loading...</p>
@@ -94,9 +130,10 @@
 <script setup lang="ts">
 import { RotateCounterClockwiseIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import { moderationSettings } from '@modrinth/moderation'
-import { Button, injectLoadingState, NewModal, Tabs, Tooltip } from '@modrinth/ui'
-import { computed, onScopeDispose, ref, watch } from 'vue'
+import { Button, injectLoadingState, NewModal, Tooltip } from '@modrinth/ui'
+import { computed, onScopeDispose, ref, shallowReactive, watch } from 'vue'
 
+import ArchiveProjectDetails from '~/components/ui/archive-viewer/ArchiveProjectDetails.vue'
 import {
 	notifyCopied,
 	useModerationKeybinds,
@@ -105,6 +142,10 @@ import {
 import { isStaff } from '~/helpers/users.js'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
 import { previousReviewLinkUrls } from '~/providers/project-review/project-links'
+import {
+	createReviewArchive,
+	provideReviewArchive,
+} from '~/providers/project-review/review-archive'
 import {
 	createReviewMessages,
 	provideReviewMessages,
@@ -118,12 +159,12 @@ import {
 	createReviewSession,
 	provideReviewSession,
 } from '~/providers/project-review/review-session'
-import { createReviewSlicer, provideReviewSlicer } from '~/providers/project-review/review-slicer'
 import {
 	createReviewSubmission,
 	provideReviewSubmission,
 } from '~/providers/project-review/review-submission'
 
+import ConversationPanel from './conversation-panel.vue'
 import Description from './description/index.vue'
 import Disclosures from './disclosures/index.vue'
 import Gallery from './gallery/index.vue'
@@ -131,16 +172,20 @@ import IssueList from './issue-list/index.vue'
 import IssuePicker from './issue-list/issue-picker.vue'
 import { useReReviewIssues } from './issue-list/re-review-issues'
 import ProjectReviewLayout from './layout/index.client.vue'
-import { type ProjectReviewTab, projectReviewTabs } from './layout/types'
+import {
+	type ProjectReviewSidePanel,
+	type ProjectReviewSlot,
+	type ProjectReviewTab,
+	projectReviewTabs,
+} from './layout/types'
 import MessageThread from './message-thread/index.vue'
 import Permissions from './permissions/index.vue'
 import ProjectInfo from './project-info/index.vue'
 import ProjectWideChecks from './project-wide-checks.vue'
 import QueueBar from './queue-bar.vue'
-import ReviewOutcomeButtons from './review-outcome-buttons/index.vue'
 import { createReviewContext, provideReviewContext } from './review-panel/context'
+import ReviewSettings from './review-settings.vue'
 import { createReviewShortcuts, provideReviewShortcuts, reviewShortcutBlocked } from './shortcuts'
-import Slicer from './slicer/index.vue'
 import TechReview from './tech-review/index.vue'
 import Versions from './versions/index.vue'
 
@@ -167,7 +212,7 @@ const {
 	navigation,
 } = injectProjectReviewPageContext()
 const layoutReady = computed(() => !!project.value && !isLoading.value && !navigation.busy.value)
-provideReviewSlicer(createReviewSlicer(projectId, versions))
+const archive = provideReviewArchive(createReviewArchive(projectId, versions))
 const visibleTabs = computed<readonly ProjectReviewTab[]>((previousTabs) => {
 	if (!project.value) {
 		return previousTabs ?? projectReviewTabs.filter((tab) => tab !== 'permissions')
@@ -256,20 +301,60 @@ watch(
 	{ immediate: true },
 )
 const hasPreviousStructuredIssues = computed(() => previousIssues.issues.value.length > 0)
-const activeReviewTab = ref('thread')
+const layout = ref<InstanceType<typeof ProjectReviewLayout>>()
+
+/** The conversation's panels, of which the re-review only shows once there are previous issues. */
+const conversationPanels = computed<ProjectReviewSidePanel[]>(() => [
+	...(hasPreviousStructuredIssues.value ? (['re-review'] as const) : []),
+	'thread',
+	'issues',
+])
+const sidePanels = computed<ProjectReviewSidePanel[]>(() => [
+	'project',
+	'rulings',
+	...conversationPanels.value,
+	'settings',
+])
+const panelCounts = computed<Partial<Record<ProjectReviewSlot, number>>>(() => ({
+	issues: issueCount.value,
+	...(hasPreviousStructuredIssues.value
+		? { 're-review': previousIssues.remainingReReviewIssues.value.length }
+		: {}),
+}))
+
+function reveal(panel: ProjectReviewSlot) {
+	layout.value?.reveal(panel)
+}
+
+/** The conversation panels currently shown, the first of which hosts the outcome buttons. */
+const shownConversation = shallowReactive(new Set<ProjectReviewSidePanel>())
+function setConversationShown(panel: ProjectReviewSidePanel, shown: boolean) {
+	if (shown) shownConversation.add(panel)
+	else shownConversation.delete(panel)
+}
+
+/**
+ * Where the outcome buttons go: below the first conversation panel shown, else the first one
+ * (out of sight), so their shortcuts keep working while the conversation is hidden.
+ */
+const outcomeHost = computed(
+	() =>
+		conversationPanels.value.find((panel) => shownConversation.has(panel)) ??
+		conversationPanels.value[0],
+)
+
 onScopeDispose(
 	reviewContext.registerRoute('re-review', () => {
 		if (!hasPreviousStructuredIssues.value) {
 			void reviewContext.revealPanel('re-review-misc')
 		} else {
-			activeReviewTab.value = 're-review'
+			reveal('re-review')
 		}
 	}),
 )
 const resetIssuesModal = ref<InstanceType<typeof NewModal>>()
 const resetCancelButton = ref<InstanceType<typeof Button>>()
 const issuePicker = ref<InstanceType<typeof IssuePicker>>()
-const messageThread = ref<InstanceType<typeof MessageThread>>()
 const auth = useAuthState()
 const keybinds = useModerationKeybinds()
 
@@ -284,28 +369,10 @@ function revertCustomizations() {
 	resetIssuesModal.value?.hide()
 }
 
-const rightPanelTabs = computed(() => [
-	...(hasPreviousStructuredIssues.value
-		? [
-				{
-					value: 're-review',
-					label: `Re-review (${previousIssues.remainingReReviewIssues.value.length})`,
-				},
-			]
-		: []),
-	{ value: 'thread', label: 'Thread' },
-	{
-		value: 'issues',
-		label: `Issues (${issueCount.value})`,
-	},
-])
-
 watch(
 	[projectId, hasPreviousStructuredIssues],
-	([, hasIssues]) => {
-		activeReviewTab.value = hasIssues ? 're-review' : 'thread'
-	},
-	{ immediate: true },
+	([, hasIssues]) => reveal(hasIssues ? 're-review' : 'thread'),
+	{ flush: 'post' },
 )
 
 watch(projectId, () => {
@@ -313,9 +380,9 @@ watch(projectId, () => {
 })
 
 useShortcut('cycle-conversation', () => {
-	const tabs = ['issues', 'thread', ...(hasPreviousStructuredIssues.value ? ['re-review'] : [])]
-	activeReviewTab.value = tabs[(tabs.indexOf(activeReviewTab.value) + 1) % tabs.length]
-	shortcuts.run('reveal-right')
+	const panels = conversationPanels.value
+	const shown = panels.findIndex((panel) => shownConversation.has(panel))
+	reveal(panels[(shown + 1) % panels.length])
 })
 useShortcut(
 	'new-issue',
@@ -333,7 +400,6 @@ useShortcut(
 	're-review',
 	() => {
 		void reviewContext.revealPanel('re-review')
-		shortcuts.run('reveal-right')
 	},
 	() =>
 		hasPreviousStructuredIssues.value || !!panels.resolve({ kind: 'panel', key: 're-review-misc' }),
diff --git a/apps/frontend/src/components/project-review/issue-list/issue-card.vue b/apps/frontend/src/components/project-review/issue-list/issue-card.vue
index b79b1dd6c9..21b9d3cce3 100644
--- a/apps/frontend/src/components/project-review/issue-list/issue-card.vue
+++ b/apps/frontend/src/components/project-review/issue-list/issue-card.vue
@@ -151,8 +151,8 @@
 										:disabled="pending || disabled || generating"
 										:heading-buttons="false"
 										:placeholder="issue.custom ? 'Enter custom issue message...' : undefined"
-										:hide-formatting-buttons="
-											settings.get(moderationSettings.General.HideMarkdownFormattingButtons)
+										:formatting-buttons-visibility="
+											settings.get(moderationSettings.General.MarkdownFormattingButtonsVisibility)
 										"
 										:max-height="240"
 										:min-height="96"
diff --git a/apps/frontend/src/components/project-review/issue-list/issue-toggles.vue b/apps/frontend/src/components/project-review/issue-list/issue-toggles.vue
index ee2da225b7..ee1c5c784e 100644
--- a/apps/frontend/src/components/project-review/issue-list/issue-toggles.vue
+++ b/apps/frontend/src/components/project-review/issue-list/issue-toggles.vue
@@ -13,7 +13,7 @@
 				<Button
 					v-for="entry in selectedOptionsForRow(row)"
 					:key="entry.control.id ?? 'active'"
-					size="sm"
+					:size="buttonSize"
 					:disabled="pending || disabled || entry.control.disabled"
 					:aria-label="`Remove ${entry.control.issueCardDisplay.label}`"
 					@click="removeOption(entry)"
@@ -56,9 +56,11 @@
 
 <script setup lang="ts">
 import { PlusIcon, XIcon } from '@modrinth/assets'
+import { moderationSettings } from '@modrinth/moderation'
 import { Button, MultiSelect, type MultiSelectItem } from '@modrinth/ui'
 import { computed, h, ref, watch } from 'vue'
 
+import { useModerationSettings } from '~/composables/moderation'
 import {
 	injectReviewPanels,
 	type ReviewIssue,
@@ -72,6 +74,8 @@ const props = withDefaults(defineProps<{ issue: ReviewIssue; disabled?: boolean
 const emit = defineEmits<{ remove: [] }>()
 const panels = injectReviewPanels()
 const { pending } = injectReviewSubmission()
+const settings = useModerationSettings()
+const buttonSize = computed(() => settings.value.get(moderationSettings.General.ButtonSize))
 
 type ToggleControl = Extract<ReviewIssueControl['control'], { type: 'toggle' }>
 interface IssueCardOption extends ReviewIssueControl {
diff --git a/apps/frontend/src/components/project-review/layout/center.vue b/apps/frontend/src/components/project-review/layout/center.vue
deleted file mode 100644
index 2aeb4bdd7e..0000000000
--- a/apps/frontend/src/components/project-review/layout/center.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-	<div class="flex h-full min-h-0 min-w-0 flex-col">
-		<div class="min-h-0 flex-1">
-			<ProjectReviewTabs />
-		</div>
-		<component :is="slots.footer" v-if="slots.footer" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { injectProjectReviewContext } from './context'
-import ProjectReviewTabs from './tabs/tabs.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const { slots } = injectProjectReviewContext()
-</script>
diff --git a/apps/frontend/src/components/project-review/layout/columns.vue b/apps/frontend/src/components/project-review/layout/columns.vue
deleted file mode 100644
index 76b2df7edc..0000000000
--- a/apps/frontend/src/components/project-review/layout/columns.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-	<SplitviewVue
-		class="project-review-columns"
-		:orientation="Orientation.HORIZONTAL"
-		:proportional-layout="false"
-		@ready="onColumnsReady"
-	/>
-</template>
-
-<script setup lang="ts">
-import { Orientation, SplitviewVue } from 'dockview-vue'
-
-import ProjectReviewCenter from './center.vue'
-import { injectProjectReviewContext } from './context'
-import ProjectReviewPanel from './panel.vue'
-
-defineOptions({ components: { ProjectReviewCenter, ProjectReviewPanel } })
-
-const { onColumnsReady } = injectProjectReviewContext()
-</script>
diff --git a/apps/frontend/src/components/project-review/layout/context.ts b/apps/frontend/src/components/project-review/layout/context.ts
index 04e467a3ae..857b3cd6b8 100644
--- a/apps/frontend/src/components/project-review/layout/context.ts
+++ b/apps/frontend/src/components/project-review/layout/context.ts
@@ -1,11 +1,38 @@
 import { createContext } from '@modrinth/ui'
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
-import type { ProjectReviewSlot, ProjectReviewSlots } from './types'
-import type { useProjectReviewLayout } from './use-layout'
+import type { ProjectReviewSlot, ProjectReviewSlots, ProjectReviewTab } from './types'
 
-type ProjectReviewContext = ReturnType<typeof useProjectReviewLayout> & {
+/** The review's layout: its side panels and tabs, as laid out by the shared workbench. */
+export interface ProjectReviewContext {
 	slots: ProjectReviewSlots
+	leftVisible: Ref<boolean>
+	rightVisible: Ref<boolean>
+	/** How wide the right panel is shown, 0 while hidden. */
+	visibleRightWidth: Ref<number>
+	toggleSidebar: (side: 'left' | 'right') => void
+	/** Item counts shown in the panels' tabs, e.g. how many issues there are. */
+	counts: ComputedRef<Partial<Record<ProjectReviewSlot, number>>>
+	/** Brings a panel to the front of its group, showing its region (or its window, if popped out). */
+	revealSlot: (slot: ProjectReviewSlot) => void
+	/** Hides a panel shown in view, or else reveals it. */
+	toggleSlot: (slot: ProjectReviewSlot) => void
+	/**
+	 * Toggles the settings: their panel while it's open, or else their floating window, which
+	 * leaves whichever panel is in front where it is.
+	 */
+	toggleSettings: () => void
+	/** Moves the settings out of their floating window into their panel. */
+	settingsAsPanel: () => void
+	/** Moves the settings out of their panel into their floating window. */
+	settingsAsWindow: () => void
+	openTab: (tab: ProjectReviewTab) => void
+	/** Brings the first tab of every group to the front. */
+	resetActiveTabs: () => void
+	selectedTabs: Ref<readonly string[]>
+	detachedTabs: ComputedRef<string[]>
+	popoutTab: (tab: ProjectReviewTab) => void
+	dockTab: (tab: ProjectReviewTab) => void
 }
 
 export const [injectProjectReviewContext, provideProjectReviewContext] =
diff --git a/apps/frontend/src/components/project-review/layout/controls/left-control.vue b/apps/frontend/src/components/project-review/layout/controls/left-control.vue
deleted file mode 100644
index 3957a9b290..0000000000
--- a/apps/frontend/src/components/project-review/layout/controls/left-control.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-	<ProjectReviewSidebarControl side="left" :params="params" />
-</template>
-
-<script setup lang="ts">
-import type { IDockviewHeaderActionsProps } from 'dockview-vue'
-
-import ProjectReviewSidebarControl from './sidebar-control.vue'
-
-defineOptions({ inheritAttrs: false })
-defineProps<{ params: IDockviewHeaderActionsProps }>()
-</script>
diff --git a/apps/frontend/src/components/project-review/layout/controls/right-control.vue b/apps/frontend/src/components/project-review/layout/controls/right-control.vue
deleted file mode 100644
index 02aad2d1b2..0000000000
--- a/apps/frontend/src/components/project-review/layout/controls/right-control.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-	<ProjectReviewSidebarControl side="right" :params="params" />
-</template>
-
-<script setup lang="ts">
-import type { IDockviewHeaderActionsProps } from 'dockview-vue'
-
-import ProjectReviewSidebarControl from './sidebar-control.vue'
-
-defineOptions({ inheritAttrs: false })
-defineProps<{ params: IDockviewHeaderActionsProps }>()
-</script>
diff --git a/apps/frontend/src/components/project-review/layout/controls/sidebar-control.vue b/apps/frontend/src/components/project-review/layout/controls/sidebar-control.vue
deleted file mode 100644
index a72369412a..0000000000
--- a/apps/frontend/src/components/project-review/layout/controls/sidebar-control.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-	<div v-if="params.group.id === cornerGroupId" class="flex h-full items-center">
-		<IconButton
-			type="quiet"
-			size="sm"
-			:circular="false"
-			:label="label"
-			:aria-expanded="visible"
-			class="opacity-70 hover:opacity-100"
-			@click="toggleSidebar(side)"
-		>
-			<component :is="icon" aria-hidden="true" />
-		</IconButton>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	PanelLeftCloseIcon,
-	PanelLeftOpenIcon,
-	PanelRightCloseIcon,
-	PanelRightOpenIcon,
-} from '@modrinth/assets'
-import { IconButton } from '@modrinth/ui'
-import type { IDockviewHeaderActionsProps } from 'dockview-vue'
-import { computed } from 'vue'
-
-import { injectProjectReviewContext } from '../context'
-
-defineOptions({ inheritAttrs: false })
-const props = defineProps<{
-	side: 'left' | 'right'
-	params: IDockviewHeaderActionsProps
-}>()
-
-const { leftVisible, rightVisible, topLeftGroupId, topRightGroupId, toggleSidebar } =
-	injectProjectReviewContext()
-const visible = computed(() => (props.side === 'left' ? leftVisible.value : rightVisible.value))
-const icon = computed(() => {
-	if (props.side === 'left') return visible.value ? PanelLeftCloseIcon : PanelLeftOpenIcon
-	return visible.value ? PanelRightCloseIcon : PanelRightOpenIcon
-})
-const cornerGroupId = computed(() =>
-	props.side === 'left' ? topLeftGroupId.value : topRightGroupId.value,
-)
-const label = computed(() => {
-	if (props.side === 'left') return visible.value ? 'Hide project details' : 'Show project details'
-	return visible.value ? 'Hide panel' : 'Show panel'
-})
-</script>
diff --git a/apps/frontend/src/components/project-review/layout/drag-popout.ts b/apps/frontend/src/components/project-review/layout/drag-popout.ts
deleted file mode 100644
index 115bf5c079..0000000000
--- a/apps/frontend/src/components/project-review/layout/drag-popout.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import type {
-	DockviewApi,
-	DockviewGroupPanel,
-	DockviewIDisposable,
-	DockviewPopoutGroupOptions,
-} from 'dockview-vue'
-
-import type { ReviewPopoutTarget } from './popout-window'
-
-export function registerDragPopouts(
-	api: DockviewApi,
-	popout: (
-		target: ReviewPopoutTarget,
-		position: NonNullable<DockviewPopoutGroupOptions['position']>,
-		sourceWindow: Window,
-	) => void,
-): DockviewIDisposable {
-	let clearDrag: (() => void) | undefined
-
-	function onDragStart(
-		target: ReviewPopoutTarget,
-		group: DockviewGroupPanel,
-		nativeEvent: DragEvent | PointerEvent,
-	) {
-		clearDrag?.()
-		if ('pointerId' in nativeEvent) return
-		const eventTarget = nativeEvent.target as HTMLElement | null
-		const ownerWindow = eventTarget?.ownerDocument.defaultView
-		const dock = group.element.closest('.dv-popout-window, .project-review-tabs')
-		if (!eventTarget || !ownerWindow || !dock) return
-		const source = eventTarget
-		const sourceWindow = ownerWindow
-		const bounds = dock.getBoundingClientRect()
-		const windowOrigin = {
-			left: nativeEvent.screenX - nativeEvent.clientX - sourceWindow.screenX,
-			top: nativeEvent.screenY - nativeEvent.clientY - sourceWindow.screenY,
-		}
-		const panelIds = new Set(
-			'panels' in target ? target.panels.map((panel) => panel.id) : [target.id],
-		)
-		const windows = [window, ...api.getPopouts().map((entry) => entry.window)]
-		let dropCleanupTimer: ReturnType<typeof setTimeout> | undefined
-		let nativeDrop: DragEvent | undefined
-		let moved = false
-		let dropped = false
-		let cancelled = false
-		const movedSubscription = api.onDidMovePanel((event) => {
-			if (panelIds.has(event.panel.id)) moved = true
-		})
-		const dropSubscription = api.onDidDrop(() => {
-			dropped = true
-		})
-
-		function openPopout(event: DragEvent) {
-			popout(
-				target,
-				{
-					left: event.screenX,
-					top: event.screenY,
-					width: Math.max(400, bounds.width),
-					height: Math.max(300, bounds.height),
-				},
-				sourceWindow,
-			)
-		}
-
-		function isWorkspaceBackground(event: DragEvent) {
-			const element = event.target as Element | null
-			return (
-				!!element?.closest('.project-review') &&
-				!element.closest(
-					'.project-review-tabs, .dv-popout-window, .project-review-dock, .dv-drop-target, .dv-drop-target-container',
-				)
-			)
-		}
-
-		function onDragOver(event: DragEvent) {
-			if (event.defaultPrevented || !isWorkspaceBackground(event)) return
-			event.preventDefault()
-			if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
-		}
-
-		function observeDrop(event: DragEvent) {
-			nativeDrop = event
-			dropCleanupTimer = setTimeout(() => onDragEnd(event), 0)
-		}
-
-		function onBackgroundDrop(event: DragEvent) {
-			if (event.defaultPrevented || cancelled || moved || !isWorkspaceBackground(event)) return
-			event.preventDefault()
-			dropped = true
-			openPopout(event)
-		}
-
-		function onDragEnd(event: DragEvent) {
-			const release = nativeDrop ?? event
-			const clientX = release.screenX - sourceWindow.screenX - windowOrigin.left
-			const clientY = release.screenY - sourceWindow.screenY - windowOrigin.top
-			const destination = (nativeDrop?.target as Node | null)?.ownerDocument
-			const outside =
-				(destination && destination !== source.ownerDocument) ||
-				clientX < bounds.left ||
-				clientX > bounds.right ||
-				clientY < bounds.top ||
-				clientY > bounds.bottom
-			const shouldPopout =
-				!cancelled &&
-				!moved &&
-				!dropped &&
-				(release.screenX !== 0 || release.screenY !== 0) &&
-				outside
-			clearDrag?.()
-			if (shouldPopout) openPopout(release)
-		}
-
-		function onKeydown(event: KeyboardEvent) {
-			if (event.key === 'Escape') cancelled = true
-		}
-
-		function onWindowClose() {
-			cancelled = true
-			clearDrag?.()
-		}
-
-		function cleanup() {
-			if (clearDrag === cleanup) clearDrag = undefined
-			clearTimeout(dropCleanupTimer)
-			source.removeEventListener('dragend', onDragEnd)
-			for (const child of windows) {
-				child.removeEventListener('dragover', onDragOver)
-				child.removeEventListener('drop', observeDrop, true)
-				child.removeEventListener('drop', onBackgroundDrop)
-				child.removeEventListener('keydown', onKeydown, true)
-				child.removeEventListener('beforeunload', onWindowClose)
-			}
-			movedSubscription.dispose()
-			dropSubscription.dispose()
-		}
-		clearDrag = cleanup
-		source.addEventListener('dragend', onDragEnd)
-		for (const child of windows) {
-			child.addEventListener('dragover', onDragOver)
-			child.addEventListener('drop', observeDrop, { capture: true, passive: true })
-			child.addEventListener('drop', onBackgroundDrop)
-			child.addEventListener('keydown', onKeydown, true)
-			child.addEventListener('beforeunload', onWindowClose)
-		}
-	}
-
-	const subscriptions = [
-		api.onWillDragPanel(({ panel, nativeEvent }) => {
-			onDragStart(panel, panel.group, nativeEvent)
-		}),
-		api.onWillDragGroup(({ group, nativeEvent }) => {
-			onDragStart(group, group, nativeEvent)
-		}),
-	]
-	return {
-		dispose() {
-			clearDrag?.()
-			subscriptions.forEach((subscription) => subscription.dispose())
-		},
-	}
-}
diff --git a/apps/frontend/src/components/project-review/layout/empty-popout.vue b/apps/frontend/src/components/project-review/layout/empty-popout.vue
deleted file mode 100644
index 82117dea47..0000000000
--- a/apps/frontend/src/components/project-review/layout/empty-popout.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-	<div class="flex h-full items-center justify-center p-3 text-secondary">
-		<span v-if="params.group?.api.location.type === 'popout'" role="status">
-			No tabs open in this panel
-		</span>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { WatermarkRendererInitParameters } from 'dockview-vue'
-
-defineProps<{ params: WatermarkRendererInitParameters }>()
-</script>
diff --git a/apps/frontend/src/components/project-review/layout/index.client.vue b/apps/frontend/src/components/project-review/layout/index.client.vue
index de13b833a4..09a6f6cd47 100644
--- a/apps/frontend/src/components/project-review/layout/index.client.vue
+++ b/apps/frontend/src/components/project-review/layout/index.client.vue
@@ -1,107 +1,118 @@
 <template>
 	<section
-		class="project-review relative flex overflow-hidden bg-bg"
+		class="project-review relative flex flex-col overflow-hidden bg-surface-1"
 		aria-label="Project Review"
-		@dblclick="onDividerDoubleClick"
 	>
-		<div class="flex min-h-0 min-w-0 flex-1 flex-col">
-			<div class="min-h-0 flex-1 overflow-x-auto">
-				<ProjectReviewColumns
-					class="project-review-dock h-full"
-					:style="{
-						minWidth: `${workspacePanelSizes.center.minimum + (leftVisible ? workspacePanelSizes.left.minimum : 0) + (rightVisible ? workspacePanelSizes.right.minimum : 0)}px`,
-					}"
-				/>
-			</div>
-		</div>
+		<ArchiveSession
+			:source="archive.source.value"
+			:path="archive.path.value"
+			@update:path="archive.setPath"
+		>
+			<ReviewWorkbench
+				v-if="nestedArchive"
+				ref="reviewWorkbench"
+				nested-archive
+				:slots="slots"
+				:tabs="tabs"
+				:side-panels="sidePanels"
+				:counts="counts"
+				:reset-key="resetKey"
+				:ready="ready"
+			/>
+			<FilePageLayout
+				v-else
+				workbench
+				workspace="project-review"
+				default-browsing="sidebar"
+				compact-navigation
+				:sidebar="sidebar"
+			>
+				<template #workspace>
+					<ReviewWorkbench
+						ref="reviewWorkbench"
+						:nested-archive="false"
+						:slots="slots"
+						:tabs="tabs"
+						:side-panels="sidePanels"
+						:counts="counts"
+						:reset-key="resetKey"
+						:ready="ready"
+					/>
+				</template>
+			</FilePageLayout>
+		</ArchiveSession>
 	</section>
 </template>
 
 <script setup lang="ts">
-import 'dockview-vue/dist/styles/dockview.css'
-
-import { onScopeDispose, watch, watchEffect } from 'vue'
-
-import { useModerationKeybinds } from '~/composables/moderation'
-
-import { injectReviewContext } from '../review-panel/context'
-import { reviewShortcutBlocked, useReviewEventListener, useReviewShortcut } from '../shortcuts'
-import ProjectReviewColumns from './columns.vue'
-import { provideProjectReviewContext } from './context'
-import { reviewPanelLabels } from './labels'
-import { workspacePanelSizes } from './layout-storage'
-import type { ProjectReviewSlots, ProjectReviewTab } from './types'
-import { useProjectReviewLayout } from './use-layout'
-
-const props = defineProps<{
+import { moderationSettings } from '@modrinth/moderation'
+import { ArchiveSession, FilePageLayout } from '@modrinth/ui'
+import { computed, ref, watch } from 'vue'
+
+import { useModerationSettings } from '~/composables/moderation'
+import { injectReviewArchive } from '~/providers/project-review/review-archive'
+
+import ReviewWorkbench from './review-workbench.vue'
+import type {
+	ProjectReviewSidePanel,
+	ProjectReviewSlot,
+	ProjectReviewSlots,
+	ProjectReviewTab,
+} from './types'
+
+/**
+ * The review's layout: a workbench of the review's panels and tabs, along with the archive it
+ * shows (by default the latest version's primary file), either spread among those panels or in a
+ * single panel of its own, as the settings choose.
+ */
+defineProps<{
 	tabs: readonly ProjectReviewTab[]
+	sidePanels: readonly ProjectReviewSidePanel[]
+	/** Item counts shown in the panels' tabs, e.g. how many issues there are. */
+	counts?: Partial<Record<ProjectReviewSlot, number>>
 	resetKey: string
 	ready: boolean
 }>()
 const slots = defineSlots<ProjectReviewSlots>()
+const archive = injectReviewArchive()
+const settings = useModerationSettings()
 
-const layout = useProjectReviewLayout(
-	(tab) => reviewPanelLabels[tab],
-	() => props.tabs,
-	() => props.ready,
+/** Whether the whole archive is kept in a single panel, with a layout of its own. */
+const nestedArchive = computed(
+	() => settings.value.get(moderationSettings.General.ArchiveIntegration) === 'exclusive',
 )
-const { leftVisible, rightVisible, visibleRightWidth, onDividerDoubleClick } = layout
-const { heldTab, shortcutTab } = injectReviewContext()
-let heldTabKey: string | undefined
 
-watchEffect(() => {
-	document.body.style.setProperty(
-		'--project-review-right-panel-width',
-		`${visibleRightWidth.value}px`,
-	)
-})
-onScopeDispose(() => {
-	document.body.style.removeProperty('--project-review-right-panel-width')
-})
-
-function releaseHeldTab() {
-	heldTab.value = undefined
-	heldTabKey = undefined
-}
-
-function clearShortcutTab() {
-	releaseHeldTab()
-	shortcutTab.value = undefined
-}
-
-watch(
-	() => props.resetKey,
-	(resetKey, previousResetKey) => {
-		clearShortcutTab()
-		if (resetKey && previousResetKey) layout.resetActiveTabs()
+const reviewWorkbench = ref<InstanceType<typeof ReviewWorkbench>>()
+
+/** The files layout's sidebar toggle shows and hides the archive's files, wherever they are. */
+const sidebar = {
+	isOpen: () => {
+		const workbench = reviewWorkbench.value?.workbench
+		if (!workbench) return true
+		const tree = workbench.panels.value.find((panel) => panel.id === 'tree')
+		if (!tree || !workbench.isOpen('tree')) return false
+		const host = workbench.regionOf(tree)
+		return host === 'center' || workbench.visible[host].value
 	},
-)
-
-provideProjectReviewContext({ ...layout, slots })
-
-useReviewShortcut('toggle-left', () => layout.toggleSidebar('left'))
-useReviewShortcut('toggle-right', () => layout.toggleSidebar('right'))
-useReviewShortcut('reveal-right', () => layout.revealSlot('right'))
+	setOpen: (open: boolean) => {
+		const workbench = reviewWorkbench.value?.workbench
+		const tree = workbench?.panels.value.find((panel) => panel.id === 'tree')
+		if (!workbench || !tree) return
+		const host = workbench.regionOf(tree)
+		if (open) workbench.revealPanel('tree')
+		else if (host === 'center') workbench.closePanel('tree')
+		else workbench.setRegionVisible(host, false)
+	},
+}
 
-const keybinds = useModerationKeybinds()
-useReviewEventListener('keydown', (event) => {
-	if (reviewShortcutBlocked(event)) return
-	keybinds.value.handle(event, {
-		scope: 'project-review',
-		openTab: (tab) => {
-			if (!props.tabs.includes(tab)) return
-			layout.openTab(tab)
-			heldTab.value = tab
-			shortcutTab.value = tab
-			heldTabKey = event.code || event.key.toLowerCase()
-		},
-	})
+watch(archive.openRequests, () => {
+	const workbench = reviewWorkbench.value
+	workbench?.reveal(workbench.filesPanel)
 })
-useReviewEventListener('keyup', (event) => {
-	if ((event.code || event.key.toLowerCase()) === heldTabKey) releaseHeldTab()
+
+defineExpose({
+	reveal: (slot: ProjectReviewSlot) => reviewWorkbench.value?.reveal(slot),
 })
-useReviewEventListener('blur', clearShortcutTab)
-onScopeDispose(clearShortcutTab)
 </script>
 
 <style scoped>
@@ -109,43 +120,4 @@ onScopeDispose(clearShortcutTab)
 	height: 100dvh;
 	width: 100%;
 }
-
-.project-review :deep(.project-review-dock) {
-	--dv-background-color: var(--color-bg);
-	--dv-separator-border: var(--surface-4);
-	--dv-sash-color: transparent;
-	--dv-active-sash-color: transparent;
-}
-
-.project-review :deep(.dv-sash:not(.dv-disabled)::after) {
-	content: '';
-	position: absolute;
-	pointer-events: none;
-	background-color: var(--color-brand);
-	opacity: 0;
-}
-
-.project-review :deep(.dv-horizontal > .dv-sash-container > .dv-sash::after) {
-	top: 0;
-	left: 50%;
-	width: 1px;
-	height: 100%;
-}
-
-.project-review :deep(.dv-vertical > .dv-sash-container > .dv-sash::after) {
-	top: 50%;
-	left: 0;
-	width: 100%;
-	height: 1px;
-}
-
-.project-review :deep(.dv-sash:not(.dv-disabled):hover::after) {
-	opacity: 1;
-	transition: opacity 0s 0.5s;
-}
-
-.project-review :deep(.dv-sash:not(.dv-disabled):active::after) {
-	opacity: 1;
-	transition: none;
-}
 </style>
diff --git a/apps/frontend/src/components/project-review/layout/labels.ts b/apps/frontend/src/components/project-review/layout/labels.ts
index 891c2fbbf9..5c9aa78530 100644
--- a/apps/frontend/src/components/project-review/layout/labels.ts
+++ b/apps/frontend/src/components/project-review/layout/labels.ts
@@ -1,13 +1,16 @@
 import type { ProjectReviewSlot } from './types'
 
 export const reviewPanelLabels = {
-	left: 'Project details',
-	right: 'Right panel',
+	project: 'Summary',
+	rulings: 'Rulings',
+	issues: 'Issues',
+	're-review': 'Re-review',
+	thread: 'Thread',
+	settings: 'Settings',
 	description: 'Description',
 	gallery: 'Gallery',
 	disclosures: 'Disclosures',
 	permissions: 'Permissions',
 	versions: 'Versions',
 	'tech-review': 'Tech Review',
-	slicer: 'Slicer',
 } satisfies Record<ProjectReviewSlot, string>
diff --git a/apps/frontend/src/components/project-review/layout/layout-storage.ts b/apps/frontend/src/components/project-review/layout/layout-storage.ts
deleted file mode 100644
index 5c31f4e75e..0000000000
--- a/apps/frontend/src/components/project-review/layout/layout-storage.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import type { SerializedDockview } from 'dockview-vue'
-
-import { type ProjectReviewTab, projectReviewTabs } from './types'
-
-const STORAGE_KEY = 'moderation.project-review.layout.v1'
-export const reviewPopoutUrl = '/project-review-popout.html'
-
-export const workspacePanelSizes = {
-	left: { default: 400, minimum: 200 },
-	right: { default: 400, minimum: 200 },
-	center: { minimum: 20 },
-} as const
-
-export interface SavedWorkspaceLayout {
-	leftWidth: number
-	rightWidth: number
-	leftVisible: boolean
-	rightVisible: boolean
-	tabs: SerializedDockview
-	tabLayouts?: Record<string, SerializedDockview>
-}
-
-export function workspaceTabLayoutKey(tabs: readonly ProjectReviewTab[]) {
-	return projectReviewTabs.filter((tab) => tabs.includes(tab)).join(',')
-}
-
-function isValidTabLayout(layout: SerializedDockview) {
-	if (
-		!layout?.grid ||
-		!layout.panels ||
-		Object.keys(layout.panels).some(
-			(tab) => !projectReviewTabs.includes(tab as ProjectReviewTab),
-		) ||
-		layout.floatingGroups?.length ||
-		(layout.popoutGroups !== undefined && !Array.isArray(layout.popoutGroups)) ||
-		layout.edgeGroups
-	) {
-		return false
-	}
-
-	const panelIds = new Set<string>()
-	const groupIds = new Set<string>()
-	type GridNode = SerializedDockview['grid']['root']
-	function validateGroup(group: Exclude<GridNode['data'], GridNode[]>) {
-		if (
-			!group ||
-			typeof group.id !== 'string' ||
-			groupIds.has(group.id) ||
-			!Array.isArray(group.views) ||
-			(group.activeView !== undefined && !group.views.includes(group.activeView))
-		)
-			return false
-		groupIds.add(group.id)
-		for (const id of group.views) {
-			if (typeof id !== 'string' || !Object.hasOwn(layout.panels, id) || panelIds.has(id))
-				return false
-			panelIds.add(id)
-		}
-		return true
-	}
-	function validateGrid(node: GridNode): boolean {
-		if (!node) return false
-		if (node.type === 'branch') return Array.isArray(node.data) && node.data.every(validateGrid)
-		return node.type === 'leaf' && !Array.isArray(node.data) && validateGroup(node.data)
-	}
-	if (!validateGrid(layout.grid.root)) return false
-	for (const popout of layout.popoutGroups ?? []) {
-		if (
-			!popout ||
-			(popout.url !== undefined && popout.url !== reviewPopoutUrl) ||
-			!!popout.data === !!popout.grid ||
-			(popout.position !== null &&
-				(!popout.position ||
-					![popout.position.left, popout.position.top].every(Number.isFinite) ||
-					![popout.position.width, popout.position.height].every(
-						(size) => Number.isFinite(size) && size > 0,
-					))) ||
-			!(popout.grid ? validateGrid(popout.grid.root) : popout.data && validateGroup(popout.data))
-		)
-			return false
-	}
-	if (panelIds.size !== Object.keys(layout.panels).length) return false
-
-	for (const tab of projectReviewTabs) {
-		const panel = layout.panels[tab]
-		if (tab === 'permissions' && !panel) continue
-		if (
-			panel?.id !== tab ||
-			panel.contentComponent !== 'ProjectReviewPanel' ||
-			panel.params?.tab !== tab ||
-			panel.params?.slot !== tab
-		) {
-			return false
-		}
-	}
-
-	return true
-}
-
-export function readWorkspaceLayout(): SavedWorkspaceLayout | undefined {
-	try {
-		const saved: SavedWorkspaceLayout | null = JSON.parse(
-			localStorage.getItem(STORAGE_KEY) ?? 'null',
-		)
-		if (
-			!saved ||
-			![saved.leftWidth, saved.rightWidth].every(
-				(size) => typeof size === 'number' && Number.isFinite(size) && size > 0,
-			) ||
-			typeof saved.leftVisible !== 'boolean' ||
-			typeof saved.rightVisible !== 'boolean' ||
-			!isValidTabLayout(saved.tabs) ||
-			(saved.tabLayouts !== undefined &&
-				(typeof saved.tabLayouts !== 'object' ||
-					saved.tabLayouts === null ||
-					Object.entries(saved.tabLayouts).some(
-						([key, layout]) =>
-							!isValidTabLayout(layout) ||
-							key !== workspaceTabLayoutKey(Object.keys(layout.panels) as ProjectReviewTab[]),
-					)))
-		) {
-			return
-		}
-
-		for (const layout of [saved.tabs, ...Object.values(saved.tabLayouts ?? {})]) {
-			for (const popout of layout.popoutGroups ?? []) popout.url = reviewPopoutUrl
-		}
-		return saved
-	} catch {
-		return
-	}
-}
-
-export function saveWorkspaceLayout(layout: SavedWorkspaceLayout) {
-	try {
-		localStorage.setItem(STORAGE_KEY, JSON.stringify(layout))
-	} catch {
-		// no-op
-	}
-}
-
-/** Keep saved popout panels accessible in the workspace until the user restores their windows. */
-export function dockPopoutLayout(layout: SerializedDockview): SerializedDockview {
-	const result: SerializedDockview = structuredClone(layout)
-	type GridNode = SerializedDockview['grid']['root']
-	type Group = Exclude<GridNode['data'], GridNode[]>
-	function findGroupPath(node: GridNode, id: string): GridNode[] | undefined {
-		if (!Array.isArray(node.data)) return node.data.id === id ? [node] : undefined
-		for (const child of node.data) {
-			const path = findGroupPath(child, id)
-			if (path) return [node, ...path]
-		}
-	}
-	function restoreGroup(group: Group, reference?: string) {
-		const path = reference ? findGroupPath(result.grid.root, reference) : undefined
-		const existing = path?.at(-1)
-		if (existing && !Array.isArray(existing.data)) {
-			existing.data.views.push(...group.views)
-			existing.data.activeView ??= group.activeView
-			for (const node of path ?? []) node.visible = true
-			return
-		}
-		const leaf: GridNode = { type: 'leaf', data: group }
-		if (Array.isArray(result.grid.root.data)) result.grid.root.data.push(leaf)
-		else result.grid.root = { type: 'branch', data: [result.grid.root, leaf] }
-	}
-	function restoreGrid(node: GridNode, reference?: string) {
-		if (Array.isArray(node.data)) {
-			for (const child of node.data) restoreGrid(child, reference)
-		} else restoreGroup(node.data, reference)
-	}
-	for (const popout of result.popoutGroups ?? []) {
-		if (popout.data) restoreGroup(popout.data, popout.gridReferenceGroup)
-		if (popout.grid) restoreGrid(popout.grid.root, popout.gridReferenceGroup)
-	}
-	delete result.popoutGroups
-	if (result.activeGroup && !findGroupPath(result.grid.root, result.activeGroup))
-		delete result.activeGroup
-	return result
-}
diff --git a/apps/frontend/src/components/project-review/layout/panel.vue b/apps/frontend/src/components/project-review/layout/panel.vue
index 115dfb1694..18d38cd5f0 100644
--- a/apps/frontend/src/components/project-review/layout/panel.vue
+++ b/apps/frontend/src/components/project-review/layout/panel.vue
@@ -1,103 +1,27 @@
 <template>
-	<section
-		class="layout-panel h-full p-3"
-		:class="
-			slotName === 'right' ||
-			slotName === 'disclosures' ||
-			slotName === 'permissions' ||
-			slotName === 'gallery' ||
-			slotName === 'slicer'
-				? 'overflow-hidden'
-				: 'overflow-auto'
-		"
-		:inert="panelHidden"
-		:aria-label="reviewPanelLabels[slotName]"
-	>
-		<component :is="content" v-if="content" />
-		<template v-else>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ reviewPanelLabels[slotName] }}
-			</h2>
-			<p class="m-0 text-secondary">No project selected</p>
-		</template>
-	</section>
+	<SlotOutlet v-if="slots[slotName]" :slots="slots" :name="slotName" />
+	<template v-else>
+		<h2 class="m-0 text-lg font-semibold text-contrast">
+			{{ reviewPanelLabels[slotName] }}
+		</h2>
+		<p class="m-0 text-secondary">No project selected</p>
+	</template>
 </template>
 
 <script setup lang="ts">
-import type { IDockviewPanelProps } from 'dockview-vue'
-import { computed, ref, watchEffect } from 'vue'
+import { injectWorkbenchPanel, SlotOutlet } from '@modrinth/ui'
+import { computed } from 'vue'
 
 import { injectProjectReviewContext, provideReviewPanelVisible, provideReviewSlot } from './context'
 import { reviewPanelLabels } from './labels'
 import type { ProjectReviewSlot } from './types'
 
-defineOptions({ inheritAttrs: false })
-type PanelParams = { slot: ProjectReviewSlot }
+/** A review slot's content within its workbench panel, which tells it where and whether it's shown. */
+const props = defineProps<{ slotName: ProjectReviewSlot }>()
 
-const props = defineProps<{
-	params: PanelParams | IDockviewPanelProps<PanelParams>
-}>()
-const { slots, leftVisible, rightVisible } = injectProjectReviewContext()
+const { slots } = injectProjectReviewContext()
+const panel = injectWorkbenchPanel()
 
-const slotName = computed(() =>
-	'slot' in props.params ? props.params.slot : props.params.params.slot,
-)
-provideReviewSlot(slotName)
-const panelVisible = ref(true)
-watchEffect((onCleanup) => {
-	if (!('api' in props.params)) return
-	const api = props.params.api
-	panelVisible.value = api.isVisible
-	const subscription = api.onDidVisibilityChange((event) => {
-		panelVisible.value = event.isVisible
-	})
-	onCleanup(() => subscription.dispose())
-})
-provideReviewPanelVisible(panelVisible)
-const content = computed(() => slots[slotName.value])
-const panelHidden = computed(
-	() =>
-		(slotName.value === 'left' && !leftVisible.value) ||
-		(slotName.value === 'right' && !rightVisible.value),
-)
+provideReviewSlot(computed(() => props.slotName))
+provideReviewPanelVisible(panel.visible)
 </script>
-
-<style scoped>
-@property --layout-panel-scrollbar-color {
-	syntax: '<color>';
-	inherits: true;
-	initial-value: transparent;
-}
-
-.layout-panel {
-	--layout-panel-scrollbar-color: transparent;
-	transition: --layout-panel-scrollbar-color 1750ms ease;
-}
-
-.layout-panel:hover {
-	--layout-panel-scrollbar-color: var(--color-scrollbar);
-	transition-duration: 200ms;
-}
-
-.layout-panel,
-.layout-panel :deep(*) {
-	scrollbar-color: var(--layout-panel-scrollbar-color) transparent;
-}
-
-.layout-panel::-webkit-scrollbar-thumb,
-.layout-panel :deep(*::-webkit-scrollbar-thumb) {
-	background: var(--layout-panel-scrollbar-color);
-}
-
-@media (hover: none) {
-	.layout-panel {
-		--layout-panel-scrollbar-color: var(--color-scrollbar);
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.layout-panel {
-		transition: none;
-	}
-}
-</style>
diff --git a/apps/frontend/src/components/project-review/layout/popout-window.ts b/apps/frontend/src/components/project-review/layout/popout-window.ts
deleted file mode 100644
index 66d3eb812f..0000000000
--- a/apps/frontend/src/components/project-review/layout/popout-window.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import type {
-	DockviewApi,
-	DockviewGroupPanel,
-	DockviewPopoutGroupOptions,
-	IDockviewPanel,
-	SerializedDockview,
-} from 'dockview-vue'
-
-export type ReviewPopoutTarget = IDockviewPanel | DockviewGroupPanel
-export type ReviewPopoutLayout = NonNullable<SerializedDockview['popoutGroups']>[number]
-
-/** Dispose an unavailable panel while keeping its popout group available for returning tabs. */
-export function removeReviewPopoutPanel(panel: IDockviewPanel) {
-	const group = panel.group
-	group.model.removePanel(panel)
-	group.model.renderContainer.detatch(panel)
-	panel.dispose()
-}
-
-/** Restore one saved window without replacing any live popouts. */
-export async function restoreReviewPopout(api: DockviewApi, popout: ReviewPopoutLayout) {
-	type GridNode = SerializedDockview['grid']['root']
-	function dockedLayout(node: GridNode): GridNode | undefined {
-		if (Array.isArray(node.data)) {
-			const children = node.data.map(dockedLayout).filter((child): child is GridNode => !!child)
-			return children.length ? { ...node, data: children } : undefined
-		}
-		const views = node.data.views.filter((id) => api.getPanel(id)?.api.location.type === 'grid')
-		if (!views.length) return
-		return {
-			...node,
-			data: {
-				...node.data,
-				views,
-				activeView: views.includes(node.data.activeView ?? '') ? node.data.activeView : views[0],
-			},
-		}
-	}
-	function firstPanel(node: GridNode): IDockviewPanel | undefined {
-		if (!Array.isArray(node.data)) return api.getPanel(node.data.views[0])
-		return node.data.length ? firstPanel(node.data[0]) : undefined
-	}
-	function prepareGroups(node: GridNode) {
-		if (Array.isArray(node.data)) {
-			for (const child of node.data) prepareGroups(child)
-			return
-		}
-		const panels = node.data.views
-			.map((id) => api.getPanel(id))
-			.filter((panel): panel is IDockviewPanel => !!panel && panel.api.location.type === 'grid')
-		if (!panels.length) return
-		const existing = panels[0].group
-		const group =
-			existing.panels.length === panels.length && panels.every((panel) => panel.group === existing)
-				? existing
-				: api.addGroup()
-		for (const panel of panels) {
-			if (panel.group !== group) panel.api.moveTo({ group, position: 'center' })
-		}
-		if (node.data.activeView) api.getPanel(node.data.activeView)?.api.setActive()
-	}
-	function restoreGrid(node: GridNode, horizontal: boolean) {
-		if (!Array.isArray(node.data)) return
-		const children = node.data
-		for (let index = 1; index < children.length; index++) {
-			const group = firstPanel(children[index])?.group
-			const reference = firstPanel(children[index - 1])?.group
-			if (group && reference)
-				group.api.moveTo({ group: reference, position: horizontal ? 'right' : 'bottom' })
-		}
-		for (const child of children) restoreGrid(child, !horizontal)
-	}
-	function restoreSizes(node: GridNode, horizontal: boolean, width: number, height: number) {
-		if (!Array.isArray(node.data)) {
-			firstPanel(node)?.group.api.setSize({ width, height })
-			return
-		}
-		const total = node.data.reduce((sum, child) => sum + (child.size ?? 1), 0)
-		for (const child of node.data) {
-			const ratio = (child.size ?? 1) / total
-			restoreSizes(
-				child,
-				!horizontal,
-				horizontal ? width * ratio : width,
-				horizontal ? height : height * ratio,
-			)
-		}
-	}
-	try {
-		const root = dockedLayout(popout.grid?.root ?? { type: 'leaf', data: popout.data! })
-		if (!root) return true
-		const panel = firstPanel(root)
-		if (!panel) return false
-		prepareGroups(root)
-		const opened = await api.addPopoutGroup(panel.group, {
-			position: popout.position ?? undefined,
-			popoutUrl: popout.url,
-		})
-		if (opened && popout.grid) {
-			const horizontal = popout.grid.orientation === 'HORIZONTAL'
-			restoreGrid(root, horizontal)
-			const child = panel.api.getWindow()
-			restoreSizes(root, horizontal, child.innerWidth, child.innerHeight)
-		}
-		return opened
-	} catch {
-		return false
-	}
-}
-
-export function configureReviewPopout(child: Window) {
-	const workspace = document.querySelector<HTMLElement>('.project-review')
-	const tabHost = workspace?.querySelector<HTMLElement>('.project-review-tabs')
-	const container = child.document.querySelector<HTMLElement>('.dv-popout-window')
-	container?.classList.add('project-review-dock')
-	if (workspace && tabHost && container) {
-		const frame = workspace.cloneNode(false) as HTMLElement
-		const tabs = tabHost.cloneNode(false) as HTMLElement
-		frame.style.height = '100dvh'
-		tabs.style.width = '100%'
-		container.before(frame)
-		frame.appendChild(tabs)
-		tabs.appendChild(container)
-	}
-
-	function syncAppearance() {
-		for (const [source, target] of [
-			[document.documentElement, child.document.documentElement],
-			[document.body, child.document.body],
-		] as const) {
-			for (const name of ['class', 'style', 'data-theme', 'lang', 'dir']) {
-				const value = source.getAttribute(name)
-				if (name === 'style' && source === document.body) {
-					const targetStyle = (target as HTMLElement).style
-					const overflow = targetStyle.overflow
-					targetStyle.cssText = value ?? ''
-					targetStyle.overflow = overflow
-					continue
-				}
-				if (value === null) target.removeAttribute(name)
-				else target.setAttribute(name, value)
-			}
-		}
-	}
-
-	syncAppearance()
-	const observer = new MutationObserver(syncAppearance)
-	for (const element of [document.documentElement, document.body]) {
-		observer.observe(element, {
-			attributes: true,
-			attributeFilter: ['class', 'style', 'data-theme', 'lang', 'dir'],
-		})
-	}
-	child.focus()
-	return () => observer.disconnect()
-}
-
-/** Dockview opens through the main window; use the gesture's window to retain popup activation. */
-export function openReviewPopout(
-	api: DockviewApi,
-	target: ReviewPopoutTarget,
-	options: DockviewPopoutGroupOptions,
-	sourceWindow = target.api.getWindow(),
-) {
-	if (sourceWindow === window) return api.addPopoutGroup(target, options)
-	const originalOpen = window.open
-	window.open = sourceWindow.open.bind(sourceWindow)
-	try {
-		return api.addPopoutGroup(target, options)
-	} finally {
-		window.open = originalOpen
-	}
-}
diff --git a/apps/frontend/src/components/project-review/layout/review-workbench.vue b/apps/frontend/src/components/project-review/layout/review-workbench.vue
new file mode 100644
index 0000000000..2a3947d6b0
--- /dev/null
+++ b/apps/frontend/src/components/project-review/layout/review-workbench.vue
@@ -0,0 +1,455 @@
+<template>
+	<WorkbenchLayout class="min-w-0 flex-1" :workbench="workbench">
+		<template v-for="panel in reviewPanels" :key="panel.id" #[`panel-${panel.id}`]>
+			<ProjectReviewPanel :slot-name="panel.id as ProjectReviewSlot" />
+		</template>
+		<template v-if="nestedArchive" #panel-archive>
+			<ArchiveWorkbench
+				storage-key="moderation.project-review.archive"
+				workspace="project-review"
+				default-browsing="sidebar"
+				:settings-panel="false"
+			>
+				<template #toolbar>
+					<ArchiveProgress />
+				</template>
+				<template v-if="slots['archive-source']" #project-details>
+					<SlotOutlet :slots="slots" name="archive-source" :slot-props="{ projectShown }" />
+				</template>
+			</ArchiveWorkbench>
+		</template>
+		<template v-for="panel in archivePanelSlots" :key="panel" #[`panel-${panel}`]>
+			<ArchivePanel :panel="panel">
+				<template v-if="slots['archive-source']" #project-details>
+					<SlotOutlet :slots="slots" name="archive-source" :slot-props="{ projectShown }" />
+				</template>
+			</ArchivePanel>
+		</template>
+		<template #tab="{ panel }">
+			<template v-for="(member, index) in panel.members ?? [panel]" :key="member.id">
+				<span v-if="index" class="text-secondary" aria-hidden="true">·</span>
+				<component
+					:is="member.icon"
+					v-if="member.icon"
+					class="size-4 shrink-0"
+					aria-hidden="true"
+				/>
+				<ProjectReviewTabLabel
+					v-if="!(ARCHIVE_TAB_IDS as readonly string[]).includes(member.id)"
+					:tab="member.id as ProjectReviewSlot"
+				/>
+				<template v-else>
+					<span>{{ member.title }}</span>
+					<KbdChip
+						v-if="member.id === filesPanel"
+						keybind="review-panel-files"
+						class="relative bottom-px"
+					/>
+				</template>
+			</template>
+		</template>
+		<template v-if="slots.footer" #toolbar>
+			<SlotOutlet :slots="slots" name="footer" />
+		</template>
+	</WorkbenchLayout>
+	<FloatingWindow
+		v-if="slots.settings"
+		v-model:open="settingsWindow"
+		title="Settings"
+		:icon="SettingsIcon"
+		storage-key="moderation.project-review.settings-window"
+	>
+		<template #actions>
+			<IconButton
+				v-tooltip="'Open as panel'"
+				type="quiet"
+				size="sm"
+				label="Open as panel"
+				@click="settingsAsPanel"
+			>
+				<LayoutPanelLeftIcon aria-hidden="true" />
+			</IconButton>
+		</template>
+		<SlotOutlet :slots="slots" name="settings" :slot-props="{ floating: true }" />
+	</FloatingWindow>
+</template>
+
+<script setup lang="ts">
+import {
+	ClipboardListIcon,
+	CodeIcon,
+	FileTextIcon,
+	FolderArchiveIcon,
+	HistoryIcon,
+	ImagesIcon,
+	InfoIcon,
+	IssuesIcon,
+	KeyIcon,
+	LayoutPanelLeftIcon,
+	MessagesSquareIcon,
+	SettingsIcon,
+	ShieldCheckIcon,
+	VersionIcon,
+} from '@modrinth/assets'
+import {
+	ARCHIVE_PANEL_IDS,
+	ArchivePanel,
+	type ArchivePanelId,
+	ArchiveProgress,
+	ArchiveWorkbench,
+	createWorkbench,
+	FloatingWindow,
+	IconButton,
+	injectFileBrowserUI,
+	provideWorkbench,
+	SlotOutlet,
+	useArchivePanels,
+	useFileDocuments,
+	useFilesWorkspaceSettings,
+	WORKBENCH_HOSTS,
+	WORKBENCH_MODES,
+	type WorkbenchHost,
+	WorkbenchLayout,
+	type WorkbenchPanel,
+} from '@modrinth/ui'
+import { type Component, computed, onScopeDispose, ref, watch, watchEffect } from 'vue'
+
+import { useModerationKeybinds } from '~/composables/moderation'
+
+import KbdChip from '../kdb-chip.vue'
+import { injectReviewContext } from '../review-panel/context'
+import {
+	injectReviewShortcuts,
+	reviewShortcutBlocked,
+	useReviewEventListener,
+	useReviewShortcut,
+} from '../shortcuts'
+import { provideProjectReviewContext } from './context'
+import { reviewPanelLabels } from './labels'
+import ProjectReviewPanel from './panel.vue'
+import ProjectReviewTabLabel from './tab.vue'
+import type {
+	ProjectReviewSidePanel,
+	ProjectReviewSlot,
+	ProjectReviewSlots,
+	ProjectReviewTab,
+} from './types'
+
+const POPOUT_URL = '/project-review-popout.html'
+
+/** Panels that clip their own content rather than scrolling as a whole. */
+const UNSCROLLED_SLOTS: ProjectReviewSlot[] = [
+	'issues',
+	're-review',
+	'thread',
+	'disclosures',
+	'permissions',
+	'gallery',
+]
+
+/**
+ * Where each side panel starts: the project on the left, the rulings above the conversation
+ * on the right, and the settings in the center, beside the review's tabs.
+ */
+const SIDE_PANEL_PLACEMENT: Record<
+	ProjectReviewSidePanel,
+	{ region: WorkbenchHost; group: string }
+> = {
+	project: { region: 'left', group: 'project' },
+	rulings: { region: 'right', group: 'actions' },
+	issues: { region: 'right', group: 'conversation' },
+	're-review': { region: 'right', group: 'conversation' },
+	thread: { region: 'right', group: 'conversation' },
+	settings: { region: 'center', group: 'settings' },
+}
+
+/** Each panel's icon, shown on its tab and wherever its dock is collapsed to its tabs. */
+const SLOT_ICONS: Record<ProjectReviewSlot, Component> = {
+	project: InfoIcon,
+	rulings: ClipboardListIcon,
+	issues: IssuesIcon,
+	're-review': HistoryIcon,
+	thread: MessagesSquareIcon,
+	settings: SettingsIcon,
+	description: FileTextIcon,
+	gallery: ImagesIcon,
+	disclosures: ShieldCheckIcon,
+	versions: VersionIcon,
+	permissions: KeyIcon,
+	'tech-review': CodeIcon,
+}
+
+/** The archive's panels in the review: its files and their details below the project. */
+const ARCHIVE_PANELS: ArchivePanelId[] = ['tree', 'details', 'logs']
+
+/** The panel holding the whole archive, when it's kept to a single panel. */
+const ARCHIVE_PANEL = 'archive'
+
+/** Panels of the archive, whose tabs are labelled by their title. */
+const ARCHIVE_TAB_IDS = [...ARCHIVE_PANEL_IDS, ARCHIVE_PANEL]
+
+/**
+ * The review's workbench: its panels and tabs, along with the archive's panels and file tabs, or
+ * the whole archive in a single panel with a layout of its own. Placed within the review's archive
+ * session, and spreading the archive among its panels, within the files layout's workspace.
+ */
+const props = defineProps<{
+	slots: ProjectReviewSlots
+	/** Keeps the whole archive in a single panel, rather than among the review's panels. */
+	nestedArchive: boolean
+	tabs: readonly ProjectReviewTab[]
+	sidePanels: readonly ProjectReviewSidePanel[]
+	/** Item counts shown in the panels' tabs, e.g. how many issues there are. */
+	counts?: Partial<Record<ProjectReviewSlot, number>>
+	resetKey: string
+	ready: boolean
+}>()
+const slots = props.slots
+const shortcuts = injectReviewShortcuts()
+const review = injectReviewContext()
+const { heldTab, shortcutTab } = review
+let heldTabKey: string | undefined
+
+/** Panels only opened now and then, from the toolbar or the menus. */
+const CLOSED_BY_DEFAULT: ProjectReviewSlot[] = ['settings']
+
+function panelFor(slot: ProjectReviewSlot, region: WorkbenchHost, group?: string): WorkbenchPanel {
+	return {
+		closedByDefault: CLOSED_BY_DEFAULT.includes(slot),
+		id: slot,
+		title: reviewPanelLabels[slot],
+		icon: SLOT_ICONS[slot],
+		region,
+		group,
+		padded: true,
+		scroll: !UNSCROLLED_SLOTS.includes(slot),
+		minimumHeight: region === 'center' ? 120 : 80,
+	}
+}
+
+const reviewPanels = computed<WorkbenchPanel[]>(() => [
+	...props.sidePanels.map((panel) =>
+		panelFor(panel, SIDE_PANEL_PLACEMENT[panel].region, SIDE_PANEL_PLACEMENT[panel].group),
+	),
+	...props.tabs.map((tab) => panelFor(tab, 'center')),
+])
+
+const filesSettings = useFilesWorkspaceSettings('project-review', { browsing: 'sidebar' })
+
+/** Folders opened in tabs of their own trees leave no need for the files sidebar. */
+const treeTabs = computed(() => filesSettings.store.get(filesSettings.browsing) === 'tree')
+
+const archivePanels = useArchivePanels({
+	include: () => ARCHIVE_PANELS.filter((panel) => panel !== 'tree' || !treeTabs.value),
+	regions: { tree: 'left', details: 'left', logs: 'bottom' },
+	closedByDefault: ['logs'],
+})
+
+/** The archive's panels whose content is laid out here, none while it's in a single panel. */
+const archivePanelSlots = props.nestedArchive ? [] : ARCHIVE_PANELS
+
+/** The panel `L` brings forward: the archive's files, or the archive's own panel. */
+const filesPanel = props.nestedArchive ? ARCHIVE_PANEL : 'tree'
+
+const fileBrowser = injectFileBrowserUI(null)
+
+const panels = computed<WorkbenchPanel[]>(() => [
+	...reviewPanels.value,
+	...(props.nestedArchive
+		? [
+				{
+					id: ARCHIVE_PANEL,
+					title: 'Archive',
+					icon: FolderArchiveIcon,
+					region: 'center' as const,
+					scroll: false,
+					minimumHeight: 120,
+				},
+			]
+		: archivePanels.value.map((panel) => ({
+				...panel,
+				group: panel.region === 'left' ? 'archive' : undefined,
+			}))),
+])
+
+const workbench = createWorkbench({
+	panels,
+	storageKey: props.nestedArchive
+		? 'moderation.project-review.single-archive'
+		: 'moderation.project-review',
+	documents: props.nestedArchive ? undefined : useFileDocuments(),
+	mode: {
+		...WORKBENCH_MODES.review,
+		regions: ['left', 'right', 'bottom'],
+		toolbar: true,
+		movePanels: true,
+		closePanels: true,
+		headerless: [],
+		popouts: {
+			url: POPOUT_URL,
+			docks: [...WORKBENCH_HOSTS],
+			onWindow: (child) => {
+				review.close()
+				const unregister = shortcuts.registerWindow(child)
+				return () => {
+					review.close()
+					unregister()
+				}
+			},
+		},
+	},
+	variant: 'rounded',
+	sizes: {
+		left: { default: 400, minimum: 200 },
+		right: { default: 400, minimum: 200 },
+		bottom: { default: 220, minimum: 100 },
+	},
+	centerMinimum: 20,
+	ready: () => props.ready,
+})
+
+/** Provided here as well as within the layout, for the settings while they float outside it. */
+provideWorkbench(workbench)
+
+const leftVisible = workbench.visible.left
+const rightVisible = workbench.visible.right
+
+function openTab(tab: ProjectReviewTab) {
+	if (props.tabs.includes(tab)) workbench.revealPanel(tab)
+}
+
+/**
+ * Brings a panel to the front of its group, showing its region (or its window, if popped out).
+ * The archive's files, while they're browsed in tabs of trees rather than the sidebar, bring the
+ * archive's active tab forward instead.
+ */
+function reveal(slot: ProjectReviewSlot | ArchivePanelId | typeof ARCHIVE_PANEL) {
+	if (panels.value.some((panel) => panel.id === slot)) workbench.revealPanel(slot)
+	else if (slot === 'tree' && fileBrowser) {
+		fileBrowser.fileTabs.activateTab(fileBrowser.fileTabs.activeTabId.value)
+	}
+}
+
+/**
+ * Whether the project's own panel is shown, in which case the archive's details leave out the
+ * project they already show.
+ */
+const projectShown = computed(() => {
+	const project = panels.value.find((panel) => panel.id === 'project')
+	if (!project || !workbench.isOpen('project')) return false
+	const host = workbench.regionOf(project)
+	return host === 'center' || workbench.visible[host].value
+})
+
+/** Whether the settings are shown in their floating window, rather than their panel or not at all. */
+const settingsWindow = ref(false)
+
+function toggleSlot(slot: ProjectReviewSlot) {
+	if (workbench.isShown(slot)) workbench.closePanel(slot)
+	else reveal(slot)
+}
+
+function toggleSettings() {
+	if (workbench.isOpen('settings')) toggleSlot('settings')
+	else settingsWindow.value = !settingsWindow.value
+}
+
+function settingsAsPanel() {
+	settingsWindow.value = false
+	reveal('settings')
+}
+
+function settingsAsWindow() {
+	workbench.closePanel('settings')
+	settingsWindow.value = true
+}
+
+watch(
+	() => workbench.isOpen('settings'),
+	(open) => {
+		if (open) settingsWindow.value = false
+	},
+)
+
+provideProjectReviewContext({
+	slots,
+	leftVisible,
+	rightVisible,
+	visibleRightWidth: workbench.regionExtents.right,
+	toggleSidebar: (side) => workbench.toggleRegion(side),
+	counts: computed(() => props.counts ?? {}),
+	revealSlot: reveal,
+	toggleSlot,
+	toggleSettings,
+	settingsAsPanel,
+	settingsAsWindow,
+	openTab,
+	resetActiveTabs: workbench.resetActiveTabs,
+	selectedTabs: workbench.selectedPanels,
+	detachedTabs: workbench.detachedPanels,
+	popoutTab: (tab) => void workbench.popoutPanel(tab),
+	dockTab: workbench.dockPanel,
+})
+
+watchEffect(() => {
+	document.body.style.setProperty(
+		'--project-review-right-panel-width',
+		`${workbench.regionExtents.right.value}px`,
+	)
+})
+onScopeDispose(() => {
+	document.body.style.removeProperty('--project-review-right-panel-width')
+})
+
+function releaseHeldTab() {
+	heldTab.value = undefined
+	heldTabKey = undefined
+}
+
+function clearShortcutTab() {
+	releaseHeldTab()
+	shortcutTab.value = undefined
+}
+
+watch(
+	() => props.resetKey,
+	(resetKey, previousResetKey) => {
+		clearShortcutTab()
+		if (resetKey && previousResetKey) workbench.resetActiveTabs()
+	},
+)
+
+useReviewShortcut('toggle-left', () => workbench.toggleRegion('left'))
+useReviewShortcut('toggle-right', () => workbench.toggleRegion('right'))
+useReviewShortcut('reveal-right', () => workbench.setRegionVisible('right', true))
+useReviewShortcut('reveal-rulings', () => reveal('rulings'))
+useReviewShortcut('reveal-files', () => reveal(filesPanel))
+
+const keybinds = useModerationKeybinds()
+useReviewEventListener('keydown', (event) => {
+	if (reviewShortcutBlocked(event)) return
+	keybinds.value.handle(event, {
+		scope: 'project-review',
+		openTab: (tab) => {
+			if (!props.tabs.includes(tab)) return
+			openTab(tab)
+			heldTab.value = tab
+			shortcutTab.value = tab
+			heldTabKey = event.code || event.key.toLowerCase()
+		},
+	})
+})
+useReviewEventListener('keyup', (event) => {
+	if ((event.code || event.key.toLowerCase()) === heldTabKey) releaseHeldTab()
+})
+useReviewEventListener('blur', clearShortcutTab)
+onScopeDispose(clearShortcutTab)
+defineExpose({ reveal, workbench, filesPanel })
+</script>
+
+<style scoped>
+.project-review {
+	height: 100dvh;
+	width: 100%;
+}
+</style>
diff --git a/apps/frontend/src/components/project-review/layout/tab-selection.ts b/apps/frontend/src/components/project-review/layout/tab-selection.ts
deleted file mode 100644
index 27ddd8925c..0000000000
--- a/apps/frontend/src/components/project-review/layout/tab-selection.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import type { DockviewApi, IDockviewPanel } from 'dockview-vue'
-import { shallowRef } from 'vue'
-
-import { injectReviewShortcuts } from '../shortcuts'
-
-export function useTabSelection() {
-	const shortcuts = injectReviewShortcuts()
-	const selectedTabs = shallowRef<readonly string[]>([])
-	let api: DockviewApi | undefined
-	let anchor: IDockviewPanel | undefined
-	let drag:
-		| {
-				panel: IDockviewPanel
-				panels: IDockviewPanel[]
-				pendingPopout: boolean
-		  }
-		| undefined
-	let disposed = false
-
-	function clear() {
-		selectedTabs.value = []
-		anchor = undefined
-	}
-
-	function panelAt(event: Event) {
-		const target = event.target as Element | null
-		const tab = target?.closest('.dv-tab')?.querySelector<HTMLElement>('[data-review-tab]')
-		return tab?.dataset.reviewTab ? api?.getPanel(tab.dataset.reviewTab) : undefined
-	}
-
-	const stopPointer = shortcuts.listen(
-		'pointerdown',
-		(event) => {
-			if (event.button !== 0) return
-			drag = undefined
-			const panel = panelAt(event)
-			if (!panel) {
-				clear()
-				return
-			}
-			const toggle = event.metaKey || event.ctrlKey
-			if (event.shiftKey || toggle) {
-				event.preventDefault()
-				event.stopPropagation()
-				const group = panel.group
-				const previous = selectedTabs.value.filter((id) => api?.getPanel(id)?.group === group)
-				if (event.shiftKey) {
-					const start = anchor?.group === group ? anchor : (group.activePanel ?? panel)
-					const from = group.panels.indexOf(start)
-					const to = group.panels.indexOf(panel)
-					const range = group.panels.slice(Math.min(from, to), Math.max(from, to) + 1)
-					selectedTabs.value = [
-						...new Set([...(toggle ? previous : []), ...range.map((p) => p.id)]),
-					]
-					anchor = start
-				} else {
-					selectedTabs.value = previous.includes(panel.id)
-						? previous.filter((id) => id !== panel.id)
-						: [...previous, panel.id]
-					anchor = panel
-				}
-			} else {
-				if (!selectedTabs.value.includes(panel.id)) selectedTabs.value = []
-				anchor = panel
-			}
-		},
-		{ capture: true },
-	)
-	const stopClick = shortcuts.listen(
-		'click',
-		(event) => {
-			const panel = panelAt(event)
-			if (panel && (event.shiftKey || event.metaKey || event.ctrlKey)) {
-				event.preventDefault()
-				event.stopPropagation()
-			} else if (panel) selectedTabs.value = []
-			else clear()
-		},
-		{ capture: true },
-	)
-	const stopKey = shortcuts.listen('keydown', (event) => {
-		if (event.key === 'Escape') {
-			clear()
-			drag = undefined
-		}
-	})
-	const stopDragEnd = shortcuts.listen('dragend', () => {
-		const ended = drag
-		queueMicrotask(() => {
-			if (drag === ended && !ended?.pendingPopout) drag = undefined
-		})
-	})
-
-	return {
-		selectedTabs,
-		getDragPanels(id: string) {
-			return drag?.panel.id === id ? drag.panels : undefined
-		},
-		keepDragForPopout() {
-			const pending = drag
-			if (pending) pending.pendingPopout = true
-			return () => {
-				if (drag === pending) drag = undefined
-			}
-		},
-		register(target: DockviewApi) {
-			api = target
-			const subscriptions = [
-				target.onWillDragPanel(({ panel }) => {
-					const panels = panel.group.panels.filter((p) => selectedTabs.value.includes(p.id))
-					drag =
-						panels.length > 1 && panels.includes(panel)
-							? { panel, panels, pendingPopout: false }
-							: undefined
-				}),
-				target.onDidMovePanel(({ panel }) => {
-					const moved = drag
-					if (!moved || moved.panel !== panel) return
-					drag = undefined
-					queueMicrotask(() => {
-						if (disposed || target.getPanel(panel.id) !== panel) return
-						const group = panel.group
-						const panels = moved.panels.filter((p) => target.getPanel(p.id) === p)
-						const before = group.panels.slice(0, group.panels.indexOf(panel))
-						const index = before.filter((p) => !panels.includes(p)).length
-						const order = group.panels.filter((p) => !panels.includes(p))
-						order.splice(index, 0, ...panels)
-						for (const [index, panel] of order.entries()) {
-							if (group.panels[index] !== panel)
-								panel.api.moveTo({
-									group,
-									position: 'center',
-									index,
-									skipSetActive: true,
-								})
-						}
-						panel.api.setActive()
-					})
-				}),
-				target.onDidRemovePanel((panel) => {
-					selectedTabs.value = selectedTabs.value.filter((id) => id !== panel.id)
-					if (anchor === panel) anchor = undefined
-				}),
-				target.onDidLayoutFromJSON(clear),
-			]
-			return {
-				dispose() {
-					disposed = true
-					drag = undefined
-					clear()
-					stopPointer()
-					stopClick()
-					stopKey()
-					stopDragEnd()
-					for (const subscription of subscriptions) subscription.dispose()
-				},
-			}
-		},
-	}
-}
diff --git a/apps/frontend/src/components/project-review/layout/tab.vue b/apps/frontend/src/components/project-review/layout/tab.vue
new file mode 100644
index 0000000000..230c3dfb7a
--- /dev/null
+++ b/apps/frontend/src/components/project-review/layout/tab.vue
@@ -0,0 +1,34 @@
+<template>
+	<span>{{ reviewPanelLabels[tab] }}</span>
+	<span v-if="count !== undefined" class="relative top-px rounded text-xs">({{ count }})</span>
+	<KbdChip v-if="keybind" :keybind="keybind" class="relative bottom-px" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { injectProjectReviewPageContext } from '~/providers/project-review'
+
+import KbdChip from '../kdb-chip.vue'
+import { injectProjectReviewContext } from './context'
+import { reviewPanelLabels } from './labels'
+import { type ProjectReviewSlot, projectReviewTabs } from './types'
+
+/** A review panel's tab label, with its item count and keyboard shortcut. */
+const props = defineProps<{ tab: ProjectReviewSlot }>()
+
+const { tabCounts } = injectProjectReviewPageContext()
+const { counts } = injectProjectReviewContext()
+
+const count = computed(() => {
+	if (props.tab in counts.value) return counts.value[props.tab]
+	return props.tab in tabCounts.value
+		? tabCounts.value[props.tab as keyof typeof tabCounts.value]
+		: undefined
+})
+
+const keybind = computed(() => {
+	if ((projectReviewTabs as readonly string[]).includes(props.tab)) return `review-tab-${props.tab}`
+	return props.tab === 'rulings' ? 'review-panel-rulings' : undefined
+})
+</script>
diff --git a/apps/frontend/src/components/project-review/layout/tabs/tab.vue b/apps/frontend/src/components/project-review/layout/tabs/tab.vue
deleted file mode 100644
index c8b3f4bb21..0000000000
--- a/apps/frontend/src/components/project-review/layout/tabs/tab.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-	<span
-		:data-review-tab="params.params.tab"
-		class="box-border flex h-full w-full items-center justify-center whitespace-nowrap rounded-[10px] border border-solid px-2.5 text-sm font-medium transition-all active:scale-[0.97] motion-reduce:transition-none"
-		:class="[
-			isActive
-				? 'border-green bg-highlight-green text-green'
-				: 'border-transparent bg-transparent text-primary hover:bg-surface-4',
-			isSelected ? 'ring-1 ring-inset ring-primary' : '',
-		]"
-	>
-		<span>
-			{{ reviewPanelLabels[params.params.tab] }}
-		</span>
-		<span v-if="count !== undefined" class="relative top-px ml-1 rounded text-xs"
-			>({{ count }})</span
-		>
-		<KbdChip :keybind="`review-tab-${params.params.tab}`" class="relative bottom-px ml-1" />
-	</span>
-</template>
-
-<script setup lang="ts">
-import type { IDockviewPanelHeaderProps } from 'dockview-vue'
-import { computed, ref, watchEffect } from 'vue'
-
-import { injectProjectReviewPageContext } from '~/providers/project-review'
-
-import KbdChip from '../../kdb-chip.vue'
-import { injectProjectReviewContext } from '../context'
-import { reviewPanelLabels } from '../labels'
-import type { ProjectReviewTab } from '../types'
-
-const props = defineProps<{
-	params: IDockviewPanelHeaderProps<{ tab: ProjectReviewTab }>
-}>()
-
-const { tabCounts } = injectProjectReviewPageContext()
-const { selectedTabs } = injectProjectReviewContext()
-const isSelected = computed(() => selectedTabs.value.includes(props.params.params.tab))
-const count = computed(() => {
-	const tab = props.params.params.tab
-	return tab in tabCounts.value ? tabCounts.value[tab as keyof typeof tabCounts.value] : undefined
-})
-const isActive = ref(props.params.api.isVisible)
-
-watchEffect((onCleanup) => {
-	const api = props.params.api
-	isActive.value = api.isVisible
-	const subscription = api.onDidVisibilityChange((event) => {
-		isActive.value = event.isVisible
-	})
-	onCleanup(() => {
-		subscription.dispose()
-	})
-})
-</script>
diff --git a/apps/frontend/src/components/project-review/layout/tabs/tabs.vue b/apps/frontend/src/components/project-review/layout/tabs/tabs.vue
deleted file mode 100644
index 5ce45ea238..0000000000
--- a/apps/frontend/src/components/project-review/layout/tabs/tabs.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-	<div class="project-review-tabs h-full overflow-clip">
-		<DockviewVue
-			class="project-review-dock h-full"
-			:theme="theme"
-			dnd-strategy="html5"
-			disable-tabs-overflow-list
-			disable-floating-groups
-			default-tab-component="ProjectReviewTab"
-			watermark-component="ProjectReviewEmptyPopout"
-			prefix-header-actions-component="ProjectReviewLeftControl"
-			right-header-actions-component="ProjectReviewRightControl"
-			@ready="onTabsReady"
-		/>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { type DockviewTheme, DockviewVue } from 'dockview-vue'
-
-import { injectProjectReviewContext } from '../context'
-import ProjectReviewLeftControl from '../controls/left-control.vue'
-import ProjectReviewRightControl from '../controls/right-control.vue'
-import ProjectReviewEmptyPopout from '../empty-popout.vue'
-import ProjectReviewPanel from '../panel.vue'
-import ProjectReviewTab from './tab.vue'
-
-defineOptions({
-	components: {
-		ProjectReviewEmptyPopout,
-		ProjectReviewLeftControl,
-		ProjectReviewPanel,
-		ProjectReviewRightControl,
-		ProjectReviewTab,
-	},
-	inheritAttrs: false,
-})
-
-const { onTabsReady } = injectProjectReviewContext()
-const theme: DockviewTheme = {
-	name: 'modrinth',
-	className: 'project-review-dock',
-	dndOverlayMounting: 'absolute',
-	dndTabIndicator: 'line',
-	tabAnimation: 'default',
-}
-</script>
-
-<style scoped>
-.project-review-tabs :deep(.project-review-dock) {
-	--dv-activegroup-visiblepanel-tab-color: var(--color-green);
-	--dv-inactivegroup-visiblepanel-tab-color: var(--color-green);
-	--dv-activegroup-hiddenpanel-tab-color: var(--color-text-default);
-	--dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-default);
-	--dv-icon-hover-background-color: var(--surface-3);
-	--dv-tabs-container-scrollbar-color: var(--surface-5);
-	--dv-tab-divider-color: transparent;
-	--dv-tabs-and-actions-container-height: 32px;
-	--dv-tabs-and-actions-container-font-size: 14px;
-	--dv-drag-over-background-color: color-mix(in srgb, var(--color-text-default) 5%, transparent);
-	--dv-drag-over-border-color: color-mix(in srgb, var(--color-text-default) 10%, transparent);
-	--dv-drag-over-border: 1px solid var(--dv-drag-over-border-color);
-}
-
-.project-review-tabs :deep(.dv-drop-target-container) {
-	--dv-transition-duration: 70ms;
-}
-
-.project-review-tabs :deep(.dv-drop-target-anchor-line) {
-	transition: none;
-}
-
-.project-review-tabs :deep(.dv-tabs-and-actions-container) {
-	height: auto;
-	min-height: var(--dv-tabs-and-actions-container-height);
-	align-items: flex-start;
-	padding: 12px 6px 0 10px;
-	gap: 4px;
-}
-
-.project-review-tabs :deep(.dv-tabs-container) {
-	@apply rounded-xl border border-solid border-surface-5 p-0.5 shadow-sm;
-
-	flex-wrap: wrap;
-	height: auto;
-	overflow: visible;
-	align-content: flex-start;
-	gap: 4px;
-}
-
-.project-review-tabs :deep(.dv-pre-actions-container),
-.project-review-tabs :deep(.dv-left-actions-container),
-.project-review-tabs :deep(.dv-right-actions-container) {
-	height: calc(var(--dv-tabs-and-actions-container-height) + 6px);
-}
-
-.project-review-tabs :deep(.dv-void-container) {
-	display: flex;
-	min-width: 0;
-	height: auto;
-	align-self: stretch;
-}
-
-.project-review-tabs :deep(.dv-tab) {
-	height: var(--dv-tabs-and-actions-container-height);
-	padding: 0;
-	border-radius: 10px;
-}
-
-.project-review-tabs :deep(.dv-tab:focus-visible::after),
-.project-review-tabs :deep(.dv-tab:has(:focus-visible)::after) {
-	border-radius: 10px;
-	box-shadow: 0 0 0 4px var(--color-brand-shadow);
-}
-
-.project-review-tabs
-	:deep(
-		.dv-tab > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-selection-line
-	) {
-	position: absolute;
-	width: 2px !important;
-	background-color: var(--color-text-default);
-	border: none;
-	transition: none;
-}
-
-.project-review-tabs :deep(.dv-tab > .dv-drop-target-dropzone > .dv-drop-target-left) {
-	left: -1px !important;
-	right: auto !important;
-}
-
-.project-review-tabs :deep(.dv-tab > .dv-drop-target-dropzone > .dv-drop-target-right) {
-	left: auto !important;
-	right: -1px !important;
-}
-</style>
diff --git a/apps/frontend/src/components/project-review/layout/types.ts b/apps/frontend/src/components/project-review/layout/types.ts
index 5513926912..b5db6511b2 100644
--- a/apps/frontend/src/components/project-review/layout/types.ts
+++ b/apps/frontend/src/components/project-review/layout/types.ts
@@ -7,11 +7,34 @@ export const projectReviewTabs = [
 	'versions',
 	'permissions',
 	'tech-review',
-	'slicer',
 ] as const
 
 export type ProjectReviewTab = (typeof projectReviewTabs)[number]
-export type ProjectReviewSlot = ProjectReviewTab | 'left' | 'right'
+
+/**
+ * The review's panels around its tabs: the project, the review's rulings and verdict, the
+ * conversation about it, and the review's settings.
+ */
+export const projectReviewSidePanels = [
+	'project',
+	'rulings',
+	'issues',
+	're-review',
+	'thread',
+	'settings',
+] as const
+
+export type ProjectReviewSidePanel = (typeof projectReviewSidePanels)[number]
+export type ProjectReviewSlot = ProjectReviewTab | ProjectReviewSidePanel
 export type ProjectReviewSlots = {
-	[Key in ProjectReviewSlot | 'footer']?: () => VNode[]
+	/** `footer` fills the workbench's toolbar, beside its layout menu. */
+	[Key in Exclude<ProjectReviewSlot, 'settings'> | 'footer']?: () => VNode[]
+} & {
+	/** The settings, shown in their panel or, when `floating`, in a window above the review. */
+	settings?: (props: { floating?: boolean }) => VNode[]
+	/**
+	 * Where the archive shown in the archive panels comes from, atop its details. `projectShown`
+	 * tells whether the project's own panel is shown, so the project needn't be repeated.
+	 */
+	'archive-source'?: (props: { projectShown: boolean }) => VNode[]
 }
diff --git a/apps/frontend/src/components/project-review/layout/use-layout.ts b/apps/frontend/src/components/project-review/layout/use-layout.ts
deleted file mode 100644
index 6449a12075..0000000000
--- a/apps/frontend/src/components/project-review/layout/use-layout.ts
+++ /dev/null
@@ -1,801 +0,0 @@
-import { injectNotificationManager } from '@modrinth/ui'
-import { useIntervalFn } from '@vueuse/core'
-import type {
-	DockviewApi,
-	DockviewGroupPanel,
-	DockviewIDisposable,
-	DockviewPopoutGroupOptions,
-	DockviewReadyEvent,
-	DockviewWillDropEvent,
-	DockviewWillShowOverlayLocationEvent,
-	SerializedDockview,
-	SplitviewApi,
-	SplitviewReadyEvent,
-} from 'dockview-vue'
-import { getGridLocation, LayoutPriority, Orientation } from 'dockview-vue'
-import { onBeforeUnmount, ref, watchEffect } from 'vue'
-
-import { injectReviewContext } from '../review-panel/context'
-import { injectReviewShortcuts } from '../shortcuts'
-import { registerDragPopouts } from './drag-popout'
-import {
-	dockPopoutLayout,
-	readWorkspaceLayout,
-	reviewPopoutUrl,
-	saveWorkspaceLayout,
-	workspacePanelSizes,
-	workspaceTabLayoutKey,
-} from './layout-storage'
-import {
-	configureReviewPopout,
-	openReviewPopout,
-	removeReviewPopoutPanel,
-	restoreReviewPopout,
-	type ReviewPopoutLayout,
-	type ReviewPopoutTarget,
-} from './popout-window'
-import { useTabSelection } from './tab-selection'
-import { type ProjectReviewSlot, type ProjectReviewTab, projectReviewTabs } from './types'
-import { registerWrappedTabs } from './wrapped-tabs'
-
-export function useProjectReviewLayout(
-	getTitle: (tab: ProjectReviewTab) => string,
-	getTabs: () => readonly ProjectReviewTab[],
-	getReady: () => boolean,
-) {
-	const shortcuts = injectReviewShortcuts()
-	const review = injectReviewContext()
-	const tabSelection = useTabSelection()
-	const detachedTabs = ref<ProjectReviewTab[]>([])
-	const hasPopouts = ref(false)
-	const { addNotification, removeNotification } = injectNotificationManager()
-
-	const poppingOut = ref<string[]>([])
-	const popoutSources = new Map<string, string>()
-	const unavailablePopoutTabs = new Map<
-		ProjectReviewTab,
-		{ group: DockviewGroupPanel; index: number }
-	>()
-	const popoutCleanups = new Map<Window, () => void>()
-	const savedLayout = readWorkspaceLayout()
-	const leftVisible = ref(savedLayout?.leftVisible ?? true)
-	const rightVisible = ref(savedLayout?.rightVisible ?? true)
-	let leftWidth = savedLayout?.leftWidth ?? workspacePanelSizes.left.default
-	let rightWidth = savedLayout?.rightWidth ?? workspacePanelSizes.right.default
-	const visibleRightWidth = ref(rightVisible.value ? rightWidth : 0)
-	const topLeftGroupId = ref<string>()
-	const topRightGroupId = ref<string>()
-	let columns: SplitviewApi | undefined
-	let tabsReady = false
-	let leavingPage = false
-	let blockedPopoutLayout: SerializedDockview | undefined
-	let blockedPopoutBaseline: string | undefined
-	const pendingPopouts = new Map<
-		ReviewPopoutLayout,
-		{ notificationId?: string | number; opening: boolean }
-	>()
-	const documentLoaded = ref(document.readyState === 'complete')
-	let saveTimer: ReturnType<typeof setTimeout> | undefined
-	let tabs: DockviewApi | undefined
-	let currentTabLayoutKey: string | undefined
-	const tabLayouts = new Map(Object.entries(savedLayout?.tabLayouts ?? {}))
-	if (savedLayout) {
-		tabLayouts.set(
-			workspaceTabLayoutKey(Object.keys(savedLayout.tabs.panels) as ProjectReviewTab[]),
-			savedLayout.tabs,
-		)
-	}
-	const subscriptions: DockviewIDisposable[] = []
-	const { pause: stopCheckingWindows, resume: checkWindows } = useIntervalFn(
-		() => {
-			for (const tab of detachedTabs.value) {
-				const panel = tabs?.getPanel(tab)
-				if (panel?.api.location.type === 'popout' && panel.api.getWindow().closed) dockTab(tab)
-			}
-		},
-		500,
-		{ immediate: false },
-	)
-
-	function updateDetachedTabs() {
-		hasPopouts.value = !!tabs?.getPopouts().length
-		detachedTabs.value = getTabs().filter(
-			(tab) => tabs?.getPanel(tab)?.api.location.type === 'popout',
-		)
-		if (detachedTabs.value.length) checkWindows()
-		else stopCheckingWindows()
-	}
-
-	function currentTabLayout(api: DockviewApi) {
-		const layout = api.toJSON()
-		if (
-			blockedPopoutLayout &&
-			!restoringPopouts() &&
-			blockedPopoutBaseline !== JSON.stringify(layout)
-		) {
-			blockedPopoutLayout = undefined
-			blockedPopoutBaseline = undefined
-		}
-		return blockedPopoutLayout ?? layout
-	}
-
-	function saveLayout() {
-		clearTimeout(saveTimer)
-		if (!columns || !tabs || !tabsReady || leavingPage || !getReady() || !documentLoaded.value)
-			return
-		const currentLeftWidth = columns.getPanel('left')?.api.width ?? 0
-		const currentRightWidth = columns.getPanel('right')?.api.width ?? 0
-		if (leftVisible.value && currentLeftWidth > 0) leftWidth = currentLeftWidth
-		if (rightVisible.value && currentRightWidth > 0) rightWidth = currentRightWidth
-		const currentTabs = currentTabLayout(tabs)
-		if (currentTabLayoutKey) tabLayouts.set(currentTabLayoutKey, currentTabs)
-		saveWorkspaceLayout({
-			leftWidth,
-			rightWidth,
-			leftVisible: leftVisible.value,
-			rightVisible: rightVisible.value,
-			tabs: currentTabs,
-			tabLayouts: Object.fromEntries(tabLayouts),
-		})
-	}
-
-	function scheduleSave() {
-		clearTimeout(saveTimer)
-		if (leavingPage) return
-		saveTimer = setTimeout(saveLayout, 200)
-	}
-
-	function dismissRestoreNotifications() {
-		for (const pending of pendingPopouts.values()) {
-			if (pending.notificationId !== undefined) removeNotification(pending.notificationId)
-		}
-		pendingPopouts.clear()
-	}
-
-	function restoringPopouts() {
-		return [...pendingPopouts.values()].some((pending) => pending.opening)
-	}
-
-	function popoutPanelIds(popout: ReviewPopoutLayout) {
-		const ids: string[] = []
-		function collect(node: SerializedDockview['grid']['root']) {
-			if (Array.isArray(node.data)) node.data.forEach(collect)
-			else ids.push(...node.data.views)
-		}
-		if (popout.grid) collect(popout.grid.root)
-		else if (popout.data) ids.push(...popout.data.views)
-		return ids
-	}
-
-	function notifyPopoutRestoration(popout: ReviewPopoutLayout) {
-		const pending = pendingPopouts.get(popout)
-		if (!pending || pending.notificationId !== undefined) return
-		const panels = popoutPanelIds(popout)
-			.map((id) => getTitle(id as ProjectReviewTab))
-			.join(', ')
-		pending.notificationId = addNotification({
-			id: crypto.randomUUID(),
-			type: 'neutral',
-			containerClass: '!py-1.5 !pr-0.5 !pb-2 !rounded-xl',
-			title: 'Popout window closed',
-			text: `Panels from this window have been moved to the main window: ${panels}.`,
-			autoCloseMs: null,
-			noIcon: true,
-			buttons: [
-				{
-					label: 'Reopen window',
-					keepOpen: true,
-					color: 'green',
-					action: () => reopenPopout(popout),
-				},
-				{
-					label: 'Keep closed',
-					keepOpen: true,
-					action: () => keepPopoutClosed(popout),
-				},
-			],
-		}).id
-	}
-
-	function keepPopoutClosed(popout: ReviewPopoutLayout) {
-		const pending = pendingPopouts.get(popout)
-		if (!pending || pending.opening) return
-		if (pending.notificationId !== undefined) removeNotification(pending.notificationId)
-		pendingPopouts.delete(popout)
-		if (blockedPopoutLayout) {
-			const remainingPopouts = blockedPopoutLayout.popoutGroups?.filter((group) => group !== popout)
-			blockedPopoutLayout = dockPopoutLayout({
-				...blockedPopoutLayout,
-				popoutGroups: [popout],
-			})
-			blockedPopoutLayout.popoutGroups = remainingPopouts
-		}
-		if (!pendingPopouts.size) {
-			blockedPopoutLayout = undefined
-			blockedPopoutBaseline = undefined
-		}
-		scheduleSave()
-	}
-
-	async function reopenPopout(popout: ReviewPopoutLayout) {
-		const pending = pendingPopouts.get(popout)
-		if (!tabs || !pending || pending.opening || !tabsReady || leavingPage || !getReady()) return
-		currentTabLayout(tabs)
-		pending.opening = true
-		const opened = await restoreReviewPopout(tabs, popout)
-		if (pendingPopouts.get(popout) !== pending) return
-		pending.opening = false
-		if (opened) {
-			if (pending.notificationId !== undefined) removeNotification(pending.notificationId)
-			pendingPopouts.delete(popout)
-			if (!pendingPopouts.size) blockedPopoutLayout = undefined
-		} else notifyPopoutRestoration(popout)
-		syncTabs()
-		if (blockedPopoutLayout && !restoringPopouts()) {
-			blockedPopoutBaseline = JSON.stringify(tabs.toJSON())
-		}
-		scheduleSave()
-	}
-
-	function restoreTabLayout(layout: SerializedDockview) {
-		if (!tabs) return
-		dismissRestoreNotifications()
-		blockedPopoutLayout = undefined
-		blockedPopoutBaseline = undefined
-		if (layout.popoutGroups?.length) {
-			tabs.fromJSON(dockPopoutLayout(layout), { reuseExistingPanels: true })
-			blockedPopoutLayout = layout
-			blockedPopoutBaseline = JSON.stringify(tabs.toJSON())
-			for (const popout of layout.popoutGroups) pendingPopouts.set(popout, { opening: false })
-			for (const popout of layout.popoutGroups) void reopenPopout(popout)
-			return
-		}
-		tabs.fromJSON(layout, { reuseExistingPanels: true })
-	}
-
-	function updateRightPanelWidth() {
-		visibleRightWidth.value = rightVisible.value
-			? (columns?.getPanel('right')?.api.width ?? rightWidth)
-			: 0
-	}
-
-	function onColumnsReady({ api }: SplitviewReadyEvent) {
-		columns = api
-		api.addPanel({
-			id: 'left',
-			component: 'ProjectReviewPanel',
-			params: { slot: 'left' },
-			minimumSize: workspacePanelSizes.left.minimum,
-			size: leftWidth,
-		})
-		api.addPanel({
-			id: 'center',
-			component: 'ProjectReviewCenter',
-			minimumSize: workspacePanelSizes.center.minimum,
-			priority: LayoutPriority.High,
-		})
-		api.addPanel({
-			id: 'right',
-			component: 'ProjectReviewPanel',
-			params: { slot: 'right' },
-			minimumSize: workspacePanelSizes.right.minimum,
-			size: rightWidth,
-		})
-		api.getPanel('left')?.api.setSize({ size: leftWidth })
-		api.getPanel('right')?.api.setSize({ size: rightWidth })
-		api.getPanel('left')?.api.setVisible(leftVisible.value)
-		api.getPanel('right')?.api.setVisible(rightVisible.value)
-		updateRightPanelWidth()
-		subscriptions.push(
-			api.onDidLayoutChange(updateRightPanelWidth),
-			api.onDidLayoutChange(scheduleSave),
-		)
-	}
-
-	function constrainDrop(event: DockviewWillDropEvent | DockviewWillShowOverlayLocationEvent) {
-		if (!event.getData()) {
-			event.preventDefault()
-		}
-	}
-
-	function splitDroppedGroup(event: DockviewWillDropEvent) {
-		const data = event.getData()
-		const target = event.group
-		if (
-			event.defaultPrevented ||
-			event.kind !== 'content' ||
-			!target ||
-			!data ||
-			data.viewId !== event.api.id ||
-			event.position === 'center'
-		)
-			return
-
-		const horizontal = event.position === 'left' || event.position === 'right'
-		let movedPanel: ReturnType<DockviewApi['getPanel']>
-		const subscription = event.api.onDidMovePanel(({ panel, from }) => {
-			if (from.id === data.groupId && (!data.panelId || panel.id === data.panelId)) {
-				movedPanel = panel
-			}
-		})
-		queueMicrotask(() => {
-			subscription.dispose()
-			const moved = movedPanel?.group
-			if (!tabsReady || !moved || moved === target || !event.api.groups.includes(target)) return
-			const dimension = horizontal ? 'width' : 'height'
-			const minimum = horizontal ? 'minimumWidth' : 'minimumHeight'
-			const maximum = horizontal ? 'maximumWidth' : 'maximumHeight'
-			const total = target.api[dimension] + moved.api[dimension]
-			const lower = Math.max(moved[minimum], total - target[maximum])
-			const upper = Math.min(moved[maximum], total - target[minimum])
-			if (lower > upper) return
-			const size = Math.max(lower, Math.min(Math.round(total / 2), upper))
-			target.api.setSize({ [dimension]: total - size })
-			moved.api.setSize({ [dimension]: size })
-		})
-	}
-
-	function updateCornerGroups() {
-		const groups =
-			tabs?.groups
-				.filter(
-					(group) =>
-						group.api.location.type === 'grid' && group.api.isVisible && group.panels.length > 0,
-				)
-				.map((group) => ({
-					id: group.id,
-					bounds: group.element.getBoundingClientRect(),
-				})) ?? []
-		const top = Math.min(...groups.map(({ bounds }) => bounds.top))
-		const topGroups = groups.filter(({ bounds }) => Math.abs(bounds.top - top) < 1)
-		topGroups.sort((a, b) => a.bounds.left - b.bounds.left)
-		topLeftGroupId.value = topGroups[0]?.id
-		topRightGroupId.value = topGroups[topGroups.length - 1]?.id
-	}
-
-	function onTabsReady({ api }: DockviewReadyEvent) {
-		tabs = api
-		subscriptions.push(
-			registerWrappedTabs(api),
-			tabSelection.register(api),
-			registerDragPopouts(api, (target, position, sourceWindow) => {
-				const release = tabSelection.keepDragForPopout()
-				void popoutPanels(target, position, sourceWindow).finally(release)
-			}),
-			api.onDidAddPopoutGroup(({ window: child }) => {
-				updateDetachedTabs()
-				review.close()
-				const disposeWindow = shortcuts.registerWindow(child)
-				const disposeTheme = configureReviewPopout(child)
-				popoutCleanups.set(child, () => {
-					disposeWindow()
-					disposeTheme()
-				})
-			}),
-			api.onDidRemovePopoutGroup(() => {
-				updateDetachedTabs()
-				review.close()
-				const windows = new Set(api.getPopouts().map((popout) => popout.window))
-				for (const [child, cleanup] of popoutCleanups) {
-					if (windows.has(child)) continue
-					cleanup()
-					popoutCleanups.delete(child)
-				}
-			}),
-			api.onWillShowOverlay(constrainDrop),
-			api.onWillDrop(constrainDrop),
-			api.onWillDrop(splitDroppedGroup),
-			api.onDidLayoutChange(updateCornerGroups),
-			api.onDidLayoutChange(updateDetachedTabs),
-			api.onDidLayoutChange(scheduleSave),
-			api.onDidActivePanelChange(scheduleSave),
-		)
-		tabsReady = true
-		syncTabs()
-		updateCornerGroups()
-	}
-
-	function openTab(tab: ProjectReviewTab) {
-		if (!getTabs().includes(tab)) return
-		const panel = tabs?.getPanel(tab)
-		if (!panel) return
-		if (panel.api.location.type === 'popout') {
-			if (!panel.api.isVisible) {
-				panel.group.model.openPanel(panel, { skipSetGroupActive: true })
-			}
-			panel.api.getWindow().focus()
-			return
-		}
-		panel.api.setActive()
-	}
-
-	function popoutTab(
-		tab: ProjectReviewTab,
-		position?: DockviewPopoutGroupOptions['position'],
-		sourceWindow?: Window,
-	) {
-		const panel = tabs?.getPanel(tab)
-		if (panel) return popoutPanels(panel, position, sourceWindow)
-	}
-
-	async function popoutPanels(
-		target: ReviewPopoutTarget,
-		position?: DockviewPopoutGroupOptions['position'],
-		sourceWindow?: Window,
-	) {
-		const panels =
-			'panels' in target ? [...target.panels] : (tabSelection.getDragPanels(target.id) ?? [target])
-		const panelIds = panels.map((panel) => panel.id)
-		if (!tabs || !panels.length || panelIds.some((id) => poppingOut.value.includes(id))) return
-		if (target.api.location.type === 'popout' && !position) return
-		for (const panel of panels) {
-			if (panel.api.location.type === 'grid') popoutSources.set(panel.id, panel.group.id)
-		}
-		poppingOut.value = [...poppingOut.value, ...panelIds]
-		try {
-			const opened = await openReviewPopout(
-				tabs,
-				target,
-				{
-					popoutUrl: reviewPopoutUrl,
-					position,
-				},
-				sourceWindow,
-			)
-			if (!opened) notifyPopoutFailure()
-		} catch {
-			notifyPopoutFailure()
-		} finally {
-			poppingOut.value = poppingOut.value.filter((id) => !panelIds.includes(id))
-		}
-	}
-
-	function notifyPopoutFailure() {
-		addNotification({
-			type: 'error',
-			title: 'Could not open the panel window',
-		})
-	}
-
-	function dockTab(tab: ProjectReviewTab) {
-		const panel = tabs?.getPanel(tab)
-		if (!tabs || !panel || panel.api.location.type !== 'popout') return
-		const source = tabs.groups.find((group) => group.id === popoutSources.get(tab))
-		const group =
-			source?.api.location.type === 'grid' && source.panels.length
-				? source
-				: (tabs.groups.find((group) => group.api.location.type === 'grid' && group.panels.length) ??
-					tabs.addGroup())
-		panel.api.moveTo({ group, position: 'center' })
-		panel.api.setActive()
-		popoutSources.delete(tab)
-		scheduleSave()
-	}
-
-	function closeExternalPanels() {
-		blockedPopoutLayout = undefined
-		dismissRestoreNotifications()
-		for (const tab of [...detachedTabs.value]) dockTab(tab)
-		unavailablePopoutTabs.clear()
-		for (const group of tabs?.groups ?? []) {
-			if (group.api.location.type === 'popout' && !group.panels.length) tabs?.removeGroup(group)
-		}
-	}
-
-	function resetPanelLayout() {
-		if (!tabs || !tabsReady || restoringPopouts() || poppingOut.value.length) return
-		closeExternalPanels()
-		const layout = tabs.toJSON()
-		const views = projectReviewTabs.filter((tab) => getTabs().includes(tab))
-		const groupId = tabs.getPanel('description')?.group.id ?? tabs.groups[0]?.id ?? 'review-tabs'
-		tabLayouts.clear()
-		popoutSources.clear()
-		tabs.fromJSON(
-			{
-				panels: layout.panels,
-				activeGroup: groupId,
-				grid: {
-					...layout.grid,
-					orientation: Orientation.HORIZONTAL,
-					root: {
-						type: 'branch',
-						data: [
-							{
-								type: 'leaf',
-								data: { id: groupId, views, activeView: views[0] },
-							},
-						],
-					},
-				},
-			},
-			{ reuseExistingPanels: true },
-		)
-		leftWidth = workspacePanelSizes.left.default
-		rightWidth = workspacePanelSizes.right.default
-		leftVisible.value = true
-		rightVisible.value = true
-		for (const side of ['left', 'right'] as const) {
-			const panel = columns?.getPanel(side)
-			panel?.api.setVisible(true)
-			panel?.api.setSize({ size: workspacePanelSizes[side].default })
-		}
-		updateRightPanelWidth()
-		scheduleSave()
-	}
-
-	function revealSlot(slot: ProjectReviewSlot) {
-		if (slot === 'left' || slot === 'right') {
-			const visible = slot === 'left' ? leftVisible : rightVisible
-			if (!visible.value) toggleSidebar(slot)
-		} else {
-			openTab(slot)
-		}
-	}
-
-	function resetActiveTabs() {
-		for (const group of tabs?.groups ?? []) {
-			const firstPanel = group.panels[0]
-			if (firstPanel) {
-				group.model.openPanel(firstPanel, {
-					skipSetGroupActive: true,
-				})
-			}
-		}
-	}
-
-	function toggleSidebar(side: 'left' | 'right') {
-		const visible = side === 'left' ? leftVisible : rightVisible
-		const panel = columns?.getPanel(side)
-		if (!panel || !columns) return
-		if (visible.value) {
-			if (side === 'left') leftWidth = panel.api.width
-			else rightWidth = panel.api.width
-		}
-		visible.value = !visible.value
-		panel.api.setVisible(visible.value)
-		updateRightPanelWidth()
-		scheduleSave()
-	}
-
-	function onDividerDoubleClick(event: MouseEvent) {
-		if (!(event.target instanceof HTMLElement)) return
-		const sash = event.target.closest('.dv-sash:not(.dv-disabled)')
-		const container = sash?.parentElement
-		const split = container?.parentElement
-		if (!sash || !container || !split) return
-		const index = Array.from(container.children).indexOf(sash)
-		const columnSplit = split
-			.closest('.project-review-columns')
-			?.querySelector('.dv-split-view-container')
-		if (split === columnSplit && columns) {
-			const side = index === 0 ? 'left' : 'right'
-			const panel = columns.getPanel(side)
-			if (!panel?.api.isVisible) return
-			const otherSide = columns.getPanel(side === 'left' ? 'right' : 'left')
-			const otherWidth = otherSide?.api.isVisible ? otherSide.api.width : 0
-			panel.api.setSize({
-				size: Math.max(
-					workspacePanelSizes[side].minimum,
-					Math.min(
-						workspacePanelSizes[side].default,
-						columns.width - otherWidth - workspacePanelSizes.center.minimum,
-					),
-				),
-			})
-		} else if (tabs && split.closest('.project-review-tabs')) {
-			const branch = split.parentElement
-			if (!branch?.classList.contains('dv-branch-node')) return
-			const layout = tabs.toJSON()
-			let node = layout.grid.root
-			for (const childIndex of getGridLocation(branch)) {
-				if (!Array.isArray(node.data) || !node.data[childIndex]) return
-				node = node.data[childIndex]
-			}
-			if (!Array.isArray(node.data)) return
-			const before = node.data[index]
-			const after = node.data[index + 1]
-			if (!before?.size || !after?.size) return
-			const total = before.size + after.size
-			if (tabs.getPopouts().length) {
-				const horizontal = split.classList.contains('dv-horizontal')
-				const sizes: { id: string; size: number }[] = []
-				function collectSizes(node: typeof layout.grid.root, scale: number) {
-					if (Array.isArray(node.data)) {
-						for (const child of node.data) collectSizes(child, scale)
-					} else {
-						const id = node.data.id
-						const group = tabs?.groups.find((group) => group.id === id)
-						if (group)
-							sizes.push({
-								id: group.id,
-								size: (horizontal ? group.api.width : group.api.height) * scale,
-							})
-					}
-				}
-				collectSizes(before, total / 2 / before.size)
-				collectSizes(after, total / 2 / after.size)
-				for (const { id, size } of sizes) {
-					tabs.groups
-						.find((group) => group.id === id)
-						?.api.setSize(horizontal ? { width: size } : { height: size })
-				}
-			} else {
-				before.size = Math.round(total / 2)
-				after.size = total - before.size
-				tabs.fromJSON(layout, { reuseExistingPanels: true })
-			}
-			updateCornerGroups()
-		} else {
-			return
-		}
-		event.preventDefault()
-		event.stopPropagation()
-		scheduleSave()
-	}
-
-	function syncTabs() {
-		const ready = getReady() && documentLoaded.value
-		const visibleTabs = getTabs()
-		const nextTabLayoutKey = workspaceTabLayoutKey(visibleTabs)
-		const titles = new Map(visibleTabs.map((tab) => [tab, getTitle(tab)]))
-		if (!tabs || !tabsReady || restoringPopouts() || !ready) return
-		if (currentTabLayoutKey !== nextTabLayoutKey) {
-			if (currentTabLayoutKey) tabLayouts.set(currentTabLayoutKey, currentTabLayout(tabs))
-			blockedPopoutLayout = undefined
-			dismissRestoreNotifications()
-			currentTabLayoutKey = nextTabLayoutKey
-			const savedTabLayout = tabLayouts.get(nextTabLayoutKey)
-			if (savedTabLayout && !tabs.getPopouts().length) {
-				try {
-					restoreTabLayout(savedTabLayout)
-					if (restoringPopouts()) return
-				} catch {
-					tabs.clear()
-					tabLayouts.delete(nextTabLayoutKey)
-				}
-			}
-		}
-		for (const tab of projectReviewTabs) {
-			const panel = tabs.getPanel(tab)
-			if (!visibleTabs.includes(tab)) {
-				if (panel?.api.location.type === 'popout') {
-					const group = panel.group
-					unavailablePopoutTabs.set(tab, {
-						group,
-						index: group.panels.indexOf(panel),
-					})
-					removeReviewPopoutPanel(panel)
-				} else if (panel) {
-					tabs.removePanel(panel)
-					popoutSources.delete(tab)
-				}
-				continue
-			}
-			if (!panel) {
-				const previous = unavailablePopoutTabs.get(tab)
-				const popoutGroup =
-					previous &&
-					tabs.groups.includes(previous.group) &&
-					previous.group.api.location.type === 'popout' &&
-					!previous.group.api.getWindow().closed
-						? previous.group
-						: undefined
-				const referencePanel =
-					tabs.getPanel('description')?.api.location.type === 'grid'
-						? tabs.getPanel('description')
-						: tabs.panels.find((panel) => panel.api.location.type === 'grid')
-				tabs.addPanel({
-					id: tab,
-					component: 'ProjectReviewPanel',
-					title: titles.get(tab),
-					params: { tab, slot: tab },
-					renderer: 'always',
-					minimumHeight: 120,
-					inactive: true,
-					position: popoutGroup
-						? { referenceGroup: popoutGroup.id, index: previous?.index }
-						: referencePanel
-							? { referencePanel: referencePanel.id }
-							: undefined,
-				})
-				unavailablePopoutTabs.delete(tab)
-			} else {
-				panel.api.setTitle(titles.get(tab) ?? tab)
-			}
-		}
-		if (!tabs.activePanel) tabs.getPanel('description')?.api.setActive()
-	}
-
-	watchEffect(syncTabs)
-
-	/** Capture the popouts before Dockview's unload handlers return their panels to the grid. */
-	function onBeforeUnload() {
-		saveLayout()
-		leavingPage = true
-		clearTimeout(saveTimer)
-	}
-
-	function onPageShow() {
-		leavingPage = false
-	}
-
-	function resumeAfterCancelledUnload(event: Event) {
-		if (event.currentTarget === window) leavingPage = false
-	}
-
-	function preventPopoutRefresh(event: KeyboardEvent) {
-		if (event.currentTarget === window) return
-		if (
-			event.key !== 'F5' &&
-			!(
-				(event.ctrlKey || event.metaKey) &&
-				!event.altKey &&
-				(event.code === 'KeyR' || event.key.toLowerCase() === 'r')
-			)
-		)
-			return
-		event.preventDefault()
-		event.stopImmediatePropagation()
-	}
-
-	function onDocumentLoad() {
-		documentLoaded.value = true
-	}
-
-	subscriptions.push(
-		{
-			dispose: shortcuts.listen('keydown', preventPopoutRefresh, {
-				capture: true,
-			}),
-		},
-		{
-			dispose: shortcuts.listen('pointerdown', resumeAfterCancelledUnload, {
-				capture: true,
-			}),
-		},
-		{
-			dispose: shortcuts.listen('keydown', resumeAfterCancelledUnload, {
-				capture: true,
-			}),
-		},
-	)
-	window.addEventListener('beforeunload', onBeforeUnload, { capture: true })
-	window.addEventListener('load', onDocumentLoad)
-	window.addEventListener('pageshow', onPageShow)
-	window.addEventListener('pagehide', onBeforeUnload)
-	onBeforeUnmount(() => {
-		saveLayout()
-		tabsReady = false
-		clearTimeout(saveTimer)
-		dismissRestoreNotifications()
-		window.removeEventListener('load', onDocumentLoad)
-		window.removeEventListener('beforeunload', onBeforeUnload, true)
-		window.removeEventListener('pageshow', onPageShow)
-		window.removeEventListener('pagehide', onBeforeUnload)
-		subscriptions.forEach((subscription) => subscription.dispose())
-		popoutCleanups.forEach((cleanup) => cleanup())
-	})
-
-	return {
-		resetPanelLayout,
-		selectedTabs: tabSelection.selectedTabs,
-		closeExternalPanels,
-		hasPopouts,
-		detachedTabs,
-		popoutTab,
-		dockTab,
-		poppingOut,
-		leftVisible,
-		openTab,
-		revealSlot,
-		resetActiveTabs,
-		rightVisible,
-		visibleRightWidth,
-		topLeftGroupId,
-		topRightGroupId,
-		onColumnsReady,
-		onTabsReady,
-		onDividerDoubleClick,
-		toggleSidebar,
-	}
-}
diff --git a/apps/frontend/src/components/project-review/layout/wrapped-tabs.ts b/apps/frontend/src/components/project-review/layout/wrapped-tabs.ts
deleted file mode 100644
index 8b97f2119b..0000000000
--- a/apps/frontend/src/components/project-review/layout/wrapped-tabs.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { DockviewApi, DockviewGroupPanel, DockviewIDisposable } from 'dockview-vue'
-
-/** Keep wrapped tabs inside the native header-space drag and drop target. */
-export function registerWrappedTabs(api: DockviewApi): DockviewIDisposable {
-	let disposed = false
-	const cleanups = new Map<DockviewGroupPanel, () => void>()
-	/** Let individual tab targets handle reordering before the enclosing header claims the drop. */
-	const overlaySubscription = api.onWillShowOverlay((event) => {
-		if (event.kind !== 'header_space') return
-		const target = event.nativeEvent.target as Element | null
-		if (target?.closest('.dv-tab')) event.preventDefault()
-	})
-	function wrapGroup(group: DockviewGroupPanel) {
-		if (cleanups.has(group)) return
-		const tabs = group.model.tabsListElement
-		const header = tabs.closest('.dv-tabs-and-actions-container')
-		const space = header?.querySelector<HTMLElement>(':scope > .dv-void-container')
-		const strip = tabs.parentElement?.classList.contains('dv-scrollable')
-			? tabs.parentElement
-			: tabs
-		if (!space || strip.parentElement !== header) return
-		space.appendChild(strip)
-		let restoreDraggable: (() => void) | undefined
-		/** Keep the browser from picking an adjacent draggable tab when a drag starts in a narrow gap. */
-		function onPointerDown(event: PointerEvent) {
-			restoreDraggable?.()
-			if (event.button !== 0 || (event.target as Element).closest('.dv-tab')) return
-			const ownerWindow = tabs.ownerDocument.defaultView
-			if (!ownerWindow) return
-			const draggable = [...tabs.querySelectorAll<HTMLElement>('.dv-tab')].map(
-				(tab) => [tab, tab.draggable] as const,
-			)
-			for (const [tab] of draggable) tab.draggable = false
-			function restore() {
-				for (const [tab, enabled] of draggable) tab.draggable = enabled
-				ownerWindow?.removeEventListener('pointerup', restore, true)
-				ownerWindow?.removeEventListener('pagehide', restore)
-				space?.removeEventListener('dragend', restore)
-				restoreDraggable = undefined
-			}
-			restoreDraggable = restore
-			ownerWindow.addEventListener('pointerup', restore, { capture: true, once: true })
-			ownerWindow.addEventListener('pagehide', restore, { once: true })
-			space?.addEventListener('dragend', restore, { once: true })
-		}
-		function onTabDragStart(event: DragEvent) {
-			event.stopPropagation()
-		}
-		space.addEventListener('pointerdown', onPointerDown)
-		tabs.addEventListener('dragstart', onTabDragStart)
-		cleanups.set(group, () => {
-			restoreDraggable?.()
-			space.removeEventListener('pointerdown', onPointerDown)
-			tabs.removeEventListener('dragstart', onTabDragStart)
-		})
-	}
-	for (const group of api.groups) wrapGroup(group)
-	const subscription = api.onDidAddGroup((group) => {
-		queueMicrotask(() => {
-			if (!disposed && api.groups.includes(group)) wrapGroup(group)
-		})
-	})
-	const removeSubscription = api.onDidRemoveGroup((group) => {
-		cleanups.get(group)?.()
-		cleanups.delete(group)
-	})
-	return {
-		dispose() {
-			disposed = true
-			overlaySubscription.dispose()
-			subscription.dispose()
-			removeSubscription.dispose()
-			for (const cleanup of cleanups.values()) cleanup()
-			cleanups.clear()
-		},
-	}
-}
diff --git a/apps/frontend/src/components/project-review/message-thread/index.vue b/apps/frontend/src/components/project-review/message-thread/index.vue
index ba8e04ebd6..7baca36e3f 100644
--- a/apps/frontend/src/components/project-review/message-thread/index.vue
+++ b/apps/frontend/src/components/project-review/message-thread/index.vue
@@ -60,7 +60,7 @@ const {
 	members: projectMembers,
 	organizationMembers,
 } = injectProjectReviewPageContext()
-const { rightVisible, toggleSidebar } = injectProjectReviewContext()
+const { revealSlot } = injectProjectReviewContext()
 const { data: thread, isError, refetch } = threadQuery
 const auth = useAuthState()
 
@@ -139,7 +139,7 @@ watch(
 	{ flush: 'post' },
 )
 async function openEditor() {
-	if (!rightVisible.value) toggleSidebar('right')
+	revealSlot('thread')
 	isAtBottom.value = true
 	await nextTick()
 	scrollToBottom()
diff --git a/apps/frontend/src/components/project-review/message-thread/message-box.vue b/apps/frontend/src/components/project-review/message-thread/message-box.vue
index f35cda4355..d94f27aa53 100644
--- a/apps/frontend/src/components/project-review/message-thread/message-box.vue
+++ b/apps/frontend/src/components/project-review/message-thread/message-box.vue
@@ -3,7 +3,7 @@
 		ref="messageBox"
 		class="relative flex min-h-0 shrink-0 flex-col gap-1.5 border-0 border-t border-solid border-divider py-2.5 pb-px"
 		:style="{
-			height: `${height ?? 300}px`,
+			height: `${height ?? DEFAULT_HEIGHT}px`,
 		}"
 	>
 		<div
@@ -12,7 +12,7 @@
 			aria-orientation="horizontal"
 			aria-label="Resize message box"
 			:aria-valuenow="Math.round(measuredHeight)"
-			:aria-valuemin="180"
+			:aria-valuemin="MINIMUM_HEIGHT"
 			class="message-box-resize absolute -top-2 left-0 z-10 h-4 w-full cursor-row-resize touch-none"
 			:class="{ 'is-resizing': resizeStart }"
 			@pointerdown="startResize"
@@ -33,8 +33,8 @@
 				placeholder="Reply to thread…"
 				:on-image-upload="uploadImage"
 				:heading-buttons="false"
-				:hide-formatting-buttons="
-					settings.get(moderationSettings.General.HideMarkdownFormattingButtons)
+				:formatting-buttons-visibility="
+					settings.get(moderationSettings.General.MarkdownFormattingButtonsVisibility)
 				"
 				:min-height="1"
 				hide-markdown-hint
@@ -42,18 +42,27 @@
 			/>
 		</div>
 		<div class="flex shrink-0 flex-wrap justify-end gap-2">
-			<Button :disabled="!canSubmit || pending || !draft.trim()" @click="submit('note')">
+			<Button
+				:size="buttonSize"
+				:disabled="!canSubmit || pending || !draft.trim()"
+				@click="submit('note')"
+			>
 				<SpinnerIcon v-if="loadingAction === 'note'" class="animate-spin" aria-hidden="true" />
 				<StickyNotePlusIcon v-else aria-hidden="true" />
 				Private note
 			</Button>
-			<Button :disabled="!canSubmit || pending || !draft.trim()" @click="submit('reply')">
+			<Button
+				:size="buttonSize"
+				:disabled="!canSubmit || pending || !draft.trim()"
+				@click="submit('reply')"
+			>
 				<SpinnerIcon v-if="loadingAction === 'reply'" class="animate-spin" aria-hidden="true" />
 				<ReplyIcon v-else aria-hidden="true" />
 				Reply
 			</Button>
 			<Button
 				v-if="showClearIssues"
+				:size="buttonSize"
 				:disabled="!canSubmit || pending || !draft.trim()"
 				@click="submit('reply', true)"
 			>
@@ -74,7 +83,7 @@ import { ReplyIcon, SpinnerIcon, StickyNotePlusIcon } from '@modrinth/assets'
 import { getMessageTemplates, moderationSettings } from '@modrinth/moderation'
 import { IssuePriority } from '@modrinth/moderation/src/data/issues'
 import { Button } from '@modrinth/ui'
-import { useElementSize } from '@vueuse/core'
+import { useElementSize, useLocalStorage } from '@vueuse/core'
 import { computed, nextTick, ref, watch } from 'vue'
 
 import { useModerationKeybinds, useModerationSettings } from '~/composables/moderation'
@@ -86,8 +95,12 @@ import { injectReviewSubmission } from '~/providers/project-review/review-submis
 
 import TemplateMarkdownEditor from './template-markdown-editor.vue'
 
+const DEFAULT_HEIGHT = 200
+const MINIMUM_HEIGHT = 120
+
 const keybinds = useModerationKeybinds()
 const settings = useModerationSettings()
+const buttonSize = computed(() => settings.value.get(moderationSettings.General.ButtonSize))
 const { project, projectV2 } = injectProjectReviewPageContext()
 
 const panels = injectReviewPanels()
@@ -145,11 +158,12 @@ watch(
 const editor = ref<InstanceType<typeof TemplateMarkdownEditor>>()
 const messageBox = ref<HTMLElement | null>(null)
 const { height: measuredHeight } = useElementSize(messageBox)
-const height = ref<number | null>(null)
+/** The height the moderator resized the box to, kept between reviews; `null` for the default. */
+const height = useLocalStorage<number | null>('project-review.message-box-height', null)
 const resizeStart = ref<{ y: number; height: number } | null>(null)
 
 function setHeight(value: number) {
-	height.value = Math.max(180, value)
+	height.value = Math.max(MINIMUM_HEIGHT, value)
 }
 function startResize(event: PointerEvent) {
 	if (event.button !== 0) return
diff --git a/apps/frontend/src/components/project-review/project-info/corner-wrap.vue b/apps/frontend/src/components/project-review/project-info/corner-wrap.vue
new file mode 100644
index 0000000000..bee7a771c5
--- /dev/null
+++ b/apps/frontend/src/components/project-review/project-info/corner-wrap.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = withDefaults(defineProps<{ gap?: string }>(), { gap: '2px' })
+
+const cornerEl = ref<HTMLElement | null>(null)
+const w = ref('0px')
+const h = ref('0px')
+let ro: ResizeObserver | undefined
+
+onMounted(() => {
+	ro = new ResizeObserver(([entry]) => {
+		const { inlineSize, blockSize } = entry.borderBoxSize[0]
+		console.log(inlineSize, blockSize)
+		w.value = `${inlineSize}px`
+		h.value = `${blockSize}px`
+	})
+	if (cornerEl.value) ro.observe(cornerEl.value)
+})
+onBeforeUnmount(() => ro?.disconnect())
+</script>
+
+<template>
+	<div class="corner-wrap">
+		<div ref="cornerEl" class="corner"><slot name="corner" /></div>
+		<div class="spacer" aria-hidden="true" />
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+.corner-wrap {
+	position: relative;
+}
+.corner {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+.spacer {
+	float: right;
+	width: v-bind(w);
+	height: v-bind(h);
+	margin-left: v-bind('props.gap');
+}
+</style>
diff --git a/apps/frontend/src/components/project-review/project-info/project/compatibility.vue b/apps/frontend/src/components/project-review/project-info/project/compatibility.vue
index d5d570a42b..fc62921e69 100644
--- a/apps/frontend/src/components/project-review/project-info/project/compatibility.vue
+++ b/apps/frontend/src/components/project-review/project-info/project/compatibility.vue
@@ -1,7 +1,7 @@
 <template>
 	<Section heading="Compatibility" :target="{ kind: 'compatibility' }">
 		<dl class="m-0 grid grid-cols-[max-content_minmax(0,1fr)] gap-x-3 gap-y-2.5">
-			<dt class="text-sm font-medium text-secondary">Game versions</dt>
+			<dt class="text-sm font-medium text-secondary">{{ showHeader ? 'Game versions' : '' }}</dt>
 			<dd class="m-0 flex flex-wrap items-start gap-1">
 				<TagItem
 					v-for="version in gameVersions"
@@ -12,7 +12,7 @@
 				<span v-if="compatibilityError">Unavailable</span>
 				<span v-else-if="gameVersions.length === 0">No versions</span>
 			</dd>
-			<dt class="text-sm font-medium text-secondary">Platforms</dt>
+			<dt class="text-sm font-medium text-secondary">{{ showHeader ? 'Platforms' : '' }}</dt>
 			<dd class="m-0 flex flex-wrap items-start gap-1">
 				<TagItem
 					v-for="loader in project?.loaders"
@@ -29,7 +29,9 @@
 				<span v-if="!project?.loaders.length">No platforms</span>
 			</dd>
 			<template v-if="requiresEnvironmentInfo(project?.project_types ?? [])">
-				<dt class="text-sm font-medium text-secondary">Environments</dt>
+				<dt class="text-sm font-medium text-secondary">
+					{{ showHeader ? 'Environments' : '' }}
+				</dt>
 				<dd class="m-0 flex flex-wrap items-start gap-1">
 					<TagItem
 						v-for="environment in project?.environment"
@@ -46,10 +48,11 @@
 
 <script setup lang="ts">
 import { getLoaderIcon } from '@modrinth/assets'
-import { requiresEnvironmentInfo } from '@modrinth/moderation'
+import { moderationSettings, requiresEnvironmentInfo } from '@modrinth/moderation'
 import { injectTags, TagItem } from '@modrinth/ui'
 import { formatVersionsForDisplay } from '@modrinth/utils'
 
+import { useModerationSettings } from '~/composables/moderation'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
 
 import Section from '../section.vue'
@@ -68,6 +71,12 @@ const environmentLabels = {
 	unknown: 'Unknown environment',
 }
 
+const settings = useModerationSettings()
+
+const showHeader = computed(() =>
+	settings.value.get(moderationSettings.General.SectionHeadersVisible),
+)
+
 const { project, projectV2, compatibilityError } = injectProjectReviewPageContext()
 
 const tags = injectTags(null)
diff --git a/apps/frontend/src/components/project-review/project-info/project/icon.vue b/apps/frontend/src/components/project-review/project-info/project/icon.vue
index c99601f9c7..6624dfb7e1 100644
--- a/apps/frontend/src/components/project-review/project-info/project/icon.vue
+++ b/apps/frontend/src/components/project-review/project-info/project/icon.vue
@@ -8,7 +8,7 @@
 			<button
 				v-if="iconUrl"
 				type="button"
-				class="w-fit cursor-zoom-in rounded-xl border-0 bg-transparent p-0"
+				class="flex w-fit cursor-zoom-in rounded-xl border-0 bg-transparent p-0"
 				aria-label="View enlarged project icon"
 				@click="viewer?.show(0)"
 			>
diff --git a/apps/frontend/src/components/project-review/project-info/project/links.vue b/apps/frontend/src/components/project-review/project-info/project/links.vue
index 5a7cef447c..25e5b0d363 100644
--- a/apps/frontend/src/components/project-review/project-info/project/links.vue
+++ b/apps/frontend/src/components/project-review/project-info/project/links.vue
@@ -13,7 +13,10 @@
 				class="min-w-0"
 			>
 				<div class="flex flex-col gap-1">
-					<h4 class="m-0 flex items-center gap-2 text-sm font-medium text-secondary">
+					<h4
+						v-if="showHeader"
+						class="m-0 flex items-center gap-2 text-sm font-medium text-secondary"
+					>
 						{{ link.label }}
 						<TagItem
 							v-if="link.key === 'source' && project && licenseRequiresSource(project.license.id)"
@@ -86,11 +89,12 @@ import {
 	TriangleAlertIcon,
 	WikiIcon,
 } from '@modrinth/assets'
-import { licenseRequiresSource } from '@modrinth/moderation'
+import { licenseRequiresSource, moderationSettings } from '@modrinth/moderation'
 import { injectModrinthClient, TagItem } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
+import { useModerationSettings } from '~/composables/moderation'
 import { projectQueryOptions, STALE_TIME } from '~/composables/queries/project'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
 import { reviewExternalUrl } from '~/providers/project-review/project-links'
@@ -103,6 +107,12 @@ import EditButton from '../edit/button.vue'
 import EditModal from '../edit/links.vue'
 import Section from '../section.vue'
 
+const settings = useModerationSettings()
+
+const showHeader = computed(() =>
+	settings.value.get(moderationSettings.General.SectionHeadersVisible),
+)
+
 const { project, projectId } = injectProjectReviewPageContext()
 const { previousLinks } = injectReviewPanels()
 
diff --git a/apps/frontend/src/components/project-review/project-info/section.vue b/apps/frontend/src/components/project-review/project-info/section.vue
index 556137c694..54fa4dc2f0 100644
--- a/apps/frontend/src/components/project-review/project-info/section.vue
+++ b/apps/frontend/src/components/project-review/project-info/section.vue
@@ -4,29 +4,51 @@
 		v-bind="target ? { mode: 'anchored', as: 'section', target, showFindingBadge: false } : {}"
 		:aria-label="heading"
 		class="review-section"
-		:class="{ 'editable-review-section': !!$slots.right }"
+		:class="[
+			{ 'editable-review-section': !!$slots.right },
+			settings.get(moderationSettings.General.SectionReducedGap)
+				? 'gap-1 pb-1.5 pt-1.5'
+				: 'gap-2 pb-3 pt-3',
+		]"
 	>
-		<div class="flex items-center gap-1">
-			<div class="flex flex-1 items-center gap-1">
-				<h3 class="m-0 text-sm font-semibold text-secondary">{{ heading }}</h3>
-				<slot name="heading-after" />
+		<template v-if="showHeader">
+			<div class="flex items-center gap-1">
+				<div class="flex flex-1 items-center gap-1">
+					<h3 class="m-0 text-sm font-semibold text-secondary">{{ heading }}</h3>
+					<slot name="heading-after" />
+				</div>
+				<div
+					v-if="$slots.right || selectedFindingCount > 0 || reReviewFindingCount > 0"
+					class="flex shrink-0 items-center gap-2"
+				>
+					<slot name="right" />
+					<ReReviewFindingsCountBadge :count="reReviewFindingCount" />
+					<FindingsCountBadge :count="selectedFindingCount" />
+				</div>
 			</div>
-			<div
-				v-if="$slots.right || selectedFindingCount > 0 || reReviewFindingCount > 0"
-				class="flex shrink-0 items-center gap-2"
-			>
-				<slot name="right" />
-				<ReReviewFindingsCountBadge :count="reReviewFindingCount" />
-				<FindingsCountBadge :count="selectedFindingCount" />
-			</div>
-		</div>
-		<slot />
+			<slot />
+		</template>
+		<template v-else>
+			<corner-wrap>
+				<template #corner>
+					<div class="flex items-center gap-1">
+						<slot name="right" />
+						<ReReviewFindingsCountBadge :count="reReviewFindingCount" />
+						<FindingsCountBadge :count="selectedFindingCount" />
+					</div>
+				</template>
+				<slot />
+			</corner-wrap>
+		</template>
 	</component>
 </template>
 
 <script setup lang="ts">
+import { moderationSettings } from '@modrinth/moderation'
 import { computed } from 'vue'
 
+import CornerWrap from '~/components/project-review/project-info/corner-wrap.vue'
+import { useModerationSettings } from '~/composables/moderation.ts'
 import type { ReviewTarget } from '~/providers/project-review/review'
 import { injectReviewPanels } from '~/providers/project-review/review-panels'
 import { injectReviewPreviousIssues } from '~/providers/project-review/review-previous-issues'
@@ -35,6 +57,12 @@ import FindingsCountBadge from '../review-panel/findings-count-badge.vue'
 import ReviewPanel from '../review-panel/index.vue'
 import ReReviewFindingsCountBadge from '../review-panel/re-review-findings-count-badge.vue'
 
+const settings = useModerationSettings()
+
+const showHeader = computed(() =>
+	settings.value.get(moderationSettings.General.SectionHeadersVisible),
+)
+
 const props = defineProps<{
 	heading: string
 	target?: ReviewTarget
@@ -53,6 +81,6 @@ const selectedFindingCount = computed(() => {
 
 <style scoped>
 .review-section {
-	@apply flex flex-col gap-2 border-0 border-t border-solid border-divider px-0.5 pb-3 pt-3;
+	@apply flex flex-col border-0 border-t border-solid border-divider px-0.5;
 }
 </style>
diff --git a/apps/frontend/src/components/project-review/project-wide-checks.vue b/apps/frontend/src/components/project-review/project-wide-checks.vue
index 9f3a0ed19b..3704f82791 100644
--- a/apps/frontend/src/components/project-review/project-wide-checks.vue
+++ b/apps/frontend/src/components/project-review/project-wide-checks.vue
@@ -1,16 +1,16 @@
 <template>
-	<div
-		v-if="visibleTargets.length"
-		ref="actionsElement"
-		class="relative flex min-h-0 min-w-0 shrink-0 flex-col border-0 border-b border-solid border-divider"
-		:style="{
-			height: `${actionsHeight ?? 218}px`,
-			maxHeight: 'max(80px, calc(100% - 300px))',
-		}"
-	>
-		<div
-			class="-mx-1 flex min-h-0 min-w-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-2 pb-4 pt-0"
-		>
+	<div v-if="visibleTargets.length" class="flex min-h-0 min-w-0 flex-1 flex-col gap-4 p-0">
+		<template v-if="stacked">
+			<ReviewPanel
+				v-for="target in visibleTargets"
+				:key="target"
+				mode="inline"
+				inline-title
+				class="min-w-0 shrink-0"
+				:target="{ kind: 'panel', key: target }"
+			/>
+		</template>
+		<template v-else>
 			<Tabs
 				:value="selectedTarget"
 				:tabs="tabs"
@@ -22,94 +22,49 @@
 				v-if="selectedTarget !== undefined && visibleTargets.includes(selectedTarget)"
 				:key="selectedTarget"
 				mode="inline"
+				inline-title
 				class="min-w-0 shrink-0"
 				:target="{ kind: 'panel', key: selectedTarget }"
 			/>
-		</div>
-		<div
-			role="separator"
-			tabindex="0"
-			aria-orientation="horizontal"
-			aria-label="Resize project checks"
-			:aria-valuenow="Math.round(measuredHeight)"
-			:aria-valuemin="80"
-			:aria-valuemax="maxActionsHeight"
-			class="actions-resize absolute -bottom-2 left-0 z-10 h-4 w-full cursor-row-resize touch-none"
-			:class="{ 'is-resizing': actionsDrag }"
-			@pointerdown="startActionsResize"
-			@pointermove="resizeActions"
-			@pointerup="stopActionsResize"
-			@pointercancel="stopActionsResize"
-			@lostpointercapture="stopActionsResize"
-			@dblclick.prevent="actionsHeight = null"
-			@keydown.up.prevent="setActionsHeight(measuredHeight - 20)"
-			@keydown.down.prevent="setActionsHeight(measuredHeight + 20)"
-		/>
+		</template>
 	</div>
+	<div v-else class="min-h-0 flex-1" />
 </template>
 
 <script setup lang="ts">
+import { moderationSettings } from '@modrinth/moderation'
 import { type MiscReviewPanelKey, reviewPanels } from '@modrinth/moderation/src/data/issues'
 import { Tabs } from '@modrinth/ui'
-import { useElementSize } from '@vueuse/core'
 import { computed, onScopeDispose, ref, watch } from 'vue'
 
+import { useModerationSettings } from '~/composables/moderation'
 import { injectReviewPanels } from '~/providers/project-review/review-panels'
 
+import { injectProjectReviewContext } from './layout/context'
 import { injectReviewContext } from './review-panel/context'
 import ReviewPanel from './review-panel/index.vue'
-import { injectReviewShortcuts, useReviewShortcut } from './shortcuts'
-
-const actionsElement = ref<HTMLElement | null>(null)
-const { height: measuredHeight } = useElementSize(actionsElement)
-const actionsHeight = ref<number | null>(null)
-const actionsDrag = ref<{ y: number; height: number } | null>(null)
-const maxActionsHeight = ref(400)
-
-function setActionsHeight(height: number) {
-	maxActionsHeight.value = Math.max(
-		80,
-		(actionsElement.value?.parentElement?.clientHeight ?? 700) - 300,
-	)
-	actionsHeight.value = Math.min(maxActionsHeight.value, Math.max(80, height))
-}
-
-function startActionsResize(event: PointerEvent) {
-	if (event.button !== 0) return
-	event.preventDefault()
-	const target = event.currentTarget as HTMLElement
-	target.setPointerCapture(event.pointerId)
-	actionsDrag.value = { y: event.clientY, height: measuredHeight.value }
-}
-
-function resizeActions(event: PointerEvent) {
-	if (actionsDrag.value) {
-		setActionsHeight(actionsDrag.value.height + event.clientY - actionsDrag.value.y)
-	}
-}
-
-function stopActionsResize(event: PointerEvent) {
-	actionsDrag.value = null
-	const target = event.currentTarget as HTMLElement
-	if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId)
-}
+import { useReviewShortcut } from './shortcuts'
 
+/**
+ * The rulings, i.e. the project-wide checks (re-review, post-approval, reupload, rule following):
+ * one at a time by tabs, or all of them at once as the settings choose.
+ */
 const { resolve } = injectReviewPanels()
+const settings = useModerationSettings()
+const stacked = computed(() => settings.value.get(moderationSettings.General.MergeRulings))
 type ActionTarget = MiscReviewPanelKey
 const selectedTarget = ref<ActionTarget | undefined>(reviewPanels.misc[0]?.key)
-const shortcuts = injectReviewShortcuts()
+const { revealSlot } = injectProjectReviewContext()
 const { registerRoute } = injectReviewContext()
 for (const { key: target } of reviewPanels.misc) {
-	if (target !== 're-review-misc') {
-		useReviewShortcut(
-			target,
-			() => {
-				selectedTarget.value = target
-				shortcuts.run('reveal-right')
-			},
-			() => visibleTargets.value.includes(target),
-		)
-	}
+	useReviewShortcut(
+		target,
+		() => {
+			selectedTarget.value = target
+			revealSlot('rulings')
+		},
+		() => visibleTargets.value.includes(target),
+	)
 	onScopeDispose(
 		registerRoute(target, () => {
 			selectedTarget.value = target
@@ -129,7 +84,7 @@ useReviewShortcut(
 		const currentIndex =
 			selectedTarget.value === undefined ? -1 : targets.indexOf(selectedTarget.value)
 		selectedTarget.value = targets[(currentIndex + 1) % targets.length]
-		shortcuts.run('reveal-right')
+		revealSlot('rulings')
 	},
 	() => visibleTargets.value.length > 0,
 )
@@ -144,28 +99,3 @@ watch(
 	{ immediate: true },
 )
 </script>
-
-<style scoped>
-.actions-resize::after {
-	content: '';
-	position: absolute;
-	top: calc(50% - 1px);
-	left: 0;
-	width: 100%;
-	height: 1px;
-	pointer-events: none;
-	background-color: var(--color-brand);
-	opacity: 0;
-}
-
-.actions-resize:hover::after {
-	opacity: 1;
-	transition: opacity 0s 0.5s;
-}
-
-.actions-resize:focus-visible::after,
-.actions-resize.is-resizing::after {
-	opacity: 1;
-	transition: none;
-}
-</style>
diff --git a/apps/frontend/src/components/project-review/queue-bar.vue b/apps/frontend/src/components/project-review/queue-bar.vue
index 2221444578..73ea49eec8 100644
--- a/apps/frontend/src/components/project-review/queue-bar.vue
+++ b/apps/frontend/src/components/project-review/queue-bar.vue
@@ -1,69 +1,23 @@
 <template>
-	<footer class="shrink-0 border-0 border-t border-solid border-divider text-sm">
-		<div v-if="navigationError" role="alert" class="px-3 py-2 text-red">
+	<div class="flex min-w-0 flex-1 flex-col text-sm">
+		<div v-if="navigationError" role="alert" class="px-1 py-1 text-red">
 			Could not change projects. Please try again
 		</div>
 		<nav
-			class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 px-2 pr-2.5 text-secondary"
+			class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-secondary"
 			aria-label="Review queue navigation"
 			:aria-busy="busy"
 		>
 			<div class="flex items-center gap-3 font-medium" aria-live="polite">
-				<div class="flex">
-					<button
-						v-tooltip="{
-							text: 'Settings',
-							delay: 500,
-						}"
-						type="button"
-						class="queue-action"
-						aria-label="Settings"
-						@click="settingsModal?.show($event)"
-					>
-						<SettingsIcon aria-hidden="true" />
-					</button>
-					<FloatingMenu
-						placement="top-start"
-						:flip="false"
-						@open="panelMenuOpen = true"
-						@close="panelMenuOpen = false"
-					>
-						<button
-							v-tooltip="{
-								text: 'Panel layout',
-								delay: 500,
-							}"
-							type="button"
-							class="queue-action"
-							aria-label="Panel layout"
-							:aria-expanded="panelMenuOpen"
-						>
-							<LayoutPanelLeftIcon aria-hidden="true" />
-						</button>
-						<template #popper="{ hide }">
-							<div class="flex flex-col gap-1">
-								<Button
-									type="quiet"
-									class="justify-start"
-									:disabled="isLoading || poppingOut.length > 0"
-									@click="runPanelAction(resetPanelLayout, hide)"
-								>
-									<RotateCounterClockwiseIcon aria-hidden="true" />
-									Reset panel layout
-								</Button>
-								<Button
-									v-if="hasPopouts"
-									type="quiet"
-									class="justify-start"
-									@click="runPanelAction(closeExternalPanels, hide)"
-								>
-									<MonitorXIcon aria-hidden="true" />
-									Close popout windows
-								</Button>
-							</div>
-						</template>
-					</FloatingMenu>
-				</div>
+				<button
+					v-tooltip="{ text: 'Settings', delay: 500 }"
+					type="button"
+					class="queue-action"
+					aria-label="Settings"
+					@click="toggleSettings"
+				>
+					<SettingsIcon aria-hidden="true" />
+				</button>
 
 				<div class="flex items-center gap-2">
 					<template v-for="(column, index) in queueColumns" :key="column.label">
@@ -107,102 +61,23 @@
 				</button>
 			</div>
 		</nav>
-	</footer>
-	<TabbedModal ref="settingsModal" header="Settings" :tabs="settingsTabs" width="60rem">
-		<template v-if="!isLocal" #footer>
-			<p class="m-0 shrink-0 break-words text-xs text-secondary">
-				Based on
-				<a
-					v-if="config.public.owner && config.public.branch"
-					class="hover:underline"
-					target="_blank"
-					rel="noopener"
-					:href="`https://github.com/${config.public.owner}/code/tree/${config.public.branch}`"
-				>
-					{{ config.public.owner }}/{{ config.public.branch }}
-				</a>
-				@
-				<span v-if="config.public.hash === 'unknown'">unknown</span>
-				<AutoLink
-					v-else
-					class="text-link"
-					target="_blank"
-					:to="`https://github.com/${config.public.owner}/code/commit/${config.public.hash}`"
-				>
-					{{ config.public.hash }}
-				</AutoLink>
-			</p>
-		</template>
-		<template #content="{ tab }">
-			<component :is="tab.content" v-if="tab?.content" embedded />
-		</template>
-	</TabbedModal>
+	</div>
 </template>
 
 <script setup lang="ts">
-import {
-	KeyboardIcon,
-	LayoutPanelLeftIcon,
-	LeftArrowIcon,
-	MonitorXIcon,
-	PaletteIcon,
-	RightArrowIcon,
-	RotateCounterClockwiseIcon,
-	SettingsIcon,
-} from '@modrinth/assets'
-import { AutoLink, Button, FloatingMenu, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
-import { computed, ref } from 'vue'
+import { LeftArrowIcon, RightArrowIcon, SettingsIcon } from '@modrinth/assets'
+import { FloatingMenu } from '@modrinth/ui'
+import { computed } from 'vue'
 
-import ModerationAppearance from '~/components/ui/moderation/settings/ModerationAppearance.vue'
-import ModerationKeybinds from '~/components/ui/moderation/settings/ModerationKeybinds.vue'
-import ModerationSettings from '~/components/ui/moderation/settings/ModerationSettings.vue'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
 
 import { injectProjectReviewContext } from './layout/context'
 import QueueProjectList from './queue-project-list.vue'
 import { useReviewShortcut } from './shortcuts'
 
-const config = useRuntimeConfig()
-const { hostname } = useRequestURL()
-const isLocal =
-	import.meta.dev ||
-	hostname === 'localhost' ||
-	hostname.endsWith('.localhost') ||
-	hostname.startsWith('127.') ||
-	hostname === '[::1]'
-
-const panelMenuOpen = ref(false)
-const settingsModal = ref<InstanceType<typeof TabbedModal> | null>(null)
-const settingsTabs: TabbedModalTab[] = [
-	{
-		name: {
-			id: 'moderation.project-review.generalSettings',
-			defaultMessage: 'General',
-		},
-		icon: SettingsIcon,
-		content: ModerationSettings,
-	},
-	{
-		name: {
-			id: 'moderation.project-review.appearanceSettings',
-			defaultMessage: 'Appearance',
-		},
-		icon: PaletteIcon,
-		content: ModerationAppearance,
-	},
-	{
-		name: {
-			id: 'moderation.project-review.keybindsSettings',
-			defaultMessage: 'Keybinds',
-		},
-		icon: KeyboardIcon,
-		content: ModerationKeybinds,
-	},
-]
+const { toggleSettings } = injectProjectReviewContext()
 
 const { queue, isLoading, navigation } = injectProjectReviewPageContext()
-const { hasPopouts, closeExternalPanels, resetPanelLayout, poppingOut } =
-	injectProjectReviewContext()
 const {
 	busy,
 	error: navigationError,
@@ -245,11 +120,6 @@ const queueColumns = computed(() => {
 	]
 })
 
-function runPanelAction(action: () => void, hide: () => void) {
-	action()
-	hide()
-}
-
 useReviewShortcut(
 	'back',
 	() => {
@@ -278,7 +148,7 @@ useReviewShortcut(
 	display: inline-flex;
 	align-items: center;
 	gap: 0.25rem;
-	padding: 0.625rem 0.375rem;
+	padding: 0.375rem;
 	background: transparent;
 	color: inherit;
 	font: inherit;
diff --git a/apps/frontend/src/components/project-review/review-outcome-buttons/index.vue b/apps/frontend/src/components/project-review/review-outcome-buttons/index.vue
index 9fa3414450..174710d288 100644
--- a/apps/frontend/src/components/project-review/review-outcome-buttons/index.vue
+++ b/apps/frontend/src/components/project-review/review-outcome-buttons/index.vue
@@ -11,6 +11,7 @@
 			v-for="action in actions"
 			:key="action.status"
 			class="grow"
+			:size="buttonSize"
 			:type="action.type"
 			:color="action.color"
 			:disabled="!actionAvailable(action.status)"
@@ -23,7 +24,12 @@
 			/>
 			{{ action.label }}
 		</Button>
-		<TeleportOverflowMenu label="More options" :options="overflowActions" :circular="false">
+		<TeleportOverflowMenu
+			:size="buttonSize"
+			label="More options"
+			:options="overflowActions"
+			:circular="false"
+		>
 			<MoreHorizontalIcon aria-hidden="true" />
 			<template #send-to-review>
 				<ScaleIcon aria-hidden="true" />
@@ -60,6 +66,7 @@ import ModerationLockedCard from './moderation-locked-card.vue'
 const { project, navigation, queue, lock } = injectProjectReviewPageContext()
 const { heldBy } = lock
 const settings = useModerationSettings()
+const buttonSize = computed(() => settings.value.get(moderationSettings.General.ButtonSize))
 const {
 	canSubmit,
 	canApprove,
diff --git a/apps/frontend/src/components/project-review/review-panel/controls/action-button.vue b/apps/frontend/src/components/project-review/review-panel/controls/action-button.vue
index 9aba0349a8..7373ff9b7e 100644
--- a/apps/frontend/src/components/project-review/review-panel/controls/action-button.vue
+++ b/apps/frontend/src/components/project-review/review-panel/controls/action-button.vue
@@ -13,13 +13,16 @@
 					}
 				: undefined
 		"
-		class="action-toggle !h-auto min-h-8 max-w-full !gap-1.5 !whitespace-normal !rounded-lg !px-2.5 !font-medium [&>svg]:!text-inherit"
-		:class="{
-			'!brightness-100': modelValue,
-			'!text-primary enabled:hover:!brightness-125': !modelValue,
-			'action-toggle-selected !text-contrast': modelValue || mixed,
-		}"
-		size="sm"
+		class="action-toggle !h-auto max-w-full !gap-1.5 !whitespace-normal !rounded-lg !font-medium [&>svg]:!text-inherit"
+		:class="[
+			SIZE_CLASSES[size],
+			{
+				'!brightness-100': modelValue,
+				'!text-primary enabled:hover:!brightness-125': !modelValue,
+				'action-toggle-selected !text-contrast': modelValue || mixed,
+			},
+		]"
+		:size="size"
 		@click="emit('update:modelValue', !modelValue)"
 	>
 		<MinusIcon v-if="mixed" class="size-4" aria-hidden="true" />
@@ -39,10 +42,12 @@
 
 <script lang="ts" setup>
 import { MinusIcon, TagCategoryRefreshCcwIcon } from '@modrinth/assets'
-import { formatKeybind, type KeybindDefinition } from '@modrinth/moderation'
+import { formatKeybind, type KeybindDefinition, moderationSettings } from '@modrinth/moderation'
 import { Button } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
+import { useModerationSettings } from '~/composables/moderation'
+
 const props = defineProps<{
 	modelValue: boolean
 	mixed?: boolean
@@ -81,6 +86,16 @@ const ariaKeybind = computed(() => {
 const emit = defineEmits<{
 	'update:modelValue': [boolean]
 }>()
+
+/** Wrapping labels keep the button growing past its size's height, which only sets its least. */
+const SIZE_CLASSES = {
+	xs: 'min-h-7 !px-2 !text-sm',
+	sm: 'min-h-8 !px-2.5',
+	md: 'min-h-9 !px-3',
+}
+
+const settings = useModerationSettings()
+const size = computed(() => settings.value.get(moderationSettings.General.ButtonSize))
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/project-review/review-panel/controls/index.vue b/apps/frontend/src/components/project-review/review-panel/controls/index.vue
index 90139557e4..920faebbcc 100644
--- a/apps/frontend/src/components/project-review/review-panel/controls/index.vue
+++ b/apps/frontend/src/components/project-review/review-panel/controls/index.vue
@@ -1,14 +1,14 @@
 <template>
-	<div v-if="panelBinding && hasControls" class="flex flex-col gap-3">
+	<div v-if="panelBinding && hasControls" :class="inline ? 'contents' : 'flex flex-col gap-3'">
 		<div
 			v-for="(section, index) in panelBinding.panel.sections"
 			:key="`${panelBinding.projectId}:${panelBinding.key}:${index}`"
-			class="flex flex-col gap-2"
+			:class="inline && !section.label ? 'contents' : 'flex w-full flex-col gap-2'"
 		>
 			<p v-if="section.label" class="m-0 font-semibold text-contrast">
 				{{ section.label }}
 			</p>
-			<div class="flex flex-wrap gap-2">
+			<div :class="inline && !section.label ? 'contents' : 'flex flex-wrap gap-2'">
 				<template
 					v-for="control in section.controls"
 					:key="`${control.type}:${control.issueId}:${control.type === 'toggle' ? (control.id ?? '') : control.key}`"
@@ -34,8 +34,8 @@
 							:disabled="control.disabled"
 							:model-value="panels.textValue(panelBinding, control)"
 							:heading-buttons="false"
-							:hide-formatting-buttons="
-								settings.get(moderationSettings.General.HideMarkdownFormattingButtons)
+							:formatting-buttons-visibility="
+								settings.get(moderationSettings.General.MarkdownFormattingButtonsVisibility)
 							"
 							:max-height="240"
 							:min-height="72"
@@ -215,6 +215,8 @@ const props = defineProps<{
 	binding?: ReviewPanelBinding
 	keybindOffset?: number
 	hideTitle?: boolean
+	/** Flows unlabelled sections' controls on from the panel's title, wrapping as needed. */
+	inline?: boolean
 }>()
 const emit = defineEmits<{
 	'dropdown-open': [key: string]
diff --git a/apps/frontend/src/components/project-review/review-panel/index.vue b/apps/frontend/src/components/project-review/review-panel/index.vue
index 455615302a..79e29d2751 100644
--- a/apps/frontend/src/components/project-review/review-panel/index.vue
+++ b/apps/frontend/src/components/project-review/review-panel/index.vue
@@ -73,6 +73,7 @@
 			:active="inlineActive"
 			:enabled="settings.get(moderationSettings.General.ShowInlinePanelHoverHighlight)"
 			layer="behind"
+			:class="{ '!flex-row flex-wrap items-center !gap-2': inlineTitle }"
 		>
 			<div v-if="title && !hideTitle" class="flex items-center gap-2">
 				<h2 :id="titleId" class="m-0 text-sm font-semibold text-contrast">
@@ -103,6 +104,7 @@
 					:binding="binding"
 					:target="target"
 					:hide-title="hideTitle"
+					:inline="inlineTitle"
 					@dropdown-open="setInlineDropdownOpen($event, true)"
 					@dropdown-close="setInlineDropdownOpen($event, false)"
 				/>
@@ -141,6 +143,8 @@ const props = withDefaults(
 		disabled?: boolean
 		showFindingBadge?: boolean
 		hideTitle?: boolean
+		/** Shows the controls on the title's line, wrapping onto the next ones, rather than below it. */
+		inlineTitle?: boolean
 		interactionScope?: HTMLElement | null
 	}>(),
 	{ showFindingBadge: true },
diff --git a/apps/frontend/src/components/project-review/review-settings.vue b/apps/frontend/src/components/project-review/review-settings.vue
new file mode 100644
index 0000000000..a44b75239f
--- /dev/null
+++ b/apps/frontend/src/components/project-review/review-settings.vue
@@ -0,0 +1,153 @@
+<template>
+	<SettingsPages
+		:pages="settingsPages"
+		:store="moderationSettings"
+		storage-key="moderation.project-review.settings-page"
+	>
+		<template v-if="!floating" #actions>
+			<IconButton
+				v-tooltip="'Open as floating window'"
+				type="quiet"
+				size="sm"
+				label="Open as floating window"
+				@click="settingsAsWindow"
+			>
+				<WindowIcon aria-hidden="true" />
+			</IconButton>
+		</template>
+		<template #setting-actions="{ setting }">
+			<ModerationSettingActions :setting="setting" :store="moderationSettings" />
+		</template>
+		<template v-if="!isLocal" #footer>
+			<p class="m-0 shrink-0 break-words text-xs text-secondary">
+				Based on
+				<a
+					v-if="config.public.owner && config.public.branch"
+					class="hover:underline"
+					target="_blank"
+					rel="noopener"
+					:href="`https://github.com/${config.public.owner}/code/tree/${config.public.branch}`"
+				>
+					{{ config.public.owner }}/{{ config.public.branch }}
+				</a>
+				@
+				<span v-if="config.public.hash === 'unknown'">unknown</span>
+				<AutoLink
+					v-else
+					class="text-link"
+					target="_blank"
+					:to="`https://github.com/${config.public.owner}/code/commit/${config.public.hash}`"
+				>
+					{{ config.public.hash }}
+				</AutoLink>
+			</p>
+		</template>
+	</SettingsPages>
+</template>
+
+<script setup lang="ts">
+import {
+	FolderArchiveIcon,
+	KeyboardIcon,
+	LayoutPanelLeftIcon,
+	PaletteIcon,
+	SettingsIcon,
+	WindowIcon,
+} from '@modrinth/assets'
+import {
+	archiveSettingGroups,
+	AutoLink,
+	IconButton,
+	injectArchiveSettings,
+	injectWorkbench,
+	type SettingsPage,
+	SettingsPages,
+	useFilesWorkspaceSettings,
+	workbenchSettingGroup,
+	workbenchSettingsStore,
+} from '@modrinth/ui'
+
+import { moderationSettingGroups } from '~/components/ui/moderation/settings/groups'
+import ModerationAppearance from '~/components/ui/moderation/settings/ModerationAppearance.vue'
+import ModerationKeybinds from '~/components/ui/moderation/settings/ModerationKeybinds.vue'
+import ModerationSettingActions from '~/components/ui/moderation/settings/ModerationSettingActions.vue'
+import { useModerationSettings } from '~/composables/moderation'
+
+import { injectProjectReviewContext } from './layout/context'
+
+/**
+ * The review's settings, along with those of its archive and layout, so there's a single place to
+ * change them while watching them apply: in a panel of their own, or `floating` in a window above
+ * the review.
+ */
+defineProps<{ floating?: boolean }>()
+
+const { settingsAsWindow } = injectProjectReviewContext()
+const config = useRuntimeConfig()
+const { hostname } = useRequestURL()
+const isLocal =
+	import.meta.dev ||
+	hostname === 'localhost' ||
+	hostname.endsWith('.localhost') ||
+	hostname.startsWith('127.') ||
+	hostname === '[::1]'
+
+const moderationSettings = useModerationSettings()
+const workbench = injectWorkbench()
+const archiveStore = injectArchiveSettings()
+/** The files settings as the review browses files, whichever way its archive is laid out. */
+const filesSettings = useFilesWorkspaceSettings('project-review', { browsing: 'sidebar' })
+
+const settingsPages: SettingsPage[] = [
+	{
+		id: 'general',
+		name: {
+			id: 'moderation.project-review.generalSettings',
+			defaultMessage: 'General',
+		},
+		icon: SettingsIcon,
+		groups: moderationSettingGroups,
+	},
+	{
+		id: 'appearance',
+		name: {
+			id: 'moderation.project-review.appearanceSettings',
+			defaultMessage: 'Appearance',
+		},
+		icon: PaletteIcon,
+		content: ModerationAppearance,
+		contentProps: { embedded: true },
+	},
+	{
+		id: 'archive',
+		name: {
+			id: 'moderation.project-review.archive-settings',
+			defaultMessage: 'Archive',
+		},
+		icon: FolderArchiveIcon,
+		groups: archiveSettingGroups.map((group) => ({ ...group, store: archiveStore })),
+	},
+	{
+		id: 'layout',
+		name: {
+			id: 'moderation.project-review.layout-settings',
+			defaultMessage: 'Layout and files',
+		},
+		icon: LayoutPanelLeftIcon,
+		groups: [
+			{ ...workbenchSettingGroup(workbench), store: workbenchSettingsStore(workbench) },
+			...filesSettings.groups.map((group) => ({ ...group, store: filesSettings.store })),
+		],
+	},
+	{
+		id: 'keybinds',
+		name: {
+			id: 'moderation.project-review.keybindsSettings',
+			defaultMessage: 'Keybinds',
+		},
+		icon: KeyboardIcon,
+		content: ModerationKeybinds,
+		contentProps: { embedded: true },
+	},
+]
+</script>
diff --git a/apps/frontend/src/components/project-review/slicer/bridge-storage.ts b/apps/frontend/src/components/project-review/slicer/bridge-storage.ts
deleted file mode 100644
index c14b792619..0000000000
--- a/apps/frontend/src/components/project-review/slicer/bridge-storage.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-const STORAGE_KEY = 'moderation.project-review.slicer-bridge.v1'
-
-/**
- * Version of `bridge.js`. Bump whenever the script changes so reviewers with an older copy
- * installed in slicer are prompted to import the new one.
- */
-export const SLICER_BRIDGE_VERSION = 7
-
-interface SavedSlicerBridge {
-	version: number
-}
-
-/** Returns the bridge version slicer last confirmed it has installed, if any. */
-export function readInstalledBridgeVersion(): number | undefined {
-	try {
-		const saved: SavedSlicerBridge | null = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? 'null')
-		return typeof saved?.version === 'number' && Number.isFinite(saved.version)
-			? saved.version
-			: undefined
-	} catch {
-		return undefined
-	}
-}
-
-export function saveInstalledBridgeVersion(version: number) {
-	try {
-		localStorage.setItem(STORAGE_KEY, JSON.stringify({ version } satisfies SavedSlicerBridge))
-	} catch {
-		// no-op
-	}
-}
-
-export function forgetInstalledBridge() {
-	try {
-		localStorage.removeItem(STORAGE_KEY)
-	} catch {
-		// no-op
-	}
-}
diff --git a/apps/frontend/src/components/project-review/slicer/bridge.js b/apps/frontend/src/components/project-review/slicer/bridge.js
deleted file mode 100644
index 036e6cb42e..0000000000
--- a/apps/frontend/src/components/project-review/slicer/bridge.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * Slicer script injected into the embedded slicer.run iframe via its `script` URL parameter.
- * It listens for `load` requests from the Modrinth moderation page, replaces the slicer workspace
- * with the requested files when they differ from what is loaded, and opens the requested entry.
- *
- * Slicer keeps imported scripts and loads them on startup, so several versions of this script may
- * be installed at once. Only the newest one handles messages, and it announces its version in the
- * `ready` handshake so the page knows whether it needs to import an update.
- *
- * The parent origin and version placeholders below are filled in by the page before injection.
- */
-const PARENT_ORIGIN = '__MODRINTH_PARENT_ORIGIN__'
-const VERSION = Number('__MODRINTH_BRIDGE_VERSION__')
-const SOURCE = 'modrinth-slicer-bridge'
-const INSTANCE_KEY = '__modrinthSlicerBridge'
-
-const TAB_TYPES_BY_EXTENSION = {
-	image: ['jpg', 'jpeg', 'gif', 'png', 'webp'],
-	media: ['mp4', 'webm', 'ogg', 'mp3', 'wav', 'flac', 'mov', 'avi', 'm4a', 'aac', 'mkv'],
-	dump: ['hprof'],
-}
-
-let instance
-
-function post(message) {
-	window.parent.postMessage({ source: SOURCE, version: VERSION, ...message }, PARENT_ORIGIN)
-}
-
-/** Picks the tab type slicer itself would use when opening an entry with this name. */
-function tabType(name) {
-	const extension = name.split('.').pop()?.toLowerCase() ?? ''
-	const match = Object.entries(TAB_TYPES_BY_EXTENSION).find(([, extensions]) =>
-		extensions.includes(extension),
-	)
-	return match?.[0] ?? 'code'
-}
-
-/**
- * Finds a workspace entry by name. Falls back to the only entry sharing the same path below its
- * top-level file, in case the top-level name differs from what the page expected.
- */
-function findEntry(context, name) {
-	const exact = context.workspace.find(name)
-	if (exact) return exact
-	const separator = name.indexOf('/')
-	if (separator === -1) return null
-	const suffix = name.slice(separator)
-	const matches = context.workspace.entries().filter((entry) => entry.name.endsWith(suffix))
-	return matches.length === 1 ? matches[0] : null
-}
-
-/** Whether the workspace's top-level entries are exactly the given file names. */
-function isLoaded(context, names) {
-	const loaded = context.workspace
-		.entries()
-		.map((entry) => entry.name)
-		.filter((name) => !name.includes('/'))
-	return loaded.length === names.length && names.every((name) => loaded.includes(name))
-}
-
-export default {
-	name: 'Modrinth moderation bridge',
-	description: 'Lets the Modrinth project review page load version files into slicer.',
-	version: '__MODRINTH_BRIDGE_VERSION__',
-	load(context) {
-		if (window.parent === window) return
-		const existing = window[INSTANCE_KEY]
-		if (existing && existing.version > VERSION) return
-		existing?.dispose()
-
-		let controller
-		let pending = existing?.pending ?? Promise.resolve()
-		let loadedFilesKey
-		async function onMessage(event) {
-			if (event.origin !== PARENT_ORIGIN) return
-			// Popout panels still send messages from the main window's JavaScript context.
-			if (event.source !== window.parent && event.source !== window.parent.opener) return
-			const data = event.data
-			if (data?.source !== SOURCE || data.type !== 'load') return
-			controller?.abort()
-			const request = new AbortController()
-			controller = request
-			post({ type: 'loading', id: data.id })
-			pending = pending.then(async () => {
-				if (request.signal.aborted) return
-				try {
-					const filesKey = JSON.stringify(data.files)
-					if (
-						filesKey !== loadedFilesKey ||
-						!isLoaded(
-							context,
-							data.files.map(({ name }) => name),
-						)
-					) {
-						const files = await Promise.all(
-							data.files.map(async ({ url, name }) => {
-								const response = await fetch(url, { signal: request.signal })
-								if (!response.ok) throw new Error(`${name}: HTTP ${response.status}`)
-								return { name, blob: await response.blob() }
-							}),
-						)
-						if (request.signal.aborted) return
-						loadedFilesKey = undefined
-						await context.workspace.clear()
-						for (const { name, blob } of files) {
-							if (request.signal.aborted) return
-							await context.workspace.add(name, blob)
-						}
-						if (request.signal.aborted) return
-						loadedFilesKey = filesKey
-					}
-					if (data.entry) {
-						const entry = findEntry(context, data.entry)
-						if (entry) {
-							await context.editor.add(tabType(entry.name), entry)
-						} else {
-							context.notification.warning('Could not find file in workspace', {
-								description: data.entry,
-							})
-						}
-					}
-					if (!request.signal.aborted) post({ type: 'loaded', id: data.id })
-				} catch (error) {
-					if (request.signal.aborted) return
-					request.abort()
-					post({ type: 'error', id: data.id })
-					context.notification.error('Could not load files from Modrinth', {
-						description: String(error?.message ?? error),
-					})
-				}
-			})
-			return pending
-		}
-
-		window.addEventListener('message', onMessage)
-		instance = {
-			version: VERSION,
-			get pending() {
-				return pending
-			},
-			dispose: () => {
-				controller?.abort()
-				window.removeEventListener('message', onMessage)
-			},
-		}
-		window[INSTANCE_KEY] = instance
-		post({ type: 'ready', version: VERSION })
-	},
-	unload() {
-		if (!instance || window[INSTANCE_KEY] !== instance) return
-		instance.dispose()
-		delete window[INSTANCE_KEY]
-		instance = undefined
-	},
-}
diff --git a/apps/frontend/src/components/project-review/slicer/index.vue b/apps/frontend/src/components/project-review/slicer/index.vue
deleted file mode 100644
index 6e7e9c7a83..0000000000
--- a/apps/frontend/src/components/project-review/slicer/index.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-	<div v-if="frameSrc" class="relative flex h-full min-h-0 flex-col gap-2">
-		<PageLoadingBar :key="target?.key" :loading="loadingFiles" />
-		<div v-if="loadFailed && !loadingFiles" role="alert" class="flex items-center gap-2">
-			<p class="m-0">Could not load project data</p>
-			<Button @click="retry">Retry</Button>
-		</div>
-		<iframe
-			:key="frameKey"
-			ref="frame"
-			:src="frameSrc"
-			title="Slicer"
-			:aria-busy="loadingFiles"
-			allow="clipboard-read; clipboard-write"
-			class="block min-h-0 w-full flex-1 rounded-xl border border-solid border-surface-4 bg-surface-1"
-		/>
-	</div>
-	<p v-else-if="isLoading || versionsQuery.isPending.value" role="status" class="m-0">Loading...</p>
-	<p v-else class="m-0 text-secondary">No versions</p>
-</template>
-
-<script setup lang="ts">
-import { Button, PageLoadingBar } from '@modrinth/ui'
-import { onScopeDispose, ref, useTemplateRef, watch } from 'vue'
-
-import { injectProjectReviewPageContext } from '~/providers/project-review'
-import { injectReviewSlicer, type SlicerTarget } from '~/providers/project-review/review-slicer'
-
-import { injectProjectReviewContext, injectReviewPanelVisible } from '../layout/context'
-import { useReviewEventListener } from '../shortcuts'
-import bridgeSource from './bridge.js?raw'
-import {
-	forgetInstalledBridge,
-	readInstalledBridgeVersion,
-	saveInstalledBridgeVersion,
-	SLICER_BRIDGE_VERSION,
-} from './bridge-storage'
-
-const SLICER_ORIGIN = 'https://slicer.run'
-const BRIDGE_SOURCE = 'modrinth-slicer-bridge'
-const HANDSHAKE_TIMEOUT_MS = 15_000
-
-const { isLoading, versionsQuery } = injectProjectReviewPageContext()
-const { target, openRequests, loadingFiles } = injectReviewSlicer()
-const { openTab } = injectProjectReviewContext()
-const panelVisible = injectReviewPanelVisible()
-const frame = useTemplateRef<HTMLIFrameElement>('frame')
-const bridgeScript = `data:text/javascript;base64,${btoa(
-	bridgeSource
-		.replaceAll('__MODRINTH_PARENT_ORIGIN__', window.location.origin)
-		.replaceAll('__MODRINTH_BRIDGE_VERSION__', String(SLICER_BRIDGE_VERSION)),
-)}`
-
-const frameKey = ref(0)
-const frameSrc = ref('')
-const loadFailed = ref(false)
-/** Highest bridge version that has handshaked with the current iframe, 0 when none has. */
-let bridgeVersion = 0
-let sentKey: string | undefined
-let requestId = 0
-let handshakeTimer: ReturnType<typeof setTimeout> | undefined
-
-function bridgeInstalled() {
-	return (readInstalledBridgeVersion() ?? 0) >= SLICER_BRIDGE_VERSION
-}
-
-/**
- * Mounts a fresh slicer instance. All files are loaded through the bridge after it handshakes,
- * so replacing a target can cancel its downloads and serialize workspace updates.
- *
- * The bridge script is only passed along (which makes slicer prompt for an import) when it is not
- * known to be installed. Otherwise slicer loads its saved copies, and if no up to date copy
- * handshakes in time the install record is dropped and slicer is remounted with the script.
- */
-function mount(next: SlicerTarget, withScript = !bridgeInstalled()) {
-	clearTimeout(handshakeTimer)
-	handshakeTimer = undefined
-	bridgeVersion = 0
-	sentKey = next.key
-	requestId++
-	loadingFiles.value = true
-	loadFailed.value = false
-	const params = new URLSearchParams()
-	if (withScript) params.set('script', bridgeScript)
-	frameSrc.value = `${SLICER_ORIGIN}/?${params}`
-	frameKey.value++
-	if (!withScript) {
-		handshakeTimer = setTimeout(() => {
-			handshakeTimer = undefined
-			if (bridgeVersion >= SLICER_BRIDGE_VERSION) return
-			forgetInstalledBridge()
-			if (target.value) mount(target.value, true)
-		}, HANDSHAKE_TIMEOUT_MS)
-	}
-}
-
-function send(next: SlicerTarget) {
-	const targetWindow = frame.value?.contentWindow
-	if (!targetWindow) return
-	sentKey = next.key
-	loadingFiles.value = true
-	loadFailed.value = false
-	targetWindow.postMessage(
-		{
-			source: BRIDGE_SOURCE,
-			type: 'load',
-			id: ++requestId,
-			files: next.files,
-			entry: next.entry,
-		},
-		SLICER_ORIGIN,
-	)
-}
-
-function retry() {
-	const next = target.value
-	if (!next) return
-	if (bridgeVersion >= SLICER_BRIDGE_VERSION) send(next)
-	else mount(next)
-}
-
-/**
- * Slicer starts every saved copy of the bridge. Only a current copy receives targets, since older
- * copies cannot cancel their downloads when the reviewer selects something else.
- * Reparenting the iframe reloads its document, so a bridge of the same version can handshake again.
- */
-function onHandshake(version: number) {
-	if (version < SLICER_BRIDGE_VERSION || version < bridgeVersion) return
-	bridgeVersion = version
-	clearTimeout(handshakeTimer)
-	handshakeTimer = undefined
-	saveInstalledBridgeVersion(version)
-	const next = target.value
-	if (next) send(next)
-}
-
-watch(
-	[target, panelVisible],
-	([next, visible]) => {
-		if (!next || next.key === sentKey) return
-		loadFailed.value = false
-		if (bridgeVersion) send(next)
-		else if (handshakeTimer === undefined && (frameSrc.value || visible)) mount(next)
-	},
-	{ immediate: true },
-)
-
-watch(openRequests, () => openTab('slicer'))
-
-useReviewEventListener('message', (event: MessageEvent) => {
-	if (event.origin !== SLICER_ORIGIN || event.source !== frame.value?.contentWindow) return
-	const data = event.data
-	if (data?.source !== BRIDGE_SOURCE) return
-	if (data.type === 'ready') {
-		onHandshake(typeof data.version === 'number' ? data.version : 0)
-		return
-	}
-	if (
-		data.version !== bridgeVersion ||
-		data.version < SLICER_BRIDGE_VERSION ||
-		data.id !== requestId ||
-		sentKey !== target.value?.key
-	) {
-		return
-	}
-	if (data.type === 'loading') {
-		loadingFiles.value = true
-		loadFailed.value = false
-	} else if (data.type === 'loaded' || data.type === 'error') {
-		loadingFiles.value = false
-		loadFailed.value = data.type === 'error'
-	}
-})
-
-onScopeDispose(() => {
-	clearTimeout(handshakeTimer)
-	loadingFiles.value = false
-})
-</script>
diff --git a/apps/frontend/src/components/project-review/versions/version-card.vue b/apps/frontend/src/components/project-review/versions/version-card.vue
index 3642d50476..4e2828062d 100644
--- a/apps/frontend/src/components/project-review/versions/version-card.vue
+++ b/apps/frontend/src/components/project-review/versions/version-card.vue
@@ -46,21 +46,21 @@
 					<EditVersionMenu v-if="editable" color="default" size="sm" @edit="emit('edit', $event)" />
 					<Button
 						v-if="version.files.length"
-						v-tooltip="'Open files in Slicer'"
-						aria-label="Open files in Slicer"
-						:loading="loadingSlicerButton === 'version'"
+						v-tooltip="'Open primary file in the archive viewer'"
+						aria-label="Open primary file in the archive viewer"
+						:loading="loadingArchiveButton === 'version'"
 						type="quiet"
 						circular
 						size="sm"
 						icon-only
-						@click="openVersionInSlicer"
+						@click="openVersionInArchive"
 					>
 						<SpinnerIcon
-							v-if="loadingSlicerButton === 'version'"
+							v-if="loadingArchiveButton === 'version'"
 							class="animate-spin motion-reduce:animate-none"
 							aria-hidden="true"
 						/>
-						<CoffeeIcon v-else aria-hidden="true" />
+						<FolderArchiveIcon v-else aria-hidden="true" />
 					</Button>
 					<ButtonLink
 						v-tooltip="'View version'"
@@ -100,13 +100,13 @@
 							label="More options"
 							:options="fileActions(file)"
 						>
-							<template #open-slicer="{ option }">
+							<template #open-archive="{ option }">
 								<SpinnerIcon
-									v-if="loadingSlicerButton === file.url"
+									v-if="loadingArchiveButton === file.url"
 									class="animate-spin motion-reduce:animate-none"
 									aria-hidden="true"
 								/>
-								<CoffeeIcon v-else aria-hidden="true" />
+								<FolderArchiveIcon v-else aria-hidden="true" />
 								{{ option.label }}
 							</template>
 							<MoreVerticalIcon />
@@ -294,10 +294,10 @@
 import type { Labrinth } from '@modrinth/api-client'
 import {
 	ClipboardCopyIcon,
-	CoffeeIcon,
 	DownloadIcon,
 	DropdownIcon,
 	ExternalIcon,
+	FolderArchiveIcon,
 	MoreVerticalIcon,
 	ScanEyeIcon,
 	SearchIcon,
@@ -314,6 +314,7 @@ import {
 	type ButtonMenuOption,
 	CopyCode,
 	type DependencyContext,
+	injectArchiveSession,
 	injectModrinthClient,
 	injectTags,
 	Input,
@@ -332,8 +333,9 @@ import EditVersionMenu from '~/components/ui/create-project-version/EditVersionM
 import { useModerationSettings } from '~/composables/moderation'
 import { projectQueryOptions } from '~/composables/queries/project'
 import { versionQueryOptions } from '~/composables/queries/version'
+import { archiveViewerUrl, primaryFile } from '~/helpers/archive-viewer'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
-import { injectReviewSlicer } from '~/providers/project-review/review-slicer'
+import { injectReviewArchive } from '~/providers/project-review/review-archive'
 import type { EditVersionStage } from '~/providers/version/manage-version-modal'
 
 import {
@@ -387,12 +389,13 @@ const relativeTime = createRelativeTimeFormatter({ style: 'narrow' })
 const client = injectModrinthClient()
 const tags = injectTags(null)
 const { project, members } = injectProjectReviewPageContext()
-const slicer = injectReviewSlicer()
-const { loadingFiles: slicerLoading } = slicer
-const slicerRequest = ref<{ id: number; button: string }>()
-const loadingSlicerButton = computed(() => {
-	const request = slicerRequest.value
-	return slicerLoading.value && request?.id === slicer.openRequests.value
+const archive = injectReviewArchive()
+const archiveSession = injectArchiveSession()
+/** The button that last opened a file, which shows it's loading while the archive is read. */
+const archiveRequest = ref<{ id: number; button: string }>()
+const loadingArchiveButton = computed(() => {
+	const request = archiveRequest.value
+	return archiveSession.stage.value === 'reading' && request?.id === archive.openRequests.value
 		? request.button
 		: undefined
 })
@@ -518,18 +521,14 @@ const filteredDependencies = computed(() => {
 })
 type VersionFile = Labrinth.Versions.v3.Version['files'][number]
 
-function openInSlicer(urls: string[], button: string) {
-	slicer.open(urls)
-	slicerRequest.value = { id: slicer.openRequests.value, button }
+function openInArchive(url: string, button: string) {
+	archive.open(url)
+	archiveRequest.value = { id: archive.openRequests.value, button }
 }
 
-function openVersionInSlicer() {
-	openInSlicer(
-		props.version.files
-			.toSorted((a, b) => Number(b.primary) - Number(a.primary))
-			.map(({ url }) => url),
-		'version',
-	)
+function openVersionInArchive() {
+	const file = primaryFile(props.version)
+	if (file) openInArchive(file.url, 'version')
 }
 
 function fileActions(file: VersionFile): ButtonMenuOption[] {
@@ -541,18 +540,22 @@ function fileActions(file: VersionFile): ButtonMenuOption[] {
 			action: () => emit('scan-ai', file.url),
 		},
 		{
-			id: 'open-slicer',
-			label: 'Open in Slicer',
-			icon: CoffeeIcon,
-			disabled: loadingSlicerButton.value === file.url,
-			action: () => openInSlicer([file.url], file.url),
+			id: 'open-archive',
+			label: 'Open in the archive viewer',
+			icon: FolderArchiveIcon,
+			disabled: loadingArchiveButton.value === file.url,
+			action: () => openInArchive(file.url, file.url),
 			trailingAction: {
-				label: 'Open in Slicer in a new tab',
+				label: 'Open in the archive viewer in a new tab',
 				icon: ExternalIcon,
 				action: (event) => {
 					const element = event.currentTarget as HTMLElement
 					element.ownerDocument.defaultView?.open(
-						`https://slicer.run/?url=${encodeURIComponent(file.url)}`,
+						archiveViewerUrl({
+							project: project.value?.id,
+							version: props.version.id,
+							url: file.url,
+						}),
 						'_blank',
 						'noopener,noreferrer',
 					)
diff --git a/apps/frontend/src/components/ui/archive-viewer/ArchiveExternalDetails.vue b/apps/frontend/src/components/ui/archive-viewer/ArchiveExternalDetails.vue
new file mode 100644
index 0000000000..7ceff4736e
--- /dev/null
+++ b/apps/frontend/src/components/ui/archive-viewer/ArchiveExternalDetails.vue
@@ -0,0 +1,55 @@
+<template>
+	<ArchiveDetailsSection
+		:kind="formatMessage(messages.external)"
+		:title="source.name"
+		:icon="ExternalIcon"
+		icon-class="text-secondary"
+		details-key="project"
+	>
+		<template #actions>
+			<div class="flex shrink-0 items-center gap-1">
+				<ButtonLink
+					v-tooltip="formatMessage(messages.download)"
+					type="quiet"
+					size="xs"
+					:href="source.url"
+					:download="source.name"
+					:aria-label="formatMessage(messages.download)"
+				>
+					<DownloadIcon aria-hidden="true" />
+				</ButtonLink>
+			</div>
+		</template>
+		<p class="m-0 text-sm text-secondary">{{ formatMessage(messages.description) }}</p>
+	</ArchiveDetailsSection>
+</template>
+
+<script setup lang="ts">
+import { DownloadIcon, ExternalIcon } from '@modrinth/assets'
+import {
+	ArchiveDetailsSection,
+	type ArchiveSource,
+	ButtonLink,
+	defineMessages,
+	useVIntl,
+} from '@modrinth/ui'
+
+/**
+ * Stands in for the project at the top of the archive viewer's details when the archive was
+ * opened from a link no project's version holds, named after the file the link points to.
+ */
+defineProps<{
+	source: ArchiveSource
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	external: { id: 'archive.external-details.external', defaultMessage: 'External' },
+	description: {
+		id: 'archive.external-details.description',
+		defaultMessage: "Opened from a link that isn't part of a project's versions.",
+	},
+	download: { id: 'archive.project-details.download', defaultMessage: 'Download file' },
+})
+</script>
diff --git a/apps/frontend/src/components/ui/archive-viewer/ArchiveProjectDetails.vue b/apps/frontend/src/components/ui/archive-viewer/ArchiveProjectDetails.vue
new file mode 100644
index 0000000000..40acbef36d
--- /dev/null
+++ b/apps/frontend/src/components/ui/archive-viewer/ArchiveProjectDetails.vue
@@ -0,0 +1,340 @@
+<template>
+	<ArchiveDetailsSection
+		v-if="!hideProject"
+		:kind="formatMessage(messages.project)"
+		:title="project.name"
+		details-key="project"
+	>
+		<template #icon>
+			<Avatar :src="project.icon_url" alt="" size="32px" no-shadow class="shrink-0" />
+		</template>
+		<template #actions>
+			<div class="flex shrink-0 items-center gap-1">
+				<Tooltip class="flex shrink-0">
+					<template #popper>
+						<ProjectStatusBadge :status="project.status" :style="statusColor" />
+					</template>
+					<component
+						:is="getProjectStatusIcon(project.status)"
+						class="size-4"
+						:style="statusColor"
+						aria-hidden="true"
+					/>
+				</Tooltip>
+				<component
+					:is="getProjectTypeIcon(type)"
+					v-for="type in project.project_types"
+					:key="type"
+					v-tooltip="formatMessage(getProjectTypeTitleMessage(type), { count: 1 })"
+					class="size-4 text-secondary"
+					role="img"
+					:aria-label="formatMessage(getProjectTypeTitleMessage(type), { count: 1 })"
+				/>
+				<ButtonLink
+					v-tooltip="formatMessage(messages.openProject)"
+					type="quiet"
+					size="xs"
+					:to="projectUrl"
+					:aria-label="formatMessage(messages.openProject)"
+				>
+					<ExternalIcon aria-hidden="true" />
+				</ButtonLink>
+				<ButtonLink
+					v-tooltip="formatMessage(messages.techReview)"
+					type="quiet"
+					size="xs"
+					:to="`/moderation/technical-review/${project.id}`"
+					:aria-label="formatMessage(messages.techReview)"
+				>
+					<ShieldIcon aria-hidden="true" />
+				</ButtonLink>
+			</div>
+		</template>
+
+		<p v-if="project.summary" class="m-0 text-sm text-secondary">{{ project.summary }}</p>
+
+		<template #details>
+			<div class="flex flex-wrap gap-1.5">
+				<ArchiveDetailChip
+					:label="formatMessage(messages.projectId)"
+					:value="project.id"
+					:icon="HashIcon"
+					mono
+				/>
+				<ArchiveDetailChip
+					:label="formatMessage(messages.projectPublished)"
+					:value="formatShortDate(project.published)"
+					:tooltip="
+						formatMessage(messages.publishedOn, { date: formatFullDate(project.published) })
+					"
+					:copy-text="formatFullDate(project.published)"
+					:icon="CalendarIcon"
+				/>
+				<ArchiveDetailChip
+					:label="formatMessage(messages.projectDownloads)"
+					:value="formatNumber(project.downloads)"
+					:icon="DownloadIcon"
+					:copyable="false"
+				/>
+			</div>
+		</template>
+	</ArchiveDetailsSection>
+
+	<ArchiveDetailsSection
+		:kind="formatMessage(messages.version)"
+		:title="
+			version?.name ??
+			formatMessage(versionsLoading ? messages.loadingVersions : messages.selectVersion)
+		"
+		details-key="version"
+	>
+		<template #icon>
+			<VersionChannelIndicator
+				v-if="version"
+				v-tooltip="formatMessage(channelMessages[version.version_type])"
+				:channel="version.version_type"
+				size="sm"
+				class="shrink-0"
+			/>
+			<SpinnerIcon
+				v-else-if="versionsLoading"
+				class="size-5 shrink-0 animate-spin text-secondary"
+				aria-hidden="true"
+			/>
+		</template>
+		<template v-if="file" #actions>
+			<div class="flex shrink-0 items-center gap-1">
+				<ButtonLink
+					v-tooltip="formatMessage(messages.download)"
+					type="quiet"
+					size="xs"
+					:href="file.url"
+					:download="file.filename"
+					:aria-label="formatMessage(messages.download)"
+				>
+					<DownloadIcon aria-hidden="true" />
+				</ButtonLink>
+			</div>
+		</template>
+
+		<div v-if="versions.length" class="flex flex-col gap-2 text-sm">
+			<Button
+				type="outlined"
+				size="sm"
+				class="w-full"
+				:aria-label="formatMessage(messages.changeVersion)"
+				@click="(event: MouseEvent) => versionModal?.show(event)"
+			>
+				<span class="flex min-w-0 flex-1 items-center gap-2 text-left">
+					<span class="truncate font-semibold text-contrast">
+						{{ version?.version_number ?? formatMessage(messages.selectVersion) }}
+					</span>
+					<span v-if="version" class="truncate text-xs font-normal text-secondary">
+						{{ formatShortDate(version.date_published) }}
+					</span>
+				</span>
+				<GenericListIcon class="shrink-0" aria-hidden="true" />
+			</Button>
+			<Combobox
+				v-if="(version?.files.length ?? 0) > 1"
+				:model-value="file?.url"
+				:options="fileOptions"
+				trigger-size="sm"
+				@update:model-value="(url) => url && emit('select-file', url)"
+			/>
+			<div v-if="version" class="flex flex-wrap gap-1">
+				<TagItem
+					v-if="version.status !== 'listed'"
+					class="font-semibold"
+					:class="versionStatusClass"
+				>
+					{{
+						formatMessage(versionStatusMessages[version.status] ?? versionStatusMessages.unknown)
+					}}
+				</TagItem>
+				<TagTagItem v-for="loader in version.loaders" :key="loader" :tag="loader" />
+				<TagItem v-for="gameVersion in shownGameVersions" :key="gameVersion">
+					{{ gameVersion }}
+				</TagItem>
+				<TagItem v-if="hiddenGameVersions.length" v-tooltip="hiddenGameVersions.join(', ')">
+					{{ formatMessage(messages.moreGameVersions, { count: hiddenGameVersions.length }) }}
+				</TagItem>
+			</div>
+		</div>
+
+		<template v-if="version" #details>
+			<div class="flex flex-wrap gap-1.5">
+				<ArchiveDetailChip
+					:label="formatMessage(messages.versionId)"
+					:value="version.id"
+					:icon="HashIcon"
+					mono
+				/>
+				<ArchiveDetailChip
+					:label="formatMessage(messages.versionPublished)"
+					:value="formatShortDate(version.date_published)"
+					:tooltip="
+						formatMessage(messages.publishedOn, { date: formatFullDate(version.date_published) })
+					"
+					:copy-text="formatFullDate(version.date_published)"
+					:icon="CalendarIcon"
+				/>
+				<ArchiveDetailChip
+					:label="formatMessage(messages.versionDownloads)"
+					:value="formatNumber(version.downloads)"
+					:icon="DownloadIcon"
+					:copyable="false"
+				/>
+				<ArchiveDetailChip
+					v-if="file?.file_type"
+					:label="formatMessage(messages.fileType)"
+					:value="file.file_type"
+					:copyable="false"
+				/>
+			</div>
+		</template>
+	</ArchiveDetailsSection>
+
+	<ArchiveVersionModal
+		ref="versionModal"
+		:project="project"
+		:versions="versions"
+		:loading="versionsLoading"
+		:current-version-id="version?.id"
+		@select="(id) => emit('select-version', id)"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	CalendarIcon,
+	DownloadIcon,
+	ExternalIcon,
+	GenericListIcon,
+	HashIcon,
+	ShieldIcon,
+	SpinnerIcon,
+} from '@modrinth/assets'
+import {
+	ArchiveDetailChip,
+	ArchiveDetailsSection,
+	Avatar,
+	Button,
+	ButtonLink,
+	Combobox,
+	type ComboboxOption,
+	defineMessages,
+	getProjectStatusColor,
+	getProjectStatusIcon,
+	getProjectTypeIcon,
+	getProjectTypeTitleMessage,
+	ProjectStatusBadge,
+	TagItem,
+	TagTagItem,
+	Tooltip,
+	useFormatDateTime,
+	useFormatNumber,
+	useVIntl,
+	VersionChannelIndicator,
+} from '@modrinth/ui'
+import { computed, useTemplateRef } from 'vue'
+
+import ArchiveVersionModal from './ArchiveVersionModal.vue'
+import { channelMessages, versionStatusMessages } from './messages'
+
+/**
+ * The project an archive was published by, at the top of the archive viewer's details, then the
+ * version of it that's open (picked from a modal, along with its file) and its tags. Their IDs, dates and
+ * download counts are behind each one's details, and the file itself (size, hashes, whether it
+ * matches its listed hash) is described by the archive's own details below.
+ */
+const props = defineProps<{
+	project: Labrinth.Projects.v3.Project
+	/** The project's versions, newest first. */
+	versions: Labrinth.Versions.v3.Version[]
+	versionsLoading?: boolean
+	version: Labrinth.Versions.v3.Version | null
+	file: Labrinth.Versions.v3.VersionFile | null
+	/** Leaves out the project, for hosts showing it already, keeping the version and its picker. */
+	hideProject?: boolean
+}>()
+
+const emit = defineEmits<{
+	'select-version': [id: string]
+	'select-file': [url: string]
+}>()
+
+const { formatMessage } = useVIntl()
+const formatNumber = useFormatNumber()
+const formatFullDate = useFormatDateTime({ dateStyle: 'full', timeStyle: 'long' })
+const formatShortDate = useFormatDateTime({ dateStyle: 'medium' })
+
+const messages = defineMessages({
+	project: { id: 'archive.project-details.project', defaultMessage: 'Project' },
+	version: { id: 'archive.project-details.version', defaultMessage: 'Version' },
+	openProject: { id: 'archive.project-details.open-project', defaultMessage: 'Project page' },
+	techReview: { id: 'archive.project-details.tech-review', defaultMessage: 'Tech review' },
+	download: { id: 'archive.project-details.download', defaultMessage: 'Download file' },
+	selectVersion: { id: 'archive.select-version', defaultMessage: 'Select a version' },
+	changeVersion: { id: 'archive.project-details.change-version', defaultMessage: 'Change version' },
+	loadingVersions: { id: 'archive.loading-versions', defaultMessage: 'Loading versions...' },
+	moreGameVersions: {
+		id: 'archive.project-details.more-game-versions',
+		defaultMessage: '+{count} more',
+	},
+	primary: { id: 'archive.project-details.primary', defaultMessage: 'Primary' },
+	projectId: { id: 'archive.project-details.project-id', defaultMessage: 'Project ID' },
+	projectPublished: {
+		id: 'archive.project-details.project-published',
+		defaultMessage: 'Project published',
+	},
+	versionId: { id: 'archive.project-details.version-id', defaultMessage: 'Version ID' },
+	versionPublished: {
+		id: 'archive.project-details.version-published',
+		defaultMessage: 'Version published',
+	},
+	projectDownloads: {
+		id: 'archive.project-details.project-downloads',
+		defaultMessage: 'Project downloads',
+	},
+	versionDownloads: {
+		id: 'archive.project-details.version-downloads',
+		defaultMessage: 'Version downloads',
+	},
+	publishedOn: { id: 'archive.project-details.published-on', defaultMessage: 'Published {date}' },
+	fileType: { id: 'archive.project-details.file-type', defaultMessage: 'File type' },
+})
+
+/** Game versions shown before the rest collapse into a count. */
+const SHOWN_GAME_VERSIONS = 4
+
+const projectUrl = computed(() => `/project/${props.project.slug ?? props.project.id}`)
+
+const statusColor = computed(() => ({
+	color: `var(--color-${getProjectStatusColor(props.project.status)})`,
+}))
+
+const versionModal = useTemplateRef<InstanceType<typeof ArchiveVersionModal>>('versionModal')
+
+const shownGameVersions = computed(
+	() => props.version?.game_versions.slice(0, SHOWN_GAME_VERSIONS) ?? [],
+)
+const hiddenGameVersions = computed(
+	() => props.version?.game_versions.slice(SHOWN_GAME_VERSIONS) ?? [],
+)
+
+const versionStatusClass = computed(() =>
+	props.version?.status === 'archived' || props.version?.status === 'unknown'
+		? '!text-secondary'
+		: '!border-orange-highlight !bg-orange-highlight !text-orange',
+)
+
+const fileOptions = computed<ComboboxOption<string>[]>(() =>
+	(props.version?.files ?? []).map((entry) => ({
+		value: entry.url,
+		label: entry.filename,
+		subLabel: entry.primary ? formatMessage(messages.primary) : undefined,
+	})),
+)
+</script>
diff --git a/apps/frontend/src/components/ui/archive-viewer/ArchiveVersionModal.vue b/apps/frontend/src/components/ui/archive-viewer/ArchiveVersionModal.vue
new file mode 100644
index 0000000000..9c230f1973
--- /dev/null
+++ b/apps/frontend/src/components/ui/archive-viewer/ArchiveVersionModal.vue
@@ -0,0 +1,374 @@
+<template>
+	<NewModal
+		ref="modal"
+		:max-width="'min(928px, calc(95vw - 10rem))'"
+		:width="'min(928px, calc(95vw - 10rem))'"
+		no-padding
+		:on-show="onShow"
+	>
+		<template #title>
+			<Avatar :src="project.icon_url" alt="" size="2.5rem" no-shadow />
+			<span class="text-lg font-extrabold text-contrast">{{ formatMessage(messages.title) }}</span>
+		</template>
+		<div class="flex h-[min(550px,calc(95vh-12rem))]">
+			<div class="flex w-[300px] shrink-0 flex-col bg-surface-3">
+				<div class="flex flex-col gap-2 p-4 pb-2" @keydown="onListKeydown">
+					<Input
+						v-model="search"
+						:icon="SearchIcon"
+						:placeholder="formatMessage(messages.searchPlaceholder)"
+						:aria-label="formatMessage(messages.searchPlaceholder)"
+						:aria-controls="listId"
+						wrapper-class="w-full"
+						clearable
+					/>
+					<div class="flex flex-wrap gap-1">
+						<Button
+							v-for="channel in CHANNELS"
+							:key="channel"
+							type="quiet"
+							size="xs"
+							:aria-pressed="channels.includes(channel)"
+							:class="{ '!bg-surface-5 !text-contrast': channels.includes(channel) }"
+							@click="toggleChannel(channel)"
+						>
+							<VersionChannelIndicator :channel="channel" size="xs" />
+							{{ formatMessage(channelMessages[channel]) }}
+						</Button>
+					</div>
+				</div>
+				<span v-if="loading && !versions.length" class="flex items-center gap-2 p-4 text-secondary">
+					<SpinnerIcon class="size-4 animate-spin" aria-hidden="true" />
+					{{ formatMessage(messages.loading) }}
+				</span>
+				<span v-else-if="!filtered.length" class="p-4 text-center text-sm text-secondary">
+					{{ formatMessage(messages.noVersions) }}
+				</span>
+				<div
+					v-else
+					:id="listId"
+					v-bind="containerProps"
+					class="min-h-0 flex-1 overscroll-contain px-2 pb-2"
+					role="listbox"
+					:aria-label="formatMessage(messages.title)"
+					:aria-activedescendant="highlighted ? optionId(highlighted.id) : undefined"
+					tabindex="0"
+					@keydown="onListKeydown"
+				>
+					<div v-bind="wrapperProps">
+						<div
+							v-for="{ data: entry } in list"
+							:id="optionId(entry.id)"
+							:key="entry.id"
+							role="option"
+							:aria-selected="entry.id === highlighted?.id"
+							class="flex h-[52px] cursor-pointer items-center gap-2 rounded-xl px-3"
+							:class="entry.id === highlighted?.id ? 'bg-brand-highlight' : 'hover:bg-surface-4'"
+							@click="highlightedId = entry.id"
+							@dblclick="choose(entry)"
+						>
+							<VersionChannelIndicator :channel="entry.version_type" size="sm" class="shrink-0" />
+							<div class="flex min-w-0 flex-1 flex-col">
+								<span class="truncate font-semibold text-contrast" :title="entry.version_number">
+									{{ entry.version_number }}
+								</span>
+								<span class="truncate text-xs text-secondary">
+									{{ formatShortDate(entry.date_published) }}
+								</span>
+							</div>
+							<CheckIcon
+								v-if="entry.id === currentVersionId"
+								v-tooltip="formatMessage(messages.current)"
+								class="size-4 shrink-0 text-green"
+								:aria-label="formatMessage(messages.current)"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="flex min-w-0 flex-1 flex-col bg-surface-2" aria-live="polite">
+				<template v-if="highlighted">
+					<div class="flex flex-col gap-2 border-0 border-b border-solid border-surface-4 p-4">
+						<div class="flex flex-wrap items-center gap-2">
+							<span class="text-xl font-semibold text-contrast">{{
+								highlighted.version_number
+							}}</span>
+							<TagItem>{{ formatMessage(channelMessages[highlighted.version_type]) }}</TagItem>
+							<TagItem v-if="highlighted.status !== 'listed'" class="font-semibold">
+								{{
+									formatMessage(
+										versionStatusMessages[highlighted.status] ?? versionStatusMessages.unknown,
+									)
+								}}
+							</TagItem>
+							<span
+								v-tooltip="formatFullDate(highlighted.date_published)"
+								class="ml-auto text-sm text-secondary"
+							>
+								{{ formatShortDate(highlighted.date_published) }}
+							</span>
+						</div>
+						<span v-if="highlighted.name !== highlighted.version_number" class="text-secondary">
+							{{ highlighted.name }}
+						</span>
+						<div class="flex flex-wrap gap-1">
+							<TagTagItem v-for="loader in highlighted.loaders" :key="loader" :tag="loader" />
+							<TagItem v-for="gameVersion in shownGameVersions" :key="gameVersion">
+								{{ gameVersion }}
+							</TagItem>
+							<TagItem v-if="hiddenGameVersions.length" v-tooltip="hiddenGameVersions.join(', ')">
+								{{ formatMessage(messages.moreGameVersions, { count: hiddenGameVersions.length }) }}
+							</TagItem>
+						</div>
+						<ul class="m-0 flex list-none flex-col gap-1 p-0 text-sm">
+							<li
+								v-for="file in highlighted.files"
+								:key="file.url"
+								class="flex min-w-0 items-center gap-2"
+							>
+								<FileIcon class="size-4 shrink-0 text-secondary" aria-hidden="true" />
+								<span class="truncate text-primary" :title="file.filename">{{
+									file.filename
+								}}</span>
+								<span class="shrink-0 text-secondary">{{ formatBytes(file.size) }}</span>
+								<TagItem v-if="file.primary" class="shrink-0">
+									{{ formatMessage(messages.primary) }}
+								</TagItem>
+							</li>
+						</ul>
+					</div>
+					<div class="min-h-0 flex-1 overflow-y-auto p-4">
+						<span
+							v-if="changelogQuery.isPending.value"
+							class="flex items-center gap-2 text-secondary"
+						>
+							<SpinnerIcon class="size-4 animate-spin" aria-hidden="true" />
+							{{ formatMessage(messages.loadingChangelog) }}
+						</span>
+						<div
+							v-else-if="changelog"
+							class="markdown-body"
+							v-html="renderHighlightedString(changelog)"
+						/>
+						<span v-else class="italic text-secondary">{{
+							formatMessage(messages.noChangelog)
+						}}</span>
+					</div>
+				</template>
+				<span v-else class="m-auto text-secondary">{{ formatMessage(messages.selectPrompt) }}</span>
+			</div>
+		</div>
+		<div
+			class="flex items-center justify-end gap-2 border-0 border-t border-solid border-surface-4 p-4"
+		>
+			<Button type="outlined" @click="hide">
+				<XIcon aria-hidden="true" />
+				{{ formatMessage(commonMessages.cancelButton) }}
+			</Button>
+			<Button
+				type="colored"
+				color="brand"
+				:disabled="!highlighted || highlighted.id === currentVersionId"
+				@click="highlighted && choose(highlighted)"
+			>
+				<CheckIcon aria-hidden="true" />
+				{{ formatMessage(messages.open, { version: highlighted?.version_number ?? '...' }) }}
+			</Button>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { CheckIcon, FileIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import {
+	Avatar,
+	Button,
+	commonMessages,
+	defineMessages,
+	injectModrinthClient,
+	Input,
+	NewModal,
+	TagItem,
+	TagTagItem,
+	useFormatBytes,
+	useFormatDateTime,
+	useVIntl,
+	VersionChannelIndicator,
+} from '@modrinth/ui'
+import { renderHighlightedString } from '@modrinth/utils/highlightjs/index'
+import { useQuery } from '@tanstack/vue-query'
+import { useVirtualList } from '@vueuse/core'
+import { computed, nextTick, ref, useId, useTemplateRef, watch } from 'vue'
+
+import { channelMessages, versionStatusMessages } from './messages'
+
+type Version = Labrinth.Versions.v3.Version
+type Channel = Version['version_type']
+
+/**
+ * Picks a version of the project to view, from a searchable list (only the rows in view are
+ * rendered, as projects can have thousands of versions) beside the highlighted version's
+ * details and changelog, which is fetched once it's highlighted.
+ */
+const props = defineProps<{
+	project: Labrinth.Projects.v3.Project
+	/** The project's versions, newest first. */
+	versions: Version[]
+	loading?: boolean
+	currentVersionId?: string
+}>()
+
+const emit = defineEmits<{
+	select: [id: string]
+}>()
+
+const { formatMessage } = useVIntl()
+const client = injectModrinthClient()
+const formatBytes = useFormatBytes()
+const formatShortDate = useFormatDateTime({ dateStyle: 'medium' })
+const formatFullDate = useFormatDateTime({ dateStyle: 'full', timeStyle: 'long' })
+
+const messages = defineMessages({
+	title: { id: 'archive.version-modal.title', defaultMessage: 'Select a version' },
+	searchPlaceholder: {
+		id: 'archive.version-modal.search-placeholder',
+		defaultMessage: 'Search versions...',
+	},
+	loading: { id: 'archive.version-modal.loading', defaultMessage: 'Loading versions...' },
+	noVersions: { id: 'archive.version-modal.no-versions', defaultMessage: 'No versions found' },
+	current: { id: 'archive.version-modal.current', defaultMessage: 'Currently open' },
+	primary: { id: 'archive.version-modal.primary', defaultMessage: 'Primary' },
+	moreGameVersions: {
+		id: 'archive.version-modal.more-game-versions',
+		defaultMessage: '+{count} more',
+	},
+	loadingChangelog: {
+		id: 'archive.version-modal.loading-changelog',
+		defaultMessage: 'Loading changelog...',
+	},
+	noChangelog: { id: 'archive.version-modal.no-changelog', defaultMessage: 'No changelog' },
+	selectPrompt: {
+		id: 'archive.version-modal.select-prompt',
+		defaultMessage: 'Select a version to see its details',
+	},
+	open: { id: 'archive.version-modal.open', defaultMessage: 'Open {version}' },
+})
+
+const CHANNELS: Channel[] = ['release', 'beta', 'alpha']
+const ROW_HEIGHT = 52
+const SHOWN_GAME_VERSIONS = 8
+
+const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const listId = useId()
+const search = ref('')
+const channels = ref<Channel[]>([])
+const highlightedId = ref<string | null>(null)
+
+function optionId(id: string) {
+	return `${listId}-${id}`
+}
+
+function toggleChannel(channel: Channel) {
+	channels.value = channels.value.includes(channel)
+		? channels.value.filter((entry) => entry !== channel)
+		: [...channels.value, channel]
+}
+
+const filtered = computed(() => {
+	const term = search.value.trim().toLocaleLowerCase()
+	return props.versions.filter(
+		(entry) =>
+			(!channels.value.length || channels.value.includes(entry.version_type)) &&
+			(!term ||
+				entry.version_number.toLocaleLowerCase().includes(term) ||
+				entry.name.toLocaleLowerCase().includes(term) ||
+				entry.id.toLocaleLowerCase() === term ||
+				entry.game_versions.some((gameVersion) => gameVersion.toLocaleLowerCase() === term)),
+	)
+})
+
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filtered, {
+	itemHeight: ROW_HEIGHT,
+	overscan: 6,
+})
+
+watch([search, channels], () => scrollTo(0))
+
+const highlighted = computed(
+	() => props.versions.find((entry) => entry.id === highlightedId.value) ?? null,
+)
+
+const shownGameVersions = computed(
+	() => highlighted.value?.game_versions.slice(0, SHOWN_GAME_VERSIONS) ?? [],
+)
+const hiddenGameVersions = computed(
+	() => highlighted.value?.game_versions.slice(SHOWN_GAME_VERSIONS) ?? [],
+)
+
+/** The project's versions are listed without changelogs, so each is fetched as it's previewed. */
+const changelogQuery = useQuery({
+	queryKey: computed(() => ['version', 'v3', highlightedId.value]),
+	queryFn: () => client.labrinth.versions_v3.getVersion(highlightedId.value!),
+	enabled: computed(() => !!highlightedId.value),
+	staleTime: 5 * 60 * 1000,
+})
+const changelog = computed(() => changelogQuery.data.value?.changelog ?? null)
+
+/** Moves the highlight with the arrow keys and opens it with Enter, from the search or the list. */
+function onListKeydown(event: KeyboardEvent) {
+	const index = filtered.value.findIndex((entry) => entry.id === highlightedId.value)
+	let next = index
+	if (event.key === 'ArrowDown') next = Math.min(index + 1, filtered.value.length - 1)
+	else if (event.key === 'ArrowUp') next = Math.max(index - 1, 0)
+	else if (event.key === 'Home' && event.target === event.currentTarget) next = 0
+	else if (event.key === 'End' && event.target === event.currentTarget)
+		next = filtered.value.length - 1
+	else if (event.key === 'Enter' && highlighted.value) {
+		event.preventDefault()
+		choose(highlighted.value)
+		return
+	} else return
+	event.preventDefault()
+	const entry = filtered.value[next]
+	if (!entry) return
+	highlightedId.value = entry.id
+	revealRow(next)
+}
+
+/** Scrolls the row into view only when it's outside it, keeping the list still otherwise. */
+function revealRow(index: number) {
+	const container = containerProps.ref.value
+	if (!container) return
+	const top = index * ROW_HEIGHT
+	if (top < container.scrollTop) container.scrollTop = top
+	else if (top + ROW_HEIGHT > container.scrollTop + container.clientHeight) {
+		container.scrollTop = top + ROW_HEIGHT - container.clientHeight
+	}
+}
+
+function choose(entry: Version) {
+	if (entry.id !== props.currentVersionId) emit('select', entry.id)
+	hide()
+}
+
+async function onShow() {
+	search.value = ''
+	channels.value = []
+	highlightedId.value = props.currentVersionId ?? props.versions[0]?.id ?? null
+	await nextTick()
+	const index = filtered.value.findIndex((entry) => entry.id === highlightedId.value)
+	if (index > 0) scrollTo(index)
+}
+
+function show(event?: MouseEvent) {
+	modal.value?.show(event)
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/apps/frontend/src/components/ui/archive-viewer/messages.ts b/apps/frontend/src/components/ui/archive-viewer/messages.ts
new file mode 100644
index 0000000000..582b51309f
--- /dev/null
+++ b/apps/frontend/src/components/ui/archive-viewer/messages.ts
@@ -0,0 +1,25 @@
+import { defineMessages } from '@modrinth/ui'
+
+/** Links to the archive viewer from elsewhere, e.g. version lists. */
+export const archiveLinkMessages = defineMessages({
+	archive: { id: 'archive.link.archive', defaultMessage: 'Archive' },
+	openArchive: { id: 'archive.link.open', defaultMessage: 'Open in the archive viewer' },
+})
+
+export const channelMessages = defineMessages({
+	release: { id: 'archive.project-details.channel.release', defaultMessage: 'Release' },
+	beta: { id: 'archive.project-details.channel.beta', defaultMessage: 'Beta' },
+	alpha: { id: 'archive.project-details.channel.alpha', defaultMessage: 'Alpha' },
+})
+
+export const versionStatusMessages = defineMessages({
+	listed: { id: 'archive.project-details.version-status.listed', defaultMessage: 'Listed' },
+	archived: { id: 'archive.project-details.version-status.archived', defaultMessage: 'Archived' },
+	draft: { id: 'archive.project-details.version-status.draft', defaultMessage: 'Draft' },
+	unlisted: { id: 'archive.project-details.version-status.unlisted', defaultMessage: 'Unlisted' },
+	scheduled: {
+		id: 'archive.project-details.version-status.scheduled',
+		defaultMessage: 'Scheduled',
+	},
+	unknown: { id: 'archive.project-details.version-status.unknown', defaultMessage: 'Unknown' },
+})
diff --git a/apps/frontend/src/components/ui/moderation/ProjectC2paScanModal.vue b/apps/frontend/src/components/ui/moderation/ProjectC2paScanModal.vue
index 6eef4b7aee..770e85a3f2 100644
--- a/apps/frontend/src/components/ui/moderation/ProjectC2paScanModal.vue
+++ b/apps/frontend/src/components/ui/moderation/ProjectC2paScanModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CoffeeIcon, ExternalIcon } from '@modrinth/assets'
+import { ExternalIcon, FolderArchiveIcon } from '@modrinth/assets'
 import {
 	Button,
 	ButtonLink,
@@ -10,11 +10,12 @@ import {
 } from '@modrinth/ui'
 import { ref, useTemplateRef } from 'vue'
 
+import { archiveViewerUrl } from '~/helpers/archive-viewer'
 import { fileDeclaresAi } from '~/helpers/c2pa.ts'
-import { injectReviewSlicer, slicerFileName } from '~/providers/project-review/review-slicer'
+import { injectReviewArchive } from '~/providers/project-review/review-archive'
 
 const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
-const slicer = injectReviewSlicer(null)
+const archive = injectReviewArchive(null)
 const isScanning = ref(false)
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -100,13 +101,13 @@ async function scanFiles(urls: string[]) {
 	}
 }
 
-function createSlicerUrl(file: { url: string; path: string }) {
-	return `https://slicer.run/?file=${encodeURIComponent(`${slicerFileName(file.url)}/${file.path}`)}&url=${encodeURIComponent(file.url)}`
+function createArchiveUrl(file: { url: string; path: string }) {
+	return archiveViewerUrl({ url: file.url, file: file.path })
 }
 
-function openInSlicerTab(file: { url: string; path: string }) {
-	if (!slicer) return
-	slicer.open([file.url], `${slicerFileName(file.url)}/${file.path}`)
+function openInArchivePanels(file: { url: string; path: string }) {
+	if (!archive) return
+	archive.open(file.url, file.path)
 	hide()
 }
 
@@ -152,8 +153,10 @@ defineExpose({ openC2paModal, hide })
 					>
 						{{ file.path }}
 						<span class="break-all text-xs text-secondary">{{ file.url }}</span>
-						<Button v-if="slicer" @click="openInSlicerTab(file)"> Open <CoffeeIcon /> </Button>
-						<ButtonLink v-else :href="createSlicerUrl(file)" target="_blank">
+						<Button v-if="archive" @click="openInArchivePanels(file)">
+							Open <FolderArchiveIcon />
+						</Button>
+						<ButtonLink v-else :href="createArchiveUrl(file)" target="_blank">
 							Open <ExternalIcon />
 						</ButtonLink>
 					</div>
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationAppearance.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationAppearance.vue
index b54874ddcc..d406ae886a 100644
--- a/apps/frontend/src/components/ui/moderation/settings/ModerationAppearance.vue
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationAppearance.vue
@@ -7,6 +7,7 @@ import {
 	Input,
 	IntlFormatted,
 	type MessageDescriptor,
+	type SettingText,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -149,14 +150,18 @@ const filteredGroups = computed(() => {
 		.map((group) => ({
 			...group,
 			settings: group.settings.filter((setting) =>
-				[formatMessage(group.title), setting.title, setting.description].some((text) =>
-					text.toLocaleLowerCase().includes(query),
+				[formatMessage(group.title), text(setting.title), text(setting.description ?? '')].some(
+					(value) => value.toLocaleLowerCase().includes(query),
 				),
 			),
 		}))
 		.filter((group) => group.settings.length)
 })
 
+function text(value: SettingText) {
+	return typeof value === 'string' ? value : formatMessage(value)
+}
+
 function controlLabel(section: MessageDescriptor, setting: string) {
 	return formatMessage(messages.controlLabel, {
 		section: formatMessage(section),
@@ -226,8 +231,8 @@ const { style: floatingPanelStyle } = useFloatingReviewPanelAppearance()
 					class="flex flex-row flex-wrap items-center justify-between gap-2"
 				>
 					<div class="min-w-0 flex-1">
-						<span class="mb-2.5 block font-semibold text-contrast">{{ setting.title }}</span>
-						<span class="block text-secondary">{{ setting.description }}</span>
+						<span class="mb-2.5 block font-semibold text-contrast">{{ text(setting.title) }}</span>
+						<span class="block text-secondary">{{ text(setting.description ?? '') }}</span>
 						<span
 							v-if="
 								setting.id === general.ShowFloatingPanelFieldHoverHighlight.id ||
@@ -253,7 +258,7 @@ const { style: floatingPanelStyle } = useFloatingReviewPanelAppearance()
 
 					<ModerationColorSetting
 						v-if="setting.type === 'color'"
-						:label="controlLabel(group.title, setting.title)"
+						:label="controlLabel(group.title, text(setting.title))"
 						:default-label="defaultLabel(setting)"
 						:reset-value="String(resetValue(setting))"
 						default-color="var(--color-orange)"
@@ -265,7 +270,7 @@ const { style: floatingPanelStyle } = useFloatingReviewPanelAppearance()
 							type="number"
 							clamp
 							class="w-24"
-							:aria-label="controlLabel(group.title, setting.title)"
+							:aria-label="controlLabel(group.title, text(setting.title))"
 							:model-value="configuredSettings.get(setting)"
 							:min="setting.min"
 							:max="setting.max"
@@ -350,7 +355,7 @@ const { style: floatingPanelStyle } = useFloatingReviewPanelAppearance()
 
 					<Toggle
 						v-if="setting.type === 'toggle'"
-						:aria-label="controlLabel(group.title, setting.title)"
+						:aria-label="controlLabel(group.title, text(setting.title))"
 						:model-value="configuredSettings.get(setting)"
 						class="shrink-0"
 						@update:model-value="(value) => configuredSettings.set(setting, value)"
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationSettingActions.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationSettingActions.vue
new file mode 100644
index 0000000000..f70349b198
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationSettingActions.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { moderationSettings } from '@modrinth/moderation'
+import {
+	Button,
+	defineMessages,
+	type SettingDefinition,
+	type SettingsStore,
+	useVIntl,
+} from '@modrinth/ui'
+
+/** Extra controls beside a moderation setting, e.g. filling in the local development host. */
+defineProps<{
+	setting: SettingDefinition
+	store: SettingsStore
+}>()
+
+const LOCALHOST_HOSTNAME = 'localhost:3000'
+const hostname = moderationSettings.General.AlternativeHostname
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	localhost: {
+		id: 'moderation.settings.localhost',
+		defaultMessage: 'Set to {hostname}',
+	},
+})
+</script>
+
+<template>
+	<Button
+		v-if="setting.id === hostname.id"
+		type="outlined"
+		size="sm"
+		class="shrink-0"
+		:disabled="store.get(hostname) === LOCALHOST_HOSTNAME"
+		@click="store.set(hostname, LOCALHOST_HOSTNAME)"
+	>
+		{{ formatMessage(messages.localhost, { hostname: LOCALHOST_HOSTNAME }) }}
+	</Button>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
index 1e2d6f31fe..65be9f3aed 100644
--- a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
@@ -1,250 +1,30 @@
 <script setup lang="ts">
-import { SearchIcon } from '@modrinth/assets'
-import { moderationSettings } from '@modrinth/moderation'
-import {
-	Button,
-	Combobox,
-	defineMessages,
-	Input,
-	IntlFormatted,
-	Toggle,
-	useVIntl,
-} from '@modrinth/ui'
-import { computed, ref, useId } from 'vue'
+import { defineMessages, SettingsPanel, useVIntl } from '@modrinth/ui'
 
 import { useModerationSettings } from '~/composables/moderation'
 
+import { moderationSettingGroups } from './groups'
+import ModerationSettingActions from './ModerationSettingActions.vue'
+
 defineProps<{
 	embedded?: boolean
 }>()
 
-const localhostHostname = 'localhost:3000'
-
 const { formatMessage } = useVIntl()
-const search = ref('')
-const settingsId = useId()
 const messages = defineMessages({
-	title: {
-		id: 'moderation.settings.title',
-		defaultMessage: 'General settings',
-	},
-	search: {
-		id: 'moderation.settings.search',
-		defaultMessage: 'Search settings…',
-	},
-	noResults: {
-		id: 'moderation.settings.no-results',
-		defaultMessage: 'No settings match your search.',
-	},
-	workflow: {
-		id: 'moderation.settings.workflow',
-		defaultMessage: 'Review workflow and queue',
-	},
-	panels: {
-		id: 'moderation.settings.panels',
-		defaultMessage: 'Panels',
-	},
-	appearance: {
-		id: 'moderation.settings.appearance',
-		defaultMessage: 'Appearance',
-	},
-	shortcuts: {
-		id: 'moderation.settings.shortcuts',
-		defaultMessage: 'Editors and shortcut hints',
-	},
-	projectPages: {
-		id: 'moderation.settings.project-pages',
-		defaultMessage: 'Public pages and hosts',
-	},
-	debug: {
-		id: 'moderation.settings.debug',
-		defaultMessage: 'Debug settings',
-	},
-	defaultValue: {
-		id: 'moderation.settings.default-value-styled',
-		defaultMessage: 'Default: <value></value>',
-	},
-	on: { id: 'moderation.settings.on', defaultMessage: 'On' },
-	off: { id: 'moderation.settings.off', defaultMessage: 'Off' },
-	none: { id: 'moderation.settings.none', defaultMessage: 'None' },
-	localhost: {
-		id: 'moderation.settings.localhost',
-		defaultMessage: 'Set to {hostname}',
-	},
-})
-const general = moderationSettings.General
-const groups = [
-	{
-		id: 'workflow',
-		title: messages.workflow,
-		settings: [
-			general.SendIssuesAsThreadMessage,
-			general.AutoGoNextOnReviewOutcome,
-			general.IncludeNonProcessingProjects,
-		],
-	},
-	{
-		id: 'panels',
-		title: messages.panels,
-		settings: [general.LinkInfoPlacement],
-	},
-	{
-		id: 'appearance',
-		title: messages.appearance,
-		settings: [
-			general.GalleryColumns,
-			general.ExpandVersionDetailsByDefault,
-			general.ExpandVersionDependenciesByDefault,
-			general.ExpandVersionChangelogByDefault,
-			general.EnableDelayedHoverMessagePreviews,
-			general.PrivateMessageHighlight,
-		],
-	},
-	{
-		id: 'shortcuts',
-		title: messages.shortcuts,
-		settings: [
-			general.HideMarkdownFormattingButtons,
-			general.ShowShortcutKeybindHints,
-			general.ShowToggleIssueButtonShortcutHint,
-		],
-	},
-	{
-		id: 'project-pages',
-		title: messages.projectPages,
-		settings: [
-			general.EnableProjectKeybinds,
-			general.SlicerButtonInVersions,
-			general.AlternativeHostname,
-		],
-	},
-	{
-		id: 'debug',
-		title: messages.debug,
-		settings: [general.ShowAllIssueControls],
-	},
-]
-
-const filteredGroups = computed(() => {
-	const query = search.value.trim().toLocaleLowerCase()
-	return groups
-		.map((group) => ({
-			...group,
-			settings: group.settings.filter((setting) =>
-				[formatMessage(group.title), setting.title, setting.description].some((text) =>
-					text.toLocaleLowerCase().includes(query),
-				),
-			),
-		}))
-		.filter((group) => group.settings.length)
+	title: { id: 'moderation.settings.title', defaultMessage: 'General settings' },
 })
 
-function defaultLabel(setting: (typeof groups)[number]['settings'][number]) {
-	if (setting.type === 'toggle') return formatMessage(setting.default ? messages.on : messages.off)
-	if (setting.type === 'enum')
-		return (
-			setting.entries.find((entry) => entry.value === setting.default)?.label ?? setting.default
-		)
-	return setting.default || formatMessage(messages.none)
-}
-
-const configuredSettings = useModerationSettings()
+const settings = useModerationSettings()
 </script>
 
 <template>
 	<div :class="{ 'universal-card': !embedded }">
-		<h2 class="m-0 mb-2.5 text-2xl">
-			{{ formatMessage(messages.title) }}
-		</h2>
-		<Input
-			v-model="search"
-			type="search"
-			:icon="SearchIcon"
-			:placeholder="formatMessage(messages.search)"
-			:aria-label="formatMessage(messages.search)"
-			class="w-full"
-		/>
-		<p v-if="!filteredGroups.length" class="text-secondary" role="status">
-			{{ formatMessage(messages.noResults) }}
-		</p>
-		<section
-			v-for="group in filteredGroups"
-			:key="group.id"
-			:aria-labelledby="`${settingsId}-${group.id}`"
-			class="mt-8"
-		>
-			<h3 :id="`${settingsId}-${group.id}`" class="mb-6 text-xl font-semibold">
-				{{ formatMessage(group.title) }}
-			</h3>
-			<div class="flex flex-col gap-6">
-				<div
-					v-for="setting in group.settings"
-					:key="setting.id"
-					class="flex flex-row flex-wrap items-center justify-between gap-2"
-				>
-					<div class="min-w-0 flex-1">
-						<span class="mb-2.5 block font-semibold text-contrast">{{ setting.title }}</span>
-						<span class="block text-secondary">{{ setting.description }}</span>
-						<span class="mt-2.5 block text-xs text-secondary">
-							<IntlFormatted :message-id="messages.defaultValue">
-								<template #value>
-									<span
-										class="font-medium"
-										:class="{
-											'text-green': setting.type === 'toggle' && setting.default,
-											'text-red': setting.type === 'toggle' && !setting.default,
-											'italic opacity-50': setting.default === '',
-										}"
-										>{{ defaultLabel(setting) }}</span
-									>
-								</template>
-							</IntlFormatted>
-						</span>
-					</div>
-
-					<Toggle
-						v-if="setting.type === 'toggle'"
-						:aria-label="setting.title"
-						:model-value="configuredSettings.get(setting)"
-						class="shrink-0"
-						@update:model-value="(value) => configuredSettings.set(setting, value)"
-					/>
-					<Combobox
-						v-if="setting.type === 'enum'"
-						:aria-label="setting.title"
-						:model-value="configuredSettings.get(setting)"
-						:options="
-							setting.entries.map((entry) => ({
-								value: entry.value,
-								label: entry.label,
-							}))
-						"
-						class="w-full sm:!w-1/3"
-						@update:model-value="(value) => configuredSettings.set(setting, value)"
-					/>
-					<div
-						v-if="setting.type === 'string'"
-						class="flex w-full flex-col items-start gap-2 sm:!w-1/3"
-					>
-						<Input
-							type="text"
-							:aria-label="setting.title"
-							:model-value="configuredSettings.get(setting) ?? ''"
-							@update:model-value="(value) => configuredSettings.set(setting, String(value ?? ''))"
-						/>
-						<Button
-							v-if="setting.id === 'alternative-hostname'"
-							type="outlined"
-							size="sm"
-							class="shrink-0"
-							:disabled="configuredSettings.get(setting) === localhostHostname"
-							@click="configuredSettings.set(setting, localhostHostname)"
-						>
-							{{ formatMessage(messages.localhost, { hostname: localhostHostname }) }}
-						</Button>
-					</div>
-				</div>
-			</div>
-		</section>
+		<h2 class="m-0 mb-2.5 text-2xl">{{ formatMessage(messages.title) }}</h2>
+		<SettingsPanel :groups="moderationSettingGroups" :store="settings">
+			<template #setting-actions="{ setting, store }">
+				<ModerationSettingActions :setting="setting" :store="store" />
+			</template>
+		</SettingsPanel>
 	</div>
 </template>
diff --git a/apps/frontend/src/components/ui/moderation/settings/groups.ts b/apps/frontend/src/components/ui/moderation/settings/groups.ts
new file mode 100644
index 0000000000..8febe1923c
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/settings/groups.ts
@@ -0,0 +1,87 @@
+import { moderationSettings } from '@modrinth/moderation'
+import { defineMessages, type SettingGroup } from '@modrinth/ui'
+
+const messages = defineMessages({
+	workflow: {
+		id: 'moderation.settings.workflow',
+		defaultMessage: 'Review workflow and queue',
+	},
+	panels: {
+		id: 'moderation.settings.panels',
+		defaultMessage: 'Panels',
+	},
+	appearance: {
+		id: 'moderation.settings.appearance',
+		defaultMessage: 'Appearance',
+	},
+	shortcuts: {
+		id: 'moderation.settings.shortcuts',
+		defaultMessage: 'Editors and shortcut hints',
+	},
+	projectPages: {
+		id: 'moderation.settings.project-pages',
+		defaultMessage: 'Public pages and hosts',
+	},
+	debug: {
+		id: 'moderation.settings.debug',
+		defaultMessage: 'Debug settings',
+	},
+})
+
+const general = moderationSettings.General
+
+/** The moderation settings by heading, for the settings page and the review's settings modal. */
+export const moderationSettingGroups: SettingGroup[] = [
+	{
+		id: 'workflow',
+		title: messages.workflow,
+		settings: [
+			general.SendIssuesAsThreadMessage,
+			general.AutoGoNextOnReviewOutcome,
+			general.IncludeNonProcessingProjects,
+		],
+	},
+	{
+		id: 'panels',
+		title: messages.panels,
+		settings: [general.LinkInfoPlacement, general.ArchiveIntegration, general.MergeRulings],
+	},
+	{
+		id: 'appearance',
+		title: messages.appearance,
+		settings: [
+			general.GalleryColumns,
+			general.ExpandVersionDetailsByDefault,
+			general.ExpandVersionDependenciesByDefault,
+			general.ExpandVersionChangelogByDefault,
+			general.EnableDelayedHoverMessagePreviews,
+			general.ButtonSize,
+			general.PrivateMessageHighlight,
+			general.SectionHeadersVisible,
+			general.SectionReducedGap,
+		],
+	},
+	{
+		id: 'shortcuts',
+		title: messages.shortcuts,
+		settings: [
+			general.MarkdownFormattingButtonsVisibility,
+			general.ShowShortcutKeybindHints,
+			general.ShowToggleIssueButtonShortcutHint,
+		],
+	},
+	{
+		id: 'project-pages',
+		title: messages.projectPages,
+		settings: [
+			general.EnableProjectKeybinds,
+			general.ArchiveButtonInVersions,
+			general.AlternativeHostname,
+		],
+	},
+	{
+		id: 'debug',
+		title: messages.debug,
+		settings: [general.ShowAllIssueControls],
+	},
+]
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue
index 9432cc139b..7cf9d8ba44 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue
@@ -3,9 +3,9 @@ import {
 	CheckIcon,
 	ChevronDownIcon,
 	ClipboardCopyIcon,
-	CoffeeIcon,
 	CopyIcon,
 	ExternalIcon,
+	FolderArchiveIcon,
 	LoaderCircleIcon,
 } from '@modrinth/assets'
 import {
@@ -18,7 +18,8 @@ import {
 import { capitalizeString, highlightCodeLines } from '@modrinth/utils'
 import { computed, reactive, ref } from 'vue'
 
-import { injectReviewSlicer, slicerFileName } from '~/providers/project-review/review-slicer'
+import { archiveNameFrom, archiveViewerUrl } from '~/helpers/archive-viewer'
+import { injectReviewArchive } from '~/providers/project-review/review-archive'
 
 import { getSeverityBadgeColor, truncateMiddle } from './helpers'
 import TechRevFlagBadges from './TechRevFlagBadges.vue'
@@ -41,7 +42,7 @@ const emit = defineEmits<{
 }>()
 
 const client = injectModrinthClient()
-const slicer = injectReviewSlicer(null)
+const archive = injectReviewArchive(null)
 const { addNotification } = injectNotificationManager()
 const { isPreReviewed, getMarkedFlagsCount } = injectTechReviewDecisions()
 
@@ -130,18 +131,18 @@ function trimSlashes(path: string): string {
 }
 
 /**
- * Resolves the slicer workspace entry for a class group, removing trailing and leading slashes and
- * assuming `.class` when the path has no file extension.
+ * Resolves the archive entry for a class group, starting with the jar it's in, removing trailing
+ * and leading slashes and assuming `.class` when the path has no file extension.
  */
-function slicerEntry(url: string, group: ClassGroup) {
-	const jarPath = trimSlashes(group.jar ? group.jar.replace('#', '/') : slicerFileName(url))
+function archiveEntry(url: string, group: ClassGroup) {
+	const jarPath = trimSlashes(group.jar ? group.jar.replace('#', '/') : archiveNameFrom(url))
 	const filePath = trimSlashes(group.filePath)
 	const hasFileExtension = (filePath.split('/').pop() || '').includes('.')
 	return `${jarPath}/${hasFileExtension ? filePath : `${filePath}.class`}`
 }
 
-function createSlicerLink(url: string, group: ClassGroup) {
-	return `https://slicer.run/?url=${encodeURIComponent(url)}&file=${encodeURIComponent(slicerEntry(url, group))}`
+function createArchiveLink(url: string, group: ClassGroup) {
+	return archiveViewerUrl({ url, file: archiveEntry(url, group) })
 }
 </script>
 
@@ -184,21 +185,21 @@ function createSlicerLink(url: string, group: ClassGroup) {
 						</div>
 					</Transition>
 					<Button
-						v-if="slicer"
-						v-tooltip="'Open file in Slicer tab'"
+						v-if="archive"
+						v-tooltip="'Open file in the archive panels'"
 						type="outlined"
 						circular
 						icon-only
 						@click.stop="
-							slicer.open([file.download_url], slicerEntry(file.download_url, classItem))
+							archive.open(file.download_url, archiveEntry(file.download_url, classItem))
 						"
 					>
-						<CoffeeIcon />
+						<FolderArchiveIcon />
 					</Button>
 					<ButtonLink
-						v-tooltip="'Open file in slicer'"
+						v-tooltip="'Open file in the archive viewer'"
 						type="outlined"
-						:href="createSlicerLink(file.download_url, classItem)"
+						:href="createArchiveLink(file.download_url, classItem)"
 						:target="file.file_id"
 						circular
 						icon-only
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue
index de3c5d7e89..654b0436a6 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue
+++ b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { CoffeeIcon, DownloadIcon, ExternalIcon } from '@modrinth/assets'
+import { DownloadIcon, ExternalIcon, FolderArchiveIcon } from '@modrinth/assets'
 import { Button, ButtonLink, defineMessages, useFormatBytes, useVIntl } from '@modrinth/ui'
 
-import { injectReviewSlicer } from '~/providers/project-review/review-slicer'
+import { archiveViewerUrl } from '~/helpers/archive-viewer'
+import { injectReviewArchive } from '~/providers/project-review/review-archive'
 
 import type { FlattenedFileReport } from './types'
 
@@ -10,7 +11,7 @@ defineProps<{
 	file: FlattenedFileReport
 }>()
 
-const slicer = injectReviewSlicer(null)
+const archive = injectReviewArchive(null)
 const formatBytes = useFormatBytes()
 const { formatMessage } = useVIntl()
 const messages = defineMessages({
@@ -19,11 +20,14 @@ const messages = defineMessages({
 		id: 'moderation.tech-review.file.download-file',
 		defaultMessage: 'Download {filename} ({size})',
 	},
-	slicer: { id: 'moderation.tech-review.file.slicer', defaultMessage: 'Slicer' },
-	openSlicer: { id: 'moderation.tech-review.file.open-slicer', defaultMessage: 'Open in Slicer' },
-	openSlicerTab: {
-		id: 'moderation.tech-review.file.open-slicer-tab',
-		defaultMessage: 'Open in Slicer tab',
+	archive: { id: 'moderation.tech-review.file.archive', defaultMessage: 'Archive' },
+	openArchive: {
+		id: 'moderation.tech-review.file.open-archive',
+		defaultMessage: 'Open in the archive viewer',
+	},
+	openArchivePanel: {
+		id: 'moderation.tech-review.file.open-archive-panel',
+		defaultMessage: "Open in the review's archive panels",
 	},
 })
 </script>
@@ -48,23 +52,23 @@ const messages = defineMessages({
 			<DownloadIcon aria-hidden="true" />
 		</ButtonLink>
 		<Button
-			v-if="slicer"
-			v-tooltip="formatMessage(messages.openSlicerTab)"
-			:aria-label="formatMessage(messages.openSlicerTab)"
+			v-if="archive"
+			v-tooltip="formatMessage(messages.openArchivePanel)"
+			:aria-label="formatMessage(messages.openArchivePanel)"
 			type="outlined"
 			icon-only
 			circular
-			@click="slicer.open([file.download_url])"
+			@click="archive.open(file.download_url)"
 		>
-			<CoffeeIcon aria-hidden="true" />
+			<FolderArchiveIcon aria-hidden="true" />
 		</Button>
 		<ButtonLink
-			v-tooltip="formatMessage(messages.openSlicer)"
+			v-tooltip="formatMessage(messages.openArchive)"
 			type="outlined"
 			:target="file.file_id"
-			:href="`https://slicer.run/?url=${encodeURIComponent(file.download_url)}`"
+			:href="archiveViewerUrl({ url: file.download_url })"
 		>
-			<ExternalIcon aria-hidden="true" /> {{ formatMessage(messages.slicer) }}
+			<ExternalIcon aria-hidden="true" /> {{ formatMessage(messages.archive) }}
 		</ButtonLink>
 	</div>
 </template>
diff --git a/apps/frontend/src/composables/cookie-settings.ts b/apps/frontend/src/composables/cookie-settings.ts
new file mode 100644
index 0000000000..6ae244ed2f
--- /dev/null
+++ b/apps/frontend/src/composables/cookie-settings.ts
@@ -0,0 +1,26 @@
+import { recordSettings, type SettingsStore } from '@modrinth/ui'
+
+import type { CookieOptions } from '#app'
+
+/** Settings cookies last ten years and are readable by the page, which applies them. */
+export const getSettingsCookieOptions = <T>() =>
+	({
+		maxAge: 60 * 60 * 24 * 365 * 10,
+		sameSite: 'lax',
+		secure: useRuntimeConfig().public.cookieSecure,
+		httpOnly: false,
+		path: '/',
+	}) satisfies CookieOptions<T>
+
+/**
+ * Settings kept in a cookie as a record of values by setting id, so server rendered pages use
+ * them too. Every caller with the same cookie name shares the same values.
+ */
+export function useCookieSettings(cookieName: string): SettingsStore {
+	const cookie = useCookie<Record<string, unknown> | null>(cookieName, getSettingsCookieOptions())
+	const values = useState<Record<string, unknown>>(`cookie-settings:${cookieName}`, () => ({
+		...cookie.value,
+	}))
+
+	return recordSettings(values, () => (cookie.value = { ...values.value }))
+}
diff --git a/apps/frontend/src/composables/moderation.ts b/apps/frontend/src/composables/moderation.ts
index becf030aa2..0591492663 100644
--- a/apps/frontend/src/composables/moderation.ts
+++ b/apps/frontend/src/composables/moderation.ts
@@ -1,7 +1,8 @@
-import { type KeybindDefinition, Keybinds, Settings } from '@modrinth/moderation'
+import { type KeybindDefinition, Keybinds } from '@modrinth/moderation'
+import { recordSettings } from '@modrinth/ui'
 import { computed } from 'vue'
 
-import type { CookieOptions } from '#app'
+import { getSettingsCookieOptions } from '~/composables/cookie-settings'
 import {
 	type AppearanceValues,
 	defaultAppearance,
@@ -20,23 +21,14 @@ type StoredOptions = {
 	appearanceTheme?: { id: string; values: AppearanceValues }
 }
 
-const getCookieOptions = <T>() =>
-	({
-		maxAge: 60 * 60 * 24 * 365 * 10,
-		sameSite: 'lax',
-		secure: useRuntimeConfig().public.cookieSecure,
-		httpOnly: false,
-		path: '/',
-	}) satisfies CookieOptions<T>
-
 const useModerationCookies = () => {
 	const keybindCookie = useCookie<Partial<StoredKeybinds> | null>(
 		moderationKeybindsId,
-		getCookieOptions(),
+		getSettingsCookieOptions(),
 	)
 	const optionsCookie = useCookie<Partial<StoredOptions> | null>(
 		moderationSettingsId,
-		getCookieOptions(),
+		getSettingsCookieOptions(),
 	)
 
 	if (keybindCookie.value && !optionsCookie.value) {
@@ -190,8 +182,12 @@ export function replaceModerationKeybinds(keybinds: StoredKeybinds) {
 	saveModerationOptions()
 }
 
+/**
+ * The moderation settings, kept in the moderation options cookie alongside the keybinds, as a
+ * store the shared settings panel and the review components read and write.
+ */
 export const useModerationSettings = () =>
-	computed(() => new Settings(useModerationOptions().value.settings, saveModerationOptions))
+	computed(() => recordSettings(useModerationOptions().value.settings, saveModerationOptions))
 
 export const useModerationAppearanceTheme = () =>
 	computed({
diff --git a/apps/frontend/src/helpers/archive-viewer.ts b/apps/frontend/src/helpers/archive-viewer.ts
new file mode 100644
index 0000000000..3e12e03acc
--- /dev/null
+++ b/apps/frontend/src/helpers/archive-viewer.ts
@@ -0,0 +1,55 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { ArchiveSource } from '@modrinth/ui'
+
+/** Whether a URL is one of Modrinth's own, which the archive viewer is allowed to open. */
+export function isModrinthCdnUrl(url: string) {
+	try {
+		const { protocol, hostname } = new URL(url)
+		return (
+			protocol === 'https:' && (hostname === 'modrinth.com' || hostname.endsWith('.modrinth.com'))
+		)
+	} catch {
+		return false
+	}
+}
+
+/** A version's primary file, or its first one if none is marked primary. */
+export function primaryFile(version: Labrinth.Versions.v3.Version) {
+	return version.files.find((file) => file.primary) ?? version.files[0]
+}
+
+export function archiveSourceFrom(file: Labrinth.Versions.v3.VersionFile): ArchiveSource {
+	return { url: file.url, name: file.filename, size: file.size, sha512Hash: file.hashes.sha512 }
+}
+
+/** The name an archive is shown by when only its URL is known, i.e. its file name. */
+export function archiveNameFrom(url: string) {
+	return decodeURIComponent(new URL(url).pathname.split('/').pop() ?? url)
+}
+
+/**
+ * The path of an entry within an archive. Slicer's entries start with the archive's name, which
+ * is dropped, so its links (and entries made for it) open as they are.
+ */
+export function archivePathFrom(entry: string | null | undefined, archiveName: string) {
+	if (!entry) return null
+	return entry.startsWith(`${archiveName}/`) ? entry.slice(archiveName.length + 1) : entry
+}
+
+/**
+ * A link to the archive viewer: a project's version (its latest by default), or an archive by its
+ * URL, optionally opened at an entry within it (a path within the archive, or a Slicer entry).
+ */
+export function archiveViewerUrl(options: {
+	project?: string
+	version?: string
+	url?: string
+	file?: string | null
+}) {
+	const params = new URLSearchParams()
+	if (options.project) params.set('project', options.project)
+	if (options.version) params.set('version', options.version)
+	if (options.url) params.set('url', options.url)
+	if (options.file) params.set('file', options.file)
+	return `/archive?${params}`
+}
diff --git a/apps/frontend/src/helpers/moderation-appearance.ts b/apps/frontend/src/helpers/moderation-appearance.ts
index cc4ff67484..191d158ddc 100644
--- a/apps/frontend/src/helpers/moderation-appearance.ts
+++ b/apps/frontend/src/helpers/moderation-appearance.ts
@@ -1,4 +1,5 @@
-import { isValidFor, moderationSettings, type Settings } from '@modrinth/moderation'
+import { moderationSettings } from '@modrinth/moderation'
+import { isValidSettingValue, type SettingsStore } from '@modrinth/ui'
 
 const general = moderationSettings.General
 export const appearanceFields = {
@@ -14,7 +15,7 @@ export type AppearanceValues = {
 	[K in keyof typeof appearanceFields]: (typeof appearanceFields)[K]['default']
 }
 
-export function readAppearance(settings: Settings): AppearanceValues {
+export function readAppearance(settings: SettingsStore): AppearanceValues {
 	return Object.fromEntries(
 		Object.entries(appearanceFields).map(([key, definition]) => [
 			key,
@@ -23,7 +24,7 @@ export function readAppearance(settings: Settings): AppearanceValues {
 	) as AppearanceValues
 }
 
-export function applyAppearance(settings: Settings, values: AppearanceValues) {
+export function applyAppearance(settings: SettingsStore, values: AppearanceValues) {
 	for (const [key, definition] of Object.entries(appearanceFields)) {
 		settings.set<string | number>(definition, values[key as keyof AppearanceValues])
 	}
@@ -33,7 +34,7 @@ export const defaultAppearance = Object.fromEntries(
 	Object.entries(appearanceFields).map(([key, definition]) => [key, definition.default]),
 ) as AppearanceValues
 
-export function exportAppearance(settings: Settings) {
+export function exportAppearance(settings: SettingsStore) {
 	const values = readAppearance(settings)
 	return JSON.stringify(
 		{
@@ -64,7 +65,7 @@ export function parseAppearance(source: string): AppearanceValues {
 	const values: Record<string, string | number> = {}
 	for (const [key, definition] of Object.entries(appearanceFields)) {
 		const value = data.values[key] === null && definition.type === 'color' ? '' : data.values[key]
-		if (!isValidFor(definition, value)) throw new Error('value')
+		if (!isValidSettingValue<string | number>(definition, value)) throw new Error('value')
 		values[key] = typeof value === 'string' ? value.toLowerCase() : value
 	}
 	return values as AppearanceValues
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index c41acab6d6..c5dbb8b847 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -731,6 +731,153 @@
   "app-marketing.show-other-packages": {
     "message": "Show other packages"
   },
+  "archive.external": {
+    "message": "External"
+  },
+  "archive.external-details.description": {
+    "message": "Opened from a link that isn't part of a project's versions."
+  },
+  "archive.external-details.external": {
+    "message": "External"
+  },
+  "archive.go-back": {
+    "message": "Go back"
+  },
+  "archive.link.archive": {
+    "message": "Archive"
+  },
+  "archive.link.open": {
+    "message": "Open in the archive viewer"
+  },
+  "archive.load-failed": {
+    "message": "Unable to load the project"
+  },
+  "archive.load-failed-description": {
+    "message": "The project or its versions could not be fetched."
+  },
+  "archive.loading-versions": {
+    "message": "Loading versions..."
+  },
+  "archive.nothing-to-show": {
+    "message": "No archive to show"
+  },
+  "archive.nothing-to-show-description": {
+    "message": "Open a project with version files, or a file link from the Modrinth CDN."
+  },
+  "archive.project-details.change-version": {
+    "message": "Change version"
+  },
+  "archive.project-details.channel.alpha": {
+    "message": "Alpha"
+  },
+  "archive.project-details.channel.beta": {
+    "message": "Beta"
+  },
+  "archive.project-details.channel.release": {
+    "message": "Release"
+  },
+  "archive.project-details.download": {
+    "message": "Download file"
+  },
+  "archive.project-details.file-type": {
+    "message": "File type"
+  },
+  "archive.project-details.more-game-versions": {
+    "message": "+{count} more"
+  },
+  "archive.project-details.open-project": {
+    "message": "Project page"
+  },
+  "archive.project-details.primary": {
+    "message": "Primary"
+  },
+  "archive.project-details.project": {
+    "message": "Project"
+  },
+  "archive.project-details.project-downloads": {
+    "message": "Project downloads"
+  },
+  "archive.project-details.project-id": {
+    "message": "Project ID"
+  },
+  "archive.project-details.project-published": {
+    "message": "Project published"
+  },
+  "archive.project-details.published-on": {
+    "message": "Published {date}"
+  },
+  "archive.project-details.tech-review": {
+    "message": "Tech review"
+  },
+  "archive.project-details.version": {
+    "message": "Version"
+  },
+  "archive.project-details.version-downloads": {
+    "message": "Version downloads"
+  },
+  "archive.project-details.version-id": {
+    "message": "Version ID"
+  },
+  "archive.project-details.version-published": {
+    "message": "Version published"
+  },
+  "archive.project-details.version-status.archived": {
+    "message": "Archived"
+  },
+  "archive.project-details.version-status.draft": {
+    "message": "Draft"
+  },
+  "archive.project-details.version-status.listed": {
+    "message": "Listed"
+  },
+  "archive.project-details.version-status.scheduled": {
+    "message": "Scheduled"
+  },
+  "archive.project-details.version-status.unknown": {
+    "message": "Unknown"
+  },
+  "archive.project-details.version-status.unlisted": {
+    "message": "Unlisted"
+  },
+  "archive.select-version": {
+    "message": "Select a version"
+  },
+  "archive.title": {
+    "message": "Archive viewer"
+  },
+  "archive.version-modal.current": {
+    "message": "Currently open"
+  },
+  "archive.version-modal.loading": {
+    "message": "Loading versions..."
+  },
+  "archive.version-modal.loading-changelog": {
+    "message": "Loading changelog..."
+  },
+  "archive.version-modal.more-game-versions": {
+    "message": "+{count} more"
+  },
+  "archive.version-modal.no-changelog": {
+    "message": "No changelog"
+  },
+  "archive.version-modal.no-versions": {
+    "message": "No versions found"
+  },
+  "archive.version-modal.open": {
+    "message": "Open {version}"
+  },
+  "archive.version-modal.primary": {
+    "message": "Primary"
+  },
+  "archive.version-modal.search-placeholder": {
+    "message": "Search versions..."
+  },
+  "archive.version-modal.select-prompt": {
+    "message": "Select a version to see its details"
+  },
+  "archive.version-modal.title": {
+    "message": "Select a version"
+  },
   "auth.authorize.action.authorize": {
     "message": "Authorize"
   },
@@ -3317,9 +3464,6 @@
   "moderation.settings.no-results": {
     "message": "No settings match your search."
   },
-  "moderation.settings.none": {
-    "message": "None"
-  },
   "moderation.settings.off": {
     "message": "Off"
   },
@@ -3356,6 +3500,9 @@
   "moderation.settings.workflow": {
     "message": "Review workflow and queue"
   },
+  "moderation.tech-review.file.archive": {
+    "message": "Archive"
+  },
   "moderation.tech-review.file.download": {
     "message": "Download"
   },
@@ -3371,14 +3518,11 @@
   "moderation.tech-review.file.no-flags": {
     "message": "No flags"
   },
-  "moderation.tech-review.file.open-slicer": {
-    "message": "Open in Slicer"
-  },
-  "moderation.tech-review.file.open-slicer-tab": {
-    "message": "Open in Slicer tab"
+  "moderation.tech-review.file.open-archive": {
+    "message": "Open in the archive viewer"
   },
-  "moderation.tech-review.file.slicer": {
-    "message": "Slicer"
+  "moderation.tech-review.file.open-archive-panel": {
+    "message": "Open in the review's archive panels"
   },
   "moderation.tech-review.file.view-version": {
     "message": "View version"
@@ -4109,6 +4253,9 @@
   "project.error.project-not-found": {
     "message": "Project not found"
   },
+  "project.files.title": {
+    "message": "Files"
+  },
   "project.gallery.title": {
     "message": "Gallery"
   },
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 5c358eb82d..f0267d3b26 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -813,6 +813,10 @@ const messages = defineMessages({
 		id: 'project.moderation.title',
 		defaultMessage: 'Moderation',
 	},
+	filesTab: {
+		id: 'project.files.title',
+		defaultMessage: 'Files',
+	},
 	noCollectionsFound: {
 		id: 'project.collections.none-found',
 		defaultMessage: 'No collections found.',
@@ -2490,6 +2494,12 @@ const navLinks = computed(() => {
 			href: withInstallContextQuery(`${projectUrl}/moderation`),
 			shown: !!currentMember.value,
 		},
+		{
+			label: formatMessage(messages.filesTab),
+			href: `/archive?project=${project.value.id}`,
+			shown: isStaff(auth.value.user) && hasVersions.value,
+			replace: false,
+		},
 	]
 })
 
diff --git a/apps/frontend/src/pages/[type]/[project]/files.vue b/apps/frontend/src/pages/[type]/[project]/files.vue
new file mode 100644
index 0000000000..49477f7fd5
--- /dev/null
+++ b/apps/frontend/src/pages/[type]/[project]/files.vue
@@ -0,0 +1,16 @@
+<template><div /></template>
+
+<script setup lang="ts">
+/** The archive viewer moved to its own full-screen page; links to the old tab still open it. */
+definePageMeta({
+	middleware: [
+		'auth',
+		'staff',
+		(to) =>
+			navigateTo(
+				{ path: '/archive', query: { ...to.query, project: String(to.params.project) } },
+				{ replace: true },
+			),
+	],
+})
+</script>
diff --git a/apps/frontend/src/pages/[type]/[project]/version/[version].vue b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
index dbe3d76ae4..b199c3806e 100644
--- a/apps/frontend/src/pages/[type]/[project]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
@@ -147,14 +147,14 @@
 							v-if="
 								!!primaryFile?.url &&
 								isStaff(auth.user) &&
-								modSettings.get(moderationSettings.General.SlicerButtonInVersions)
+								modSettings.get(moderationSettings.General.ArchiveButtonInVersions)
 							"
-							v-tooltip="`Open in Slicer`"
+							v-tooltip="formatMessage(archiveMessages.openArchive)"
 							target="_blank"
-							:href="`https://slicer.run/?url=${encodeURIComponent(primaryFile?.url)}`"
+							:href="archiveViewerUrl({ project: project.id, version: version!.id })"
 						>
 							<ExternalIcon aria-hidden="true" />
-							Slicer
+							{{ formatMessage(archiveMessages.archive) }}
 						</ButtonLink>
 						<ButtonLink
 							v-for="file in promotedFiles.filter(
@@ -539,11 +539,13 @@ import { isStaff } from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { onServerPrefetch } from 'vue'
 
+import { archiveLinkMessages as archiveMessages } from '~/components/ui/archive-viewer/messages'
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import ProjectDownloadModal from '~/components/ui/ProjectDownloadModal/index.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
 import { projectQueryOptions, STALE_TIME } from '~/composables/queries/project'
 import { versionQueryOptions } from '~/composables/queries/version'
+import { archiveViewerUrl } from '~/helpers/archive-viewer'
 import { createDataPackVersion } from '~/helpers/package.js'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
diff --git a/apps/frontend/src/pages/[type]/[project]/versions.vue b/apps/frontend/src/pages/[type]/[project]/versions.vue
index bf7c5237cb..fec1f05795 100644
--- a/apps/frontend/src/pages/[type]/[project]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[project]/versions.vue
@@ -59,12 +59,12 @@
 						v-if="
 							!!getPrimaryFile(version) &&
 							isStaff(auth.user) &&
-							modSettings.get(moderationSettings.General.SlicerButtonInVersions)
+							modSettings.get(moderationSettings.General.ArchiveButtonInVersions)
 						"
-						v-tooltip="`Open in Slicer`"
+						v-tooltip="formatMessage(archiveMessages.openArchive)"
 						type="quiet"
 						target="_blank"
-						:href="`https://slicer.run/?url=${encodeURIComponent(createDownloadUrl(version))}`"
+						:href="archiveViewerUrl({ project: project.id, version: version.id })"
 						class="!w-9 !rounded-full !px-0 hover:!bg-button-bg"
 					>
 						<ExternalIcon aria-hidden="true" />
@@ -306,13 +306,16 @@ import {
 	injectProjectPageContext,
 	ProjectPageVersions,
 	TeleportOverflowMenu,
+	useVIntl,
 } from '@modrinth/ui'
 import { isStaff } from '@modrinth/utils'
 import { onMounted, useTemplateRef, watch } from 'vue'
 
+import { archiveLinkMessages as archiveMessages } from '~/components/ui/archive-viewer/messages'
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import ProjectC2paScanModal from '~/components/ui/moderation/ProjectC2paScanModal.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
+import { archiveViewerUrl } from '~/helpers/archive-viewer'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
 const route = useRoute()
@@ -323,6 +326,7 @@ const tags = useGeneratedState()
 const flags = useFeatureFlags()
 const modSettings = useModerationSettings()
 const auth = await useAuth()
+const { formatMessage } = useVIntl()
 
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/pages/archive.vue b/apps/frontend/src/pages/archive.vue
new file mode 100644
index 0000000000..68c52652f4
--- /dev/null
+++ b/apps/frontend/src/pages/archive.vue
@@ -0,0 +1,263 @@
+<template>
+	<div class="h-dvh w-full bg-surface-1">
+		<ClientOnly>
+			<ArchiveViewerLayout
+				:source="source"
+				:path="archivePath"
+				:storage-key="embedded ? null : 'archive-viewer'"
+				:hidden-regions="hiddenRegions"
+				popout-url="/project-review-popout.html"
+				@update:path="setArchivePath"
+			>
+				<template #toolbar>
+					<Button v-if="!embedded" type="quiet" size="xs" @click="goBack">
+						<LeftArrowIcon aria-hidden="true" />
+						{{ formatMessage(messages.goBack) }}
+					</Button>
+					<div v-if="project" class="flex min-w-0 items-center gap-2">
+						<Avatar :src="project.icon_url" :alt="project.name" size="20px" no-shadow />
+						<span class="truncate text-sm font-semibold text-contrast">{{ project.name }}</span>
+						<span v-if="selectedVersion" class="truncate text-sm text-secondary">
+							{{ selectedVersion.version_number }}
+						</span>
+					</div>
+					<template v-else-if="source">
+						<TagItem class="shrink-0">{{ formatMessage(messages.external) }}</TagItem>
+						<span class="truncate text-sm font-semibold text-contrast">{{ source.name }}</span>
+						<ButtonLink type="quiet" size="xs" :href="source.url" :download="source.name">
+							<DownloadIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.downloadButton) }}
+						</ButtonLink>
+					</template>
+				</template>
+				<template v-if="project || source" #project-details>
+					<ArchiveProjectDetails
+						v-if="project"
+						:project="project"
+						:versions="sortedVersions"
+						:versions-loading="versionsLoading"
+						:version="selectedVersion"
+						:file="selectedFile"
+						@select-version="selectVersion"
+						@select-file="selectFile"
+					/>
+					<ArchiveExternalDetails v-else-if="source" :source="source" />
+				</template>
+				<template #empty>
+					<Admonition
+						v-if="isError"
+						type="critical"
+						:header="formatMessage(messages.loadFailed)"
+						:body="formatMessage(messages.loadFailedDescription)"
+					/>
+					<Admonition
+						v-else-if="!isLoading && !source"
+						type="info"
+						:header="formatMessage(messages.nothingToShow)"
+						:body="formatMessage(messages.nothingToShowDescription)"
+					/>
+				</template>
+			</ArchiveViewerLayout>
+		</ClientOnly>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { DownloadIcon, LeftArrowIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	type ArchiveSource,
+	ArchiveViewerLayout,
+	Avatar,
+	Button,
+	ButtonLink,
+	commonMessages,
+	defineMessages,
+	injectModrinthClient,
+	TagItem,
+	useVIntl,
+	WORKBENCH_REGIONS,
+	type WorkbenchRegion,
+} from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
+import ArchiveExternalDetails from '~/components/ui/archive-viewer/ArchiveExternalDetails.vue'
+import ArchiveProjectDetails from '~/components/ui/archive-viewer/ArchiveProjectDetails.vue'
+import {
+	archiveNameFrom,
+	archivePathFrom,
+	archiveSourceFrom,
+	isModrinthCdnUrl,
+	primaryFile,
+} from '~/helpers/archive-viewer'
+
+definePageMeta({
+	layout: 'empty',
+	middleware: ['auth', 'staff'],
+})
+
+const { formatMessage } = useVIntl()
+const client = injectModrinthClient()
+const route = useRoute()
+const router = useRouter()
+
+const messages = defineMessages({
+	title: {
+		id: 'archive.title',
+		defaultMessage: 'Archive viewer',
+	},
+	goBack: {
+		id: 'archive.go-back',
+		defaultMessage: 'Go back',
+	},
+	external: {
+		id: 'archive.external',
+		defaultMessage: 'External',
+	},
+	loadFailed: {
+		id: 'archive.load-failed',
+		defaultMessage: 'Unable to load the project',
+	},
+	loadFailedDescription: {
+		id: 'archive.load-failed-description',
+		defaultMessage: 'The project or its versions could not be fetched.',
+	},
+	nothingToShow: {
+		id: 'archive.nothing-to-show',
+		defaultMessage: 'No archive to show',
+	},
+	nothingToShowDescription: {
+		id: 'archive.nothing-to-show-description',
+		defaultMessage: 'Open a project with version files, or a file link from the Modrinth CDN.',
+	},
+})
+
+function queryString(value: unknown) {
+	const first = Array.isArray(value) ? value[0] : value
+	return typeof first === 'string' && first.length > 0 ? first : null
+}
+
+const projectId = computed(() => queryString(route.query.project))
+
+/** A one-off view (e.g. embedded elsewhere) that leaves the user's own panel layout untouched. */
+const embedded = computed(() => queryString(route.query.embed) != null)
+
+/** Regions to start hidden, e.g. `?hide=left,bottom`. */
+const hiddenRegions = computed<WorkbenchRegion[]>(() =>
+	(queryString(route.query.hide)?.split(',') ?? []).filter((region): region is WorkbenchRegion =>
+		(WORKBENCH_REGIONS as readonly string[]).includes(region),
+	),
+)
+
+const projectQuery = useQuery({
+	queryKey: computed(() => ['project', 'v3', projectId.value]),
+	queryFn: () => client.labrinth.projects_v3.get(projectId.value!),
+	enabled: computed(() => !!projectId.value),
+})
+
+const versionsQuery = useQuery({
+	queryKey: computed(() => ['project', projectId.value, 'versions', 'v3']),
+	queryFn: () =>
+		client.labrinth.versions_v3.getProjectVersions(projectId.value!, {
+			include_changelog: false,
+			apiVersion: 3,
+		}),
+	enabled: computed(() => !!projectId.value),
+})
+
+const project = computed(() => projectQuery.data.value ?? null)
+const versionsLoading = computed(() => versionsQuery.isFetching.value)
+const isLoading = computed(
+	() => !!projectId.value && (projectQuery.isPending.value || versionsQuery.isPending.value),
+)
+const isError = computed(() => projectQuery.isError.value || versionsQuery.isError.value)
+
+const sortedVersions = computed(() =>
+	[...(versionsQuery.data.value ?? [])].sort(
+		(a, b) => new Date(b.date_published).getTime() - new Date(a.date_published).getTime(),
+	),
+)
+
+const requestedUrl = computed(() => {
+	const url = queryString(route.query.url)
+	return url && isModrinthCdnUrl(url) ? url : null
+})
+
+/**
+ * The version from the query, else the one holding the requested file, else the latest. Only
+ * staff reach this page, so every version (including drafts and unlisted ones) is available.
+ */
+const selectedVersion = computed(() => {
+	const id = queryString(route.query.version)
+	const url = requestedUrl.value
+	return (
+		(id ? sortedVersions.value.find((version) => version.id === id) : undefined) ??
+		(url
+			? sortedVersions.value.find((version) => version.files.some((file) => file.url === url))
+			: undefined) ??
+		(url ? undefined : sortedVersions.value[0]) ??
+		null
+	)
+})
+
+const selectedFile = computed(() => {
+	const version = selectedVersion.value
+	if (!version) return null
+	const url = requestedUrl.value
+	return (
+		(url ? version.files.find((file) => file.url === url) : undefined) ??
+		primaryFile(version) ??
+		null
+	)
+})
+
+/** The selected version's file, or a requested CDN link no version of the project holds. */
+const source = computed<ArchiveSource | null>(() => {
+	if (selectedFile.value) return archiveSourceFrom(selectedFile.value)
+	const url = requestedUrl.value
+	return url ? { url, name: archiveNameFrom(url) } : null
+})
+
+useHead({
+	title: () => {
+		const name = project.value?.name ?? source.value?.name
+		return name ? `${formatMessage(messages.title)} - ${name}` : formatMessage(messages.title)
+	},
+})
+
+/**
+ * The entry open within the archive. Slicer links prefix it with the archive's name, which is
+ * dropped so they can be opened here as is.
+ */
+const archivePath = computed(() => {
+	const name = source.value?.name
+	return name ? archivePathFrom(queryString(route.query.file), name) : queryString(route.query.file)
+})
+
+function replaceQuery(query: Record<string, string | undefined>) {
+	router.replace({ query: { ...route.query, ...query } })
+}
+
+/** Back to where the viewer was opened from, or to the project when opened directly. */
+function goBack() {
+	if (window.history.state?.back) {
+		router.back()
+		return
+	}
+	navigateTo(project.value ? `/project/${project.value.slug ?? project.value.id}` : '/')
+}
+
+function selectVersion(id: string | undefined) {
+	replaceQuery({ version: id, url: undefined, file: undefined })
+}
+
+function selectFile(url: string | undefined) {
+	replaceQuery({ version: selectedVersion.value?.id, url, file: undefined })
+}
+
+function setArchivePath(path: string) {
+	if (path === (archivePath.value ?? '')) return
+	replaceQuery({ file: path || undefined })
+}
+</script>
diff --git a/apps/frontend/src/pages/moderation/technical-review/rules.vue b/apps/frontend/src/pages/moderation/technical-review/rules.vue
index 7bca53a3ca..c4ec55de63 100644
--- a/apps/frontend/src/pages/moderation/technical-review/rules.vue
+++ b/apps/frontend/src/pages/moderation/technical-review/rules.vue
@@ -56,23 +56,17 @@
 			<div
 				class="relative overflow-hidden rounded-[20px] border border-solid border-surface-4 shadow-sm"
 			>
-				<component
-					:is="editorComponent"
-					v-if="editorComponent"
+				<CodeEditor
 					id="rule-expression"
-					:value="form.rule"
-					lang="javascript"
-					theme="modrinth"
-					:print-margin="false"
-					:options="RULE_EDITOR_OPTIONS"
-					:style="{ height: '16rem', fontSize: '0.875rem' }"
-					class="ace-modrinth rounded-[20px]"
-					@init="onRuleEditorInit"
-					@update:value="handleRuleInput"
+					:model-value="form.rule"
+					language="javascript"
+					line-wrapping
+					indent="  "
+					:tab-size="2"
+					:extensions="RULE_EDITOR_EXTENSIONS"
+					class="h-64 rounded-[20px] text-sm"
+					@update:model-value="handleRuleInput"
 				/>
-				<div v-else class="flex h-64 items-center justify-center bg-bg-raised">
-					<LoaderCircleIcon class="size-8 animate-spin text-secondary" />
-				</div>
 			</div>
 			<div
 				v-if="ruleTestError"
@@ -574,6 +568,13 @@ IS_MATCH ? "low" : null</code></pre>
 </template>
 
 <script setup lang="ts">
+import {
+	autocompletion,
+	type Completion,
+	type CompletionContext,
+	type CompletionResult,
+	snippetCompletion,
+} from '@codemirror/autocomplete'
 import { type Labrinth, ModrinthServerError, SseParser } from '@modrinth/api-client'
 import {
 	ArrowLeftIcon,
@@ -591,6 +592,7 @@ import {
 	Avatar,
 	Button,
 	ButtonLink,
+	CodeEditor,
 	ConfirmModal,
 	EmptyState,
 	injectModrinthClient,
@@ -608,8 +610,6 @@ import {
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { useDebounceFn } from '@vueuse/core'
-import type { Ace } from 'ace-builds'
-import type { Component } from 'vue'
 
 import IssueDetailPath from '~/components/ui/moderation/IssueDetailPath.vue'
 
@@ -619,86 +619,65 @@ trace.issue_type == ISSUE_TYPE
 	? "low"
 	: null`
 
-const CEL_LANGUAGE_COMPLETIONS: Ace.Completion[] = [
-	...['true', 'false', 'null', 'in'].map((value) => ({
-		value,
-		score: 900,
-		meta: 'keyword',
-	})),
-	{ caption: 'has()', snippet: 'has(${1:field})', score: 850, meta: 'macro' },
-	{ caption: 'size()', snippet: 'size(${1:value})', score: 850, meta: 'function' },
-	{ caption: 'string()', snippet: 'string(${1:value})', score: 850, meta: 'function' },
-	{ caption: 'int()', snippet: 'int(${1:value})', score: 850, meta: 'function' },
-	{ caption: 'or_null()', snippet: 'or_null(${1:field})', score: 850, meta: 'function' },
-	{ caption: 'url.parse()', snippet: 'url.parse("${1:url}")', score: 850, meta: 'URL' },
-	{ caption: 'url.is_valid()', snippet: 'url.is_valid("${1:url}")', score: 850, meta: 'URL' },
-	{ caption: '#define', snippet: '#define ${1:NAME} ${2:value}', score: 800, meta: 'preprocessor' },
-	{
-		caption: '#bind',
-		snippet: '#bind ${1:NAME} ${2:expression}',
-		score: 800,
-		meta: 'preprocessor',
-	},
+const CEL_LANGUAGE_COMPLETIONS: Completion[] = [
+	...['true', 'false', 'null', 'in'].map((label) => ({ label, type: 'keyword', boost: 10 })),
+	snippetCompletion('has(${1:field})', { label: 'has()', detail: 'macro', boost: 5 }),
+	snippetCompletion('size(${1:value})', { label: 'size()', detail: 'function', boost: 5 }),
+	snippetCompletion('string(${1:value})', { label: 'string()', detail: 'function', boost: 5 }),
+	snippetCompletion('int(${1:value})', { label: 'int()', detail: 'function', boost: 5 }),
+	snippetCompletion('or_null(${1:field})', { label: 'or_null()', detail: 'function', boost: 5 }),
+	snippetCompletion('url.parse("${1:url}")', { label: 'url.parse()', detail: 'URL', boost: 5 }),
+	snippetCompletion('url.is_valid("${1:url}")', {
+		label: 'url.is_valid()',
+		detail: 'URL',
+		boost: 5,
+	}),
+	snippetCompletion('#define ${1:NAME} ${2:value}', { label: '#define', detail: 'preprocessor' }),
+	snippetCompletion('#bind ${1:NAME} ${2:expression}', { label: '#bind', detail: 'preprocessor' }),
 ]
-const CEL_MEMBER_COMPLETIONS: Ace.Completion[] = [
-	{ caption: 'contains()', snippet: 'contains("${1:value}")', score: 800, meta: 'string' },
-	{ caption: 'startsWith()', snippet: 'startsWith("${1:prefix}")', score: 800, meta: 'string' },
-	{ caption: 'endsWith()', snippet: 'endsWith("${1:suffix}")', score: 800, meta: 'string' },
-	{ caption: 'matches()', snippet: 'matches("${1:pattern}")', score: 800, meta: 'regex' },
-	{ caption: 'all()', snippet: 'all(${1:item}, ${2:predicate})', score: 750, meta: 'list macro' },
-	{
-		caption: 'exists()',
-		snippet: 'exists(${1:item}, ${2:predicate})',
-		score: 750,
-		meta: 'list macro',
-	},
-	{
-		caption: 'exists_one()',
-		snippet: 'exists_one(${1:item}, ${2:predicate})',
-		score: 750,
-		meta: 'list macro',
-	},
-	{
-		caption: 'filter()',
-		snippet: 'filter(${1:item}, ${2:predicate})',
-		score: 750,
-		meta: 'list macro',
-	},
-	{ caption: 'map()', snippet: 'map(${1:item}, ${2:expression})', score: 750, meta: 'list macro' },
+const CEL_MEMBER_COMPLETIONS: Completion[] = [
+	snippetCompletion('contains("${1:value}")', { label: 'contains()', detail: 'string' }),
+	snippetCompletion('startsWith("${1:prefix}")', { label: 'startsWith()', detail: 'string' }),
+	snippetCompletion('endsWith("${1:suffix}")', { label: 'endsWith()', detail: 'string' }),
+	snippetCompletion('matches("${1:pattern}")', { label: 'matches()', detail: 'regex' }),
+	...[
+		['all', 'predicate'],
+		['exists', 'predicate'],
+		['exists_one', 'predicate'],
+		['filter', 'predicate'],
+		['map', 'expression'],
+	].map(([name, argument]) =>
+		snippetCompletion(`${name}(\${1:item}, \${2:${argument}})`, {
+			label: `${name}()`,
+			detail: 'list macro',
+			boost: -5,
+		}),
+	),
 ]
-const CEL_COMPLETER: Ace.Completer = {
-	id: 'delphi-cel',
-	triggerCharacters: ['.'],
-	getCompletions(_editor, session, position, prefix, callback) {
-		const beforePrefix = session
-			.getLine(position.row)
-			.slice(0, Math.max(0, position.column - prefix.length))
-		const receiver = beforePrefix.match(/([A-Za-z_][\w.]*)\.$/)?.[1]
-		if (!receiver) {
-			callback(null, [...getCelSchemaCompletions(), ...CEL_LANGUAGE_COMPLETIONS])
-			return
-		}
 
+/** Completes fields of the rule's input (by the schema), functions, macros and keywords. */
+function celCompletions(context: CompletionContext): CompletionResult | null {
+	const word = context.matchBefore(/#?\w*/)
+	if (!word) return null
+	const line = context.state.doc.lineAt(context.pos)
+	const beforeWord = line.text.slice(0, word.from - line.from)
+	const receiver = beforeWord.match(/([A-Za-z_][\w.]*)\.$/)?.[1]
+	if (word.from === word.to && !receiver && !context.explicit) return null
+
+	let options: Completion[]
+	if (!receiver) {
+		options = [...getCelSchemaCompletions(), ...CEL_LANGUAGE_COMPLETIONS]
+	} else {
 		const schemaCompletions = getCelSchemaCompletions(receiver)
-		if (schemaCompletions.length > 0) {
-			callback(null, schemaCompletions)
-			return
-		}
-
-		callback(null, CEL_MEMBER_COMPLETIONS)
-	},
-}
-const RULE_EDITOR_OPTIONS: Partial<Ace.EditorOptions> = {
-	useWorker: false,
-	tabSize: 2,
-	useSoftTabs: true,
-	enableBasicAutocompletion: [CEL_COMPLETER],
-	enableLiveAutocompletion: [CEL_COMPLETER],
-	liveAutocompletionDelay: 150,
-	liveAutocompletionThreshold: 1,
-	enableSnippets: true,
+		options = schemaCompletions.length > 0 ? schemaCompletions : CEL_MEMBER_COMPLETIONS
+	}
+	return { from: word.from, options, validFor: /^#?\w*$/ }
 }
 
+const RULE_EDITOR_EXTENSIONS = [
+	autocompletion({ override: [celCompletions], activateOnTypingDelay: 150 }),
+]
+
 type RuleTestError = {
 	summary: string
 	details: string[]
@@ -779,8 +758,6 @@ const { addNotification } = injectNotificationManager()
 const ruleModal = useTemplateRef<InstanceType<typeof NewModal>>('ruleModal')
 const deleteModal = useTemplateRef<InstanceType<typeof ConfirmModal>>('deleteModal')
 const scanModal = useTemplateRef<InstanceType<typeof ConfirmModal>>('scanModal')
-const editorComponent = shallowRef<Component | null>(null)
-const ruleEditorInstance = shallowRef<Ace.Editor | null>(null)
 
 const rules = ref<Labrinth.TechReview.Internal.DelphiRule[]>([])
 const isLoading = ref(true)
@@ -826,15 +803,6 @@ const testTraceForm = reactive(createTestTraceForm())
 let ruleTestRequestId = 0
 let scanAbortController: AbortController | null = null
 
-onMounted(async () => {
-	const [{ VAceEditor }] = await Promise.all([
-		import('vue3-ace-editor'),
-		import('@modrinth/ui/src/utils/ace-theme'),
-	])
-	await import('ace-builds/src-noconflict/ext-language_tools')
-	editorComponent.value = VAceEditor
-})
-
 const modalTitle = computed(() => (editingRuleId.value === null ? 'Create rule' : 'Edit rule'))
 const scanEstimatedTimeRemaining = computed(() => {
 	const seconds = scanEstimatedSecondsRemaining.value
@@ -1042,7 +1010,7 @@ function getRuleSchemaLabel(
 	return types.join(' | ') || 'context'
 }
 
-function getCelSchemaCompletions(receiver?: string): Ace.Completion[] {
+function getCelSchemaCompletions(receiver?: string): Completion[] {
 	const response = ruleSchema.value
 	if (!response) return []
 
@@ -1063,10 +1031,11 @@ function getCelSchemaCompletions(receiver?: string): Ace.Completion[] {
 		.filter((entry): entry is [string, Labrinth.TechReview.Internal.DelphiRuleSchema] =>
 			isSchema(entry[1]),
 		)
-		.map(([value, property]) => ({
-			value,
-			score: 1_000,
-			meta: getRuleSchemaLabel(property, response.components),
+		.map(([label, property]) => ({
+			label,
+			type: 'property',
+			detail: getRuleSchemaLabel(property, response.components),
+			boost: 20,
 		}))
 }
 
@@ -1152,11 +1121,6 @@ function formatRuleSchema(
 	return nullable && formatted !== 'null' ? `${formatted} | null` : formatted
 }
 
-function onRuleEditorInit(editor: Ace.Editor) {
-	ruleEditorInstance.value = editor
-	editor.session.setUseWrapMode(true)
-}
-
 function handleRuleInput(rule: string) {
 	form.rule = rule
 	queueRuleTest()
@@ -1428,7 +1392,6 @@ function openCreateModal() {
 	rawTestTraceInput.value = ''
 	isRuleModalOpen.value = true
 	ruleModal.value?.show()
-	nextTick(() => ruleEditorInstance.value?.resize(true))
 	void loadRuleSchema()
 	void testRule()
 }
@@ -1445,7 +1408,6 @@ function openEditModal(rule: Labrinth.TechReview.Internal.DelphiRule) {
 	rawTestTraceInput.value = ''
 	isRuleModalOpen.value = true
 	ruleModal.value?.show()
-	nextTick(() => ruleEditorInstance.value?.resize(true))
 	void loadRuleSchema()
 	void testRule()
 }
@@ -1456,7 +1418,6 @@ function closeRuleModal() {
 
 function handleRuleModalHide() {
 	isRuleModalOpen.value = false
-	ruleEditorInstance.value = null
 	ruleTestRequestId += 1
 	isTestingRule.value = false
 }
diff --git a/apps/frontend/src/plugins/code-highlight-theme.ts b/apps/frontend/src/plugins/code-highlight-theme.ts
new file mode 100644
index 0000000000..f9edd5c098
--- /dev/null
+++ b/apps/frontend/src/plugins/code-highlight-theme.ts
@@ -0,0 +1,49 @@
+import {
+	CODE_HIGHLIGHT_THEME_STORAGE,
+	DEFAULT_CODE_THEME,
+	loadCodeHighlightThemeCss,
+	SERVER_CODE_THEME_STYLE_ID,
+	useCodeHighlightTheme,
+} from '@modrinth/ui'
+import { useLocalStorage } from '@vueuse/core'
+
+import { getSettingsCookieOptions } from '~/composables/cookie-settings'
+
+/**
+ * The user's code highlighting theme. The browser keeps it in local storage, which keeps every tab
+ * in step, and copies it into a cookie so server rendered pages already carry it (marking the page
+ * and including the theme's stylesheet). The cookie is only ever written by the browser, never read
+ * back, so its change events can't feed back into the theme.
+ */
+export default defineNuxtPlugin({
+	name: 'code-highlight-theme',
+	async setup(nuxtApp) {
+		const cookie = useCookie<string>('code-highlight-theme', {
+			...getSettingsCookieOptions<string>(),
+			default: () => DEFAULT_CODE_THEME,
+		})
+
+		if (import.meta.server) {
+			nuxtApp.vueApp.provide(CODE_HIGHLIGHT_THEME_STORAGE, cookie)
+			const css = await loadCodeHighlightThemeCss(cookie.value)
+			if (css) {
+				useHead({
+					htmlAttrs: { 'data-code-theme': cookie.value },
+					style: [{ id: SERVER_CODE_THEME_STYLE_ID, innerHTML: css }],
+				})
+			}
+			return
+		}
+
+		const theme = useLocalStorage('code-highlight-theme', cookie.value)
+		watch(
+			theme,
+			(id) => {
+				if (cookie.value !== id) cookie.value = id
+			},
+			{ immediate: true },
+		)
+		nuxtApp.vueApp.provide(CODE_HIGHLIGHT_THEME_STORAGE, theme)
+		nuxtApp.vueApp.runWithContext(() => useCodeHighlightTheme().start())
+	},
+})
diff --git a/apps/frontend/src/providers/project-review/review-archive.ts b/apps/frontend/src/providers/project-review/review-archive.ts
new file mode 100644
index 0000000000..2edf7d41e5
--- /dev/null
+++ b/apps/frontend/src/providers/project-review/review-archive.ts
@@ -0,0 +1,100 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { type ArchiveSource, createContext } from '@modrinth/ui'
+import { computed, type Ref, ref, watch } from 'vue'
+
+import {
+	archiveNameFrom,
+	archivePathFrom,
+	archiveSourceFrom,
+	primaryFile,
+} from '~/helpers/archive-viewer'
+
+export const [injectReviewArchive, provideReviewArchive] =
+	createContext<ReturnType<typeof createReviewArchive>>('ProjectReviewArchive')
+
+/**
+ * The archive the review shows in its archive panels. Until a reviewer opens another file (from
+ * the versions, the details' version picker, or technical review), it's the latest version's
+ * primary file.
+ */
+export function createReviewArchive(
+	projectId: Readonly<Ref<string | undefined>>,
+	versions: Readonly<Ref<Labrinth.Versions.v3.Version[]>>,
+) {
+	const selectedVersionId = ref<string>()
+	const selectedUrl = ref<string>()
+	/** The entry to open within the archive, as the archive viewer's path. */
+	const path = ref<string | null>(null)
+	/** Bumped whenever a file is opened, so the review can bring its archive panels forward. */
+	const openRequests = ref(0)
+
+	watch(projectId, () => {
+		selectedVersionId.value = undefined
+		selectedUrl.value = undefined
+		path.value = null
+	})
+
+	const version = computed(
+		() =>
+			(selectedVersionId.value
+				? versions.value.find(({ id }) => id === selectedVersionId.value)
+				: undefined) ??
+			(selectedUrl.value
+				? versions.value.find(({ files }) => files.some(({ url }) => url === selectedUrl.value))
+				: undefined) ??
+			(selectedUrl.value ? undefined : versions.value[0]),
+	)
+
+	const file = computed(() => {
+		const current = version.value
+		if (!current) return undefined
+		return (
+			(selectedUrl.value
+				? current.files.find(({ url }) => url === selectedUrl.value)
+				: undefined) ?? primaryFile(current)
+		)
+	})
+
+	/** The selected file, or a URL opened that none of the project's versions hold. */
+	const source = computed<ArchiveSource | null>(() => {
+		if (file.value) return archiveSourceFrom(file.value)
+		const url = selectedUrl.value
+		return url ? { url, name: archiveNameFrom(url) } : null
+	})
+
+	/**
+	 * Opens a file in the archive panels, at an entry within it when given (a path within the
+	 * archive, or a Slicer entry starting with the archive's name).
+	 */
+	function open(url: string, entry?: string) {
+		selectedVersionId.value = undefined
+		selectedUrl.value = url
+		path.value = archivePathFrom(entry, archiveNameFrom(url))
+		openRequests.value++
+	}
+
+	function selectVersion(id: string | undefined) {
+		selectedVersionId.value = id
+		selectedUrl.value = undefined
+		path.value = null
+	}
+
+	function selectFile(url: string | undefined) {
+		selectedVersionId.value = version.value?.id
+		selectedUrl.value = url
+		path.value = null
+	}
+
+	return {
+		version,
+		file,
+		source,
+		path,
+		open,
+		openRequests,
+		selectVersion,
+		selectFile,
+		/** Follows the entry open in the archive panels, e.g. for links to it. */
+		setPath: (value: string) => (path.value = value || null),
+	}
+}
diff --git a/apps/frontend/src/providers/project-review/review-slicer.ts b/apps/frontend/src/providers/project-review/review-slicer.ts
deleted file mode 100644
index 3ba17a195f..0000000000
--- a/apps/frontend/src/providers/project-review/review-slicer.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { Labrinth } from '@modrinth/api-client'
-import { createContext } from '@modrinth/ui'
-import { computed, type Ref, ref, shallowRef, watch } from 'vue'
-
-interface SlicerFile {
-	url: string
-	name: string
-}
-
-export interface SlicerTarget {
-	key: string
-	files: SlicerFile[]
-	/** Workspace entry to open once the files are loaded, e.g. `mod.jar/com/example/Mod.class`. */
-	entry?: string
-}
-
-export const [injectReviewSlicer, provideReviewSlicer] =
-	createContext<ReturnType<typeof createReviewSlicer>>('ProjectReviewSlicer')
-
-/** Names a file the same way slicer does when loading it from its `url` parameter. */
-export function slicerFileName(url: string) {
-	const name = new URL(url).pathname.split('/').pop()
-	return name?.includes('.') ? name : 'input.jar'
-}
-
-function createTarget(urls: string[], entry?: string): SlicerTarget {
-	return {
-		key: JSON.stringify([urls, entry ?? null]),
-		files: urls.map((url) => ({ url, name: slicerFileName(url) })),
-		entry,
-	}
-}
-
-/**
- * Tracks the files the slicer tab should display for the current project. Until a reviewer opens
- * files explicitly, the latest version's primary file is used.
- */
-export function createReviewSlicer(
-	projectId: Readonly<Ref<string | undefined>>,
-	versions: Readonly<Ref<Labrinth.Versions.v3.Version[]>>,
-) {
-	const selected = shallowRef<SlicerTarget>()
-	const openRequests = ref(0)
-	const loadingFiles = ref(false)
-
-	watch(projectId, () => {
-		selected.value = undefined
-		loadingFiles.value = false
-	})
-
-	const target = computed<SlicerTarget | undefined>(() => {
-		if (selected.value) return selected.value
-		const latest = versions.value[0]
-		const file = latest?.files.find(({ primary }) => primary) ?? latest?.files[0]
-		return file ? createTarget([file.url]) : undefined
-	})
-
-	/**
-	 * Loads the given file URLs into the slicer tab and brings it to the front. Reopening the same
-	 * files with a different entry only opens that entry, without reloading the workspace.
-	 */
-	function open(urls: string[], entry?: string) {
-		if (!urls.length) return
-		const next = createTarget(urls, entry)
-		if (next.key !== target.value?.key) loadingFiles.value = true
-		selected.value = next
-		openRequests.value++
-	}
-
-	return { target, open, openRequests, loadingFiles }
-}
diff --git a/apps/frontend/src/public/project-review-popout.html b/apps/frontend/src/public/project-review-popout.html
index c71e0076af..a43480cce5 100644
--- a/apps/frontend/src/public/project-review-popout.html
+++ b/apps/frontend/src/public/project-review-popout.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<style>
+		<style data-workbench-own>
 			html {
 				background-color: var(--color-bg, #16181c);
 			}
diff --git a/packages/assets/styles/ace.css b/packages/assets/styles/ace.css
deleted file mode 100644
index 58c0f10a85..0000000000
--- a/packages/assets/styles/ace.css
+++ /dev/null
@@ -1,211 +0,0 @@
-.ace-modrinth .ace_gutter {
-	background: var(--surface-2);
-	color: var(--color-text-tertiary);
-}
-
-.ace-modrinth .ace_print-margin {
-	width: 1px;
-	background: var(--surface-5);
-}
-
-.ace-modrinth {
-	background-color: var(--surface-3);
-	color: var(--color-text-default);
-}
-
-.ace-modrinth .ace_cursor {
-	color: var(--color-brand);
-}
-
-.ace-modrinth .ace_marker-layer .ace_selection {
-	background: var(--color-brand-highlight);
-}
-
-.ace-modrinth.ace_multiselect .ace_selection.ace_start {
-	box-shadow: 0 0 3px 0 var(--surface-3);
-}
-
-.ace-modrinth .ace_marker-layer .ace_step {
-	background: var(--color-orange-highlight);
-}
-
-.ace-modrinth .ace_marker-layer .ace_bracket {
-	margin: -1px 0 0 -1px;
-	border: 1px solid var(--color-brand);
-}
-
-.ace-modrinth .ace_marker-layer .ace_active-line {
-	background: var(--surface-4);
-}
-
-.ace-modrinth .ace_gutter-active-line {
-	background-color: var(--surface-1);
-}
-
-.ace-modrinth .ace_marker-layer .ace_selected-word {
-	border: 1px solid var(--color-brand-highlight);
-}
-
-.ace-modrinth .ace_invisible {
-	color: var(--color-text-tertiary);
-	opacity: 0.5;
-}
-
-.ace-modrinth .ace_fold {
-	background-color: var(--color-blue);
-	border-color: var(--color-text-default);
-}
-
-/* Comments */
-.ace-modrinth .ace_comment {
-	color: var(--color-gray);
-	font-style: italic;
-}
-
-/* Strings */
-.ace-modrinth .ace_string {
-	color: var(--color-green);
-}
-
-.ace-modrinth .ace_string.ace_regexp {
-	color: var(--color-orange);
-}
-
-/* Constants */
-.ace-modrinth .ace_constant.ace_numeric {
-	color: var(--color-purple);
-}
-
-.ace-modrinth .ace_constant.ace_language {
-	color: var(--color-orange);
-}
-
-.ace-modrinth .ace_constant.ace_character {
-	color: var(--color-orange);
-}
-
-.ace-modrinth .ace_constant.ace_other {
-	color: var(--color-purple);
-}
-
-/* Keywords */
-.ace-modrinth .ace_keyword {
-	color: var(--color-red);
-}
-
-.ace-modrinth .ace_keyword.ace_operator {
-	color: var(--color-text-default);
-}
-
-/* Storage */
-.ace-modrinth .ace_storage {
-	color: var(--color-red);
-}
-
-.ace-modrinth .ace_storage.ace_type {
-	color: var(--color-blue);
-}
-
-/* Entity names */
-.ace-modrinth .ace_entity.ace_name.ace_function {
-	color: var(--color-blue);
-}
-
-.ace-modrinth .ace_entity.ace_name.ace_class {
-	color: var(--color-purple);
-}
-
-.ace-modrinth .ace_entity.ace_name.ace_tag {
-	color: var(--color-red);
-}
-
-.ace-modrinth .ace_entity.ace_other.ace_attribute-name {
-	color: var(--color-orange);
-}
-
-/* Variables */
-.ace-modrinth .ace_variable {
-	color: var(--color-text-default);
-}
-
-.ace-modrinth .ace_variable.ace_parameter {
-	color: var(--color-text-default);
-	font-style: italic;
-}
-
-.ace-modrinth .ace_variable.ace_language {
-	color: var(--color-orange);
-}
-
-/* Support */
-.ace-modrinth .ace_support.ace_function {
-	color: var(--color-blue);
-}
-
-.ace-modrinth .ace_support.ace_class {
-	color: var(--color-purple);
-}
-
-.ace-modrinth .ace_support.ace_type {
-	color: var(--color-blue);
-}
-
-.ace-modrinth .ace_support.ace_constant {
-	color: var(--color-purple);
-}
-
-/* Invalid */
-.ace-modrinth .ace_invalid {
-	color: var(--color-text-primary);
-	background-color: var(--color-red-bg);
-}
-
-.ace-modrinth .ace_invalid.ace_deprecated {
-	color: var(--color-text-primary);
-	background-color: var(--color-orange-bg);
-}
-
-/* Punctuation */
-.ace-modrinth .ace_punctuation {
-	color: var(--color-text-tertiary);
-}
-
-/* Meta */
-.ace-modrinth .ace_meta.ace_tag {
-	color: var(--color-text-default);
-}
-
-/* Markup */
-.ace-modrinth .ace_markup.ace_heading {
-	color: var(--color-red);
-	font-weight: bold;
-}
-
-.ace-modrinth .ace_markup.ace_list {
-	color: var(--color-orange);
-}
-
-.ace-modrinth .ace_markup.ace_bold {
-	font-weight: bold;
-}
-
-.ace-modrinth .ace_markup.ace_italic {
-	font-style: italic;
-}
-
-.ace-modrinth .ace_markup.ace_underline {
-	text-decoration: underline;
-}
-
-/* Indent guide */
-.ace-modrinth .ace_indent-guide {
-	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC)
-		right repeat-y;
-	opacity: 0.2;
-}
-
-.ace-modrinth .ace_indent-guide-active {
-	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC)
-		right repeat-y;
-	opacity: 0.4;
-}
diff --git a/packages/assets/styles/highlightjs.scss b/packages/assets/styles/highlightjs.scss
index 9b5eb74335..92d2eb7128 100644
--- a/packages/assets/styles/highlightjs.scss
+++ b/packages/assets/styles/highlightjs.scss
@@ -1,78 +1,82 @@
-.hljs,
-.hljs-subst {
-	color: #444;
-}
+// Modrinth's own colours, used until another highlight.js theme is picked (which marks the page
+// with `data-code-theme` and loads that theme's stylesheet).
+html:not([data-code-theme]) {
+	.hljs,
+	.hljs-subst {
+		color: #444;
+	}
 
-.hljs-comment {
-	color: #888888;
-}
+	.hljs-comment {
+		color: #888888;
+	}
 
-.hljs-keyword,
-.hljs-attribute,
-.hljs-selector-tag,
-.hljs-meta-keyword,
-.hljs-doctag,
-.hljs-name {
-	color: #f58300;
-	font-weight: bold;
-}
+	.hljs-keyword,
+	.hljs-attribute,
+	.hljs-selector-tag,
+	.hljs-meta-keyword,
+	.hljs-doctag,
+	.hljs-name {
+		color: #f58300;
+		font-weight: bold;
+	}
 
-.hljs-type,
-.hljs-string,
-.hljs-number,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-quote,
-.hljs-template-tag,
-.hljs-deletion {
-	color: var(--color-brand);
-}
+	.hljs-type,
+	.hljs-string,
+	.hljs-number,
+	.hljs-selector-id,
+	.hljs-selector-class,
+	.hljs-quote,
+	.hljs-template-tag,
+	.hljs-deletion {
+		color: var(--color-brand);
+	}
 
-.hljs-title,
-.hljs-section {
-	color: #008888;
-	font-weight: bold;
-}
+	.hljs-title,
+	.hljs-section {
+		color: #008888;
+		font-weight: bold;
+	}
 
-.hljs-regexp,
-.hljs-symbol,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-link,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-	color: #bc6060;
-}
+	.hljs-regexp,
+	.hljs-symbol,
+	.hljs-variable,
+	.hljs-template-variable,
+	.hljs-link,
+	.hljs-selector-attr,
+	.hljs-selector-pseudo {
+		color: #bc6060;
+	}
 
-.hljs-literal {
-	color: #78a960;
-}
+	.hljs-literal {
+		color: #78a960;
+	}
 
-.hljs-built_in,
-.hljs-bullet,
-.hljs-code,
-.hljs-addition {
-	color: #f58300;
-}
+	.hljs-built_in,
+	.hljs-bullet,
+	.hljs-code,
+	.hljs-addition {
+		color: #f58300;
+	}
 
-.hljs-meta {
-	color: #1f7199;
-}
+	.hljs-meta {
+		color: #1f7199;
+	}
 
-.hljs-meta-string {
-	color: #4d99bf;
-}
+	.hljs-meta-string {
+		color: #4d99bf;
+	}
 
-.hljs-emphasis {
-	font-style: italic;
-}
+	.hljs-emphasis {
+		font-style: italic;
+	}
 
-.hljs-strong {
-	font-weight: bold;
+	.hljs-strong {
+		font-weight: bold;
+	}
 }
 
 pre {
-	background-color: #222222;
+	background-color: var(--code-background, #222222);
 	padding: 1em 1em 1em 1em;
 	border-width: 5px;
 	border-radius: 2em;
diff --git a/packages/moderation/src/data/keybinds.ts b/packages/moderation/src/data/keybinds.ts
index a27ed658de..ff124462b3 100644
--- a/packages/moderation/src/data/keybinds.ts
+++ b/packages/moderation/src/data/keybinds.ts
@@ -147,6 +147,20 @@ const keybinds: { [id: string]: KeybindListener } = {
 		enabled: (ctx) => ctx.available('re-review'),
 		action: (ctx) => ctx.run('re-review'),
 	},
+	'review-re-review-misc': {
+		keybind: 'Alt+E',
+		description: 'Open re-review checks',
+		scope: 'review-actions',
+		enabled: (ctx) => ctx.available('re-review-misc'),
+		action: (ctx) => ctx.run('re-review-misc'),
+	},
+	'review-panel-rulings': {
+		keybind: 'C',
+		description: 'Open rulings panel',
+		scope: 'review-actions',
+		enabled: (ctx) => ctx.available('reveal-rulings'),
+		action: (ctx) => ctx.run('reveal-rulings'),
+	},
 	'review-reupload': {
 		keybind: 'Alt+U',
 		description: 'Open reupload checks',
@@ -218,11 +232,12 @@ const keybinds: { [id: string]: KeybindListener } = {
 		scope: 'project-review',
 		action: (ctx) => ctx.openTab('tech-review'),
 	},
-	'review-tab-slicer': {
+	'review-panel-files': {
 		keybind: 'L',
-		description: 'Open slicer tab',
-		scope: 'project-review',
-		action: (ctx) => ctx.openTab('slicer'),
+		description: "Open the archive's files",
+		scope: 'review-actions',
+		enabled: (ctx) => ctx.available('reveal-files'),
+		action: (ctx) => ctx.run('reveal-files'),
 	},
 	'toggle-collapse': {
 		keybind: 'Shift+C',
diff --git a/packages/moderation/src/data/settings.ts b/packages/moderation/src/data/settings.ts
index 4dc3b25006..42acf9eead 100644
--- a/packages/moderation/src/data/settings.ts
+++ b/packages/moderation/src/data/settings.ts
@@ -41,12 +41,18 @@ const settings = {
 				'Move to the next project in the queue after successfully approving, withholding, or rejecting a project.',
 			default: true,
 		}),
-		HideMarkdownFormattingButtons: setting.asToggle({
-			type: 'toggle',
-			id: 'hide-markdown-formatting-buttons',
-			title: 'Hide Markdown formatting buttons',
-			description: 'Hide the formatting buttons above all Markdown editors in project review.',
-			default: true,
+		MarkdownFormattingButtonsVisibility: setting.asEnum({
+			type: 'enum',
+			id: 'markdown-formatting-buttons-visibility',
+			title: 'Markdown formatting buttons Visibility',
+			description:
+				'Whether or not the given markdown formatting buttons are visible, collapsible or hidden above all Markdown editors',
+			default: 'collapsible',
+			entries: [
+				{ label: 'Visible', value: 'visible' },
+				{ label: 'Collapsible', value: 'collapsible' },
+				{ label: 'Hidden', value: 'hidden' },
+			],
 		}),
 		EnableDelayedHoverMessagePreviews: setting.asToggle({
 			type: 'toggle',
@@ -69,6 +75,37 @@ const settings = {
 			description: 'Show number key shortcut hints on issue toggle buttons.',
 			default: true,
 		}),
+		ArchiveIntegration: setting.asEnum({
+			type: 'enum',
+			id: 'archive-integration',
+			title: 'Archive Integration',
+			description:
+				'Either have Archiver share the Workbench with Mod View or get its own Workbench under its own Panel',
+			default: 'exclusive',
+			entries: [
+				{ label: 'Shared', value: 'shared' },
+				{ label: 'Exclusive', value: 'exclusive' },
+			],
+		}),
+		ButtonSize: setting.asEnum({
+			type: 'enum',
+			id: 'button-size',
+			title: 'Button size',
+			description: 'Controls the size of the buttons found within Mod View',
+			default: 'sm',
+			entries: [
+				{ label: 'Extra small', value: 'xs' },
+				{ label: 'Small', value: 'sm' },
+				{ label: 'Large', value: 'md' },
+			],
+		}),
+		MergeRulings: setting.asToggle({
+			type: 'toggle',
+			id: 'merge-rulings',
+			title: 'Merged Rulings',
+			description: 'Either show Rulings using the selector or show them all at once stacked',
+			default: false,
+		}),
 		ShowFloatingPanelFieldHoverHighlight: setting.asToggle({
 			type: 'toggle',
 			id: 'show-floating-panel-field-hover-highlight',
@@ -189,11 +226,26 @@ const settings = {
 				'Expand the changelog automatically when viewing version details in project review.',
 			default: true,
 		}),
-		SlicerButtonInVersions: setting.asToggle({
+		SectionHeadersVisible: setting.asToggle({
+			type: 'toggle',
+			id: 'section-headers-visible',
+			title: 'Show the Section headers',
+			description: 'Whether to show Section headers within Mod View Summary Panel',
+			default: true,
+		}),
+		SectionReducedGap: setting.asToggle({
+			type: 'toggle',
+			id: 'section-reduced-gap',
+			title: 'Reduce gap between Sections',
+			description: 'Whether to reduce the gaps between sections within Mod View Summary Panel',
+			default: false,
+		}),
+		ArchiveButtonInVersions: setting.asToggle({
 			type: 'toggle',
-			id: 'slicer-button-in-versions',
-			title: 'Show Slicer button in versions table and page',
-			description: 'Show the Slicer button on public version lists and version pages for staff.',
+			id: 'archive-button-in-versions',
+			title: 'Show archive viewer button in versions table and page',
+			description:
+				'Show a button opening the archive viewer on public version lists and version pages.',
 			default: false,
 		}),
 		AlternativeHostname: setting.asString({
diff --git a/packages/moderation/src/handles/settings.ts b/packages/moderation/src/handles/settings.ts
deleted file mode 100644
index 384f4c3ed4..0000000000
--- a/packages/moderation/src/handles/settings.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { isValidFor, type SettingDefinitionBase } from '../types/settings.ts'
-
-export class Settings {
-	private readonly settings: { [id: string]: unknown }
-	private readonly onChange: () => void
-
-	constructor(
-		settings: { [id: string]: unknown } | undefined = undefined,
-		onChange: () => void = () => {},
-	) {
-		this.settings = settings || {}
-		this.onChange = onChange
-	}
-
-	get<T>(definition: SettingDefinitionBase<T>): T {
-		const value = this.settings[definition.id]
-
-		return (
-			(isValidFor(definition as SettingDefinitionBase<unknown>, value)
-				? (value as T)
-				: undefined) ?? definition.default
-		)
-	}
-
-	set<T>(definition: SettingDefinitionBase<T>, value?: T): void {
-		const previous = (this.settings[definition.id] as T | undefined) ?? definition.default
-		this.settings[definition.id] = value
-		definition.onChange?.(previous, value ?? definition.default)
-		this.onChange()
-	}
-}
diff --git a/packages/moderation/src/index.ts b/packages/moderation/src/index.ts
index 22010f2742..9d62bbb41f 100644
--- a/packages/moderation/src/index.ts
+++ b/packages/moderation/src/index.ts
@@ -15,7 +15,6 @@ export {
 } from './data/quick-replies/tech-review-quick-replies'
 export { default as moderationSettings } from './data/settings'
 export * from './handles/keybinds'
-export * from './handles/settings'
 export * from './locales'
 export * from './types/keybinds'
 export * from './types/nags'
diff --git a/packages/moderation/src/types/keybinds.ts b/packages/moderation/src/types/keybinds.ts
index 132a7d9eb6..265a396a59 100644
--- a/packages/moderation/src/types/keybinds.ts
+++ b/packages/moderation/src/types/keybinds.ts
@@ -28,14 +28,7 @@ export type ModerationGlobalContext = {
 export type ModerationProjectReviewContext = {
 	scope: 'project-review'
 	openTab: (
-		tab:
-			| 'description'
-			| 'gallery'
-			| 'disclosures'
-			| 'versions'
-			| 'permissions'
-			| 'tech-review'
-			| 'slicer',
+		tab: 'description' | 'gallery' | 'disclosures' | 'versions' | 'permissions' | 'tech-review',
 	) => void
 }
 
@@ -68,6 +61,8 @@ export type ReviewShortcutAction =
 	| 'toggle-left'
 	| 'toggle-right'
 	| 'reveal-right'
+	| 'reveal-rulings'
+	| 'reveal-files'
 	| 'back'
 	| 'next'
 	| 'exit'
diff --git a/packages/moderation/src/types/settings.ts b/packages/moderation/src/types/settings.ts
index 4f662e98f6..f0bf06f4c5 100644
--- a/packages/moderation/src/types/settings.ts
+++ b/packages/moderation/src/types/settings.ts
@@ -1,86 +1,28 @@
-export interface SettingDefinitionBase<T> {
-	type: SettingDefinitionTypes
-	id: string
-	title: string
-	description: string
-	default: T
-	onChange?(previous: T | undefined, current: T): void
-}
-
-export interface ToggleSettingDefinition extends SettingDefinitionBase<boolean> {
-	type: 'toggle'
-}
-
-export interface EnumSettingDefinition<T extends string = string> extends SettingDefinitionBase<T> {
-	type: 'enum'
-	entries: {
-		label: string
-		value: T
-	}[]
-}
-
-export interface StringSettingDefinition extends SettingDefinitionBase<string> {
-	type: 'string'
-	regex?: RegExp
-}
-
-export interface ColorSettingDefinition extends SettingDefinitionBase<string> {
-	type: 'color'
-}
-
-export interface NumberSettingDefinition extends SettingDefinitionBase<number> {
-	type: 'number'
-	min: number
-	max: number
-	step: number
-	unit?: string
-}
-
-export type SettingDefinitions = ReturnType<(typeof setting)[keyof typeof setting]>
-export type SettingDefinitionTypes = SettingDefinitions['type']
-
+import type {
+	ColorSettingDefinition,
+	EnumSettingDefinition,
+	NumberSettingDefinition,
+	StringSettingDefinition,
+	ToggleSettingDefinition,
+} from '@modrinth/ui'
+
+export type {
+	ColorSettingDefinition,
+	EnumSettingDefinition,
+	NumberSettingDefinition,
+	SettingDefinition,
+	SettingDefinitionBase,
+	StringSettingDefinition,
+	ToggleSettingDefinition,
+} from '@modrinth/ui'
+
+/** Builders for the moderation settings, typed by the shared settings definitions. */
 export const setting = {
 	asEnum: <const E extends ReadonlyArray<{ label: string; value: string }>>(
 		data: EnumSettingDefinition<E[number]['value']> & { entries: E },
-	): EnumSettingDefinition<E[number]['value']> => {
-		return data as EnumSettingDefinition<E[number]['value']>
-	},
+	): EnumSettingDefinition<E[number]['value']> => data,
 	asToggle: (data: ToggleSettingDefinition) => data,
 	asString: (data: StringSettingDefinition) => data,
 	asColor: (data: ColorSettingDefinition) => data,
 	asNumber: (data: NumberSettingDefinition) => data,
 }
-
-export function isValidFor(
-	definitionBase: SettingDefinitionBase<unknown>,
-	value: unknown,
-): boolean {
-	if (value != null) {
-		// Tried my best with type safety but sadly having the `SettingDefinitions` as the type leads to issues handling types else where...
-		const definition = definitionBase as SettingDefinitions
-		if (definition.type == 'enum' && definition.entries.some((entry) => entry.value === value)) {
-			return true
-		} else if (definition.type == 'toggle' && typeof value === 'boolean') {
-			return true
-		} else if (definition.type === 'color' && typeof value === 'string') {
-			return value === '' || /^#[0-9a-f]{6}$/i.test(value)
-		} else if (definition.type === 'number' && typeof value === 'number') {
-			return Number.isFinite(value) && value >= definition.min && value <= definition.max
-		} else if (
-			definition.type == 'string' &&
-			typeof value === 'string' &&
-			(!definition.regex || value.match(definition.regex))
-		) {
-			return true
-		}
-	}
-
-	return false
-}
-
-export type SettingDefinition =
-	| ToggleSettingDefinition
-	| EnumSettingDefinition
-	| StringSettingDefinition
-	| ColorSettingDefinition
-	| NumberSettingDefinition
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 22c6b79d50..e268320e87 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -7,9 +7,7 @@
 	"types": "./index.ts",
 	"sideEffects": [
 		"**/*.css",
-		"**/*.scss",
-		"./src/utils/ace-theme.ts",
-		"./src/utils/ace-mode-mcfunction.ts"
+		"**/*.scss"
 	],
 	"imports": {
 		"#ui/*": "./src/*"
@@ -42,6 +40,7 @@
 		"@storybook/vue3-vite": "^10.1.10",
 		"@stripe/stripe-js": "^7.3.1",
 		"@tailwindcss/vite": "^4.1.18",
+		"@types/js-yaml": "^4.0.9",
 		"@vitejs/plugin-vue": "^5.2.1",
 		"eslint-plugin-storybook": "^10.1.10",
 		"storybook": "^10.1.10",
@@ -56,17 +55,30 @@
 		"wrangler": "^4.65.0"
 	},
 	"dependencies": {
+		"@codemirror/autocomplete": "^6.20.0",
 		"@codemirror/commands": "^6.3.2",
+		"@codemirror/lang-css": "^6.3.1",
+		"@codemirror/lang-html": "^6.4.11",
+		"@codemirror/lang-java": "^6.0.2",
+		"@codemirror/lang-javascript": "^6.2.4",
+		"@codemirror/lang-json": "^6.0.2",
 		"@codemirror/lang-markdown": "^6.2.3",
+		"@codemirror/lang-yaml": "^6.1.3",
 		"@codemirror/language": "^6.9.3",
+		"@codemirror/legacy-modes": "^6.5.5",
+		"@codemirror/search": "^6.7.2",
 		"@codemirror/state": "^6.3.2",
 		"@codemirror/view": "^6.22.1",
 		"@floating-ui/vue": "^2.0.1",
 		"@intercom/messenger-js-sdk": "^0.0.14",
+		"@lezer/highlight": "^1.2.3",
 		"@modrinth/api-client": "workspace:*",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/blog": "workspace:*",
 		"@modrinth/utils": "workspace:*",
+		"@run-slicer/cfr": "0.1.8-0.152",
+		"@run-slicer/procyon": "0.1.2-0.6.0",
+		"@run-slicer/vf": "0.6.4-1.12.0",
 		"@tanstack/vue-query": "5.101.4",
 		"@tresjs/cientos": "^4.3.0",
 		"@tresjs/core": "^4.3.4",
@@ -79,7 +91,7 @@
 		"@xterm/addon-fit": "^0.11.0",
 		"@xterm/addon-search": "^0.16.0",
 		"@xterm/xterm": "^6.0.0",
-		"ace-builds": "^1.43.5",
+		"@zip.js/zip.js": "^2.8.34",
 		"apexcharts": "^4.0.0",
 		"colord": "^2.9.3",
 		"dayjs": "^1.11.10",
@@ -88,6 +100,7 @@
 		"dompurify": "^3.1.7",
 		"es-toolkit": "^1.44.0",
 		"fabric": "^7.4.0",
+		"file-type": "^22.1.1",
 		"flatpickr": "^4.6.13",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.9.0",
@@ -96,16 +109,18 @@
 		"jszip": "^3.10.1",
 		"lru-cache": "^11.2.4",
 		"markdown-it": "^13.0.2",
+		"mime": "^4.1.0",
 		"motion-v": "^2.2.1",
 		"obscenity": "^0.4.6",
 		"overlayscrollbars": "^2.15.1",
 		"postprocessing": "^6.37.6",
 		"qrcode.vue": "^3.4.1",
+		"smol-toml": "^1.9.0",
 		"three": "^0.172.0",
+		"uuid": "^14.0.2",
 		"vue-i18n": "^10.0.0",
 		"vue-select": "4.0.0-beta.6",
 		"vue-typed-virtual-list": "^1.0.10",
-		"vue3-ace-editor": "^2.2.4",
 		"vue3-apexcharts": "^1.5.2",
 		"xss": "^1.0.14"
 	},
diff --git a/packages/ui/src/components/base/CodeEditor.vue b/packages/ui/src/components/base/CodeEditor.vue
new file mode 100644
index 0000000000..4df4060a71
--- /dev/null
+++ b/packages/ui/src/components/base/CodeEditor.vue
@@ -0,0 +1,5 @@
+<script lang="ts">
+import { defineAsyncComponent } from 'vue'
+
+export default defineAsyncComponent(() => import('./CodeEditorImpl.vue'))
+</script>
diff --git a/packages/ui/src/components/base/CodeEditorImpl.vue b/packages/ui/src/components/base/CodeEditorImpl.vue
new file mode 100644
index 0000000000..993f9a2278
--- /dev/null
+++ b/packages/ui/src/components/base/CodeEditorImpl.vue
@@ -0,0 +1,326 @@
+<template>
+	<div ref="host" class="code-editor font-mono" />
+</template>
+
+<script setup lang="ts">
+import { acceptCompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete'
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import {
+	bracketMatching,
+	indentOnInput,
+	indentUnit,
+	syntaxHighlighting,
+} from '@codemirror/language'
+import { highlightSelectionMatches } from '@codemirror/search'
+import { Compartment, EditorState, type Extension, Prec } from '@codemirror/state'
+import {
+	drawSelection,
+	EditorView,
+	highlightActiveLine,
+	highlightActiveLineGutter,
+	highlightSpecialChars,
+	keymap,
+	lineNumbers,
+	tooltips,
+} from '@codemirror/view'
+import { onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
+
+import { findWithoutPanel } from '#ui/utils/codemirror/find'
+import { highlightJsHighlighting } from '#ui/utils/codemirror/highlight-js'
+import { highlightJsClasses } from '#ui/utils/codemirror/highlight-js-classes'
+import { loadCodeLanguage } from '#ui/utils/codemirror/languages'
+
+/**
+ * A code editor, coloured by the code highlighting theme the user picked (see
+ * `useCodeHighlightTheme`). It fills the size it's given.
+ */
+const props = withDefaults(
+	defineProps<{
+		modelValue: string
+		/** The language to highlight, by the names `getEditorLanguage` gives files. */
+		language?: string
+		readonly?: boolean
+		/** Wrap long lines instead of scrolling sideways. */
+		lineWrapping?: boolean
+		/** What one level of indentation is, e.g. a tab or two spaces. */
+		indent?: string
+		tabSize?: number
+		/** Further extensions, e.g. key bindings or completions of the page's own. */
+		extensions?: Extension[]
+	}>(),
+	{
+		language: 'text',
+		readonly: false,
+		lineWrapping: false,
+		indent: '\t',
+		tabSize: 4,
+		extensions: () => [],
+	},
+)
+
+const emit = defineEmits<{
+	'update:modelValue': [value: string]
+	save: []
+}>()
+
+const host = useTemplateRef<HTMLDivElement>('host')
+const view = shallowRef<EditorView | null>(null)
+
+const languageCompartment = new Compartment()
+const highlightingCompartment = new Compartment()
+const readonlyCompartment = new Compartment()
+const wrappingCompartment = new Compartment()
+const indentCompartment = new Compartment()
+const extraCompartment = new Compartment()
+
+function indentation() {
+	return [indentUnit.of(props.indent), EditorState.tabSize.of(props.tabSize)]
+}
+
+/** Popups such as completions, styled like the site's menus as they're shown outside the editor. */
+const tooltipTheme = EditorView.theme({
+	'.cm-tooltip': {
+		background: 'var(--surface-3)',
+		color: 'var(--color-text-default)',
+		border: '1px solid var(--surface-5)',
+		borderRadius: '0.5rem',
+		overflow: 'hidden',
+	},
+	'.cm-tooltip.cm-tooltip-autocomplete > ul': {
+		fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+	},
+	'.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+		background: 'var(--color-brand-highlight)',
+		color: 'var(--color-contrast)',
+	},
+	'.cm-completionDetail': {
+		color: 'var(--color-text-tertiary)',
+	},
+})
+
+/**
+ * Highlights as highlight.js does where it knows the language, matching code blocks elsewhere, or
+ * else from the language's own parser, given the same classes.
+ */
+function highlighting(name: string, editor: EditorView) {
+	return highlightJsHighlighting(name, editor.state.doc) ?? syntaxHighlighting(highlightJsClasses)
+}
+
+let languageRequest = 0
+async function applyLanguage(name: string) {
+	const request = ++languageRequest
+	const language = await loadCodeLanguage(name).catch(() => null)
+	const editor = view.value
+	if (request !== languageRequest || !editor) return
+	editor.dispatch({
+		effects: [
+			languageCompartment.reconfigure(language ?? []),
+			highlightingCompartment.reconfigure(highlighting(name, editor)),
+		],
+	})
+}
+
+/** Moves the editor over to the document it's now shown in, e.g. once its panel pops out. */
+function followDocument() {
+	const editor = view.value
+	const root = host.value?.getRootNode()
+	if (
+		editor &&
+		root &&
+		root !== editor.root &&
+		(root instanceof Document || root instanceof ShadowRoot)
+	) {
+		editor.setRoot(root)
+	}
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+	view.value = new EditorView({
+		parent: host.value!,
+		state: EditorState.create({
+			doc: props.modelValue,
+			extensions: [
+				lineNumbers(),
+				highlightActiveLineGutter(),
+				highlightSpecialChars(),
+				history(),
+				drawSelection(),
+				indentOnInput(),
+				bracketMatching(),
+				closeBrackets(),
+				highlightActiveLine(),
+				highlightSelectionMatches(),
+				findWithoutPanel,
+				EditorView.editorAttributes.of({ class: 'hljs' }),
+				tooltips({ parent: host.value!.ownerDocument.body }),
+				tooltipTheme,
+				Prec.highest(
+					keymap.of([
+						{
+							key: 'Mod-s',
+							preventDefault: true,
+							run: () => {
+								emit('save')
+								return true
+							},
+						},
+					]),
+				),
+				keymap.of([
+					{ key: 'Tab', run: acceptCompletion },
+					...closeBracketsKeymap,
+					...defaultKeymap,
+					...historyKeymap,
+					indentWithTab,
+				]),
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged) emit('update:modelValue', update.state.doc.toString())
+				}),
+				languageCompartment.of([]),
+				highlightingCompartment.of([]),
+				readonlyCompartment.of(EditorState.readOnly.of(props.readonly)),
+				wrappingCompartment.of(props.lineWrapping ? EditorView.lineWrapping : []),
+				indentCompartment.of(indentation()),
+				extraCompartment.of(props.extensions),
+			],
+		}),
+	})
+	void applyLanguage(props.language)
+
+	resizeObserver = new ResizeObserver(followDocument)
+	resizeObserver.observe(host.value!)
+})
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect()
+	view.value?.destroy()
+	view.value = null
+})
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		const editor = view.value
+		if (!editor || value === editor.state.doc.toString()) return
+		editor.dispatch({ changes: { from: 0, to: editor.state.doc.length, insert: value } })
+	},
+)
+
+watch(() => props.language, applyLanguage)
+
+watch(
+	() => props.readonly,
+	(readonly) =>
+		view.value?.dispatch({
+			effects: readonlyCompartment.reconfigure(EditorState.readOnly.of(readonly)),
+		}),
+)
+
+watch(
+	() => props.lineWrapping,
+	(wrapping) =>
+		view.value?.dispatch({
+			effects: wrappingCompartment.reconfigure(wrapping ? EditorView.lineWrapping : []),
+		}),
+)
+
+watch([() => props.indent, () => props.tabSize], () =>
+	view.value?.dispatch({ effects: indentCompartment.reconfigure(indentation()) }),
+)
+
+watch(
+	() => props.extensions,
+	(extensions) => view.value?.dispatch({ effects: extraCompartment.reconfigure(extensions) }),
+)
+
+function focus() {
+	view.value?.focus()
+}
+
+defineExpose({ view, focus })
+</script>
+
+<style scoped>
+.code-editor {
+	position: relative;
+	overflow: hidden;
+}
+
+.code-editor :deep(.cm-editor) {
+	height: 100%;
+	padding: 0;
+	font-size: inherit;
+}
+
+html:not([data-code-theme]) .code-editor :deep(.cm-editor) {
+	background: var(--surface-3);
+	color: var(--color-text-default);
+}
+
+.code-editor :deep(.cm-editor.cm-focused) {
+	outline: none;
+}
+
+.code-editor :deep(.cm-scroller) {
+	font-family: inherit;
+	line-height: 1.5;
+	overflow: auto;
+}
+
+.code-editor :deep(.cm-content) {
+	caret-color: currentColor;
+}
+
+.code-editor :deep(.cm-gutters) {
+	background: inherit;
+	color: color-mix(in srgb, currentColor 45%, transparent);
+	border-right: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+}
+
+.code-editor :deep(.cm-activeLine),
+.code-editor :deep(.cm-activeLineGutter) {
+	background: color-mix(in srgb, currentColor 7%, transparent);
+}
+
+.code-editor :deep(.cm-activeLineGutter) {
+	color: currentColor;
+}
+
+.code-editor :deep(.cm-cursor) {
+	border-left-color: currentColor;
+}
+
+.code-editor :deep(.cm-selectionBackground) {
+	background: color-mix(in srgb, currentColor 18%, transparent) !important;
+}
+
+.code-editor :deep(.cm-focused .cm-selectionBackground) {
+	background: color-mix(in srgb, currentColor 25%, transparent) !important;
+}
+
+.code-editor :deep(.cm-selectionMatch) {
+	background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.code-editor :deep(.cm-matchingBracket) {
+	background: transparent;
+	outline: 1px solid color-mix(in srgb, currentColor 40%, transparent);
+}
+
+.code-editor :deep(.cm-searchMatch) {
+	background: color-mix(in srgb, var(--color-orange) 30%, transparent);
+	outline: none;
+}
+
+.code-editor :deep(.cm-searchMatch-selected) {
+	background: color-mix(in srgb, var(--color-orange) 60%, transparent);
+}
+
+.code-editor :deep(.cm-panels) {
+	height: 0;
+	overflow: hidden;
+	border: none;
+}
+</style>
diff --git a/packages/ui/src/components/base/FloatingWindow.vue b/packages/ui/src/components/base/FloatingWindow.vue
new file mode 100644
index 0000000000..0f2a6befe4
--- /dev/null
+++ b/packages/ui/src/components/base/FloatingWindow.vue
@@ -0,0 +1,191 @@
+<template>
+	<Teleport to="body">
+		<section
+			v-if="open"
+			ref="windowElement"
+			role="dialog"
+			tabindex="-1"
+			:aria-label="title"
+			class="floating-window fixed z-[9000] flex flex-col overflow-hidden rounded-2xl border border-solid border-surface-5 bg-surface-3 shadow-2xl outline-none"
+			:style="windowStyle"
+			@keydown.esc.stop="open = false"
+		>
+			<header
+				class="flex shrink-0 cursor-move touch-none select-none items-center gap-2 border-0 border-b border-solid border-surface-5 py-1.5 pl-4 pr-1.5"
+				@pointerdown="startDrag"
+				@pointermove="drag"
+				@pointerup="stopDrag"
+				@pointercancel="stopDrag"
+				@dblclick="recenter"
+			>
+				<component
+					:is="icon"
+					v-if="icon"
+					class="size-4 shrink-0 text-secondary"
+					aria-hidden="true"
+				/>
+				<h2 class="m-0 min-w-0 flex-1 truncate text-base font-semibold text-contrast">
+					{{ title }}
+				</h2>
+				<div class="flex shrink-0 items-center gap-1" @pointerdown.stop>
+					<slot name="actions" />
+					<IconButton
+						v-tooltip="formatMessage(commonMessages.closeButton)"
+						type="quiet"
+						size="sm"
+						:label="formatMessage(commonMessages.closeButton)"
+						@click="open = false"
+					>
+						<XIcon aria-hidden="true" />
+					</IconButton>
+				</div>
+			</header>
+			<div class="min-h-0 flex-1 overflow-auto p-4">
+				<slot />
+			</div>
+		</section>
+	</Teleport>
+</template>
+
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import { useLocalStorage, useResizeObserver } from '@vueuse/core'
+import { type Component, computed, nextTick, ref, watch } from 'vue'
+
+import { useVIntl } from '../../composables/i18n'
+import { commonMessages } from '../../utils/common-messages'
+import IconButton from './buttons/IconButton.vue'
+
+/**
+ * A window floating above the page without blocking it, moved by dragging its header and resized
+ * from its corner, so whatever is behind it stays in reach. `storageKey` remembers where it was
+ * left and how big it was.
+ */
+const props = withDefaults(
+	defineProps<{
+		title: string
+		icon?: Component
+		storageKey?: string
+		/** The size the window opens at until it's resized, in pixels. */
+		defaultSize?: { width: number; height: number }
+	}>(),
+	{ icon: undefined, storageKey: undefined, defaultSize: () => ({ width: 640, height: 560 }) },
+)
+
+const open = defineModel<boolean>('open', { default: false })
+
+const { formatMessage } = useVIntl()
+
+/** How much of the window is kept within the viewport while it's dragged. */
+const KEPT_IN_VIEW = 48
+const MINIMUM_WIDTH = 320
+const MINIMUM_HEIGHT = 200
+
+interface Placement {
+	x: number | null
+	y: number | null
+	width: number
+	height: number
+}
+
+const initialPlacement = (): Placement => ({ x: null, y: null, ...props.defaultSize })
+const placement = props.storageKey
+	? useLocalStorage<Placement>(props.storageKey, initialPlacement(), { mergeDefaults: true })
+	: ref<Placement>(initialPlacement())
+
+const windowElement = ref<HTMLElement | null>(null)
+
+function viewport() {
+	const view = windowElement.value?.ownerDocument.defaultView ?? window
+	return { width: view.innerWidth, height: view.innerHeight }
+}
+
+function clampedSize() {
+	const { width, height } = viewport()
+	return {
+		width: Math.max(MINIMUM_WIDTH, Math.min(placement.value.width, width - 16)),
+		height: Math.max(MINIMUM_HEIGHT, Math.min(placement.value.height, height - 16)),
+	}
+}
+
+function clampedPosition(x: number, y: number) {
+	const { width, height } = viewport()
+	const size = clampedSize()
+	return {
+		x: Math.min(Math.max(x, KEPT_IN_VIEW - size.width), width - KEPT_IN_VIEW),
+		y: Math.min(Math.max(y, 0), height - KEPT_IN_VIEW),
+	}
+}
+
+const windowStyle = computed(() => {
+	const size = clampedSize()
+	const { width, height } = viewport()
+	const position = clampedPosition(
+		placement.value.x ?? (width - size.width) / 2,
+		placement.value.y ?? (height - size.height) / 2,
+	)
+	return {
+		left: `${position.x}px`,
+		top: `${position.y}px`,
+		width: `${size.width}px`,
+		height: `${size.height}px`,
+		minWidth: `${MINIMUM_WIDTH}px`,
+		minHeight: `${MINIMUM_HEIGHT}px`,
+	}
+})
+
+let dragging: { pointerX: number; pointerY: number; x: number; y: number } | null = null
+
+function startDrag(event: PointerEvent) {
+	if (event.button !== 0 || !windowElement.value) return
+	const bounds = windowElement.value.getBoundingClientRect()
+	;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+	dragging = { pointerX: event.clientX, pointerY: event.clientY, x: bounds.left, y: bounds.top }
+}
+
+function drag(event: PointerEvent) {
+	if (!dragging) return
+	const position = clampedPosition(
+		dragging.x + event.clientX - dragging.pointerX,
+		dragging.y + event.clientY - dragging.pointerY,
+	)
+	placement.value = { ...placement.value, ...position }
+}
+
+function stopDrag(event: PointerEvent) {
+	if (!dragging) return
+	dragging = null
+	const target = event.currentTarget as HTMLElement
+	if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId)
+}
+
+function recenter() {
+	placement.value = { ...placement.value, x: null, y: null }
+}
+
+useResizeObserver(windowElement, () => {
+	const element = windowElement.value
+	if (!element || dragging) return
+	const width = element.offsetWidth
+	const height = element.offsetHeight
+	if (
+		width !== Math.round(placement.value.width) ||
+		height !== Math.round(placement.value.height)
+	) {
+		const { x, y } = clampedPosition(element.offsetLeft, element.offsetTop)
+		placement.value = { x, y, width, height }
+	}
+})
+
+watch(open, async (shown) => {
+	if (!shown) return
+	await nextTick()
+	windowElement.value?.focus({ preventScroll: true })
+})
+</script>
+
+<style scoped>
+.floating-window {
+	resize: both;
+}
+</style>
diff --git a/packages/ui/src/components/base/MarkdownEditorImpl.vue b/packages/ui/src/components/base/MarkdownEditorImpl.vue
index a119a7c9f8..7877883968 100644
--- a/packages/ui/src/components/base/MarkdownEditorImpl.vue
+++ b/packages/ui/src/components/base/MarkdownEditorImpl.vue
@@ -222,23 +222,56 @@
 	<div class="block box-border min-w-0 grow w-full p-1">
 		<div class="editor-action-row w-full">
 			<div class="w-full flex justify-between items-center flex-wrap gap-2">
-				<div v-if="!hideFormattingButtons" class="editor-actions">
+				<div class="editor-actions">
+					<IconButton
+						v-if="formattingButtonsVisibility == 'collapsible'"
+						v-tooltip="
+							formatMessage(
+								isFormattingButtonsHidden
+									? messages.showFormatterButtons
+									: messages.hideFormatterButtons,
+							)
+						"
+						:label="
+							formatMessage(
+								isFormattingButtonsHidden
+									? messages.showFormatterButtons
+									: messages.hideFormatterButtons,
+							)
+						"
+						:size="formattingButtonSize ?? 'sm'"
+						:disabled="previewMode || disabled"
+						@click="
+							() =>
+								$emit('collapseToggle', (isFormattingButtonsHidden = !isFormattingButtonsHidden))
+						"
+					>
+						<ExpandIcon v-if="isFormattingButtonsHidden" />
+						<CollapseIcon v-else />
+					</IconButton>
 					<template
-						v-for="(buttonGroup, _i) in Object.values(BUTTONS).filter((bg) => bg.display)"
-						:key="_i"
+						v-if="
+							formattingButtonsVisibility == 'visible' ||
+							(formattingButtonsVisibility == 'collapsible' && !isFormattingButtonsHidden)
+						"
 					>
-						<div class="divider"></div>
-						<template v-for="button in buttonGroup.buttons" :key="button.label.id">
-							<IconButton
-								v-tooltip="formatMessage(button.label)"
-								:label="formatMessage(button.label)"
-								size="sm"
-								:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
-								:disabled="previewMode || disabled"
-								@click="() => button.action(editor)"
-							>
-								<component :is="button.icon" />
-							</IconButton>
+						<template
+							v-for="(buttonGroup, _i) in Object.values(BUTTONS).filter((bg) => bg.display)"
+							:key="_i"
+						>
+							<div class="divider"></div>
+							<template v-for="button in buttonGroup.buttons" :key="button.label.id">
+								<IconButton
+									v-tooltip="formatMessage(button.label)"
+									:label="formatMessage(button.label)"
+									:size="formattingButtonSize ?? 'sm'"
+									:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
+									:disabled="previewMode || disabled"
+									@click="() => button.action(editor)"
+								>
+									<component :is="button.icon" />
+								</IconButton>
+							</template>
 						</template>
 					</template>
 				</div>
@@ -317,6 +350,8 @@ import {
 	AlignLeftIcon,
 	BoldIcon,
 	CodeIcon,
+	CollapseIcon,
+	ExpandIcon,
 	Heading1Icon,
 	Heading2Icon,
 	Heading3Icon,
@@ -350,6 +385,7 @@ import {
 
 import Button from '#ui/components/base/buttons/Button.vue'
 import IconButton from '#ui/components/base/buttons/IconButton.vue'
+import type { ButtonProps } from '#ui/components/base/buttons/types.ts'
 
 import { defineMessages, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages.ts'
@@ -364,6 +400,14 @@ import Toggle from './Toggle.vue'
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
+	hideFormatterButtons: {
+		id: 'markdown-editor.hide-formatter-buttons',
+		defaultMessage: 'Hide Formatter Buttons',
+	},
+	showFormatterButtons: {
+		id: 'markdown-editor.show-formatter-buttons',
+		defaultMessage: 'Show Formatter Buttons',
+	},
 	insertButton: {
 		id: 'markdown-editor.insert-button',
 		defaultMessage: 'Insert',
@@ -565,7 +609,9 @@ const props = withDefaults(
 		extensions?: Extension[]
 		disabled?: boolean
 		headingButtons?: boolean
-		hideFormattingButtons?: boolean
+		formattingButtonsVisibility?: 'visible' | 'collapsible' | 'hidden'
+		formattingButtonSize?: ButtonProps['size']
+		isFormattingButtonsHidden?: boolean
 		initialPreview?: boolean
 		hideMarkdownHint?: boolean
 		/**
@@ -582,7 +628,8 @@ const props = withDefaults(
 		modelValue: '',
 		disabled: false,
 		headingButtons: true,
-		hideFormattingButtons: false,
+		formattingButtonsVisibility: 'visible',
+		isFormattingButtonsHidden: false,
 		initialPreview: false,
 		hideMarkdownHint: false,
 		onImageUpload: undefined,
@@ -593,6 +640,8 @@ const props = withDefaults(
 	},
 )
 
+const isFormattingButtonsHidden = ref(props.isFormattingButtonsHidden)
+
 const editorRef = ref<HTMLDivElement>()
 let editor: EditorView | null = null
 let isDisabledCompartment: Compartment | null = null
@@ -620,6 +669,7 @@ function focusEditorFrame(event: MouseEvent) {
 const emit = defineEmits<{
 	'update:modelValue': [value: string]
 	ready: [view: EditorView]
+	collapseToggle: [value: boolean]
 }>()
 const resolvedPlaceholder = computed(
 	() => props.placeholder ?? formatMessage(messages.editorPlaceholder),
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index 6b5cb9cc01..ce8cba4647 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -23,7 +23,7 @@
 					v-show="link.shown ?? true"
 					:key="link.href"
 					ref="tabLinkElements"
-					:replace="replace"
+					:replace="link.replace ?? replace"
 					:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
 					class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
 					:class="getSSRFallbackClasses(index)"
@@ -94,6 +94,8 @@ interface Tab {
 	icon?: Component
 	subpages?: string[]
 	onHover?: () => void
+	/** Overrides the tabs' `replace` for this one, e.g. for a tab that leaves the page. */
+	replace?: boolean
 }
 
 const props = withDefaults(
diff --git a/packages/ui/src/components/base/buttons/ContextMenu.vue b/packages/ui/src/components/base/buttons/ContextMenu.vue
index 60d4291847..6eed967ea7 100644
--- a/packages/ui/src/components/base/buttons/ContextMenu.vue
+++ b/packages/ui/src/components/base/buttons/ContextMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, useId, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, shallowRef, useId, watch } from 'vue'
 
 import type { AnchoredTeleportAnchor } from '../../../utils/use-anchored-teleport'
 import { pointAnchor, useAnchoredTeleport } from '../../../utils/use-anchored-teleport'
@@ -32,7 +32,7 @@ const panelElement = computed(() => panel.value?.element ?? null)
 const placement = ref('bottom-start' as const)
 const distance = ref(0)
 const menuId = `context-menu-${useId()}`
-const currentOptions = ref<ButtonMenuOption[]>([])
+const currentOptions = shallowRef<ButtonMenuOption[]>([])
 
 const options = computed(() => visibleOptions(currentOptions.value))
 const rows = computed(() => options.value.filter(isMenuRow))
@@ -51,7 +51,24 @@ const { focusedIndex, getItems, handleKeydown, reset } = useMenuKeyboard({
 	onTab: () => closeMenu(),
 })
 
+/** The document the menu shows in: the one it was asked for from, e.g. a popout window's. */
+const menuDocument = ref<Document | null>(null)
+const teleportTarget = computed(
+	() => menuDocument.value?.body ?? (typeof document !== 'undefined' ? document.body : 'body'),
+)
+
+function documentOf(event: MouseEvent) {
+	const target = event.target as Node | null
+	return target?.ownerDocument ?? event.view?.document ?? document
+}
+
 async function openMenu(event: MouseEvent, menuOptions: ButtonMenuOption[]) {
+	const eventDocument = documentOf(event)
+	if (isOpen.value && menuDocument.value !== eventDocument) closeMenu()
+	if (menuDocument.value !== eventDocument) {
+		menuDocument.value = eventDocument
+		await nextTick()
+	}
 	currentOptions.value = menuOptions
 	anchor.value = pointAnchor(event.clientX, event.clientY)
 
@@ -66,7 +83,7 @@ async function openMenu(event: MouseEvent, menuOptions: ButtonMenuOption[]) {
 	// focus the panel so keys work without highlighting a row
 	await nextTick()
 	panelElement.value?.focus()
-	window.getSelection()?.removeAllRanges()
+	eventDocument.defaultView?.getSelection()?.removeAllRanges()
 }
 
 function closeMenu() {
@@ -93,7 +110,7 @@ defineExpose({ open: openMenu, close: closeMenu })
 </script>
 
 <template>
-	<Teleport v-if="isClient" to="body">
+	<Teleport v-if="isClient" :to="teleportTarget">
 		<ButtonMenuPanel
 			ref="panel"
 			:open="isOpen"
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 6e44e3f721..871d445eef 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -40,6 +40,7 @@ export type {
 export { default as Card } from './Card.vue'
 export { default as Checkbox } from './Checkbox.vue'
 export { default as Chips } from './Chips.vue'
+export { default as CodeEditor } from './CodeEditor.vue'
 export { default as Collapsible } from './Collapsible.vue'
 export type { CollapsibleAdmonitionItem } from './CollapsibleAdmonition.vue'
 export { default as CollapsibleAdmonition } from './CollapsibleAdmonition.vue'
@@ -66,6 +67,7 @@ export type { FilterPillOption } from './FilterPills.vue'
 export { default as FilterPills } from './FilterPills.vue'
 export { default as FloatingActionBar } from './FloatingActionBar.vue'
 export { default as FloatingPanel } from './FloatingPanel.vue'
+export { default as FloatingWindow } from './FloatingWindow.vue'
 export { default as FormattedTag } from './FormattedTag.vue'
 export { default as FullImage } from './FullImage.vue'
 export { default as HeadingLink } from './HeadingLink.vue'
diff --git a/packages/ui/src/components/floating/Tooltip.vue b/packages/ui/src/components/floating/Tooltip.vue
index fffe07c5bf..8ea7f91697 100644
--- a/packages/ui/src/components/floating/Tooltip.vue
+++ b/packages/ui/src/components/floating/Tooltip.vue
@@ -228,9 +228,7 @@ function onEnter() {
 }
 
 function onTooltipEnter() {
-	console.log('WWWWWWWWWWWWWWWWWWWW')
 	if ((props.hoverable || props.pinned) && props.reference) {
-		console.log('WEEEEEEEE')
 		preventHide(props.reference)
 	}
 }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 2e1d778f3f..d43702a3b7 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -22,6 +22,7 @@ export * from './page'
 export * from './project'
 export * from './search'
 export * from './servers'
+export * from './settings'
 export * from './sharing'
 export * from './skin'
 export * from './user'
diff --git a/packages/ui/src/components/settings/SettingsModal.vue b/packages/ui/src/components/settings/SettingsModal.vue
new file mode 100644
index 0000000000..151522b994
--- /dev/null
+++ b/packages/ui/src/components/settings/SettingsModal.vue
@@ -0,0 +1,90 @@
+<template>
+	<TabbedModal
+		ref="modal"
+		:header="header ?? formatMessage(commonMessages.settingsLabel)"
+		:tabs="tabs"
+		:width="width"
+		:max-width="maxWidth"
+	>
+		<template #content="{ index }">
+			<template v-if="shownPages[index]">
+				<SettingsPanel
+					v-if="shownPages[index].groups"
+					:groups="shownPages[index].groups!"
+					:store="shownPages[index].store ?? store"
+				>
+					<template #setting-actions="{ setting }">
+						<slot name="setting-actions" :setting="setting" :page="shownPages[index]" />
+					</template>
+				</SettingsPanel>
+				<component
+					:is="shownPages[index].content"
+					v-else-if="shownPages[index].content"
+					v-bind="shownPages[index].contentProps"
+				/>
+			</template>
+		</template>
+		<template v-if="$slots.footer" #footer>
+			<slot name="footer" />
+		</template>
+	</TabbedModal>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { computed, useTemplateRef } from 'vue'
+
+import { type MessageDescriptor, useVIntl } from '../../composables/i18n'
+import { commonMessages } from '../../utils/common-messages'
+import TabbedModal, { type Tab } from '../modal/TabbedModal.vue'
+import SettingsPanel from './SettingsPanel.vue'
+import type { SettingsStore } from './store'
+import type { SettingDefinition, SettingGroup } from './types'
+
+/** A page of the settings modal: groups of settings, or content of its own (e.g. keybinds). */
+export interface SettingsPage {
+	id: string
+	name: MessageDescriptor
+	icon: Component
+	groups?: SettingGroup[]
+	/** Where the page's settings are kept, when it isn't the modal's `store`. */
+	store?: SettingsStore
+	content?: Component
+	/** Props given to the page's own content. */
+	contentProps?: Record<string, unknown>
+	shown?: boolean
+}
+
+/** Settings split into pages, one per tab, each laid out by `SettingsPanel` unless it has its own content. */
+const props = withDefaults(
+	defineProps<{
+		pages: SettingsPage[]
+		/** Where pages without their own store keep their settings. */
+		store?: SettingsStore
+		header?: string
+		width?: string
+		maxWidth?: string
+	}>(),
+	{ store: undefined, header: undefined, width: '60rem', maxWidth: undefined },
+)
+
+defineSlots<{
+	'setting-actions'?(props: { setting: SettingDefinition; page: SettingsPage }): unknown
+	footer?(): unknown
+}>()
+
+const { formatMessage } = useVIntl()
+const modal = useTemplateRef<InstanceType<typeof TabbedModal>>('modal')
+
+const shownPages = computed(() => props.pages.filter((page) => page.shown !== false))
+
+/** The pages as the modal's tabs; their content is rendered through its `content` slot. */
+const tabs = computed<Tab[]>(() =>
+	shownPages.value.map((page) => ({ name: page.name, icon: page.icon })),
+)
+
+defineExpose({
+	show: (event?: MouseEvent) => modal.value?.show(event),
+	hide: () => modal.value?.hide(),
+})
+</script>
diff --git a/packages/ui/src/components/settings/SettingsPages.vue b/packages/ui/src/components/settings/SettingsPages.vue
new file mode 100644
index 0000000000..0aceaf5930
--- /dev/null
+++ b/packages/ui/src/components/settings/SettingsPages.vue
@@ -0,0 +1,91 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex items-start gap-2">
+			<div
+				class="flex min-w-0 flex-1 flex-wrap gap-1"
+				role="tablist"
+				:aria-label="formatMessage(messages.pages)"
+			>
+				<Button
+					v-for="page in shownPages"
+					:key="page.id"
+					type="quiet"
+					size="sm"
+					role="tab"
+					:aria-selected="page.id === activePage?.id"
+					:class="{ '!bg-surface-4 !text-contrast': page.id === activePage?.id }"
+					@click="pageId = page.id"
+				>
+					<component :is="page.icon" aria-hidden="true" />
+					{{ formatMessage(page.name) }}
+				</Button>
+			</div>
+			<slot name="actions" />
+		</div>
+		<template v-if="activePage">
+			<SettingsPanel
+				v-if="activePage.groups"
+				:key="activePage.id"
+				:groups="activePage.groups"
+				:store="activePage.store ?? store"
+			>
+				<template #setting-actions="{ setting }">
+					<slot name="setting-actions" :setting="setting" :page="activePage" />
+				</template>
+			</SettingsPanel>
+			<component
+				:is="activePage.content"
+				v-else-if="activePage.content"
+				:key="activePage.id"
+				v-bind="activePage.contentProps"
+			/>
+		</template>
+		<slot name="footer" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import { defineMessages, useVIntl } from '../../composables/i18n'
+import Button from '../base/buttons/Button.vue'
+import type { SettingsPage } from './SettingsModal.vue'
+import SettingsPanel from './SettingsPanel.vue'
+import type { SettingsStore } from './store'
+import type { SettingDefinition } from './types'
+
+/**
+ * Settings split into pages, picked from a row of tabs above them, each laid out by
+ * `SettingsPanel` unless it has its own content; for settings shown in a panel rather than a
+ * modal. `storageKey` remembers the page last shown.
+ */
+const props = withDefaults(
+	defineProps<{
+		pages: SettingsPage[]
+		/** Where pages without their own store keep their settings. */
+		store?: SettingsStore
+		storageKey?: string
+	}>(),
+	{ store: undefined, storageKey: undefined },
+)
+
+defineSlots<{
+	'setting-actions'?(props: { setting: SettingDefinition; page: SettingsPage }): unknown
+	/** Shown at the end of the row of pages, e.g. to move the settings elsewhere. */
+	actions?(): unknown
+	footer?(): unknown
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	pages: { id: 'settings.pages.label', defaultMessage: 'Settings pages' },
+})
+
+const shownPages = computed(() => props.pages.filter((page) => page.shown !== false))
+const pageId = props.storageKey ? useLocalStorage(props.storageKey, '') : ref('')
+const activePage = computed(
+	() => shownPages.value.find((page) => page.id === pageId.value) ?? shownPages.value[0],
+)
+</script>
diff --git a/packages/ui/src/components/settings/SettingsPanel.vue b/packages/ui/src/components/settings/SettingsPanel.vue
new file mode 100644
index 0000000000..99a8722bf9
--- /dev/null
+++ b/packages/ui/src/components/settings/SettingsPanel.vue
@@ -0,0 +1,189 @@
+<template>
+	<div class="flex flex-col gap-6">
+		<Input
+			v-if="searchable"
+			v-model="search"
+			type="search"
+			:icon="SearchIcon"
+			:placeholder="formatMessage(messages.search)"
+			:aria-label="formatMessage(messages.search)"
+			wrapper-class="w-full"
+		/>
+		<p v-if="!filteredGroups.length" class="m-0 text-secondary" role="status">
+			{{ formatMessage(messages.noResults) }}
+		</p>
+		<section
+			v-for="group in filteredGroups"
+			:key="group.id"
+			class="flex flex-col gap-5"
+			:aria-labelledby="`${baseId}-${group.id}`"
+		>
+			<div class="flex flex-col gap-1">
+				<h3 :id="`${baseId}-${group.id}`" class="m-0 text-lg font-semibold text-contrast">
+					{{ text(group.title) }}
+				</h3>
+				<p v-if="group.description" class="m-0 text-sm text-secondary">
+					{{ text(group.description) }}
+				</p>
+			</div>
+			<div
+				v-for="setting in group.settings"
+				:key="setting.id"
+				class="flex flex-row flex-wrap items-center justify-between gap-x-4 gap-y-2"
+			>
+				<div class="flex min-w-[12rem] flex-1 flex-col gap-1">
+					<span :id="`${baseId}-${setting.id}`" class="font-semibold text-contrast">
+						{{ text(setting.title) }}
+					</span>
+					<span v-if="setting.description" class="text-sm text-secondary">
+						{{ text(setting.description) }}
+					</span>
+					<span v-if="showDefaults" class="text-xs text-secondary">
+						<IntlFormatted :message-id="messages.defaultValue">
+							<template #value>
+								<span
+									class="font-medium"
+									:class="{
+										'text-green': setting.type === 'toggle' && setting.default,
+										'text-red': setting.type === 'toggle' && !setting.default,
+									}"
+									>{{ defaultLabel(setting) }}</span
+								>
+							</template>
+						</IntlFormatted>
+					</span>
+				</div>
+
+				<Toggle
+					v-if="setting.type === 'toggle'"
+					:aria-labelledby="`${baseId}-${setting.id}`"
+					:model-value="storeOf(group).get(setting)"
+					class="shrink-0"
+					@update:model-value="(value) => storeOf(group).set(setting, !!value)"
+				/>
+				<Chips
+					v-else-if="setting.type === 'enum' && setting.display === 'chips'"
+					:aria-label="text(setting.title)"
+					:items="setting.entries.map((entry) => entry.value)"
+					:format-label="(value) => entryLabel(setting, value)"
+					:model-value="storeOf(group).get(setting)"
+					size="small"
+					hide-checkmark-icon
+					class="shrink-0"
+					@update:model-value="(value) => value != null && storeOf(group).set(setting, value)"
+				/>
+				<Combobox
+					v-else-if="setting.type === 'enum'"
+					:aria-label="text(setting.title)"
+					:model-value="storeOf(group).get(setting)"
+					:options="
+						setting.entries.map((entry) => ({ value: entry.value, label: text(entry.label) }))
+					"
+					class="w-full sm:!w-1/3"
+					@update:model-value="(value) => value != null && storeOf(group).set(setting, value)"
+				/>
+				<div v-else-if="setting.type === 'string'" class="flex w-full flex-col gap-2 sm:!w-1/3">
+					<Input
+						type="text"
+						:aria-labelledby="`${baseId}-${setting.id}`"
+						:placeholder="setting.placeholder ? text(setting.placeholder) : undefined"
+						:model-value="storeOf(group).get(setting)"
+						@update:model-value="(value) => storeOf(group).set(setting, String(value ?? ''))"
+					/>
+				</div>
+				<slot name="setting-actions" :setting="setting" :store="storeOf(group)" />
+			</div>
+		</section>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import { computed, ref, useId } from 'vue'
+
+import { defineMessages, useVIntl } from '../../composables/i18n'
+import Chips from '../base/Chips.vue'
+import Combobox from '../base/Combobox.vue'
+import Input from '../base/inputs/Input.vue'
+import IntlFormatted from '../base/IntlFormatted.vue'
+import Toggle from '../base/Toggle.vue'
+import type { SettingsStore } from './store'
+import type { EnumSettingDefinition, SettingDefinition, SettingGroup, SettingText } from './types'
+
+/**
+ * Settings laid out by group, each with its title, description, default and the control for its
+ * kind, read from and written to `store`. Searching filters them by group, title and description.
+ */
+const props = withDefaults(
+	defineProps<{
+		groups: SettingGroup[]
+		/** Where groups without their own store keep their settings. */
+		store?: SettingsStore
+		searchable?: boolean
+		showDefaults?: boolean
+	}>(),
+	{ store: undefined, searchable: true, showDefaults: true },
+)
+
+defineSlots<{
+	/** Shown after a setting's control, e.g. to fill in a commonly used value. */
+	'setting-actions'?(props: { setting: SettingDefinition; store: SettingsStore }): unknown
+}>()
+
+const { formatMessage } = useVIntl()
+const baseId = useId()
+const search = ref('')
+
+const messages = defineMessages({
+	search: { id: 'settings.panel.search', defaultMessage: 'Search settings...' },
+	noResults: { id: 'settings.panel.no-results', defaultMessage: 'No settings match your search.' },
+	defaultValue: { id: 'settings.panel.default-value', defaultMessage: 'Default: <value></value>' },
+	on: { id: 'settings.panel.on', defaultMessage: 'On' },
+	off: { id: 'settings.panel.off', defaultMessage: 'Off' },
+	none: { id: 'settings.panel.none', defaultMessage: 'None' },
+})
+
+const noStore: SettingsStore = {
+	get: (definition) => definition.default,
+	set: () => {},
+}
+
+function storeOf(group: SettingGroup) {
+	return group.store ?? props.store ?? noStore
+}
+
+function text(value: SettingText) {
+	return typeof value === 'string' ? value : formatMessage(value)
+}
+
+function entryLabel(setting: EnumSettingDefinition, value: string) {
+	const entry = setting.entries.find((candidate) => candidate.value === value)
+	return entry ? text(entry.label) : value
+}
+
+function defaultLabel(setting: SettingDefinition) {
+	if (setting.type === 'toggle') return formatMessage(setting.default ? messages.on : messages.off)
+	if (setting.type === 'enum') return entryLabel(setting, setting.default)
+	return setting.default || formatMessage(messages.none)
+}
+
+const filteredGroups = computed(() => {
+	const query = search.value.trim().toLocaleLowerCase()
+	if (!query) return props.groups
+	return props.groups
+		.map((group) => {
+			const groupMatches = text(group.title).toLocaleLowerCase().includes(query)
+			return {
+				...group,
+				settings: group.settings.filter(
+					(setting) =>
+						groupMatches ||
+						[setting.title, setting.description]
+							.filter((value): value is SettingText => value != null)
+							.some((value) => text(value).toLocaleLowerCase().includes(query)),
+				),
+			}
+		})
+		.filter((group) => group.settings.length)
+})
+</script>
diff --git a/packages/ui/src/components/settings/index.ts b/packages/ui/src/components/settings/index.ts
new file mode 100644
index 0000000000..78bd615b9c
--- /dev/null
+++ b/packages/ui/src/components/settings/index.ts
@@ -0,0 +1,5 @@
+export { default as SettingsModal, type SettingsPage } from './SettingsModal.vue'
+export { default as SettingsPages } from './SettingsPages.vue'
+export { default as SettingsPanel } from './SettingsPanel.vue'
+export * from './store'
+export * from './types'
diff --git a/packages/ui/src/components/settings/store.ts b/packages/ui/src/components/settings/store.ts
new file mode 100644
index 0000000000..58423a359a
--- /dev/null
+++ b/packages/ui/src/components/settings/store.ts
@@ -0,0 +1,81 @@
+import { useLocalStorage } from '@vueuse/core'
+import { type MaybeRefOrGetter, type Ref, toValue } from 'vue'
+
+import { isValidSettingValue, type SettingDefinition, type SettingDefinitionBase } from './types'
+
+/** Where settings' values are read from and written to; reads are reactive. */
+export interface SettingsStore {
+	get<T>(definition: SettingDefinitionBase<T>): T
+	set<T>(definition: SettingDefinitionBase<T>, value: T): void
+}
+
+export interface LocalSettingsOptions {
+	/** Prepended to each setting's id to make its local storage key, unless it has its own. */
+	prefix?: string
+	/** Reads the stored values once mounted, so server rendered pages hydrate with the defaults. */
+	initOnMounted?: boolean
+}
+
+/**
+ * Settings kept in local storage, one key per setting. Other stores over the same keys (e.g. a
+ * settings modal and the layout the settings apply to) follow each other's changes. Only values
+ * the user picked are stored, so a setting left alone follows its default if that changes.
+ */
+export function useLocalSettings(
+	definitions: readonly SettingDefinition[],
+	options: LocalSettingsOptions = {},
+): SettingsStore {
+	const values = new Map<string, Ref<unknown>>()
+	for (const definition of definitions) {
+		values.set(
+			definition.id,
+			useLocalStorage<unknown>(
+				definition.storageKey ?? `${options.prefix ?? ''}${definition.id}`,
+				definition.default,
+				{ initOnMounted: options.initOnMounted, writeDefaults: false },
+			),
+		)
+	}
+
+	return {
+		get<T>(definition: SettingDefinitionBase<T>): T {
+			const value = values.get(definition.id)?.value
+			return isValidSettingValue(definition, value) ? (value as T) : definition.default
+		},
+		set<T>(definition: SettingDefinitionBase<T>, value: T) {
+			const stored = values.get(definition.id)
+			if (!stored) return
+			const previous = stored.value as T | undefined
+			stored.value = value
+			definition.onChange?.(previous, value)
+		},
+	}
+}
+
+/**
+ * Settings kept in a reactive record of values by setting id, e.g. one loaded from and saved to a
+ * cookie by the host. `onWrite` runs after each change, to persist the record.
+ */
+export function recordSettings(
+	record: MaybeRefOrGetter<Record<string, unknown>>,
+	onWrite?: () => void,
+): SettingsStore {
+	return {
+		get<T>(definition: SettingDefinitionBase<T>): T {
+			const value = toValue(record)[definition.id]
+			return isValidSettingValue(definition, value as T) ? (value as T) : definition.default
+		},
+		set<T>(definition: SettingDefinitionBase<T>, value: T) {
+			const values = toValue(record)
+			const previous = values[definition.id] as T | undefined
+			values[definition.id] = value
+			definition.onChange?.(previous, value)
+			onWrite?.()
+		},
+	}
+}
+
+/** The settings of every group, e.g. to make a store holding all of them. */
+export function settingsOf(groups: readonly { settings: SettingDefinition[] }[]) {
+	return groups.flatMap((group) => group.settings)
+}
diff --git a/packages/ui/src/components/settings/types.ts b/packages/ui/src/components/settings/types.ts
new file mode 100644
index 0000000000..0cf59a66e3
--- /dev/null
+++ b/packages/ui/src/components/settings/types.ts
@@ -0,0 +1,125 @@
+import type { Component } from 'vue'
+
+import type { MessageDescriptor } from '../../composables/i18n'
+import type { SettingsStore } from './store'
+
+/** Text shown for a setting: a message to translate, or text that's already final. */
+export type SettingText = string | MessageDescriptor
+
+export interface SettingDefinitionBase<T> {
+	type: SettingDefinitionType
+	id: string
+	title: SettingText
+	description?: SettingText
+	default: T
+	/**
+	 * Where the value is kept by stores backed by local storage, in place of the store's prefix
+	 * and the id, e.g. to keep reading a value saved before the setting was defined.
+	 */
+	storageKey?: string
+	/** Declared as a method so settings with narrower values (e.g. an enum's) fit wider types. */
+	onChange?(previous: T | undefined, current: T): void
+}
+
+export interface ToggleSettingDefinition extends SettingDefinitionBase<boolean> {
+	type: 'toggle'
+}
+
+export interface EnumSettingEntry<T extends string = string> {
+	value: T
+	label: SettingText
+	icon?: Component
+}
+
+export interface EnumSettingDefinition<T extends string = string> extends SettingDefinitionBase<T> {
+	type: 'enum'
+	entries: readonly EnumSettingEntry<T>[]
+	/** `chips` lays a handful of short entries out side by side; `select` (the default) is a dropdown. */
+	display?: 'chips' | 'select'
+}
+
+export interface StringSettingDefinition extends SettingDefinitionBase<string> {
+	type: 'string'
+	regex?: RegExp
+	placeholder?: SettingText
+}
+
+/** A `#rrggbb` color, or an empty string for none. */
+export interface ColorSettingDefinition extends SettingDefinitionBase<string> {
+	type: 'color'
+}
+
+export interface NumberSettingDefinition extends SettingDefinitionBase<number> {
+	type: 'number'
+	min: number
+	max: number
+	step: number
+	unit?: string
+}
+
+export type SettingDefinition =
+	| ToggleSettingDefinition
+	| EnumSettingDefinition
+	| StringSettingDefinition
+	| ColorSettingDefinition
+	| NumberSettingDefinition
+
+export type SettingDefinitionType = SettingDefinition['type']
+
+/** Settings shown together under a heading. */
+export interface SettingGroup {
+	id: string
+	title: SettingText
+	description?: SettingText
+	settings: SettingDefinition[]
+	/** Where the group's settings are kept, when it isn't the panel's store. */
+	store?: SettingsStore
+}
+
+/** Builders that keep each kind of setting's value typed, e.g. an enum's to its entries. */
+export const defineSetting = {
+	toggle: (definition: Omit<ToggleSettingDefinition, 'type'>): ToggleSettingDefinition => ({
+		...definition,
+		type: 'toggle',
+	}),
+	enum: <const T extends string>(
+		definition: Omit<EnumSettingDefinition<T>, 'type'>,
+	): EnumSettingDefinition<T> => ({ ...definition, type: 'enum' }),
+	string: (definition: Omit<StringSettingDefinition, 'type'>): StringSettingDefinition => ({
+		...definition,
+		type: 'string',
+	}),
+	color: (definition: Omit<ColorSettingDefinition, 'type'>): ColorSettingDefinition => ({
+		...definition,
+		type: 'color',
+	}),
+	number: (definition: Omit<NumberSettingDefinition, 'type'>): NumberSettingDefinition => ({
+		...definition,
+		type: 'number',
+	}),
+}
+
+/** Whether a stored value is one the setting can take, e.g. still one of an enum's entries. */
+export function isValidSettingValue<T>(definition: SettingDefinitionBase<T>, value: T) {
+	if (value == null) return false
+	const typed = definition as SettingDefinition
+	switch (typed.type) {
+		case 'toggle':
+			return typeof value === 'boolean'
+		case 'enum':
+			return typed.entries.some((entry) => entry.value === value)
+		case 'string':
+			return typeof value === 'string' && (!typed.regex || typed.regex.test(value))
+		case 'color':
+			return typeof value === 'string' && (value === '' || /^#[0-9a-f]{6}$/i.test(value))
+		case 'number':
+			return (
+				typeof value === 'number' &&
+				Number.isFinite(value) &&
+				value >= typed.min &&
+				value <= typed.max
+			)
+		default:
+			return true
+	}
+}
diff --git a/packages/ui/src/composables/code-highlight-theme.ts b/packages/ui/src/composables/code-highlight-theme.ts
new file mode 100644
index 0000000000..b8d09462ed
--- /dev/null
+++ b/packages/ui/src/composables/code-highlight-theme.ts
@@ -0,0 +1,126 @@
+import { useLocalStorage } from '@vueuse/core'
+import {
+	effectScope,
+	hasInjectionContext,
+	inject,
+	type InjectionKey,
+	type Ref,
+	ref,
+	watch,
+} from 'vue'
+
+import { HIGHLIGHT_JS_THEMES } from '../utils/code-highlight-themes'
+
+/** Modrinth's own colours, which code is highlighted with until another theme is picked. */
+export const DEFAULT_CODE_THEME = 'modrinth'
+
+const STYLE_ID = 'code-highlight-theme'
+/** The stylesheet a server rendered page carries, replaced once the browser applies the theme. */
+export const SERVER_CODE_THEME_STYLE_ID = 'code-highlight-theme-ssr'
+
+/**
+ * Where the theme is kept, when the host keeps it somewhere of its own choosing, e.g. a cookie
+ * the server can read too, in place of local storage. Provided app-wide (`app.provide`).
+ */
+export const CODE_HIGHLIGHT_THEME_STORAGE: InjectionKey<Ref<string>> = Symbol.for(
+	'modrinth:codeHighlightThemeStorage',
+)
+
+/** The stylesheet of a highlight.js theme, or `null` for Modrinth's own (or an unknown one). */
+export async function loadCodeHighlightThemeCss(id: string): Promise<string | null> {
+	const entry = HIGHLIGHT_JS_THEMES.find((candidate) => candidate.id === id)
+	return entry ? entry.load().catch(() => null) : null
+}
+
+/** The theme's colours kept as `--code-{name}`, for code shown without highlight.js's class. */
+const CODE_COLORS = ['background', 'foreground']
+
+function isTransparent(color: string) {
+	return color === 'transparent' || /^rgba\(.*,\s*0\)$/.test(color)
+}
+
+function clearCodeColors(root: HTMLElement) {
+	for (const name of CODE_COLORS) {
+		root.style.removeProperty(`--code-${name}`)
+	}
+}
+
+/** Renders a hidden sample with the theme applied, and keeps the colours it gets. */
+function readCodeColors(root: HTMLElement) {
+	const sample = document.createElement('pre')
+	sample.className = 'hljs'
+	sample.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;left:-9999px'
+	document.body.appendChild(sample)
+
+	const style = getComputedStyle(sample)
+	if (!isTransparent(style.backgroundColor)) {
+		root.style.setProperty('--code-background', style.backgroundColor)
+	}
+	root.style.setProperty('--code-foreground', style.color)
+	sample.remove()
+}
+
+function createCodeHighlightTheme(theme: Ref<string>) {
+	let started = false
+
+	async function apply(id: string) {
+		const root = document.documentElement
+		if (!HIGHLIGHT_JS_THEMES.some((candidate) => candidate.id === id)) {
+			document.getElementById(STYLE_ID)?.remove()
+			document.getElementById(SERVER_CODE_THEME_STYLE_ID)?.remove()
+			delete root.dataset.codeTheme
+			clearCodeColors(root)
+			return
+		}
+
+		const css = await loadCodeHighlightThemeCss(id)
+		if (theme.value !== id) return
+		if (css == null) {
+			theme.value = DEFAULT_CODE_THEME
+			return
+		}
+
+		let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null
+		if (!style) {
+			style = document.createElement('style')
+			style.id = STYLE_ID
+			document.head.appendChild(style)
+		}
+		style.textContent = css
+		document.getElementById(SERVER_CODE_THEME_STYLE_ID)?.remove()
+		root.dataset.codeTheme = id
+		clearCodeColors(root)
+		readCodeColors(root)
+	}
+
+	/** Applies the theme now and whenever it changes. Only runs in the browser, once. */
+	function start() {
+		if (started || typeof document === 'undefined') return
+		started = true
+		watch(theme, (id) => void apply(id), { immediate: true })
+	}
+
+	return { theme, themes: HIGHLIGHT_JS_THEMES, start }
+}
+
+let browserState: ReturnType<typeof createCodeHighlightTheme> | undefined
+
+/**
+ * The theme code is highlighted with everywhere, kept per device (in local storage, unless the
+ * host provides `CODE_HIGHLIGHT_THEME_STORAGE`). Once started (by the app's root), a picked
+ * highlight.js theme is loaded and applied to every highlighted block and code editor; `modrinth`
+ * keeps the defaults. Shared by the whole
+ * page in the browser, while each server render gets its own, from its own request.
+ */
+export function useCodeHighlightTheme() {
+	const provided = hasInjectionContext() ? inject(CODE_HIGHLIGHT_THEME_STORAGE, null) : null
+	if (typeof window === 'undefined') {
+		return createCodeHighlightTheme(provided ?? ref(DEFAULT_CODE_THEME))
+	}
+	browserState ??= effectScope(true).run(() =>
+		createCodeHighlightTheme(
+			provided ?? useLocalStorage('code-highlight-theme', DEFAULT_CODE_THEME),
+		),
+	)!
+	return browserState
+}
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index 3d2426357d..29eec253bb 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -1,3 +1,4 @@
+export * from './code-highlight-theme'
 export * from './debug-logger'
 export * from './dynamic-font-size'
 export * from './file-drop'
diff --git a/packages/ui/src/helpers/toolbox/decompile/impl.ts b/packages/ui/src/helpers/toolbox/decompile/impl.ts
new file mode 100644
index 0000000000..fe55516234
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/decompile/impl.ts
@@ -0,0 +1,215 @@
+import {
+	type DecompileInput,
+	type Decompiler,
+	type DecompilerResult,
+	type DecompilerTypes,
+	DEFAULT_DECOMPILE_OPTIONS,
+} from '#ui/helpers/toolbox/decompile/index.ts'
+import type { FileTypeInfo } from '#ui/helpers/toolbox/file'
+import type { Logger } from '#ui/helpers/toolbox/misc/logging.ts'
+import type { ZipFileContent, ZipHandler } from '#ui/helpers/toolbox/zip'
+
+export class DecompilerResultImpl implements DecompilerResult {
+	wasDecompiled: boolean
+	error?: string | undefined
+	source?: string | undefined
+	fileType?: FileTypeInfo | undefined
+	asString: string
+
+	constructor(source?: string, fileType?: FileTypeInfo, error?: string) {
+		this.error = error
+		this.source = source
+		this.fileType = fileType
+		this.wasDecompiled = source != null
+		this.asString = this.source ?? this.error ?? 'UNKNOWN DUE TO AN ODD ERROR?'
+	}
+}
+
+type DecompileFunction = Decompiler['decompile']
+
+/**
+ * Loads a run-slicer decompiler's WASM build. Their own entry points take any defined `process`
+ * (which Nuxt shims, even in workers) to mean Node and then fail to locate the module, so it's
+ * fetched here and handed over as bytes instead. Its URL is imported only when a decompiler is
+ * first loaded (on the client), so the server build never deals with the module.
+ */
+async function loadWasmDecompiler(
+	runtime: () => Promise<RunSlicerWasmRuntime>,
+	wasmUrlModule: () => Promise<{ default: string }>,
+	options?: { noAutoImports?: boolean; takesArray?: boolean },
+): Promise<DecompileFunction> {
+	const [{ load }, bytes] = await Promise.all([
+		runtime(),
+		wasmUrlModule()
+			.then(({ default: wasmUrl }) => fetch(wasmUrl))
+			.then((response) => {
+				if (!response.ok) throw new Error(`Unable to fetch '${response.url}' (${response.status})`)
+				return response.arrayBuffer()
+			}),
+	])
+	const { exports } = await load(bytes, { noAutoImports: options?.noAutoImports })
+	return options?.takesArray
+		? (name, config) => exports.decompile([name], config)
+		: (name, config) => exports.decompile(name, config)
+}
+
+/** Falls back to the decompiler's JavaScript build when its WASM one can't be used. */
+async function withJsFallback(
+	logger: Logger,
+	type: DecompilerTypes,
+	wasm: () => Promise<DecompileFunction>,
+	js: () => Promise<DecompileFunction>,
+) {
+	try {
+		return await wasm()
+	} catch (err) {
+		logger.warn(
+			`Unable to load the WASM build of '${type}', falling back to its JavaScript build`,
+			{ err },
+		)
+		return js()
+	}
+}
+
+const DECOMPILER_LOADERS: Partial<
+	Record<DecompilerTypes, (logger: Logger) => Promise<DecompileFunction>>
+> = {
+	cfr: (logger) =>
+		withJsFallback(
+			logger,
+			'cfr',
+			() =>
+				loadWasmDecompiler(
+					() => import('@run-slicer/cfr/cfr.wasm-runtime.js'),
+					() => import('@run-slicer/cfr/cfr.wasm?url'),
+					{ takesArray: true },
+				),
+			async () => {
+				const { decompile } = await import('@run-slicer/cfr/cfr.runtime.js')
+				return (name, config) => decompile([name], config)
+			},
+		),
+	vineflower: (logger) =>
+		withJsFallback(
+			logger,
+			'vineflower',
+			() =>
+				loadWasmDecompiler(
+					() => import('@run-slicer/vf/vf.wasm-runtime.js'),
+					() => import('@run-slicer/vf/vf.wasm?url'),
+					{ takesArray: true },
+				),
+			async () => {
+				const { decompile } = await import('@run-slicer/vf/vf.runtime.js')
+				return (name, config) => decompile([name], config)
+			},
+		),
+	procyon: () =>
+		loadWasmDecompiler(
+			() => import('@run-slicer/procyon/procyon.wasm-runtime.js'),
+			() => import('@run-slicer/procyon/procyon.wasm?url'),
+			{ noAutoImports: true },
+		),
+}
+
+const loadedDecompilers = new Map<DecompilerTypes, Promise<DecompileFunction>>()
+
+function loadDecompiler(logger: Logger, type: DecompilerTypes) {
+	let loaded = loadedDecompilers.get(type)
+	if (loaded == null) {
+		const loader = DECOMPILER_LOADERS[type]
+		if (loader == null)
+			return Promise.reject(new Error(`The '${type}' decompiler is not available`))
+		loaded = loader(logger)
+		loaded.catch(() => loadedDecompilers.delete(type))
+		loadedDecompilers.set(type, loaded)
+	}
+	return loaded
+}
+
+/** The requested decompiler, or Vineflower when that one can't be loaded. */
+async function getDecompiler(logger: Logger, type: DecompilerTypes): Promise<Decompiler> {
+	try {
+		return { decompile: await loadDecompiler(logger, type) }
+	} catch (err) {
+		if (type === 'vineflower')
+			throw new Error(`Unable to get vineflower decompiler due to an error`, { cause: err })
+		logger.warn(
+			`Unable to get desired decompiler '${type}' due to an error, using vineflower instead`,
+			{ err },
+		)
+	}
+
+	try {
+		return { decompile: await loadDecompiler(logger, 'vineflower') }
+	} catch (err) {
+		throw new Error(`Unable to get vineflower decompiler due to an error`, { cause: err })
+	}
+}
+
+export async function decompileFileContent(
+	logger: Logger,
+	zipHandler: ZipHandler | undefined,
+	{ targetFile, resources, options }: DecompileInput,
+): Promise<DecompilerResult> {
+	let error: string | undefined = undefined
+	let source: string | undefined = undefined
+
+	if (options == null) options = DEFAULT_DECOMPILE_OPTIONS
+
+	const rootKey = (targetFile as Partial<ZipFileContent>).root ?? undefined
+
+	try {
+		// const pathParts = targetFile.fullPath.split('.jar'); \n const withoutClassSuffix = pathParts[pathParts.length - 1].slice(0, -6); \n
+		const pathParts = targetFile.fullPath.split('.jar')
+		const withoutClassSuffix = pathParts[pathParts.length - 1].slice(0, -6)
+		const unnormalizedPath = withoutClassSuffix.slice(1)
+
+		const buffer = targetFile.content
+		const decompiled = await (
+			await getDecompiler(logger, options.decompiler!)
+		).decompile(unnormalizedPath, {
+			source: async (name) => {
+				if (name === unnormalizedPath) {
+					return new Uint8Array(buffer)
+				} else if (rootKey != null && zipHandler != null && name.includes(unnormalizedPath)) {
+					// TODO: THIS DOES NOT PROPERLY HANDLE WHICH JAR WE NEED TO LOOK AT SO IF DUPLICATE FILES EXIST, WE MAY GET THE WRONG ONE!!!!
+					try {
+						const buffer = await zipHandler.findNodeData({
+							path: '/' + name + '.class',
+							root: rootKey,
+							relative: true,
+						})
+						if (buffer) return new Uint8Array(buffer)
+					} catch (err) {
+						logger.warn(`Unable to read '${name}' for decompiling '${targetFile.fullPath}'`, {
+							err,
+						})
+					}
+				}
+
+				return null
+			},
+			resources: [...(resources?.map((details) => details.fullPath.slice(0, -6)) ?? [])],
+			options: options.options,
+		})
+
+		if (typeof decompiled === 'string') {
+			source = decompiled ?? undefined
+		} else if (!decompiled[unnormalizedPath]) {
+			console.error('Decompilation failed for: ', targetFile.fullPath, unnormalizedPath, decompiled)
+			error = '// [Decompilation output either is kotlin or their is issues just a fyi!] \n\n'
+
+			// for (const [key, value] of Object.entries(decompiled)) { \n error = `${error} \n\n Class: ${key} \n\n ${value}` \n } \n
+			for (const [key, value] of Object.entries(decompiled)) {
+				error = `${error} \n\n Class: ${key} \n\n ${value}`
+			}
+		} else {
+			source = decompiled[unnormalizedPath] ?? undefined
+		}
+	} catch (err) {
+		error = `[${(err as Error | undefined)?.message ?? 'Decompilation has due to an unknown error being thrown!'}]`
+	}
+
+	return new DecompilerResultImpl(source, { mime: 'text/x-java-source', extension: 'java' }, error)
+}
diff --git a/packages/ui/src/helpers/toolbox/decompile/index.ts b/packages/ui/src/helpers/toolbox/decompile/index.ts
new file mode 100644
index 0000000000..df3841c45a
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/decompile/index.ts
@@ -0,0 +1,65 @@
+import type { FileContent, FileDetails, FileTypeInfo } from '#ui/helpers/toolbox/file'
+import type { MessageTypes } from '#ui/helpers/toolbox/messenger'
+
+export const ALL_DECOMPILER_TYPES = ['cfr', 'vineflower', 'procyon', 'krakatau'] as const
+
+export type DecompilerTypes = (typeof ALL_DECOMPILER_TYPES)[number]
+
+/**
+ * The decompilers the toolbox can load. Krakatau isn't bundled yet, so asking for it falls back to
+ * Vineflower; it isn't offered until it is.
+ */
+export const AVAILABLE_DECOMPILER_TYPES = [
+	'vineflower',
+	'cfr',
+	'procyon',
+] as const satisfies readonly DecompilerTypes[]
+
+export interface DecompileInput {
+	targetFile: FileContent
+	transferBuffer?: boolean
+	resources?: FileDetails[]
+	options?: DecompileOptions
+}
+
+export interface DecompileOptions {
+	decompiler?: DecompilerTypes
+	options?: Record<string, string>
+}
+
+export const DEFAULT_DECOMPILE_OPTIONS = {
+	decompiler: 'vineflower',
+	options: {
+		'remove-synthetic': '0',
+		'remove-bridge': '0',
+		'kt-enable': '0', // TODO: MAYBE ADJUST STUFF IDK
+	},
+} as const
+
+export type DecompilerMessages = MessageTypes<{
+	main: { serverbound: DecompileInput; clientbound: DecompilerResult }
+}>
+
+export type DecompileHandler = {
+	decompile(input: DecompileInput): Promise<DecompilerResult>
+}
+
+export interface DecompilerResult {
+	wasDecompiled: boolean
+	error?: string
+	source?: string
+	fileType?: FileTypeInfo
+	asString: string
+}
+
+export interface Decompiler {
+	// TODO: SOME DECOMPILERS DO NOT TAKE IN AN ARRAY AT ALL
+	decompile(
+		names: string /* | string[]*/,
+		config?: {
+			source?: (name: string) => Promise<Uint8Array | null>
+			options?: Record<string, string>
+			resources?: string[]
+		},
+	): Promise<string | Record<string, string>>
+}
diff --git a/packages/ui/src/helpers/toolbox/decompile/run-slicer.d.ts b/packages/ui/src/helpers/toolbox/decompile/run-slicer.d.ts
new file mode 100644
index 0000000000..0774c963b9
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/decompile/run-slicer.d.ts
@@ -0,0 +1,37 @@
+/**
+ * The WASM runtimes of the run-slicer decompilers, which ship without types. `load` takes the
+ * module's URL or its bytes.
+ */
+interface RunSlicerWasmRuntime {
+	load(
+		module: string | BufferSource,
+		options?: { noAutoImports?: boolean },
+	): Promise<{
+		exports: {
+			decompile: (
+				names: string | string[],
+				config?: object,
+			) => Promise<string | Record<string, string>>
+		}
+	}>
+}
+
+declare module '@run-slicer/cfr/cfr.wasm-runtime.js' {
+	export const load: RunSlicerWasmRuntime['load']
+}
+
+declare module '@run-slicer/vf/vf.wasm-runtime.js' {
+	export const load: RunSlicerWasmRuntime['load']
+}
+
+declare module '@run-slicer/procyon/procyon.wasm-runtime.js' {
+	export const load: RunSlicerWasmRuntime['load']
+}
+
+declare module '@run-slicer/cfr/cfr.runtime.js' {
+	export const decompile: (names: string[], config?: object) => Promise<Record<string, string>>
+}
+
+declare module '@run-slicer/vf/vf.runtime.js' {
+	export const decompile: (names: string[], config?: object) => Promise<Record<string, string>>
+}
diff --git a/packages/ui/src/helpers/toolbox/file/index.ts b/packages/ui/src/helpers/toolbox/file/index.ts
new file mode 100644
index 0000000000..af8c0eb613
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/file/index.ts
@@ -0,0 +1,368 @@
+import { fileTypeFromBuffer } from 'file-type'
+import yaml from 'js-yaml'
+import mime from 'mime'
+import * as toml from 'smol-toml'
+
+export interface FileDetails {
+	fullPath: string
+	name: string
+	url?: string
+}
+
+export interface URLFileDetails extends FileDetails {
+	url: string
+}
+
+export interface FileContent extends FileDetails {
+	content: ArrayBuffer
+}
+
+export interface HashedFileContent extends FileContent {
+	sha512: string
+}
+
+export interface FileContentPromise extends FileDetails {
+	content(): Promise<ArrayBuffer>
+}
+
+export async function resolveContent<T extends FileContentPromise>(
+	content: T,
+): Promise<FileContent & Omit<T, keyof FileContentPromise>> {
+	return {
+		...content,
+		fullPath: content.fullPath,
+		name: content.name,
+		content: await content.content(),
+		url: content.url,
+	}
+}
+
+export function fileFrom<
+	T extends ArrayBuffer | (() => Promise<ArrayBuffer>),
+	P extends { fullPath?: string; name: string; content: T; url?: string },
+>(
+	params: Partial<P> & { fullPath?: string; name: string; content: T; url?: string },
+): T extends Promise<ArrayBuffer> ? FileContentPromise & P : FileContent & P {
+	return {
+		...params,
+		fullPath: params.fullPath ?? params.name,
+		name: params.name,
+		content: typeof params.content === 'function' ? params.content : params.content,
+	} as unknown as T extends Promise<ArrayBuffer> ? FileContentPromise & P : FileContent & P
+}
+
+export function prettyifyJson(data: string, indentSize?: number) {
+	return JSON.stringify(JSON.parse(data), null, indentSize ?? 2)
+}
+
+export interface FileTypeInfo {
+	mime: string
+	extension?: string
+	method?: 'content-analysis' | 'extension-lookup'
+}
+
+export type AsyncMaybe<T, R, D = undefined> = T extends D ? R : Promise<R>
+
+export function getFileTypeInfo<T extends ArrayBuffer | Blob | undefined = undefined>(
+	path: string,
+	data?: T,
+): AsyncMaybe<T, FileTypeInfo | null> {
+	const promiseLike = data ? getFileTypeFromData(data) : undefined
+
+	return (
+		promiseLike != null
+			? promiseLike.then((result) => result ?? getFileTypeFromExt(path))
+			: getFileTypeFromExt(path)
+	) as AsyncMaybe<T, FileTypeInfo | null>
+}
+
+function getFileTypeFromExt(path: string): FileTypeInfo | null {
+	const typeFromPath = mime.getType(path)
+
+	if (typeFromPath != null) {
+		return {
+			mime: typeFromPath,
+			extension: path.split('.').pop()?.split(/[#?]/)[0],
+			method: 'extension-lookup',
+		}
+	}
+
+	return null
+}
+
+async function getFileTypeFromData(data: ArrayBuffer | Blob): Promise<FileTypeInfo | null> {
+	const buffer = (data as Partial<Blob>).arrayBuffer
+		? await (data as Blob).arrayBuffer()
+		: (data as ArrayBuffer)
+
+	if (buffer != null) {
+		const typeFromContent = await fileTypeFromBuffer(buffer.slice(0, 4100))
+
+		if (typeFromContent != null) {
+			return {
+				mime: typeFromContent.mime,
+				extension: typeFromContent.ext,
+				method: 'content-analysis',
+			}
+		}
+	}
+	return null
+}
+
+export async function hashString(str: string, algorithm: AlgorithmIdentifier = 'SHA-512') {
+	return hashBuffer(new TextEncoder().encode(str).buffer, algorithm)
+}
+
+export async function hashBlob(blob: Blob, algorithm: AlgorithmIdentifier = 'SHA-512') {
+	return hashBuffer(await blob.arrayBuffer(), algorithm)
+}
+
+export async function hashArrays(
+	bytes: Uint8Array[],
+	errorNameGetter?: () => string,
+): Promise<string | null> {
+	try {
+		// Concatenate all byte arrays into a single Buffer/Uint8Array
+		const totalLength = bytes.reduce((acc, curr) => acc + curr.length, 0)
+		const combinedBytes = new Uint8Array(totalLength)
+
+		let offset = 0
+		for (const buffer of bytes) {
+			combinedBytes.set(buffer, offset)
+			offset += bytes.length
+		}
+
+		// Digest via Web Crypto API (returns ArrayBuffer)
+		return await hashBuffer(combinedBytes.buffer, 'SHA-512')
+	} catch (e) {
+		console.warn(
+			`Unable to hash the following '${errorNameGetter?.() ?? 'UNKNOWN'}' due the following exception: `,
+			e,
+		)
+		return null
+	}
+}
+
+export async function hashBuffer(data: ArrayBuffer, algorithm: AlgorithmIdentifier = 'SHA-512') {
+	const hashBuffer = await crypto.subtle.digest(algorithm, data)
+
+	return Array.from(new Uint8Array(hashBuffer))
+		.map((b) => b.toString(16).padStart(2, '0'))
+		.join('')
+}
+
+/** Whitespace bytes (tab, line feed, carriage return and space), which fingerprints skip. */
+const FINGERPRINT_IGNORED_BYTES = new Set([9, 10, 13, 32])
+
+/**
+ * MurmurHash2 (32 bit, seed 1) of its bytes with whitespace left out, which identifies files across its platform.
+ * Returned as the unsigned number it uses. Useful for Flame Anvil Lookup info.
+ */
+export function murmurHashV2(data: ArrayBuffer): number {
+	const source = new Uint8Array(data)
+	const bytes = new Uint8Array(source.length)
+	let length = 0
+	for (const byte of source) {
+		if (!FINGERPRINT_IGNORED_BYTES.has(byte)) bytes[length++] = byte
+	}
+
+	const m = 0x5bd1e995
+	let hash = (1 ^ length) >>> 0
+	let index = 0
+	let remaining = length
+	while (remaining >= 4) {
+		let k =
+			bytes[index] | (bytes[index + 1] << 8) | (bytes[index + 2] << 16) | (bytes[index + 3] << 24)
+		k = Math.imul(k, m)
+		k ^= k >>> 24
+		k = Math.imul(k, m)
+		hash = Math.imul(hash, m) ^ k
+		index += 4
+		remaining -= 4
+	}
+	if (remaining === 3) hash ^= bytes[index + 2] << 16
+	if (remaining >= 2) hash ^= bytes[index + 1] << 8
+	if (remaining >= 1) {
+		hash ^= bytes[index]
+		hash = Math.imul(hash, m)
+	}
+	hash ^= hash >>> 13
+	hash = Math.imul(hash, m)
+	hash ^= hash >>> 15
+	return hash >>> 0
+}
+
+const MIME_TO_LANGUAGE: Record<string, string> = {
+	// JavaScript & TypeScript
+	'text/javascript': 'javascript',
+	'application/javascript': 'javascript',
+	'text/typescript': 'typescript',
+	'application/typescript': 'typescript',
+	'text/jsx': 'javascript',
+	'text/tsx': 'typescript',
+
+	// Web Formats
+	'text/html': 'xml',
+	'text/css': 'css',
+	'application/json': 'json',
+	'text/xml': 'xml',
+	'application/xml': 'xml',
+
+	// Scripting & Languages
+	'text/x-python': 'python',
+	'text/x-script.python': 'python',
+	'text/x-sh': 'bash',
+	'application/x-sh': 'bash',
+	'text/x-c': 'c',
+	'text/x-c++': 'cpp',
+	'text/x-java-source': 'java',
+	'text/x-rust': 'rust',
+	'text/x-go': 'go',
+	'text/x-kotlin': 'kotlin',
+	'text/markdown': 'markdown',
+	'text/x-yaml': 'yaml',
+	'application/x-yaml': 'yaml',
+
+	// Shell & Batch
+	'application/x-bat': 'dos',
+	'application/bat': 'dos',
+	'text/x-bat': 'dos',
+	'text/x-shellscript': 'bash',
+
+	// Configs & Markup
+	'application/toml': 'toml',
+	'text/x-ini': 'ini',
+	'text/x-properties': 'properties',
+}
+
+const EXTENSION_OVERRIDES: Record<string, string> = {
+	// Minecraft Modding Specifics
+	mcfunction: 'mcfunction', // Uses custom grammar if registered, otherwise falls to fallback
+	mcmeta: 'json',
+	bbmodel: 'json', // Blockbench 3D model files are JSON inside
+	accesswidener: 'properties',
+	accesstransformer: 'properties',
+	lang: 'properties', // Legacy translation files
+	nbt: 'plaintext', // Binary format
+
+	// Build & Config Scripts
+	gradle: 'gradle',
+	kts: 'kotlin',
+	bat: 'dos',
+	cmd: 'dos',
+	sh: 'bash',
+	toml: 'toml',
+	cfg: 'ini',
+	conf: 'ini',
+	properties: 'properties',
+	env: 'ini',
+	log: 'plaintext',
+
+	// Special files without extensions (e.g. "gradlew", "Dockerfile")
+	gradlew: 'bash',
+	dockerfile: 'dockerfile',
+	gitignore: 'plaintext',
+}
+
+export function getLanguageFromFile(
+	fileName: string,
+	info?: FileTypeInfo | null,
+): string | undefined {
+	if (info != null) {
+		const lang =
+			MIME_TO_LANGUAGE[info.mime] ??
+			(info.extension ? EXTENSION_OVERRIDES[info.extension] : undefined)
+		if (lang != null) return lang
+	}
+	if (fileName == 'MANIFEST.MF') return 'properties'
+	if (fileName.toLowerCase().includes('license')) return 'plaintext'
+	return undefined
+}
+
+const javaManifestParser = {
+	parse(text: string) {
+		const manifest = {} as Record<string, string>
+		let currentKey: string | null = null
+
+		for (const line of text.replace(/\r\n/g, '\n').split('\n')) {
+			if (line.startsWith(' ') && currentKey) {
+				// Continuation line (Java Manifests wrap at 72 chars)
+				manifest[currentKey] += line.substring(1)
+			} else if (line.includes(':')) {
+				const [key, ...valueParts] = line.split(':')
+				currentKey = key.trim()
+				manifest[currentKey] = valueParts.join(':').trim()
+			}
+		}
+		return manifest
+	},
+}
+
+/** The toolbox, when one is set up in this page or worker, which reports what parsers couldn't read. */
+type ToolboxGlobal = typeof globalThis & {
+	toolbox?: { app?: { error: (source: string, message: string, extra: { err: Error }) => void } }
+}
+
+export function parseInfoFile(fileName: string, ext: string, text: string) {
+	try {
+		if (ext === 'json' || ext === 'mcmeta' || fileName === 'mcmod.info') {
+			return JSON.parse(text)
+		} else if (ext === 'yaml' || ext === 'yml') {
+			return yaml.load(text)
+		} else if (ext === 'toml') {
+			return toml.parse(text)
+		} else if (fileName.toUpperCase().endsWith('MANIFEST.MF')) {
+			return javaManifestParser.parse(text)
+		} else {
+			throw new Error(`Unrecognized file type: ${fileName}`)
+		}
+	} catch (e) {
+		const error = e as Error
+		;(globalThis as ToolboxGlobal).toolbox?.app?.error(
+			'Metadata File Parser',
+			`Error processing ${fileName}: ${error.message}`,
+			{ err: error },
+		)
+	}
+
+	return null
+}
+
+/**
+ * The hashes files can be identified by: the SHA family browsers compute natively (Modrinth uses
+ * SHA-1 and SHA-512), CurseForge's Murmur2 fingerprint, and the CRC-32 zip archives store.
+ */
+export const HASH_TYPES = ['sha1', 'sha256', 'sha384', 'sha512', 'murmur2', 'crc32'] as const
+
+export type HashType = (typeof HASH_TYPES)[number]
+
+/** Hashes of a file known so far, by type. */
+export type ContentHashes = Partial<Record<HashType, string>>
+
+const SUBTLE_ALGORITHMS = {
+	sha1: 'SHA-1',
+	sha256: 'SHA-256',
+	sha384: 'SHA-384',
+	sha512: 'SHA-512',
+} as const satisfies Partial<Record<HashType, AlgorithmIdentifier>>
+
+let crc32Table: Uint32Array | undefined
+
+/** CRC-32 (as zip archives use it), as eight hex digits. */
+export function crc32(data: ArrayBuffer): string {
+	crc32Table ??= Uint32Array.from({ length: 256 }, (_, index) => {
+		let value = index
+		for (let bit = 0; bit < 8; bit++) value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1
+		return value >>> 0
+	})
+	let crc = 0xffffffff
+	for (const byte of new Uint8Array(data)) crc = crc32Table[(crc ^ byte) & 0xff] ^ (crc >>> 8)
+	return ((crc ^ 0xffffffff) >>> 0).toString(16).padStart(8, '0')
+}
+
+/** The given hash of the data: hex for the SHAs and CRC-32, decimal for Murmur2. */
+export async function computeHash(data: ArrayBuffer, type: HashType): Promise<string> {
+	if (type === 'murmur2') return String(murmurHashV2(data))
+	if (type === 'crc32') return crc32(data)
+	return hashBuffer(data, SUBTLE_ALGORITHMS[type])
+}
diff --git a/packages/ui/src/helpers/toolbox/messenger/implement.ts b/packages/ui/src/helpers/toolbox/messenger/implement.ts
new file mode 100644
index 0000000000..f8373cc319
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/messenger/implement.ts
@@ -0,0 +1,929 @@
+import { type EventSource, EventStream } from '#ui/helpers/toolbox/misc'
+import {
+	type CounterCallbackData,
+	logFactory,
+	type Logger,
+	type LoggerCallbackData,
+	type LoggerFactory,
+} from '#ui/helpers/toolbox/misc/logging'
+
+import {
+	type Channel,
+	type ClientboundMessage,
+	type ClientMessenger,
+	type InstanceConfig,
+	type InstanceKey,
+	isWorker,
+	type MaybeTransferable,
+	type MessageTypes,
+	type Messenger,
+	type MessengerOptions,
+	type MessengerRegistry,
+	type MessengerType,
+	type MessengerVariants,
+	type ServerboundChannels,
+	type ServerboundMessage,
+	type ServerHandlerResolver,
+	type ServerMessageHandler,
+	type ServerMessenger,
+	type TypeId,
+} from '.'
+
+// #region MessengerType Types
+
+type ChannelHolder = Worker | MessagePort
+
+type InternalMessenger<
+	T extends MessageTypes | undefined = undefined,
+	C extends ChannelHolder = ChannelHolder,
+> = Messenger<T> & C & { terminate(): void; onTerminate: EventSource<OnTerminateCallback> }
+
+interface MessengerTypeImpl<
+	T extends MessageTypes | undefined = undefined,
+> extends MessengerType<T> {
+	registry: MessengerRegistryImpl
+
+	instances?: (() => InternalMessenger<T>) | Map<InstanceKey, InternalMessenger<T>>
+	wrapWith: (channelHolder: () => ChannelHolder, key: InstanceKey) => InternalMessenger<T>
+
+	getOrCreateWith: (
+		baseMessenger?: () => ChannelHolder,
+		instanceKey?: string,
+	) => Messenger<T> & ChannelHolder
+	workerFactory?: () => Worker
+
+	getInstances: () => Messenger<T>[]
+}
+
+function typeFor<T extends MessageTypes>(
+	id: string,
+	instanceConfig: InstanceConfig,
+	closeCallback?: (messenger: Messenger<T>) => void,
+) {
+	return {
+		id: id,
+		instances: instanceConfig.count == 1 ? undefined : new Map(),
+		getInstances() {
+			if (this.instances == null) return []
+			return (this.instances as Partial<Map<string, Messenger<T>>>).values
+				? (this.instances as Map<string, Messenger<T>>).values().toArray()
+				: [this.instances as unknown as Messenger<T>]
+		},
+		getOrCreateWith(holder, instanceKey) {
+			if (instanceConfig.count == 1 && this.instances != null) {
+				return (this.instances as () => Messenger<T>)()
+			}
+
+			if (holder == null) holder = this.workerFactory
+
+			if (instanceKey) {
+				if (holder == null)
+					throw new Error(
+						`Unable to create messenger for '${this.id}' as the entry used was found to be null! Did you setup the main thread worker factory or pass in the port to the call!`,
+					)
+
+				return this.wrapWith(holder, instanceKey)
+			}
+
+			if (holder == null)
+				throw new Error(
+					`Unable to create messenger for '${this.id}' as the entry used was found to be null! Did you setup the main thread worker factory or pass in the port to the call!`,
+				)
+
+			let wrappedMessenger: InternalMessenger<T>
+
+			if (instanceConfig.count == 1) {
+				wrappedMessenger = this.wrapWith(holder, 'primary')
+
+				wrappedMessenger.onTerminate.subscribe((forceClose) => {
+					if (forceClose || instanceConfig.timeout != null) this.instances = undefined
+				})
+
+				this.instances = () => wrappedMessenger
+			} else {
+				const instances = this.instances as Map<InstanceKey, InternalMessenger<T>>
+
+				// TODO: ADD TIME BASED HASH?
+				const key = `temp-${instances.size}`
+
+				wrappedMessenger = this.wrapWith(holder, key)
+				;(this.instances as Map<InstanceKey, Messenger<T>>).set(
+					wrappedMessenger.key!,
+					wrappedMessenger,
+				)
+			}
+
+			wrappedMessenger.postMessage?.({
+				channel: 'set-key',
+				key: wrappedMessenger.key,
+			} as SetOffThreadKeyMessage)
+
+			return wrappedMessenger
+		},
+		close(forceClosed) {
+			if (instanceConfig.count == 1) {
+				if (this.instances != undefined) {
+					const instance = (this.instances as () => InternalMessenger<T>)()
+					closeCallback?.(instance)
+					instance.postMessage({
+						channel: 'force-close-root',
+						forceClose: forceClosed,
+					} as ForceCloseMessengerRootMessage)
+				}
+			} else {
+				const map = this.instances as Map<InstanceKey, InternalMessenger<T>>
+				map.values().forEach((entry) => {
+					closeCallback?.(entry)
+					entry.postMessage({
+						channel: 'force-close-root',
+						forceClose: forceClosed,
+					} as ForceCloseMessengerRootMessage)
+				})
+				map.clear()
+			}
+		},
+		/* wrapWith: wrapWith, */
+	} as MessengerTypeImpl<T>
+}
+
+// ---
+
+interface MessengerRegistryImpl extends MessengerRegistry {
+	serverMessenger?: ServerHandlerImpl<never>
+	types: Map<string, MessengerType<MessageTypes, unknown>>
+	logger: LoggerFactory
+	onLogFactoryChange: EventSource<(logger: LoggerFactory) => void>
+}
+
+export function createRegistryInternal(): MessengerRegistry {
+	return {
+		types: new Map(),
+		logger: logFactory(),
+		of: function <T extends MessageTypes, H>(
+			id: string,
+			extra: MessengerOptions<T, H> & InstanceConfig,
+		): MessengerType<T, H> {
+			const instanceConfig: InstanceConfig = {
+				timeout: extra?.timeout ?? undefined,
+				shared: extra?.shared ?? true,
+				count: extra.count ?? 1,
+			}
+			const type = typeFor<T>(id, instanceConfig)
+
+			type.wrapWith = (holder, key) =>
+				setupAsClient(
+					type,
+					'client',
+					key,
+					extra.bypassServerMessageHandler != null ? ({} as ChannelHolder) : holder(),
+					extra,
+				)
+
+			type.registry = this
+			type.instanceConfig = instanceConfig
+
+			this.types.set(id, type)
+
+			return type
+		},
+		getType: function <T extends MessageTypes, H>(id: string): MessengerType<T, H> | undefined {
+			if (!this.types.has(id)) throw new Error(`MessengerRegistry did not contain entry '${id}'`)
+			return this.types.get(id)!
+		},
+		setLogFactory(logger: LoggerFactory): void {
+			this.logger = logger
+		},
+		getLogFactory(): LoggerFactory {
+			return this.logger
+		},
+		closeAll(forceClosed): void {
+			this.types.values().forEach(async (type) => {
+				type.close(forceClosed)
+			})
+		},
+		getMessenger<T extends MessageTypes, H>(type: MessengerType<T, H>) {
+			if (this.serverMessenger) {
+				return this.serverMessenger.getMessenger(type)
+			} else {
+				return (type as MessengerTypeImpl<T>).getOrCreateWith()
+			}
+		},
+		getActiveMessengers() {
+			return this.types
+				.values()
+				.flatMap((type) => (type as MessengerTypeImpl).getInstances())
+				.toArray()
+		},
+		setWorkerFactoryFor(type, worker) {
+			if (!isWorker()) (type as MessengerTypeImpl).workerFactory = worker
+		},
+	} as MessengerRegistryImpl
+}
+
+// ---
+
+type OnTerminateCallback = (forceClose: boolean) => void
+
+interface RootMessageHandler<MSG extends Channel<string> = Channel<string>> extends Messenger {
+	handleRootMessage(msg: MSG, ports?: readonly MessagePort[]): Promise<boolean>
+}
+
+type TaskHolder = {
+	hasTask: (transactionKey: string) => boolean
+	startTask: <T = unknown>() => { transactionKey: string; promise: Promise<T> }
+	endTask: (transactionKey: string, value: unknown, isError?: boolean) => boolean
+}
+
+function createTaskHolder(): TaskHolder {
+	const outstandingMessages: Map<string, PromiseWithResolvers<unknown>> = new Map()
+	let index = 0
+	return {
+		hasTask: (key) => outstandingMessages.has(key),
+		startTask: <T>() => {
+			const key = `${index++}`
+
+			const promiseHolder = Promise.withResolvers<T>()
+
+			outstandingMessages.set(key, promiseHolder as PromiseWithResolvers<unknown>)
+
+			return { transactionKey: key, promise: promiseHolder.promise }
+		},
+		endTask: (key, value, isError) => {
+			const promise = outstandingMessages.get(key)
+			if (promise == null) {
+				return false
+			}
+
+			outstandingMessages.delete(key)
+
+			if (isError) {
+				promise.reject(value)
+			} else {
+				promise.resolve(value)
+			}
+
+			return true
+		},
+	}
+}
+
+interface ClientHandlerImpl<T extends MessageTypes, H = unknown>
+	extends RootMessageHandler<ClientboundMessengerChannels>, ClientMessenger<T, H> {
+	taskHolder: TaskHolder
+}
+
+const FORCED_OUTPUT_KEY = 'INTERNAL_FORCED_OUTPUT'
+
+function clientMessageHandler<T extends MessageTypes, H, C extends ChannelHolder>(
+	messenger: InternalMessenger,
+	options: MessengerOptions<T, H>,
+): ClientHandlerImpl<T, H> & InternalMessenger<T, C> & (H extends object ? H : unknown) {
+	const taskHolder = createTaskHolder()
+
+	async function handleInput<K extends ServerboundChannels<T>, M extends ServerboundMessage<T, K>>(
+		msg: M,
+	) {
+		if (options.bypassServerMessageHandler != null) {
+			const output = await options.bypassServerMessageHandler!<K, M>(
+				fullHandler as Messenger<T> as ServerMessenger<T>,
+				msg,
+				serverHandlerResolver<T>(),
+			)
+			messenger.terminate()
+			messenger.isAlive = false
+			messenger.onTerminate.stream.sink(true)
+			return Array.isArray(output) ? output[0] : output
+		} else {
+			const task =
+				taskHolder.startTask<
+					ClientboundMessage<T, K> extends never ? void : ClientboundMessage<T, K>
+				>()
+			const wrappedMsg: MessengerServerboundMessage<M> = {
+				channel: 'input',
+				data: msg,
+				key: task.transactionKey,
+			}
+			fullHandler.postMessage(
+				wrappedMsg,
+				options.serverMessageTransferHandler?.<K, M>(
+					msg,
+					(msg, resolvers) => resolvers[msg.channel]?.(msg) ?? [],
+				) ?? [],
+			)
+
+			return await task.promise
+		}
+	}
+
+	const fullHandler = Object.assign(messenger, {
+		taskHolder: taskHolder,
+		async handleRootMessage(msg: ClientboundMessengerChannels) {
+			if (msg.channel == 'operation-error' || msg.channel == 'output') {
+				handleOutputMessages(
+					this,
+					msg,
+					messenger.logger,
+					taskHolder,
+					options.independentClientMessageHandler,
+				)
+			} else if (messenger.variant == 'client') {
+				if (msg.channel == 'logging') {
+					// MAIN THREAD ONLY
+					const factory = messenger.logger.factory
+					if (msg.logMsg.type == 'callback') {
+						factory.log(...msg.logMsg.data)
+					} else if (msg.logMsg.type == 'counter') {
+						factory.counter(...msg.logMsg.data)
+					} else {
+						throw new Error(
+							`Unknown type for logging '${(msg.logMsg as Partial<{ type: string }>).type}'!`,
+						)
+					}
+				} else if (msg.channel == 'setup-root') {
+					// MAIN THREAD ONLY
+					const registry = messenger.type.registry
+					const newMessenger = (await registry.getMessenger<MessageTypes, C>(
+						registry.getType(msg.id)!,
+					)) as InternalMessenger<MessageTypes, C> & ClientMessenger<MessageTypes, unknown>
+
+					const channel = new MessageChannel()
+
+					messenger.postMessage(
+						{
+							channel: 'setup-port',
+							id: newMessenger.type.id,
+							key: newMessenger.key,
+							transactionKey: msg.transactionKey,
+						} as SetupMessengerPortMessage,
+						[channel.port1],
+					)
+					newMessenger.postMessage(
+						{
+							channel: 'setup-port',
+							id: messenger.type.id,
+							key: messenger.key,
+							transactionKey: msg.transactionKey,
+						} as SetupMessengerPortMessage,
+						[channel.port2],
+					)
+				} else if (msg.channel == 'close-root') {
+					messenger.terminate()
+					messenger.isAlive = false
+					messenger.onTerminate.stream.sink(true)
+				} else {
+					return false
+				}
+			} else {
+				return false
+			}
+
+			return true
+		},
+		sendMessage: handleInput,
+	} as ClientHandlerImpl<T, H> & InternalMessenger<T, C> & (H extends object ? H : unknown))
+
+	fullHandler.handler = options.handlerConstructor(fullHandler)
+
+	if (typeof fullHandler.handler == 'object') Object.assign(fullHandler, fullHandler.handler)
+
+	return fullHandler
+}
+
+function handleOutputMessages<T extends MessageTypes, H>(
+	messenger: ClientHandlerImpl<T, H>,
+	msg: MessengerOperationError | MessengerOutputMessage,
+	logger: Logger,
+	taskHolder: TaskHolder,
+	forcedOutputHandler?: (messenger: ClientHandlerImpl<T, H>, msg: ClientboundMessage<T>) => boolean,
+) {
+	if (msg.channel == 'operation-error') {
+		if (taskHolder.hasTask(msg.key)) {
+			logger.error('An error occurred when attempting to complete a task!', {
+				err: msg.error,
+				obj: msg.info,
+			})
+		} else {
+			logger.error('An error occurred when attempting to task no longer present!', {
+				err: msg.error,
+				obj: msg.info,
+			})
+		}
+
+		taskHolder.endTask(msg.key, msg.error, true)
+	} else {
+		// MAIN THREAD OR PORT
+		if (msg.key == FORCED_OUTPUT_KEY) {
+			if (
+				forcedOutputHandler == null ||
+				!forcedOutputHandler(messenger, msg.data as ClientboundMessage<T>)
+			) {
+				logger.error(
+					'Unable to Complete a forced output for given data as its not supported for this messenger!',
+					{ obj: msg },
+				)
+			}
+
+			return
+		}
+
+		if (taskHolder.hasTask(msg.key)) {
+			logger.debug('Completed a task for given data!', { obj: msg })
+		} else {
+			logger.error('Unable to Complete a task for given data as its not here anymore!!', {
+				obj: msg,
+			})
+		}
+
+		taskHolder.endTask(msg.key, msg.data, false)
+	}
+}
+
+interface ServerHandlerImpl<T extends MessageTypes>
+	extends RootMessageHandler<ServerboundMessengerChannels>, ServerMessenger<T>, Messenger {
+	handleServerInput<K extends ServerboundChannels<T>, M extends ServerboundMessage<T, K>>(
+		sender: InternalMessenger,
+		msg: MessengerServerboundMessage<M>,
+	): Promise<void>
+	attemptTimeoutWait(): void
+	startShutDown(): void
+	setupPort(id: TypeId, transactionKey: string, key: InstanceKey, port: MessagePort): void
+	closePort(fullPortKey: string): void
+}
+
+/** What the server handler adds to the messenger it's set up on, which provides the rest. */
+type ServerHandlerMethods =
+	| 'handleRootMessage'
+	| 'handleServerInput'
+	| 'attemptTimeoutWait'
+	| 'startShutDown'
+	| 'setupPort'
+	| 'closePort'
+	| 'getMessenger'
+	| 'getActiveMessengers'
+	| 'forConnections'
+	| 'sendClientMessage'
+
+function serverMessageHandler<T extends MessageTypes>(
+	messenger: InternalMessenger,
+	onInput: ServerMessageHandler<T>,
+): ServerHandlerImpl<T> & InternalMessenger<T> {
+	let currentCloseFuncId: ReturnType<typeof setTimeout> | undefined = undefined
+	const currentInputKeys: Set<string> = new Set()
+
+	const peerPorts: Map<string, Messenger<T> & MessagePort> = new Map()
+	const waitingForPeerPort: Map<
+		string,
+		{ type: MessengerType<MessageTypes, unknown>; promiseHolder: PromiseWithResolvers<unknown> }
+	> = new Map()
+
+	const impl: ServerHandlerImpl<T> & InternalMessenger<T> = Object.assign(messenger, {
+		async handleRootMessage(msg, ports) {
+			if (msg.channel == 'input') {
+				this.handleServerInput(this, msg as IncomingInput<T>)
+			} else if (this.variant == 'server') {
+				if (msg.channel == 'set-key') {
+					this.key = msg.key
+					this.logger = this.type.registry.getLogFactory().loggerFor(debugKeyFrom(this))
+				} else if (msg.channel == 'setup-port') {
+					this.setupPort(msg.id, msg.transactionKey, msg.key, ports![0])
+				} else if (msg.channel == 'force-close-root') {
+					if (this.instanceData.timeout != null || msg.forceClose) {
+						this.startShutDown()
+					} else {
+						this.logger.warn(
+							'Close is either not supported on this messenger or it was not a force close!',
+						)
+					}
+				} else {
+					return false
+				}
+			} else {
+				return false
+			}
+
+			return true
+		},
+		async handleServerInput<K extends ServerboundChannels<T>, M extends ServerboundMessage<T, K>>(
+			sender: InternalMessenger<T>,
+			msg: MessengerServerboundMessage<M>,
+		) {
+			const transactionKey = `${fullInstanceKeyFrom(sender)}/${msg.key}`
+
+			currentInputKeys.add(transactionKey)
+
+			const logger = this.logger
+
+			try {
+				logger.debug(
+					`Attempting to process '${msg.channel}' on '${fullInstanceKeyFrom(this)}' for '${debugKeyFrom(sender)}' `,
+					{ obj: msg },
+				)
+
+				const result = await onInput<K, M>(this, msg.data, serverHandlerResolver<T>(), sender)
+				const tuple = (Array.isArray(result) ? result : [result, new Array<Transferable>()]) as [
+					unknown,
+					Transferable[],
+				]
+
+				logger.debug(
+					`Finished processing '${msg.channel}' on '${fullInstanceKeyFrom(this)}' for '${debugKeyFrom(sender)}'!`,
+					{ obj: msg },
+				)
+
+				sender.postMessage(
+					...[
+						{ channel: 'output', data: tuple[0], key: msg.key } as MessengerOutputMessage,
+						tuple[1],
+					],
+				)
+			} catch (err) {
+				logger.debug(
+					`An error occurred when processing '${msg.channel}' on '${fullInstanceKeyFrom(this)}' for '${debugKeyFrom(sender)}'!`,
+					{ obj: msg },
+				)
+				//logger.debug("Error has occurred on off-thread worker: ", { err: err, obj: msg})
+				sender.postMessage({
+					channel: 'operation-error',
+					error: err,
+					info: msg,
+					key: msg.key,
+				} as MessengerOperationError)
+			}
+
+			currentInputKeys.delete(transactionKey)
+
+			if (
+				!this.instanceData.shared ||
+				(this.instanceData.timeout != null && currentInputKeys.size == 0)
+			) {
+				this.attemptTimeoutWait()
+			}
+		},
+		attemptTimeoutWait() {
+			if (!this.isAlive) return
+			const closeFuncId = setTimeout(async () => {
+				//if (currentCloseFuncId != closeFuncId) return;
+
+				if (
+					!this.instanceData.shared ||
+					(this.instanceData.timeout != null && currentInputKeys.size == 0)
+				) {
+					this.startShutDown()
+				} else {
+					currentCloseFuncId = undefined
+				}
+			}, this.instanceData.timeout ?? 100)
+			clearTimeout(currentCloseFuncId)
+			currentCloseFuncId = closeFuncId
+		},
+		startShutDown() {
+			if (!this.isAlive) return
+
+			this.isAlive = false
+
+			peerPorts.values().forEach((messenger) =>
+				messenger.postMessage({
+					channel: 'close-port',
+					id: messenger.type.id,
+					key: messenger.key,
+				} as CloseMessengerPortMessage),
+			)
+
+			setTimeout(() => {
+				this.postMessage({
+					channel: 'close-root',
+					id: this.type.id,
+					key: this.key,
+				} as CloseMessengerRootMessage)
+			}, 100)
+		},
+		setupPort(id, transactionKey, key, port) {
+			const fullTransactionKey = `${id}:${transactionKey}`
+
+			const data = waitingForPeerPort.get(fullTransactionKey)!
+			waitingForPeerPort.delete(fullTransactionKey)
+
+			const portMessenger = (
+				(data?.type ?? this.type.registry.getType(id)) as MessengerTypeImpl
+			).getOrCreateWith(() => port as Messenger & MessagePort, key) as InternalMessenger &
+				RootMessageHandler &
+				MessagePort
+
+			portMessenger.variant = 'port'
+
+			portMessenger.logger.debug(
+				`Port '${fullInstanceKeyFrom(portMessenger)}' is being setup on '${fullInstanceKeyFrom(this)}'`,
+			)
+			peerPorts.set(fullInstanceKeyFrom(portMessenger), portMessenger)
+
+			const baseHandler = portMessenger.handleRootMessage.bind(portMessenger)
+			const portClientHandler = portClientMessageHandler(this)
+
+			portMessenger.handleRootMessage = async (msg, ports) => {
+				if (
+					(msg.channel == 'close-port' ||
+						msg.channel == 'output' ||
+						msg.channel == 'operation-error') &&
+					(await portClientHandler(msg as ClientboundPortMessages, ports))
+				) {
+					return true
+				} else if (msg.channel == 'input') {
+					this.handleServerInput(portMessenger, msg as IncomingInput<T>)
+				}
+
+				return baseHandler(msg, ports)
+			}
+
+			data?.promiseHolder?.resolve(portMessenger)
+		},
+		closePort(fullPortKey) {
+			const portChannelHolder = peerPorts.get(fullPortKey)
+
+			if (portChannelHolder != null) {
+				peerPorts.delete(fullPortKey)
+				portChannelHolder.close()
+				this.logger.debug(
+					`Port '${fullInstanceKeyFrom(portChannelHolder)}' is closed on '${fullInstanceKeyFrom(this)}'`,
+				)
+			} else {
+				this.logger.error(
+					`Unable to close a given port as '${fullPortKey}' was not found on '${fullInstanceKeyFrom(this)}'`,
+				)
+			}
+		},
+		getMessenger(type) {
+			const transactionKey = `${peerPorts.size}`
+
+			const holder = Promise.withResolvers<unknown>()
+
+			waitingForPeerPort.set(`${type.id}:${transactionKey}`, { type: type, promiseHolder: holder })
+
+			this.postMessage({
+				channel: 'setup-root',
+				id: type.id,
+				transactionKey: transactionKey,
+			} as StartMessengerRootMessage)
+
+			return holder.promise as Promise<never>
+		},
+		getActiveMessengers() {
+			return peerPorts.values().toArray() as Messenger<T>[]
+		},
+		forConnections(callback: (connection: Messenger<T>) => void, except?: Messenger<T>) {
+			for (const connection of [this, ...this.getActiveMessengers()]) {
+				if (connection !== except) callback(connection)
+			}
+		},
+		async sendClientMessage(sender, msg) {
+			const result = await msg()
+			const tuple = (Array.isArray(result) ? result : [result, new Array<Transferable>()]) as [
+				unknown,
+				Transferable[],
+			]
+
+			;(sender as InternalMessenger).postMessage(
+				...[
+					{ channel: 'output', data: tuple[0], key: FORCED_OUTPUT_KEY } as MessengerOutputMessage,
+					tuple[1],
+				],
+			)
+		},
+	} as Pick<ServerHandlerImpl<T>, ServerHandlerMethods> &
+		ThisType<ServerHandlerImpl<T> & InternalMessenger<T>>)
+
+	// TODO: ADD WARNING TO PREVENT DOUBLE SERVER STUFF
+	;(impl.type.registry as MessengerRegistryImpl).serverMessenger = impl
+
+	return impl
+}
+
+function portClientMessageHandler<T extends MessageTypes>(
+	rootServerHandler: ServerHandlerImpl<T>,
+): RootMessageHandler<ClientboundPortMessages>['handleRootMessage'] {
+	return async (msg) => {
+		if (msg.channel == 'close-port') {
+			rootServerHandler.closePort(fullInstanceKey(msg.id, msg.key))
+			return true
+		}
+		return false
+	}
+}
+
+// ---
+
+export function setupHolderAsImpl<
+	T extends MessageTypes,
+	C extends ChannelHolder,
+	R extends RootMessageHandler,
+>(
+	holder: C,
+	type: MessengerTypeImpl<T>,
+	variant: MessengerVariants,
+	key: InstanceKey | undefined,
+	rootHandlerSetup: (holder: C & InternalMessenger<T>) => C & InternalMessenger<T> & R,
+): InternalMessenger<T, C> & R {
+	const infoHolder = holder as C & InternalMessenger<T>
+
+	if (key) infoHolder.key = key
+
+	infoHolder.type = type
+	infoHolder.instanceData = type.instanceConfig
+	infoHolder.variant = variant
+	infoHolder.isAlive = true
+
+	const messenger = rootHandlerSetup(holder as C & InternalMessenger<T>)
+
+	const close = (messenger as Partial<MessagePort>).close
+
+	if (close != null) {
+		messenger.terminate = close.bind(messenger)
+	} else if (messenger.terminate == null) {
+		messenger.terminate = () => {}
+	}
+
+	const registry = type.registry
+
+	if (variant == 'server' && registry.getLogFactory() == null) {
+		registry.setLogFactory(
+			logFactory({
+				log: (level, loggerName, message, extra) =>
+					holder.postMessage({
+						channel: 'logging',
+						logMsg: { type: 'callback', data: [level, loggerName, message, extra] },
+					} as MessengerLogMessage),
+				counter: (level, loggerName, msg) =>
+					holder.postMessage({
+						channel: 'logging',
+						logMsg: { type: 'counter', data: [level, loggerName, msg] },
+					} as MessengerLogMessage),
+			}),
+		)
+	}
+
+	messenger.logger = registry.getLogFactory().loggerFor(debugKey(type.id, key, variant))
+
+	messenger.onTerminate = new EventStream<OnTerminateCallback>(
+		(callbacks) => (forceClose) => callbacks.forEach((callback) => callback(forceClose)),
+	).source
+
+	messenger.onmessage = function (
+		e: MessageEvent<Channel<string | MessengerLogMessage['channel']>>,
+	) {
+		const msg = e.data
+
+		if (msg.channel != 'logging')
+			messenger.logger.debug(`Message '${msg.channel}' received on '${debugKeyFrom(messenger)}'`, {
+				obj: msg,
+			})
+
+		messenger.handleRootMessage(msg, e.ports)
+	}
+	;(messenger as Worker).onerror = (err: ErrorEvent) => {
+		messenger.logger.error(
+			'An error occurred when attempting to complete a task and may be fatal error!',
+			{ err: err.error },
+		)
+	}
+
+	return messenger
+}
+
+function setupAsClient<T extends MessageTypes, H, C extends ChannelHolder = ChannelHolder>(
+	type: MessengerTypeImpl<T>,
+	variant: MessengerVariants,
+	key: InstanceKey,
+	holder: C,
+	options: MessengerOptions<T, H>,
+): InternalMessenger<T, C> {
+	return setupHolderAsImpl<T, C, ClientHandlerImpl<T, H>>(holder, type, variant, key, (impl) =>
+		clientMessageHandler(impl, options),
+	)
+}
+
+export function setupAsServerInternal<T extends MessageTypes>(
+	type: MessengerType<T>,
+	holder: ChannelHolder,
+	inputHandler: ServerMessageHandler<T>,
+): ServerMessenger<T> {
+	return setupHolderAsImpl<T, ChannelHolder, ServerHandlerImpl<T>>(
+		holder,
+		type as MessengerTypeImpl<T>,
+		'server',
+		undefined,
+		(impl) => serverMessageHandler<T>(impl, inputHandler),
+	)
+}
+
+// ---
+
+type ClientboundMessengerChannels =
+	| StartMessengerRootMessage
+	| MessengerOutputMessage
+	| MessengerOperationError
+	| MessengerLogMessage
+	| CloseMessengerRootMessage
+type ServerboundMessengerChannels =
+	| MessengerServerboundMessage
+	| SetupMessengerPortMessage
+	| CloseMessengerPortMessage
+	| SetOffThreadKeyMessage
+	| ForceCloseMessengerRootMessage
+
+type ClientboundPortMessages =
+	| MessengerOperationError
+	| MessengerOutputMessage
+	| CloseMessengerPortMessage
+
+interface MessengerTarget extends MessengerTypeTarget {
+	id: TypeId
+	key: InstanceKey
+}
+
+interface MessengerTypeTarget {
+	id: TypeId
+}
+
+type ConversationId = string
+
+interface ConversationTarget {
+	key: ConversationId
+}
+
+interface SetOffThreadKeyMessage extends Channel<'set-key'> {
+	key: InstanceKey
+}
+
+interface StartMessengerRootMessage extends Channel<'setup-root'>, MessengerTypeTarget {
+	transactionKey: string
+}
+
+interface SetupMessengerPortMessage extends Channel<'setup-port'>, MessengerTarget {
+	transactionKey: string
+}
+
+interface CloseMessengerRootMessage extends Channel<'close-root'>, MessengerTarget {}
+
+interface ForceCloseMessengerRootMessage extends Channel<'force-close-root'> {
+	forceClose: boolean
+}
+
+interface CloseMessengerPortMessage extends Channel<'close-port'>, MessengerTarget {}
+
+export interface MessengerServerboundMessage<T = unknown> extends Channel<'input'> {
+	key: string
+	data: T
+}
+
+/** An input as it arrives from another thread, which is taken to be one of the messenger's own. */
+type IncomingInput<T extends MessageTypes> = MessengerServerboundMessage<
+	ServerboundMessage<T, ServerboundChannels<T>>
+>
+
+interface MessengerLogMessage extends Channel<'logging'> {
+	logMsg:
+		| { type: 'callback'; data: LoggerCallbackData }
+		| { type: 'counter'; data: CounterCallbackData }
+}
+
+interface MessengerOutputMessage<T = unknown> extends Channel<'output'>, ConversationTarget {
+	data: T
+}
+
+interface MessengerOperationError extends Channel<'operation-error'>, ConversationTarget {
+	error: unknown
+	info?: unknown
+}
+
+// ---
+
+function fullInstanceKeyFrom(messenger: Messenger) {
+	return fullInstanceKey(messenger.type.id, messenger.key)
+}
+
+function fullInstanceKey(id: TypeId, key: InstanceKey | undefined) {
+	return `${id}:${key ?? 'UNSET'}`
+}
+
+function debugKeyFrom(messenger: Messenger) {
+	return debugKey(messenger.type.id, messenger.key, messenger.variant)
+}
+
+function debugKey(id: TypeId, key: InstanceKey | undefined, variant: MessengerVariants) {
+	return `${id}:${key ?? 'UNSET'}#${variant}`
+}
+
+function serverHandlerResolver<T extends MessageTypes>(): ServerHandlerResolver<T> {
+	return async (msg, resolvers) => {
+		const result = await resolvers[msg.channel]!(msg)
+
+		return (
+			typeof result === 'undefined'
+				? (undefined as void)
+				: Array.isArray(result)
+					? [Object.assign(result[0], { channel: msg.channel }), result[1]]
+					: Object.assign(result, { channel: msg.channel })
+		) as ClientboundMessage<T, (typeof msg)['channel']> extends never
+			? void
+			: MaybeTransferable<ClientboundMessage<T, (typeof msg)['channel']>>
+	}
+}
diff --git a/packages/ui/src/helpers/toolbox/messenger/index.ts b/packages/ui/src/helpers/toolbox/messenger/index.ts
new file mode 100644
index 0000000000..0d440fe456
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/messenger/index.ts
@@ -0,0 +1,262 @@
+import {
+	createRegistryInternal,
+	setupAsServerInternal,
+} from '#ui/helpers/toolbox/messenger/implement'
+import type { Logger, LoggerFactory } from '#ui/helpers/toolbox/misc/logging'
+
+/**
+ * Messenger is an API used to set up communication between main thread and workers to in a manor
+ * that allows for instantiation via a given registry on the main thread rather than on the workers
+ * allowing for control better control. This means we can control the pool of workers and setup
+ * worker <-> worker communication for existing workers allowing sharing of workers for variours
+ * tasks.
+ *
+ * Communcation happens on a given Channel type either with a Serverbound (To the worker) Message
+ * and/or Clientbound (To the Main thread) Message.
+ */
+
+//--
+
+export type ValueBase = object | undefined
+
+export type AsString<T> = Extract<T, string>
+
+export interface ServerboundType<S extends ValueBase = ValueBase> {
+	serverbound: S
+}
+export interface ClientboundType<C extends ValueBase = ValueBase> {
+	clientbound: C
+}
+
+export type ClientServerBoundType<
+	S extends ValueBase = ValueBase,
+	C extends ValueBase = ValueBase,
+> = ServerboundType<S> & ClientboundType<C>
+export type ClientOrServerBoundType<
+	S extends ValueBase = ValueBase,
+	C extends ValueBase = ValueBase,
+> = ServerboundType<S> | ClientboundType<C> | ClientServerBoundType<S, C>
+
+export interface Channel<K extends string> {
+	channel: K
+}
+
+export type ClientServerBoundChannel<
+	K extends string,
+	S extends ValueBase = ValueBase,
+	C extends ValueBase = ValueBase,
+> = Channel<K> & ClientServerBoundType<S, C>
+
+export type ServerboundChannel<K extends string, S extends ValueBase = ValueBase> = Channel<K> &
+	ServerboundType<S>
+export type ClientboundChannel<K extends string, C extends ValueBase = ValueBase> = Channel<K> &
+	ClientboundType<C>
+
+export type MessageSchema = Record<string, ClientOrServerBoundType>
+
+export type TypeToChannel<K extends string, T extends ClientOrServerBoundType> =
+	T extends ClientServerBoundType<infer S, infer C>
+		? ClientServerBoundChannel<K, S, C>
+		: T extends ClientboundType<infer C>
+			? ClientboundChannel<K, C>
+			: T extends ServerboundType<infer S>
+				? ServerboundChannel<K, S>
+				: { type_error: 'NOT_VALID_TYPE' }
+
+export type MessageTypes<T extends MessageSchema = MessageSchema> =
+	T extends Record<string, ServerboundType | ClientboundType | ClientServerBoundType>
+		? { [E in AsString<keyof T>]: TypeToChannel<E, T[E]> }
+		: { type_error: 'INVALID_SCHEMA_TYPE' }
+
+export type ServerboundChannels<T extends MessageTypes> = AsString<
+	keyof { [E in AsString<keyof T> as ServerboundMessage<T, E> extends never ? never : E]: T[E] }
+>
+
+export type ClientboundChannels<T extends MessageTypes> = AsString<
+	keyof { [E in AsString<keyof T> as ClientboundMessage<T, E> extends never ? never : E]: T[E] }
+>
+
+export type ClientServerBoundChannels<T extends MessageTypes> = AsString<
+	keyof {
+		[E in AsString<keyof T> as ServerboundMessage<T, E> & ClientboundMessage<T, E> extends never
+			? never
+			: E]: T[E]
+	}
+>
+
+export type ServerboundMessage<
+	T extends MessageTypes,
+	K extends AsString<keyof T> = AsString<keyof T>,
+> = T[K] extends ServerboundChannel<K, infer S> ? S & Channel<K> : never
+
+export type ClientboundMessage<
+	T extends MessageTypes,
+	K extends AsString<keyof T> = AsString<keyof T>,
+> = T[K] extends ClientboundChannel<K, infer C> ? C & Channel<K> : never
+
+export type ClientboundBase<T extends MessageTypes, K extends AsString<keyof T>> =
+	T[K] extends ClientServerBoundChannel<K, object, infer O extends ValueBase> ? O : never
+
+// ---
+
+export type TypeId = string
+
+/** `_T` and `_H` aren't read here, but let callers infer a type's messages and handler from it. */
+export interface MessengerType<_T extends MessageTypes | undefined = undefined, _H = undefined> {
+	id: TypeId
+	registry: MessengerRegistry
+	instanceConfig: InstanceConfig
+
+	close(forceClosed?: boolean): void
+}
+
+export interface MessengerAccessor<T extends MessageTypes | undefined = undefined> {
+	getMessenger: <T extends MessageTypes, H>(
+		type: MessengerType<T, H>,
+	) => Promise<ClientMessenger<T, H> & H> | undefined
+	getActiveMessengers(): Messenger<T>[]
+}
+
+export interface MessengerOptions<T extends MessageTypes, H> {
+	handlerConstructor: MessengerHandlerConstructor<T, H>
+	bypassServerMessageHandler?: ServerMessageHandler<T>
+	serverMessageTransferHandler?: ServerMessageTransferHandler<T>
+	independentClientMessageHandler?: ClientMessageHandler<T, H>
+	closeCallback?: (messenger: ClientMessenger<T, H>) => void
+}
+
+// TODO: ATTEMPT TO ADD LOAD BALANCING FOR WHEN INSTANCES ARE SHARED AND COUNT IS GREATER THAN 1
+export interface InstanceConfig {
+	timeout?: number
+	shared: boolean
+	count: number
+}
+
+export interface MessengerRegistry extends MessengerAccessor {
+	of<T extends MessageTypes, H>(
+		id: string,
+		extra?: MessengerOptions<T, H> & InstanceConfig,
+	): MessengerType<T, H>
+
+	getType<T extends MessageTypes>(id: string): MessengerType<T> | undefined
+
+	setWorkerFactoryFor(type: MessengerType, factory: () => Worker): void
+
+	setLogFactory(factory: LoggerFactory): void
+	getLogFactory(): LoggerFactory
+
+	closeAll(forceClosed?: boolean): void
+}
+
+//--
+
+export interface InstanceData {
+	timeout?: number
+	shared: boolean
+}
+
+export type InstanceKey = string
+
+export type MessengerVariants = 'server' | 'port' | 'client'
+
+export interface Messenger<T extends MessageTypes | undefined = undefined> {
+	type: MessengerType<T>
+	key?: InstanceKey
+
+	instanceData: InstanceData
+	variant: MessengerVariants
+
+	isAlive: boolean
+	logger: Logger
+}
+
+export interface ServerMessenger<T extends MessageTypes>
+	extends Messenger<T>, MessengerAccessor<T> {
+	sendClientMessage(
+		sender: Messenger<T>,
+		msg: () => Promise<MaybeTransferable<ClientboundMessage<T>>>,
+	): Promise<void>
+
+	forConnections(
+		callback: (connection: Messenger<T>) => void,
+		except?: Messenger<T> | undefined,
+	): void
+}
+
+export interface ClientMessenger<T extends MessageTypes, H> extends Messenger<T> {
+	type: MessengerType<T, H>
+
+	sendMessage: <K extends ServerboundChannels<T>, M extends ServerboundMessage<T, K>>(
+		msg: M,
+	) => Promise<
+		ClientboundMessage<T, M['channel']> extends never ? void : ClientboundMessage<T, M['channel']>
+	>
+
+	handler: H
+}
+
+// --
+
+export type MessengerHandlerConstructor<T extends MessageTypes, H> = (
+	messenger: ClientMessenger<T, H>,
+) => H
+
+export type ClientMessageHandler<T extends MessageTypes, H> = (
+	messenger: ClientMessenger<T, H>,
+	output: ClientboundMessage<T>,
+) => boolean
+
+export type ServerMessageHandler<T extends MessageTypes> = <
+	K extends ServerboundChannels<T>,
+	M extends ServerboundMessage<T, K>,
+>(
+	messenger: ServerMessenger<T>,
+	msg: M,
+	resolver: ServerHandlerResolver<T>,
+	sender?: Messenger<T>,
+) => Promise<
+	ClientboundMessage<T, K> extends never ? void : MaybeTransferable<ClientboundMessage<T, K>>
+>
+
+export type ServerHandlerResolver<T extends MessageTypes> = <
+	K extends ServerboundChannels<T>,
+	M extends ServerboundMessage<T, K>,
+>(
+	msg: M,
+	handlers: ServerMessageHandlers<T>,
+) => Promise<
+	ClientboundMessage<T, K> extends never ? void : MaybeTransferable<ClientboundMessage<T, K>>
+>
+
+export type ServerMessageHandlers<T extends MessageTypes> = {
+	[E in ServerboundChannels<T>]: (
+		msg: ServerboundMessage<T, E>,
+	) => Promise<
+		ClientboundMessage<T, E> extends never ? void : MaybeTransferable<ClientboundBase<T, E>>
+	>
+}
+
+export type MaybeTransferable<T> = T | [T, Transferable[]]
+
+export type ServerMessageTransferHandler<T extends MessageTypes> = <
+	K extends ServerboundChannels<T>,
+	M extends ServerboundMessage<T, K>,
+>(
+	msg: M,
+	resolver: (msg: M, handlers: ServerTransferHandlers<T>) => Transferable[],
+) => Transferable[]
+
+export type ServerTransferHandlers<T extends MessageTypes> = {
+	[E in ServerboundChannels<T>]?: (msg: ServerboundMessage<T, E>) => Transferable[]
+}
+
+// --
+
+export const createRegistry = createRegistryInternal
+
+export const setupAsServer = setupAsServerInternal
+
+export function isWorker() {
+	//@ts-expect-error TS2304: Cannot find name WorkerGlobalScope
+	return typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope
+}
diff --git a/packages/ui/src/helpers/toolbox/misc/index.ts b/packages/ui/src/helpers/toolbox/misc/index.ts
new file mode 100644
index 0000000000..f0039e5508
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/misc/index.ts
@@ -0,0 +1,374 @@
+// #region Event Stream
+
+/** Any listener an event stream can carry, whatever it takes and returns. */
+export type EventCallback = (...args: never[]) => unknown
+
+export class EventStream<T extends EventCallback> {
+	protected sinkFactory: (callbacks: T[]) => T
+	protected subscribers: T[] = []
+	public source: EventSource<T>
+	public sink: T
+	private owner?: object
+
+	constructor(sinkFactory: (callbacks: T[]) => T, owner?: object) {
+		this.sinkFactory = sinkFactory
+		this.sink = this.regenerateSink()
+		this.source = new EventSource<T>(this)
+		this.owner = owner
+	}
+
+	addSubscriber(subscriber: T): T {
+		const boundFunc = this.owner ? (subscriber.bind(this.owner) as T) : subscriber
+		this.subscribers.push(boundFunc)
+		this.regenerateSink()
+		return boundFunc
+	}
+
+	removeSubscriber(subscriber: T): void {
+		this.subscribers = this.subscribers.filter((entry) => entry != subscriber)
+		this.regenerateSink()
+	}
+
+	protected regenerateSink(): T {
+		const sink = this.sinkFactory(this.subscribers)
+		return (this.sink = this.owner ? (sink.bind(this.owner) as T) : sink)
+	}
+}
+
+export class EventSource<T extends EventCallback> {
+	stream: EventStream<T>
+
+	constructor(stream: EventStream<T>) {
+		this.stream = stream
+	}
+
+	public subscribe(subscriber: T): EventSubscription<T> {
+		return new EventSubscription(this, this.stream.addSubscriber(subscriber))
+	}
+}
+
+export class EventSubscription<T extends EventCallback> {
+	protected source: EventSource<T>
+	protected subscriber: T
+
+	constructor(source: EventSource<T>, subscriber: T) {
+		this.source = source
+		this.subscriber = subscriber
+	}
+
+	public cancel(): void {
+		this.source.stream.removeSubscriber(this.subscriber)
+	}
+}
+
+// #endregion
+
+// #region Observable Types
+
+export type Consumer<T> = (value: T) => void
+
+export class Observable<T> {
+	static of<T>(startingValue: T) {
+		let value = startingValue
+		return new Observable<T>(
+			() => value,
+			(newValue) => (value = newValue),
+		)
+	}
+
+	static and(...observables: Observable<boolean>[]) {
+		const evalFunc = () => observables.every((o) => o.get())
+
+		let value = evalFunc()
+		const wrapper = new Observable<boolean>(() => value)
+
+		const onChange = (_: boolean) => {
+			const newValue = evalFunc()
+			if (value != newValue) {
+				value = newValue
+				wrapper.onChangeEvent.sink(wrapper.get())
+			}
+		}
+		observables.forEach((observable) => observable.onChange().subscribe(onChange))
+
+		return wrapper
+	}
+
+	static or(...observables: Observable<boolean>[]) {
+		const evalFunc = () => observables.find((o) => o.get())?.get() ?? false
+
+		let value = evalFunc()
+		const wrapper = new Observable(() => value)
+
+		const onChange = (_: boolean) => {
+			const newValue = evalFunc()
+			if (value != newValue) {
+				value = newValue
+				wrapper.onChangeEvent.sink(wrapper.get())
+			}
+		}
+		observables.forEach((observable) => observable.onChange().subscribe(onChange))
+
+		return wrapper
+	}
+
+	get: () => T
+	set: (value: T) => void
+	protected onChangeEvent: EventStream<Consumer<T>>
+
+	constructor(
+		getCallback: () => T,
+		setCallback?: (value: T) => T,
+		runChangeCallbackOnSet?: boolean,
+	) {
+		this.get = getCallback
+		this.set = (value) => {
+			if (setCallback != null) setCallback(value)
+			if (runChangeCallbackOnSet ?? true) this.onChangeEvent.sink(value)
+		}
+		this.onChangeEvent = new EventStream<Consumer<T>>(
+			(callbacks) => (value: T) => callbacks.forEach((callback) => callback(value)),
+		)
+	}
+
+	onChange(): EventSource<Consumer<T>> {
+		return this.onChangeEvent.source
+	}
+
+	ifNotNull(func: Consumer<NonNullable<T>>) {
+		const value = this.get()
+		if (value != null) func(value)
+	}
+
+	mapTo<R>(convertTo: (t: T) => R, convertFrom?: (value: R) => T): Observable<R> {
+		const mappedObs = new Observable(
+			() => convertTo(this.get()),
+			convertFrom
+				? (value) => {
+						this.set(convertFrom(value))
+						return value
+					}
+				: undefined,
+		)
+
+		this.onChange().subscribe((value) => mappedObs.onChangeEvent.sink(convertTo(value)))
+
+		return mappedObs
+	}
+}
+
+export class KeyedObservable<T> extends Observable<T> {
+	key: string
+
+	constructor(
+		key: string,
+		getCallback: (key: string) => T,
+		setCallback?: (value: T) => T,
+		runChangeCallbackOnSet?: boolean,
+	) {
+		super(() => getCallback(this.key), setCallback, runChangeCallbackOnSet)
+		this.key = key
+	}
+}
+
+// #endregion
+
+// #region Misc Util Methods
+
+export function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export function areArraysEqual(a: readonly unknown[], b: readonly unknown[]) {
+	if (a === b) return true
+	if (a == null || b == null || a.length !== b.length) return false
+
+	for (let i = 0; i < a.length; ++i) {
+		if (a[i] !== b[i]) return false
+	}
+
+	return true
+}
+
+// #endregion
+
+// #region Lazy Values
+
+export interface Supplier<T> {
+	get: () => Promise<T>
+}
+
+export interface LazyValue<T> extends Supplier<T> {
+	isSet(): boolean
+	reset(): void
+	lazyMap<R>(mapper: (value: T) => Promise<R>): LazyValue<R>
+	map<R>(mapper: (value: T) => Promise<R>): Supplier<R>
+}
+
+export interface LazyMutableValue<T> extends LazyValue<T> {
+	updateGetter(getter: () => Promise<T>): this
+}
+
+export function lazyMutableValue<T>(getter: () => Promise<T>): LazyMutableValue<T> {
+	return Object.assign(lazyValue(getter), {
+		updateGetter(getter: () => Promise<T>): LazyMutableValue<T> {
+			this.reset()
+			this._getter = getter
+			return this
+		},
+	} as LazyMutableValueImpl<T>)
+}
+
+export function lazyValue<T>(getter: () => Promise<T>): LazyValue<T> {
+	return {
+		_getter: getter,
+		_value: undefined,
+		_isSet: false,
+
+		isSet(): boolean {
+			return this._isSet
+		},
+
+		async get(): Promise<T> {
+			if (!this._isSet) {
+				this._value = await this._getter()
+				this._isSet = true
+			}
+			return this._value!
+		},
+
+		reset() {
+			this._value = undefined
+			this._isSet = false
+			this._onResetEvent.stream.sink()
+		},
+
+		lazyMap<R>(mapper: (value: T) => R): LazyValue<R> {
+			const value = lazyValue(async () => await mapper(await getter()))
+			this._onResetEvent.subscribe(() => value.reset())
+			return value
+		},
+
+		_onResetEvent: new EventStream<() => void>((callbacks) => () => {
+			for (const callback of callbacks) {
+				callback()
+			}
+		}).source,
+	} as LazyValueImpl<T>
+}
+
+export interface LazyValueImpl<T> extends LazyValue<T> {
+	_value: T | undefined
+	_isSet: boolean
+	_getter: () => Promise<T>
+	_onResetEvent: EventSource<() => void>
+}
+
+export interface LazyMutableValueImpl<T> extends LazyValueImpl<T>, LazyMutableValue<T> {}
+
+// #endregion
+
+// #region Tree Node
+
+export interface TreeNodeBase<N extends TreeNodeBase<N>> {
+	parent?: N
+	children: Map<string, N>
+	name: string
+	path: string
+
+	sort(compare: (a: N, b: N) => number): this
+}
+
+export class TreeNode<N extends TreeNodeBase<N>> implements TreeNodeBase<N> {
+	parent?: N
+	children: Map<string, N> = new Map()
+	name: string
+	path: string
+
+	constructor(parent: N | undefined, name: string, path: string) {
+		this.parent = parent
+		this.name = name
+		this.path = path
+	}
+
+	sort(compare: (a: N, b: N) => number): this {
+		this.children = new Map(
+			Array.from(this.children.entries()).sort((entry1, entry2) => compare(entry1[1], entry2[1])),
+		)
+		for (const value of this.children.values()) value.sort(compare)
+		return this
+	}
+}
+
+// #endregion
+
+export function wrapMap<K, VIn, VOut>(
+	source: Map<K, VIn>,
+	allowedKeys: Iterable<K>,
+	mapper: (value: VIn, key: K) => VOut,
+): ReadonlyMap<K, VOut> {
+	return new MappedFilteredReadonlyMap(source, allowedKeys, mapper)
+}
+
+export class MappedFilteredReadonlyMap<K, VIn, VOut> implements ReadonlyMap<K, VOut> {
+	private readonly allowedKeys: Set<K>
+
+	constructor(
+		private readonly sourceMap: ReadonlyMap<K, VIn>,
+		allowedKeys: Iterable<K>,
+		private readonly mapper: (value: VIn, key: K) => VOut,
+	) {
+		this.allowedKeys = new Set(allowedKeys)
+	}
+
+	has(key: K): boolean {
+		return this.allowedKeys.has(key) && this.sourceMap.has(key)
+	}
+
+	get(key: K): VOut | undefined {
+		if (!this.has(key)) return undefined
+		const rawVal = this.sourceMap.get(key)
+		return rawVal !== undefined ? this.mapper(rawVal, key) : undefined
+	}
+
+	get size(): number {
+		let count = 0
+		for (const key of this.allowedKeys) {
+			if (this.sourceMap.has(key)) count++
+		}
+		return count
+	}
+
+	*entries(): MapIterator<[K, VOut]> {
+		for (const [key, value] of this.sourceMap.entries()) {
+			if (this.allowedKeys.has(key)) {
+				yield [key, this.mapper(value, key)]
+			}
+		}
+	}
+
+	*keys(): MapIterator<K> {
+		for (const key of this.allowedKeys) {
+			if (this.sourceMap.has(key)) yield key
+		}
+	}
+
+	*values(): MapIterator<VOut> {
+		for (const [_, value] of this.entries()) {
+			yield value
+		}
+	}
+
+	forEach(
+		callbackfn: (value: VOut, key: K, map: ReadonlyMap<K, VOut>) => void,
+		thisArg?: unknown,
+	): void {
+		for (const [key, value] of this.entries()) {
+			callbackfn.call(thisArg, value, key, this as ReadonlyMap<K, VOut>)
+		}
+	}
+
+	[Symbol.iterator](): MapIterator<[K, VOut]> {
+		return this.entries()
+	}
+}
diff --git a/packages/ui/src/helpers/toolbox/misc/logging.ts b/packages/ui/src/helpers/toolbox/misc/logging.ts
new file mode 100644
index 0000000000..78701b6f70
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/misc/logging.ts
@@ -0,0 +1,364 @@
+import type { EventSource } from '#ui/helpers/toolbox/misc'
+import { EventStream } from '#ui/helpers/toolbox/misc'
+
+export type LogLevel = 'debug' | 'success' | 'info' | 'error' | 'warning' | 'neutral'
+
+export function consoleOutFor(type: LogLevel) {
+	if (type == 'error') return console.error.bind(console)
+	else if (type == 'warning') return console.warn.bind(console)
+	else if (type == 'debug') return console.debug.bind(console)
+	else return console.info.bind(console)
+}
+
+export type ExtraData = { err?: unknown; silence?: boolean; obj?: unknown; ext?: unknown }
+
+export type LoggerCallbackData = [
+	level: LogLevel,
+	loggerName: string,
+	message: string,
+	extra?: ExtraData,
+]
+export type CounterCallbackData = [
+	level: 'info' | 'debug',
+	loggerName: string,
+	message: { id: string; size?: number; amount?: number },
+]
+
+export type LoggerCallback = (
+	this: LoggerFactory,
+	...data: LoggerCallbackData
+) => void | Promise<void> | boolean
+export type CounterCallback = (
+	this: LoggerFactory,
+	...data: CounterCallbackData
+) => void | Promise<void> | boolean
+
+export type LoggerEntryFormatter = (this: LoggerFactory, ...data: LoggerCallbackData) => string[]
+
+export interface Counter {
+	startCounting(id: string, size: number): void
+	incrementCount(id: string, amount: number): void
+}
+
+export interface Timer {
+	startTimer(id: string): void
+
+	endTimer(id: string): { start: Date; end: Date; totalTime: number } | undefined
+}
+
+export function createTimer(): Timer {
+	const map = new Map<string, Date>()
+
+	return {
+		startTimer: (id) => {
+			map.delete(id)
+
+			const startDate = new Date(Date.now())
+
+			map.set(id, startDate)
+		},
+		endTimer: (id) => {
+			const startDate = map.get(id)
+
+			if (!startDate) return undefined
+
+			const endDate = new Date(Date.now())
+
+			return {
+				start: startDate,
+				end: endDate,
+				totalTime: endDate.getTime() - startDate.getTime(),
+			}
+		},
+	}
+}
+
+export function createCounter(): Counter {
+	const map = new Map<string, { count: number; size: number }>()
+	return {
+		startCounting(id, size) {
+			map.set(id, { count: 0, size: size })
+		},
+		incrementCount(id, amount) {
+			const state = map.get(id)
+			if (state) {
+				state.count += amount
+			}
+		},
+	}
+}
+
+export interface LoggerFactory {
+	log: LoggerCallback
+	formatter: LoggerEntryFormatter
+	counter: CounterCallback
+
+	onLog: EventSource<LoggerCallback>
+	onCounter: EventSource<CounterCallback>
+
+	loggerFor(name: string): Logger
+
+	startTimer(loggerName: string, id: string): void
+
+	endTimer(
+		loggerName: string,
+		id: string,
+	): { start: Date; end: Date; totalTime: number } | undefined
+
+	startCounting(loggerName: string, id: string, size: number): void
+
+	incrementCount(loggerName: string, id: string, amount: number): void
+
+	info(loggerName: string, message: string, extra?: ExtraData): void
+
+	success(loggerName: string, message: string, extra?: ExtraData): void
+
+	warn(loggerName: string, message: string, extra?: ExtraData): void
+
+	error(loggerName: string, message: string, extra?: ExtraData): void
+
+	debug(loggerName: string, message: string, extra?: ExtraData): void
+}
+
+export class LoggerFactoryDelegate implements LoggerFactory {
+	factory: LoggerFactory
+
+	constructor(factory: LoggerFactory) {
+		this.log = factory.log
+		this.formatter = factory.formatter
+		this.counter = factory.counter
+		this.onLog = factory.onLog
+		this.onCounter = factory.onCounter
+		this.loggerFor = factory.loggerFor
+		this.startTimer = factory.startTimer
+		this.startCounting = factory.startCounting
+		this.incrementCount = factory.incrementCount
+		this.endTimer = factory.endTimer
+		this.info = factory.info
+		this.success = factory.success
+		this.warn = factory.warn
+		this.error = factory.error
+		this.debug = factory.debug
+		this.factory = factory
+	}
+
+	log: LoggerCallback
+
+	formatter: LoggerEntryFormatter
+
+	counter: CounterCallback
+
+	onLog: EventSource<LoggerCallback>
+
+	onCounter: EventSource<CounterCallback>
+
+	loggerFor: (name: string) => Logger
+
+	startTimer: (loggerName: string, id: string) => void
+
+	endTimer: (
+		loggerName: string,
+		id: string,
+	) => { start: Date; end: Date; totalTime: number } | undefined
+
+	startCounting: (loggerName: string, id: string, size: number) => void
+
+	incrementCount: (loggerName: string, id: string, amount: number) => void
+
+	info: (loggerName: string, message: string, extra?: ExtraData) => void
+
+	success: (loggerName: string, message: string, extra?: ExtraData) => void
+
+	warn: (loggerName: string, message: string, extra?: ExtraData) => void
+
+	error: (loggerName: string, message: string, extra?: ExtraData) => void
+
+	debug: (loggerName: string, message: string, extra?: ExtraData) => void
+}
+
+const defaultCallback: LoggerCallback = function (level, loggerName, message, extra) {
+	const console = consoleOutFor(level)
+	const entries: unknown[] = this.formatter(level, loggerName, message, extra)
+	if (extra?.err) entries.push(extra.err)
+	console(...entries)
+	const debugInfo = extra?.obj
+	if (!debugInfo) return
+	// TODO: MAYBE USE SPREAD INSTEAD?
+	if (Array.isArray(debugInfo)) {
+		debugInfo.forEach((entry) => console(entry))
+	} else {
+		console(debugInfo)
+	}
+}
+
+const defaultCounter: CounterCallback = function (level, loggerName, message) {
+	const key = `[${loggerName}]: ${message.id}`
+	if (message.size) {
+		consoleOutFor(level)(`[${loggerName}]: ${message.id} | Size ${message.size} `)
+		console.countReset(key)
+	} else if (message.amount) {
+		for (let i = 0; i < message.amount; i++) {
+			console.count(key)
+		}
+	}
+}
+
+const defaultFormatter: LoggerEntryFormatter = (_, loggerName, message) => [
+	`[${loggerName}]:`,
+	`${message}`,
+]
+
+export type FactoryOptions = {
+	log?: LoggerCallback
+	formatter?: LoggerEntryFormatter
+	counter?: CounterCallback
+}
+
+// TODO: ADD ABILITY TO ADJUST WHAT LEVELS OR MESSAGES ARE LOGGED VIA EVENT?
+export function logFactory({ log, formatter, counter }: FactoryOptions = {}): LoggerFactory {
+	const map = new Map<string, Map<string, Date>>()
+	const factory: LoggerFactory = {
+		formatter: formatter ?? defaultFormatter,
+		info(loggerName: string, message: string, extra: ExtraData) {
+			this.log('info', loggerName, message, extra)
+		},
+		success(loggerName: string, message: string, extra: ExtraData) {
+			this.log('success', loggerName, message, extra)
+		},
+		warn(loggerName: string, message: string, extra: ExtraData) {
+			this.log('warning', loggerName, message, extra)
+		},
+		error(loggerName: string, message: string, extra: ExtraData) {
+			this.log('error', loggerName, message, extra)
+		},
+		debug(loggerName: string, message: string, extra: ExtraData) {
+			this.log('debug', loggerName, message, extra)
+		},
+		startTimer(loggerName: string, id: string) {
+			const loggerEntries = (map.has(loggerName) ? map : map.set(loggerName, new Map())).get(
+				loggerName,
+			)!
+
+			loggerEntries.delete(id)
+
+			const startDate = new Date(Date.now())
+
+			loggerEntries.set(id, startDate)
+		},
+		endTimer(loggerName: string, id: string) {
+			const loggerEntries = (map.has(loggerName) ? map : map.set(loggerName, new Map())).get(
+				loggerName,
+			)!
+
+			const startDate = loggerEntries.get(id)
+
+			if (!startDate) return undefined
+
+			const endDate = new Date(Date.now())
+
+			const timeData = {
+				start: startDate,
+				end: endDate,
+				totalTime: endDate.getTime() - startDate.getTime(),
+			}
+
+			this.debug(loggerName, `'${id}' took ${timeData.totalTime} ms to complete!`, {
+				obj: timeData,
+			})
+
+			return timeData
+		},
+		startCounting(loggerName: string, id: string, size: number) {
+			this.counter('info', loggerName, { id: id, size })
+		},
+		incrementCount(loggerName: string, id: string, amount: number) {
+			this.counter('info', loggerName, { id: id, amount })
+		},
+		loggerFor(name: string): Logger {
+			return {
+				factory: this,
+				name,
+				startTimer(id: string) {
+					this.factory.startTimer(this.name, id)
+				},
+				endTimer(id: string) {
+					return this.factory.endTimer(this.name, id)
+				},
+				startCounting(id: string, size: number) {
+					return this.factory.startCounting(this.name, id, size)
+				},
+				incrementCount(id: string, amount: number) {
+					return this.factory.incrementCount(this.name, id, amount)
+				},
+				log(level, message, extra) {
+					this.factory.log(level, name, message, extra ?? {})
+				},
+				info(data, extra) {
+					this.factory.info(this.name, data, extra)
+				},
+				success(data, extra) {
+					this.factory.success(this.name, data, extra)
+				},
+				warn(data, extra) {
+					this.factory.warn(this.name, data, extra)
+				},
+				error(data, extra) {
+					this.factory.error(this.name, data, extra)
+				},
+				debug(data, extra) {
+					this.factory.debug(this.name, data, extra)
+				},
+			}
+		},
+	} as LoggerFactory
+
+	const onLogEvent = new EventStream<LoggerCallback>((callbacks) => {
+		const boundCallbacks = callbacks.map((callback) => callback.bind(factory))
+		return (level, loggerName, message, extra) => {
+			for (const callback of boundCallbacks)
+				callback.bind(factory)(level, loggerName, message, extra)
+		}
+	}, factory)
+
+	const finalCallback = (log ?? defaultCallback).bind(factory)
+	factory.onLog = onLogEvent.source
+	factory.log = (level, loggerName, message, extra) => {
+		finalCallback(level, loggerName, message, extra)
+		// @ts-expect-error The 'this' context of type 'void' is not assignable to method's 'this' of type 'LoggerFactory'.
+		onLogEvent.sink(level, loggerName, message, extra)
+	}
+
+	const onCounterEvent = new EventStream<CounterCallback>((callbacks) => {
+		const boundCallbacks = callbacks.map((callback) => callback.bind(factory))
+		return (level, loggerName, message) => {
+			for (const callback of boundCallbacks) callback.bind(factory)(level, loggerName, message)
+		}
+	}, factory)
+
+	const finalCounter = (counter ?? defaultCounter).bind(factory)
+
+	factory.onCounter = onCounterEvent.source
+	factory.counter = (level, loggerName, message) => {
+		finalCounter(level, loggerName, message)
+		// @ts-expect-error The 'this' context of type 'void' is not assignable to method's 'this' of type 'LoggerFactory'.
+		onCounterEvent.sink(level, loggerName, message)
+	}
+	return factory
+}
+
+export interface Logger extends Timer, Counter {
+	factory: LoggerFactory
+	name: string
+
+	log(level: LogLevel, message: string, extra?: ExtraData): void
+
+	info(message: string, extra?: ExtraData): void
+
+	success(message: string, extra?: ExtraData): void
+
+	warn(message: string, extra?: ExtraData): void
+
+	error(message: string, extra?: ExtraData): void
+
+	debug(message: string, extra?: ExtraData): void
+}
diff --git a/packages/ui/src/helpers/toolbox/workers/decompile/index.ts b/packages/ui/src/helpers/toolbox/workers/decompile/index.ts
new file mode 100644
index 0000000000..b594851212
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/workers/decompile/index.ts
@@ -0,0 +1,20 @@
+import type { DecompilerMessages } from '#ui/helpers/toolbox/decompile'
+import { decompileFileContent } from '#ui/helpers/toolbox/decompile/impl'
+import { setupAsServer } from '#ui/helpers/toolbox/messenger'
+import { decompileMessengerType, zipHandlerType } from '#ui/helpers/toolbox/workers/registry'
+
+setupAsServer<DecompilerMessages>(
+	decompileMessengerType,
+	self as unknown as Worker,
+	async (messenger, msg, resolver) => {
+		return resolver(msg, {
+			main: async (msg) => {
+				return decompileFileContent(
+					messenger.logger,
+					(await messenger.getMessenger(zipHandlerType))?.handler,
+					msg,
+				)
+			},
+		})
+	},
+)
diff --git a/packages/ui/src/helpers/toolbox/workers/index.ts b/packages/ui/src/helpers/toolbox/workers/index.ts
new file mode 100644
index 0000000000..4a3bd7430a
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/workers/index.ts
@@ -0,0 +1,8 @@
+import DecompileWorker from './decompile?worker'
+import { decompileMessengerType, messengerRegistry, zipHandlerType } from './registry'
+import ZipWorker from './zip?worker'
+
+export * from './registry'
+
+messengerRegistry.setWorkerFactoryFor(decompileMessengerType, () => new DecompileWorker())
+messengerRegistry.setWorkerFactoryFor(zipHandlerType, () => new ZipWorker())
diff --git a/packages/ui/src/helpers/toolbox/workers/registry.ts b/packages/ui/src/helpers/toolbox/workers/registry.ts
new file mode 100644
index 0000000000..e8938fe9b0
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/workers/registry.ts
@@ -0,0 +1,66 @@
+import type { DecompileHandler, DecompilerMessages } from '#ui/helpers/toolbox/decompile'
+import { createRegistry, type MessengerType } from '#ui/helpers/toolbox/messenger'
+// import { AtlasMessenger, handlerConstructor as atlasHandlerConstructor  } from "./atlas/common";
+import {
+	handlerConstructor as zipHandlerConstructor,
+	type ZipMessages,
+} from '#ui/helpers/toolbox/workers/zip/api'
+import type { ZipHandler } from '#ui/helpers/toolbox/zip'
+
+/**
+ * The toolbox's messengers, without their workers, so the workers themselves can reach each other's
+ * messengers without importing one another. The main thread registers the workers in `./index`.
+ */
+export const messengerRegistry = createRegistry()
+
+export const zipHandlerType = messengerRegistry.of<ZipMessages, ZipHandler>('zip-handler', {
+	handlerConstructor: zipHandlerConstructor,
+	serverMessageTransferHandler(msg, resolver) {
+		return resolver(msg, {
+			node_write: (msg) => [msg.buffer],
+			read_zip_tree: (msg) => (msg.data_type == 'buffer' ? [msg.buffer] : []),
+		})
+	},
+	independentClientMessageHandler(messenger, msg) {
+		if (msg.channel === 'archive_update') {
+			messenger.handler.archiveUpdate(msg as ZipMessages['archive_update']['clientbound'])
+			return true
+		}
+		return false
+	},
+	closeCallback(messenger) {
+		return messenger.handler.closeAllZipTrees()
+	},
+	shared: true,
+	count: 1,
+})
+
+// export const atlasMessengerType: MessengerType<AtlasMessenger> = messengerRegistry.simpleMessenger("atlas-builder", {
+//     handlerConstructor: atlasHandlerConstructor,
+//     inputBypassHandler: import.meta.env.DEV ? (await import('./atlas/implementation')).convertArchiveFilesToAtlas : undefined,
+//     instanceType: "temporary-exclusive"
+// });
+//
+
+export const decompileMessengerType: MessengerType<DecompilerMessages, DecompileHandler> =
+	messengerRegistry.of<DecompilerMessages, DecompileHandler>('decompiler-vf', {
+		serverMessageTransferHandler(msg, resolver) {
+			return resolver(msg, {
+				main: (msg) => (msg.transferBuffer ? [msg.targetFile.content] : []),
+			})
+		},
+		handlerConstructor(messenger) {
+			return {
+				decompile: async (input) => {
+					return await messenger.sendMessage({
+						...input,
+						channel: 'main',
+						transferBuffer: input.transferBuffer ?? false,
+					})
+				},
+			} as DecompileHandler
+		},
+		shared: true,
+		timeout: 30000,
+		count: 1,
+	})
diff --git a/packages/ui/src/helpers/toolbox/workers/zip/api.ts b/packages/ui/src/helpers/toolbox/workers/zip/api.ts
new file mode 100644
index 0000000000..ec8c8485a3
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/workers/zip/api.ts
@@ -0,0 +1,375 @@
+import type { ZipWriterAddDataOptions } from '@zip.js/zip.js'
+
+import type { DecompilerResult } from '#ui/helpers/toolbox/decompile'
+import type { FileDetails, HashedFileContent, HashType } from '#ui/helpers/toolbox/file'
+import type { MessageTypes, MessengerHandlerConstructor } from '#ui/helpers/toolbox/messenger'
+import { EventStream } from '#ui/helpers/toolbox/misc'
+import type { Sha512 } from '#ui/helpers/toolbox/workers/zip/index.ts'
+import {
+	type ArchiveUpdateTypes,
+	type DelegateFileZipTreeNode,
+	type FileMatcher,
+	type FileZipTreeNode,
+	getAsTarget,
+	type LazyDataAccess,
+	type NodeTarget,
+	reconstituteNodes,
+	reconstituteRoot,
+	type RootNodeTarget,
+	type RootZipTreeNode,
+	type SourceOptions,
+	type UUID_V7,
+	type ZipDataSource,
+	type ZipHandler,
+	type ZipNode,
+} from '#ui/helpers/toolbox/zip'
+
+export type ZipMessages = MessageTypes<{
+	lazy_read: {
+		serverbound: { key: keyof LazyDataAccess } & NodeTarget
+		clientbound: { value: Awaited<ReturnType<LazyDataAccess[keyof LazyDataAccess]['get']>> }
+	}
+	source_read: {
+		serverbound: NodeTarget & { options?: SourceOptions }
+		clientbound: DecompilerResult
+	}
+	hash_read: {
+		serverbound: NodeTarget & { algorithm: HashType }
+		clientbound: { hash: string }
+	}
+	archive_hash_read: {
+		serverbound: RootNodeTarget & { algorithm: HashType }
+		clientbound: { hash: string }
+	}
+	node_read: {
+		serverbound: NodeTarget & { optional?: boolean }
+		clientbound: { buffer: ArrayBuffer | undefined }
+	}
+	node_write: {
+		serverbound: NodeTarget & { options?: ZipWriterAddDataOptions } & { buffer: ArrayBuffer }
+		clientbound: { wasWritten: boolean }
+	}
+	read_zip_tree: {
+		serverbound: ZipDataSource
+		clientbound: { node: RootZipTreeNode; isFullyLoaded?: boolean }
+	}
+	get_zip_tree: {
+		serverbound: { value: string | UUID_V7 }
+		clientbound: { node: RootZipTreeNode | undefined; isFullyLoaded?: boolean }
+	}
+	collect_files: {
+		serverbound: RootNodeTarget & { matcher?: FileMatcher }
+		clientbound: { files: FileDetails[] }
+	}
+	collect_files_hashed: {
+		serverbound: RootNodeTarget & { matcher?: FileMatcher; deduplicate?: boolean }
+		clientbound: { files: HashedFileContent[] }
+	}
+	close_zip_tree: {
+		serverbound: RootNodeTarget
+		clientbound: { err?: Error; wasClosed: boolean }
+	}
+	close_all_zip_trees: {
+		serverbound: Record<never, never>
+		clientbound: { err?: Error; wasClosed: boolean }
+	}
+	archive_update: {
+		//serverbound: {}
+		clientbound: ArchiveUpdateTypes
+	}
+}>
+
+/**
+ * Adds a node read in the background (e.g. a nested archive's tree) to the client's copy of the
+ * tree. A node the client already has (e.g. the nested archive's file) gets the loaded children.
+ */
+function mergeLoadedNode(handler: ZipHandler, root: RootZipTreeNode, loaded: ZipNode) {
+	const existing = root.entries.get(loaded.path)
+	if (existing != null) {
+		for (const child of loaded.children.values()) {
+			existing.children.set(child.name, reconstituteNodes<ZipNode>(handler, root, existing, child))
+		}
+		return
+	}
+
+	const parentPath = loaded.path.split('/').slice(0, -1).join('/')
+	const parent = parentPath === '' ? root : root.entries.get(parentPath)
+	if (parent == null) return
+
+	parent.children.set(loaded.name, reconstituteNodes<ZipNode>(handler, root, parent, loaded))
+}
+
+export const handlerConstructor: MessengerHandlerConstructor<ZipMessages, ZipHandler> = (
+	messenger,
+) => {
+	const uuidToUrls = new Map<string, string[]>()
+	const hashToUUID = new Map<Sha512, UUID_V7>()
+	const uuidToOnFinishedLoadingHolder = new Map<UUID_V7, PromiseWithResolvers<void>>()
+	/** Roots whose loading finished, which may be reported before the tree itself is returned. */
+	const finishedRoots = new Set<UUID_V7>()
+	/** SHA-512s of roots, which may also be reported before the tree itself is returned. */
+	const rootHashes = new Map<UUID_V7, Sha512>()
+
+	function forgetRoot(key: UUID_V7) {
+		finishedRoots.delete(key)
+		uuidToOnFinishedLoadingHolder.delete(key)
+		rootHashes.delete(key)
+		for (const [hash, uuid] of hashToUUID) if (uuid === key) hashToUUID.delete(hash)
+	}
+
+	function trackLoading(node: RootZipTreeNode, isFullyLoaded: boolean | undefined) {
+		const knownSha512 = rootHashes.get(node.key)
+		if (node.sha512Hash == null && knownSha512 != null)
+			node.hashes = { ...node.hashes, sha512: knownSha512 }
+		if (node.sha512Hash != null) hashToUUID.set(node.sha512Hash, node.key)
+
+		if (isFullyLoaded || finishedRoots.has(node.key)) {
+			node.onFinishedLoading = Promise.resolve()
+			return
+		}
+
+		const holder = uuidToOnFinishedLoadingHolder.get(node.key) ?? Promise.withResolvers<void>()
+		uuidToOnFinishedLoadingHolder.set(node.key, holder)
+		node.onFinishedLoading = holder.promise
+	}
+
+	return {
+		zipByUUID: new Map(),
+		urlToUUID: new Map(),
+		readLazyData: async function <K extends keyof LazyDataAccess = keyof LazyDataAccess>(
+			target: FileZipTreeNode | NodeTarget,
+			key: K,
+		): Promise<Awaited<ReturnType<LazyDataAccess[K]['get']>>> {
+			return (
+				await messenger.sendMessage({ channel: 'lazy_read', ...getAsTarget(target), key: key })
+			).value as Awaited<ReturnType<LazyDataAccess[K]['get']>>
+		},
+		readSource: async function (
+			target: FileZipTreeNode | NodeTarget,
+			options?: SourceOptions,
+		): Promise<DecompilerResult> {
+			return await messenger.sendMessage({
+				channel: 'source_read',
+				...getAsTarget(target),
+				options: options,
+			})
+		},
+		readNodeHash: async (target: FileZipTreeNode | NodeTarget, type: HashType) => {
+			return (
+				await messenger.sendMessage({
+					channel: 'hash_read',
+					...getAsTarget(target),
+					algorithm: type,
+				})
+			).hash
+		},
+		readArchiveHash: async function (root: RootZipTreeNode | UUID_V7, type: HashType) {
+			const key: UUID_V7 = typeof root === 'string' ? root : root.key
+			const { hash } = await messenger.sendMessage({
+				channel: 'archive_hash_read',
+				root: key,
+				algorithm: type,
+			})
+			const node = this.zipByUUID.get(key)
+			if (node != null) node.hashes = { ...node.hashes, [type]: hash }
+			return hash
+		},
+		readNodeData: async (target: FileZipTreeNode | NodeTarget) => {
+			const { buffer } = await messenger.sendMessage({
+				channel: 'node_read',
+				...getAsTarget(target),
+			})
+			if (buffer == null) throw new Error(`No data was read for '${getAsTarget(target).path}'`)
+			return buffer
+		},
+		findNodeData: async (target: NodeTarget) => {
+			return (await messenger.sendMessage({ channel: 'node_read', ...target, optional: true }))
+				.buffer
+		},
+		getOrReadZipTree: async function (source: ZipDataSource) {
+			const { url, sha512Hash } = source
+			let node: RootZipTreeNode | undefined
+			const filteredURL = url?.split('?')[0]
+			if (filteredURL) node = await this.getZipTree(filteredURL, true)
+			if (node == null && sha512Hash) node = await this.getZipTree(sha512Hash, false)
+			if (node == null) node = await this.readZipTree(source)
+			return node
+		},
+		readZipTree: async function (source: ZipDataSource) {
+			const { data_type, name, url, sha512Hash, buffer, rangeOptions } = source as ZipDataSource
+			const msg = await messenger.sendMessage({
+				channel: 'read_zip_tree',
+				data_type,
+				name,
+				url,
+				sha512Hash,
+				buffer:
+					buffer != null
+						? await (typeof buffer === 'function' ? buffer() : Promise.resolve(buffer))
+						: undefined,
+				rangeOptions: rangeOptions,
+			})
+			const node = reconstituteRoot(messenger.handler, msg.node)
+
+			trackLoading(node, msg.isFullyLoaded)
+
+			const filteredURL = url?.split('?')[0]
+
+			if (filteredURL) {
+				this.urlToUUID.set(filteredURL, node.key)
+				const urls = uuidToUrls.has(node.key)
+					? uuidToUrls.get(node.key)!
+					: (() => {
+							const array = new Array<string>()
+							uuidToUrls.set(node.key, array)
+							return array
+						})()
+
+				urls.push(filteredURL)
+			}
+
+			if (sha512Hash != null && node.sha512Hash == null) {
+				hashToUUID.set(sha512Hash, node.key)
+			}
+
+			this.zipByUUID.set(node.key, node)
+
+			return node
+		},
+		writeNodeData: async (target, buffer, options) => {
+			return (
+				await messenger.sendMessage({
+					channel: 'node_write',
+					...getAsTarget(target),
+					buffer,
+					options,
+				})
+			).wasWritten
+		},
+		collectFiles: async (root, matcher) => {
+			return (
+				await messenger.sendMessage({
+					channel: 'collect_files',
+					matcher: matcher,
+					root: (root as RootZipTreeNode).key ?? root,
+				})
+			).files
+		},
+		collectHashedFiles: async (root, matcher, deduplicate) => {
+			return (
+				await messenger.sendMessage({
+					channel: 'collect_files_hashed',
+					matcher: matcher,
+					root: (root as RootZipTreeNode).key ?? root,
+					deduplicate: deduplicate,
+				})
+			).files
+		},
+		closeZipTree: async function (root) {
+			const hash: UUID_V7 = (root as RootZipTreeNode).key ?? root
+			const value = await messenger.sendMessage({
+				channel: 'close_zip_tree',
+				root: (root as RootZipTreeNode).key ?? root,
+			})
+
+			const urls = uuidToUrls.get(hash)
+			if (urls) for (const url of urls) this.urlToUUID.delete(url)
+			uuidToUrls.delete(hash)
+			this.zipByUUID.delete(hash)
+			forgetRoot(hash)
+
+			return value
+		},
+		closeAllZipTrees: async function () {
+			const value = await messenger.sendMessage({ channel: 'close_all_zip_trees' })
+
+			this.zipByUUID.clear()
+			this.urlToUUID.clear()
+			uuidToUrls.clear()
+			finishedRoots.clear()
+			uuidToOnFinishedLoadingHolder.clear()
+			rootHashes.clear()
+			hashToUUID.clear()
+
+			return value
+		},
+		getZipTree: async function (value, isUrl, localOnly) {
+			if (this.zipByUUID.has(value)) {
+				return this.zipByUUID.get(value)
+			}
+
+			if (isUrl) {
+				const filteredURL = value.split('?')[0]
+				if (this.urlToUUID.has(filteredURL)) {
+					const hash = this.urlToUUID.get(filteredURL)!
+					const node = this.zipByUUID.get(hash)
+
+					if (node) return node
+				}
+			}
+
+			if (localOnly) return undefined
+
+			const response = await messenger.sendMessage({ channel: 'get_zip_tree', value: value })
+			const rawNode = response.node
+
+			if (rawNode == undefined) return undefined
+
+			const node = reconstituteRoot(messenger.handler, rawNode)
+
+			trackLoading(node, response.isFullyLoaded)
+
+			if (isUrl) {
+				const filteredURL = value.split('?')[0]
+				this.urlToUUID.set(filteredURL, node.key)
+				if (uuidToUrls.has(node.key)) uuidToUrls.set(node.key, [])
+				uuidToUrls.get(node.key)?.push(filteredURL)
+			}
+
+			this.zipByUUID.set(node.key, node)
+
+			return node
+		},
+		archiveUpdate: function (msg) {
+			if (msg.type == 'updated_node_data') {
+				const nodeTarget = msg.node
+				const root = messenger.handler.zipByUUID.get(nodeTarget.root)
+
+				if (root != null) {
+					const node = root.findFileEntry(nodeTarget.path, nodeTarget.relative)
+
+					if (node) {
+						for (const lazy of [node.fileTypeInfo]) {
+							lazy.reset()
+						}
+						;(node as unknown as Partial<DelegateFileZipTreeNode>).onDataUpdate?.()
+					}
+				}
+			} else if (msg.type == 'node_loaded') {
+				const root = messenger.handler.zipByUUID.get(msg.root.root)
+
+				if (root != null) mergeLoadedNode(this, root, msg.node)
+			} else if (msg.type == 'root_loaded') {
+				finishedRoots.add(msg.root.root)
+				uuidToOnFinishedLoadingHolder.get(msg.root.root)?.resolve()
+				uuidToOnFinishedLoadingHolder.delete(msg.root.root)
+			} else if (msg.type == 'root_hashed') {
+				const key = msg.root.root
+				rootHashes.set(key, msg.sha512Hash)
+				hashToUUID.set(msg.sha512Hash, key)
+				if (msg.expectedHash != null && hashToUUID.get(msg.expectedHash) === key)
+					hashToUUID.delete(msg.expectedHash)
+
+				const root = messenger.handler.zipByUUID.get(key)
+				if (root != null) root.hashes = { ...root.hashes, sha512: msg.sha512Hash }
+			}
+
+			this.onArchiveUpdate.stream.sink(msg)
+		},
+		onArchiveUpdate: new EventStream<(msg: ArchiveUpdateTypes) => void>((callbacks) => (msg) => {
+			for (const callback of callbacks) {
+				callback(msg)
+			}
+		}).source,
+	}
+}
diff --git a/packages/ui/src/helpers/toolbox/workers/zip/index.ts b/packages/ui/src/helpers/toolbox/workers/zip/index.ts
new file mode 100644
index 0000000000..dd258134a0
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/workers/zip/index.ts
@@ -0,0 +1,563 @@
+import { v7 as uuidV7 } from 'uuid'
+
+import {
+	computeHash,
+	type FileContentPromise,
+	type FileDetails,
+	type FileTypeInfo,
+	type HashedFileContent,
+	type HashType,
+	resolveContent,
+} from '#ui/helpers/toolbox/file'
+import {
+	isWorker,
+	type Messenger,
+	type ServerMessageHandler,
+	type ServerMessenger,
+	setupAsServer,
+} from '#ui/helpers/toolbox/messenger'
+import { zipHandlerType } from '#ui/helpers/toolbox/workers/registry'
+import type { ZipMessages } from '#ui/helpers/toolbox/workers/zip/api'
+import {
+	type ArchiveUpdateTypes,
+	arrayBufferFromSource,
+	type LazyDataAccess,
+	type NodeTarget,
+	type RootZipTreeNode,
+	type StringMatcher,
+	type UUID_V7,
+	type ZipNode,
+} from '#ui/helpers/toolbox/zip'
+import {
+	type ReadExtraOptions,
+	readZipTreeFromBuffer,
+	readZipTreeFromURL,
+} from '#ui/helpers/toolbox/zip/impl'
+
+export type Sha512 = string
+
+const zipByUUID = new Map<UUID_V7, RootZipTreeNode>()
+
+const hashToUUID = new Map<Sha512, UUID_V7>()
+
+const urlToUUID = new Map<string, UUID_V7>()
+const UUIDToUrls = new Map<UUID_V7, string[]>()
+
+/**
+ * Finds the targeted file. Nested archives are read in the background, so a file not known yet is
+ * looked for again once the archive finishes loading, before it's deemed missing.
+ */
+async function findNodeFrom(target: NodeTarget) {
+	if (!zipByUUID || zipByUUID.size == 0)
+		throw new Error(`Unable to locate node as no known root tree is within the worker!`)
+
+	const root = zipByUUID.get(target.root)
+	if (root == undefined)
+		throw new Error(
+			`Unable to get node '${target.root}:${target.path}' as their is no active root with the hash given namespace hash!`,
+		)
+
+	const node = root.findFileEntry(target.path, target.relative)
+	if (node != undefined || (root as Partial<{ isFullyLoaded: boolean }>).isFullyLoaded !== false)
+		return node
+
+	await root.onFinishedLoading
+	return root.findFileEntry(target.path, target.relative)
+}
+
+async function getNodeFrom(target: NodeTarget) {
+	const node = await findNodeFrom(target)
+	if (node == undefined)
+		throw new Error(
+			`Unable to get node '${target.root}:${target.path}' as their is no active node with the given path!`,
+		)
+
+	return node
+}
+
+function getRootFrom(target: UUID_V7) {
+	if (!zipByUUID || zipByUUID.size == 0)
+		throw new Error(`Unable to locate node as no known root tree is within the worker!`)
+
+	const root = zipByUUID.get(target)
+	if (root == undefined)
+		throw new Error(
+			`Unable to get root '${target}' as their is no active root with the hash given hash!`,
+		)
+
+	return root
+}
+
+function getZipNode(value: string) {
+	if (zipByUUID.has(value)) {
+		return zipByUUID.get(value)
+	}
+
+	const hashedUUID = hashToUUID.get(value)
+	if (hashedUUID != null && zipByUUID.has(hashedUUID)) return zipByUUID.get(hashedUUID)
+
+	if (urlToUUID.has(value)) {
+		const hash = urlToUUID.get(value)!
+		const node = zipByUUID.get(hash)
+
+		if (node) return node
+	}
+
+	return undefined
+}
+
+async function isValidFor(
+	path: string,
+	fileType: () => Promise<FileTypeInfo | null>,
+	pathMatcher?: StringMatcher,
+	mimeMatcher?: StringMatcher,
+) {
+	if (pathMatcher) {
+		const negate = pathMatcher.negate
+		if (
+			pathMatcher.regex &&
+			(negate ? path.match(pathMatcher.regex) : !path.match(pathMatcher.regex))
+		)
+			return false
+		if (
+			pathMatcher.startsWith &&
+			(negate ? path.startsWith(pathMatcher.startsWith) : !path.startsWith(pathMatcher.startsWith))
+		)
+			return false
+		if (
+			pathMatcher.includes &&
+			(negate ? path.includes(pathMatcher.includes) : !path.startsWith(pathMatcher.includes))
+		)
+			return false
+		if (
+			pathMatcher.endsWith &&
+			(negate ? path.endsWith(pathMatcher.endsWith) : !path.endsWith(pathMatcher.endsWith))
+		)
+			return false
+	}
+
+	if (mimeMatcher) {
+		const info = await fileType()
+		if (info == null) return false
+		const mime = info.mime
+		const negate = mimeMatcher.negate
+		if (
+			mimeMatcher.regex &&
+			(negate ? mime.match(mimeMatcher.regex) : !mime.match(mimeMatcher.regex))
+		)
+			return false
+		if (
+			mimeMatcher.startsWith &&
+			(negate ? mime.startsWith(mimeMatcher.startsWith) : !mime.startsWith(mimeMatcher.startsWith))
+		)
+			return false
+		if (
+			mimeMatcher.includes &&
+			(negate ? mime.includes(mimeMatcher.includes) : !mime.includes(mimeMatcher.includes))
+		)
+			return false
+		if (
+			mimeMatcher.endsWith &&
+			(negate ? mime.endsWith(mimeMatcher.endsWith) : !mime.endsWith(mimeMatcher.endsWith))
+		)
+			return false
+	}
+
+	return true
+}
+
+/** Stops anything still running for the archive, such as fetching the rest of it. */
+function closeRoot(root: RootZipTreeNode | undefined) {
+	;(root as Partial<{ close: () => void }> | undefined)?.close?.()
+}
+
+/**
+ * Maps the archive's actual hash to it, dropping the hash it was opened with when that turns out to
+ * be wrong, and lets every connection know.
+ */
+function onArchiveHashed(
+	messenger: ServerMessenger<ZipMessages>,
+	root: RootZipTreeNode,
+	sha512Hash: Sha512,
+	expectedHash?: Sha512,
+) {
+	root.hashes = { ...root.hashes, sha512: sha512Hash }
+	hashToUUID.set(root.hashes!.sha512!, root.key)
+
+	const mismatched = expectedHash != null && expectedHash !== sha512Hash
+	if (mismatched) {
+		messenger.logger.warn(
+			`Archive '${root.key}' was opened with SHA-512 '${expectedHash}' but its contents hash to '${sha512Hash}'`,
+		)
+		if (hashToUUID.get(expectedHash) === root.key) hashToUUID.delete(expectedHash)
+	}
+
+	broadcastArchiveUpdate(messenger, {
+		type: 'root_hashed',
+		root: { root: root.key },
+		sha512Hash: sha512Hash,
+		expectedHash: mismatched ? expectedHash : undefined,
+	})
+}
+
+/**
+ * Sends an archive update to every connection, i.e. the main thread (the server itself) and any
+ * peer worker, except the one given.
+ */
+function broadcastArchiveUpdate(
+	messenger: ServerMessenger<ZipMessages>,
+	update: ArchiveUpdateTypes,
+	except?: Messenger<ZipMessages>,
+) {
+	messenger.forConnections((connection) => {
+		messenger.sendClientMessage(connection, async () => ({ channel: 'archive_update', ...update }))
+	}, except)
+}
+
+export const messageHandler: ServerMessageHandler<ZipMessages> = (
+	messenger,
+	msg,
+	resolver,
+	sender,
+) => {
+	return resolver(msg, {
+		lazy_read: async (msg) => {
+			const node = await getNodeFrom(msg)
+
+			return {
+				key: msg.key,
+				value: await (node as LazyDataAccess)[msg.key].get(),
+			}
+		},
+		source_read: async (msg) => {
+			return (await getNodeFrom(msg)).asText(msg.options)
+		},
+		hash_read: async (msg) => {
+			return { hash: await (await getNodeFrom(msg)).hash(msg.algorithm) }
+		},
+		archive_hash_read: async (msg) => {
+			const root = getRootFrom(msg.root) as RootZipTreeNode &
+				Partial<{ hash: (type: HashType) => Promise<string> }>
+			if (!root.hash) throw new Error(`Archive '${msg.root}' can't compute its own hashes`)
+			return { hash: await root.hash(msg.algorithm) }
+		},
+		node_read: async (msg) => {
+			const node = msg.optional ? await findNodeFrom(msg) : await getNodeFrom(msg)
+
+			return {
+				buffer: node ? await node.getBuffer() : undefined,
+			}
+		},
+		node_write: async (msg) => {
+			const node = await getNodeFrom(msg)
+			await node.setBuffer(async () => msg.buffer, msg.options)
+			broadcastArchiveUpdate(
+				messenger,
+				{
+					type: 'updated_node_data',
+					node: {
+						root: node.root!.key,
+						path: node.path,
+					},
+				},
+				sender,
+			)
+			return {
+				wasWritten: true,
+			}
+		},
+		read_zip_tree: async (msg) => {
+			let tree: RootZipTreeNode | undefined = undefined
+
+			if (msg.sha512Hash) tree = getZipNode(msg.sha512Hash)
+			if (tree == null && msg.url) tree = getZipNode(msg.url)
+			if (tree == null) {
+				const key = uuidV7()
+				const readOptions: ReadExtraOptions = {
+					key: key,
+					name: msg.name,
+					logger: messenger.logger,
+					innerArchiveReadCallback: (_root: RootZipTreeNode, node: ZipNode) =>
+						broadcastArchiveUpdate(messenger, {
+							type: 'node_loaded',
+							root: { root: key },
+							node: copyChildNode(node),
+						}),
+				}
+
+				if (msg.data_type == 'buffer') {
+					const buffer = await arrayBufferFromSource(msg.buffer)
+					const sha512Hash = await computeHash(buffer, 'sha512')
+
+					tree = await readZipTreeFromBuffer(messenger.logger, buffer, readOptions)
+
+					onArchiveHashed(messenger, tree, sha512Hash, msg.sha512Hash)
+				} else {
+					const url = msg.url
+					tree = await readZipTreeFromURL(messenger.logger, url, {
+						...readOptions,
+						archiveHashedCallback: (root, sha512Hash) =>
+							onArchiveHashed(messenger, root, sha512Hash, msg.sha512Hash),
+						rangeOptions: {
+							...msg.rangeOptions,
+							onProgress(current, total) {
+								broadcastArchiveUpdate(messenger, {
+									type: 'archive_download',
+									root: key,
+									url: url,
+									current: current,
+									total: total,
+								})
+							},
+						},
+					})
+
+					// Trusted until the download finishes and the archive is hashed, unless that already happened
+					if (msg.sha512Hash && tree.sha512Hash == null) hashToUUID.set(msg.sha512Hash, tree.key)
+				}
+
+				tree.onFinishedLoading.then(() =>
+					broadcastArchiveUpdate(messenger, { type: 'root_loaded', root: { root: key } }),
+				)
+
+				zipByUUID.set(tree.key, tree)
+
+				if (msg.url) {
+					urlToUUID.set(msg.url, tree.key)
+
+					const urls = UUIDToUrls.has(tree.key)
+						? UUIDToUrls.get(tree.key)!
+						: (() => {
+								const array = new Array<string>()
+								UUIDToUrls.set(tree.key, array)
+								return array
+							})()
+
+					urls.push(msg.url)
+				}
+			}
+
+			return {
+				node: copyRoot(tree),
+				isFullyLoaded: (tree as Partial<{ isFullyLoaded: boolean }>).isFullyLoaded ?? true,
+			}
+		},
+		get_zip_tree: async (msg) => {
+			const node = getZipNode(msg.value)
+			const copiedTree = node ? copyRoot(node) : undefined
+
+			return {
+				node: copiedTree,
+				isFullyLoaded:
+					(node as Partial<{ isFullyLoaded: boolean }> | undefined)?.isFullyLoaded ?? true,
+			}
+		},
+		collect_files: async (msg) => {
+			const root = getRootFrom(msg.root)
+
+			const mimeMatcher = msg.matcher?.mime
+			const pathMatcher = msg.matcher?.path
+
+			const entries = root.fileEntries
+
+			if (mimeMatcher || pathMatcher) {
+				const files: FileDetails[] = []
+				let index = 0
+				const size = entries.size
+
+				const promises: Promise<void>[] = []
+
+				for (const file of entries.values()) {
+					// TODO: ADD ABILITY TO TELL WORKERS TO NOT DEBUG LOG THOUGH A MESSAGE?
+					messenger.logger.debug(`[File Collector]: Looking at ${index}/${size} '${file.path}'`)
+
+					index += 1
+
+					promises.push(
+						isValidFor(
+							file.path,
+							async () => file.fileTypeInfo.get(),
+							pathMatcher,
+							mimeMatcher,
+						).then((value) => {
+							if (value) files.push({ fullPath: file.path, name: file.name })
+						}),
+					)
+				}
+
+				await Promise.all(promises)
+
+				return {
+					files: files,
+				}
+			} else {
+				return {
+					files: entries
+						.values()
+						.map((entry) => {
+							return { fullPath: entry.path, name: entry.name }
+						})
+						.toArray(),
+				}
+			}
+		},
+		collect_files_hashed: async (msg) => {
+			const root = getRootFrom(msg.root)
+
+			const mimeMatcher = msg.matcher?.mime
+			const pathMatcher = msg.matcher?.path
+
+			const entries = root.fileEntries
+
+			const hashes = new Set<string>()
+
+			let files: HashedFileContent[]
+
+			if (mimeMatcher || pathMatcher || msg.deduplicate) {
+				files = []
+				const baseFiles: (FileContentPromise & { sha512: () => Promise<string> })[] = []
+
+				const filterPromises: Promise<void>[] = []
+
+				for (const file of entries.values()) {
+					// TODO: ADD ABILITY TO TELL WORKERS TO NOT DEBUG LOG THOUGH A MESSAGE?
+					//this.logger().debug(`[File Collector]: Looking at ${index}/${size} '${file.path}'`);
+
+					filterPromises.push(
+						isValidFor(
+							file.path,
+							async () => file.fileTypeInfo.get(),
+							pathMatcher,
+							mimeMatcher,
+						).then((value) => {
+							if (value)
+								baseFiles.push({
+									fullPath: file.path,
+									name: file.name,
+									content: () => file.getBuffer(),
+									sha512: () => file.hash('sha512'),
+								})
+						}),
+					)
+				}
+
+				await Promise.all(filterPromises)
+
+				const baseFileContent = await Promise.all(
+					baseFiles.map((filePromise) => resolveContent(filePromise)),
+				)
+
+				const duplicateCheckPromises: Promise<void>[] = []
+
+				async function isDuplicateFile(file: { sha512: () => Promise<string> }) {
+					const sha512 = await file.sha512()
+
+					if (msg.deduplicate) {
+						if (hashes.has(sha512)) return { result: true, sha512: sha512 }
+
+						hashes.add(sha512)
+					}
+
+					return { result: false, sha512: sha512 }
+				}
+
+				for (const file of baseFileContent) {
+					duplicateCheckPromises.push(
+						isDuplicateFile(file).then((value) => {
+							if (!value.result) files.push({ ...file, sha512: value.sha512 })
+						}),
+					)
+				}
+
+				if (duplicateCheckPromises.length > 0) await Promise.all(duplicateCheckPromises)
+			} else {
+				files = await Promise.all(
+					entries
+						.values()
+						.map(async (file) => {
+							const buffer = await file.getBuffer()
+							const sha512 = await file.hash('sha512')
+
+							return { fullPath: file.path, name: file.name, content: buffer, sha512: sha512 }
+						})
+						.toArray(),
+				)
+			}
+
+			return { files: files }
+		},
+		close_zip_tree: async (msg) => {
+			closeRoot(zipByUUID.get(msg.root))
+			zipByUUID.delete(msg.root)
+
+			const urls = UUIDToUrls.get(msg.root)
+			if (urls) for (const url of urls) urlToUUID.delete(url)
+			UUIDToUrls.delete(msg.root)
+
+			for (const [hash, key] of hashToUUID) if (key === msg.root) hashToUUID.delete(hash)
+
+			return {
+				err: undefined,
+				wasClosed: true,
+			}
+		},
+		close_all_zip_trees: async () => {
+			for (const root of zipByUUID.values()) closeRoot(root)
+			zipByUUID.clear()
+			urlToUUID.clear()
+			UUIDToUrls.clear()
+			hashToUUID.clear()
+
+			return {
+				err: undefined,
+				wasClosed: true,
+			}
+		},
+	})
+}
+
+export function copyRoot(node: RootZipTreeNode): RootZipTreeNode {
+	const cloneNode = {
+		children: new Map(),
+		key: node.key,
+		name: node.name,
+		path: node.path,
+		type: node.type,
+		metadata: { directory: true },
+		sha512Hash: node.sha512Hash,
+		hashes: node.hashes,
+	} as unknown as RootZipTreeNode
+
+	return copyNodeData(cloneNode, node)
+}
+
+export function copyChildNode(node: ZipNode): ZipNode {
+	// Required to strip the functions that can not cross the message barrier
+	const cloneMetaData = {
+		...node.metadata,
+		getData: undefined,
+		arrayBuffer: undefined,
+	}
+
+	const cloneNode = {
+		name: node.name,
+		path: node.path,
+		type: node.type,
+		metadata: cloneMetaData,
+		children: new Map(),
+	} as unknown as ZipNode
+
+	return copyNodeData(cloneNode, node)
+}
+
+function copyNodeData<N extends ZipNode>(clone: N, oldNode: N): N {
+	for (const entry of oldNode.children.values()) {
+		clone.children.set(entry.name, copyChildNode(entry))
+	}
+
+	return clone
+}
+
+/** In development the handler is also loaded on the main thread as a bypass, where no server is set up. */
+if (isWorker())
+	setupAsServer<ZipMessages>(zipHandlerType, self as unknown as Worker, messageHandler)
diff --git a/packages/ui/src/helpers/toolbox/zip/impl.ts b/packages/ui/src/helpers/toolbox/zip/impl.ts
new file mode 100644
index 0000000000..cc560b22e1
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/zip/impl.ts
@@ -0,0 +1,531 @@
+import {
+	BlobReader,
+	type EntryMetaData,
+	type FileEntry,
+	Uint8ArrayReader,
+	Uint8ArrayWriter,
+	ZipReader,
+	ZipWriter,
+	type ZipWriterAddDataOptions,
+} from '@zip.js/zip.js'
+import { v7 as uuidV7 } from 'uuid'
+
+import { type DecompilerResult, DEFAULT_DECOMPILE_OPTIONS } from '#ui/helpers/toolbox/decompile'
+import {
+	computeHash,
+	type FileTypeInfo,
+	getFileTypeInfo,
+	type HashType,
+} from '#ui/helpers/toolbox/file'
+import {
+	type LazyMutableValue,
+	lazyMutableValue,
+	type LazyMutableValueImpl,
+	type LazyValue,
+} from '#ui/helpers/toolbox/misc'
+import type { Logger } from '#ui/helpers/toolbox/misc/logging'
+import { decompileMessengerType, messengerRegistry } from '#ui/helpers/toolbox/workers/registry'
+import {
+	arrayBufferFromSource,
+	type ArrayBufferSource,
+	type EntryData,
+	fileOrNull,
+	type FileZipTreeNode,
+	RootZipTreeNode,
+	type SourceOptions,
+	type TypedArrayBuffer,
+	type TypedBlob,
+	type UUID_V7,
+	type ZipFileContent,
+	type ZipNode,
+	ZipTreeNode,
+} from '#ui/helpers/toolbox/zip'
+import {
+	RangeCacheReader,
+	type RangeCacheReaderOptions,
+} from '#ui/helpers/toolbox/zip/range-cache-reader.ts'
+
+/**
+ * Method used to generate the zip tree of the given blob returning the root node of the entire zip file
+ */
+export async function readZipTreeFromBuffer(
+	logger: Logger,
+	buffer: ArrayBuffer,
+	options: ReadExtraOptions = {},
+): Promise<RootZipTreeNodeImpl> {
+	const root = new RootZipTreeNodeImpl(
+		logger,
+		options.key ?? uuidV7(),
+		Promise.withResolvers<void>(),
+	)
+	root.setContent(buffer)
+	const result = await readZipDataToNode(root, root, zipReaderFromBuffer(buffer), options)
+	root.markEntriesRead()
+	return result
+}
+
+export async function readZipTreeFromURL(
+	logger: Logger,
+	url: string,
+	options: ReadExtraOptions & { rangeOptions?: RangeCacheReaderOptions } = {},
+): Promise<RootZipTreeNodeImpl> {
+	const root = new RootZipTreeNodeImpl(
+		logger,
+		options.key ?? uuidV7(),
+		Promise.withResolvers<void>(),
+	)
+	const rangeReader = new RangeCacheReader(url, options.rangeOptions)
+	root.closeCallbacks.push(() => rangeReader.abort())
+
+	const result = await readZipDataToNode(root, root, new ZipReader(rangeReader), options)
+	root.markEntriesRead()
+
+	// Files are fetched on demand ahead of this, but caching the rest makes later reads instant
+	rangeReader
+		.toBlob()
+		.then(async (blob) => {
+			if (root.isClosed) return
+			root.setContent(await blob.arrayBuffer())
+			const sha512Hash = await root.hash('sha512')
+			if (!root.isClosed) options.archiveHashedCallback?.(root, sha512Hash)
+		})
+		.catch((err) => {
+			if (!root.isClosed)
+				logger.warn(`Unable to fetch the rest of '${url}' in the background`, { err: err })
+		})
+
+	return result
+}
+
+export async function writeZipTree(node: ZipTreeNodeImpl): Promise<ArrayBuffer | undefined> {
+	const zip = new ZipWriter(new Uint8ArrayWriter())
+
+	if (node.type == 'directory') {
+		const children = node.children
+		for (const node of Object.values(children)) {
+			const blob = await node.blob()
+			const reader = blob != null ? new BlobReader(blob) : null
+			if (reader) await zip.add(node.path, reader, node.metadata)
+		}
+	}
+
+	return (await zip.close()).buffer
+}
+
+export const zipArchiveExtensionRegex = /\.(ear|war|jar|zip|mrpack)$/
+
+export type ReadExtraOptions = {
+	name?: string
+	logger?: Logger
+	/** Key for the root, for callers that need to refer to it before the read finishes. */
+	key?: UUID_V7
+	/**
+	 * Called once a nested archive's tree has been read. When given, nested archives are read in
+	 * the background instead of being waited on, with `onFinishedLoading` resolving once all are.
+	 */
+	innerArchiveReadCallback?: (root: RootZipTreeNode, node: FileZipTreeNode) => void
+	/** Called with the SHA-512 of an archive read from a URL, once all of it has been downloaded. */
+	archiveHashedCallback?: (root: RootZipTreeNode, sha512Hash: string) => void
+}
+
+function zipReaderFromBuffer(buffer: ArrayBuffer): ZipReader<Uint8Array<ArrayBuffer>> {
+	return new ZipReader(new Uint8ArrayReader(new Uint8Array(buffer)))
+}
+
+/**
+ * Reads a given buffer and apply its content to the baseNode passed with the primary
+ */
+async function readZipDataToNode<N extends ZipNode>(
+	rootNode: RootZipTreeNodeImpl,
+	baseNode: N,
+	reader: ZipReader<unknown>,
+	options: ReadExtraOptions,
+): Promise<N> {
+	const { name, logger, innerArchiveReadCallback } = options
+	logger?.debug(`Setting up to read ${name} archive.`)
+
+	const zipFiles: Promise<FileZipTreeNode>[] = []
+
+	async function handleEntry(entry: EntryData) {
+		const segments = entry.filename.split('/').filter(Boolean) // Remove empty strings from trailing slashes
+
+		let parentNode: ZipNode = baseNode
+
+		let path = ''
+
+		for (const [index, segment] of segments.entries()) {
+			path = path.length == 0 ? segment : `${path}/${segment}`
+
+			let segmentNode = parentNode.children.get(segment)
+
+			if (!segmentNode) {
+				const fileEntry =
+					index === segments.length - 1 && !entry.directory ? fileOrNull(entry) : null
+
+				if (fileEntry && fileEntry.filename == path) {
+					segmentNode = parentNode.addFile(segment, undefined, fileEntry)
+				} else {
+					segmentNode = parentNode.addDirectory(segment, entry)
+				}
+			}
+
+			// Entry data isn't readable until all entries are, so buffers are set up afterwards
+			if (segmentNode.type === 'directory') parentNode = segmentNode
+		}
+	}
+
+	/**
+	 * Files are read lazily, which with a ranged reader only fetches their bytes once asked for.
+	 * Nested archives are read right away to build their trees.
+	 */
+	function handleFileNode(
+		fileEntry: FileEntry,
+		fileNode: FileZipTreeNode,
+	): Promise<FileZipTreeNode> | undefined {
+		if (fileEntry.encrypted || !zipArchiveExtensionRegex.test(fileNode.name)) {
+			fileNode.setBuffer(() => fileEntry.arrayBuffer())
+			return undefined
+		}
+
+		const archivePromise = fileEntry
+			.arrayBuffer()
+			.then(async (buffer) => {
+				await fileNode.setBuffer(buffer)
+				await readZipDataToNode(rootNode, fileNode, zipReaderFromBuffer(buffer), options)
+				innerArchiveReadCallback?.(rootNode, fileNode)
+				return fileNode
+			})
+			.catch((err) => {
+				logger?.warn(`Unable to read inner archive '${fileNode.path}'`, { err: err })
+				return fileNode
+			})
+
+		rootNode.trackInnerArchive(archivePromise)
+
+		return archivePromise
+	}
+
+	logger?.debug(`Reading entries ${name} archive.`)
+
+	const entries = await reader.getEntries({
+		onprogress: (_progress, _total, entry) => handleEntry(entry as EntryData),
+	})
+
+	for (const entry of entries) {
+		const fileNode = rootNode.fileEntries.get(
+			[baseNode.path].concat(entry.filename.split('/')).join('/'),
+		)
+		if (fileNode == null) continue
+
+		// TODO: SOMETHING HAS GONE WRONG IF WE HAVE A FILE NODE BUT NO FILE ENTRY
+		const fileEntry = fileOrNull(entry)
+		if (fileEntry == null) continue
+
+		const bufferSetPromise = handleFileNode(fileEntry, fileNode)
+		if (bufferSetPromise != null) zipFiles.push(bufferSetPromise)
+	}
+
+	logger?.debug(
+		`Entries from ${name} archive have been read${zipFiles.length > 0 ? ', waiting for given inner Zip Files' : '.'}`,
+	)
+
+	// TODO: MAKE INNER JARS ASYNC I.E. UPDATE LATER TYPE DEAL AFTER THEY ARE DONE LOADING....
+	if (zipFiles.length > 0 && innerArchiveReadCallback == null) await Promise.all(zipFiles)
+
+	return baseNode
+}
+
+class ZipTreeNodeImpl extends ZipTreeNode {
+	protected override createFileNode(
+		root: RootZipTreeNodeImpl,
+		parent: ZipNode,
+		name: string,
+		path: string,
+		buffer: ArrayBufferSource | undefined,
+		metadata: FileEntry,
+	): FileZipTreeNode {
+		return new FileZipTreeNodeImpl(root, parent, name, path, buffer, 'file', metadata)
+	}
+
+	protected override createNode(
+		root: RootZipTreeNodeImpl,
+		parent: ZipNode,
+		name: string,
+		path: string,
+		metadata?: EntryMetaData,
+	): ZipNode {
+		return new ZipTreeNodeImpl(root, parent, name, path, 'directory', metadata) as ZipNode
+	}
+}
+
+/**
+ * Base Node type for a given Archive Tree acting as the holder for the base children
+ * combined with extra info like maps for all entries and all file entries within the archive
+ */
+class RootZipTreeNodeImpl extends RootZipTreeNode {
+	loadingInnerZipCount: number = 0
+	onFinishedLoadingHolder: PromiseWithResolvers<void>
+	isFullyLoaded = false
+	isClosed = false
+	/** Stops work still running for this archive (e.g. background downloads) once it is closed. */
+	closeCallbacks: (() => void)[] = []
+	private entriesRead = false
+	/** The whole archive's bytes, once all of it is at hand (for a URL, once downloaded). */
+	private content = Promise.withResolvers<ArrayBuffer>()
+	private hashResults = new Map<HashType, Promise<string>>()
+
+	setContent(data: ArrayBuffer) {
+		this.content.resolve(data)
+	}
+
+	/** The whole archive's hash of the given type, once all of it is at hand; kept in `hashes` too. */
+	hash(type: HashType): Promise<string> {
+		let result = this.hashResults.get(type)
+		if (!result) {
+			result = this.content.promise.then(async (data) => {
+				const value = await computeHash(data, type)
+				this.hashes = { ...this.hashes, [type]: value }
+				return value
+			})
+			this.hashResults.set(type, result)
+		}
+		return result
+	}
+
+	constructor(logger: Logger, key: UUID_V7, onFinishedLoadingHolder: PromiseWithResolvers<void>) {
+		super(key, onFinishedLoadingHolder.promise)
+		this.logger = logger
+		this.onFinishedLoadingHolder = onFinishedLoadingHolder
+	}
+
+	/** Counts a nested archive (at any depth) as loading until the given read settles. */
+	trackInnerArchive(read: Promise<unknown>) {
+		this.loadingInnerZipCount += 1
+		read.finally(() => {
+			this.loadingInnerZipCount -= 1
+			this.resolveIfLoaded()
+		})
+	}
+
+	close() {
+		if (this.isClosed) return
+		this.isClosed = true
+		for (const callback of this.closeCallbacks) callback()
+	}
+
+	/** Marks the top level entries as read, after which the root finishes once no nested archive is loading. */
+	markEntriesRead() {
+		this.entriesRead = true
+		this.resolveIfLoaded()
+	}
+
+	private resolveIfLoaded() {
+		if (this.isFullyLoaded || !this.entriesRead || this.loadingInnerZipCount > 0) return
+		this.isFullyLoaded = true
+		this.onFinishedLoadingHolder.resolve()
+	}
+
+	protected override createFileNode(
+		root: RootZipTreeNode,
+		parent: ZipNode,
+		name: string,
+		path: string,
+		buffer: ArrayBufferSource | undefined,
+		metadata: FileEntry,
+	): FileZipTreeNode {
+		return new FileZipTreeNodeImpl(
+			root as RootZipTreeNodeImpl,
+			parent as ZipNode,
+			name,
+			path,
+			buffer,
+			'file',
+			metadata,
+		)
+	}
+
+	protected override createNode(
+		root: RootZipTreeNode,
+		parent: ZipNode,
+		name: string,
+		path: string,
+		metadata?: EntryMetaData,
+	): ZipNode {
+		return new ZipTreeNodeImpl(root, parent, name, path, 'directory', metadata) as ZipNode
+	}
+}
+
+class FileZipTreeNodeImpl extends ZipTreeNodeImpl implements FileZipTreeNode {
+	isSetup: boolean
+	private arrayBuffer: LazyMutableValue<ArrayBuffer>
+
+	declare type: 'file'
+	declare metadata: FileEntry
+	declare root: RootZipTreeNode
+
+	fileTypeInfo: LazyValue<FileTypeInfo | null>
+
+	asText: (options?: SourceOptions) => Promise<DecompilerResult>
+
+	private readonly hashes = new Map<HashType, LazyValue<string>>()
+
+	hash(type: HashType): Promise<string> {
+		let value = this.hashes.get(type)
+		if (!value) {
+			value = this.arrayBuffer.lazyMap(async (buffer) => computeHash(buffer, type))
+			this.hashes.set(type, value)
+		}
+		return value.get()
+	}
+
+	constructor(
+		root: RootZipTreeNode,
+		parent: ZipNode,
+		name: string,
+		path: string,
+		buffer: ArrayBufferSource | undefined,
+		type: 'file',
+		metadata?: FileEntry,
+	) {
+		super(root, parent, name, path, type, metadata)
+
+		if (buffer) {
+			this.isSetup = true
+			this.arrayBuffer = lazyMutableValue(() => arrayBufferFromSource(buffer))
+		} else {
+			this.isSetup = false
+			this.arrayBuffer = lazyMutableValue(() => {
+				return new Promise<ArrayBuffer>((resolve, reject) => {
+					const id = setInterval(async () => {
+						if (this.isSetup) {
+							clearInterval(id)
+							return this.getBuffer().then(resolve, reject)
+						} else {
+							root.logger?.debug(`Waiting for '${this.path}' buffer to be set`)
+						}
+					}, 100)
+				})
+			})
+		}
+
+		this.fileTypeInfo = this.arrayBuffer.lazyMap(
+			async (buffer) => await getFileTypeInfo(this.path, buffer),
+		)
+
+		const map = new Map<Partial<SourceOptions>, LazyValue<DecompilerResult>>()
+
+		;(this.arrayBuffer as LazyMutableValueImpl<unknown>)._onResetEvent.subscribe(() => map.clear())
+
+		this.asText = async (options?: SourceOptions) => {
+			let finalOptions: SourceOptions | undefined = undefined
+			if (options == null || !map.has(options)) {
+				const type = await this.fileTypeInfo.get()
+				let isValid = false
+
+				if (type != null) {
+					if (
+						this.name.endsWith('.class') ||
+						type.mime == 'application/java-vm' ||
+						type.extension == 'class' ||
+						options?.forcedType == 'class'
+					) {
+						finalOptions = options ?? DEFAULT_DECOMPILE_OPTIONS
+						if (!map.has(finalOptions)) {
+							const lazyValue = this.arrayBuffer.lazyMap(async (buffer) => {
+								let error: string | undefined = undefined
+
+								const decompiler = (await messengerRegistry?.getMessenger(decompileMessengerType))!
+
+								if (buffer != undefined) {
+									return await decompiler.decompile({
+										targetFile: {
+											fullPath: this.path,
+											name: this.name,
+											content: buffer,
+											root: this.root.key,
+										} as ZipFileContent,
+										resources: this.parent?.children
+											.values()
+											.map((entry) => {
+												return { fullPath: entry.path, name: entry.name }
+											})
+											.toArray(),
+										options: options,
+									})
+								}
+
+								error = 'Unable to decompile file as Blob was found to be undefined!'
+
+								return { error, wasDecompiled: false, asString: error } as DecompilerResult
+							})
+							map.set(options ?? DEFAULT_DECOMPILE_OPTIONS, lazyValue)
+							return lazyValue.get()
+						}
+						isValid = true
+					} else if (type.mime.startsWith('text') || options?.forcedType == 'text') {
+						finalOptions = options ?? { forcedType: 'text' }
+						if (!map.has(finalOptions)) {
+							const lazyValue = this.arrayBuffer.lazyMap(async (buffer) => {
+								const str = new TextDecoder().decode(buffer)
+								return { source: str, wasDecompiled: true, asString: str } as DecompilerResult
+							})
+							map.set({ forcedType: 'text' }, lazyValue)
+							return lazyValue.get()
+						}
+						isValid = true
+					}
+				}
+
+				if (!isValid) {
+					const msg =
+						'Current file was found not to be either a class or text, no sources could be created'
+					return Promise.resolve({
+						source: msg,
+						wasDecompiled: false,
+						asString: msg,
+					} as DecompilerResult)
+				}
+			} else {
+				finalOptions = options
+			}
+
+			return map.get(finalOptions!)!.get()
+		}
+	}
+
+	async setBuffer(buffer: ArrayBufferSource, options?: ZipWriterAddDataOptions) {
+		this.arrayBuffer.updateGetter(() => arrayBufferFromSource(buffer))
+		this.type = 'file'
+		this.metadata = {
+			...options,
+			...this.metadata,
+		} as FileEntry
+
+		this.isSetup = true
+
+		return this
+	}
+
+	getBuffer(): Promise<ArrayBuffer> {
+		return this.arrayBuffer.get()
+	}
+
+	async getFileType(): Promise<FileTypeInfo | null> {
+		return this.fileTypeInfo.get()
+	}
+
+	async getTypedBlob(): Promise<TypedBlob> {
+		const buffer = await this.getBuffer()
+		const fileType = await this.fileTypeInfo.get()
+		const typedBlob = new Blob([buffer], { type: fileType?.mime }) as TypedBlob
+		typedBlob.fileType = fileType
+		return typedBlob
+	}
+
+	async getTypedBuffer(): Promise<TypedArrayBuffer> {
+		const buffer = await this.getBuffer()
+		const typedBuffer = buffer as TypedArrayBuffer
+		typedBuffer.fileType = await this.fileTypeInfo.get()
+		return typedBuffer
+	}
+}
diff --git a/packages/ui/src/helpers/toolbox/zip/index.ts b/packages/ui/src/helpers/toolbox/zip/index.ts
new file mode 100644
index 0000000000..dfdfb88001
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/zip/index.ts
@@ -0,0 +1,598 @@
+import type {
+	DirectoryEntry,
+	EntryMetaData,
+	FileEntry,
+	ZipWriterAddDataOptions,
+} from '@zip.js/zip.js'
+
+import {
+	type DecompileOptions,
+	type DecompilerResult,
+	DEFAULT_DECOMPILE_OPTIONS,
+} from '#ui/helpers/toolbox/decompile'
+import type {
+	AsyncMaybe,
+	ContentHashes,
+	FileDetails,
+	FileTypeInfo,
+	HashedFileContent,
+	HashType,
+} from '#ui/helpers/toolbox/file'
+import { type EventSource, type LazyValue, lazyValue, TreeNode } from '#ui/helpers/toolbox/misc'
+import type { Logger } from '#ui/helpers/toolbox/misc/logging'
+import type { RangeCacheReaderOptions } from '#ui/helpers/toolbox/zip/range-cache-reader.ts'
+
+// TODO: SWITCH TO ZipWriterAddDataOptions instead of EntryMetaData ???
+export type EntryData = EntryMetaData & { directory: boolean }
+
+export type ZipNodeType = {
+	file: FileZipTreeNode
+	directory: ZipTreeNode & { type: 'directory' }
+}
+
+export type ZipNodeTypes = keyof ZipNodeType
+export type ZipNode = ZipNodeType[ZipNodeTypes]
+
+export const nodeTypeToOrdinal = {
+	directory: 1,
+	file: 0,
+} as Record<ZipNodeTypes, number>
+
+export const zipExtensionRegex = /\.(ear|war|jar|zip|mrpack)$/
+export const zipMimeTypes = new Set([
+	'application/x-zip-compressed',
+	'application/zip',
+	'application/zip-compressed',
+	'application/java-archive',
+])
+
+export function isZipArchive<BL extends boolean | undefined = undefined>(
+	node: ZipNode,
+	verifyWithData?: BL,
+): AsyncMaybe<BL, boolean> {
+	return (
+		node.type == 'file'
+			? verifyWithData
+				? node
+						.getFileType()
+						.then((type) =>
+							type != null ? zipMimeTypes.has(type.mime) : zipExtensionRegex.test(node.name),
+						)
+				: zipExtensionRegex.test(node.name)
+			: false
+	) as AsyncMaybe<BL, boolean>
+}
+
+function nodeToOrdinal(node: ZipNode) {
+	return isZipArchive(node) ? 2 : node.type == 'directory' ? 1 : 0
+}
+
+export function sortZipNodes(node1: ZipNode, node2: ZipNode) {
+	const order = nodeToOrdinal(node1) - nodeToOrdinal(node2)
+
+	return order == 0 ? node1.name.localeCompare(node2.name, 'en') : -order
+}
+
+export type ArrayBufferSource = (() => Promise<ArrayBuffer>) | Promise<ArrayBuffer> | ArrayBuffer
+
+export function arrayBufferFromSource(source: ArrayBufferSource): Promise<ArrayBuffer> {
+	return typeof source === 'function' ? source() : Promise.resolve(source)
+}
+
+export interface ZipFileContent extends FileDetails {
+	root: UUID_V7
+	content: ArrayBuffer
+}
+
+export class ZipTreeNode extends TreeNode<ZipNode> {
+	root?: RootZipTreeNode
+	type: ZipNodeTypes
+	metadata: EntryData
+
+	constructor(
+		root: RootZipTreeNode | undefined,
+		parent: ZipNode | undefined,
+		name: string,
+		path: string,
+		type: ZipNodeTypes,
+		metadata?: EntryMetaData,
+	) {
+		super(parent, name, path)
+		this.root = root
+		this.type = type
+		this.metadata = {
+			...(metadata ?? {}),
+			directory: type == 'directory',
+		} as EntryData
+	}
+
+	remove() {
+		this.children.delete(this.name)
+
+		this.root?.removeNodeFromRoot(this as ZipNode)
+	}
+
+	addFile(
+		name: string,
+		buffer: ArrayBufferSource | undefined,
+		metadata: FileEntry,
+	): FileZipTreeNode {
+		return this.addNode(name, (root, parent, name, path) =>
+			this.createFileNode(root, parent, name, path, buffer, metadata),
+		)
+	}
+
+	protected createFileNode(
+		root: RootZipTreeNode,
+		parent: ZipNode,
+		name: string,
+		path: string,
+		buffer: ArrayBufferSource | undefined,
+		metadata: FileEntry,
+	): FileZipTreeNode {
+		const node = new DelegateFileZipTreeNode(root, parent, name, path, metadata)
+		if (buffer != null) node.setBuffer(buffer)
+		return node
+	}
+
+	addDirectory(name: string, metadata?: EntryMetaData): ZipNode {
+		return this.addNode(name, (root, parent, name, path) =>
+			this.createNode(root, parent, name, path, metadata),
+		)
+	}
+
+	protected createNode(
+		root: RootZipTreeNode,
+		parent: ZipNode,
+		name: string,
+		path: string,
+		metadata?: EntryMetaData,
+	): ZipNode {
+		return new ZipTreeNode(root, parent, name, path, 'directory', metadata) as ZipNode
+	}
+
+	addNode<N extends ZipNode>(
+		name: string,
+		nodeBuilder: (root: RootZipTreeNode, parent: ZipNode, name: string, path: string) => N,
+	): N {
+		const root = this.root ?? (this as unknown as RootZipTreeNode)
+		this.children.get(name)?.remove()
+		const node = nodeBuilder(root, this as ZipNode, name, this.path + '/' + name)
+		this.children.set(name, node)
+		root.addNodeToRoot(node)
+		return node
+	}
+
+	asFile(): FileZipTreeNode | undefined {
+		return this.type == 'file' ? (this as unknown as FileZipTreeNode) : undefined
+	}
+
+	/** The archive this node is stored in: the root, or the nested archive (e.g. jar-in-jar) holding it. */
+	getArchive(): RootZipTreeNode | FileZipTreeNode {
+		for (let parent = this.parent; parent != null; parent = parent.parent) {
+			if (isZipArchive(parent)) return parent as FileZipTreeNode
+		}
+		return this.root ?? (this as unknown as RootZipTreeNode)
+	}
+}
+
+export type UUID_V7 = string
+
+/**
+ * Root tree node — extends TreeNode with a flat entries list.
+ */
+export class RootZipTreeNode extends ZipTreeNode {
+	key: UUID_V7
+	entries = new Map<string, ZipNode>()
+	fileEntries = new Map<string, FileZipTreeNode>()
+	relativeFileEntries = new Map<string, FileZipTreeNode>()
+
+	logger?: Logger
+
+	onFinishedLoading: Promise<void>
+
+	/** SHA-512 of the whole archive, once known (for a URL, only after all of it is downloaded). */
+	get sha512Hash() {
+		return this.hashes?.sha512
+	}
+
+	/**
+	 * Hashes of the whole archive computed so far. The SHA-512 is computed once all of it is
+	 * downloaded; the others only once asked for (see `ZipHandler.readArchiveHash`).
+	 */
+	hashes?: ContentHashes
+
+	declare type: 'directory'
+
+	declare root: undefined
+	declare parent: undefined
+
+	constructor(key: UUID_V7, onFinishedLoading: Promise<void>) {
+		super(undefined, undefined, '', '', 'directory')
+		this.key = key
+		this.onFinishedLoading = onFinishedLoading
+	}
+
+	/**
+	 * @internal Only used to add a node to the given reference maps
+	 */
+	addNodeToRoot(node: ZipNode) {
+		this.entries.set(node.path, node)
+		const fileNode = node.asFile()
+
+		if (fileNode) {
+			this.fileEntries.set(node.path, fileNode)
+			this.relativeFileEntries.set(RootZipTreeNode.relativePathOf(node.path), fileNode)
+		}
+
+		return node
+	}
+
+	/**
+	 * The path of a file within its innermost archive, with a leading slash, e.g. `/a/B.class` for
+	 * both `/a/B.class` and `/META-INF/jars/c.jar/a/B.class`.
+	 */
+	static relativePathOf(path: string) {
+		const parts = path.split('.jar/')
+		const relative = parts[parts.length - 1]
+		return relative.startsWith('/') ? relative : '/' + relative
+	}
+
+	/** Finds a file by its full path, or by its path within its innermost archive when `relative`. */
+	findFileEntry(path: string, relative?: boolean) {
+		return relative
+			? this.relativeFileEntries.get(RootZipTreeNode.relativePathOf(path))
+			: this.fileEntries.get(path)
+	}
+
+	/**
+	 * @internal Only used to remove a node from the given reference maps
+	 */
+	removeNodeFromRoot(node: ZipNode) {
+		this.entries.delete(node.path)
+		this.fileEntries.delete(node.path)
+
+		const relativePath = RootZipTreeNode.relativePathOf(node.path)
+		if (this.relativeFileEntries.get(relativePath) === node)
+			this.relativeFileEntries.delete(relativePath)
+
+		return node
+	}
+}
+
+export type SourceOptions = DecompileOptions & { forcedType?: 'class' | 'text' | undefined }
+
+export interface SourceHandler {
+	asText: (options?: SourceOptions) => Promise<DecompilerResult>
+}
+
+export interface LazyDataAccess {
+	fileTypeInfo: LazyValue<FileTypeInfo | null>
+}
+
+export interface FileZipTreeNode extends ZipTreeNode, LazyDataAccess, SourceHandler {
+	type: 'file'
+
+	/** The file's hash of the given type, computed the first time it's asked for and then kept. */
+	hash(type: HashType): Promise<string>
+
+	metadata: FileEntry
+	isSetup: boolean
+
+	getBuffer(): Promise<ArrayBuffer>
+	setBuffer(buffer: ArrayBufferSource, options?: ZipWriterAddDataOptions): Promise<this>
+
+	getFileType(): Promise<FileTypeInfo | null>
+
+	getTypedBlob(): Promise<TypedBlob>
+
+	getTypedBuffer(): Promise<TypedArrayBuffer>
+}
+
+export interface TypedArrayBuffer extends ArrayBuffer {
+	fileType: FileTypeInfo | null
+}
+
+export interface TypedBlob extends Blob {
+	fileType: FileTypeInfo | null
+}
+
+export function fileOrNull(data: ZipNode | EntryData): FileEntry | null {
+	const castedData = ((data as Partial<ZipNode>).metadata ?? data) as EntryData
+	return !castedData.directory ? (castedData as FileEntry) : null
+}
+
+export function dirOrNull(data: ZipNode | EntryData): DirectoryEntry | null {
+	const castedData = ((data as Partial<ZipNode>).metadata ?? data) as EntryData
+	return castedData.directory ? (castedData as DirectoryEntry) : null
+}
+
+export type StringMatcher = {
+	startsWith?: string
+	includes?: string
+	endsWith?: string
+	regex?: RegExp
+	negate?: boolean
+}
+export type FileMatcher = {
+	mime?: StringMatcher
+	path?: StringMatcher
+}
+
+export interface RootNodeTarget {
+	root: UUID_V7
+}
+
+export interface NodeTarget extends RootNodeTarget {
+	path: string
+	relative?: boolean
+}
+
+export function getAsTarget(target: FileZipTreeNode | NodeTarget) {
+	return (target as FileZipTreeNode).type != undefined
+		? { path: target.path, root: (target.root as RootZipTreeNode).key }
+		: (target as NodeTarget)
+}
+
+export type ZipBufferSource = {
+	data_type: 'buffer'
+	name?: string
+	url?: string
+	sha512Hash?: string
+	buffer: ArrayBufferSource
+	rangeOptions?: undefined
+}
+export type ZipURLSource = {
+	data_type: 'url'
+	name?: string
+	url: string
+	sha512Hash?: string
+	buffer?: undefined
+	rangeOptions?: RangeCacheReaderOptions
+}
+export type ZipDataSource = ZipBufferSource | ZipURLSource
+
+type Typed<K extends string, T> = { type: K } & T
+
+export type ArchiveUpdateTypes =
+	| Typed<'node_loaded', { root: RootNodeTarget; node: ZipNode }>
+	| Typed<'updated_node_data', { node: NodeTarget }>
+	| Typed<'root_loaded', { root: RootNodeTarget }>
+	/**
+	 * The archive's own hashes were computed from its downloaded bytes. `expectedHash` is the
+	 * SHA-512 it was opened with when that didn't match, which is no longer mapped to the archive.
+	 */
+	| Typed<'root_hashed', { root: RootNodeTarget; sha512Hash: string; expectedHash?: string }>
+	/** Bytes of the archive cached so far, keyed by `url` too as it starts before the root is returned. */
+	| Typed<
+			'archive_download',
+			{ root?: UUID_V7; url?: string; sha512Hash?: string; current: number; total: number }
+	  >
+
+export interface ZipHandler {
+	zipByUUID: Map<UUID_V7, RootZipTreeNode>
+	urlToUUID: Map<string, UUID_V7>
+	readLazyData<K extends keyof LazyDataAccess>(
+		node: FileZipTreeNode | NodeTarget,
+		key: K,
+	): Promise<Awaited<ReturnType<LazyDataAccess[K]['get']>>>
+	readSource(node: FileZipTreeNode | NodeTarget, options?: SourceOptions): Promise<DecompilerResult>
+	readNodeData(node: FileZipTreeNode | NodeTarget): Promise<ArrayBuffer>
+	/** The file's hash of the given type, computed by the worker. */
+	readNodeHash(node: FileZipTreeNode | NodeTarget, type: HashType): Promise<string>
+	/**
+	 * The whole archive's hash of the given type, which waits until all of it has been downloaded.
+	 * The result is also kept in the root's `hashes`.
+	 */
+	readArchiveHash(root: RootZipTreeNode | UUID_V7, type: HashType): Promise<string>
+	/**
+	 * Reads the node's data, waiting for the archive to finish loading when the node isn't known
+	 * yet, and resolves to `undefined` when the archive turns out not to hold it.
+	 */
+	findNodeData(node: NodeTarget): Promise<ArrayBuffer | undefined>
+	writeNodeData(
+		node: FileZipTreeNode | NodeTarget,
+		buffer: ArrayBuffer,
+		options?: ZipWriterAddDataOptions,
+	): Promise<boolean>
+	collectFiles(root: RootZipTreeNode | UUID_V7, matcher?: FileMatcher): Promise<FileDetails[]>
+	collectHashedFiles(
+		root: RootZipTreeNode | UUID_V7,
+		matcher?: FileMatcher,
+		deduplicate?: boolean,
+	): Promise<HashedFileContent[]>
+	getOrReadZipTree(source: ZipDataSource): Promise<RootZipTreeNode>
+	readZipTree(source: ZipDataSource): Promise<RootZipTreeNode>
+	getZipTree(
+		value: string | UUID_V7,
+		isUrl: boolean,
+		localOnly?: boolean,
+	): Promise<RootZipTreeNode | undefined>
+	closeZipTree(
+		root: RootZipTreeNode | UUID_V7,
+		name?: string,
+	): Promise<{ err?: Error; wasClosed: boolean }>
+	closeAllZipTrees(): Promise<{ err?: Error; wasClosed: boolean }>
+	archiveUpdate(msg: ArchiveUpdateTypes): void
+	onArchiveUpdate: EventSource<(msg: ArchiveUpdateTypes) => void>
+}
+
+export class DelegateFileZipTreeNode extends ZipTreeNode implements FileZipTreeNode {
+	declare type: 'file'
+	declare metadata: FileEntry
+	declare handler: ZipHandler | undefined
+
+	isSetup: boolean
+
+	constructor(
+		root: RootZipTreeNode | undefined,
+		parent: ZipNode | undefined,
+		name: string,
+		path: string,
+		metadata: FileEntry,
+	) {
+		super(root, parent, name, path, 'file', metadata)
+
+		this.handler = undefined
+
+		this.fileTypeInfo = lazyValue(() => {
+			throw new Error("Unable to get value 'fileTypeInfo' as it was not setup yet")
+		})
+		this.asText = () => {
+			throw new Error("Unable to get value 'asText' as it was not setup yet")
+		}
+
+		this.isSetup = false
+	}
+
+	onDataUpdate?: () => void
+
+	finishNodeSetup(handler: ZipHandler) {
+		this.handler = handler
+
+		this.fileTypeInfo = lazyValue(() => this.getHandler().readLazyData(this, 'fileTypeInfo'))
+		const map = new Map<Partial<SourceOptions>, LazyValue<DecompilerResult>>()
+
+		this.onDataUpdate = () => {
+			map.clear()
+			this.hashes?.clear()
+		}
+
+		this.asText = async (options?: SourceOptions) => {
+			let finalOptions: SourceOptions | undefined = undefined
+			if (options == null || !map.has(options)) {
+				const type = await this.fileTypeInfo.get()
+				let isValid = false
+				if (type != null) {
+					if (
+						this.name.endsWith('.class') ||
+						type.mime == 'application/java-vm' ||
+						type.extension == 'class' ||
+						options?.forcedType == 'class'
+					) {
+						finalOptions = options ?? DEFAULT_DECOMPILE_OPTIONS
+						if (!map.has(finalOptions)) {
+							const value = lazyValue(() => this.getHandler().readSource(this, finalOptions))
+							map.set(options ?? DEFAULT_DECOMPILE_OPTIONS, value)
+							return value.get()
+						}
+						isValid = true
+					} else if (type.mime.startsWith('text') || options?.forcedType == 'text') {
+						finalOptions = options ?? { forcedType: 'text' }
+						if (!map.has(finalOptions)) {
+							const value = lazyValue(() => this.getHandler().readSource(this, finalOptions))
+							map.set(options ?? DEFAULT_DECOMPILE_OPTIONS, value)
+							return value.get()
+						}
+						isValid = true
+					}
+				}
+
+				if (!isValid) {
+					const msg =
+						'Current file was found not to be either a class or text, no sources could be created'
+					return Promise.resolve({
+						source: msg,
+						wasDecompiled: false,
+						asString: msg,
+					} as DecompilerResult)
+				}
+			} else {
+				finalOptions = options
+			}
+
+			return map.get(finalOptions!)!.get()
+		}
+
+		this.isSetup = true
+	}
+
+	getHandler() {
+		return this.handler!
+	}
+
+	fileTypeInfo: LazyValue<FileTypeInfo | null>
+	asText: (options?: SourceOptions) => Promise<DecompilerResult>
+
+	/**
+	 * Created on first use: nodes sent back from the worker are given this class's prototype
+	 * rather than constructed, so field initializers never run for them.
+	 */
+	private hashes?: Map<HashType, LazyValue<string>>
+
+	hash(type: HashType): Promise<string> {
+		this.hashes ??= new Map()
+		let value = this.hashes.get(type)
+		if (!value) {
+			value = lazyValue(() => this.getHandler().readNodeHash(this, type))
+			this.hashes.set(type, value)
+		}
+		return value.get()
+	}
+
+	getBuffer(): Promise<ArrayBuffer> {
+		return this.getHandler().readNodeData(this)
+	}
+
+	async setBuffer(buffer: ArrayBufferSource, options?: ZipWriterAddDataOptions): Promise<this> {
+		await this.getHandler().writeNodeData(this, await arrayBufferFromSource(buffer), options)
+		return this
+	}
+
+	getFileType(): Promise<FileTypeInfo | null> {
+		return this.fileTypeInfo.get()
+	}
+
+	async getTypedBlob(): Promise<TypedBlob> {
+		const buffer = await this.getBuffer()
+		const fileType = await this.getFileType()
+		const typedBlob = new Blob([buffer], { type: fileType?.mime }) as TypedBlob
+		typedBlob.fileType = fileType
+		return typedBlob
+	}
+
+	async getTypedBuffer(): Promise<TypedArrayBuffer> {
+		const buffer = await this.getBuffer()
+		const typedBuffer = buffer as TypedArrayBuffer
+		typedBuffer.fileType = await this.getFileType()
+		return typedBuffer
+	}
+}
+
+export function reconstituteRoot(handler: ZipHandler, root: RootZipTreeNode): RootZipTreeNode {
+	Object.setPrototypeOf(root, RootZipTreeNode.prototype)
+	root.entries = new Map()
+	root.fileEntries = new Map()
+	root.relativeFileEntries = new Map()
+
+	return reconstituteNodes(handler, root, root, root)
+}
+
+export function reconstituteNodes<N extends ZipNode>(
+	handler: ZipHandler,
+	root: RootZipTreeNode,
+	parent: N,
+	node: N,
+): N {
+	let reconstitutedNode: ZipNode
+	if (node instanceof RootZipTreeNode) {
+		reconstitutedNode = Object.setPrototypeOf(node, RootZipTreeNode.prototype)
+	} else if (node.type == 'directory') {
+		reconstitutedNode = Object.setPrototypeOf(node, ZipTreeNode.prototype)
+	} else {
+		reconstitutedNode = Object.setPrototypeOf(node, DelegateFileZipTreeNode.prototype)
+	}
+
+	node.children.forEach((entry) => reconstituteNodes(handler, root, node, entry))
+
+	if (!(reconstitutedNode instanceof RootZipTreeNode)) {
+		root.addNodeToRoot(reconstitutedNode)
+
+		reconstitutedNode.root = root
+		reconstitutedNode.parent = parent
+	}
+
+	if (node.type == 'file') (node as unknown as DelegateFileZipTreeNode).finishNodeSetup(handler)
+
+	return reconstitutedNode as N
+}
diff --git a/packages/ui/src/helpers/toolbox/zip/range-cache-reader.ts b/packages/ui/src/helpers/toolbox/zip/range-cache-reader.ts
new file mode 100644
index 0000000000..bb52341096
--- /dev/null
+++ b/packages/ui/src/helpers/toolbox/zip/range-cache-reader.ts
@@ -0,0 +1,619 @@
+import { Reader } from '@zip.js/zip.js'
+
+/**
+ * A zip.js Reader for remote archives that:
+ *  1. Fetches the tail (EOCD + central directory) first, so getEntries() resolves after 1–2 requests,
+ *  2. Serves on-demand reads (entry.getData) with priority,
+ *  3. Downloads the rest of the file in the background.
+ *
+ * Overall the given zip is cached in fixed-size blocks, any tiny reads
+ * (30-byte local headers, names, extra fields) become a few block-sized requests, and only unique
+ * data is saved to the cache.
+ */
+
+// ---------------------------------------------------------------------------------------------
+// Block cache
+// ---------------------------------------------------------------------------------------------
+
+/**
+ * Fixed-size block store. Block i covers [i*blockSize, min((i+1)*blockSize, fileSize)).
+ * Blocks are views into response buffers: inserting never copies, reading copies only when a read
+ * spans more than one block.
+ */
+export class BlockCache {
+	readonly blockCount: number
+	private readonly blocks: (Uint8Array | undefined)[]
+	private cached = 0
+
+	constructor(
+		readonly fileSize: number,
+		readonly blockSize: number,
+	) {
+		this.blockCount = Math.ceil(fileSize / blockSize)
+		this.blocks = new Array(this.blockCount)
+	}
+
+	/** Total number of bytes cached. */
+	get size(): number {
+		return this.cached
+	}
+
+	blockOf(offset: number): number {
+		return Math.floor(offset / this.blockSize)
+	}
+
+	blockStart(i: number): number {
+		return i * this.blockSize
+	}
+
+	blockEnd(i: number): number {
+		return Math.min((i + 1) * this.blockSize, this.fileSize)
+	}
+
+	has(i: number): boolean {
+		return this.blocks[i] !== undefined
+	}
+
+	/**
+	 * Stores `bytes`, which start at the beginning of block `first` and cover whole blocks (the last
+	 * one may end at EOF). Already-cached blocks are left as they are.
+	 */
+	insertBlocks(first: number, bytes: Uint8Array): void {
+		let pos = 0
+		for (let i = first; pos < bytes.length; i++) {
+			const len = this.blockEnd(i) - this.blockStart(i)
+			if (pos + len > bytes.length)
+				throw new RangeError(`Partial block ${i}: ${bytes.length - pos} of ${len} bytes`)
+			if (!this.blocks[i]) {
+				this.blocks[i] = bytes.subarray(pos, pos + len)
+				this.cached += len
+			}
+			pos += len
+		}
+	}
+
+	/** Indices of blocks in [first, last] that are not cached. */
+	missing(first: number, last: number): number[] {
+		const out: number[] = []
+		for (let i = first; i <= last; i++) if (!this.blocks[i]) out.push(i)
+		return out
+	}
+
+	/** Bytes [start, end) if fully cached, else undefined. Zero-copy within a single block. */
+	read(start: number, end: number): Uint8Array | undefined {
+		if (end <= start) return new Uint8Array(0)
+		const first = this.blockOf(start)
+		const last = this.blockOf(end - 1)
+		if (first === last) {
+			const b = this.blocks[first]
+			if (!b) return undefined
+			const base = this.blockStart(first)
+			return b.subarray(start - base, end - base)
+		}
+		for (let i = first; i <= last; i++) if (!this.blocks[i]) return undefined
+		const out = new Uint8Array(end - start)
+		for (let i = first; i <= last; i++) {
+			const b = this.blocks[i]!
+			const base = this.blockStart(i)
+			const from = Math.max(start, base) - base
+			const to = Math.min(end, base + b.length) - base
+			out.set(b.subarray(from, to), base + from - start)
+		}
+		return out
+	}
+
+	/** All blocks in order, for building a Blob without concatenating. Undefined if incomplete. */
+	allBlocks(): Uint8Array[] | undefined {
+		return this.cached === this.fileSize ? (this.blocks as Uint8Array[]) : undefined
+	}
+}
+
+// ---------------------------------------------------------------------------------------------
+// Request limiter with priority (foreground reads before background fill)
+// ---------------------------------------------------------------------------------------------
+
+class Limiter {
+	private active = 0
+	private readonly high: (() => void)[] = []
+	private readonly low: (() => void)[] = []
+
+	constructor(private readonly max: number) {}
+
+	async run<T>(priority: 'high' | 'low', task: () => Promise<T>): Promise<T> {
+		if (this.active >= this.max) {
+			await new Promise<void>((resolve) =>
+				(priority === 'high' ? this.high : this.low).push(resolve),
+			)
+		} else {
+			this.active++
+		}
+		try {
+			return await task()
+		} finally {
+			const next = this.high.shift() ?? this.low.shift()
+			if (next)
+				next() // hand the slot over directly
+			else this.active--
+		}
+	}
+}
+
+// ---------------------------------------------------------------------------------------------
+// Errors
+// ---------------------------------------------------------------------------------------------
+
+export class RangeReaderError extends Error {
+	override name = 'RangeReaderError'
+}
+/** The remote file changed between requests (If-Range mismatch, validator change, size change). */
+export class FileChangedError extends RangeReaderError {
+	override name = 'FileChangedError'
+}
+
+// ---------------------------------------------------------------------------------------------
+// Central directory location (EOCD / Zip64)
+// ---------------------------------------------------------------------------------------------
+
+export interface CentralDirectoryLocation {
+	offset: number
+	size: number
+	entryCount: number
+	zip64: boolean
+}
+
+const SIG_EOCD = 0x06054b50
+const SIG_ZIP64_LOCATOR = 0x07064b50
+const SIG_ZIP64_EOCD = 0x06064b50
+const EOCD_MIN = 22
+const MAX_COMMENT = 0xffff
+const ZIP64_LOCATOR_SIZE = 20
+const ZIP64_EOCD_MIN = 56
+
+function u64(view: DataView, at: number): number {
+	const v = view.getBigUint64(at, true)
+	if (v > BigInt(Number.MAX_SAFE_INTEGER)) throw new RangeReaderError('Zip64 value exceeds 2^53')
+	return Number(v)
+}
+
+/** Finds the EOCD inside `tail` (the last bytes of the file, starting at absolute `tailStart`). */
+function findEocd(tail: Uint8Array, tailStart: number, fileSize: number) {
+	const view = new DataView(tail.buffer, tail.byteOffset, tail.byteLength)
+	for (let i = tail.length - EOCD_MIN; i >= 0; i--) {
+		if (view.getUint32(i, true) !== SIG_EOCD) continue
+		const commentLength = view.getUint16(i + 20, true)
+		// The comment must run exactly to EOF; guards against the signature appearing inside the comment.
+		if (tailStart + i + EOCD_MIN + commentLength !== fileSize) continue
+		return {
+			absOffset: tailStart + i,
+			entryCount: view.getUint16(i + 10, true),
+			cdSize: view.getUint32(i + 12, true),
+			cdOffset: view.getUint32(i + 16, true),
+		}
+	}
+	return undefined
+}
+
+// ---------------------------------------------------------------------------------------------
+// Reader
+// ---------------------------------------------------------------------------------------------
+
+export interface RangeCacheReaderOptions {
+	/**
+	 * Known total size in bytes. Skips the initial HEAD, so the tree needs a single request.
+	 */
+	size?: number
+	/**
+	 * Cache/request granularity. Every request covers whole blocks, so this is the minimum request
+	 * size. Default 128 KiB.
+	 */
+	blockSize?: number
+	/**
+	 * Bytes requested from the end of the file first. Default 256 KiB (covers EOCD + typical zip CD).
+	 */
+	tailSize?: number
+	/**
+	 *  Max size of one background-fill request. Default 4 MiB.
+	 */
+	backgroundRequestSize?: number
+	/**
+	 * Max size of one on-demand request (long missing runs are split). Default 8 MiB.
+	 */
+	maxRequestSize?: number
+	/**
+	 * Max concurrent requests. On-demand reads are queued ahead of background fill. Default 4.
+	 */
+	maxConcurrentRequests?: number
+	/**
+	 * Send If-Range so a changed file is detected server-side. Default true. If-Range is not a
+	 * CORS-safelisted header, so it triggers a preflight. The Last-Modified/ETag comparison on
+	 * every response still catches a replaced file.
+	 */
+	validate?: boolean
+	/**
+	 * Extra fetch options (credentials, mode, ...). Headers given here are merged.
+	 */
+	fetchInit?: RequestInit
+	/**
+	 * Called after each response is cached. Throttle on your side if it drives UI.
+	 */
+	onProgress?: (cached: number, total: number) => void
+}
+
+interface Validator {
+	header: 'etag' | 'last-modified'
+	value: string
+}
+
+export class RangeCacheReader extends Reader<string> {
+	readonly url: string
+	private readonly opts: Required<
+		Omit<RangeCacheReaderOptions, 'onProgress' | 'fetchInit' | 'size'>
+	> &
+		Pick<RangeCacheReaderOptions, 'onProgress' | 'fetchInit' | 'size'>
+
+	private cache!: BlockCache
+	/** Pending block downloads, by block index, for de-duplication. */
+	private readonly pending = new Map<number, Promise<void>>()
+	private readonly limiter: Limiter
+	private readonly controllers = new Set<AbortController>()
+	private aborted: { reason: unknown } | undefined
+	private validator: Validator | undefined
+	private initPromise: Promise<void> | undefined
+	private backgroundPromise: Promise<void> | undefined
+
+	// Foreground reads pause the background fill between requests.
+	private foregroundCount = 0
+	private foregroundIdle: Promise<void> = Promise.resolve()
+	private releaseIdle: () => void = () => {}
+
+	/** False if the server ignored Range and the whole file was downloaded in one response. */
+	rangesSupported = true
+	/** Location of the central directory, available after init(). */
+	centralDirectory!: CentralDirectoryLocation
+
+	constructor(url: string, options: RangeCacheReaderOptions = {}) {
+		super(url)
+		this.url = url
+		this.opts = {
+			size: options.size,
+			blockSize: options.blockSize ?? 128 * 1024,
+			// Never smaller than the EOCD search window + Zip64 locator, or locating the CD costs extra requests.
+			tailSize: Math.max(
+				options.tailSize ?? 256 * 1024,
+				EOCD_MIN + MAX_COMMENT + ZIP64_LOCATOR_SIZE,
+			),
+			backgroundRequestSize: options.backgroundRequestSize ?? 4 * 1024 * 1024,
+			maxRequestSize: options.maxRequestSize ?? 8 * 1024 * 1024,
+			maxConcurrentRequests: options.maxConcurrentRequests ?? 4,
+			validate: options.validate ?? true,
+			fetchInit: options.fetchInit,
+			onProgress: options.onProgress,
+		}
+		this.limiter = new Limiter(this.opts.maxConcurrentRequests)
+	}
+
+	/** Idempotent: zip.js calls init() itself, and callers may call it earlier. */
+	override init(): Promise<void> {
+		this.initPromise ??= this.doInit()
+		return this.initPromise
+	}
+
+	private async doInit(): Promise<void> {
+		// 1. Total size, via HEAD unless given. Content-Length/Last-Modified are CORS-safelisted.
+		let size = this.opts.size
+		if (size === undefined) {
+			const head = await this.exchange({}, 'HEAD')
+			const len = Number(head.headers.get('content-length') ?? NaN)
+			if (head.ok && Number.isSafeInteger(len) && len >= 0) {
+				size = len
+				this.validator = pickValidator(head.headers)
+			}
+		}
+		if (size === undefined) return this.initFromFullDownload() // HEAD unusable: just download
+
+		this.size = size
+		this.cache = new BlockCache(size, this.opts.blockSize)
+
+		// 2. Tail, aligned down to a block boundary, via an explicit range (never `bytes=-N`).
+		const firstBlock = this.cache.blockOf(Math.max(0, size - this.opts.tailSize))
+		const tailStart = this.cache.blockStart(firstBlock)
+		const headers: Record<string, string> = { Range: `bytes=${tailStart}-${size - 1}` }
+		if (this.opts.validate && this.validator) headers['If-Range'] = this.validator.value
+		const res = await this.exchange(headers)
+
+		// 200 = server ignored Range, or the file changed since HEAD. Either way the body is the
+		// current, complete file, so use it.
+		if (res.status === 200) return this.initFromBytes(res.body!)
+		if (res.status !== 206)
+			throw new RangeReaderError(`Unexpected status ${res.status} for ${this.url}`)
+
+		this.validator ??= pickValidator(res.headers)
+		this.assertSameFile(res.headers)
+		this.assertRange(res.headers, tailStart, size, res.body!.length)
+		this.cache.insertBlocks(firstBlock, res.body!)
+		this.report()
+
+		this.centralDirectory = await this.locateCentralDirectory()
+		// Make sure the whole CD is cached so getEntries() never waits on the network again.
+		const cd = this.centralDirectory
+		await this.ensure(cd.offset, cd.offset + cd.size, 'high')
+	}
+
+	private async initFromFullDownload(): Promise<void> {
+		const res = await this.exchange({})
+		if (!res.ok) throw new RangeReaderError(`Unexpected status ${res.status} for ${this.url}`)
+		return this.initFromBytes(res.body!)
+	}
+
+	/** Uses a complete-file body as the whole cache; no further requests are made. */
+	private async initFromBytes(bytes: Uint8Array): Promise<void> {
+		this.rangesSupported = false
+		this.size = bytes.length
+		this.cache = new BlockCache(bytes.length, this.opts.blockSize)
+		this.cache.insertBlocks(0, bytes)
+		this.report()
+		this.centralDirectory = await this.locateCentralDirectory()
+	}
+
+	private async locateCentralDirectory(): Promise<CentralDirectoryLocation> {
+		const searchLen = Math.min(this.size, EOCD_MIN + MAX_COMMENT)
+		const tailStart = this.size - searchLen
+		const tail = await this.bytes(tailStart, this.size)
+		const eocd = findEocd(tail, tailStart, this.size)
+		if (!eocd) throw new RangeReaderError('End of central directory record not found (not a zip?)')
+
+		const needsZip64 =
+			eocd.cdOffset === 0xffffffff || eocd.cdSize === 0xffffffff || eocd.entryCount === 0xffff
+		const locatorAt = eocd.absOffset - ZIP64_LOCATOR_SIZE
+		if (locatorAt >= 0) {
+			const loc = await this.bytes(locatorAt, eocd.absOffset)
+			const lv = new DataView(loc.buffer, loc.byteOffset, loc.byteLength)
+			if (lv.getUint32(0, true) === SIG_ZIP64_LOCATOR) {
+				const z64At = u64(lv, 8)
+				const rec = await this.bytes(z64At, z64At + ZIP64_EOCD_MIN)
+				const rv = new DataView(rec.buffer, rec.byteOffset, rec.byteLength)
+				if (rv.getUint32(0, true) !== SIG_ZIP64_EOCD)
+					throw new RangeReaderError('Bad Zip64 EOCD record')
+				return { entryCount: u64(rv, 32), size: u64(rv, 40), offset: u64(rv, 48), zip64: true }
+			}
+		}
+		if (needsZip64) throw new RangeReaderError('Zip64 markers present but no Zip64 EOCD locator')
+		return { offset: eocd.cdOffset, size: eocd.cdSize, entryCount: eocd.entryCount, zip64: false }
+	}
+
+	override async readUint8Array(index: number, length: number): Promise<Uint8Array> {
+		await this.init()
+		const end = Math.min(index + length, this.size) // zip.js contract: truncate at EOF
+		const hit = this.cache.read(index, end)
+		if (hit) return hit
+
+		this.beginForeground()
+		try {
+			return await this.bytes(index, end)
+		} finally {
+			this.endForeground()
+		}
+	}
+
+	/**
+	 * Starts (or returns) the background download of everything not yet cached.
+	 * Resolves when the whole file is cached. Safe to call multiple times.
+	 */
+	fillBackground(): Promise<void> {
+		this.backgroundPromise ??= (async () => {
+			await this.init()
+			const step = Math.max(1, Math.floor(this.opts.backgroundRequestSize / this.opts.blockSize))
+			for (let b = 0; b < this.cache.blockCount; b += step) {
+				await this.foregroundIdle // yield to on-demand reads
+				this.throwIfAborted()
+				const last = Math.min(b + step, this.cache.blockCount) - 1
+				await this.ensureBlocks(b, last, 'low', step)
+			}
+		})()
+		return this.backgroundPromise
+	}
+
+	/** Whole file as a Blob once fully cached (starts the background fill if needed). No big copy. */
+	async toBlob(type = 'application/java-archive'): Promise<Blob> {
+		await this.fillBackground()
+		return new Blob(this.cache.allBlocks()! as Uint8Array<ArrayBuffer>[], { type })
+	}
+
+	/** Cancels all in-flight requests; pending and future reads reject. */
+	abort(reason: unknown = new DOMException('Aborted', 'AbortError')): void {
+		this.aborted = { reason }
+		for (const c of this.controllers) c.abort(reason)
+	}
+
+	get cachedBytes(): number {
+		return this.cache?.size ?? 0
+	}
+
+	// -------------------------------------------------------------------------------------------
+	// Internals
+	// -------------------------------------------------------------------------------------------
+
+	private async bytes(start: number, end: number): Promise<Uint8Array> {
+		await this.ensure(start, end, 'high')
+		return this.cache.read(start, end)!
+	}
+
+	private ensure(start: number, end: number, priority: 'high' | 'low'): Promise<void> {
+		if (end <= start) return Promise.resolve()
+		const maxBlocks = Math.max(1, Math.floor(this.opts.maxRequestSize / this.opts.blockSize))
+		return this.ensureBlocks(
+			this.cache.blockOf(start),
+			this.cache.blockOf(end - 1),
+			priority,
+			maxBlocks,
+		)
+	}
+
+	/**
+	 * Ensures blocks [first, last] are cached. Blocks already downloading are awaited; the rest are
+	 * grouped into contiguous runs of at most `maxBlocks` and fetched, one request per run.
+	 */
+	private async ensureBlocks(
+		first: number,
+		last: number,
+		priority: 'high' | 'low',
+		maxBlocks: number,
+	): Promise<void> {
+		this.throwIfAborted()
+		const waits: Promise<void>[] = []
+		let runStart = -1
+		let runEnd = -1 // inclusive
+		const flush = () => {
+			for (let s = runStart; s <= runEnd; s += maxBlocks) {
+				waits.push(this.fetchBlocks(s, Math.min(s + maxBlocks - 1, runEnd), priority))
+			}
+			runStart = runEnd = -1
+		}
+		for (const i of this.cache.missing(first, last)) {
+			const p = this.pending.get(i)
+			if (p) {
+				if (runStart !== -1) flush()
+				if (!waits.includes(p)) waits.push(p)
+				continue
+			}
+			if (runStart !== -1 && i !== runEnd + 1) flush()
+			if (runStart === -1) runStart = i
+			runEnd = i
+		}
+		if (runStart !== -1) flush()
+		await Promise.all(waits)
+	}
+
+	/** Fetches blocks [first, last] in one request and caches them. */
+	private fetchBlocks(first: number, last: number, priority: 'high' | 'low'): Promise<void> {
+		if (!this.rangesSupported) {
+			return Promise.reject(new RangeReaderError('Range requests unsupported and bytes not cached'))
+		}
+		const start = this.cache.blockStart(first)
+		const end = this.cache.blockEnd(last)
+		const promise = this.limiter
+			.run(priority, async () => {
+				this.throwIfAborted()
+				const headers: Record<string, string> = { Range: `bytes=${start}-${end - 1}` }
+				if (this.opts.validate && this.validator) headers['If-Range'] = this.validator.value
+				// Don't download a full body we'd throw away.
+				const res = await this.exchange(headers, 'GET', (status) => status !== 206)
+
+				if (res.status === 200) {
+					throw new FileChangedError(
+						`Server returned the full file for a range request; ${this.url} changed?`,
+					)
+				}
+				if (res.status !== 206) throw new RangeReaderError(`Unexpected status ${res.status}`)
+				// Backstop for servers/CDNs that ignore If-Range: compare the validator ourselves.
+				this.assertSameFile(res.headers)
+				this.assertRange(res.headers, start, end, res.body!.length)
+				this.cache.insertBlocks(first, res.body!)
+				this.report()
+			})
+			.finally(() => {
+				for (let i = first; i <= last; i++)
+					if (this.pending.get(i) === promise) this.pending.delete(i)
+			})
+		for (let i = first; i <= last; i++) this.pending.set(i, promise)
+		return promise
+	}
+
+	/**
+	 * Performs one request and reads its body. Each request gets its own AbortController (tracked so
+	 * abort() reaches it) instead of sharing one signal, so listeners never pile up.
+	 */
+	private async exchange(
+		extraHeaders: Record<string, string>,
+		method = 'GET',
+		skipBody: (status: number) => boolean = () => false,
+	): Promise<{ status: number; ok: boolean; headers: Headers; body?: Uint8Array }> {
+		this.throwIfAborted()
+		const init = this.opts.fetchInit ?? {}
+		const headers = new Headers(init.headers)
+		for (const [k, v] of Object.entries(extraHeaders)) headers.set(k, v)
+		const controller = new AbortController()
+		this.controllers.add(controller)
+		try {
+			const res = await fetch(this.url, { ...init, method, headers, signal: controller.signal })
+			let body: Uint8Array | undefined
+			if (method === 'HEAD' || skipBody(res.status)) await res.body?.cancel()
+			else body = new Uint8Array(await res.arrayBuffer())
+			return { status: res.status, ok: res.ok, headers: res.headers, body }
+		} finally {
+			this.controllers.delete(controller)
+		}
+	}
+
+	/** Throws FileChangedError if the response's validator differs from the one we started with. */
+	private assertSameFile(headers: Headers): void {
+		if (!this.validator) return
+		const now = headers.get(this.validator.header)
+		if (now !== null && now !== this.validator.value) {
+			throw new FileChangedError(
+				`${this.validator.header} changed (${this.validator.value} → ${now}); ${this.url} was replaced`,
+			)
+		}
+	}
+
+	/**
+	 * Verifies a 206 body covers [start, end). Content-Range is checked when readable (cross-origin it
+	 * is only readable with Access-Control-Expose-Headers); otherwise the exact body length is required.
+	 */
+	private assertRange(headers: Headers, start: number, end: number, bodyLength: number): void {
+		const range = parseContentRange(headers.get('content-range'))
+		if (range) {
+			if (range.total !== this.size)
+				throw new FileChangedError(`File size changed (${this.size} → ${range.total})`)
+			if (range.start !== start || range.end !== end) {
+				throw new RangeReaderError(
+					`Server returned bytes ${range.start}-${range.end - 1}, wanted ${start}-${end - 1}`,
+				)
+			}
+		}
+		if (bodyLength !== end - start)
+			throw new RangeReaderError(`Got ${bodyLength} bytes, wanted ${end - start}`)
+	}
+
+	private beginForeground(): void {
+		if (this.foregroundCount++ === 0) {
+			this.foregroundIdle = new Promise((resolve) => (this.releaseIdle = resolve))
+		}
+	}
+
+	private endForeground(): void {
+		if (--this.foregroundCount === 0) this.releaseIdle()
+	}
+
+	private throwIfAborted(): void {
+		if (this.aborted) throw this.aborted.reason
+	}
+
+	private report(): void {
+		this.opts.onProgress?.(this.cache.size, this.size)
+	}
+}
+
+// ---------------------------------------------------------------------------------------------
+// Header helpers
+// ---------------------------------------------------------------------------------------------
+
+/** Parses `bytes start-end/total` into a half-open range. */
+function parseContentRange(
+	value: string | null,
+): { start: number; end: number; total: number } | undefined {
+	const m = value?.match(/^bytes (\d+)-(\d+)\/(\d+)$/)
+	if (!m) return undefined
+	return { start: Number(m[1]), end: Number(m[2]) + 1, total: Number(m[3]) }
+}
+
+/**
+ * If-Range requires a strong ETag; weak ones are ignored by servers, so fall back to Last-Modified.
+ * Cross-origin, ETag is only readable with Access-Control-Expose-Headers; Last-Modified always is.
+ */
+function pickValidator(headers: Headers): Validator | undefined {
+	const etag = headers.get('etag')
+	if (etag && !etag.startsWith('W/')) return { header: 'etag', value: etag }
+	const lm = headers.get('last-modified')
+	return lm ? { header: 'last-modified', value: lm } : undefined
+}
diff --git a/packages/ui/src/layouts/index.ts b/packages/ui/src/layouts/index.ts
index e2cc22785e..2a69dd3dee 100644
--- a/packages/ui/src/layouts/index.ts
+++ b/packages/ui/src/layouts/index.ts
@@ -1,4 +1,5 @@
 export * from './shared/appearance-settings'
+export * from './shared/archive-viewer'
 export * from './shared/browse-tab'
 export * from './shared/console'
 export * from './shared/content-tab'
@@ -6,4 +7,5 @@ export * from './shared/files-tab'
 export * from './shared/installation-settings'
 export * from './shared/server-settings'
 export * from './shared/user-profile'
+export * from './shared/workbench'
 export * from './wrapped'
diff --git a/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-code-theme.vue b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-code-theme.vue
new file mode 100644
index 0000000000..a518cebbe2
--- /dev/null
+++ b/packages/ui/src/layouts/shared/appearance-settings/components/appearance-settings-code-theme.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<Combobox
+			class="w-full sm:w-80"
+			searchable
+			:aria-label="formatMessage(messages.codeThemeTitle)"
+			:search-placeholder="formatMessage(messages.codeThemeSearch)"
+			:model-value="theme"
+			:options="options"
+			@update:model-value="(value) => value && (theme = value)"
+		/>
+		<pre
+			class="hljs m-0 overflow-x-auto rounded-2xl p-4 text-sm [tab-size:4]"
+			:aria-label="formatMessage(messages.codeThemePreview)"
+		><code v-html="preview" /></pre>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { hljs } from '@modrinth/utils/highlightjs/index'
+import { computed } from 'vue'
+
+import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
+import { DEFAULT_CODE_THEME, useCodeHighlightTheme } from '#ui/composables/code-highlight-theme'
+import { useVIntl } from '#ui/composables/i18n'
+
+import { appearanceSettingsMessages as messages } from '../messages'
+
+/** Picks the theme code is highlighted with, previewing it on a short sample. */
+const { formatMessage } = useVIntl()
+const { theme, themes } = useCodeHighlightTheme()
+
+const SAMPLE = `// Registers a listener once the mod loads
+public final class ExampleMod implements ModInitializer {
+	private static final int MAX_ITEMS = 64;
+
+	@Override
+	public void onInitialize() {
+		String name = "example-mod";
+		if (MAX_ITEMS > 0 && !name.isEmpty()) {
+			LOGGER.info("Loaded {} with {} items", name, MAX_ITEMS);
+		}
+	}
+}`
+
+const preview = hljs.highlight(SAMPLE, { language: 'java' }).value
+
+const options = computed<ComboboxOption<string>[]>(() => [
+	{ value: DEFAULT_CODE_THEME, label: formatMessage(messages.codeThemeDefault) },
+	...themes.map((entry) => ({ value: entry.id, label: entry.label })),
+])
+</script>
diff --git a/packages/ui/src/layouts/shared/appearance-settings/layout.vue b/packages/ui/src/layouts/shared/appearance-settings/layout.vue
index 7c9856509d..83c814f220 100644
--- a/packages/ui/src/layouts/shared/appearance-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/appearance-settings/layout.vue
@@ -2,6 +2,7 @@
 import Toggle from '#ui/components/base/Toggle.vue'
 import { useVIntl } from '#ui/composables'
 
+import AppearanceSettingsCodeTheme from './components/appearance-settings-code-theme.vue'
 import AppearanceSettingsThemeSelector from './components/appearance-settings-theme-selector.vue'
 import AppearanceSettingRow from './components/AppearanceSettingRow.vue'
 import ProjectLayoutSelector from './components/ProjectLayoutSelector.vue'
@@ -77,6 +78,18 @@ const sidebarPreferenceValues = sidebarPreferences?.value
 			</AppearanceSettingRow>
 		</section>
 
+		<section class="mt-8 border-0 border-t border-solid border-divider pt-6">
+			<div class="flex flex-col gap-1">
+				<h2 class="m-0 text-xl font-semibold text-contrast">
+					{{ formatMessage(messages.codeThemeTitle) }}
+				</h2>
+				<p class="m-0 text-secondary">
+					{{ formatMessage(messages.codeThemeDescription) }}
+				</p>
+			</div>
+			<AppearanceSettingsCodeTheme class="mt-4" />
+		</section>
+
 		<section v-if="projectLayouts" class="mt-8 border-0 border-t border-solid border-divider pt-6">
 			<div class="flex flex-col gap-1">
 				<h2 class="m-0 text-xl font-semibold text-contrast">
diff --git a/packages/ui/src/layouts/shared/appearance-settings/messages.ts b/packages/ui/src/layouts/shared/appearance-settings/messages.ts
index 3ef3cd7e02..fc105f2e05 100644
--- a/packages/ui/src/layouts/shared/appearance-settings/messages.ts
+++ b/packages/ui/src/layouts/shared/appearance-settings/messages.ts
@@ -22,6 +22,27 @@ export const appearanceSettingsMessages = defineMessages({
 		id: 'settings.display.theme.sync-across-devices.sign-in-tooltip',
 		defaultMessage: 'Sign into Modrinth to sync theme',
 	},
+	codeThemeTitle: {
+		id: 'settings.display.code-theme.title',
+		defaultMessage: 'Code highlighting',
+	},
+	codeThemeDescription: {
+		id: 'settings.display.code-theme.description',
+		defaultMessage:
+			'Pick the code theme used to highlight, style, and color code found within descriptions, changelogs and files. Kept on this device.',
+	},
+	codeThemeDefault: {
+		id: 'settings.display.code-theme.default',
+		defaultMessage: 'Modrinth',
+	},
+	codeThemeSearch: {
+		id: 'settings.display.code-theme.search',
+		defaultMessage: 'Search themes...',
+	},
+	codeThemePreview: {
+		id: 'settings.display.code-theme.preview',
+		defaultMessage: 'Preview',
+	},
 	projectListLayoutsTitle: {
 		id: 'settings.display.project-list-layouts.title',
 		defaultMessage: 'Project list layouts',
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveBrowser.vue b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveBrowser.vue
new file mode 100644
index 0000000000..900eb06b38
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveBrowser.vue
@@ -0,0 +1,42 @@
+<template>
+	<FilePageLayout advanced-view :search-loaded-only-notice="!fullyLoaded" />
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+
+import type { RootZipTreeNode, ZipHandler } from '#ui/helpers/toolbox/zip'
+import FilePageLayout from '#ui/layouts/shared/files-tab/layout.vue'
+import { provideFileManager } from '#ui/layouts/shared/files-tab/providers/file-manager'
+
+import { useArchiveFileManager } from '../composables/archive-file-manager'
+import type { ArchiveSource } from '../types'
+
+const props = defineProps<{
+	root: RootZipTreeNode
+	handler: ZipHandler
+	source: ArchiveSource
+	/** Path within the archive, without a leading slash. */
+	path?: string | null
+}>()
+
+const emit = defineEmits<{
+	navigate: [path: string]
+}>()
+
+const { context, location, open, fullyLoaded } = useArchiveFileManager({
+	root: props.root,
+	handler: props.handler,
+	source: props.source,
+	initialPath: props.path,
+})
+
+provideFileManager(context)
+
+watch(location, (value) => emit('navigate', value.path.replace(/^\/+/, '')))
+
+watch(
+	() => props.path,
+	(path) => open(path ?? ''),
+)
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/ArchivePanel.vue b/packages/ui/src/layouts/shared/archive-viewer/components/ArchivePanel.vue
new file mode 100644
index 0000000000..60e2222e38
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/ArchivePanel.vue
@@ -0,0 +1,63 @@
+<template>
+	<LogsPanel v-if="panel === 'logs'" />
+	<SettingsPanel v-else-if="panel === SETTINGS_PANEL_ID" />
+	<template v-else-if="current">
+		<FileSideBar v-if="panel === 'tree'" fill-height :add-border="false" />
+		<ArchiveViewerScope v-else :key="current.root.key" :archive="current">
+			<DetailsPanel>
+				<template v-if="slots['project-details']" #source>
+					<slot name="project-details" />
+				</template>
+			</DetailsPanel>
+		</ArchiveViewerScope>
+	</template>
+	<div v-else class="p-3">
+		<ArchiveStatus>
+			<template v-if="slots.empty" #empty>
+				<slot name="empty" />
+			</template>
+		</ArchiveStatus>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from 'vue'
+
+import FileSideBar from '#ui/layouts/shared/files-tab/components/FileSideBar.vue'
+
+import type { ArchivePanelId } from '../panels'
+import { injectArchiveSession, type OpenArchive } from '../providers/archive-session'
+import { provideArchiveViewer } from '../providers/archive-viewer'
+import { SETTINGS_PANEL_ID } from '../settings'
+import ArchiveStatus from './ArchiveStatus.vue'
+import DetailsPanel from './panels/details/index.vue'
+import LogsPanel from './panels/LogsPanel.vue'
+import SettingsPanel from './panels/settings-panel.vue'
+
+/**
+ * The content of one of the archive viewer's panels (see `useArchivePanels`), within an archive
+ * session. Panels about the archive show how opening it is going until it's open.
+ */
+defineProps<{
+	panel: ArchivePanelId
+}>()
+
+const slots = defineSlots<{
+	/** Details about where the archive comes from, shown at the top of the details panel. */
+	'project-details'?: () => unknown
+	/** Shown while there's no archive to open. */
+	empty?: () => unknown
+}>()
+
+const { current } = injectArchiveSession()
+
+/** Provides the open archive to the panels within, which read it once they're set up. */
+const ArchiveViewerScope = defineComponent({
+	name: 'ArchiveViewerScope',
+	props: { archive: { type: Object as PropType<OpenArchive>, required: true } },
+	setup(props, { slots: scopeSlots }) {
+		provideArchiveViewer(props.archive)
+		return () => scopeSlots.default?.()
+	},
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveProgress.vue b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveProgress.vue
new file mode 100644
index 0000000000..4d91885096
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveProgress.vue
@@ -0,0 +1,65 @@
+<template>
+	<div
+		v-if="stage === 'reading' || (current && (!fullyLoaded || fetching))"
+		class="flex items-center gap-1.5 text-xs text-secondary"
+		role="status"
+	>
+		<SpinnerIcon class="size-3.5 animate-spin" aria-hidden="true" />
+		{{ formatMessage(label) }}
+		<span v-if="fetchedLabel" class="tabular-nums">({{ fetchedLabel }})</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { useFormatBytes } from '#ui/composables/format-bytes'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { injectArchiveSession } from '../providers/archive-session'
+
+/** What's still being fetched or read of the session's archive, for a toolbar. */
+const { formatMessage } = useVIntl()
+const formatBytes = useFormatBytes()
+const { stage, progress, fullyLoaded, current } = injectArchiveSession()
+
+const messages = defineMessages({
+	reading: {
+		id: 'archive-viewer.reading-index',
+		defaultMessage: 'Reading the archive...',
+	},
+	readingNested: {
+		id: 'archive-viewer.reading-nested',
+		defaultMessage: 'Reading nested archives...',
+	},
+	fetchingRest: {
+		id: 'archive-viewer.fetching-rest',
+		defaultMessage: 'Fetching the rest of the archive...',
+	},
+	fetchedProgress: {
+		id: 'archive-viewer.fetched-progress',
+		defaultMessage: '{loaded} of {total} fetched',
+	},
+})
+
+/** Whether the rest of the archive is still being fetched in the background. */
+const fetching = computed(() => {
+	const { loaded, total } = progress.value
+	return total != null && loaded < total
+})
+
+const label = computed(() => {
+	if (stage.value === 'reading') return messages.reading
+	return fullyLoaded.value ? messages.fetchingRest : messages.readingNested
+})
+
+const fetchedLabel = computed(() => {
+	const { loaded, total } = progress.value
+	if (!loaded || !total) return null
+	return formatMessage(messages.fetchedProgress, {
+		loaded: formatBytes(loaded),
+		total: formatBytes(total),
+	})
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveSession.vue b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveSession.vue
new file mode 100644
index 0000000000..51c3b81723
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveSession.vue
@@ -0,0 +1,112 @@
+<template>
+	<ArchiveScope
+		v-if="stage === 'ready' && root && handler && loadedSource"
+		:key="root.key"
+		:root="root"
+		:handler="handler"
+		:source="loadedSource"
+	/>
+	<slot :opened="opened" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef, toRef, watch } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { provideFileManager } from '#ui/layouts/shared/files-tab/providers/file-manager'
+import {
+	emptyFileManager,
+	switchableFileManager,
+} from '#ui/layouts/shared/files-tab/providers/switchable-file-manager'
+
+import { useArchiveLoader } from '../composables/archive-loader'
+import { type OpenArchive, provideArchiveSession } from '../providers/archive-session'
+import {
+	injectArchiveSettings,
+	provideArchiveSettings,
+	useStoredArchiveSettings,
+} from '../settings'
+import type { ArchiveSource } from '../types'
+import ArchiveScope from './archive-scope'
+
+/**
+ * Opens an archive for everything within it: the files layout and any workbench showing the
+ * archive's panels. Opening another archive swaps what they browse, leaving them mounted.
+ */
+const props = defineProps<{
+	source: ArchiveSource | null
+	/** Path of the entry open within the archive, without a leading slash. */
+	path?: string | null
+	/** Keeps archives open in the worker once they are left, so reopening them skips reading them. */
+	retain?: boolean
+}>()
+
+const emit = defineEmits<{
+	'update:path': [path: string]
+}>()
+
+defineSlots<{
+	default?: (props: { opened: boolean }) => unknown
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	readOnly: {
+		id: 'archive-viewer.read-only',
+		defaultMessage: 'Archives are read-only',
+	},
+})
+
+provideArchiveSettings(injectArchiveSettings(null) ?? useStoredArchiveSettings())
+
+const { stage, progress, error, root, handler, fullyLoaded, retry } = useArchiveLoader(
+	toRef(props, 'source'),
+	{ retain: props.retain },
+)
+
+/** The source the archive that was read came from, which `source` may have moved on from. */
+const loadedSource = shallowRef<ArchiveSource | null>(null)
+watch(root, () => (loadedSource.value = root.value ? props.source : null), { immediate: true })
+
+const current = shallowRef<OpenArchive | null>(null)
+const opened = ref(false)
+
+provideFileManager(
+	switchableFileManager(
+		computed(() => current.value?.manager ?? null),
+		emptyFileManager({ readOnlyReason: computed(() => formatMessage(messages.readOnly)) }),
+	),
+)
+
+provideArchiveSession({
+	source: toRef(props, 'source'),
+	stage,
+	progress,
+	error,
+	fullyLoaded,
+	retry,
+	current,
+	opened,
+	initialPath: () => props.path ?? null,
+	attach: (archive) => {
+		current.value = archive
+		opened.value = true
+	},
+	detach: (archive) => {
+		if (current.value === archive) current.value = null
+	},
+})
+
+watch(
+	() => current.value?.location.value,
+	(location) => {
+		if (location) emit('update:path', location.path.replace(/^\/+/, ''))
+	},
+)
+
+watch(
+	() => props.path,
+	(path) => current.value?.open(path ?? ''),
+)
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveStatus.vue b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveStatus.vue
new file mode 100644
index 0000000000..78293501af
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveStatus.vue
@@ -0,0 +1,58 @@
+<template>
+	<Admonition
+		v-if="stage === 'error'"
+		type="critical"
+		:header="formatMessage(messages.errorTitle, { name: source?.name ?? '' })"
+		:body="error?.message"
+	>
+		<template #actions>
+			<Button @click="retry">
+				<RefreshCwIcon aria-hidden="true" />
+				{{ formatMessage(commonMessages.retryButton) }}
+			</Button>
+		</template>
+	</Admonition>
+	<Admonition
+		v-else-if="stage === 'reading'"
+		type="info"
+		:header="formatMessage(messages.reading, { name: source?.name ?? '' })"
+		:body="formatMessage(messages.readingDescription)"
+		waiting
+	/>
+	<slot v-else name="empty" />
+</template>
+
+<script setup lang="ts">
+import { RefreshCwIcon } from '@modrinth/assets'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import { Button } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { injectArchiveSession } from '../providers/archive-session'
+
+/** How opening the session's archive is going: being read, failed, or nothing to open. */
+defineSlots<{
+	/** Shown while there's no archive to open. */
+	empty?: () => unknown
+}>()
+
+const { formatMessage } = useVIntl()
+const { stage, error, source, retry } = injectArchiveSession()
+
+const messages = defineMessages({
+	reading: {
+		id: 'archive-viewer.reading',
+		defaultMessage: 'Reading {name}',
+	},
+	readingDescription: {
+		id: 'archive-viewer.reading-description',
+		defaultMessage: "Fetching the archive's index. Files are fetched as they are opened.",
+	},
+	errorTitle: {
+		id: 'archive-viewer.error-title',
+		defaultMessage: 'Unable to open {name}',
+	},
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveWorkbench.vue b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveWorkbench.vue
new file mode 100644
index 0000000000..d51ffe6168
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/ArchiveWorkbench.vue
@@ -0,0 +1,134 @@
+<template>
+	<FilePageLayout
+		workbench
+		:workspace="workspace"
+		:default-browsing="defaultBrowsing"
+		compact-navigation
+		:search-loaded-only-notice="!fullyLoaded"
+		:sidebar="sidebar"
+	>
+		<template #workspace>
+			<FileWorkbench
+				ref="workbench"
+				:panels="panels"
+				:storage-key="storageKey"
+				:hidden-regions="hiddenRegions"
+				:mode="mode"
+			>
+				<template #toolbar>
+					<slot name="toolbar" />
+				</template>
+				<template v-if="slots['toolbar-end']" #toolbar-end>
+					<slot name="toolbar-end" />
+				</template>
+				<template v-for="panel in ARCHIVE_PANEL_IDS" :key="panel" #[`panel-${panel}`]>
+					<ArchivePanel :panel="panel">
+						<template v-if="slots['project-details']" #project-details>
+							<slot name="project-details" />
+						</template>
+						<template v-if="slots.empty" #empty>
+							<slot name="empty" />
+						</template>
+					</ArchivePanel>
+				</template>
+			</FileWorkbench>
+		</template>
+	</FilePageLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type VNode } from 'vue'
+
+import FileWorkbench from '#ui/layouts/shared/files-tab/components/FileWorkbench.vue'
+import FilePageLayout from '#ui/layouts/shared/files-tab/layout.vue'
+import {
+	type FilesBrowsing,
+	useFilesWorkspaceSettings,
+} from '#ui/layouts/shared/files-tab/settings'
+import {
+	WORKBENCH_HOSTS,
+	WORKBENCH_MODES,
+	type WorkbenchMode,
+	type WorkbenchRegion,
+} from '#ui/layouts/shared/workbench/types'
+
+import { ARCHIVE_PANEL_IDS, useArchivePanels } from '../panels'
+import { injectArchiveSession } from '../providers/archive-session'
+import { SETTINGS_PANEL_ID } from '../settings'
+import ArchivePanel from './ArchivePanel.vue'
+
+/**
+ * The archive viewer's own workbench, laying out its panels around the archive's file tabs.
+ * Placed within an `ArchiveSession`, whose archive it shows.
+ */
+const props = withDefaults(
+	defineProps<{
+		/** Where the layout is persisted; `null` keeps it in memory only. */
+		storageKey: string | null
+		hiddenRegions?: WorkbenchRegion[]
+		/** An empty page of the same origin, which lets panels be popped out into windows loading it. */
+		popoutUrl?: string
+		/** Names the place the archive is browsed, which keeps its own files settings. */
+		workspace?: string
+		/** How folders are browsed there until the user picks otherwise. */
+		defaultBrowsing?: FilesBrowsing
+		/** Offers the archive viewer's settings as a panel, for hosts without settings of their own. */
+		settingsPanel?: boolean
+	}>(),
+	{ workspace: 'archive-viewer', defaultBrowsing: 'listing', settingsPanel: true },
+)
+
+const slots = defineSlots<{
+	toolbar?: () => VNode[]
+	'toolbar-end'?: () => VNode[]
+	'project-details'?: () => VNode[]
+	empty?: () => VNode[]
+}>()
+
+/** Every panel can be arranged freely, and popped out of any dock when the host has a page for it. */
+const mode: WorkbenchMode = {
+	...WORKBENCH_MODES.explorer,
+	popouts: props.popoutUrl ? { url: props.popoutUrl, docks: [...WORKBENCH_HOSTS] } : undefined,
+}
+
+const { fullyLoaded } = injectArchiveSession()
+const filesSettings = useFilesWorkspaceSettings(props.workspace, {
+	browsing: props.defaultBrowsing,
+})
+
+/** Folders opened in tabs of their own trees leave no need for the files sidebar. */
+const panels = useArchivePanels({
+	include: () =>
+		ARCHIVE_PANEL_IDS.filter(
+			(id) =>
+				(props.settingsPanel || id !== SETTINGS_PANEL_ID) &&
+				(id !== 'tree' || filesSettings.store.get(filesSettings.browsing) !== 'tree'),
+		),
+})
+
+const workbench = ref<InstanceType<typeof FileWorkbench>>()
+
+const treePanel = computed(() => panels.value.find((panel) => panel.id === 'tree'))
+
+/**
+ * The files layout's sidebar toggle shows and hides the tree, wherever it was moved to: its
+ * region, or the tree itself when it was moved into the center.
+ */
+const sidebar = {
+	isOpen: () => {
+		const current = workbench.value?.layout
+		if (!current) return true
+		if (!treePanel.value) return false
+		const host = current.regionOf(treePanel.value)
+		return current.isOpen('tree') && (host === 'center' || current.visible[host].value)
+	},
+	setOpen: (open: boolean) => {
+		const current = workbench.value?.layout
+		if (!current || !treePanel.value) return
+		const host = current.regionOf(treePanel.value)
+		if (open) current.revealPanel('tree')
+		else if (host === 'center') current.closePanel('tree')
+		else current.setRegionVisible(host, false)
+	},
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/HashValue.vue b/packages/ui/src/layouts/shared/archive-viewer/components/HashValue.vue
new file mode 100644
index 0000000000..a83abd6ea7
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/HashValue.vue
@@ -0,0 +1,56 @@
+<template>
+	<button
+		v-tooltip="hash"
+		type="button"
+		class="inline-flex max-w-full items-center gap-1.5 rounded-lg border border-solid border-surface-5 bg-surface-2 px-2 py-0.5 font-mono text-xs text-primary transition-[filter,transform] hover:brightness-125 active:scale-95 motion-reduce:transition-none"
+		:aria-label="formatMessage(messages.copy, { hash })"
+		@click="copy"
+	>
+		<span class="truncate" :class="{ 'font-sans font-medium': display }">
+			{{ display ?? shortened }}
+		</span>
+		<CheckIcon v-if="copied" class="size-3 shrink-0 text-green" aria-hidden="true" />
+		<CopyIcon v-else class="size-3 shrink-0" aria-hidden="true" />
+	</button>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, CopyIcon } from '@modrinth/assets'
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+const props = defineProps<{
+	hash: string
+	/** Shown in place of the shortened value, e.g. a short name for a link. */
+	display?: string
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	copy: {
+		id: 'archive-viewer.hash.copy',
+		defaultMessage: 'Copy {hash}',
+	},
+})
+
+/** Enough of each end to tell hashes apart at a glance; the tooltip shows all of it. */
+const EDGE_LENGTH = 6
+
+const shortened = computed(() =>
+	props.hash.length > EDGE_LENGTH ? `${props.hash.slice(0, EDGE_LENGTH)}…` : props.hash,
+)
+
+const copied = ref(false)
+let resetTimeout: ReturnType<typeof setTimeout> | undefined
+
+async function copy() {
+	await navigator.clipboard.writeText(props.hash)
+	copied.value = true
+	clearTimeout(resetTimeout)
+	resetTimeout = setTimeout(() => (copied.value = false), 2000)
+}
+
+onBeforeUnmount(() => clearTimeout(resetTimeout))
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/archive-scope.ts b/packages/ui/src/layouts/shared/archive-viewer/components/archive-scope.ts
new file mode 100644
index 0000000000..5843be57fd
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/archive-scope.ts
@@ -0,0 +1,48 @@
+import { defineComponent, onBeforeUnmount, type PropType } from 'vue'
+
+import type { RootZipTreeNode, ZipHandler } from '#ui/helpers/toolbox/zip'
+
+import { useArchiveFileManager } from '../composables/archive-file-manager'
+import { injectArchiveSession, type OpenArchive } from '../providers/archive-session'
+import type { ArchiveSource } from '../types'
+
+/**
+ * Sets up browsing one archive and hands it to the surrounding session for as long as it's
+ * mounted. Keyed by the archive, so opening another one replaces it. Renders nothing.
+ */
+export default defineComponent({
+	name: 'ArchiveScope',
+	props: {
+		root: { type: Object as PropType<RootZipTreeNode>, required: true },
+		handler: { type: Object as PropType<ZipHandler>, required: true },
+		source: { type: Object as PropType<ArchiveSource>, required: true },
+	},
+	setup(props) {
+		const session = injectArchiveSession()
+		const { context, location, open, fullyLoaded, treeVersion, sha512Hash, archiveHash, nodeAt } =
+			useArchiveFileManager({
+				root: props.root,
+				handler: props.handler,
+				source: props.source,
+				initialPath: session.initialPath(),
+			})
+
+		const archive: OpenArchive = {
+			root: props.root,
+			handler: props.handler,
+			source: props.source,
+			manager: context,
+			location,
+			open,
+			fullyLoaded,
+			treeVersion,
+			sha512Hash,
+			archiveHash,
+			nodeAt,
+		}
+		session.attach(archive)
+		onBeforeUnmount(() => session.detach(archive))
+
+		return () => null
+	},
+})
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/archive-settings-button.vue b/packages/ui/src/layouts/shared/archive-viewer/components/archive-settings-button.vue
new file mode 100644
index 0000000000..fadaa9c4ed
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/archive-settings-button.vue
@@ -0,0 +1,35 @@
+<template>
+	<IconButton
+		v-tooltip="formatMessage(commonMessages.settingsLabel)"
+		type="quiet"
+		size="xs"
+		:label="formatMessage(commonMessages.settingsLabel)"
+		:aria-pressed="workbench.isOpen(SETTINGS_PANEL_ID)"
+		@click="toggle"
+	>
+		<SettingsIcon aria-hidden="true" />
+	</IconButton>
+</template>
+
+<script setup lang="ts">
+import { SettingsIcon } from '@modrinth/assets'
+
+import { IconButton } from '#ui/components/base/buttons'
+import { useVIntl } from '#ui/composables/i18n'
+import { injectWorkbench } from '#ui/layouts/shared/workbench/providers/workbench'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { SETTINGS_PANEL_ID } from '../settings'
+
+/**
+ * Brings the settings panel into view (opening it if closed), wherever it was moved to, and
+ * closes it again when it's already in view.
+ */
+const { formatMessage } = useVIntl()
+const workbench = injectWorkbench()
+
+function toggle() {
+	if (workbench.isShown(SETTINGS_PANEL_ID)) workbench.closePanel(SETTINGS_PANEL_ID)
+	else workbench.revealPanel(SETTINGS_PANEL_ID)
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/details-section/chip.vue b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/chip.vue
new file mode 100644
index 0000000000..443c4a7f2f
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/chip.vue
@@ -0,0 +1,70 @@
+<template>
+	<button
+		v-if="copyable"
+		v-tooltip="tooltip ?? label"
+		type="button"
+		class="flex min-w-0 max-w-full cursor-pointer items-center gap-1 rounded-full border border-solid border-surface-4 bg-surface-2 px-2 py-0.5 text-xs font-medium text-primary transition-colors hover:bg-surface-3 hover:text-contrast motion-reduce:transition-none"
+		:aria-label="formatMessage(copied ? messages.valueCopied : messages.copyValue, { label })"
+		@click="copy"
+	>
+		<CheckIcon v-if="copied" class="size-3.5 shrink-0 text-green" aria-hidden="true" />
+		<component
+			:is="icon"
+			v-else-if="icon"
+			class="size-3.5 shrink-0 text-secondary"
+			aria-hidden="true"
+		/>
+		<span class="truncate" :class="{ 'font-mono': mono }">{{ value }}</span>
+	</button>
+	<span
+		v-else
+		v-tooltip="tooltip ?? label"
+		class="flex min-w-0 max-w-full items-center gap-1 rounded-full border border-solid border-surface-4 bg-surface-2 px-2 py-0.5 text-xs font-medium text-primary"
+	>
+		<component :is="icon" v-if="icon" class="size-3.5 shrink-0 text-secondary" aria-hidden="true" />
+		<span class="sr-only">{{ label }}</span>
+		<span class="truncate" :class="{ 'font-mono': mono }">{{ value }}</span>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon } from '@modrinth/assets'
+import { type Component, onBeforeUnmount, ref } from 'vue'
+
+import { useVIntl } from '#ui/composables/i18n'
+
+import { sectionMessages as messages } from './messages'
+
+/**
+ * A short value shown without a heading (an ID, a date, a count), named by its tooltip, which
+ * copies `copyText` (or the value itself) when clicked.
+ */
+const props = withDefaults(
+	defineProps<{
+		/** What the value is, shown on hover when there's no `tooltip`. */
+		label: string
+		value: string
+		icon?: Component
+		tooltip?: string
+		/** Copied in place of the value shown, e.g. a full date for a short one. */
+		copyText?: string
+		copyable?: boolean
+		mono?: boolean
+	}>(),
+	{ copyable: true },
+)
+
+const { formatMessage } = useVIntl()
+
+const copied = ref(false)
+let copiedReset: ReturnType<typeof setTimeout> | undefined
+
+async function copy() {
+	await navigator.clipboard.writeText(props.copyText ?? props.value)
+	copied.value = true
+	clearTimeout(copiedReset)
+	copiedReset = setTimeout(() => (copied.value = false), 2000)
+}
+
+onBeforeUnmount(() => clearTimeout(copiedReset))
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/details-section/counts.vue b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/counts.vue
new file mode 100644
index 0000000000..4c33b2f388
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/counts.vue
@@ -0,0 +1,70 @@
+<template>
+	<ul
+		class="m-0 flex list-none flex-wrap gap-2 p-0 text-sm"
+		:aria-label="formatMessage(messages.contentsCounts)"
+	>
+		<li
+			v-for="entry in entries"
+			:key="entry.id"
+			v-tooltip="entry.label"
+			class="flex items-center gap-1.5 rounded-lg border border-solid border-surface-4 bg-surface-2 px-2 py-1 tabular-nums text-primary"
+		>
+			<component
+				:is="entry.icon"
+				class="size-4 shrink-0"
+				:class="entry.iconClass"
+				aria-hidden="true"
+			/>
+			<span aria-hidden="true">{{ entry.count }}</span>
+			<span class="sr-only">{{ entry.label }}</span>
+		</li>
+	</ul>
+</template>
+
+<script setup lang="ts">
+import { CoffeeIcon, FileIcon, FolderArchiveIcon, FolderOpenIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { useVIntl } from '#ui/composables/i18n'
+
+import type { ArchiveCounts } from '../../types'
+import { sectionMessages as messages } from './messages'
+
+/** How many of each kind of entry an archive holds, as icons and counts on one line. */
+const props = defineProps<{
+	counts: ArchiveCounts
+}>()
+
+const { formatMessage } = useVIntl()
+
+const entries = computed(() => [
+	{
+		id: 'files',
+		icon: FileIcon,
+		iconClass: 'text-secondary',
+		count: props.counts.files,
+		label: formatMessage(messages.filesCount, { count: props.counts.files }),
+	},
+	{
+		id: 'folders',
+		icon: FolderOpenIcon,
+		iconClass: 'text-amber-400',
+		count: props.counts.folders,
+		label: formatMessage(messages.foldersCount, { count: props.counts.folders }),
+	},
+	{
+		id: 'class-files',
+		icon: CoffeeIcon,
+		iconClass: 'text-orange',
+		count: props.counts.classFiles,
+		label: formatMessage(messages.classFilesCount, { count: props.counts.classFiles }),
+	},
+	{
+		id: 'nested-archives',
+		icon: FolderArchiveIcon,
+		iconClass: 'text-orange',
+		count: props.counts.nestedArchives,
+		label: formatMessage(messages.nestedArchivesCount, { count: props.counts.nestedArchives }),
+	},
+])
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/details-section/details-toggle.vue b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/details-toggle.vue
new file mode 100644
index 0000000000..d07fa4d99d
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/details-toggle.vue
@@ -0,0 +1,37 @@
+<template>
+	<button
+		type="button"
+		class="flex w-full cursor-pointer items-center justify-center gap-1 border-0 border-t border-dashed border-surface-4 bg-transparent py-1 text-xs font-medium text-secondary transition-colors hover:bg-surface-3 hover:text-contrast focus-visible:outline-offset-[-2px] motion-reduce:transition-none"
+		:aria-expanded="open"
+		:aria-controls="controls"
+		@click="emit('update:open', !open)"
+	>
+		<ChevronDownIcon
+			class="size-4 transition-transform motion-reduce:transition-none"
+			:class="{ 'rotate-180': open }"
+			aria-hidden="true"
+		/>
+		{{ formatMessage(open ? messages.hideDetails : messages.showDetails) }}
+	</button>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from '@modrinth/assets'
+
+import { useVIntl } from '#ui/composables/i18n'
+
+import { sectionMessages as messages } from './messages'
+
+/** The tab along the bottom of a section that pulls its details out, or tucks them away. */
+defineProps<{
+	open: boolean
+	/** The id of the details it shows and hides. */
+	controls: string
+}>()
+
+const emit = defineEmits<{
+	'update:open': [open: boolean]
+}>()
+
+const { formatMessage } = useVIntl()
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/details-section/hash-list.vue b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/hash-list.vue
new file mode 100644
index 0000000000..a34f91c0ec
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/hash-list.vue
@@ -0,0 +1,61 @@
+<template>
+	<StatGrid v-if="stats.length" :stats="stats" grid />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import { useVIntl } from '#ui/composables/i18n'
+import type { HashType } from '#ui/helpers/toolbox/file'
+
+import { hashTypeMessages } from '../../messages'
+import type { ArchiveDetailRow } from '../../types'
+import StatGrid from './stat-grid.vue'
+
+/**
+ * The item's hashes of the given types, each computed only once it's listed here and kept for as
+ * long as the item stays the same.
+ */
+const props = defineProps<{
+	/** Computes the item's hash of a type; a new function means a different item. */
+	resolve: (type: HashType) => Promise<string>
+	types: HashType[]
+}>()
+
+const { formatMessage } = useVIntl()
+
+interface HashResult {
+	value: string | null
+	loading: boolean
+}
+
+const results = ref<Partial<Record<HashType, HashResult>>>({})
+
+watch(
+	[() => props.resolve, () => props.types],
+	([resolve, types], previous) => {
+		if (previous && previous[0] !== resolve) results.value = {}
+		for (const type of types) {
+			if (results.value[type]) continue
+			results.value = { ...results.value, [type]: { value: null, loading: true } }
+			resolve(type)
+				.then((value) => ({ value, loading: false }))
+				.catch(() => ({ value: null, loading: false }))
+				.then((result) => {
+					if (props.resolve === resolve) results.value = { ...results.value, [type]: result }
+				})
+		}
+	},
+	{ immediate: true },
+)
+
+const stats = computed<ArchiveDetailRow[]>(() =>
+	props.types.map((type) => ({
+		id: type,
+		label: formatMessage(hashTypeMessages[type]),
+		value: results.value[type]?.value ?? null,
+		loading: results.value[type]?.loading ?? true,
+		hash: true,
+	})),
+)
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/details-section/index.vue b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/index.vue
new file mode 100644
index 0000000000..5639ac2d5e
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/index.vue
@@ -0,0 +1,221 @@
+<template>
+	<section class="flex flex-col" :aria-labelledby="headingId">
+		<div class="flex flex-col gap-3 p-3">
+			<div class="flex min-w-0 items-center gap-2">
+				<slot name="icon">
+					<component
+						:is="icon"
+						v-if="icon"
+						class="size-5 shrink-0"
+						:class="iconClass"
+						aria-hidden="true"
+					/>
+				</slot>
+				<div class="flex min-w-0 flex-1 flex-col">
+					<span class="text-xs font-semibold uppercase tracking-wide text-secondary">{{
+						kind
+					}}</span>
+					<div class="flex min-w-0 items-center gap-1.5">
+						<h3
+							:id="headingId"
+							class="m-0 truncate text-base font-semibold text-contrast"
+							:title="title"
+						>
+							{{ title }}
+						</h3>
+						<component
+							:is="statusIcon.icon"
+							v-if="statusIcon"
+							v-tooltip="statusIcon.label"
+							class="size-4 shrink-0"
+							:class="statusIcon.class"
+							role="img"
+							:aria-label="statusIcon.label"
+						/>
+					</div>
+				</div>
+				<IconButton
+					v-if="path"
+					v-tooltip="path"
+					type="quiet"
+					size="xs"
+					class="shrink-0"
+					:label="formatMessage(copied ? messages.pathCopied : messages.copyPath)"
+					@click="copyPath"
+				>
+					<CheckIcon v-if="copied" class="text-green" aria-hidden="true" />
+					<LinkIcon v-else aria-hidden="true" />
+				</IconButton>
+				<slot name="actions" />
+			</div>
+			<slot />
+			<DetailsList v-if="shownRows.always.length" :rows="shownRows.always" />
+			<StatGrid v-if="shownSizes.always.length" :stats="shownSizes.always" inline />
+			<DetailsCounts v-if="counts && countsVisibility === 'always'" :counts="counts" />
+			<HashList
+				v-if="hash && hashTypesShown.always.length"
+				:resolve="hash"
+				:types="hashTypesShown.always"
+			/>
+		</div>
+		<template v-if="hasDetails">
+			<div v-if="open" :id="detailsId" class="flex flex-col gap-3 px-3 pb-3">
+				<slot name="details" />
+				<DetailsList v-if="detailRows.length" :rows="detailRows" />
+				<StatGrid v-if="shownSizes.details.length" :stats="shownSizes.details" inline />
+				<DetailsCounts v-if="counts && countsVisibility === 'details'" :counts="counts" />
+				<HashList
+					v-if="hash && hashTypesShown.details.length"
+					:resolve="hash"
+					:types="hashTypesShown.details"
+				/>
+			</div>
+			<DetailsToggle v-model:open="open" :controls="detailsId" />
+		</template>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { CheckCircleIcon, CheckIcon, ClockIcon, LinkIcon, SpinnerIcon } from '@modrinth/assets'
+import { useLocalStorage } from '@vueuse/core'
+import { type Component, computed, onBeforeUnmount, ref, useId, type VNode } from 'vue'
+
+import { IconButton } from '#ui/components/base/buttons'
+import { useVIntl } from '#ui/composables/i18n'
+import { HASH_TYPES, type HashType } from '#ui/helpers/toolbox/file'
+
+import { type DetailVisibility, useArchiveDetailSettings } from '../../settings'
+import type { ArchiveCounts, ArchiveDetailRow, ArchiveReadStatus } from '../../types'
+import DetailsCounts from './counts.vue'
+import DetailsToggle from './details-toggle.vue'
+import HashList from './hash-list.vue'
+import DetailsList from './list.vue'
+import { sectionMessages as messages } from './messages'
+import StatGrid from './stat-grid.vue'
+
+/**
+ * One described item of the details stack: what it is and its name (with how far it's been read,
+ * for an archive), then its details. Each row, size, the contents counts and each hash shows
+ * always, only behind the pull tab along the section's bottom, or never, as the row (or the
+ * viewer's settings) say; the pull tab is open or closed for every item sharing its
+ * `detailsKey`. Hosts can use it for items of their own (e.g. the project an archive was
+ * published by), with an `icon` slot in place of the icon, `actions` beside the name, their own
+ * content (the default slot) before the details and more of it (the `details` slot) behind the
+ * pull tab.
+ */
+const props = defineProps<{
+	kind: string
+	title: string
+	icon?: Component
+	iconClass?: string
+	/** Where the item sits in the archive, shown on hover and copied from a button. */
+	path?: string
+	status?: ArchiveReadStatus
+	/** Details shown as their `visibility` says, always by default. */
+	rows?: ArchiveDetailRow[]
+	/** In-depth details, only shown behind the pull tab. */
+	more?: ArchiveDetailRow[]
+	/** Sizes, shown as their `visibility` says, always by default. */
+	sizes?: ArchiveDetailRow[]
+	counts?: ArchiveCounts
+	/** Computes the item's hash of a type, for those the viewer's settings show. */
+	hash?: (type: HashType) => Promise<string>
+	/** Hash types the item can have, when it can't have every kind. */
+	hashTypes?: HashType[]
+	/** Items sharing a key show or hide their details together, e.g. every nested archive. */
+	detailsKey: string
+}>()
+
+const slots = defineSlots<{
+	icon?: () => VNode[]
+	actions?: () => VNode[]
+	default?: () => VNode[]
+	details?: () => VNode[]
+}>()
+
+const { formatMessage } = useVIntl()
+const headingId = useId()
+const detailsId = useId()
+const settings = useArchiveDetailSettings()
+
+const open = useLocalStorage(`archive-viewer-details:open:${props.detailsKey}`, false, {
+	initOnMounted: true,
+})
+
+const countsVisibility = computed(() => settings.visibility('contentCounts'))
+
+/** Rows split by where they show; ones never shown are left out. */
+function byVisibility(rows: ArchiveDetailRow[] | undefined) {
+	const split: Record<Exclude<DetailVisibility, 'never'>, ArchiveDetailRow[]> = {
+		always: [],
+		details: [],
+	}
+	for (const row of rows ?? []) {
+		const visibility = row.visibility ?? 'always'
+		if (visibility !== 'never') split[visibility].push(row)
+	}
+	return split
+}
+
+const shownRows = computed(() => byVisibility(props.rows))
+const shownSizes = computed(() => byVisibility(props.sizes))
+const detailRows = computed(() => [...shownRows.value.details, ...(props.more ?? [])])
+
+/** The item's hash types split by where the settings show them, in the order they're listed. */
+const hashTypesShown = computed(() => {
+	const split: Record<Exclude<DetailVisibility, 'never'>, HashType[]> = { always: [], details: [] }
+	for (const type of HASH_TYPES) {
+		if (props.hashTypes && !props.hashTypes.includes(type)) continue
+		const visibility = settings.hashVisibility(type)
+		if (visibility !== 'never') split[visibility].push(type)
+	}
+	return split
+})
+
+const hasDetails = computed(
+	() =>
+		!!slots.details ||
+		detailRows.value.length > 0 ||
+		shownSizes.value.details.length > 0 ||
+		(!!props.counts && countsVisibility.value === 'details') ||
+		(!!props.hash && hashTypesShown.value.details.length > 0),
+)
+
+const copied = ref(false)
+let copiedReset: ReturnType<typeof setTimeout> | undefined
+
+async function copyPath() {
+	if (!props.path) return
+	await navigator.clipboard.writeText(props.path)
+	copied.value = true
+	clearTimeout(copiedReset)
+	copiedReset = setTimeout(() => (copied.value = false), 2000)
+}
+
+onBeforeUnmount(() => clearTimeout(copiedReset))
+
+const statusIcon = computed(() => {
+	switch (props.status) {
+		case 'read':
+			return {
+				icon: CheckCircleIcon,
+				class: 'text-green',
+				label: formatMessage(messages.statusRead),
+			}
+		case 'reading':
+			return {
+				icon: SpinnerIcon,
+				class: 'animate-spin text-secondary',
+				label: formatMessage(messages.statusReading),
+			}
+		case 'pending':
+			return {
+				icon: ClockIcon,
+				class: 'text-secondary',
+				label: formatMessage(messages.statusPending),
+			}
+		default:
+			return null
+	}
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/details-section/list.vue b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/list.vue
new file mode 100644
index 0000000000..60013ff6cc
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/list.vue
@@ -0,0 +1,53 @@
+<template>
+	<dl class="m-0 grid grid-cols-[minmax(6rem,max-content)_minmax(0,1fr)] gap-x-4 gap-y-2 text-sm">
+		<template v-for="row in rows" :key="row.id">
+			<dt class="text-secondary">{{ row.label }}</dt>
+			<dd class="m-0 min-w-0 break-words text-primary">
+				<SpinnerIcon
+					v-if="row.loading"
+					class="size-4 animate-spin text-secondary"
+					aria-hidden="true"
+				/>
+				<HashValue v-else-if="row.hash && row.value" :hash="row.value" :display="row.display" />
+				<CopyCode
+					v-else-if="row.copyable && row.value"
+					class="max-w-full [&>span]:truncate"
+					:text="row.value"
+				/>
+				<a
+					v-else-if="row.href && row.value"
+					:href="row.href"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="break-all text-link hover:underline"
+				>
+					{{ row.value }}
+				</a>
+				<span
+					v-else
+					v-tooltip="row.tooltip"
+					:class="[
+						row.value == null ? 'text-secondary' : '',
+						row.tone === 'green' ? 'font-semibold text-green' : '',
+						row.tone === 'red' ? 'font-semibold text-red' : '',
+					]"
+				>
+					{{ row.value ?? '-' }}
+				</span>
+			</dd>
+		</template>
+	</dl>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+
+import CopyCode from '#ui/components/base/CopyCode.vue'
+
+import type { ArchiveDetailRow } from '../../types'
+import HashValue from '../HashValue.vue'
+
+defineProps<{
+	rows: ArchiveDetailRow[]
+}>()
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/details-section/messages.ts b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/messages.ts
new file mode 100644
index 0000000000..b66bd94141
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/messages.ts
@@ -0,0 +1,36 @@
+import { defineMessages } from '#ui/composables/i18n'
+
+export const sectionMessages = defineMessages({
+	copyPath: { id: 'archive-viewer.details.copy-path', defaultMessage: 'Copy path' },
+	pathCopied: { id: 'archive-viewer.details.path-copied', defaultMessage: 'Path copied' },
+	contentsCounts: {
+		id: 'archive-viewer.details.contents-counts',
+		defaultMessage: 'Contents',
+	},
+	filesCount: {
+		id: 'archive-viewer.details.files-count',
+		defaultMessage: '{count, plural, one {# file} other {# files}}',
+	},
+	foldersCount: {
+		id: 'archive-viewer.details.folders-count',
+		defaultMessage: '{count, plural, one {# folder} other {# folders}}',
+	},
+	classFilesCount: {
+		id: 'archive-viewer.details.class-files-count',
+		defaultMessage: '{count, plural, one {# class file} other {# class files}}',
+	},
+	nestedArchivesCount: {
+		id: 'archive-viewer.details.nested-archives-count',
+		defaultMessage: '{count, plural, one {# nested archive} other {# nested archives}}',
+	},
+	statusReading: {
+		id: 'archive-viewer.details.status-reading',
+		defaultMessage: 'Reading nested archives...',
+	},
+	statusPending: { id: 'archive-viewer.details.status-pending', defaultMessage: 'Not read yet' },
+	statusRead: { id: 'archive-viewer.details.status-read', defaultMessage: 'Fully read' },
+	copyValue: { id: 'archive-viewer.details.copy-value', defaultMessage: 'Copy {label}' },
+	valueCopied: { id: 'archive-viewer.details.value-copied', defaultMessage: '{label} copied' },
+	showDetails: { id: 'archive-viewer.details.show-details', defaultMessage: 'Show details' },
+	hideDetails: { id: 'archive-viewer.details.hide-details', defaultMessage: 'Hide details' },
+})
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/details-section/stat-grid.vue b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/stat-grid.vue
new file mode 100644
index 0000000000..fad3cb3f94
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/details-section/stat-grid.vue
@@ -0,0 +1,53 @@
+<template>
+	<dl
+		class="m-0 gap-2 text-sm"
+		:class="inline ? 'flex flex-wrap' : 'grid grid-cols-[repeat(auto-fill,minmax(8.5rem,1fr))]'"
+	>
+		<div
+			v-for="stat in stats"
+			:key="stat.id"
+			class="flex min-w-0 rounded-lg border border-solid border-surface-4 bg-surface-2 px-2"
+			:class="
+				inline || grid ? 'max-w-full flex items-center gap-1.5 py-1' : 'flex-col gap-1 py-1.5'
+			"
+		>
+			<dt class="text-xs font-medium text-secondary flex-grow">{{ `${stat.label}: ` }}</dt>
+			<dd class="m-0 min-w-0">
+				<SpinnerIcon
+					v-if="stat.loading"
+					class="size-4 animate-spin text-secondary"
+					aria-hidden="true"
+				/>
+				<HashValue v-else-if="stat.hash && stat.value" :hash="stat.value" :display="stat.display" />
+				<span
+					v-else
+					v-tooltip="stat.tooltip"
+					class="block truncate"
+					:class="[
+						stat.value == null ? 'text-secondary' : 'text-primary',
+						{ 'cursor-help': stat.tooltip },
+					]"
+				>
+					{{ stat.value ?? '-' }}
+				</span>
+			</dd>
+		</div>
+	</dl>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+
+import type { ArchiveDetailRow } from '../../types'
+import HashValue from '../HashValue.vue'
+
+/**
+ * Short values (sizes, checksums) laid out side by side, as many to a row as fit, each with its
+ * label above it, or beside it when `inline`.
+ */
+defineProps<{
+	stats: ArchiveDetailRow[]
+	inline?: boolean
+	grid?: boolean
+}>()
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/LogsPanel.vue b/packages/ui/src/layouts/shared/archive-viewer/components/panels/LogsPanel.vue
new file mode 100644
index 0000000000..f318bce1c1
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/LogsPanel.vue
@@ -0,0 +1,132 @@
+<template>
+	<div class="flex h-full min-h-0 flex-col">
+		<div
+			class="flex shrink-0 flex-wrap items-center gap-1 border-0 border-b border-solid border-surface-5 px-2 py-1"
+		>
+			<Button
+				v-for="level in LEVELS"
+				:key="level"
+				type="quiet"
+				size="xs"
+				:aria-pressed="shownLevels.has(level)"
+				:class="shownLevels.has(level) ? '!text-contrast' : '!text-secondary opacity-60'"
+				@click="toggleLevel(level)"
+			>
+				{{ formatMessage(levelMessages[level]) }}
+			</Button>
+			<span class="ml-auto text-xs text-secondary tabular-nums">
+				{{ formatMessage(messages.count, { shown: shown.length, total: entries.length }) }}
+			</span>
+			<Button type="quiet" size="xs" @click="clear">
+				{{ formatMessage(commonMessages.clearButton) }}
+			</Button>
+		</div>
+		<div ref="list" class="min-h-0 flex-1 overflow-auto font-mono text-xs" @scroll="onScroll">
+			<p v-if="shown.length === 0" class="m-0 p-3 font-sans text-sm text-secondary">
+				{{ formatMessage(messages.empty) }}
+			</p>
+			<div
+				v-for="entry in shown"
+				:key="entry.id"
+				class="flex gap-2 border-0 border-b border-solid border-surface-4 px-2 py-0.5"
+			>
+				<span class="shrink-0 text-secondary tabular-nums">{{ formatTime(entry.time) }}</span>
+				<span class="w-14 shrink-0 font-semibold uppercase" :class="levelColors[entry.level]">
+					{{ entry.level }}
+				</span>
+				<span class="shrink-0 text-secondary">{{ entry.logger }}</span>
+				<span class="min-w-0 whitespace-pre-wrap break-words text-primary">
+					{{ entry.message }}
+					<template v-if="entry.error">
+						<br />
+						<span class="text-red">{{ entry.error }}</span>
+					</template>
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+
+import { Button } from '#ui/components/base/buttons'
+import { useFormatDateTime } from '#ui/composables/format-date-time'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import type { LogLevel } from '#ui/helpers/toolbox/misc/logging'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { useToolboxLogs } from '../../composables/toolbox-logs'
+
+const { formatMessage } = useVIntl()
+const formatTime = useFormatDateTime({ timeStyle: 'medium' })
+
+const messages = defineMessages({
+	empty: { id: 'archive-viewer.logs.empty', defaultMessage: 'Nothing has been logged yet.' },
+	count: { id: 'archive-viewer.logs.count', defaultMessage: '{shown} of {total}' },
+	levelError: { id: 'archive-viewer.logs.level-error', defaultMessage: 'Errors' },
+	levelWarning: { id: 'archive-viewer.logs.level-warning', defaultMessage: 'Warnings' },
+	levelInfo: { id: 'archive-viewer.logs.level-info', defaultMessage: 'Info' },
+	levelDebug: { id: 'archive-viewer.logs.level-debug', defaultMessage: 'Debug' },
+})
+
+const LEVELS = ['error', 'warning', 'info', 'debug'] as const
+type FilterLevel = (typeof LEVELS)[number]
+
+const levelMessages = {
+	error: messages.levelError,
+	warning: messages.levelWarning,
+	info: messages.levelInfo,
+	debug: messages.levelDebug,
+} satisfies Record<FilterLevel, unknown>
+
+const levelColors: Record<LogLevel, string> = {
+	error: 'text-red',
+	warning: 'text-orange',
+	success: 'text-green',
+	info: 'text-blue',
+	neutral: 'text-secondary',
+	debug: 'text-secondary',
+}
+
+/** Success and neutral entries are filtered along with info ones. */
+function filterLevel(level: LogLevel): FilterLevel {
+	return level === 'success' || level === 'neutral' ? 'info' : level
+}
+
+const { entries, clear } = useToolboxLogs()
+
+/** Debug entries (e.g. every worker message) are hidden until asked for. */
+const shownLevels = ref(new Set<FilterLevel>(['error', 'warning', 'info']))
+
+function toggleLevel(level: FilterLevel) {
+	const next = new Set(shownLevels.value)
+	if (next.has(level)) next.delete(level)
+	else next.add(level)
+	shownLevels.value = next
+}
+
+const shown = computed(() =>
+	entries.value.filter((entry) => shownLevels.value.has(filterLevel(entry.level))),
+)
+
+const list = ref<HTMLElement | null>(null)
+/** Follows new entries while scrolled to the bottom. */
+const following = ref(true)
+
+function onScroll() {
+	const element = list.value
+	if (!element) return
+	following.value = element.scrollHeight - element.scrollTop - element.clientHeight < 16
+}
+
+watch(
+	() => shown.value.length,
+	async () => {
+		if (!following.value) return
+		await nextTick()
+		list.value?.scrollTo({ top: list.value.scrollHeight })
+	},
+	{ immediate: true },
+)
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/archive-section.vue b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/archive-section.vue
new file mode 100644
index 0000000000..4009dc8470
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/archive-section.vue
@@ -0,0 +1,61 @@
+<template>
+	<DetailsEntry
+		:kind="formatMessage(messages.nestedArchive, { depth })"
+		:title="node.name"
+		:icon="FolderArchiveIcon"
+		icon-class="text-orange"
+		:path="node.path.replace(/^\/+/, '')"
+		:status="contents.status"
+		:rows="rows"
+		:more="entry.more"
+		:sizes="sizes"
+		:counts="contents.counts"
+		:hash="entry.hash"
+		details-key="nested"
+	/>
+</template>
+
+<script setup lang="ts">
+import { FolderArchiveIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { useVIntl } from '#ui/composables/i18n'
+import type { FileZipTreeNode } from '#ui/helpers/toolbox/zip'
+
+import DetailsEntry from '../../details-section/index.vue'
+import { detailsMessages as messages } from './messages'
+import { useContentsDetails } from './use-contents-details'
+import { useEntryDetails } from './use-entry-details'
+import { useModrinthLookupRow } from './use-modrinth-lookup'
+import { useSizeRow } from './use-size-row'
+
+/**
+ * An archive nested in another: how deep it sits, how it's stored as an entry of the archive
+ * holding it, whether it's already published on Modrinth, and what it holds itself.
+ */
+const props = defineProps<{
+	node: FileZipTreeNode
+	/** How many archives deep it is: 1 for one stored directly in the opened archive. */
+	depth: number
+}>()
+
+const { formatMessage } = useVIntl()
+
+const entry = useEntryDetails(() => props.node)
+const contents = useContentsDetails(() => props.node)
+const sizeRow = useSizeRow()
+
+const modrinthRow = useModrinthLookupRow(() => {
+	const hash = entry.value.hash
+	return hash ? () => hash('sha1') : undefined
+})
+
+const rows = computed(() => [
+	...entry.value.rows,
+	...(modrinthRow.value ? [modrinthRow.value] : []),
+])
+
+const sizes = computed(() => [
+	sizeRow(entry.value.stored?.compressed, entry.value.stored?.size, contents.value.size),
+])
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/entry-section.vue b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/entry-section.vue
new file mode 100644
index 0000000000..4d52fbec4f
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/entry-section.vue
@@ -0,0 +1,70 @@
+<template>
+	<DetailsEntry
+		:kind="formatMessage(file ? messages.file : messages.folder)"
+		:title="node.name"
+		:icon="iconStyle.icon"
+		:icon-class="iconStyle.color"
+		:path="node.path.replace(/^\/+/, '') || '/'"
+		:rows="rows"
+		:more="file ? entry.more : undefined"
+		:sizes="sizes"
+		:hash="file ? entry.hash : undefined"
+		details-key="entry"
+	/>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useFormatDateTime } from '#ui/composables/format-date-time'
+import { useVIntl } from '#ui/composables/i18n'
+import type { ZipNode } from '#ui/helpers/toolbox/zip'
+import { injectFileBrowserUI } from '#ui/layouts/shared/files-tab/providers/file-browser-ui'
+import { fileIconFor } from '#ui/layouts/shared/files-tab/utils'
+
+import type { ArchiveDetailRow } from '../../../types'
+import DetailsEntry from '../../details-section/index.vue'
+import { isPlaceholderDate } from './entry-values'
+import { detailsMessages as messages } from './messages'
+import { useEntryDetails } from './use-entry-details'
+import { useSizeRow } from './use-size-row'
+
+/** The file or folder being viewed, as stored in the archive holding it. */
+const props = defineProps<{ node: ZipNode }>()
+
+const { formatMessage } = useVIntl()
+const formatDate = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+const ui = injectFileBrowserUI()
+
+const file = computed(() => props.node.asFile())
+const entry = useEntryDetails(() => file.value)
+const sizeRow = useSizeRow()
+
+const sizes = computed(() => {
+	const stored = entry.value.stored
+	return stored ? [sizeRow(stored.compressed, stored.size)] : undefined
+})
+
+const iconStyle = computed(() => {
+	const style = fileIconFor({ name: props.node.name, type: props.node.type })
+	return ui.coloredIcons.value ? style : { ...style, color: 'text-secondary' }
+})
+
+const rows = computed<ArchiveDetailRow[]>(() => {
+	if (file.value) return entry.value.rows
+
+	const modified = props.node.metadata.lastModDate
+	return [
+		{
+			id: 'entries',
+			label: formatMessage(messages.entries),
+			value: String(props.node.children.size),
+		},
+		...(isPlaceholderDate(modified)
+			? []
+			: [
+					{ id: 'modified', label: formatMessage(messages.modified), value: formatDate(modified!) },
+				]),
+	]
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/entry-values.ts b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/entry-values.ts
new file mode 100644
index 0000000000..c2b8179994
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/entry-values.ts
@@ -0,0 +1,26 @@
+/**
+ * The earliest date a zip entry can carry. Archives built without timestamps store it, and it
+ * shows as the last hours of 1979 or the first of 1980 depending on the time zone, so dates up to
+ * the start of February 1980 are treated as unset.
+ */
+const PLACEHOLDER_DATE_LIMIT = Date.UTC(1980, 1, 2)
+
+export function isPlaceholderDate(date: Date | undefined | null) {
+	return !date || Number.isNaN(date.getTime()) || date.getTime() < PLACEHOLDER_DATE_LIMIT
+}
+
+export type ArchiveSourceHost = 'modrinth' | 'curseforge' | 'external'
+
+/** Which CDN an archive was downloaded from, if it's one of the known ones. */
+export function sourceHost(url: string): ArchiveSourceHost {
+	let hostname: string
+	try {
+		hostname = new URL(url).hostname
+	} catch {
+		return 'external'
+	}
+	const within = (domain: string) => hostname === domain || hostname.endsWith(`.${domain}`)
+	if (within('modrinth.com')) return 'modrinth'
+	if (within('forgecdn.net') || within('curseforge.com')) return 'curseforge'
+	return 'external'
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/index.vue b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/index.vue
new file mode 100644
index 0000000000..2ab5ad19a1
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/index.vue
@@ -0,0 +1,90 @@
+<template>
+	<div class="flex flex-col divide-x-0 divide-y divide-solid divide-surface-4">
+		<slot v-if="settings.section('source')" name="source" />
+		<RootSection v-if="settings.section('root')" />
+		<div v-if="settings.section('nested') && chain.length > 1" class="px-2 py-1">
+			<Button type="quiet" size="sm" :aria-expanded="expanded" @click="expanded = !expanded">
+				<ChevronUpIcon v-if="expanded" aria-hidden="true" />
+				<ChevronDownIcon v-else aria-hidden="true" />
+				{{
+					expanded
+						? formatMessage(messages.hideParents)
+						: formatMessage(messages.showParents, { count: chain.length - 1 })
+				}}
+			</Button>
+		</div>
+		<ArchiveSection
+			v-for="(nested, index) in settings.section('nested') ? shownChain : []"
+			:key="nested.path"
+			:node="nested"
+			:depth="chain.length - shownChain.length + index + 1"
+		/>
+		<EntrySection v-if="entry && settings.section('entry')" :key="entry.path" :node="entry" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import { Button } from '#ui/components/base/buttons'
+import { useVIntl } from '#ui/composables/i18n'
+import { type FileZipTreeNode, isZipArchive, type ZipNode } from '#ui/helpers/toolbox/zip'
+import { injectFileBrowserUI } from '#ui/layouts/shared/files-tab/providers/file-browser-ui'
+
+import { injectArchiveViewer } from '../../../providers/archive-viewer'
+import { useArchiveDetailSettings } from '../../../settings'
+import ArchiveSection from './archive-section.vue'
+import EntrySection from './entry-section.vue'
+import { detailsMessages as messages } from './messages'
+import RootSection from './root-section.vue'
+
+/**
+ * Details of what's being viewed, stacked from the outside in: where the archive was published
+ * (the `source` slot, e.g. a project's version, when the host knows), the opened archive, the
+ * archives nested within it down to the one the entry sits in (or is), and the entry itself. Each
+ * is only shown when it differs from the one above, so nothing is described twice, and the
+ * archives between the opened one and the closest can be folded away. Each kind of item can be
+ * left out in the viewer's settings.
+ */
+const { formatMessage } = useVIntl()
+const ui = injectFileBrowserUI()
+const archive = injectArchiveViewer()
+const settings = useArchiveDetailSettings()
+
+const expanded = ref(false)
+
+const node = computed<ZipNode | undefined>(() => {
+	void archive.treeVersion.value
+	return archive.nodeAt(ui.activeLocation.value.path)
+})
+
+/** The archive the entry is stored in, or the entry itself when it's an archive. */
+const targetArchive = computed(() => {
+	const current = node.value
+	if (!current) return archive.root
+	if (current.type === 'file' && isZipArchive(current)) return current as FileZipTreeNode
+	return current.getArchive()
+})
+
+/** Every nested archive from the opened one's down to the target, outermost first. */
+const chain = computed(() => {
+	const archives: FileZipTreeNode[] = []
+	for (
+		let current = targetArchive.value;
+		current !== archive.root;
+		current = current.getArchive()
+	) {
+		archives.unshift(current as FileZipTreeNode)
+	}
+	return archives
+})
+
+const shownChain = computed(() => (expanded.value ? chain.value : chain.value.slice(-1)))
+
+const entry = computed(() => {
+	const current = node.value
+	if (!current || current === archive.root || current === targetArchive.value) return undefined
+	return current
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/messages.ts b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/messages.ts
new file mode 100644
index 0000000000..8e86039e1e
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/messages.ts
@@ -0,0 +1,82 @@
+import { defineMessages } from '#ui/composables/i18n'
+
+export const detailsMessages = defineMessages({
+	rootArchive: { id: 'archive-viewer.details.root-archive', defaultMessage: 'Archive' },
+	nestedArchive: {
+		id: 'archive-viewer.details.nested-archive',
+		defaultMessage: 'Nested archive · depth {depth}',
+	},
+	showParents: {
+		id: 'archive-viewer.details.show-parents',
+		defaultMessage:
+			'{count, plural, one {Show # more parent archive} other {Show # more parent archives}}',
+	},
+	hideParents: {
+		id: 'archive-viewer.details.hide-parents',
+		defaultMessage: 'Only show the closest parent archive',
+	},
+	file: { id: 'archive-viewer.details.file', defaultMessage: 'File' },
+	folder: { id: 'archive-viewer.details.folder', defaultMessage: 'Folder' },
+	source: { id: 'archive-viewer.details.source', defaultMessage: 'Source' },
+	entries: { id: 'archive-viewer.details.entries', defaultMessage: 'Entries' },
+	size: { id: 'archive-viewer.details.size', defaultMessage: 'Size' },
+	sizeRatio: {
+		id: 'archive-viewer.details.size-ratio',
+		defaultMessage: '{compressed} / {size}',
+	},
+	compressedRatio: {
+		id: 'archive-viewer.details.compressed-ratio',
+		defaultMessage: 'Compressed to {ratio, number, percent} of its size',
+	},
+	compressedRatioWithContents: {
+		id: 'archive-viewer.details.compressed-ratio-with-contents',
+		defaultMessage:
+			'Compressed to {ratio, number, percent} of its size, holding {contents} of uncompressed contents',
+	},
+	modified: { id: 'archive-viewer.details.modified', defaultMessage: 'Modified' },
+	detectedType: { id: 'archive-viewer.details.detected-type', defaultMessage: 'Detected type' },
+	onModrinth: { id: 'archive-viewer.details.on-modrinth', defaultMessage: 'On Modrinth' },
+	onModrinthMatch: {
+		id: 'archive-viewer.details.on-modrinth-match',
+		defaultMessage: '{project} {version}',
+	},
+	onModrinthNone: {
+		id: 'archive-viewer.details.on-modrinth-none',
+		defaultMessage: 'Not found',
+	},
+	detectedLanguage: {
+		id: 'archive-viewer.details.detected-language',
+		defaultMessage: 'Language',
+	},
+	compression: { id: 'archive-viewer.details.compression', defaultMessage: 'Compression' },
+	compressionStored: { id: 'archive-viewer.details.compression-stored', defaultMessage: 'Stored' },
+	compressionDeflate: {
+		id: 'archive-viewer.details.compression-deflate',
+		defaultMessage: 'Deflate',
+	},
+	compressionOther: {
+		id: 'archive-viewer.details.compression-other',
+		defaultMessage: 'Method {method}',
+	},
+	encrypted: { id: 'archive-viewer.details.encrypted', defaultMessage: 'Encrypted' },
+	yes: { id: 'archive-viewer.details.yes', defaultMessage: 'Yes' },
+	comment: { id: 'archive-viewer.details.comment', defaultMessage: 'Comment' },
+	listedHash: { id: 'archive-viewer.details.listed-hash', defaultMessage: 'Listed hash' },
+	listedHashMatch: { id: 'archive-viewer.details.listed-hash-match', defaultMessage: 'Matches' },
+	listedHashMismatch: {
+		id: 'archive-viewer.details.listed-hash-mismatch',
+		defaultMessage: "Doesn't match",
+	},
+	listedHashPending: {
+		id: 'archive-viewer.details.listed-hash-pending',
+		defaultMessage: 'Checked once fully downloaded',
+	},
+	listedHashValue: {
+		id: 'archive-viewer.details.listed-hash-value',
+		defaultMessage: 'Listed SHA-512: {hash}',
+	},
+	sourceName: {
+		id: 'archive-viewer.details.source-name',
+		defaultMessage: '{host, select, modrinth {Modrinth} curseforge {CurseForge} other {External}}',
+	},
+})
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/root-section.vue b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/root-section.vue
new file mode 100644
index 0000000000..cc42ed5fbf
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/root-section.vue
@@ -0,0 +1,81 @@
+<template>
+	<DetailsEntry
+		:kind="formatMessage(messages.rootArchive)"
+		:title="archive.source.name"
+		:icon="FolderArchiveIcon"
+		icon-class="text-orange"
+		:status="contents.status"
+		:rows="rows"
+		:sizes="sizes"
+		:counts="contents.counts"
+		:hash="archive.archiveHash"
+		details-key="root"
+	/>
+</template>
+
+<script setup lang="ts">
+import { FolderArchiveIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { useVIntl } from '#ui/composables/i18n'
+
+import { injectArchiveViewer } from '../../../providers/archive-viewer'
+import type { ArchiveDetailRow } from '../../../types'
+import DetailsEntry from '../../details-section/index.vue'
+import { sourceHost } from './entry-values'
+import { detailsMessages as messages } from './messages'
+import { useContentsDetails } from './use-contents-details'
+import { useModrinthLookupRow } from './use-modrinth-lookup'
+import { useSizeRow } from './use-size-row'
+
+/** The archive that was opened: where it came from, its size and hash, and what it holds. */
+const { formatMessage } = useVIntl()
+const sizeRow = useSizeRow()
+const archive = injectArchiveViewer()
+
+const contents = useContentsDetails(() => archive.root)
+
+/** An archive listed by a project's version is already known to be on Modrinth; others are looked up. */
+const modrinthRow = useModrinthLookupRow(() =>
+	archive.source.sha512Hash ? undefined : () => archive.archiveHash('sha1'),
+)
+
+/**
+ * Where the archive came from, and whether its hash matches the one it was listed with (e.g. by
+ * the project version it was published in), once all of it has been downloaded.
+ */
+const rows = computed<ArchiveDetailRow[]>(() => {
+	const known = archive.sha512Hash.value
+	const listed = archive.source.sha512Hash
+	const result: ArchiveDetailRow[] = [
+		{
+			id: 'source',
+			label: formatMessage(messages.source),
+			value: archive.source.url,
+			hash: true,
+			display: formatMessage(messages.sourceName, { host: sourceHost(archive.source.url) }),
+		},
+	]
+	if (listed) {
+		const matches = known ? known === listed : null
+		result.push({
+			id: 'listed-hash',
+			label: formatMessage(messages.listedHash),
+			value: formatMessage(
+				matches == null
+					? messages.listedHashPending
+					: matches
+						? messages.listedHashMatch
+						: messages.listedHashMismatch,
+			),
+			tone: matches == null ? undefined : matches ? 'green' : 'red',
+			tooltip: formatMessage(messages.listedHashValue, { hash: listed }),
+		})
+	}
+	if (modrinthRow.value) result.push(modrinthRow.value)
+	return result
+})
+
+/** The downloaded archive against what it holds once uncompressed. */
+const sizes = computed(() => [sizeRow(archive.source.size, contents.value.size)])
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/types.ts b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/types.ts
new file mode 100644
index 0000000000..b57a3cc340
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/types.ts
@@ -0,0 +1,14 @@
+import type { HashType } from '#ui/helpers/toolbox/file'
+
+import type { ArchiveDetailRow } from '../../../types'
+
+/** A described item's details, grouped as they're laid out. */
+export interface DetailGroups {
+	rows: ArchiveDetailRow[]
+	/** In-depth details, folded away by default. */
+	more: ArchiveDetailRow[]
+	/** Its size as stored in its archive, and in full. */
+	stored: { compressed: number; size: number } | null
+	/** Computes the file's hash of a type, for those the viewer's settings list. */
+	hash: ((type: HashType) => Promise<string>) | undefined
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-contents-details.ts b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-contents-details.ts
new file mode 100644
index 0000000000..9c5ff93b13
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-contents-details.ts
@@ -0,0 +1,52 @@
+import { computed } from 'vue'
+
+import { isZipArchive, type ZipNode } from '#ui/helpers/toolbox/zip'
+import { getFileExtension } from '#ui/utils/file-extensions'
+
+import { injectArchiveViewer } from '../../../providers/archive-viewer'
+import type { ArchiveCounts, ArchiveReadStatus } from '../../../types'
+
+/** Counts what the archive holds itself, leaving out the contents of archives nested within it. */
+function summarize(
+	node: ZipNode,
+	totals = { files: 0, folders: 0, classFiles: 0, nestedArchives: 0, size: 0 },
+) {
+	for (const child of node.children.values()) {
+		if (child.type === 'directory') {
+			totals.folders++
+			summarize(child, totals)
+			continue
+		}
+		totals.files++
+		totals.size += child.metadata.uncompressedSize ?? 0
+		if (isZipArchive(child)) totals.nestedArchives++
+		else if (getFileExtension(child.name) === 'class') totals.classFiles++
+	}
+	return totals
+}
+
+/**
+ * What an archive holds: how many of each kind of entry, how many bytes they hold uncompressed,
+ * and how far it has been read, since nested archives are read in the background.
+ */
+export function useContentsDetails(archiveNode: () => ZipNode) {
+	const archive = injectArchiveViewer()
+
+	return computed<{ counts: ArchiveCounts; size: number; status: ArchiveReadStatus }>(() => {
+		void archive.treeVersion.value
+		const node = archiveNode()
+		const { size, ...counts } = summarize(node)
+
+		const status: ArchiveReadStatus = archive.fullyLoaded.value
+			? 'read'
+			: node !== archive.root && node.children.size === 0
+				? 'pending'
+				: 'reading'
+
+		return {
+			counts,
+			size,
+			status,
+		}
+	})
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-entry-details.ts b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-entry-details.ts
new file mode 100644
index 0000000000..a26d39eec2
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-entry-details.ts
@@ -0,0 +1,110 @@
+import { computed } from 'vue'
+
+import { useFormatDateTime } from '#ui/composables/format-date-time'
+import { useVIntl } from '#ui/composables/i18n'
+import type { FileTypeInfo, HashType } from '#ui/helpers/toolbox/file'
+import type { FileZipTreeNode } from '#ui/helpers/toolbox/zip'
+import { getEditorLanguage } from '#ui/utils/file-extensions'
+
+import { useNodeLazyValue } from '../../../composables/node-values'
+import { useArchiveDetailSettings } from '../../../settings'
+import type { ArchiveDetailRow } from '../../../types'
+import { isPlaceholderDate } from './entry-values'
+import { detailsMessages as messages } from './messages'
+import type { DetailGroups } from './types'
+
+/** Languages that only mean the file is plain text, which isn't worth listing. */
+const PLAIN_LANGUAGES = new Set(['text', 'plaintext'])
+
+/** The language a file is highlighted as, from its detected type or else its name. */
+function languageOf(name: string, type: FileTypeInfo | null | undefined) {
+	const language = name.endsWith('.class') ? 'java' : getEditorLanguage(name, type ?? undefined)
+	return PLAIN_LANGUAGES.has(language) ? null : language
+}
+
+/**
+ * A file as stored in its archive: its detected type and language, when it changed and how it's
+ * stored, its sizes (stored and full), and how to compute its hashes (by the worker), only done
+ * for those shown. Its CRC-32 is the one its archive stores for it. Details show as the viewer's
+ * settings say.
+ */
+export function useEntryDetails(file: () => FileZipTreeNode | undefined) {
+	const { formatMessage } = useVIntl()
+	const formatDate = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+	const settings = useArchiveDetailSettings()
+
+	const fileType = useNodeLazyValue(file, 'fileTypeInfo')
+
+	const hash = computed(() => {
+		const target = file()
+		if (!target) return undefined
+		const signature = target.metadata.signature
+		return (type: HashType) =>
+			type === 'crc32' && signature != null
+				? Promise.resolve((signature >>> 0).toString(16).padStart(8, '0'))
+				: target.hash(type)
+	})
+
+	function compressionName(method: number | undefined) {
+		if (method == null) return null
+		if (method === 0) return formatMessage(messages.compressionStored)
+		if (method === 8) return formatMessage(messages.compressionDeflate)
+		return formatMessage(messages.compressionOther, { method })
+	}
+
+	return computed<DetailGroups>(() => {
+		const target = file()
+		if (!target) return { rows: [], more: [], stored: null, hash: undefined }
+		const { metadata } = target
+
+		const rows: ArchiveDetailRow[] = [
+			{
+				id: 'detected-type',
+				label: formatMessage(messages.detectedType),
+				value: fileType.value.value?.mime ?? null,
+				loading: fileType.loading.value,
+				visibility: settings.visibility('detectedType'),
+			},
+		]
+		const language = fileType.loading.value ? null : languageOf(target.name, fileType.value.value)
+		if (language) {
+			rows.push({
+				id: 'detected-language',
+				label: formatMessage(messages.detectedLanguage),
+				value: language,
+				visibility: settings.visibility('detectedLanguage'),
+			})
+		}
+		const more: ArchiveDetailRow[] = [
+			{
+				id: 'compression',
+				label: formatMessage(messages.compression),
+				value: compressionName(metadata.compressionMethod),
+			},
+		]
+		if (!isPlaceholderDate(metadata.lastModDate)) {
+			more.push({
+				id: 'modified',
+				label: formatMessage(messages.modified),
+				value: formatDate(metadata.lastModDate!),
+			})
+		}
+		if (metadata.encrypted) {
+			more.push({
+				id: 'encrypted',
+				label: formatMessage(messages.encrypted),
+				value: formatMessage(messages.yes),
+			})
+		}
+		if (metadata.comment) {
+			more.push({ id: 'comment', label: formatMessage(messages.comment), value: metadata.comment })
+		}
+
+		return {
+			rows,
+			more,
+			stored: { compressed: metadata.compressedSize, size: metadata.uncompressedSize },
+			hash: hash.value,
+		}
+	})
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-modrinth-lookup.ts b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-modrinth-lookup.ts
new file mode 100644
index 0000000000..13fbbb39b0
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-modrinth-lookup.ts
@@ -0,0 +1,95 @@
+import { computed, type Ref, ref, watch } from 'vue'
+
+import { useVIntl } from '#ui/composables/i18n'
+import { injectModrinthClient } from '#ui/providers/api-client'
+
+import { useArchiveDetailSettings } from '../../../settings'
+import type { ArchiveDetailRow } from '../../../types'
+import { detailsMessages as messages } from './messages'
+
+/** A version on Modrinth holding a file with the same hash. */
+interface ModrinthMatch {
+	projectId: string
+	projectName: string
+	versionId: string
+	versionNumber: string
+}
+
+/** Lookups by SHA-1, shared by every section, so a file is only looked up once per page. */
+const lookups = new Map<string, Promise<ModrinthMatch | null>>()
+
+/**
+ * Whether a file (e.g. a nested jar) is already published on Modrinth, found by its SHA-1, as a
+ * row linking to the version holding it. Only looked up while the row is shown, which the
+ * viewer's settings decide.
+ */
+export function useModrinthLookupRow(sha1: () => (() => Promise<string>) | undefined) {
+	const { formatMessage } = useVIntl()
+	const client = injectModrinthClient()
+	const settings = useArchiveDetailSettings()
+
+	const visibility = computed(() => settings.visibility('modrinthLookup'))
+	const match = ref<ModrinthMatch | null>(null) as Ref<ModrinthMatch | null>
+	const loading = ref(false)
+
+	function lookup(hash: string) {
+		let found = lookups.get(hash)
+		if (!found) {
+			found = client.labrinth.versions_v2
+				.getVersionFromFileHash(hash, 'sha1')
+				.then(async (version) => {
+					const project = await client.labrinth.projects_v3.get(version.project_id)
+					return {
+						projectId: project.slug ?? project.id,
+						projectName: project.name,
+						versionId: version.id,
+						versionNumber: version.version_number,
+					}
+				})
+				.catch(() => null)
+			lookups.set(hash, found)
+		}
+		return found
+	}
+
+	watch(
+		[sha1, () => visibility.value !== 'never'],
+		async ([resolve, shown], _, onCleanup) => {
+			let stale = false
+			onCleanup(() => (stale = true))
+			match.value = null
+			if (!resolve || !shown) {
+				loading.value = false
+				return
+			}
+			loading.value = true
+			const result = await resolve()
+				.then(lookup)
+				.catch(() => null)
+			if (stale) return
+			match.value = result
+			loading.value = false
+		},
+		{ immediate: true },
+	)
+
+	return computed<ArchiveDetailRow | null>(() => {
+		if (!sha1() || visibility.value === 'never') return null
+		const found = match.value
+		return {
+			id: 'modrinth-lookup',
+			label: formatMessage(messages.onModrinth),
+			value: found
+				? formatMessage(messages.onModrinthMatch, {
+						project: found.projectName,
+						version: found.versionNumber,
+					})
+				: loading.value
+					? null
+					: formatMessage(messages.onModrinthNone),
+			loading: loading.value,
+			href: found ? `/project/${found.projectId}/version/${found.versionId}` : undefined,
+			visibility: visibility.value,
+		}
+	})
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-size-row.ts b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-size-row.ts
new file mode 100644
index 0000000000..76d6b960e2
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/details/use-size-row.ts
@@ -0,0 +1,55 @@
+import { useFormatBytes } from '#ui/composables/format-bytes'
+import { useVIntl } from '#ui/composables/i18n'
+
+import { useArchiveDetailSettings } from '../../../settings'
+import type { ArchiveDetailRow } from '../../../types'
+import { detailsMessages as messages } from './messages'
+
+/**
+ * Builds the size of an item as "compressed / full size", with how far it was compressed (and,
+ * for an archive, how much it holds once uncompressed) on hover.
+ */
+export function useSizeRow() {
+	const { formatMessage } = useVIntl()
+	const formatBytes = useFormatBytes()
+	const settings = useArchiveDetailSettings()
+
+	return (
+		compressed: number | null | undefined,
+		size: number | null | undefined,
+		contents?: number,
+	): ArchiveDetailRow => {
+		const label = formatMessage(messages.size)
+		if (compressed == null || size == null) {
+			const known = size ?? compressed
+			return {
+				id: 'size',
+				label,
+				value: known != null ? formatBytes(known) : null,
+				visibility: settings.visibility('size'),
+			}
+		}
+
+		const ratio = size > 0 ? compressed / size : null
+		const tooltip =
+			ratio == null
+				? undefined
+				: contents != null
+					? formatMessage(messages.compressedRatioWithContents, {
+							ratio,
+							contents: formatBytes(contents),
+						})
+					: formatMessage(messages.compressedRatio, { ratio })
+
+		return {
+			id: 'size',
+			label,
+			value: formatMessage(messages.sizeRatio, {
+				compressed: formatBytes(compressed),
+				size: formatBytes(size),
+			}),
+			tooltip,
+			visibility: settings.visibility('size'),
+		}
+	}
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/components/panels/settings-panel.vue b/packages/ui/src/layouts/shared/archive-viewer/components/panels/settings-panel.vue
new file mode 100644
index 0000000000..a17d3331ae
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/components/panels/settings-panel.vue
@@ -0,0 +1,57 @@
+<template>
+	<SettingsPages :pages="pages" storage-key="archive-viewer-settings:page" />
+</template>
+
+<script setup lang="ts">
+import { InfoIcon, LayoutPanelLeftIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { type SettingsPage, SettingsPages } from '#ui/components/settings'
+import { defineMessages } from '#ui/composables/i18n'
+import {
+	filesTabSettingGroups,
+	injectFilesWorkspaceSettings,
+	useFilesTabSettings,
+} from '#ui/layouts/shared/files-tab/settings'
+import { injectWorkbench } from '#ui/layouts/shared/workbench/providers/workbench'
+import {
+	workbenchSettingGroup,
+	workbenchSettingsStore,
+} from '#ui/layouts/shared/workbench/settings'
+
+import { archiveSettingGroups, injectArchiveSettings } from '../../settings'
+
+/**
+ * The archive viewer's settings as a panel of its own, so they can be changed while watching them
+ * apply, docked anywhere or popped out like any other panel.
+ */
+const archiveStore = injectArchiveSettings()
+const workbench = injectWorkbench()
+/** The files settings as the place these files are browsed sees them, when it's known. */
+const filesWorkspace = injectFilesWorkspaceSettings(null)
+const filesStore = filesWorkspace?.store ?? useFilesTabSettings()
+const filesGroups = filesWorkspace?.groups ?? filesTabSettingGroups
+
+const messages = defineMessages({
+	details: { id: 'archive-viewer.settings.page.details', defaultMessage: 'Details' },
+	layout: { id: 'archive-viewer.settings.page.layout', defaultMessage: 'Layout and files' },
+})
+
+const pages = computed<SettingsPage[]>(() => [
+	{
+		id: 'details',
+		name: messages.details,
+		icon: InfoIcon,
+		groups: archiveSettingGroups.map((group) => ({ ...group, store: archiveStore })),
+	},
+	{
+		id: 'layout',
+		name: messages.layout,
+		icon: LayoutPanelLeftIcon,
+		groups: [
+			{ ...workbenchSettingGroup(workbench), store: workbenchSettingsStore(workbench) },
+			...filesGroups.map((group) => ({ ...group, store: filesStore })),
+		],
+	},
+])
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/composables/archive-file-manager.ts b/packages/ui/src/layouts/shared/archive-viewer/composables/archive-file-manager.ts
new file mode 100644
index 0000000000..addcfa8878
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/composables/archive-file-manager.ts
@@ -0,0 +1,546 @@
+import { ClipboardCopyIcon, DownloadIcon } from '@modrinth/assets'
+import { computed, markRaw, onScopeDispose, type Ref, ref, shallowReactive, shallowRef } from 'vue'
+
+import { useFormatBytes } from '#ui/composables/format-bytes'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import {
+	AVAILABLE_DECOMPILER_TYPES,
+	type DecompilerTypes,
+	DEFAULT_DECOMPILE_OPTIONS,
+} from '#ui/helpers/toolbox/decompile'
+import { type FileTypeInfo, getFileTypeInfo, type HashType } from '#ui/helpers/toolbox/file'
+import {
+	type FileZipTreeNode,
+	isZipArchive,
+	type LazyDataAccess,
+	type RootZipTreeNode,
+	type ZipHandler,
+	type ZipNode,
+} from '#ui/helpers/toolbox/zip'
+import {
+	type DirectoryResult,
+	type DirectoryTree,
+	type FileInfo,
+	type FileItemResultFrom,
+	type FileManagerContext,
+	type FileResult,
+	type FileTypes,
+	RAW_CONTENT_VARIANT,
+} from '#ui/layouts/shared/files-tab/providers/file-manager'
+import type { FileEntryAction, FileEntryDetail, FileItem } from '#ui/layouts/shared/files-tab/types'
+import {
+	infoFrom,
+	isSameInfo,
+	normalizeDirectoryPath,
+	parentInfoFrom,
+} from '#ui/layouts/shared/files-tab/utils'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+import {
+	getEditorLanguage,
+	getFileExtension,
+	isEditableFile,
+	isImageFile,
+} from '#ui/utils/file-extensions'
+
+import { decompilerMessages } from '../messages'
+import { archiveSettings, injectArchiveSettings } from '../settings'
+import type { ArchiveSource } from '../types'
+import { addToolboxLog } from './toolbox-logs'
+
+const messages = defineMessages({
+	readOnly: {
+		id: 'archive-viewer.read-only',
+		defaultMessage: 'Archives are read-only',
+	},
+	missingEntry: {
+		id: 'archive-viewer.missing-entry',
+		defaultMessage: '"{path}" does not exist within this archive',
+	},
+	disassembler: {
+		id: 'archive-viewer.disassembler',
+		defaultMessage: 'Disassembler',
+	},
+	decompileFailed: {
+		id: 'archive-viewer.decompile-failed',
+		defaultMessage: '{decompiler} could not decompile {path}',
+	},
+	detectedType: {
+		id: 'archive-viewer.detail.detected-type',
+		defaultMessage: 'Detected type',
+	},
+	compressedSize: {
+		id: 'archive-viewer.detail.compressed-size',
+		defaultMessage: 'Compressed size',
+	},
+	sha1: {
+		id: 'archive-viewer.detail.sha1',
+		defaultMessage: 'SHA-1',
+	},
+	downloadArchive: {
+		id: 'archive-viewer.action.download-archive',
+		defaultMessage: 'Download archive',
+	},
+	copySha512: {
+		id: 'archive-viewer.action.copy-sha512',
+		defaultMessage: 'Copy SHA-512',
+	},
+	copiedSha512: {
+		id: 'archive-viewer.action.copied-sha512',
+		defaultMessage: 'Copied SHA-512',
+	},
+})
+
+export interface ArchiveFileManagerOptions {
+	root: RootZipTreeNode
+	handler: ZipHandler
+	source: ArchiveSource
+	/** Path within the archive to open first, e.g. `com/example/Mod.class`. */
+	initialPath?: string | null
+}
+
+interface DirectoryState {
+	result: DirectoryResult
+	isLoading: Ref<boolean>
+	loadError: Ref<Error | null>
+}
+
+function isClassFile(name: string) {
+	return getFileExtension(name) === 'class'
+}
+
+/** Nested archives (e.g. jar-in-jar) are file nodes with children, which are browsed as folders. */
+function isArchive(node: ZipNode) {
+	return node.type === 'file' && isZipArchive(node)
+}
+
+function toSeconds(date: Date | undefined) {
+	return date ? Math.floor(new Date(date).getTime() / 1000) : 0
+}
+
+function toError(error: unknown) {
+	return error instanceof Error ? error : new Error(String(error))
+}
+
+/**
+ * A read-only {@link FileManagerContext} over an archive read by the zip worker, for the files
+ * layout to browse. The tree grows while nested archives are read in the background, class files
+ * open decompiled, and file contents are only ever read off the main thread.
+ */
+export function useArchiveFileManager({
+	root,
+	handler,
+	source,
+	initialPath,
+}: ArchiveFileManagerOptions) {
+	const { formatMessage } = useVIntl()
+	const formatBytes = useFormatBytes()
+	const { addNotification } = injectNotificationManager()
+
+	/** Bumped whenever nodes are added to the tree, which listings and search depend on. */
+	const treeVersion = ref(0)
+	const fullyLoaded = ref(false)
+	/** The archive's own SHA-512, once it has been downloaded in full and hashed. */
+	const sha512Hash = ref<string | null>(root.sha512Hash ?? null)
+
+	/** The whole archive's hash of the given type, once all of it has been downloaded. */
+	function archiveHash(type: HashType) {
+		return handler.readArchiveHash(root.key, type)
+	}
+
+	let treeUpdated = Promise.withResolvers<void>()
+
+	function nodeAt(path: string): ZipNode | undefined {
+		const normalized = normalizeDirectoryPath(path)
+		return normalized === '/' ? root : root.entries.get(normalized)
+	}
+
+	function fileNodeAt(path: string): FileZipTreeNode | undefined {
+		return nodeAt(path)?.asFile()
+	}
+
+	const fileTypes = shallowReactive(new WeakMap<FileZipTreeNode, FileTypeInfo | null>())
+	const fileTypesRequested = new WeakSet<FileZipTreeNode>()
+
+	/**
+	 * The file's type as the worker detects it from its contents, read the first time it's asked
+	 * for. Until then it's `undefined`, and callers that track it are updated once it's read.
+	 */
+	function contentFileType(node: FileZipTreeNode): FileTypeInfo | null | undefined {
+		if (!fileTypesRequested.has(node)) {
+			fileTypesRequested.add(node)
+			node.fileTypeInfo
+				.get()
+				.catch(() => null)
+				.then((info) => fileTypes.set(node, info))
+		}
+		return fileTypes.get(node)
+	}
+
+	/**
+	 * The file's type for the editor. Files with a known extension are judged by it; only those
+	 * without one have their contents read to tell what they are.
+	 */
+	function editorFileType(file: FileInfo): FileTypeInfo | null {
+		const ext = getFileExtension(file.name)
+		const typeFromName = file.name.includes('.') ? getFileTypeInfo(file.name) : null
+		if (typeFromName != null || isEditableFile(ext) || isImageFile(ext)) return typeFromName
+		const node = fileNodeAt(file.path)
+		return (node ? contentFileType(node) : null) ?? null
+	}
+
+	/** Every file opens, as the editor shows the ones it can't read as text in another way. */
+	function canOpenInEditor() {
+		return true
+	}
+
+	function editorLanguage(file: FileInfo) {
+		return isClassFile(file.name) ? 'java' : getEditorLanguage(file.name, editorFileType(file))
+	}
+
+	/** Whether the entry is a nested archive whose own entries haven't been read yet. */
+	function isPendingArchive(node: ZipNode) {
+		return !fullyLoaded.value && isArchive(node) && node.children.size === 0
+	}
+
+	function toItem(node: ZipNode): FileItem {
+		const modified = toSeconds(node.metadata.lastModDate)
+		const browsable = node.type === 'directory' || isArchive(node)
+		return {
+			name: node.name,
+			type: browsable ? 'directory' : 'file',
+			path: normalizeDirectoryPath(node.path),
+			modified,
+			created: toSeconds(node.metadata.creationDate) || modified,
+			size: node.type === 'directory' ? null : node.metadata.uncompressedSize,
+			count: browsable ? node.children.size : null,
+			readOnly: true,
+		}
+	}
+
+	function missingEntryError(path: string) {
+		return new Error(formatMessage(messages.missingEntry, { path }))
+	}
+
+	const directoryStates = new Map<string, DirectoryState>()
+	const fileResults = new Map<string, FileResult>()
+
+	/** Entries may only show up once the nested archive holding them is read. */
+	function syncDirectoryState(path: string, state: DirectoryState) {
+		const node = nodeAt(path)
+		state.isLoading.value = node ? isPendingArchive(node) : !fullyLoaded.value
+		state.loadError.value = node || !fullyLoaded.value ? null : missingEntryError(path)
+	}
+
+	function directoryResult(info: FileInfo<'directory'>): DirectoryResult {
+		const path = normalizeDirectoryPath(info.path)
+		let state = directoryStates.get(path)
+		if (!state) {
+			const isLoading = ref(false)
+			const loadError = ref<Error | null>(null)
+			const data = computed(() => {
+				void treeVersion.value
+				const node = nodeAt(path)
+				return node && (node.type === 'directory' || isArchive(node))
+					? [...node.children.values()].map(toItem)
+					: []
+			})
+			state = { result: { ...info, data, isLoading, loadError }, isLoading, loadError }
+			syncDirectoryState(path, state)
+			directoryStates.set(path, state)
+		}
+		return state.result
+	}
+
+	/** Resolves the file at `path`, waiting for the nested archive holding it to be read. */
+	async function waitForFileNode(path: string): Promise<FileZipTreeNode> {
+		for (;;) {
+			const node = fileNodeAt(path)
+			if (node) return node
+			if (fullyLoaded.value) throw missingEntryError(path)
+			await treeUpdated.promise
+		}
+	}
+
+	const settings = injectArchiveSettings(null)
+
+	function isDecompiler(value: string | undefined): value is DecompilerTypes {
+		return (AVAILABLE_DECOMPILER_TYPES as readonly string[]).includes(value ?? '')
+	}
+
+	/** Class files can be read by any of the decompilers, starting with the one the settings name. */
+	function contentVariants(file: FileInfo<'file'>) {
+		if (!isClassFile(file.name)) return null
+		return {
+			label: formatMessage(messages.disassembler),
+			options: AVAILABLE_DECOMPILER_TYPES.map((type) => ({
+				id: type,
+				label: formatMessage(decompilerMessages[type]),
+			})),
+			default:
+				settings?.get(archiveSettings.files.decompiler) ?? archiveSettings.files.decompiler.default,
+		}
+	}
+
+	/**
+	 * Class files are decompiled (by the given decompiler, else the default one), everything else
+	 * (and any file asked for raw) is read as is. A class file a decompiler couldn't read is noted
+	 * in the logs.
+	 */
+	async function readContent(path: string, variant?: string): Promise<ArrayBuffer> {
+		const node = await waitForFileNode(path)
+		if (variant === RAW_CONTENT_VARIANT) return node.getBuffer()
+		const decompiler = isDecompiler(variant) ? variant : undefined
+		const result = await node.asText(
+			decompiler ? { ...DEFAULT_DECOMPILE_OPTIONS, decompiler } : undefined,
+		)
+		if (isClassFile(node.name) && (result.error || !result.wasDecompiled)) {
+			addToolboxLog(
+				'error',
+				'Decompiler',
+				formatMessage(messages.decompileFailed, {
+					path: normalizeDirectoryPath(path),
+					decompiler: formatMessage(
+						decompilerMessages[decompiler ?? DEFAULT_DECOMPILE_OPTIONS.decompiler],
+					),
+				}),
+				result.error,
+			)
+		}
+		return result.wasDecompiled
+			? new TextEncoder().encode(result.asString).buffer
+			: await node.getBuffer()
+	}
+
+	function fileResultKey(path: string, variant?: string) {
+		return variant ? `${path}\u0000${variant}` : path
+	}
+
+	function fileResult(info: FileInfo<'file'>, variant?: string): FileResult {
+		const path = normalizeDirectoryPath(info.path)
+		const key = fileResultKey(path, variant)
+		let result = fileResults.get(key)
+		if (!result) {
+			const data = shallowRef<ArrayBuffer | null>(null)
+			const isLoading = ref(true)
+			const loadError = ref<Error | null>(null)
+			readContent(path, variant)
+				.then(
+					(buffer) => (data.value = markRaw(buffer)),
+					(error) => (loadError.value = toError(error)),
+				)
+				.finally(() => (isLoading.value = false))
+			result = { ...info, data: computed(() => data.value), isLoading, loadError }
+			fileResults.set(key, result)
+		}
+		return result
+	}
+
+	const directoryTree = {
+		get: <T extends FileTypes>(info: FileInfo<T>, variant?: string): FileItemResultFrom<T> =>
+			(info.type === 'file'
+				? fileResult(info as FileInfo<'file'>, variant)
+				: directoryResult(info as FileInfo<'directory'>)) as FileItemResultFrom<T>,
+		/** Class files aren't prefetched, so hovering over a package doesn't queue up decompiles. */
+		prefetch: <T extends FileTypes>(info: FileInfo<T>) => {
+			if (info.type === 'file' && isClassFile(info.name)) return
+			directoryTree.get(info)
+		},
+		expandedEntries: ref<string[]>([]),
+		loadedEntries: computed(() => {
+			void treeVersion.value
+			return [...root.entries.values()].map(toItem)
+		}),
+	} satisfies DirectoryTree
+
+	/** The entry at a path within the archive, or `null` when there is none (yet). */
+	function locate(path: string): FileInfo | null {
+		const node = nodeAt(path)
+		if (!node) return null
+		return node === root ? infoFrom('/') : infoFrom(toItem(node))
+	}
+
+	const currentLocation = ref<FileInfo>((initialPath ? locate(initialPath) : null) ?? infoFrom('/'))
+	const currentDirectory = computed<FileInfo<'directory'>>(() =>
+		currentLocation.value.type === 'file'
+			? parentInfoFrom(currentLocation.value)
+			: (currentLocation.value as FileInfo<'directory'>),
+	)
+
+	/** A requested path within a nested archive that hasn't been read yet, opened once it is. */
+	let pendingPath = initialPath && !locate(initialPath) ? initialPath : null
+
+	function navigateTo(file: FileInfo) {
+		if (file.path !== '/') pendingPath = null
+		currentLocation.value = file
+	}
+
+	/** Opens a path within the archive, or once it shows up if a nested archive is still being read. */
+	function open(path: string) {
+		const target = locate(path)
+		if (target) {
+			pendingPath = null
+			if (!isSameInfo(target, currentLocation.value)) navigateTo(target)
+		} else if (!fullyLoaded.value) {
+			pendingPath = path
+		}
+	}
+
+	function onTreeChanged() {
+		treeVersion.value++
+		for (const [path, state] of directoryStates) syncDirectoryState(path, state)
+
+		if (pendingPath) {
+			const target = locate(pendingPath)
+			if (target) {
+				pendingPath = null
+				navigateTo(target)
+			} else if (fullyLoaded.value) {
+				pendingPath = null
+			}
+		}
+
+		treeUpdated.resolve()
+		treeUpdated = Promise.withResolvers<void>()
+	}
+
+	const updates = handler.onArchiveUpdate.subscribe((update) => {
+		if (update.type === 'node_loaded' && update.root.root === root.key) {
+			onTreeChanged()
+		} else if (update.type === 'updated_node_data' && update.node.root === root.key) {
+			const path = normalizeDirectoryPath(update.node.path)
+			for (const key of [...fileResults.keys()]) {
+				if (key === path || key.startsWith(`${path}\u0000`)) fileResults.delete(key)
+			}
+			const node = fileNodeAt(update.node.path)
+			if (node) {
+				fileTypesRequested.delete(node)
+				fileTypes.delete(node)
+			}
+		} else if (update.type === 'root_hashed' && update.root.root === root.key) {
+			sha512Hash.value = update.sha512Hash
+		}
+	})
+	onScopeDispose(() => updates.cancel())
+
+	root.onFinishedLoading.then(() => {
+		fullyLoaded.value = true
+		onTreeChanged()
+	})
+
+	function saveBuffer(buffer: ArrayBuffer, name: string) {
+		const url = URL.createObjectURL(new Blob([buffer]))
+		const anchor = document.createElement('a')
+		anchor.href = url
+		anchor.download = name
+		anchor.click()
+		setTimeout(() => URL.revokeObjectURL(url), 0)
+	}
+
+	async function downloadEntry(file: FileInfo) {
+		const node = fileNodeAt(file.path)
+		if (!node) return
+		saveBuffer(await node.getBuffer(), node.name)
+	}
+
+	async function readLazy<K extends keyof LazyDataAccess>(
+		entry: FileInfo,
+		key: K,
+	): Promise<ReturnType<LazyDataAccess[K]['get']> | null> {
+		const node = fileNodeAt(entry.path)
+		return node ? ((await node[key].get()) as ReturnType<LazyDataAccess[K]['get']>) : null
+	}
+
+	const isFileNode = (entry: FileInfo) => fileNodeAt(entry.path) != null
+
+	const entryDetails: FileEntryDetail[] = [
+		{
+			id: 'archive-detected-type',
+			label: formatMessage(messages.detectedType),
+			shown: isFileNode,
+			value: async (entry) => (await readLazy(entry, 'fileTypeInfo'))?.mime ?? null,
+		},
+		{
+			id: 'archive-compressed-size',
+			label: formatMessage(messages.compressedSize),
+			shown: isFileNode,
+			value: (entry) => {
+				const node = fileNodeAt(entry.path)
+				return node ? formatBytes(node.metadata.compressedSize) : null
+			},
+		},
+		{
+			id: 'archive-sha1',
+			label: formatMessage(messages.sha1),
+			shown: isFileNode,
+			value: async (entry) => (await fileNodeAt(entry.path)?.hash('sha1')) ?? null,
+		},
+	]
+
+	const entryActions: FileEntryAction[] = [
+		{
+			id: 'archive-download-nested',
+			label: formatMessage(messages.downloadArchive),
+			icon: DownloadIcon,
+			shown: (entry) => {
+				const node = nodeAt(entry.path)
+				return node != null && isZipArchive(node)
+			},
+			action: downloadEntry,
+		},
+		{
+			id: 'archive-copy-sha512',
+			label: formatMessage(messages.copySha512),
+			icon: ClipboardCopyIcon,
+			shown: isFileNode,
+			action: async (entry) => {
+				const hash = await fileNodeAt(entry.path)?.hash('sha512')
+				if (!hash) return
+				await navigator.clipboard.writeText(hash)
+				addNotification({ title: formatMessage(messages.copiedSha512), type: 'success' })
+			},
+		},
+	]
+
+	const context: FileManagerContext = {
+		workspaceId: `archive:${source.sha512Hash ?? source.url.split('?')[0]}`,
+		currentFile: computed(() => currentLocation.value),
+		currentDirectory,
+		directoryTree,
+		loading: computed(() => directoryResult(currentDirectory.value).isLoading.value),
+		error: computed(() => directoryResult(currentDirectory.value).loadError.value),
+		navigateTo,
+
+		createItem: async () => null,
+		renameItem: async () => null,
+		moveItem: async () => null,
+		deleteItem: async () => false,
+		writeFile: async () => {},
+		uploadFiles: () => {},
+		downloadFile: downloadEntry,
+
+		isRefreshing: ref(false),
+		refresh: async () => fileResults.clear(),
+
+		readOnly: true,
+		isReadOnly: () => true,
+		readOnlyReason: computed(() => formatMessage(messages.readOnly)),
+		basePath: computed(() => source.name),
+
+		canOpenInEditor,
+		editorLanguage,
+		contentVariants,
+		entryActions,
+		entryDetails,
+	}
+
+	return {
+		context,
+		location: currentLocation,
+		open,
+		fullyLoaded,
+		treeVersion,
+		sha512Hash,
+		archiveHash,
+		nodeAt,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/composables/archive-loader.ts b/packages/ui/src/layouts/shared/archive-viewer/composables/archive-loader.ts
new file mode 100644
index 0000000000..6e36840272
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/composables/archive-loader.ts
@@ -0,0 +1,130 @@
+import {
+	markRaw,
+	type MaybeRefOrGetter,
+	onScopeDispose,
+	ref,
+	shallowRef,
+	toValue,
+	watch,
+} from 'vue'
+
+import type { EventSubscription } from '#ui/helpers/toolbox/misc'
+import type { ArchiveUpdateTypes, RootZipTreeNode, ZipHandler } from '#ui/helpers/toolbox/zip'
+
+import type { ArchiveLoadProgress, ArchiveLoadStage, ArchiveSource } from '../types'
+import { startToolboxLogCapture } from './toolbox-logs'
+
+export interface ArchiveLoaderOptions {
+	/** Keeps archives open in the worker once they are left, so reopening them skips reading them. */
+	retain?: boolean
+}
+
+/** The toolbox is loaded on demand, as it pulls in the workers, zip.js and the decompilers. */
+async function getZipHandler(): Promise<ZipHandler> {
+	await startToolboxLogCapture()
+	const { messengerRegistry, zipHandlerType } = await import('#ui/helpers/toolbox/workers')
+	return (await messengerRegistry.getMessenger(zipHandlerType)!).handler
+}
+
+/**
+ * Opens an archive by URL within the zip worker, reopening it whenever the source's URL changes.
+ * Only the archive's index is fetched before its tree is shown; file contents are fetched with
+ * range requests as they are opened, while nested archives are read in the background.
+ */
+export function useArchiveLoader(
+	source: MaybeRefOrGetter<ArchiveSource | null>,
+	options: ArchiveLoaderOptions = {},
+) {
+	const stage = ref<ArchiveLoadStage>('idle')
+	/** Bytes of the archive fetched so far, which keeps growing as files are opened. */
+	const progress = ref<ArchiveLoadProgress>({ loaded: 0, total: null })
+	const error = ref<Error | null>(null)
+	const root = shallowRef<RootZipTreeNode | null>(null)
+	const handler = shallowRef<ZipHandler | null>(null)
+	/** Whether every nested archive has been read too. */
+	const fullyLoaded = ref(false)
+
+	let progressSubscription: EventSubscription<(update: ArchiveUpdateTypes) => void> | null = null
+	/** Identifies the latest load, so an earlier one finishing late is ignored. */
+	let generation = 0
+
+	function release(node: RootZipTreeNode | null) {
+		if (options.retain || !node || !handler.value) return
+		handler.value.closeZipTree(node).catch(() => undefined)
+	}
+
+	function trackProgress(zip: ZipHandler, url: string) {
+		progressSubscription?.cancel()
+		progressSubscription = zip.onArchiveUpdate.subscribe((update) => {
+			if (update.type === 'archive_download' && update.url === url) {
+				progress.value = { loaded: update.current, total: update.total }
+			}
+		})
+	}
+
+	async function load(target: ArchiveSource | null) {
+		const current = ++generation
+		release(root.value)
+		root.value = null
+		error.value = null
+		fullyLoaded.value = false
+		progressSubscription?.cancel()
+		progressSubscription = null
+
+		if (!target || typeof window === 'undefined') {
+			stage.value = 'idle'
+			return
+		}
+
+		stage.value = 'reading'
+		progress.value = { loaded: 0, total: target.size ?? null }
+
+		try {
+			const zip = await getZipHandler()
+			if (current !== generation) return
+			handler.value = zip
+			trackProgress(zip, target.url)
+
+			const node = await zip.getOrReadZipTree({
+				data_type: 'url',
+				name: target.name,
+				url: target.url,
+				sha512Hash: target.sha512Hash,
+				rangeOptions: { size: target.size },
+			})
+			if (current !== generation) return
+
+			root.value = markRaw(node)
+			stage.value = 'ready'
+			node.onFinishedLoading.then(() => {
+				if (current === generation) fullyLoaded.value = true
+			})
+		} catch (e) {
+			if (current !== generation) return
+			error.value = e instanceof Error ? e : new Error(String(e))
+			stage.value = 'error'
+		}
+	}
+
+	watch(
+		() => toValue(source)?.url,
+		() => load(toValue(source)),
+		{ immediate: true },
+	)
+
+	onScopeDispose(() => {
+		generation++
+		progressSubscription?.cancel()
+		release(root.value)
+	})
+
+	return {
+		stage,
+		progress,
+		error,
+		root,
+		handler,
+		fullyLoaded,
+		retry: () => load(toValue(source)),
+	}
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/composables/node-values.ts b/packages/ui/src/layouts/shared/archive-viewer/composables/node-values.ts
new file mode 100644
index 0000000000..f7336c184e
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/composables/node-values.ts
@@ -0,0 +1,44 @@
+import { type Ref, ref, watch } from 'vue'
+
+import type { FileZipTreeNode, LazyDataAccess } from '#ui/helpers/toolbox/zip'
+
+export interface NodeLazyValue<T> {
+	value: Ref<T | null>
+	loading: Ref<boolean>
+}
+
+/**
+ * A value computed by the zip worker for a file node (e.g. a hash), loaded whenever the node
+ * changes. Results for a node that's no longer current are dropped.
+ */
+export function useNodeLazyValue<K extends keyof LazyDataAccess>(
+	node: () => FileZipTreeNode | undefined,
+	key: K,
+): NodeLazyValue<Awaited<ReturnType<LazyDataAccess[K]['get']>>> {
+	type Value = Awaited<ReturnType<LazyDataAccess[K]['get']>>
+	const value = ref<Value | null>(null) as Ref<Value | null>
+	const loading = ref(false)
+
+	watch(
+		node,
+		async (current, _, onCleanup) => {
+			let stale = false
+			onCleanup(() => (stale = true))
+
+			value.value = null
+			if (!current) {
+				loading.value = false
+				return
+			}
+
+			loading.value = true
+			const result = await (current[key].get() as Promise<Value>).catch(() => null)
+			if (stale) return
+			value.value = result
+			loading.value = false
+		},
+		{ immediate: true },
+	)
+
+	return { value, loading }
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/composables/toolbox-logs.ts b/packages/ui/src/layouts/shared/archive-viewer/composables/toolbox-logs.ts
new file mode 100644
index 0000000000..7524c7fd86
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/composables/toolbox-logs.ts
@@ -0,0 +1,64 @@
+import { shallowRef } from 'vue'
+
+import type { LogLevel } from '#ui/helpers/toolbox/misc/logging'
+
+export interface ToolboxLogEntry {
+	id: number
+	time: Date
+	level: LogLevel
+	logger: string
+	message: string
+	error?: string
+}
+
+const MAX_ENTRIES = 1000
+
+const entries = shallowRef<ToolboxLogEntry[]>([])
+let nextId = 0
+let capture: Promise<void> | null = null
+
+function errorText(error: unknown) {
+	if (error == null) return undefined
+	return error instanceof Error ? (error.stack ?? error.message) : String(error)
+}
+
+/**
+ * Starts keeping the toolbox's logs, including those its workers forward to the main thread.
+ * Only the latest entries are kept. Safe to call more than once.
+ */
+export function startToolboxLogCapture(): Promise<void> {
+	capture ??= import('#ui/helpers/toolbox/workers').then(({ messengerRegistry }) => {
+		messengerRegistry.getLogFactory().onLog.subscribe((level, logger, message, extra) => {
+			const entry: ToolboxLogEntry = {
+				id: nextId++,
+				time: new Date(),
+				level,
+				logger,
+				message,
+				error: errorText(extra?.err),
+			}
+			entries.value = [...entries.value.slice(-(MAX_ENTRIES - 1)), entry]
+		})
+	})
+	return capture
+}
+
+/** Adds an entry of the viewer's own, e.g. a file a decompiler couldn't read. */
+export function addToolboxLog(level: LogLevel, logger: string, message: string, error?: unknown) {
+	const entry: ToolboxLogEntry = {
+		id: nextId++,
+		time: new Date(),
+		level,
+		logger,
+		message,
+		error: errorText(error),
+	}
+	entries.value = [...entries.value.slice(-(MAX_ENTRIES - 1)), entry]
+}
+
+export function useToolboxLogs() {
+	return {
+		entries,
+		clear: () => (entries.value = []),
+	}
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/index.ts b/packages/ui/src/layouts/shared/archive-viewer/index.ts
new file mode 100644
index 0000000000..dabe74bfca
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/index.ts
@@ -0,0 +1,30 @@
+export { default as ArchivePanel } from './components/ArchivePanel.vue'
+export { default as ArchiveProgress } from './components/ArchiveProgress.vue'
+export { default as ArchiveSession } from './components/ArchiveSession.vue'
+export { default as ArchiveStatus } from './components/ArchiveStatus.vue'
+export { default as ArchiveWorkbench } from './components/ArchiveWorkbench.vue'
+export { default as ArchiveDetailChip } from './components/details-section/chip.vue'
+export { default as ArchiveDetailsSection } from './components/details-section/index.vue'
+export { default as ArchiveHashValue } from './components/HashValue.vue'
+export { default as ArchiveViewerLayout } from './layout.vue'
+export {
+	ARCHIVE_PANEL_IDS,
+	type ArchivePanelId,
+	type ArchivePanelOptions,
+	useArchivePanels,
+} from './panels'
+export {
+	type ArchiveSessionContext,
+	injectArchiveSession,
+	type OpenArchive,
+} from './providers/archive-session'
+export { type ArchiveViewerContext, injectArchiveViewer } from './providers/archive-viewer'
+export {
+	archiveSettingGroups,
+	archiveSettings,
+	type DetailVisibility,
+	injectArchiveSettings,
+	provideArchiveSettings,
+	useStoredArchiveSettings,
+} from './settings'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/archive-viewer/layout.vue b/packages/ui/src/layouts/shared/archive-viewer/layout.vue
new file mode 100644
index 0000000000..c9766766f6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/layout.vue
@@ -0,0 +1,95 @@
+<template>
+	<div class="flex h-full min-h-0 w-full flex-col">
+		<ArchiveSession
+			v-slot="{ opened }"
+			:source="source"
+			:path="path"
+			:retain="retain"
+			@update:path="(value) => emit('update:path', value)"
+		>
+			<ArchiveWorkbench
+				v-if="opened"
+				:storage-key="storageKey"
+				:hidden-regions="hiddenRegions"
+				:popout-url="popoutUrl"
+			>
+				<template #toolbar>
+					<slot name="toolbar" />
+					<ArchiveProgress />
+				</template>
+				<template #toolbar-end>
+					<ArchiveSettings />
+				</template>
+				<template v-if="slots['project-details']" #project-details>
+					<slot name="project-details" />
+				</template>
+				<template v-if="slots.empty" #empty>
+					<slot name="empty" />
+				</template>
+			</ArchiveWorkbench>
+			<template v-else>
+				<div
+					class="flex min-h-10 shrink-0 flex-wrap items-center gap-2 border-0 border-b border-solid border-surface-5 bg-surface-3 px-2 py-1"
+				>
+					<slot name="toolbar" />
+				</div>
+				<div class="min-h-0 flex-1 overflow-auto p-4">
+					<ArchiveStatus>
+						<template v-if="slots.empty" #empty>
+							<slot name="empty" />
+						</template>
+					</ArchiveStatus>
+				</div>
+			</template>
+		</ArchiveSession>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { VNode } from 'vue'
+
+import type { WorkbenchRegion } from '#ui/layouts/shared/workbench/types'
+
+import ArchiveSettings from './components/archive-settings-button.vue'
+import ArchiveProgress from './components/ArchiveProgress.vue'
+import ArchiveSession from './components/ArchiveSession.vue'
+import ArchiveStatus from './components/ArchiveStatus.vue'
+import ArchiveWorkbench from './components/ArchiveWorkbench.vue'
+import type { ArchiveSource } from './types'
+
+withDefaults(
+	defineProps<{
+		source: ArchiveSource | null
+		/** Path of the entry open within the archive, without a leading slash. */
+		path?: string | null
+		/** Keeps the archive open in the worker after leaving it, so reopening it skips reading it. */
+		retain?: boolean
+		/**
+		 * Where the panel layout is persisted. `null` keeps it in memory only, e.g. for an embedded
+		 * view that shouldn't change the user's own arrangement.
+		 */
+		storageKey?: string | null
+		/** Regions hidden when opened, regardless of how they were left. */
+		hiddenRegions?: WorkbenchRegion[]
+		/**
+		 * An empty page of the same origin, which lets panels be popped out into windows loading it.
+		 * Without one, panels stay within the page.
+		 */
+		popoutUrl?: string
+	}>(),
+	{ storageKey: 'archive-viewer' },
+)
+
+const emit = defineEmits<{
+	'update:path': [path: string]
+}>()
+
+const slots = defineSlots<{
+	/** Controls shown at the start of the toolbar, e.g. picking the archive to open. */
+	toolbar?: () => VNode[]
+	/** Details about where the archive comes from, shown as a panel when given. */
+	'project-details'?: () => VNode[]
+	/** Shown while there's no archive to open. */
+	empty?: () => VNode[]
+}>()
+</script>
diff --git a/packages/ui/src/layouts/shared/archive-viewer/messages.ts b/packages/ui/src/layouts/shared/archive-viewer/messages.ts
new file mode 100644
index 0000000000..2a5fe92ca3
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/messages.ts
@@ -0,0 +1,19 @@
+import { defineMessages } from '#ui/composables/i18n'
+import type { DecompilerTypes } from '#ui/helpers/toolbox/decompile'
+import type { HashType } from '#ui/helpers/toolbox/file'
+
+export const hashTypeMessages = defineMessages({
+	sha1: { id: 'archive-viewer.hash-type.sha1', defaultMessage: 'SHA-1' },
+	sha256: { id: 'archive-viewer.hash-type.sha256', defaultMessage: 'SHA-256' },
+	sha384: { id: 'archive-viewer.hash-type.sha384', defaultMessage: 'SHA-384' },
+	sha512: { id: 'archive-viewer.hash-type.sha512', defaultMessage: 'SHA-512' },
+	murmur2: { id: 'archive-viewer.hash-type.murmur2', defaultMessage: 'Murmur2' },
+	crc32: { id: 'archive-viewer.hash-type.crc32', defaultMessage: 'CRC-32' },
+} satisfies Record<HashType, unknown>)
+
+export const decompilerMessages = defineMessages({
+	cfr: { id: 'archive-viewer.decompiler.cfr', defaultMessage: 'CFR' },
+	vineflower: { id: 'archive-viewer.decompiler.vineflower', defaultMessage: 'Vineflower' },
+	procyon: { id: 'archive-viewer.decompiler.procyon', defaultMessage: 'Procyon' },
+	krakatau: { id: 'archive-viewer.decompiler.krakatau', defaultMessage: 'Krakatau' },
+} satisfies Record<DecompilerTypes, unknown>)
diff --git a/packages/ui/src/layouts/shared/archive-viewer/panels.ts b/packages/ui/src/layouts/shared/archive-viewer/panels.ts
new file mode 100644
index 0000000000..0bb2b46049
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/panels.ts
@@ -0,0 +1,83 @@
+import { FolderOpenIcon, InfoIcon, SettingsIcon, TerminalSquareIcon } from '@modrinth/assets'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import type { WorkbenchHost, WorkbenchPanel } from '#ui/layouts/shared/workbench/types'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { SETTINGS_PANEL_ID } from './settings'
+
+/** The archive viewer's panels, which any workbench within an archive session can host. */
+export const ARCHIVE_PANEL_IDS = ['tree', 'details', 'logs', SETTINGS_PANEL_ID] as const
+
+export type ArchivePanelId = (typeof ARCHIVE_PANEL_IDS)[number]
+
+const DEFAULT_REGIONS: Record<ArchivePanelId, WorkbenchHost> = {
+	tree: 'left',
+	details: 'right',
+	logs: 'bottom',
+	[SETTINGS_PANEL_ID]: 'center',
+}
+
+const messages = defineMessages({
+	tree: { id: 'archive-viewer.panel.tree', defaultMessage: 'Files' },
+	details: { id: 'archive-viewer.panel.details', defaultMessage: 'Details' },
+	logs: { id: 'archive-viewer.panel.logs', defaultMessage: 'Logs' },
+})
+
+export interface ArchivePanelOptions {
+	/** Which of the panels to include, all of them by default. */
+	include?: MaybeRefOrGetter<readonly ArchivePanelId[]>
+	/** Where each panel starts out, for hosts laying them out differently. */
+	regions?: Partial<Record<ArchivePanelId, WorkbenchHost>>
+	/** Panels that start closed until opened from the workbench's menus. */
+	closedByDefault?: readonly ArchivePanelId[]
+}
+
+/**
+ * The archive viewer's panels, to list among a workbench's own; their content is `ArchivePanel`
+ * with the panel's id. The settings panel starts closed unless a host says otherwise.
+ */
+export function useArchivePanels(options: ArchivePanelOptions = {}) {
+	const { formatMessage } = useVIntl()
+
+	return computed<WorkbenchPanel[]>(() => {
+		const include = toValue(options.include) ?? ARCHIVE_PANEL_IDS
+		const closed = options.closedByDefault ?? [SETTINGS_PANEL_ID]
+		const regionOf = (id: ArchivePanelId) => options.regions?.[id] ?? DEFAULT_REGIONS[id]
+
+		const panels: Record<ArchivePanelId, WorkbenchPanel> = {
+			tree: {
+				id: 'tree',
+				title: formatMessage(messages.tree),
+				region: 'left',
+				icon: FolderOpenIcon,
+			},
+			details: {
+				id: 'details',
+				title: formatMessage(messages.details),
+				region: 'right',
+				icon: InfoIcon,
+			},
+			logs: {
+				id: 'logs',
+				title: formatMessage(messages.logs),
+				region: 'bottom',
+				icon: TerminalSquareIcon,
+			},
+			[SETTINGS_PANEL_ID]: {
+				id: SETTINGS_PANEL_ID,
+				title: formatMessage(commonMessages.settingsLabel),
+				region: 'right',
+				icon: SettingsIcon,
+				padded: true,
+			},
+		}
+
+		return include.map((id) => ({
+			...panels[id],
+			region: regionOf(id),
+			closedByDefault: closed.includes(id),
+		}))
+	})
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/providers/archive-session.ts b/packages/ui/src/layouts/shared/archive-viewer/providers/archive-session.ts
new file mode 100644
index 0000000000..de88cae34c
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/providers/archive-session.ts
@@ -0,0 +1,49 @@
+import type { Ref, ShallowRef } from 'vue'
+
+import type {
+	FileInfo,
+	FileManagerContext,
+} from '#ui/layouts/shared/files-tab/providers/file-manager'
+import { createContext } from '#ui/providers/create-context'
+
+import type { ArchiveLoadProgress, ArchiveLoadStage, ArchiveSource } from '../types'
+import type { ArchiveViewerContext } from './archive-viewer'
+
+/** An archive that has been read and can be browsed. */
+export interface OpenArchive extends ArchiveViewerContext {
+	/** Browses the archive, for the files layout. */
+	manager: FileManagerContext
+	/** The entry open in the archive. */
+	location: Readonly<Ref<FileInfo>>
+	/** Opens an entry by its path within the archive, without a leading slash. */
+	open: (path: string) => void
+}
+
+/**
+ * The archive a workbench shows, which can change (e.g. to another file of a project) while the
+ * workbench and its panels stay. Its file manager is provided along with it, standing in for
+ * whichever archive is open.
+ */
+export interface ArchiveSessionContext {
+	source: Readonly<Ref<ArchiveSource | null>>
+	stage: Readonly<Ref<ArchiveLoadStage>>
+	/** Bytes of the archive fetched so far, which keeps growing as files are opened. */
+	progress: Readonly<Ref<ArchiveLoadProgress>>
+	error: Readonly<Ref<Error | null>>
+	/** Whether every nested archive of the open archive has been read. */
+	fullyLoaded: Readonly<Ref<boolean>>
+	retry: () => void
+	/** The archive that has been read, until another one replaces it. */
+	current: Readonly<ShallowRef<OpenArchive | null>>
+	/** Whether any archive has been opened yet. */
+	opened: Readonly<Ref<boolean>>
+	/** The path the next archive opens at, e.g. from the page's URL. */
+	initialPath: () => string | null
+	attach: (archive: OpenArchive) => void
+	detach: (archive: OpenArchive) => void
+}
+
+export const [injectArchiveSession, provideArchiveSession] = createContext<ArchiveSessionContext>(
+	'ArchiveSession',
+	'archiveSession',
+)
diff --git a/packages/ui/src/layouts/shared/archive-viewer/providers/archive-viewer.ts b/packages/ui/src/layouts/shared/archive-viewer/providers/archive-viewer.ts
new file mode 100644
index 0000000000..a6700e0680
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/providers/archive-viewer.ts
@@ -0,0 +1,29 @@
+import type { Ref } from 'vue'
+
+import type { HashType } from '#ui/helpers/toolbox/file'
+import type { RootZipTreeNode, ZipHandler, ZipNode } from '#ui/helpers/toolbox/zip'
+import { createContext } from '#ui/providers/create-context'
+
+import type { ArchiveSource } from '../types'
+
+/** The archive open in the archive viewer, for its panels. */
+export interface ArchiveViewerContext {
+	root: RootZipTreeNode
+	handler: ZipHandler
+	source: ArchiveSource
+	/** Whether every nested archive has been read. */
+	fullyLoaded: Readonly<Ref<boolean>>
+	/** Bumped whenever nodes are added to the tree. */
+	treeVersion: Readonly<Ref<number>>
+	/** The archive's own SHA-512, once it has been downloaded in full and hashed. */
+	sha512Hash: Readonly<Ref<string | null>>
+	/** The whole archive's hash of the given type, computed once all of it has been downloaded. */
+	archiveHash: (type: HashType) => Promise<string>
+	/** The node at a path of the files layout (`/` being the archive's root). */
+	nodeAt: (path: string) => ZipNode | undefined
+}
+
+export const [injectArchiveViewer, provideArchiveViewer] = createContext<ArchiveViewerContext>(
+	'ArchiveWorkbench',
+	'archiveViewer',
+)
diff --git a/packages/ui/src/layouts/shared/archive-viewer/settings.ts b/packages/ui/src/layouts/shared/archive-viewer/settings.ts
new file mode 100644
index 0000000000..53654ba214
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/settings.ts
@@ -0,0 +1,281 @@
+import {
+	defineSetting,
+	type EnumSettingDefinition,
+	type SettingDefinitionBase,
+	type SettingGroup,
+	type SettingsStore,
+	useLocalSettings,
+} from '#ui/components/settings'
+import { defineMessages, type MessageDescriptor } from '#ui/composables/i18n'
+import { AVAILABLE_DECOMPILER_TYPES, type DecompilerTypes } from '#ui/helpers/toolbox/decompile'
+import { HASH_TYPES, type HashType } from '#ui/helpers/toolbox/file'
+import { createContext } from '#ui/providers/create-context'
+
+import { decompilerMessages, hashTypeMessages } from './messages'
+
+/** When a detail shows: always, only once its item's details are pulled out, or never. */
+export type DetailVisibility = 'always' | 'details' | 'never'
+
+const messages = defineMessages({
+	always: { id: 'archive-viewer.settings.visibility.always', defaultMessage: 'Always' },
+	details: { id: 'archive-viewer.settings.visibility.details', defaultMessage: 'In details' },
+	never: { id: 'archive-viewer.settings.visibility.never', defaultMessage: 'Never' },
+
+	sections: { id: 'archive-viewer.settings.sections', defaultMessage: 'Details stack' },
+	sectionsDescription: {
+		id: 'archive-viewer.settings.sections-description',
+		defaultMessage: 'Which items the details panel describes, from the outside in.',
+	},
+	source: { id: 'archive-viewer.settings.section.source', defaultMessage: 'Project and version' },
+	sourceDescription: {
+		id: 'archive-viewer.settings.section.source-description',
+		defaultMessage: 'Where the archive was published, when the viewer knows.',
+	},
+	root: { id: 'archive-viewer.settings.section.root', defaultMessage: 'Opened archive' },
+	rootDescription: {
+		id: 'archive-viewer.settings.section.root-description',
+		defaultMessage: 'The archive itself: where it came from, its size, hashes and contents.',
+	},
+	nested: { id: 'archive-viewer.settings.section.nested', defaultMessage: 'Nested archives' },
+	nestedDescription: {
+		id: 'archive-viewer.settings.section.nested-description',
+		defaultMessage: 'Archives stored within the opened one, down to the one holding the open file.',
+	},
+	entry: { id: 'archive-viewer.settings.section.entry', defaultMessage: 'Open file or folder' },
+	entryDescription: {
+		id: 'archive-viewer.settings.section.entry-description',
+		defaultMessage: 'The file or folder open in the active tab.',
+	},
+
+	information: { id: 'archive-viewer.settings.information', defaultMessage: 'Information' },
+	informationDescription: {
+		id: 'archive-viewer.settings.information-description',
+		defaultMessage:
+			'When each kind of detail shows: always, only with details pulled out, or never.',
+	},
+	detectedType: { id: 'archive-viewer.settings.detected-type', defaultMessage: 'Detected type' },
+	detectedTypeDescription: {
+		id: 'archive-viewer.settings.detected-type-description',
+		defaultMessage: "A file's type, as detected from its contents.",
+	},
+	detectedLanguage: {
+		id: 'archive-viewer.settings.detected-language',
+		defaultMessage: 'Detected language',
+	},
+	detectedLanguageDescription: {
+		id: 'archive-viewer.settings.detected-language-description',
+		defaultMessage: 'The language a text file is highlighted as.',
+	},
+	modrinthLookup: {
+		id: 'archive-viewer.settings.modrinth-lookup',
+		defaultMessage: 'On Modrinth',
+	},
+	modrinthLookupDescription: {
+		id: 'archive-viewer.settings.modrinth-lookup-description',
+		defaultMessage:
+			'Whether nested archives (and archives opened from other links) are already published on Modrinth, found by their hash.',
+	},
+	size: { id: 'archive-viewer.settings.size', defaultMessage: 'Size' },
+	sizeDescription: {
+		id: 'archive-viewer.settings.size-description',
+		defaultMessage: 'Sizes as stored and in full.',
+	},
+	contentCounts: {
+		id: 'archive-viewer.settings.content-counts',
+		defaultMessage: 'Contents counts',
+	},
+	contentCountsDescription: {
+		id: 'archive-viewer.settings.content-counts-description',
+		defaultMessage: 'How many files, folders, class files and nested archives an archive holds.',
+	},
+
+	files: { id: 'archive-viewer.settings.files', defaultMessage: 'Class files' },
+	filesDescription: {
+		id: 'archive-viewer.settings.files-description',
+		defaultMessage: 'How compiled Java classes are turned back into source.',
+	},
+	decompiler: { id: 'archive-viewer.settings.decompiler', defaultMessage: 'Default decompiler' },
+	decompilerDescription: {
+		id: 'archive-viewer.settings.decompiler-description',
+		defaultMessage:
+			'The decompiler class files open with. Each tab can switch to another from its navigation.',
+	},
+	hashes: { id: 'archive-viewer.settings.hashes', defaultMessage: 'Hashes' },
+	hashesDescription: {
+		id: 'archive-viewer.settings.hashes-description',
+		defaultMessage:
+			'Hashes are only computed once shown. The SHA family is computed by the browser, Murmur2 is the fingerprint CurseForge identifies files by, and CRC-32 is the checksum archives store for their files.',
+	},
+})
+
+const VISIBILITY_ENTRIES = [
+	{ value: 'always', label: messages.always },
+	{ value: 'details', label: messages.details },
+	{ value: 'never', label: messages.never },
+] as const
+
+function visibilitySetting(
+	id: string,
+	title: MessageDescriptor,
+	description: MessageDescriptor | undefined,
+	defaultValue: DetailVisibility,
+): EnumSettingDefinition<DetailVisibility> {
+	return defineSetting.enum<DetailVisibility>({
+		id,
+		title,
+		description,
+		default: defaultValue,
+		display: 'chips',
+		entries: VISIBILITY_ENTRIES,
+	})
+}
+
+const DEFAULT_HASH_VISIBILITY: Record<HashType, DetailVisibility> = {
+	sha1: 'details',
+	sha256: 'never',
+	sha384: 'never',
+	sha512: 'details',
+	murmur2: 'details',
+	crc32: 'details',
+}
+
+export const archiveSettings = {
+	sections: {
+		source: defineSetting.toggle({
+			id: 'section-source',
+			title: messages.source,
+			description: messages.sourceDescription,
+			default: true,
+		}),
+		root: defineSetting.toggle({
+			id: 'section-root',
+			title: messages.root,
+			description: messages.rootDescription,
+			default: true,
+		}),
+		nested: defineSetting.toggle({
+			id: 'section-nested',
+			title: messages.nested,
+			description: messages.nestedDescription,
+			default: true,
+		}),
+		entry: defineSetting.toggle({
+			id: 'section-entry',
+			title: messages.entry,
+			description: messages.entryDescription,
+			default: true,
+		}),
+	},
+	information: {
+		detectedType: visibilitySetting(
+			'detected-type',
+			messages.detectedType,
+			messages.detectedTypeDescription,
+			'always',
+		),
+		detectedLanguage: visibilitySetting(
+			'detected-language',
+			messages.detectedLanguage,
+			messages.detectedLanguageDescription,
+			'details',
+		),
+		size: visibilitySetting('size', messages.size, messages.sizeDescription, 'always'),
+		modrinthLookup: visibilitySetting(
+			'modrinth-lookup',
+			messages.modrinthLookup,
+			messages.modrinthLookupDescription,
+			'always',
+		),
+		contentCounts: visibilitySetting(
+			'content-counts',
+			messages.contentCounts,
+			messages.contentCountsDescription,
+			'details',
+		),
+	},
+	files: {
+		decompiler: defineSetting.enum<DecompilerTypes>({
+			id: 'decompiler',
+			title: messages.decompiler,
+			description: messages.decompilerDescription,
+			default: 'vineflower',
+			display: 'chips',
+			entries: AVAILABLE_DECOMPILER_TYPES.map((type) => ({
+				value: type,
+				label: decompilerMessages[type],
+			})),
+		}),
+	},
+	hashes: Object.fromEntries(
+		HASH_TYPES.map((type) => [
+			type,
+			visibilitySetting(
+				`hash-${type}`,
+				hashTypeMessages[type],
+				undefined,
+				DEFAULT_HASH_VISIBILITY[type],
+			),
+		]),
+	) as Record<HashType, EnumSettingDefinition<DetailVisibility>>,
+}
+
+/** The archive viewer's own settings, by heading. */
+export const archiveSettingGroups: SettingGroup[] = [
+	{
+		id: 'sections',
+		title: messages.sections,
+		description: messages.sectionsDescription,
+		settings: Object.values(archiveSettings.sections),
+	},
+	{
+		id: 'information',
+		title: messages.information,
+		description: messages.informationDescription,
+		settings: Object.values(archiveSettings.information),
+	},
+	{
+		id: 'files',
+		title: messages.files,
+		description: messages.filesDescription,
+		settings: Object.values(archiveSettings.files),
+	},
+	{
+		id: 'hashes',
+		title: messages.hashes,
+		description: messages.hashesDescription,
+		settings: HASH_TYPES.map((type) => archiveSettings.hashes[type]),
+	},
+]
+
+/** The workbench panel holding the archive viewer's settings. */
+export const SETTINGS_PANEL_ID = 'settings'
+
+/** Where the archive viewer's settings are kept; hosts can provide their own store. */
+export const [injectArchiveSettings, provideArchiveSettings] = createContext<SettingsStore>(
+	'ArchiveViewerLayout',
+	'archiveSettings',
+)
+
+/** The archive viewer's settings, kept in local storage, for hosts without settings of their own. */
+export function useStoredArchiveSettings() {
+	return useLocalSettings(
+		archiveSettingGroups.flatMap((group) => group.settings),
+		{ prefix: 'archive-viewer-setting:' },
+	)
+}
+
+/** The settings as the details panel reads them, falling back to the defaults without a store. */
+export function useArchiveDetailSettings() {
+	const store = injectArchiveSettings(null)
+
+	function get<T>(definition: SettingDefinitionBase<T>): T {
+		return store ? store.get(definition) : definition.default
+	}
+
+	return {
+		section: (key: keyof typeof archiveSettings.sections) => get(archiveSettings.sections[key]),
+		visibility: (key: keyof typeof archiveSettings.information) =>
+			get(archiveSettings.information[key]),
+		hashVisibility: (type: HashType) => get(archiveSettings.hashes[type]),
+	}
+}
diff --git a/packages/ui/src/layouts/shared/archive-viewer/types.ts b/packages/ui/src/layouts/shared/archive-viewer/types.ts
new file mode 100644
index 0000000000..90425058bc
--- /dev/null
+++ b/packages/ui/src/layouts/shared/archive-viewer/types.ts
@@ -0,0 +1,55 @@
+/** An archive (e.g. a mod's `.jar` or a modpack's `.mrpack`) that can be opened in the archive viewer. */
+export interface ArchiveSource {
+	/** Where the archive is downloaded from, usually a Modrinth CDN link. */
+	url: string
+	/** The archive's file name, shown as the root of its paths. */
+	name: string
+	/** Size in bytes, which saves a request when reading the archive by ranges. */
+	size?: number
+	/** The archive's SHA-512 hash, so an archive already open under another URL is reused. */
+	sha512Hash?: string
+}
+
+/** `reading` covers fetching the archive's index; its tree is `ready` before nested archives are read. */
+export type ArchiveLoadStage = 'idle' | 'reading' | 'ready' | 'error'
+
+/** A labelled value listed in one of the archive viewer's detail panels. */
+export interface ArchiveDetailRow {
+	id: string
+	label: string
+	value: string | null | undefined
+	/** Shows a spinner while the value is computed, e.g. a hash. */
+	loading?: boolean
+	/** Shows the value in a monospace button that copies it. */
+	copyable?: boolean
+	/** Shows the value shortened, in full on hover, in a button that copies it. */
+	hash?: boolean
+	/** Shown in place of a `hash` value, which then only shows on hover, e.g. a link's source. */
+	display?: string
+	/** More about the value, shown on hover. */
+	tooltip?: string
+	/** Colours the value, e.g. a check that passed (`green`) or failed (`red`). */
+	tone?: 'green' | 'red'
+	href?: string
+	/**
+	 * Where the row shows within its item: always, only behind its details pull tab, or never.
+	 * Defaults to always.
+	 */
+	visibility?: 'always' | 'details' | 'never'
+}
+
+export interface ArchiveLoadProgress {
+	loaded: number
+	total: number | null
+}
+
+/** How far an archive has been read: nested archives are read in the background. */
+export type ArchiveReadStatus = 'read' | 'reading' | 'pending'
+
+/** What an archive holds itself, leaving out the contents of archives nested within it. */
+export interface ArchiveCounts {
+	files: number
+	folders: number
+	classFiles: number
+	nestedArchives: number
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
index 2c5b08db11..5e8c881cf1 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
@@ -4,19 +4,27 @@
 		:class="[hasNav ? 'gap-4' : 'gap-3']"
 		:aria-label="formatMessage(messages.fileNavigation)"
 	>
-		<div class="flex items-center justify-between gap-2">
+		<div class="flex justify-between gap-2" :class="compact ? 'items-start' : 'items-center'">
 			<div
 				:aria-label="formatMessage(messages.breadcrumbNavigation)"
 				class="m-0 flex min-w-0 flex-shrink items-center p-0 text-contrast"
+				:class="{ 'flex-1': compact }"
 			>
-				<div class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
+				<div
+					class="m-0 flex min-w-0 flex-shrink list-none items-center p-0"
+					:class="{ 'flex-1': compact }"
+				>
 					<div
-						v-if="sidebarToggleable && (hasNav ? (smallMode ? true : !sidebarOpen) : true)"
+						v-if="
+							sidebarToggleable &&
+							(hasNav ? smallMode || sidebarToggleAlways || !sidebarOpen : true)
+						"
 						class="mr-2 flex flex-shrink-0 gap-3"
 					>
 						<IconButton
 							v-tooltip="formatMessage(sidebarOpen ? messages.collapse : messages.expand)"
 							:label="formatMessage(sidebarOpen ? messages.collapse : messages.expand)"
+							:size="compact ? 'xs' : 'md'"
 							native-type="button"
 							class="bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 							@click="() => $emit('toggleSidebar')"
@@ -26,13 +34,14 @@
 							<span class="sr-only">{{ formatMessage(messages.expand) }}</span>
 						</IconButton>
 					</div>
-					<div class="ml-2">
+					<div class="ml-2" :class="{ 'flex min-w-0 flex-1': compact }">
 						<slot />
 					</div>
 				</div>
 			</div>
 
 			<div v-if="!hasNav || !isEditing" class="flex flex-shrink-0 items-center gap-2">
+				<slot name="actions" />
 				<Input
 					v-if="hasNav ? !sidebarOpen : false"
 					id="search-folder"
@@ -42,13 +51,17 @@
 					name="search"
 					autocomplete="off"
 					:placeholder="formatMessage(messages.searchFiles)"
-					:class="[hasNav ? 'hidden @[800px]:inline-flex' : 'hidden @[400px]:inline-flex']"
-					size="medium"
+					:class="[
+						hasNav ? 'hidden @[800px]:inline-flex' : 'hidden @[400px]:inline-flex',
+						compact ? 'h-[calc(2rem_-_4px)]' : '',
+					]"
+					size="small"
 					wrapper-class="w-full sm:w-[280px]"
 					@update:model-value="$emit('update:searchQuery', $event)"
 				/>
 
 				<TeleportOverflowMenu
+					v-if="!fileManager.readOnly"
 					type="outlined"
 					:label="formatMessage(messages.createNew)"
 					:disabled="disabled"
@@ -67,7 +80,7 @@
 					v-if="isLogFile"
 					v-tooltip="formatMessage(messages.shareToMclogs)"
 					type="quiet"
-					size="lg"
+					:size="compact ? 'xs' : 'lg'"
 					:label="formatMessage(messages.shareToMclogs)"
 					@click="$emit('share')"
 				>
@@ -76,7 +89,7 @@
 				<IconButton
 					v-tooltip="formatMessage(messages.findInFile)"
 					:type="isEditorFindOpen ? 'colored' : 'quiet'"
-					size="lg"
+					:size="compact ? 'xs' : 'lg'"
 					:color="isEditorFindOpen ? 'brand' : undefined"
 					:label="formatMessage(messages.findInFile)"
 					:aria-pressed="isEditorFindOpen"
@@ -103,12 +116,16 @@ import { computed } from 'vue'
 import { IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n.ts'
 import { useFileActions } from '#ui/layouts/shared/files-tab/composables/folder-actions.ts'
-import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
+import {
+	type FileInfo,
+	injectFileManager,
+} from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
 import { getFileExtension, isImageFile } from '#ui/utils'
 
 import Input from '../../../../components/base/inputs/Input.vue'
 
 const { formatMessage } = useVIntl()
+const fileManager = injectFileManager()
 
 const messages = defineMessages({
 	fileNavigation: {
@@ -197,6 +214,10 @@ export type Properties = {
 	isRefreshing?: boolean
 	/** Whether the sidebar toggle is offered. */
 	sidebarToggleable?: boolean
+	/** Whether the navigation offers the folder tree's button while the tree is shown too. */
+	sidebarToggleAlways?: boolean
+	/** Smaller controls, for tighter spaces. */
+	compact?: boolean
 }
 
 const props = withDefaults(defineProps<Properties>(), {
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index ca3f0de830..8f165fd70b 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -13,13 +13,13 @@
 	>
 		<div
 			ref="navbarWrapper"
-			class="sticky top-[var(--files-sticky-top,0px)] z-[29] bg-surface-1 py-1 before:pointer-events-none before:top-[calc(-1.5rem_+_1px)] before:absolute before:inset-x-0 before:h-[var(--files-sticky-top,0px)] before:bg-[var(--color-bg,_var(--surface-1))] before:content-['']"
+			class="sticky top-[var(--files-sticky-top,0px)] z-[29] bg-surface-1 py-1 pr-[calc(0.75rem+1px)] before:pointer-events-none before:top-[calc(-1.5rem_+_1px)] before:absolute before:inset-x-0 before:h-[var(--files-sticky-top,0px)] before:bg-[var(--color-bg,_var(--surface-1))] before:content-['']"
 		>
 			<FileNavbar
 				:sidebar-open="sidebarOpen"
 				:active-location="ui.activeLocation.value"
 				:is-editor-find-open="ui.fileEditorApi.value?.isFindOpen.value ?? false"
-				:search-query="ui.searchQuery.value"
+				:search-query="view.searchQuery.value"
 				:show-refresh-button="ui.showRefreshButton.value"
 				:show-install-from-url="ui.showInstallFromUrl"
 				:base-id="ui.baseId"
@@ -28,13 +28,15 @@
 				:small-mode="props.smallMode"
 				:can-go-back="ui.fileTabs.canGoBack.value"
 				:can-go-forward="ui.fileTabs.canGoForward.value"
-				:sidebar-toggleable="ui.advancedView.value"
+				:sidebar-toggleable="ui.advancedView.value && toggleLocation != null"
+				:sidebar-toggle-always="toggleLocation === 'navigation'"
+				:compact="ui.compactNavigation.value"
 				@back="ui.fileTabs.back"
 				@forward="ui.fileTabs.forward"
 				@navigate="ui.navigateToSegment"
 				@navigate-home="() => ui.navigateToSegment(0)"
 				@prefetch-home="ui.handleHomePrefetch"
-				@update:search-query="(value) => (ui.searchQuery.value = value)"
+				@update:search-query="(value) => (view.searchQuery.value = value)"
 				@create="ui.showCreateModal"
 				@upload="ui.initiateFileUpload"
 				@upload-zip="() => {}"
@@ -55,135 +57,46 @@
 					isFileActive
 						? 'h-[var(--files-viewer-height)]'
 						: ui.advancedView.value
-							? 'sticky top-[calc(var(--files-sticky-top,0px)_+_var(--files-navbar-height,0px))] z-20 h-10'
+							? 'sticky top-[calc(var(--files-sticky-top,0px)_+_var(--files-navbar-height,0px))] z-20 h-9'
 							: 'h-0'
 				"
 			>
 				<FileTabs />
 			</div>
 			<FileEmptyWorkspace v-if="!hasTabs" />
-			<FileManagerError
-				v-else-if="!isFileActive && ui.error.value"
-				class="rounded-b-[20px]"
-				:title="formatMessage(messages.errorTitle)"
-				:message="formatMessage(messages.errorMessage)"
-				@refetch="ui.refresh"
-				@home="() => ui.navigateToSegment(0)"
+			<FileListing
+				v-show="hasTabs && !isFileActive"
+				ref="listing"
+				:view="view"
+				:header-sticky-top="tableHeaderStickyTop"
+				@navigate="ui.navigateTo"
 			/>
-			<div v-show="hasTabs && !isFileActive && !ui.error.value" @contextmenu="openFolderMenu">
-				<FileUploadDragAndDrop
-					ref="fileUploadRef"
-					:disabled="ui.isBusy.value"
-					@drop-error="ui.handleDropError"
-					@files-dropped="ui.uploadFiles"
-				>
-					<FileTableHeader
-						:sort-field="ui.sortField.value"
-						:sort-desc="ui.sortDesc.value"
-						:all-selected="ui.allSelected.value"
-						:some-selected="ui.someSelected.value"
-						:is-stuck="isLabelBarStuck"
-						:columns="shownColumns"
-						:enabled-columns="enabledColumns"
-						:details-enabled="detailsEnabled"
-						:columns-adjustable="ui.advancedView.value"
-						:view-settings-enabled="ui.reworkEnabled.value"
-						:advanced-view="ui.advancedView.value"
-						:colored-icons="ui.coloredIcons.value"
-						@sort="ui.handleSort"
-						@toggle-all="ui.toggleSelectAll"
-						@toggle-column="toggleColumn"
-						@toggle-details="detailsEnabled = !detailsEnabled"
-						@toggle-advanced-view="ui.setAdvancedView(!ui.advancedView.value)"
-						@toggle-colored-icons="ui.setColoredIcons(!ui.coloredIcons.value)"
-					/>
-					<ReadyTransition :pending="listingPending">
-						<div
-							v-if="filteredItems.length > 0"
-							ref="virtualListContainer"
-							class="relative w-full"
-							:style="{ minHeight: `${totalHeight}px`, overflowAnchor: 'none' }"
-						>
-							<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
-								<FileRow
-									v-for="(item, idx) in visibleItems"
-									:key="item.path"
-									:class="`h-[${itemHeight}]`"
-									:file="item"
-									:index="visibleRange.start + idx"
-									:is-last="visibleRange.start + idx === filteredItems.length - 1"
-									:columns="shownColumns"
-									@navigate="ui.navigateTo"
-									@hover="ui.handleItemPrefetch"
-								/>
-							</div>
-						</div>
-						<div
-							v-else-if="ui.items.value.length === 0 && !ui.error.value && !ui.loading.value"
-							class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
-						>
-							<div class="flex flex-col items-center gap-4 text-center">
-								<FolderOpenIcon class="h-16 w-16 text-secondary" />
-								<h3 class="m-0 text-2xl font-bold text-contrast">
-									{{ formatMessage(messages.emptyFolderTitle) }}
-								</h3>
-								<p class="m-0 text-sm text-secondary">
-									{{ formatMessage(messages.emptyFolderDescription) }}
-								</p>
-							</div>
-						</div>
-					</ReadyTransition>
-				</FileUploadDragAndDrop>
-			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { FolderOpenIcon } from '@modrinth/assets'
 import { useElementSize, useEventListener } from '@vueuse/core'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
-import { defineMessages, useVIntl } from '#ui/composables'
-import { useStickyObserver } from '#ui/composables/sticky-observer'
-import { findScrollableAncestor, useVirtualScroll } from '#ui/composables/virtual-scroll.ts'
+import { findScrollableAncestor } from '#ui/composables/virtual-scroll.ts'
 import { injectLoadingState } from '#ui/providers/loading-state'
 
 import { useEntryMenu } from '../composables/entry-menu'
-import { useFileColumns } from '../composables/file-columns'
+import { useSidebarToggleLocation } from '../composables/sidebar-toggle'
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import { parentInfoFrom } from '../utils'
 import FileEmptyWorkspace from './FileEmptyWorkspace.vue'
-import FileManagerError from './FileManagerError.vue'
+import FileListing from './FileListing.vue'
 import FileNavbar from './FileNavbar.vue'
-import FileRow from './FileRow.vue'
-import FileTableHeader from './FileTableHeader.vue'
 import FileTabs from './tabs/FileTabs.vue'
-import FileUploadDragAndDrop from './upload/FileUploadDragAndDrop.vue'
-
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	emptyFolderTitle: {
-		id: 'files.layout.empty-folder-title',
-		defaultMessage: 'This folder is empty',
-	},
-	emptyFolderDescription: {
-		id: 'files.layout.empty-folder-description',
-		defaultMessage: 'There are no files or folders.',
-	},
-	errorTitle: {
-		id: 'files.layout.error-title',
-		defaultMessage: 'Unable to load files',
-	},
-	errorMessage: {
-		id: 'files.layout.error-message',
-		defaultMessage: 'The folder may not exist.',
-	},
-})
 
+/**
+ * The files tab laid out within a scrolling page: the navbar, the tab strip and, below it, the
+ * active tab's listing or editor. Hosts using the workbench show each tab's own view instead.
+ */
 const ui = injectFileBrowserUI()
+const view = computed(() => ui.activeView.value)
 
 const props = withDefaults(
 	defineProps<{
@@ -195,18 +108,13 @@ const props = withDefaults(
 )
 
 const sidebarOpen = computed(() => ui.sidebarOpen.value)
+const toggleLocation = useSidebarToggleLocation()
 const isFileActive = computed(() => ui.fileTabs.activeLocation.value.type === 'file')
 /** In the advanced view every tab can be closed, which leaves an empty workspace. */
 const hasTabs = computed(() => ui.fileTabs.tabs.value.length > 0)
 
 const { openMenu } = useEntryMenu()
 
-/** Right-click on the folder's empty space (rows open their own menu and prevent this one). */
-function openFolderMenu(event: MouseEvent) {
-	if (event.defaultPrevented) return
-	openMenu(event, ui.currentDirectory.value)
-}
-
 /** Right-click on a breadcrumb, `depth` segments deep (the last one is the active location). */
 function openBreadcrumbMenu(event: MouseEvent, depth: number) {
 	const location = ui.activeLocation.value
@@ -214,11 +122,6 @@ function openBreadcrumbMenu(event: MouseEvent, depth: number) {
 	openMenu(event, depth >= segments.length ? location : parentInfoFrom(location, depth))
 }
 
-const filteredItems = computed(() => ui.filteredItems.value)
-
-/** Only the listing fades while a directory loads for the first time; tabs, navbar and sidebar stay put. */
-const listingPending = computed(() => ui.loading.value && ui.items.value.length === 0)
-
 const loadingState = injectLoadingState(null)
 let refreshToken: symbol | null = null
 
@@ -237,25 +140,7 @@ watch(
 )
 onBeforeUnmount(endRefreshLoading)
 
-// Virtual scroll
-const {
-	listContainer: virtualListContainer,
-	totalHeight,
-	itemHeight,
-	visibleRange,
-	visibleTop,
-	visibleItems,
-	syncScrollState,
-} = useVirtualScroll(filteredItems, {
-	itemHeight: 3.25,
-	itemUnit: 'rem',
-	bufferSize: 5,
-})
-
-const { detailsEnabled, enabledColumns, shownColumns, toggleColumn } = useFileColumns(
-	ui.containerWidth,
-	ui.advancedView,
-)
+const listing = ref<InstanceType<typeof FileListing>>()
 
 const TAB_STRIP_HEIGHT = 40
 /** The tab strip is hidden, along with the tabs feature, while the rework is disabled. */
@@ -273,12 +158,6 @@ const tableHeaderStickyTop = computed(() => {
 	return hostOffset + navbarHeight.value + tabStripHeight.value
 })
 
-const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
-const fileUploadEl = computed(() => fileUploadRef.value?.$el as HTMLElement | null)
-const { isStuck: isLabelBarStuck } = useStickyObserver(fileUploadEl, undefined, {
-	topOffset: tableHeaderStickyTop,
-})
-
 /** Brings the navbar and file viewer to the top of the scroll area, unless they're already there. */
 function scrollPanelIntoView() {
 	const panel = panelRoot.value
@@ -379,7 +258,7 @@ watch(isFileActive, setViewerSnapping, { flush: 'post' })
 
 /** The listing stays mounted (hidden) while a file is open, so it has to re-measure when shown again. */
 watch(isFileActive, (active) => {
-	if (!active) nextTick(syncScrollState)
+	if (!active) nextTick(() => listing.value?.syncScrollState())
 })
 onMounted(() => {
 	setViewerSnapping(isFileActive.value)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileEmptyWorkspace.vue b/packages/ui/src/layouts/shared/files-tab/components/FileEmptyWorkspace.vue
index 5e5740d148..8a6847efff 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileEmptyWorkspace.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileEmptyWorkspace.vue
@@ -10,18 +10,20 @@
 				<HomeIcon aria-hidden="true" />
 				{{ formatMessage(messages.openHome) }}
 			</Button>
-			<Button :disabled="ui.isBusy.value" @click="ui.showCreateModal('file')">
-				<FilePlusIcon aria-hidden="true" />
-				{{ formatMessage(messages.newFile) }}
-			</Button>
-			<Button :disabled="ui.isBusy.value" @click="ui.showCreateModal('directory')">
-				<FolderIcon aria-hidden="true" />
-				{{ formatMessage(messages.newFolder) }}
-			</Button>
-			<Button :disabled="ui.isBusy.value" @click="ui.initiateFileUpload()">
-				<UploadIcon aria-hidden="true" />
-				{{ formatMessage(messages.upload) }}
-			</Button>
+			<template v-if="!ui.readOnly">
+				<Button :disabled="ui.isBusy.value" @click="ui.showCreateModal('file')">
+					<FilePlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.newFile) }}
+				</Button>
+				<Button :disabled="ui.isBusy.value" @click="ui.showCreateModal('directory')">
+					<FolderIcon aria-hidden="true" />
+					{{ formatMessage(messages.newFolder) }}
+				</Button>
+				<Button :disabled="ui.isBusy.value" @click="ui.initiateFileUpload()">
+					<UploadIcon aria-hidden="true" />
+					{{ formatMessage(messages.upload) }}
+				</Button>
+			</template>
 		</div>
 		<div v-if="recentlyClosed.length > 0" class="flex w-full max-w-md flex-col gap-1 text-left">
 			<h4 class="m-0 mb-1 text-sm font-semibold text-secondary">
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileListing.vue b/packages/ui/src/layouts/shared/files-tab/components/FileListing.vue
new file mode 100644
index 0000000000..e0e2508b77
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileListing.vue
@@ -0,0 +1,185 @@
+<template>
+	<div ref="root" class="flex flex-col">
+		<FileManagerError
+			v-if="view.error.value"
+			class="rounded-b-[20px]"
+			:title="formatMessage(messages.errorTitle)"
+			:message="formatMessage(messages.errorMessage)"
+			@refetch="ui.refresh"
+			@home="emit('navigate', HOME)"
+		/>
+		<div v-else @contextmenu="openFolderMenu">
+			<FileUploadDragAndDrop
+				ref="fileUploadRef"
+				:disabled="ui.isBusy.value"
+				@drop-error="ui.handleDropError"
+				@files-dropped="ui.uploadFiles"
+			>
+				<FileTableHeader
+					:sort-field="view.sortField.value"
+					:sort-desc="view.sortDesc.value"
+					:all-selected="view.allSelected.value"
+					:some-selected="view.someSelected.value"
+					:is-stuck="isLabelBarStuck"
+					:columns="shownColumns"
+					:enabled-columns="enabledColumns"
+					:details-enabled="detailsEnabled"
+					:columns-adjustable="ui.advancedView.value"
+					:view-settings-enabled="ui.canUseAdvancedView.value"
+					:advanced-view-toggleable="!ui.inWorkbench"
+					:advanced-view="ui.advancedView.value"
+					:colored-icons="ui.coloredIcons.value"
+					:sidebar-toggle-location="ui.inWorkbench ? null : ui.sidebarToggleLocation.value"
+					@sort="view.handleSort"
+					@toggle-all="view.toggleSelectAll"
+					@toggle-column="toggleColumn"
+					@toggle-details="detailsEnabled = !detailsEnabled"
+					@toggle-advanced-view="ui.setAdvancedView(!ui.advancedView.value)"
+					@toggle-colored-icons="ui.setColoredIcons(!ui.coloredIcons.value)"
+					@set-sidebar-toggle="ui.setSidebarToggleLocation"
+				/>
+				<ReadyTransition :pending="listingPending">
+					<div
+						v-if="filteredItems.length > 0"
+						ref="virtualListContainer"
+						class="relative w-full"
+						:style="{ minHeight: `${totalHeight}px`, overflowAnchor: 'none' }"
+					>
+						<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
+							<FileRow
+								v-for="(item, idx) in visibleItems"
+								:key="item.path"
+								:class="`h-[${itemHeight}]`"
+								:file="item"
+								:index="visibleRange.start + idx"
+								:is-last="visibleRange.start + idx === filteredItems.length - 1"
+								:columns="shownColumns"
+								@navigate="(file) => emit('navigate', file)"
+								@hover="ui.handleItemPrefetch"
+							/>
+						</div>
+					</div>
+					<div
+						v-else-if="view.items.value.length === 0 && !view.loading.value"
+						class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
+					>
+						<div class="flex flex-col items-center gap-4 text-center">
+							<FolderOpenIcon class="h-16 w-16 text-secondary" />
+							<h3 class="m-0 text-2xl font-bold text-contrast">
+								{{ formatMessage(messages.emptyFolderTitle) }}
+							</h3>
+							<p class="m-0 text-sm text-secondary">
+								{{ formatMessage(messages.emptyFolderDescription) }}
+							</p>
+						</div>
+					</div>
+				</ReadyTransition>
+			</FileUploadDragAndDrop>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FolderOpenIcon } from '@modrinth/assets'
+import { useElementSize } from '@vueuse/core'
+import { computed, ref, toRef } from 'vue'
+
+import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
+import { defineMessages, useVIntl } from '#ui/composables'
+import { useStickyObserver } from '#ui/composables/sticky-observer'
+import { useVirtualScroll } from '#ui/composables/virtual-scroll.ts'
+
+import type { DirectoryView } from '../composables/directory-view'
+import { useEntryMenu } from '../composables/entry-menu'
+import { useFileColumns } from '../composables/file-columns'
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import type { FileInfo } from '../providers/file-manager'
+import { infoFrom } from '../utils'
+import FileManagerError from './FileManagerError.vue'
+import FileRow from './FileRow.vue'
+import FileTableHeader from './FileTableHeader.vue'
+import FileUploadDragAndDrop from './upload/FileUploadDragAndDrop.vue'
+
+const props = withDefaults(
+	defineProps<{
+		view: DirectoryView
+		/** How far below the top of the scroll area the table header sticks, in px. */
+		headerStickyTop?: number
+	}>(),
+	{ headerStickyTop: 0 },
+)
+
+const emit = defineEmits<{
+	navigate: [file: FileInfo]
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	emptyFolderTitle: {
+		id: 'files.layout.empty-folder-title',
+		defaultMessage: 'This folder is empty',
+	},
+	emptyFolderDescription: {
+		id: 'files.layout.empty-folder-description',
+		defaultMessage: 'There are no files or folders.',
+	},
+	errorTitle: {
+		id: 'files.layout.error-title',
+		defaultMessage: 'Unable to load files',
+	},
+	errorMessage: {
+		id: 'files.layout.error-message',
+		defaultMessage: 'The folder may not exist.',
+	},
+})
+
+const HOME = infoFrom('/')
+
+const ui = injectFileBrowserUI()
+const { openMenu } = useEntryMenu()
+
+/** Right-click on the folder's empty space (rows open their own menu and prevent this one). */
+function openFolderMenu(event: MouseEvent) {
+	if (event.defaultPrevented) return
+	openMenu(event, props.view.directory.value)
+}
+
+const filteredItems = computed(() => props.view.filteredItems.value)
+
+/** Only the listing fades while a directory loads for the first time; the rest stays put. */
+const listingPending = computed(
+	() => props.view.loading.value && props.view.items.value.length === 0,
+)
+
+const {
+	listContainer: virtualListContainer,
+	totalHeight,
+	itemHeight,
+	visibleRange,
+	visibleTop,
+	visibleItems,
+	syncScrollState,
+} = useVirtualScroll(filteredItems, {
+	itemHeight: 3.25,
+	itemUnit: 'rem',
+	bufferSize: 5,
+})
+
+const root = ref<HTMLElement | null>(null)
+const { width } = useElementSize(root)
+const containerWidth = computed(() => (width.value > 0 ? width.value : undefined))
+
+const { detailsEnabled, enabledColumns, shownColumns, toggleColumn } = useFileColumns(
+	containerWidth,
+	ui.advancedView,
+)
+
+const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
+const fileUploadEl = computed(() => fileUploadRef.value?.$el as HTMLElement | null)
+const { isStuck: isLabelBarStuck } = useStickyObserver(fileUploadEl, undefined, {
+	topOffset: toRef(() => props.headerStickyTop),
+})
+
+defineExpose({ syncScrollState })
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index 75b4464a9d..b4ed291eba 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -3,12 +3,14 @@
 		<nav
 			v-if="breadcrumbs != null"
 			:aria-label="formatMessage(messages.breadcrumbNavigation)"
-			class="m-0 -ml-2 flex min-w-0 flex-shrink items-center p-0"
+			class="m-0 -ml-2 flex min-w-0 flex-shrink p-0"
+			:class="compact ? 'flex-1 items-start' : 'items-center'"
 		>
 			<div class="mr-1 flex shrink-0 items-center">
 				<IconButton
 					v-tooltip="formatMessage(messages.back)"
 					type="quiet"
+					:size="buttonSize"
 					:label="formatMessage(messages.back)"
 					:disabled="!canGoBack"
 					@click="$emit('back')"
@@ -18,6 +20,7 @@
 				<IconButton
 					v-tooltip="formatMessage(messages.forward)"
 					type="quiet"
+					:size="buttonSize"
 					:label="formatMessage(messages.forward)"
 					:disabled="!canGoForward"
 					@click="$emit('forward')"
@@ -27,10 +30,14 @@
 			</div>
 			<ol
 				ref="breadcrumbOuter"
-				class="m-0 flex min-w-0 flex-shrink items-center overflow-hidden p-0"
-				:class="{ 'breadcrumb-fade-mask': isBreadcrumbOverflowing }"
+				class="m-0 flex min-w-0 flex-shrink items-center p-0"
+				:class="
+					compact
+						? 'flex-1'
+						: ['overflow-hidden', { 'breadcrumb-fade-mask': isBreadcrumbOverflowing }]
+				"
 				:style="
-					isBreadcrumbOverflowing
+					isBreadcrumbOverflowing && !compact
 						? { '--scroll-distance': `-${breadcrumbOverflowAmount}px` }
 						: undefined
 				"
@@ -41,16 +48,25 @@
 					ref="breadcrumbInner"
 					name="breadcrumb"
 					tag="span"
-					class="relative flex w-fit items-center"
-					:class="{ 'breadcrumbs-scroll': isBreadcrumbAnimating }"
+					class="relative flex items-center"
+					:class="
+						compact
+							? 'w-full flex-wrap'
+							: ['w-fit', { 'breadcrumbs-scroll': isBreadcrumbAnimating }]
+					"
 					@animationiteration="onBreadcrumbAnimationIteration"
 				>
-					<li :key="`home`" class="relative flex shrink-0 items-center text-sm">
+					<li
+						:key="`home`"
+						class="relative flex shrink-0 items-center"
+						:class="compact ? 'text-xs' : 'text-sm'"
+					>
 						<div class="flex shrink-0 items-center">
 							<Button
 								v-tooltip="formatMessage(messages.backToHome)"
 								:label="formatMessage(messages.backToHome)"
 								type="quiet"
+								:size="buttonSize"
 								class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 								:aria-current="breadcrumbs.length == 0 ? 'location' : undefined"
 								:class="{ '!text-contrast': breadcrumbs.length == 0 }"
@@ -71,11 +87,13 @@
 					<li
 						v-for="(segment, index) in breadcrumbs"
 						:key="`${segment || index}-group`"
-						class="relative flex shrink-0 items-center text-sm"
+						class="relative flex items-center"
+						:class="compact ? 'min-w-0 text-xs' : 'shrink-0 text-sm'"
 					>
-						<div class="flex shrink-0 items-center">
+						<div class="flex items-center" :class="compact ? 'min-w-0' : 'shrink-0'">
 							<Button
 								type="quiet"
+								:size="buttonSize"
 								class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 								:aria-current="index === breadcrumbs.length - 1 ? 'location' : undefined"
 								:class="{ '!text-contrast': index === breadcrumbs.length - 1 }"
@@ -151,6 +169,8 @@ const props = withDefaults(
 		{
 			canGoBack?: boolean
 			canGoForward?: boolean
+			/** Smaller breadcrumbs that wrap onto further lines instead of scrolling when too long. */
+			compact?: boolean
 		} & Properties
 	>(),
 	{
@@ -160,6 +180,7 @@ const props = withDefaults(
 )
 
 const breadcrumbs = computed(() => props.activeLocation.path.split('/').filter(Boolean))
+const buttonSize = computed(() => (props.compact ? 'xs' : 'md'))
 
 defineEmits<{
 	navigate: [index: number]
@@ -191,7 +212,7 @@ function checkBreadcrumbOverflow() {
 function onBreadcrumbMouseEnter() {
 	bcHovered = true
 	bcStopping = false
-	if (isBreadcrumbOverflowing.value) {
+	if (isBreadcrumbOverflowing.value && !props.compact) {
 		isBreadcrumbAnimating.value = true
 	}
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
index 10d0fea1a6..bc494ccfd4 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
@@ -157,7 +157,6 @@ import { useFormatBytes } from '#ui/composables'
 import { useFormatDateTime } from '#ui/composables/format-date-time'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
-import { canOpenInFileEditor } from '#ui/utils/file-extensions'
 
 import { useEntryMenu } from '../composables/entry-menu'
 import { FILE_COLUMNS, FILE_COLUMNS_ORDER, type FileColumn } from '../composables/file-columns'
@@ -327,7 +326,7 @@ const formattedCreationDate = computed(() => {
 
 const isEditableFile = computed(() => {
 	if (props.file.type === 'file') {
-		return canOpenInFileEditor(props.file.name)
+		return ui.canOpenInTab(props.file)
 	}
 	return false
 })
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSearch.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSearch.vue
index 39c56d250e..835ae41069 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileSearch.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileSearch.vue
@@ -7,13 +7,14 @@
 			name="file-search"
 			autocomplete="off"
 			:placeholder="formatMessage(messages.placeholder)"
-			size="medium"
+			:size="compact ? 'small' : 'standard'"
 			wrapper-class="w-full"
 			role="combobox"
 			aria-autocomplete="list"
 			:aria-expanded="open"
 			:aria-controls="listId"
 			:aria-activedescendant="open && results.length > 0 ? optionId(highlighted) : undefined"
+			:class="compact ? 'h-[calc(2rem_-_4px)]' : 'h-[calc(2.25rem)]'"
 			@focus="focused = true"
 			@keydown="handleKeydown"
 		/>
@@ -65,7 +66,6 @@ import { computed, nextTick, ref, useId, watch } from 'vue'
 
 import Input from '#ui/components/base/inputs/Input.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { canOpenInFileEditor } from '#ui/utils/file-extensions'
 
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import type { FileItem } from '../types'
@@ -77,8 +77,10 @@ withDefaults(
 	defineProps<{
 		/** Notes that results only cover folders opened so far, for hosts that load lazily. */
 		loadedOnlyNotice?: boolean
+		/** Smaller controls, for tighter spaces. */
+		compact?: boolean
 	}>(),
-	{ loadedOnlyNotice: true },
+	{ loadedOnlyNotice: true, compact: false },
 )
 
 const { formatMessage } = useVIntl()
@@ -136,7 +138,7 @@ watch(query, () => (highlighted.value = 0))
 
 /** Opens directories and editable files; any other file reveals its folder instead. */
 function select(entry: FileItem) {
-	const openable = entry.type === 'directory' || canOpenInFileEditor(entry.name)
+	const openable = ui.canOpenInTab(entry)
 	ui.navigateTo(openable ? entry : parentInfoFrom(entry))
 	query.value = ''
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
index 73c10d05e3..16f32f865f 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
@@ -1,21 +1,25 @@
 <template>
 	<div
-		class="flex flex-col p-1 gap-2 h-full"
+		class="flex flex-col p-1 h-full"
 		:class="[
 			addBorder ? 'border-r border-0 border-solid border-surface-5 pr-2' : '',
 			constrainWidth ? 'w-[24rem]' : 'w-full',
 		]"
 	>
 		<FileActionBar
+			v-if="hasActions"
 			:sidebar-open="ui.sidebarOpen.value"
+			:sidebar-toggleable="toggleLocation === 'sidebar'"
 			:active-location="ui.activeLocation.value"
-			:search-query="ui.searchQuery.value"
+			:search-query="ui.activeView.value.searchQuery.value"
 			:show-refresh-button="ui.showRefreshButton.value"
 			:show-install-from-url="ui.showInstallFromUrl"
 			:disabled="ui.isBusy.value"
 			:disabled-tooltip="ui.busyTooltip.value"
 			:is-refreshing="ui.isRefreshing.value"
-			@update:search-query="(value) => (ui.searchQuery.value = value)"
+			:compact="ui.compactNavigation.value"
+			class="py-1 pb-4"
+			@update:search-query="(value) => (ui.activeView.value.searchQuery.value = value)"
 			@create="ui.showCreateModal"
 			@upload="ui.initiateFileUpload"
 			@upload-zip="() => {}"
@@ -24,8 +28,27 @@
 			@share="() => ui.shareEditorToMclogs()"
 			@find="() => ui.toggleFind()"
 			@toggle-sidebar="() => ui.setSidebarOpen(!ui.sidebarOpen.value)"
+		>
+			<template #actions>
+				<IconButton
+					v-if="!ui.inWorkbench"
+					v-tooltip="formatMessage(messages.compactFolders)"
+					:type="ui.compactFolders.value ? 'colored' : 'quiet'"
+					:color="ui.compactFolders.value ? 'brand' : undefined"
+					size="sm"
+					:label="formatMessage(messages.compactFolders)"
+					:aria-pressed="ui.compactFolders.value"
+					@click="ui.setCompactFolders(!ui.compactFolders.value)"
+				>
+					<FoldVerticalIcon />
+				</IconButton>
+			</template>
+		</FileActionBar>
+		<FileSearch
+			:loaded-only-notice="ui.searchLoadedOnlyNotice.value"
+			:compact="ui.compactNavigation.value"
+			class="pb-2"
 		/>
-		<FileSearch :loaded-only-notice="ui.searchLoadedOnlyNotice.value" />
 		<div
 			:class="[
 				scrollFileEntries ? 'overflow-y-auto' : '',
@@ -39,12 +62,36 @@
 </template>
 
 <script setup lang="ts">
+import { FoldVerticalIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { IconButton } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { useSidebarToggleLocation } from '../composables/sidebar-toggle'
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import FileActionBar from './FileActionBar.vue'
 import FileSearch from './FileSearch.vue'
 import FileTree from './FileTree.vue'
 
 const ui = injectFileBrowserUI()
+const toggleLocation = useSidebarToggleLocation()
+
+/**
+ * Whether the action bar atop the tree has anything to offer: the tree's own button, creating
+ * entries, or compacting folders, which a workbench offers in its settings instead.
+ */
+const hasActions = computed(
+	() => toggleLocation.value === 'sidebar' || !ui.readOnly || !ui.inWorkbench,
+)
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	compactFolders: {
+		id: 'files.sidebar.compact-folders',
+		defaultMessage: 'Compact folders',
+	},
+})
 
 withDefaults(
 	defineProps<{
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
index 9724f6eb5f..07e746b9af 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
@@ -78,6 +78,7 @@ import Checkbox from '#ui/components/base/Checkbox.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 import { FILE_COLUMNS, type FileColumn } from '../composables/file-columns'
+import type { FilesSidebarToggleLocation } from '../settings'
 import type { FileSortField } from '../types'
 
 const { formatMessage } = useVIntl()
@@ -103,6 +104,18 @@ const messages = defineMessages({
 		id: 'files.table-header.colored-icons',
 		defaultMessage: 'Colored icons',
 	},
+	sidebarToggle: {
+		id: 'files.table-header.sidebar-toggle',
+		defaultMessage: 'Folder tree button',
+	},
+	sidebarToggleSidebar: {
+		id: 'files.table-header.sidebar-toggle.sidebar',
+		defaultMessage: 'In the folder tree',
+	},
+	sidebarToggleNavigation: {
+		id: 'files.table-header.sidebar-toggle.navigation',
+		defaultMessage: 'In the navigation bar',
+	},
 })
 
 const columnMessages = defineMessages({
@@ -140,7 +153,11 @@ const props = defineProps<{
 	/** Whether the view settings menu is offered at all. */
 	viewSettingsEnabled?: boolean
 	advancedView?: boolean
+	/** Whether the advanced view can be switched off, which a workbench always uses. */
+	advancedViewToggleable?: boolean
 	coloredIcons?: boolean
+	/** Where the folder tree's button sits, offered here unless the host toggles the tree itself. */
+	sidebarToggleLocation?: FilesSidebarToggleLocation | null
 }>()
 
 const emit = defineEmits<{
@@ -150,6 +167,7 @@ const emit = defineEmits<{
 	'toggle-details': []
 	'toggle-advanced-view': []
 	'toggle-colored-icons': []
+	'set-sidebar-toggle': [location: FilesSidebarToggleLocation]
 }>()
 
 const shownColumnDefinitions = computed(() =>
@@ -158,6 +176,7 @@ const shownColumnDefinitions = computed(() =>
 
 const columnOptions = computed<ButtonMenuOption[]>(() => [
 	{
+		shown: props.advancedViewToggleable !== false,
 		id: 'advanced-view',
 		label: formatMessage(messages.advancedView),
 		selected: props.advancedView,
@@ -171,6 +190,25 @@ const columnOptions = computed<ButtonMenuOption[]>(() => [
 		remainOpen: true,
 		action: () => emit('toggle-colored-icons'),
 	},
+	{ type: 'divider', shown: props.sidebarToggleLocation != null },
+	{
+		type: 'heading',
+		id: 'sidebar-toggle',
+		label: formatMessage(messages.sidebarToggle),
+		shown: props.sidebarToggleLocation != null,
+	},
+	...(['sidebar', 'navigation'] as const).map(
+		(location): ButtonMenuOption => ({
+			shown: props.sidebarToggleLocation != null,
+			id: `sidebar-toggle-${location}`,
+			label: formatMessage(
+				location === 'sidebar' ? messages.sidebarToggleSidebar : messages.sidebarToggleNavigation,
+			),
+			selected: props.sidebarToggleLocation === location,
+			remainOpen: true,
+			action: () => emit('set-sidebar-toggle', location),
+		}),
+	),
 	{ type: 'divider', shown: props.columnsAdjustable },
 	{
 		shown: props.columnsAdjustable,
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
index 1efa3aaff2..b6199c47b1 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
@@ -43,7 +43,7 @@ import { computed, watch } from 'vue'
 
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { infoFrom, parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
-import { canOpenInFileEditor } from '#ui/utils/file-extensions'
+import { getFileExtension, isArchiveFile } from '#ui/utils/file-extensions'
 
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import type { FileItem } from '../types'
@@ -84,6 +84,11 @@ const messages = defineMessages({
 	},
 })
 
+const props = defineProps<{
+	/** The folder whose contents the tree shows, the root by default. */
+	root?: string
+}>()
+
 const ui = injectFileBrowserUI()
 const tree = ui.directoryTree
 
@@ -104,6 +109,30 @@ function isExpandable(item: FileItem) {
 	return item.type === 'directory' && item.count !== 0
 }
 
+function isArchive(item: FileItem) {
+	return isArchiveFile(getFileExtension(item.name))
+}
+
+/**
+ * With compact folders on, folds a chain of folders that each hold just one folder into the
+ * first one's row, named like `a/b/c` and standing for the last. Archives are never folded, so
+ * they keep their own row.
+ */
+function compactChain(item: FileItem): FileItem {
+	if (!ui.compactFolders.value || item.type !== 'directory' || isArchive(item)) return item
+
+	const names = [item.name]
+	let current = item
+	while (current.count === 1) {
+		const children = tree.get(infoFrom(current.path)).data.value
+		const only = children.length === 1 ? children[0] : undefined
+		if (only?.type !== 'directory' || isArchive(only)) break
+		current = only
+		names.push(only.name)
+	}
+	return current === item ? item : { ...current, name: names.join('/') }
+}
+
 const nameCollator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' })
 
 function compareEntries(a: FileItem, b: FileItem) {
@@ -121,7 +150,7 @@ function collectRows(path: string, depth: number): TreeRow[] {
 	}
 
 	const rows: TreeRow[] = []
-	for (const item of [...items].sort(compareEntries)) {
+	for (const item of [...items].sort(compareEntries).map(compactChain)) {
 		const expandable = isExpandable(item)
 		const expanded = expandable && expandedPaths.value.has(item.path)
 		const children = expanded ? collectRows(item.path, depth + 1) : []
@@ -134,7 +163,7 @@ function collectRows(path: string, depth: number): TreeRow[] {
 	return rows
 }
 
-const rows = computed(() => collectRows(ROOT_PATH, 0))
+const rows = computed(() => collectRows(props.root ?? ROOT_PATH, 0))
 
 function setExpanded(path: string, expanded: boolean) {
 	const current = tree.expandedEntries.value
@@ -148,13 +177,27 @@ function toggleExpanded(item: FileItem) {
 	setExpanded(item.path, !expandedPaths.value.has(item.path))
 }
 
+/**
+ * Opens a row's entry. Unless folders are listed in tabs, the tree is how they're browsed, so a
+ * folder only expands or collapses; with trees in tabs, files open in tabs of their own, leaving
+ * the tree's tab as it is.
+ */
 function openDirectory(item: FileItem) {
+	const browsing = ui.browsing.value
+	if (browsing !== 'listing' && item.type === 'directory') {
+		if (isExpandable(item)) toggleExpanded(item)
+		return
+	}
+	if (browsing === 'tree') {
+		ui.revealInTab(item)
+		return
+	}
 	if (isExpandable(item)) setExpanded(item.path, true)
 	ui.navigateTo(item)
 }
 
 function prefetch(item: FileItem) {
-	if (item.type === 'directory' || canOpenInFileEditor(item.name)) {
+	if (ui.canOpenInTab(item)) {
 		tree.prefetch(item)
 	}
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileWorkbench.vue b/packages/ui/src/layouts/shared/files-tab/components/FileWorkbench.vue
new file mode 100644
index 0000000000..5cc3b0a679
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileWorkbench.vue
@@ -0,0 +1,52 @@
+<template>
+	<WorkbenchLayout
+		ref="layout"
+		:panels="panels"
+		:storage-key="storageKey"
+		:sizes="sizes"
+		:hidden-regions="hiddenRegions"
+		:mode="mode"
+		:variant="variant"
+		:documents="documents"
+	>
+		<template v-for="(_, name) in $slots" #[name]="slotProps">
+			<slot :name="name" v-bind="slotProps ?? {}" />
+		</template>
+	</WorkbenchLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import WorkbenchLayout from '#ui/layouts/shared/workbench/layout.vue'
+import type {
+	WorkbenchMode,
+	WorkbenchModeName,
+	WorkbenchPanel,
+	WorkbenchRegion,
+	WorkbenchRegionSizes,
+	WorkbenchVariant,
+} from '#ui/layouts/shared/workbench/types'
+
+import { useFileDocuments } from '../composables/file-documents'
+
+/**
+ * A workbench whose docks also host the files layout's tabs, each showing its own navigation and
+ * listing or editor. Placed through the files layout's `workspace` slot, with `workbench` set on
+ * it. Takes the same panels and slots as `WorkbenchLayout`.
+ */
+defineProps<{
+	panels: WorkbenchPanel[]
+	storageKey: string | null
+	sizes?: Partial<WorkbenchRegionSizes>
+	hiddenRegions?: WorkbenchRegion[]
+	mode?: WorkbenchModeName | WorkbenchMode
+	variant?: WorkbenchVariant
+}>()
+
+const documents = useFileDocuments()
+
+const layout = ref<InstanceType<typeof WorkbenchLayout>>()
+
+defineExpose({ layout })
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
index eba0c210f5..cebbb9d6cc 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		ref="editorContainer"
-		class="relative flex flex-col overflow-hidden"
+		class="relative flex flex-col overflow-hidden border-0 border-t border-solid border-surface-5"
 		:class="{ 'h-full': props.fillHeight }"
 	>
 		<EditorFindReplace
@@ -18,26 +18,44 @@
 			@replace="replaceOne"
 			@replace-all="replaceAllOccurrences"
 		/>
-		<component
-			:is="props.editorComponent"
-			v-if="!isEditingImage && !isLoading && props.editorComponent"
-			v-model:value="fileContent"
-			:lang="editorLanguage"
-			theme="modrinth"
+		<CodeEditor
+			v-if="!isEditingImage && !mediaPreview && binarySize == null && !isLoading"
+			ref="codeEditor"
+			v-model="fileContent"
+			:language="editorLanguage"
 			:readonly="isEditorReadOnly"
-			:print-margin="false"
-			:style="{ height: props.fillHeight ? undefined : editorHeight, fontSize: '0.875rem' }"
-			class="ace-modrinth"
+			:extensions="editorKeys"
+			:style="{ height: props.fillHeight ? undefined : editorHeight }"
+			class="text-sm"
 			:class="props.fillHeight ? 'min-h-0 flex-1' : 'rounded-[20px]'"
-			@init="onEditorInit"
+			@save="saveFileContent(false)"
 		/>
 		<FileImageViewer
 			v-else-if="isEditingImage && imagePreview"
 			:image-blob="imagePreview"
 			:class="{ '!h-full !rounded-none': props.fillHeight }"
 		/>
+		<FileMediaViewer
+			v-else-if="mediaPreview && props.file"
+			:blob="mediaPreview.blob"
+			:kind="mediaPreview.kind"
+			:name="props.file.name"
+			:class="{ '!h-full !rounded-none': props.fillHeight }"
+		/>
+		<FilePreviewFallback
+			v-else-if="binarySize != null && props.file"
+			:file="props.file"
+			:size="binarySize"
+			:class="{ '!h-full !rounded-none': props.fillHeight }"
+		/>
+		<FileViewControls
+			v-if="props.tabId && props.file"
+			class="absolute bottom-3 right-5 z-10"
+			:tab-id="props.tabId"
+			:file="props.file"
+		/>
 		<div
-			v-else-if="isLoading || !props.editorComponent"
+			v-else-if="isLoading"
 			class="flex items-center justify-center bg-bg-raised"
 			:class="props.fillHeight ? 'min-h-0 flex-1' : 'rounded-[20px]'"
 			:style="{ height: props.fillHeight ? undefined : editorHeight }"
@@ -48,24 +66,65 @@
 </template>
 
 <script setup lang="ts">
+import { keymap } from '@codemirror/view'
 import { SpinnerIcon } from '@modrinth/assets'
-import type { Ace } from 'ace-builds'
-import { type Component, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
+import {
+	computed,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	ref,
+	shallowRef,
+	useTemplateRef,
+	watch,
+} from 'vue'
+
+import CodeEditor from '#ui/components/base/CodeEditor.vue'
+import type CodeEditorImpl from '#ui/components/base/CodeEditorImpl.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectModrinthClient } from '#ui/providers'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
-import { getEditorLanguage, getFileExtension, isImageFile } from '#ui/utils/file-extensions'
-
-import { type FileInfo, injectFileManager } from '../../providers/file-manager'
+import {
+	clearFind,
+	type FindMatches,
+	findNextMatch,
+	findPreviousMatch,
+	findText,
+	replaceAllMatches,
+	replaceMatch,
+} from '#ui/utils/codemirror/find'
+import {
+	getEditorLanguage,
+	getFileExtension,
+	isImageFile,
+	mediaKindOf,
+} from '#ui/utils/file-extensions'
+
+import { injectFileBrowserUI } from '../../providers/file-browser-ui'
+import {
+	type FileInfo,
+	type FileInterpretation,
+	injectFileManager,
+} from '../../providers/file-manager'
 import EditorFindReplace from './EditorFindReplace.vue'
 import FileImageViewer from './FileImageViewer.vue'
+import FileMediaViewer from './FileMediaViewer.vue'
+import FilePreviewFallback from './FilePreviewFallback.vue'
+import FileViewControls from './FileViewControls.vue'
 
 const props = defineProps<{
 	file: FileInfo<'file'> | null
-	editorComponent: Component | null
 	/** Fill the parent's height (e.g. a dockview panel) instead of sizing to the window. */
 	fillHeight?: boolean
+	/** Which of the file's content variants to show (see `FileManagerContext.contentVariants`). */
+	variant?: string | null
+	/**
+	 * How to show the file: `auto` picks by its type, while the others show its stored bytes as
+	 * text, as a hex dump or as formatted JSON, read-only.
+	 */
+	interpretation?: FileInterpretation
+	/** The tab showing the file, which offers its view controls in the view's corner. */
+	tabId?: string
 }>()
 
 const emit = defineEmits<{
@@ -75,6 +134,7 @@ const emit = defineEmits<{
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
 const ctx = injectFileManager()
+const ui = injectFileBrowserUI(null)
 const client = injectModrinthClient()
 
 const messages = defineMessages({
@@ -114,6 +174,10 @@ const messages = defineMessages({
 		id: 'files.editor.failed-to-share-title',
 		defaultMessage: 'Failed to share file',
 	},
+	hexTruncated: {
+		id: 'files.editor.hex-truncated',
+		defaultMessage: '… {bytes, plural, one {# more byte} other {# more bytes}} not shown',
+	},
 	failedToShareText: {
 		id: 'files.editor.failed-to-share-text',
 		defaultMessage: 'Could not upload to mclo.gs.',
@@ -124,8 +188,12 @@ const fileContent = ref('')
 const originalContent = ref('')
 const isEditingImage = ref(false)
 const imagePreview = ref<Blob | null>(null)
+const mediaPreview = shallowRef<{ blob: Blob; kind: 'video' | 'audio' } | null>(null)
+/** The size of a file whose contents can't be shown, which then shows in their place. */
+const binarySize = ref<number | null>(null)
 const isLoading = ref(false)
-const editorInstance = ref<Ace.Editor | null>(null)
+const codeEditor = useTemplateRef<InstanceType<typeof CodeEditorImpl>>('codeEditor')
+const editorView = computed(() => codeEditor.value?.view ?? null)
 const editorContainer = ref<HTMLElement | null>(null)
 const editorHeight = ref('300px')
 
@@ -151,21 +219,23 @@ onMounted(() => {
 	window.addEventListener('resize', updateEditorHeight)
 })
 
+/** Whether the file is shown other than as itself, which isn't something to edit. */
+const isInterpreted = computed(() => (props.interpretation ?? 'auto') !== 'auto')
+
 const editorLanguage = computed(() => {
-	const ext = getFileExtension(props.file?.name ?? '')
-	return getEditorLanguage(ext)
+	if (props.interpretation === 'json') return 'json'
+	if (isInterpreted.value) return 'text'
+	const hostLanguage = props.file ? ctx.editorLanguage?.(props.file) : undefined
+	return hostLanguage ?? getEditorLanguage(props.file?.name ?? '')
 })
 const isEditorReadOnly = computed(
-	() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(props.file) ?? false),
+	() =>
+		isInterpreted.value || (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(props.file) ?? false),
 )
 
-watch(isEditorReadOnly, (readOnly) => {
-	editorInstance.value?.setReadOnly(readOnly)
-})
-
 watch(
-	() => props.file,
-	async (newFile) => {
+	[() => props.file, () => props.variant, () => props.interpretation, () => ui?.jsonIndent.value],
+	async ([newFile]) => {
 		if (newFile) {
 			closeFind()
 			await loadFileContent(newFile)
@@ -182,7 +252,7 @@ async function loadFileContent(file: FileInfo<'file'>) {
 	try {
 		if (!props.fillHeight) window.scrollTo(0, 0)
 		const extension = getFileExtension(file.name)
-		const result = ctx.directoryTree.get(file)
+		const result = ctx.directoryTree.get(file, props.variant ?? undefined)
 
 		const holder = Promise.withResolvers<ArrayBuffer>()
 
@@ -204,12 +274,20 @@ async function loadFileContent(file: FileInfo<'file'>) {
 
 		const data = await holder.promise
 
-		if (isImageFile(extension)) {
-			const content = new Blob([data])
+		const mediaKind = mediaKindOf(file.name)
+		resetState()
+		if (isInterpreted.value) {
+			const content = interpret(data, props.interpretation!)
+			fileContent.value = content
+			originalContent.value = content
+		} else if (isImageFile(extension)) {
 			isEditingImage.value = true
-			imagePreview.value = content
+			imagePreview.value = new Blob([data])
+		} else if (mediaKind) {
+			mediaPreview.value = { blob: new Blob([data]), kind: mediaKind }
+		} else if (looksBinary(data)) {
+			binarySize.value = data.byteLength
 		} else {
-			isEditingImage.value = false
 			const content = new TextDecoder().decode(data)
 			fileContent.value = content
 			originalContent.value = content
@@ -240,35 +318,89 @@ function resetState() {
 	originalContent.value = ''
 	isEditingImage.value = false
 	imagePreview.value = null
+	mediaPreview.value = null
+	binarySize.value = null
 }
 
-function onEditorInit(editor: Ace.Editor) {
-	editorInstance.value = editor
-	editor.setReadOnly(isEditorReadOnly.value)
-
-	editor.commands.addCommand({
-		name: 'save',
-		bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
-		exec: () => saveFileContent(false),
-	})
-
-	editor.commands.addCommand({
-		name: 'find',
-		bindKey: { win: 'Ctrl-F', mac: 'Command-F' },
-		exec: () => toggleFind(),
-	})
-
-	editor.commands.addCommand({
-		name: 'replace',
-		bindKey: { win: 'Ctrl-H', mac: 'Command-Option-F' },
-		exec: () => {
-			if (isEditorReadOnly.value) return
-			isFindOpen.value = true
-			nextTick(() => findReplaceRef.value?.openReplace())
-		},
-	})
+/** How much of a file a hex dump covers, so huge files don't freeze the editor. */
+const HEX_DUMP_LIMIT = 2 * 1024 * 1024
+const HEX_BYTES_PER_LINE = 16
+
+/** Lines of offset, bytes in hex and the bytes as printable ASCII, like `xxd` prints them. */
+function hexDump(data: ArrayBuffer) {
+	const bytes = new Uint8Array(data, 0, Math.min(data.byteLength, HEX_DUMP_LIMIT))
+	const lines: string[] = []
+	for (let offset = 0; offset < bytes.length; offset += HEX_BYTES_PER_LINE) {
+		const line = bytes.subarray(offset, offset + HEX_BYTES_PER_LINE)
+		const hex = Array.from(line, (byte) => byte.toString(16).padStart(2, '0'))
+			.join(' ')
+			.padEnd(HEX_BYTES_PER_LINE * 3 - 1)
+		const ascii = Array.from(line, (byte) =>
+			byte >= 0x20 && byte < 0x7f ? String.fromCharCode(byte) : '.',
+		).join('')
+		lines.push(`${offset.toString(16).padStart(8, '0')}  ${hex}  ${ascii}`)
+	}
+	if (data.byteLength > HEX_DUMP_LIMIT) {
+		lines.push(formatMessage(messages.hexTruncated, { bytes: data.byteLength - HEX_DUMP_LIMIT }))
+	}
+	return lines.join('\n')
 }
 
+/**
+ * Line breaks typed straight into the data rather than escaped (as `\n`). Between values they're
+ * only whitespace, but within strings they make JSON invalid, so they're dropped before parsing.
+ */
+const UNESCAPED_LINE_BREAKS = /[\r\n]+/g
+
+/**
+ * The file's stored bytes shown as text, a hex dump, or JSON laid out over lines and indented (as
+ * the settings say) when it parses as JSON, e.g. compacted JSON.
+ */
+function interpret(data: ArrayBuffer, interpretation: FileInterpretation) {
+	if (interpretation === 'hex') return hexDump(data)
+	const text = new TextDecoder().decode(data)
+	if (interpretation !== 'json') return text
+	try {
+		const parsed = JSON.parse(text.replace(UNESCAPED_LINE_BREAKS, ''))
+		return JSON.stringify(parsed, null, ui?.jsonIndent.value ?? '\t')
+	} catch {
+		return text
+	}
+}
+
+/** How much of a file is checked for being binary: enough to cover any text file's start. */
+const BINARY_SNIFF_LENGTH = 8192
+
+/** Text files don't hold NUL bytes, while nearly every binary format does near its start. */
+function looksBinary(data: ArrayBuffer) {
+	return new Uint8Array(data, 0, Math.min(data.byteLength, BINARY_SNIFF_LENGTH)).includes(0)
+}
+
+/** Find and replace open the page's own find bar, in place of the editor's. */
+const editorKeys = [
+	keymap.of([
+		{
+			key: 'Mod-f',
+			preventDefault: true,
+			run: () => {
+				toggleFind()
+				return true
+			},
+		},
+		{
+			key: 'Mod-h',
+			mac: 'Mod-Alt-f',
+			preventDefault: true,
+			run: () => {
+				if (isEditorReadOnly.value) return false
+				isFindOpen.value = true
+				nextTick(() => findReplaceRef.value?.openReplace())
+				return true
+			},
+		},
+	]),
+]
+
 async function saveFileContent(exit: boolean = false) {
 	if (!props.file) return
 	if (isEditorReadOnly.value) return
@@ -326,10 +458,9 @@ async function shareToMclogs() {
 	}
 }
 
-function countOccurrences(content: string, query: string): number {
-	if (!query) return 0
-	const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-	return (content.match(new RegExp(escaped, 'gi')) ?? []).length
+function showMatches(matches: FindMatches) {
+	findMatchCount.value = matches.total
+	currentFindMatch.value = matches.current
 }
 
 function toggleFind() {
@@ -346,71 +477,35 @@ function closeFind() {
 	inFileFindQuery.value = ''
 	findMatchCount.value = 0
 	currentFindMatch.value = 0
-	editorInstance.value?.find('', { wrap: true })
-	editorInstance.value?.focus()
+	if (editorView.value) {
+		clearFind(editorView.value)
+		editorView.value.focus()
+	}
 }
 
-function replaceOne(query: string) {
-	const editor = editorInstance.value
-	if (!editor || isEditorReadOnly.value || findMatchCount.value === 0) return
-	editor.replace(query)
-	nextTick(() => {
-		const count = countOccurrences(fileContent.value, inFileFindQuery.value)
-		findMatchCount.value = count
-		currentFindMatch.value = count > 0 ? Math.min(currentFindMatch.value, count) : 0
-	})
+function replaceOne(replacement: string) {
+	if (!editorView.value || isEditorReadOnly.value || findMatchCount.value === 0) return
+	showMatches(replaceMatch(editorView.value, replacement))
 }
 
-function replaceAllOccurrences(query: string) {
-	const editor = editorInstance.value
-	if (!editor || isEditorReadOnly.value || findMatchCount.value === 0) return
-	editor.replaceAll(query)
-	nextTick(() => {
-		const count = countOccurrences(fileContent.value, inFileFindQuery.value)
-		findMatchCount.value = count
-		currentFindMatch.value = count > 0 ? 1 : 0
-		if (count > 0) {
-			editor.find(inFileFindQuery.value, { wrap: true, caseSensitive: false })
-		}
-	})
+function replaceAllOccurrences(replacement: string) {
+	if (!editorView.value || isEditorReadOnly.value || findMatchCount.value === 0) return
+	showMatches(replaceAllMatches(editorView.value, replacement))
 }
 
 function handleFindInput() {
-	const editor = editorInstance.value
-	if (!editor) return
-
-	const query = inFileFindQuery.value
-	if (!query) {
-		findMatchCount.value = 0
-		currentFindMatch.value = 0
-		editor.find('', { wrap: true })
-		return
-	}
-
-	const count = countOccurrences(fileContent.value, query)
-	findMatchCount.value = count
-
-	if (count > 0) {
-		editor.find(query, { wrap: true, caseSensitive: false })
-		currentFindMatch.value = 1
-	} else {
-		currentFindMatch.value = 0
-	}
+	if (!editorView.value) return
+	showMatches(findText(editorView.value, inFileFindQuery.value))
 }
 
 function findNext() {
-	const editor = editorInstance.value
-	if (!editor || findMatchCount.value === 0) return
-	editor.findNext()
-	currentFindMatch.value = (currentFindMatch.value % findMatchCount.value) + 1
+	if (!editorView.value || findMatchCount.value === 0) return
+	showMatches(findNextMatch(editorView.value))
 }
 
 function findPrevious() {
-	const editor = editorInstance.value
-	if (!editor || findMatchCount.value === 0) return
-	editor.findPrevious()
-	currentFindMatch.value =
-		((currentFindMatch.value - 2 + findMatchCount.value) % findMatchCount.value) + 1
+	if (!editorView.value || findMatchCount.value === 0) return
+	showMatches(findPreviousMatch(editorView.value))
 }
 
 function close() {
@@ -420,7 +515,6 @@ function close() {
 
 onUnmounted(() => {
 	window.removeEventListener('resize', updateEditorHeight)
-	editorInstance.value = null
 	resetState()
 })
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileMediaViewer.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileMediaViewer.vue
new file mode 100644
index 0000000000..e940d8732a
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileMediaViewer.vue
@@ -0,0 +1,75 @@
+<template>
+	<div
+		class="flex h-[750px] flex-col items-center justify-center gap-4 overflow-hidden rounded-[20px] bg-black p-4"
+	>
+		<div v-if="failed" class="flex flex-col items-center gap-3 text-center">
+			<TriangleAlertIcon class="size-8 text-red" aria-hidden="true" />
+			<p class="m-0 text-secondary">{{ formatMessage(messages.unplayable) }}</p>
+		</div>
+		<video
+			v-else-if="kind === 'video'"
+			:key="url"
+			:src="url"
+			class="max-h-full max-w-full rounded-lg"
+			controls
+			preload="metadata"
+			:aria-label="name"
+			@error="failed = true"
+		/>
+		<template v-else>
+			<component :is="fileIcon.icon" class="size-16" :class="fileIcon.color" aria-hidden="true" />
+			<span class="max-w-full truncate font-semibold text-contrast">{{ name }}</span>
+			<audio
+				:key="url"
+				:src="url"
+				class="w-full max-w-xl"
+				controls
+				preload="metadata"
+				:aria-label="name"
+				@error="failed = true"
+			/>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { TriangleAlertIcon } from '@modrinth/assets'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { fileIconFor } from '../../utils'
+
+/** Plays a video or audio file with the browser's own controls. */
+const props = defineProps<{
+	blob: Blob
+	kind: 'video' | 'audio'
+	name: string
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	unplayable: {
+		id: 'files.media-viewer.unplayable',
+		defaultMessage: "This file can't be played in the browser.",
+	},
+})
+
+const fileIcon = computed(() => fileIconFor({ name: props.name, type: 'file' }))
+
+const url = ref('')
+const failed = ref(false)
+
+watch(
+	() => props.blob,
+	(blob) => {
+		if (url.value) URL.revokeObjectURL(url.value)
+		url.value = URL.createObjectURL(blob)
+		failed.value = false
+	},
+	{ immediate: true },
+)
+
+onBeforeUnmount(() => URL.revokeObjectURL(url.value))
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FilePreviewFallback.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FilePreviewFallback.vue
new file mode 100644
index 0000000000..1b6dc15519
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FilePreviewFallback.vue
@@ -0,0 +1,46 @@
+<template>
+	<div
+		class="flex h-[750px] flex-col items-center justify-center gap-3 overflow-hidden rounded-[20px] bg-surface-2 p-6 text-center"
+	>
+		<component :is="iconStyle.icon" class="size-12" :class="iconStyle.color" aria-hidden="true" />
+		<span class="max-w-full truncate text-lg font-semibold text-contrast">{{ file.name }}</span>
+		<p class="m-0 max-w-md text-secondary">{{ formatMessage(messages.description) }}</p>
+		<span class="text-sm text-secondary tabular-nums">{{ formatBytes(size) }}</span>
+		<Button v-if="ctx.downloadFile" type="outlined" @click="ctx.downloadFile(file)">
+			<DownloadIcon aria-hidden="true" />
+			{{ formatMessage(commonMessages.downloadButton) }}
+		</Button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { DownloadIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { Button } from '#ui/components/base/buttons'
+import { useFormatBytes } from '#ui/composables/format-bytes'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { type FileInfo, injectFileManager } from '../../providers/file-manager'
+import { fileIconFor } from '../../utils'
+
+/** Stands in for a file whose contents can't be shown, e.g. a binary one. */
+const props = defineProps<{
+	file: FileInfo<'file'>
+	size: number
+}>()
+
+const { formatMessage } = useVIntl()
+const formatBytes = useFormatBytes()
+const ctx = injectFileManager()
+
+const messages = defineMessages({
+	description: {
+		id: 'files.preview-fallback.description',
+		defaultMessage: "This file isn't text, an image or media, so it can't be previewed here.",
+	},
+})
+
+const iconStyle = computed(() => fileIconFor({ name: props.file.name, type: 'file' }))
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileViewControls.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileViewControls.vue
new file mode 100644
index 0000000000..2ddd336ac2
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileViewControls.vue
@@ -0,0 +1,95 @@
+<template>
+	<div
+		class="flex items-center gap-2 rounded-xl border border-solid border-surface-4 bg-surface-3 p-1 shadow-sm"
+		:class="{ 'pl-3': showVariants }"
+	>
+		<template v-if="showVariants && variants">
+			<span class="text-sm font-semibold text-secondary">{{ variants.label }}</span>
+			<Combobox
+				class="w-36"
+				trigger-size="sm"
+				:aria-label="variants.label"
+				:model-value="variants.selected"
+				:options="variants.options.map((option) => ({ value: option.id, label: option.label }))"
+				@update:model-value="(id) => id && ui.setContentVariant(tabId, file, id)"
+			/>
+		</template>
+		<TeleportOverflowMenu
+			type="quiet"
+			size="sm"
+			:circular="false"
+			:label="formatMessage(messages.interpretation)"
+			:tooltip="formatMessage(messages.interpretationTooltip, { current: currentLabel })"
+			:options="options"
+			placement="top-end"
+		>
+			<component :is="INTERPRETATION_ICONS[interpretation]" aria-hidden="true" />
+		</TeleportOverflowMenu>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BinaryIcon, BracesIcon, ScanEyeIcon, TypeIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { type ButtonMenuOption, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import Combobox from '#ui/components/base/Combobox.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { injectFileBrowserUI } from '../../providers/file-browser-ui'
+import type { FileInfo, FileInterpretation } from '../../providers/file-manager'
+
+/**
+ * The corner controls of a tab's file view: the content variant it's read as (e.g. which
+ * decompiler disassembles a class file), and how the file is shown, as by default or as its
+ * stored bytes in text, hex or JSON.
+ */
+const props = defineProps<{
+	tabId: string
+	file: FileInfo<'file'>
+}>()
+
+const { formatMessage } = useVIntl()
+const ui = injectFileBrowserUI()
+
+const messages = defineMessages({
+	interpretation: { id: 'files.view-controls.interpretation', defaultMessage: 'Show as' },
+	interpretationTooltip: {
+		id: 'files.view-controls.interpretation-tooltip',
+		defaultMessage: 'Showing as {current}',
+	},
+	auto: { id: 'files.view-controls.auto', defaultMessage: 'Default view' },
+	autoVariant: { id: 'files.view-controls.auto-variant', defaultMessage: 'Disassembled' },
+	text: { id: 'files.view-controls.text', defaultMessage: 'Text' },
+	hex: { id: 'files.view-controls.hex', defaultMessage: 'Hex' },
+	json: { id: 'files.view-controls.json', defaultMessage: 'JSON' },
+})
+
+const INTERPRETATION_ICONS = {
+	auto: ScanEyeIcon,
+	text: TypeIcon,
+	hex: BinaryIcon,
+	json: BracesIcon,
+} satisfies Record<FileInterpretation, unknown>
+
+const variants = computed(() => ui.contentVariantOf(props.tabId, props.file))
+const interpretation = computed(() => ui.interpretationOf(props.tabId, props.file))
+const showVariants = computed(() => !!variants.value && interpretation.value === 'auto')
+
+function labelOf(value: FileInterpretation) {
+	if (value === 'auto') return formatMessage(variants.value ? messages.autoVariant : messages.auto)
+	return formatMessage(messages[value])
+}
+
+const currentLabel = computed(() => labelOf(interpretation.value))
+
+const options = computed<ButtonMenuOption[]>(() =>
+	(['auto', 'text', 'hex', 'json'] as const).map((value) => ({
+		id: value,
+		label: labelOf(value),
+		icon: INTERPRETATION_ICONS[value],
+		selected: interpretation.value === value,
+		action: () => ui.setInterpretation(props.tabId, props.file, value),
+	})),
+)
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
index 3979298ebf..46dad79bad 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
-		class="group flex h-full max-w-[16rem] items-center gap-1.5 pl-3 text-sm"
-		:class="canClose ? 'pr-1' : 'pr-3'"
+		class="group flex h-full max-w-[16rem] items-center gap-1 pl-2.5 text-sm"
+		:class="canClose ? 'pr-1.5' : 'pr-2.5'"
 		:title="location?.path"
 		@auxclick.prevent="(event) => event.button === 1 && close()"
 		@contextmenu.prevent.stop="openMenu"
@@ -13,7 +13,7 @@
 		<button
 			v-if="canClose"
 			type="button"
-			class="relative flex size-6 shrink-0 items-center justify-center rounded-md border-none bg-transparent p-0 text-secondary hover:bg-surface-5 hover:text-contrast focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+			class="relative flex size-4 shrink-0 items-center justify-center rounded border-none bg-transparent p-0 text-secondary hover:bg-surface-5 hover:text-contrast focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
 			:aria-label="formatMessage(messages.closeTab, { name: label })"
 			@pointerdown.stop
 			@mousedown.stop
@@ -24,7 +24,7 @@
 				v-tooltip="formatMessage(messages.unsavedChanges)"
 				class="size-2 rounded-full bg-brand group-hover:hidden"
 			/>
-			<XIcon class="size-4" :class="{ 'hidden group-hover:block': isDirty }" />
+			<XIcon class="size-3" :class="{ 'hidden group-hover:block': isDirty }" />
 		</button>
 		<span
 			v-else-if="isDirty"
@@ -35,11 +35,13 @@
 </template>
 
 <script setup lang="ts">
-import { HomeIcon, XIcon } from '@modrinth/assets'
+import { HomeIcon, SplitIcon, XIcon } from '@modrinth/assets'
 import type { DockviewPanelApi } from 'dockview-vue'
 import { computed } from 'vue'
 
+import type { ButtonMenuOption } from '#ui/components/base/buttons/types'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectWorkbench } from '#ui/layouts/shared/workbench/providers/workbench'
 
 import { currentLocation, type FileTabPanelParams } from '../../composables/file-tabs'
 import { injectFileBrowserUI } from '../../providers/file-browser-ui'
@@ -79,6 +81,14 @@ const messages = defineMessages({
 		id: 'files.tabs.close-all-tabs',
 		defaultMessage: 'Close all tabs',
 	},
+	splitRight: {
+		id: 'files.tabs.split-right',
+		defaultMessage: 'Split right',
+	},
+	splitDown: {
+		id: 'files.tabs.split-down',
+		defaultMessage: 'Split down',
+	},
 })
 
 const ui = injectFileBrowserUI()
@@ -103,9 +113,38 @@ const isActive = computed(() => ui.fileTabs.activeTabId.value === tabId)
 const canClose = computed(() => ui.fileTabs.canClose.value)
 const isDirty = computed(() => ui.fileTabs.editors.get(tabId)?.hasUnsavedChanges.value ?? false)
 
+const workbench = injectWorkbench(null)
+
+/** Within a workbench, the tab can also be moved to another dock or split off within its own. */
+function workbenchOptions(): ButtonMenuOption[] {
+	const moveOption = workbench?.documentMoveOption(tabId)
+	if (!moveOption) return []
+	const panelApi = props.params.api
+	const canSplit = panelApi.group.panels.length > 1
+	return [
+		moveOption,
+		{
+			id: 'split-right',
+			label: formatMessage(messages.splitRight),
+			icon: SplitIcon,
+			disabled: !canSplit,
+			action: () => panelApi.moveTo({ group: panelApi.group, position: 'right' }),
+		},
+		{
+			id: 'split-down',
+			label: formatMessage(messages.splitDown),
+			icon: SplitIcon,
+			disabled: !canSplit,
+			action: () => panelApi.moveTo({ group: panelApi.group, position: 'bottom' }),
+		},
+		{ type: 'divider' },
+	]
+}
+
 function openMenu(event: MouseEvent) {
 	const hasOthers = ui.fileTabs.tabs.value.length > 1
 	ui.handleContextMenu(event, [
+		...workbenchOptions(),
 		{
 			id: 'close-tab',
 			label: formatMessage(messages.closeThisTab),
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
index 747e71333b..b53b2a3c46 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
@@ -1,10 +1,77 @@
 <template>
+	<div
+		v-if="ui.inWorkbench"
+		class="flex h-full min-h-0 flex-col bg-surface-1"
+		@pointerdown.capture="activate"
+		@dragenter.capture="activate"
+	>
+		<div
+			class="shrink-0 border-0 border-solid border-surface-5 px-2"
+			:class="rounded ? 'border-y bg-surface-1 pt-2 pb-2' : 'border-b bg-surface-2 pt-1 pb-1'"
+		>
+			<FileNavbar
+				:sidebar-open="ui.sidebarOpen.value"
+				:active-location="view.location.value"
+				:is-editor-find-open="fileEditorRef?.isFindOpen ?? false"
+				:search-query="view.searchQuery.value"
+				:show-refresh-button="ui.showRefreshButton.value"
+				:show-install-from-url="ui.showInstallFromUrl"
+				:base-id="`${ui.baseId}-${tabId}`"
+				:disabled="ui.isBusy.value"
+				:disabled-tooltip="ui.busyTooltip.value"
+				:can-go-back="ui.fileTabs.canGoBackIn(tabId)"
+				:can-go-forward="ui.fileTabs.canGoForwardIn(tabId)"
+				:sidebar-toggleable="toggleLocation != null"
+				:sidebar-toggle-always="toggleLocation === 'navigation'"
+				:compact="ui.compactNavigation.value"
+				@back="ui.fileTabs.goIn(tabId, -1)"
+				@forward="ui.fileTabs.goIn(tabId, 1)"
+				@navigate="(depth) => navigate(parentInfoFrom(view.location.value, depth))"
+				@navigate-home="navigate(HOME)"
+				@prefetch-home="ui.handleHomePrefetch"
+				@update:search-query="(value) => (view.searchQuery.value = value)"
+				@create="ui.showCreateModal"
+				@upload="ui.initiateFileUpload"
+				@upload-zip="() => {}"
+				@unzip-from-url="ui.showUnzipFromUrlModal"
+				@refresh="ui.refresh"
+				@share="fileEditorRef?.shareToMclogs()"
+				@find="fileEditorRef?.toggleFind()"
+				@toggle-sidebar="ui.setSidebarOpen(!ui.sidebarOpen.value)"
+				@contextmenu="openBreadcrumbMenu"
+			/>
+		</div>
+		<FileEditor
+			v-if="location"
+			:key="location.path"
+			ref="fileEditorRef"
+			class="min-h-0 flex-1"
+			:file="location"
+			:variant="variant"
+			:interpretation="interpretation"
+			:tab-id="tabId"
+			fill-height
+			@close="() => ui.fileTabs.closeFile(tabId)"
+		/>
+		<div
+			v-else
+			class="min-h-0 flex-1 overflow-y-auto overscroll-contain p-1 [--files-table-header-top:0px]"
+		>
+			<FileTree
+				v-if="ui.browsing.value === 'tree' && !view.searchQuery.value"
+				:root="view.location.value.path"
+			/>
+			<FileListing v-else :view="view" @navigate="navigate" />
+		</div>
+	</div>
 	<FileEditor
-		v-if="location?.type === 'file'"
+		v-else-if="location"
 		:key="location.path"
 		ref="fileEditorRef"
 		:file="location"
-		:editor-component="ui.editorComponent.value"
+		:variant="variant"
+		:interpretation="interpretation"
+		:tab-id="tabId"
 		fill-height
 		@close="() => ui.fileTabs.closeFile(tabId)"
 	/>
@@ -14,11 +81,21 @@
 import type { DockviewPanelApi } from 'dockview-vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
+import {
+	type FileInfo,
+	RAW_CONTENT_VARIANT,
+} from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
+import { injectWorkbench } from '#ui/layouts/shared/workbench/providers/workbench'
 
+import { useEntryMenu } from '../../composables/entry-menu'
 import { currentLocation, type FileTabPanelParams } from '../../composables/file-tabs'
+import { useSidebarToggleLocation } from '../../composables/sidebar-toggle'
 import { type FileEditorBridge, injectFileBrowserUI } from '../../providers/file-browser-ui'
+import { infoFrom, parentInfoFrom } from '../../utils'
 import FileEditor from '../editor/FileEditor.vue'
+import FileListing from '../FileListing.vue'
+import FileNavbar from '../FileNavbar.vue'
+import FileTree from '../FileTree.vue'
 
 const props = defineProps<{
 	params: {
@@ -27,9 +104,20 @@ const props = defineProps<{
 	}
 }>()
 
+const HOME = infoFrom('/')
+
 const ui = injectFileBrowserUI()
+const toggleLocation = useSidebarToggleLocation()
+const workbench = injectWorkbench(null)
+
+/** Rounded workbenches sit their tab bars on the base surface, which the navigation then continues. */
+const rounded = computed(() => workbench?.variant.value === 'rounded')
+const { openMenu } = useEntryMenu()
 
 const tabId = props.params.params.tabId
+const view = ui.viewFor(tabId)
+
+/** The open file, when the tab is on one rather than a directory. */
 const location = computed(() => {
 	const tab = ui.fileTabs.getTab(tabId)
 	if (tab == null) return null
@@ -39,6 +127,33 @@ const location = computed(() => {
 
 const fileEditorRef = ref<InstanceType<typeof FileEditor>>()
 
+const interpretation = computed(() =>
+	location.value ? ui.interpretationOf(tabId, location.value) : 'auto',
+)
+
+/** Other interpretations show the stored bytes; the default one shows the picked variant, if any. */
+const variant = computed(() => {
+	if (!location.value) return null
+	if (interpretation.value !== 'auto') return RAW_CONTENT_VARIANT
+	return ui.contentVariantOf(tabId, location.value)?.selected ?? null
+})
+
+/** Operations (creating, uploading, ...) act on the active tab, so working in a tab focuses it. */
+function activate() {
+	if (ui.fileTabs.activeTabId.value !== tabId) ui.fileTabs.activateTab(tabId)
+}
+
+function navigate(file: FileInfo) {
+	ui.fileTabs.navigateIn(tabId, file)
+}
+
+/** Right-click on a breadcrumb, `depth` segments deep (the last one is the tab's location). */
+function openBreadcrumbMenu(event: MouseEvent, depth: number) {
+	const current = view.location.value
+	const segments = current.path.split('/').filter(Boolean)
+	openMenu(event, depth >= segments.length ? current : parentInfoFrom(current, depth))
+}
+
 const bridge: FileEditorBridge = {
 	hasUnsavedChanges: computed(() => fileEditorRef.value?.hasUnsavedChanges ?? false),
 	isFindOpen: computed(() => fileEditorRef.value?.isFindOpen ?? false),
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
index 00488ded73..fcc4e96316 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
@@ -17,6 +17,7 @@
 
 <script setup lang="ts">
 import 'dockview-vue/dist/styles/dockview.css'
+import '#ui/styles/dockview-theme.css'
 
 import { type DockviewTheme, DockviewVue } from 'dockview-vue'
 import { onBeforeUnmount } from 'vue'
@@ -40,34 +41,3 @@ const tabComponents = { [FILE_TAB_COMPONENT]: FileTab }
 
 onBeforeUnmount(() => ui.fileTabs.onDispose())
 </script>
-
-<style>
-.dockview-theme-modrinth {
-	--dv-group-view-background-color: var(--surface-2);
-	--dv-tabs-and-actions-container-background-color: var(--surface-3);
-	--dv-tabs-and-actions-container-height: 2.5rem;
-	--dv-tabs-and-actions-container-font-size: 0.875rem;
-	--dv-activegroup-visiblepanel-tab-background-color: var(--surface-2);
-	--dv-activegroup-hiddenpanel-tab-background-color: var(--surface-3);
-	--dv-inactivegroup-visiblepanel-tab-background-color: var(--surface-2);
-	--dv-inactivegroup-hiddenpanel-tab-background-color: var(--surface-3);
-	--dv-activegroup-visiblepanel-tab-color: var(--color-contrast);
-	--dv-activegroup-hiddenpanel-tab-color: var(--color-text-default);
-	--dv-inactivegroup-visiblepanel-tab-color: var(--color-text-default);
-	--dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-tertiary);
-	--dv-tab-divider-color: var(--surface-5);
-	--dv-separator-border: var(--surface-5);
-	--dv-paneview-header-border-color: var(--surface-5);
-	--dv-icon-hover-background-color: var(--surface-5);
-	--dv-drag-over-background-color: var(--color-brand-highlight);
-	--dv-active-sash-color: var(--color-brand);
-	--dv-tabs-container-scrollbar-color: var(--surface-5);
-}
-
-.dv-tab {
-	border-width: 0px;
-	border-right-width: 1px;
-	border-style: solid;
-	border-color: var(--surface-5);
-}
-</style>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
index 3718b418ba..bc2402b10a 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
@@ -1,7 +1,12 @@
 <template>
-	<div class="flex h-full items-center gap-1 pr-3">
+	<div
+		v-if="shown && overflowing && !ui.inWorkbench && ui.showNewTabButton.value"
+		ref="root"
+		class="flex h-full items-center gap-1"
+		:class="ui.inWorkbench ? 'pr-1' : 'pr-3'"
+	>
 		<TeleportOverflowMenu
-			v-if="ui.fileTabs.tabs.value.length > 1"
+			v-if="overflowing"
 			v-tooltip="formatMessage(messages.allTabs)"
 			type="quiet"
 			:label="formatMessage(messages.allTabs)"
@@ -9,7 +14,10 @@
 		>
 			<ChevronDownIcon class="size-5" aria-hidden="true" />
 		</TeleportOverflowMenu>
-		<div class="flex min-w-[51px] shrink-0 justify-end">
+		<div
+			v-if="!ui.inWorkbench && ui.showNewTabButton.value"
+			class="flex min-w-[51px] shrink-0 justify-end"
+		>
 			<IconButton
 				v-tooltip="formatMessage(messages.newTab)"
 				type="quiet"
@@ -24,7 +32,9 @@
 
 <script setup lang="ts">
 import { ChevronDownIcon, HomeIcon, PlusIcon } from '@modrinth/assets'
-import { computed } from 'vue'
+import { useMutationObserver, useResizeObserver } from '@vueuse/core'
+import type { DockviewGroupPanel } from 'dockview-vue'
+import { computed, ref, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { ButtonMenuOption } from '#ui/components/base/buttons'
 import { IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
@@ -34,8 +44,8 @@ import { currentLocation } from '../../composables/file-tabs'
 import { injectFileBrowserUI } from '../../providers/file-browser-ui'
 import { fileIconFor, infoFrom } from '../../utils'
 
-defineProps<{
-	params?: unknown
+const props = defineProps<{
+	params?: { group?: DockviewGroupPanel; panels?: { id: string }[] }
 }>()
 
 const { formatMessage } = useVIntl()
@@ -58,8 +68,9 @@ const messages = defineMessages({
 const ui = injectFileBrowserUI()
 
 /**
- * Every open tab, so tabs scrolled out of the strip stay reachable. Teleported to the body,
- * unlike dockview's own overflow list, so it isn't clipped by the files viewer.
+ * Every open tab, so tabs scrolled out of the strip stay reachable; only offered while some are.
+ * Teleported to the body, unlike dockview's own overflow list, so it isn't clipped by the files
+ * viewer.
  */
 const tabOptions = computed<ButtonMenuOption[]>(() =>
 	ui.fileTabs.tabs.value.map((tab) => {
@@ -75,7 +86,62 @@ const tabOptions = computed<ButtonMenuOption[]>(() =>
 	}),
 )
 
+/**
+ * Groups of a workbench may hold other panels too; the tab actions only belong to groups showing
+ * file tabs, or nothing at all.
+ */
+const shown = computed(() => {
+	const panels = props.params?.panels ?? []
+	return panels.length === 0 || panels.some((panel) => ui.fileTabs.isTabPanel(panel))
+})
+
+const root = useTemplateRef<HTMLElement>('root')
+
+/**
+ * The strip of tabs these actions sit beside, within the same group's header, and the element
+ * clipping it. Found a frame after mounting, once dockview has placed the actions in the header.
+ */
+const strip = shallowRef<HTMLElement | null>(null)
+const scroller = shallowRef<HTMLElement | null>(null)
+
+watch(
+	root,
+	(element) => {
+		requestAnimationFrame(() => {
+			strip.value =
+				element
+					?.closest('.dv-tabs-and-actions-container')
+					?.querySelector<HTMLElement>('.dv-tabs-container') ?? null
+			scroller.value = strip.value?.closest<HTMLElement>('.dv-scrollable') ?? strip.value
+			measure()
+		})
+	},
+	{ immediate: true, flush: 'post' },
+)
+
+const overflowing = ref(false)
+
+/**
+ * Whether the strip's tabs don't fit: dockview squeezes them until their names are cut short,
+ * then scrolls them out of view. Either way, the tab list then reaches them.
+ */
+function measure() {
+	const clip = scroller.value
+	if (!clip || !strip.value) {
+		overflowing.value = false
+		return
+	}
+	overflowing.value =
+		clip.scrollWidth > clip.clientWidth + 1 ||
+		[...strip.value.querySelectorAll<HTMLElement>('.dv-tab .truncate')].some(
+			(label) => label.scrollWidth > label.clientWidth + 1,
+		)
+}
+
+useResizeObserver(() => [strip.value, scroller.value].filter((element) => element != null), measure)
+useMutationObserver(strip, measure, { childList: true, subtree: true, characterData: true })
+
 function openNewTab() {
-	ui.fileTabs.openTab(infoFrom('/'))
+	ui.fileTabs.openTab(infoFrom('/'), { group: props.params?.group })
 }
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/directory-view.ts b/packages/ui/src/layouts/shared/files-tab/composables/directory-view.ts
new file mode 100644
index 0000000000..c9447fccf6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/directory-view.ts
@@ -0,0 +1,118 @@
+import type { ComputedRef, Ref } from 'vue'
+import { computed, effectScope, watch } from 'vue'
+
+import { isSameInfo, parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
+
+import type { DirectoryTree, FileInfo } from '../providers/file-manager'
+import type { FileItem, FileSortField } from '../types'
+import { useFileSearch } from './file-search'
+import type { FileListingSelection, useFileSelection } from './file-selection'
+import { useFileSorting } from './file-sorting'
+
+/**
+ * What one tab shows of the file system: its location, and when that is a directory, the
+ * listing with its own search, sort and select-all state.
+ */
+export interface DirectoryView extends FileListingSelection {
+	/** The tab's location, which may be a file (whose directory is then listed behind it). */
+	location: ComputedRef<FileInfo>
+	directory: ComputedRef<FileInfo<'directory'>>
+	isFile: ComputedRef<boolean>
+	items: ComputedRef<FileItem[]>
+	/** The listing after search and sorting. */
+	filteredItems: ComputedRef<FileItem[]>
+	loading: ComputedRef<boolean>
+	error: ComputedRef<Error | null>
+	searchQuery: Ref<string>
+	sortField: Ref<FileSortField>
+	sortDesc: Ref<boolean>
+	handleSort: (field: FileSortField) => void
+}
+
+export interface DirectoryViewOptions {
+	location: () => FileInfo
+	directoryTree: DirectoryTree
+	selection: ReturnType<typeof useFileSelection>
+}
+
+function directoryOf(location: FileInfo): FileInfo<'directory'> {
+	return (
+		location.type === 'directory' ? location : parentInfoFrom(location)
+	) as FileInfo<'directory'>
+}
+
+/** A tab's view of the file system. Search and sort reset whenever it moves to another directory. */
+export function useDirectoryView(options: DirectoryViewOptions): DirectoryView {
+	const location = computed(options.location)
+	const directory = computed<FileInfo<'directory'>>((previous) => {
+		const next = directoryOf(location.value)
+		return previous && isSameInfo(previous, next) ? previous : next
+	})
+	const listing = computed(() => options.directoryTree.get(directory.value))
+
+	const items = computed(() => listing.value.data.value)
+	const { searchQuery, searchedItems } = useFileSearch(items)
+	const { sortField, sortDesc, handleSort, sortedItems, resetSort } = useFileSorting(searchedItems)
+
+	watch(directory, () => {
+		searchQuery.value = ''
+		resetSort()
+	})
+
+	return {
+		location,
+		directory,
+		isFile: computed(() => location.value.type === 'file'),
+		items,
+		filteredItems: sortedItems,
+		loading: computed(() => listing.value.isLoading.value),
+		error: computed(() => listing.value.loadError.value ?? null),
+		searchQuery,
+		sortField,
+		sortDesc,
+		handleSort,
+		...options.selection.forListing(sortedItems),
+	}
+}
+
+/**
+ * One {@link DirectoryView} per tab, created on first use and stopped once the tab is gone.
+ * Each runs in its own effect scope, so it outlives the components showing it.
+ */
+export function useDirectoryViews(
+	options: Omit<DirectoryViewOptions, 'location'> & {
+		locationOf: (tabId: string) => FileInfo | undefined
+		tabIds: () => string[]
+	},
+) {
+	const views = new Map<string, { view: DirectoryView; stop: () => void }>()
+
+	function viewFor(tabId: string): DirectoryView {
+		const existing = views.get(tabId)
+		if (existing) return existing.view
+		const scope = effectScope(true)
+		let lastLocation: FileInfo = { name: '', path: '/', type: 'directory' }
+		const view = scope.run(() =>
+			useDirectoryView({
+				...options,
+				location: () => {
+					const location = options.locationOf(tabId)
+					if (location) lastLocation = location
+					return lastLocation
+				},
+			}),
+		)!
+		views.set(tabId, { view, stop: () => scope.stop() })
+		return view
+	}
+
+	watch(options.tabIds, (ids) => {
+		for (const [tabId, entry] of views) {
+			if (ids.includes(tabId)) continue
+			entry.stop()
+			views.delete(tabId)
+		}
+	})
+
+	return { viewFor }
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/entry-menu.ts b/packages/ui/src/layouts/shared/files-tab/composables/entry-menu.ts
index ccd0299de0..45c0e95224 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/entry-menu.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/entry-menu.ts
@@ -16,7 +16,7 @@ import type { ButtonMenuLeafOption, ButtonMenuOption } from '#ui/components/base
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { commonMessages } from '#ui/utils/common-messages'
-import { canOpenInFileEditor, getFileExtension } from '#ui/utils/file-extensions'
+import { getFileExtension } from '#ui/utils/file-extensions'
 
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import type { FileInfo } from '../providers/file-manager'
@@ -79,7 +79,9 @@ export function useEntryMenu() {
 			: undefined
 		const write = { disabled: writeDisabled, tooltip: writeTooltip }
 
-		const canOpenInTab = ui.advancedView.value && (isDirectory || canOpenInFileEditor(info.name))
+		const canOpenInTab = ui.advancedView.value && ui.canOpenInTab(info)
+		/** Write actions are left out entirely when nothing can be written. */
+		const writable = !ui.readOnly
 		const canExtract =
 			info.type === 'file' && getFileExtension(info.name) === 'zip' && !!ui.extractFile
 		const canZip = isDirectory && !!ui.zipFolder
@@ -92,6 +94,7 @@ export function useEntryMenu() {
 				id: 'upload-create',
 				label: formatMessage(messages.newOrUpload),
 				icon: FileIcon,
+				shown: writable,
 				options: newEntryOptions.value as ButtonMenuLeafOption[],
 			},
 			{
@@ -134,20 +137,20 @@ export function useEntryMenu() {
 				id: 'extract',
 				label: formatMessage(commonMessages.extractButton),
 				icon: PackageOpenIcon,
-				shown: canExtract,
+				shown: canExtract && writable,
 				...write,
 				action: () => ui.handleExtractItem(info),
 			},
-			{ type: 'divider', shown: canExtract },
+			{ type: 'divider', shown: canExtract && writable },
 			{
 				id: 'zip',
 				label: formatMessage(messages.createZip),
 				icon: FolderArchiveIcon,
-				shown: canZip,
+				shown: canZip && writable,
 				...write,
 				action: () => ui.zipFolder?.(info),
 			},
-			{ type: 'divider', shown: canZip },
+			{ type: 'divider', shown: canZip && writable },
 			...customActions.map(
 				(action): ButtonMenuOption => ({
 					id: `custom-${action.id}`,
@@ -163,7 +166,7 @@ export function useEntryMenu() {
 				id: 'rename',
 				label: formatMessage(commonMessages.renameButton),
 				icon: EditIcon,
-				shown: !isRoot,
+				shown: !isRoot && writable,
 				...write,
 				action: () => ui.showRenameModal(info),
 			},
@@ -171,7 +174,7 @@ export function useEntryMenu() {
 				id: 'move',
 				label: formatMessage(commonMessages.moveButton),
 				icon: RightArrowIcon,
-				shown: !isRoot,
+				shown: !isRoot && writable,
 				...write,
 				action: () => ui.showMoveModal(info),
 			},
@@ -186,7 +189,7 @@ export function useEntryMenu() {
 				id: 'delete',
 				label: formatMessage(commonMessages.deleteLabel),
 				icon: TrashIcon,
-				shown: !isRoot,
+				shown: !isRoot && writable,
 				...write,
 				action: () => ui.showDeleteModal(info),
 				tone: 'red',
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-documents.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-documents.ts
new file mode 100644
index 0000000000..7ed764e513
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-documents.ts
@@ -0,0 +1,52 @@
+import { HomeIcon } from '@modrinth/assets'
+import { defineComponent, h } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import type { WorkbenchDocuments } from '#ui/layouts/shared/workbench/types'
+
+import FileEmptyWorkspace from '../components/FileEmptyWorkspace.vue'
+import FileTab from '../components/tabs/FileTab.vue'
+import FileTabPanel from '../components/tabs/FileTabPanel.vue'
+import FileTabsActions from '../components/tabs/FileTabsActions.vue'
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import { infoFrom } from '../utils'
+import { FILE_TAB_COMPONENT, FILE_TAB_PANEL_COMPONENT } from './file-tabs'
+
+const messages = defineMessages({
+	newTab: { id: 'files.tabs.new-tab', defaultMessage: 'New tab' },
+})
+
+/** Shown in the center once every tab is closed. */
+const EmptyWorkspace = defineComponent({
+	name: 'FileWorkbenchEmpty',
+	inheritAttrs: false,
+	setup: () => () =>
+		h('div', { class: 'h-full overflow-auto bg-surface-2' }, [h(FileEmptyWorkspace)]),
+})
+
+/**
+ * The files layout's tabs, as documents any workbench within the files layout (its `workspace`
+ * slot, with `workbench` set on it) can host in its docks, next to its own panels.
+ */
+export function useFileDocuments(): WorkbenchDocuments {
+	const ui = injectFileBrowserUI()
+	const { formatMessage } = useVIntl()
+
+	return {
+		components: { [FILE_TAB_PANEL_COMPONENT]: FileTabPanel },
+		tabComponents: { [FILE_TAB_COMPONENT]: FileTab },
+		headerActions: FileTabsActions,
+		addMenuShown: () => ui.newTabButton.value,
+		create: {
+			label: () => formatMessage(messages.newTab),
+			icon: HomeIcon,
+			open: (group) => ui.fileTabs.openTab(infoFrom('/'), { group }),
+			shown: () => ui.showNewTabButton.value,
+		},
+		watermark: EmptyWorkspace,
+		confirmMove: (id) => ui.fileTabs.confirmMove(id),
+		attach: (api, host) => ui.fileTabs.attach(api, { primary: host === 'center' }),
+		detach: (api) => ui.fileTabs.detach(api),
+		restore: () => ui.fileTabs.syncPanels(),
+	}
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
index 1b655f4dfe..7efcaac49f 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
@@ -1,14 +1,20 @@
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import { computed, ref } from 'vue'
 
 import type { FileItem } from '../types'
 
+export interface FileListingSelection {
+	allSelected: ComputedRef<boolean>
+	someSelected: ComputedRef<boolean>
+	toggleSelectAll: () => void
+}
+
 /**
  * Selection of file entries, keyed by path. Entries can come from any directory (e.g. the sidebar
- * tree), so the items themselves are kept rather than looked up in the current listing.
- * `allSelected` / `someSelected` / `toggleSelectAll` refer to the given listing `items`.
+ * tree, or several tabs' listings), so the items themselves are kept rather than looked up in a
+ * listing. `forListing` gives a listing its select-all state over the entries it shows.
  */
-export function useFileSelection(items: Ref<FileItem[]>) {
+export function useFileSelection() {
 	const selectedItems = ref(new Map<string, FileItem>())
 
 	function toggleItemSelection(item: FileItem) {
@@ -21,45 +27,36 @@ export function useFileSelection(items: Ref<FileItem[]>) {
 		selectedItems.value = next
 	}
 
-	function selectAll() {
-		const next = new Map(selectedItems.value)
-		for (const item of items.value) next.set(item.path, item)
-		selectedItems.value = next
-	}
-
 	function deselectAll() {
 		selectedItems.value = new Map()
 	}
 
-	function deselectListed() {
-		const next = new Map(selectedItems.value)
-		for (const item of items.value) next.delete(item.path)
-		selectedItems.value = next
-	}
-
-	function toggleSelectAll() {
-		if (allSelected.value) {
-			deselectListed()
-		} else {
-			selectAll()
+	function forListing(items: Ref<FileItem[]>): FileListingSelection {
+		const allSelected = computed(
+			() =>
+				items.value.length > 0 && items.value.every((item) => selectedItems.value.has(item.path)),
+		)
+		const someSelected = computed(
+			() => !allSelected.value && items.value.some((item) => selectedItems.value.has(item.path)),
+		)
+
+		function toggleSelectAll() {
+			const next = new Map(selectedItems.value)
+			if (allSelected.value) {
+				for (const item of items.value) next.delete(item.path)
+			} else {
+				for (const item of items.value) next.set(item.path, item)
+			}
+			selectedItems.value = next
 		}
-	}
-
-	const allSelected = computed(
-		() => items.value.length > 0 && items.value.every((item) => selectedItems.value.has(item.path)),
-	)
 
-	const someSelected = computed(
-		() => !allSelected.value && items.value.some((item) => selectedItems.value.has(item.path)),
-	)
+		return { allSelected, someSelected, toggleSelectAll }
+	}
 
 	return {
 		selectedItems,
 		toggleItemSelection,
-		selectAll,
 		deselectAll,
-		toggleSelectAll,
-		allSelected,
-		someSelected,
+		forListing,
 	}
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
index 979ae3e572..8bfb9dbf07 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
@@ -1,6 +1,12 @@
-import type { DockviewApi, DockviewReadyEvent, IDisposable } from 'dockview-vue'
+import type {
+	DockviewApi,
+	DockviewGroupPanel,
+	DockviewIDisposable,
+	DockviewReadyEvent,
+	IDockviewPanel,
+} from 'dockview-vue'
 import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
-import { computed, ref, shallowReactive, shallowRef, toValue, watch } from 'vue'
+import { computed, nextTick, ref, shallowReactive, toValue, watch } from 'vue'
 
 import {
 	infoFrom,
@@ -61,6 +67,25 @@ export interface FileTabsOptions {
 	workspaceId: MaybeRefOrGetter<string | null>
 	/** Whether the tab strip is shown, further tabs can be opened and every tab can be closed. */
 	enabled: MaybeRefOrGetter<boolean>
+	/**
+	 * `managed`: the tabs own a single dockview, kept to one strip of tabs and rebuilt from the
+	 * tabs whenever the workspace changes. `shared`: the tabs live in dockviews laid out by a host
+	 * (e.g. a workbench), which may split them or move them between its dockviews; the tabs only
+	 * add the panels that are missing and drop ones for tabs that no longer exist.
+	 */
+	mode?: 'managed' | 'shared'
+	/**
+	 * Whether tabs can show folders, listing their contents. Without (e.g. when folders are browsed
+	 * in the tree instead), tabs only show files and any folder opened goes to `revealDirectory`.
+	 */
+	directories?: MaybeRefOrGetter<boolean>
+	/** Shows a folder that was opened while tabs don't show folders, e.g. in the tree. */
+	revealDirectory?: (location: FileInfo) => void
+}
+
+export interface OpenTabOptions {
+	/** The group to open the tab in, rather than the focused one. */
+	group?: DockviewGroupPanel
 }
 
 export interface FileTabs {
@@ -78,7 +103,15 @@ export interface FileTabs {
 	navigate: (location: FileInfo) => Promise<void>
 	back: () => Promise<void>
 	forward: () => Promise<void>
-	openTab: (location: FileInfo) => void
+	/** Navigates the given tab, focusing it first. */
+	navigateIn: (tabId: string, location: FileInfo) => Promise<void>
+	/** Moves the given tab through its history, focusing it first. */
+	goIn: (tabId: string, delta: number) => Promise<void>
+	canGoBackIn: (tabId: string) => boolean
+	canGoForwardIn: (tabId: string) => boolean
+	openTab: (location: FileInfo, options?: OpenTabOptions) => void
+	/** Brings forward a tab already on the location, or else opens one for it. */
+	revealTab: (location: FileInfo) => void
 	activateTab: (id: string) => void
 	closeTab: (id: string) => Promise<void>
 	closeOtherTabs: (id: string) => Promise<void>
@@ -97,6 +130,19 @@ export interface FileTabs {
 	forget: (file: FileInfo) => void
 	registerEditor: (tabId: string, bridge: FileEditorBridge) => void
 	unregisterEditor: (tabId: string, bridge: FileEditorBridge) => void
+	/** Whether a dockview panel is one of the tabs. */
+	isTabPanel: (panel: Pick<IDockviewPanel, 'id'>) => boolean
+	/**
+	 * Asks about the tab's unsaved changes before it moves to another dockview, which remounts
+	 * its editor. Resolves `true` once it is safe to move.
+	 */
+	confirmMove: (tabId: string) => Promise<boolean>
+	/** Hosts the tabs in a dockview; the primary one is where new tabs go when none is focused. */
+	attach: (dockview: DockviewApi, options?: { primary?: boolean }) => void
+	detach: (dockview: DockviewApi) => void
+	/** Adds the panels of tabs no dockview holds (e.g. after the host reset its layout). */
+	syncPanels: () => void
+	/** Attaches the managed dockview. */
 	onReady: (event: DockviewReadyEvent) => void
 	onDispose: () => void
 }
@@ -176,6 +222,7 @@ function isRootDirectory(location: FileInfo) {
  */
 export function useFileTabs(options: FileTabsOptions): FileTabs {
 	const { ctx } = options
+	const managed = (options.mode ?? 'managed') === 'managed'
 
 	const contextLocation = computed<FileInfo>(() => ctx.currentFile.value)
 
@@ -212,8 +259,11 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		[...editors.values()].some((editor) => editor.hasUnsavedChanges.value),
 	)
 
-	const api = shallowRef<DockviewApi | null>(null)
-	let disposables: IDisposable[] = []
+	/** The dockviews hosting the tabs, with their event subscriptions. */
+	const docks = new Map<DockviewApi, DockviewIDisposable[]>()
+	let primaryDock: DockviewApi | null = null
+	/** The dockview the active tab was last focused in, where new tabs open. */
+	let focusedDock: DockviewApi | null = null
 	/** Set while panels are being (re)built, so dockview's events don't feed back into the tabs. */
 	let renderingPanels = false
 
@@ -221,6 +271,30 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		return tabs.value.find((tab) => tab.id === id)
 	}
 
+	function isTabPanel(panel: Pick<IDockviewPanel, 'id'>) {
+		return getTab(panel.id) != null
+	}
+
+	/** The tab's panel and the dockview holding it. */
+	function findPanel(id: string) {
+		for (const dock of docks.keys()) {
+			const panel = dock.getPanel(id)
+			if (panel) return { dock, panel }
+		}
+		return null
+	}
+
+	function dockOfGroup(group: DockviewGroupPanel) {
+		for (const dock of docks.keys()) if (dock.getGroup(group.id) === group) return dock
+		return null
+	}
+
+	function targetDock() {
+		if (focusedDock && docks.has(focusedDock)) return focusedDock
+		if (primaryDock && docks.has(primaryDock)) return primaryDock
+		return docks.keys().next().value ?? null
+	}
+
 	function pushLocation(tab: FileTab, location: FileInfo) {
 		if (isSameInfo(currentLocation(tab), location)) return
 		tab.history.splice(tab.index + 1)
@@ -257,6 +331,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 				clearTimeout(pendingTimeout)
 				return
 			}
+			if (divertDirectory(location)) return
 			if (activeTab.value) {
 				pushLocation(activeTab.value, location)
 			} else {
@@ -266,11 +341,34 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		{ flush: 'post' },
 	)
 
+	function directoriesShown() {
+		return toValue(options.directories) ?? true
+	}
+
+	/** Hands a folder to `revealDirectory` while tabs don't show folders, `true` if it did. */
+	function divertDirectory(location: FileInfo) {
+		if (location.type !== 'directory' || directoriesShown()) return false
+		options.revealDirectory?.(location)
+		return true
+	}
+
+	watch(directoriesShown, (shown) => {
+		if (shown) return
+		for (const tab of [...tabs.value]) {
+			if (currentLocation(tab).type === 'directory') removeTab(tab)
+		}
+	})
+
 	/**
 	 * Swaps in a workspace's persisted tabs, or a single tab at the context's location when there
 	 * are none. A location the host was opened at (e.g. a deep link) wins over the restored one.
 	 */
 	function restoreWorkspace(state: FileWorkspaceState | null) {
+		if (!state && !directoriesShown() && contextLocation.value.type === 'directory') {
+			tabs.value = []
+			activeTabId.value = ''
+			return
+		}
 		if (!state) {
 			const tab = createTab(contextLocation.value)
 			tabs.value = [tab]
@@ -278,12 +376,16 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 			return
 		}
 
-		tabs.value = state.tabs
-		activeTabId.value = state.activeTabId
+		tabs.value = directoriesShown()
+			? state.tabs
+			: state.tabs.filter((tab) => currentLocation(tab).type !== 'directory')
+		activeTabId.value = tabs.value.some((tab) => tab.id === state.activeTabId)
+			? state.activeTabId
+			: (tabs.value[0]?.id ?? '')
 
 		const location = contextLocation.value
 		const tab = activeTab.value
-		if (!isRootDirectory(location)) {
+		if (!isRootDirectory(location) && !divertDirectory(location)) {
 			if (tab) {
 				pushLocation(tab, location)
 			} else {
@@ -302,7 +404,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		() => toValue(options.workspaceId),
 		(workspaceId) => {
 			restoreWorkspace(loadWorkspace(workspaceId))
-			if (api.value) renderPanels(api.value)
+			renderPanels()
 		},
 	)
 
@@ -319,6 +421,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 	}
 
 	async function navigate(location: FileInfo) {
+		if (divertDirectory(location)) return
 		const tab = activeTab.value
 		if (!tab) {
 			openTab(location)
@@ -328,6 +431,8 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 			if (!(await confirmLeave(tab))) return
 			pushLocation(tab, location)
 		}
+		const panel = findPanel(tab.id)?.panel
+		if (panel && !panel.api.isActive) panel.api.setActive()
 		applyToContext(location)
 	}
 
@@ -336,52 +441,112 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		if (!tab) return
 		const target = tab.index + delta
 		if (target < 0 || target >= tab.history.length) return
+		if (divertDirectory(tab.history[target])) return
 		if (!(await confirmLeave(tab))) return
 		tab.index = target
 		applyToContext(currentLocation(tab))
 	}
 
+	async function navigateIn(tabId: string, location: FileInfo) {
+		activateTab(tabId)
+		if (activeTabId.value === tabId) await navigate(location)
+	}
+
+	async function goIn(tabId: string, delta: number) {
+		activateTab(tabId)
+		if (activeTabId.value === tabId) await go(delta)
+	}
+
+	function canGoBackIn(tabId: string) {
+		return (getTab(tabId)?.index ?? 0) > 0
+	}
+
+	function canGoForwardIn(tabId: string) {
+		const tab = getTab(tabId)
+		return !!tab && tab.index < tab.history.length - 1
+	}
+
 	function applyHeaderVisibility() {
+		if (!managed) return
 		const hidden = !toValue(options.enabled)
-		for (const group of api.value?.groups ?? []) group.header.hidden = hidden
+		for (const group of primaryDock?.groups ?? []) group.header.hidden = hidden
 	}
 
 	watch(() => toValue(options.enabled), applyHeaderVisibility)
 
 	/**
-	 * Adds the tab's panel to the single tab group. Without an explicit group, panels added while
-	 * no group is active (e.g. `inactive` ones) each get a new group, splitting the view.
+	 * Adds the tab's panel to `group`, else the focused dockview's active (or first) group.
+	 * Without an explicit group, panels added while no group is active (e.g. `inactive` ones)
+	 * each get a new group, splitting the view.
 	 */
-	function addPanel(tab: FileTab, inactive = false) {
-		const group = api.value?.groups[0]
-		api.value?.addPanel<FileTabPanelParams>({
+	function addPanel(tab: FileTab, inactive = false, group?: DockviewGroupPanel) {
+		const dock = group ? dockOfGroup(group) : targetDock()
+		if (!dock) return
+		const reference = group ?? dock.activeGroup ?? dock.groups[0]
+		dock.addPanel<FileTabPanelParams>({
 			id: tab.id,
 			component: FILE_TAB_PANEL_COMPONENT,
 			tabComponent: FILE_TAB_COMPONENT,
 			title: currentLocation(tab).path,
 			params: { tabId: tab.id },
-			position: group ? { referenceGroup: group, direction: 'within' } : undefined,
+			position: reference ? { referenceGroup: reference, direction: 'within' } : undefined,
 			inactive,
 		})
 		applyHeaderVisibility()
 	}
 
-	function renderPanels(dockview: DockviewApi) {
+	/**
+	 * Managed: rebuilds the dockview from the tabs. Shared: drops panels of tabs that no longer
+	 * exist (or that another dockview already holds) and adds the missing ones.
+	 */
+	function renderPanels() {
 		renderingPanels = true
 		try {
-			dockview.clear()
-			for (const tab of tabs.value) addPanel(tab, true)
-			if (tabs.value.length === 0) dockview.addGroup()
-			applyHeaderVisibility()
-			dockview.getPanel(activeTabId.value)?.api.setActive()
+			if (managed) {
+				if (!primaryDock) return
+				primaryDock.clear()
+				for (const tab of tabs.value) addPanel(tab, true)
+				if (tabs.value.length === 0) primaryDock.addGroup()
+				applyHeaderVisibility()
+			} else {
+				const seen = new Set<string>()
+				for (const dock of docks.keys()) {
+					for (const panel of [...dock.panels]) {
+						if (panel.api.component !== FILE_TAB_PANEL_COMPONENT) continue
+						if (!getTab(panel.id) || seen.has(panel.id)) dock.removePanel(panel)
+						else seen.add(panel.id)
+					}
+				}
+				for (const tab of tabs.value) if (!seen.has(tab.id)) addPanel(tab, true)
+			}
+			const active = findPanel(activeTabId.value)?.panel
+			/** In a shared dockview, the active tab doesn't come in front of the host's own panels. */
+			const front = active?.group.activePanel
+			if (active && (managed || !front || front.api.component === FILE_TAB_PANEL_COMPONENT)) {
+				active.api.setActive()
+			}
 		} finally {
 			renderingPanels = false
 		}
 	}
 
+	let renderScheduled = false
+
+	/** Shared dockviews come up one by one, so the missing panels are added once all have. */
+	function scheduleRender() {
+		if (renderScheduled) return
+		renderScheduled = true
+		nextTick(() => {
+			renderScheduled = false
+			renderPanels()
+		})
+	}
+
 	/** Keeps `tabs` in the order the user dragged them into, so it is restored that way. */
-	function syncTabOrder(dockview: DockviewApi) {
-		const order = dockview.groups.flatMap((group) => group.panels.map((panel) => panel.id))
+	function syncTabOrder() {
+		const order = [...docks.keys()].flatMap((dock) =>
+			dock.groups.flatMap((group) => group.panels.map((panel) => panel.id)),
+		)
 		const position = (tab: FileTab) => {
 			const index = order.indexOf(tab.id)
 			return index === -1 ? Number.MAX_SAFE_INTEGER : index
@@ -392,21 +557,30 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 
 	function activateTab(id: string) {
 		if (!getTab(id)) return
-		const panel = api.value?.getPanel(id)
-		if (panel && !panel.api.isActive) panel.api.setActive()
+		const found = findPanel(id)
+		if (found) focusedDock = found.dock
+		if (found && !found.panel.api.isActive) found.panel.api.setActive()
 		if (activeTabId.value === id) return
 		activeTabId.value = id
 		applyToContext(activeLocation.value)
 	}
 
-	function openTab(location: FileInfo) {
+	/** Brings forward a tab already on the location, or else opens one for it. */
+	function revealTab(location: FileInfo) {
+		const existing = tabs.value.find((tab) => isSameInfo(currentLocation(tab), location))
+		if (existing) activateTab(existing.id)
+		else openTab(location)
+	}
+
+	function openTab(location: FileInfo, openOptions?: OpenTabOptions) {
+		if (divertDirectory(location)) return
 		if (!toValue(options.enabled)) {
 			navigate(location)
 			return
 		}
 		const tab = createTab(location)
 		tabs.value.push(tab)
-		addPanel(tab)
+		addPanel(tab, false, openOptions?.group)
 		activateTab(tab.id)
 	}
 
@@ -417,7 +591,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 
 		tabs.value.splice(index, 1)
 		editors.delete(tab.id)
-		api.value?.getPanel(tab.id)?.api.close()
+		findPanel(tab.id)?.panel.api.close()
 		recentlyClosed.value = [tab, ...recentlyClosed.value].slice(0, MAX_RECENTLY_CLOSED)
 
 		if (activeTabId.value !== tab.id) return
@@ -529,29 +703,60 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		if (editors.get(tabId) === bridge) editors.delete(tabId)
 	}
 
-	function onReady({ api: dockview }: DockviewReadyEvent) {
-		onDispose()
-		api.value = dockview
+	async function confirmMove(tabId: string) {
+		const editor = editors.get(tabId)
+		return editor ? options.confirmDiscard([editor]) : true
+	}
 
-		renderPanels(dockview)
+	function attach(dockview: DockviewApi, attachOptions?: { primary?: boolean }) {
+		detach(dockview)
+		if (attachOptions?.primary) primaryDock = dockview
 
-		disposables = [
+		const disposables: DockviewIDisposable[] = [
 			dockview.onDidActivePanelChange(({ panel }) => {
-				if (panel && !renderingPanels) activateTab(panel.id)
+				if (!panel || renderingPanels || !getTab(panel.id)) return
+				focusedDock = dockview
+				activateTab(panel.id)
 			}),
 			dockview.onDidMovePanel(() => {
-				if (!renderingPanels) syncTabOrder(dockview)
-			}),
-			dockview.onWillShowOverlay((event) => {
-				if (event.kind === 'content' || event.kind === 'edge') event.preventDefault()
+				if (!renderingPanels) syncTabOrder()
 			}),
 		]
+		if (managed) {
+			disposables.push(
+				dockview.onWillShowOverlay((event) => {
+					if (event.kind === 'content' || event.kind === 'edge') event.preventDefault()
+				}),
+			)
+		}
+		docks.set(dockview, disposables)
+
+		if (managed) renderPanels()
+		else scheduleRender()
 	}
 
-	function onDispose() {
+	/** Re-adds missing panels where new tabs go by default, rather than the last focused dockview. */
+	function syncPanels() {
+		focusedDock = null
+		if (managed) renderPanels()
+		else scheduleRender()
+	}
+
+	function detach(dockview: DockviewApi) {
+		const disposables = docks.get(dockview)
+		if (!disposables) return
 		for (const disposable of disposables) disposable.dispose()
-		disposables = []
-		api.value = null
+		docks.delete(dockview)
+		if (primaryDock === dockview) primaryDock = null
+		if (focusedDock === dockview) focusedDock = null
+	}
+
+	function onReady({ api: dockview }: DockviewReadyEvent) {
+		attach(dockview, { primary: true })
+	}
+
+	function onDispose() {
+		if (primaryDock) detach(primaryDock)
 	}
 
 	return {
@@ -568,7 +773,12 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		navigate,
 		back: () => go(-1),
 		forward: () => go(1),
+		navigateIn,
+		goIn,
+		canGoBackIn,
+		canGoForwardIn,
 		openTab,
+		revealTab,
 		activateTab,
 		closeTab,
 		closeOtherTabs,
@@ -582,6 +792,11 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		forget,
 		registerEditor,
 		unregisterEditor,
+		isTabPanel,
+		confirmMove,
+		attach,
+		detach,
+		syncPanels,
 		onReady,
 		onDispose,
 	}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/sidebar-toggle.ts b/packages/ui/src/layouts/shared/files-tab/composables/sidebar-toggle.ts
new file mode 100644
index 0000000000..9c99b158d7
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/sidebar-toggle.ts
@@ -0,0 +1,19 @@
+import { computed } from 'vue'
+
+import { injectWorkbench } from '#ui/layouts/shared/workbench/providers/workbench'
+
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import type { FilesSidebarToggleLocation } from '../settings'
+
+/**
+ * Where the folder tree's button shows, or `null` within a workbench, which shows and hides the
+ * tree as one of its panels from its own layout menu and tab bar.
+ */
+export function useSidebarToggleLocation() {
+	const ui = injectFileBrowserUI()
+	const workbench = injectWorkbench(null)
+
+	return computed<FilesSidebarToggleLocation | null>(() =>
+		workbench ? null : ui.sidebarToggleLocation.value,
+	)
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/index.ts b/packages/ui/src/layouts/shared/files-tab/index.ts
index 8ae49ac16b..74a76aaf18 100644
--- a/packages/ui/src/layouts/shared/files-tab/index.ts
+++ b/packages/ui/src/layouts/shared/files-tab/index.ts
@@ -1,4 +1,7 @@
+export { default as FileWorkbench } from './components/FileWorkbench.vue'
+export { useFileDocuments } from './composables/file-documents'
 export { default as FilePageLayout } from './layout.vue'
 export * from './providers'
+export * from './settings'
 export * from './types'
 export * from './utils'
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 3e1cbf86e5..c3c2fcfbc5 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -25,8 +25,10 @@
 	<FileDeleteItemModal ref="deleteItemModal" :item="selectedItem" @delete="handleDeleteItem" />
 	<ContextMenu ref="contextMenuRef" :label="formatMessage(commonMessages.actionsLabel)" />
 
-	<div v-if="hasLoadedOnce" ref="fileViewer">
+	<div v-if="hasLoadedOnce" ref="fileViewer" :class="{ 'h-full min-h-0': $slots.workspace }">
+		<slot v-if="$slots.workspace" name="workspace" />
 		<div
+			v-else
 			class="grid items-start"
 			:class="{ 'cursor-col-resize select-none': isResizingSidebar }"
 			:style="{
@@ -61,11 +63,11 @@
 					/>
 				</div>
 			</template>
-			<div ref="mainColumn" class="min-w-0">
+			<div class="min-w-0">
 				<FileBrowserPanel :small-mode="smallMode" />
 			</div>
 		</div>
-		<template v-if="smallMode && advancedView">
+		<template v-if="smallMode && advancedView && !props.sidebar">
 			<NewModal
 				ref="sidebarModal"
 				:on-hide="() => (sidebarModalOpen = false)"
@@ -154,14 +156,22 @@
 <script setup lang="ts">
 import { FolderArchiveIcon, HistoryIcon, SaveIcon, TrashIcon } from '@modrinth/assets'
 import { type MaybeElement, useLocalStorage, useResizeObserver } from '@vueuse/core'
-import type { Component } from 'vue'
-import { computed, onMounted, onUnmounted, ref, shallowRef, toValue, watch } from 'vue'
+import {
+	computed,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	ref,
+	shallowReactive,
+	toValue,
+	watch,
+} from 'vue'
 
 import { type ButtonMenuOption, NewModal } from '#ui/components'
 import { Button, ContextMenu } from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { useFileTabs } from '#ui/layouts/shared/files-tab/composables/file-tabs.ts'
+import { currentLocation, useFileTabs } from '#ui/layouts/shared/files-tab/composables/file-tabs.ts'
 import {
 	childPath,
 	infoFrom,
@@ -174,7 +184,7 @@ import { injectFilePicker } from '#ui/providers/file-picker'
 import { injectPageContext } from '#ui/providers/page-context'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { commonMessages } from '#ui/utils/common-messages'
-import { canOpenInFileEditor } from '#ui/utils/file-extensions'
+import { canOpenInFileEditor, getEditorLanguage } from '#ui/utils/file-extensions'
 
 import FileBrowserPanel from './components/FileBrowserPanel.vue'
 import FileSideBar from './components/FileSideBar.vue'
@@ -186,13 +196,25 @@ import FileRenameItemModal from './components/modals/FileRenameItemModal.vue'
 import FileUnsavedChangesModal from './components/modals/FileUnsavedChangesModal.vue'
 import FileUploadConflictModal from './components/modals/FileUploadConflictModal.vue'
 import FileUploadZipUrlModal from './components/modals/FileUploadZipUrlModal.vue'
-import { useFileSearch } from './composables/file-search'
+import { useDirectoryView, useDirectoryViews } from './composables/directory-view'
 import { useFileSelection } from './composables/file-selection'
-import { useFileSorting } from './composables/file-sorting'
 import { useFileUndoRedo } from './composables/file-undo-redo'
 import type { FileEditorBridge } from './providers/file-browser-ui'
 import { provideFileBrowserUI } from './providers/file-browser-ui'
-import { type FileInfo, injectFileManager } from './providers/file-manager'
+import {
+	type FileInfo,
+	type FileInterpretation,
+	type FileManagerContext,
+	injectFileManager,
+} from './providers/file-manager'
+import {
+	type FilesBrowsing,
+	filesTabSettings,
+	jsonIndentOf,
+	provideFilesWorkspaceSettings,
+	useFilesTabSettings,
+	useFilesWorkspaceSettings,
+} from './settings'
 import type { FileItem } from './types'
 
 const { formatMessage } = useVIntl()
@@ -258,8 +280,30 @@ const props = withDefaults(
 		 * `loadedEntries` cover the whole file system can turn it off.
 		 */
 		searchLoadedOnlyNotice?: boolean
+		/** Uses the files tab advanced view (sidebar tree, tabs and column picker) regardless of its feature flag. */
+		advancedView?: boolean
+		/**
+		 * Hands the sidebar's open state to the host, for hosts that place the sidebar themselves
+		 * through the `workspace` slot.
+		 */
+		sidebar?: { isOpen: () => boolean; setOpen: (open: boolean) => void }
+		/** Smaller navigation whose breadcrumbs wrap instead of scrolling, for tighter spaces. */
+		compactNavigation?: boolean
+		/**
+		 * The tabs are hosted by a workbench placed through the `workspace` slot (see
+		 * `FileWorkbench`), where each tab shows its own navigation and listing and can be split
+		 * or moved around. Implies the advanced view.
+		 */
+		workbench?: boolean
+		/**
+		 * Names this place files are browsed, which keeps settings of its own (e.g. how folders are
+		 * browsed) apart from other places'.
+		 */
+		workspace?: string
+		/** How folders are browsed here until the user picks otherwise. */
+		defaultBrowsing?: FilesBrowsing
 	}>(),
-	{ searchLoadedOnlyNotice: true },
+	{ searchLoadedOnlyNotice: true, workspace: 'files', defaultBrowsing: 'listing' },
 )
 
 const { addNotification } = injectNotificationManager()
@@ -267,15 +311,53 @@ const ctx = injectFileManager()
 const filePicker = injectFilePicker(null)
 const pageContext = injectPageContext(null)
 
-const reworkEnabled = computed(() => pageContext?.featureFlags?.filesTabRework?.value ?? false)
+const canUseAdvancedView = computed(
+	() =>
+		props.workbench ||
+		props.advancedView ||
+		(pageContext?.featureFlags?.filesTabRework?.value ?? false),
+)
 
 const advancedViewSetting = useLocalStorage('files-advanced-view', true, { initOnMounted: true })
-const coloredIconsSetting = useLocalStorage('files-colored-icons', reworkEnabled.value, {
+const coloredIconsSetting = useLocalStorage('files-colored-icons', canUseAdvancedView.value, {
 	initOnMounted: true,
+	writeDefaults: false,
 })
 /** The sidebar tree, tabs and column picker; behind the rework flag, then a user preference. */
-const advancedView = computed(() => reworkEnabled.value && advancedViewSetting.value)
+const advancedView = computed(
+	() => props.workbench || (canUseAdvancedView.value && advancedViewSetting.value),
+)
 const coloredIcons = computed(() => coloredIconsSetting.value)
+const compactFoldersSetting = useLocalStorage('files-compact-folders', false, {
+	initOnMounted: true,
+})
+const filesSettings = useFilesTabSettings()
+
+/** The content variant each tab picked for each file it showed, by tab and path. */
+const contentVariantChoices = shallowReactive(new Map<string, string>())
+/** How each tab shows each file it showed, by tab and path. */
+const interpretationChoices = shallowReactive(new Map<string, FileInterpretation>())
+
+/**
+ * JSON files that can't be edited open formatted, as nothing they show then gets saved. Editable
+ * ones open as they're stored, so saving them doesn't reformat them.
+ */
+function defaultInterpretation(file: FileInfo<'file'>): FileInterpretation {
+	if (!filesSettings.get(filesTabSettings.formatJson)) return 'auto'
+	if (!(ctx.readOnly || (ctx.isReadOnly?.(file) ?? false))) return 'auto'
+	const language = ctx.editorLanguage?.(file) ?? getEditorLanguage(file.name)
+	return language === 'json' ? 'json' : 'auto'
+}
+
+function contentVariantOf(tabId: string, file: FileInfo<'file'>) {
+	const variants = ctx.contentVariants?.(file)
+	if (!variants) return null
+	const picked = contentVariantChoices.get(`${tabId}:${file.path}`)
+	const selected = variants.options.some((option) => option.id === picked)
+		? picked!
+		: variants.default
+	return { ...variants, selected }
+}
 
 /** Switching to the simple view drops the extra tabs, so their unsaved changes are confirmed first. */
 async function setAdvancedView(value: boolean) {
@@ -283,16 +365,8 @@ async function setAdvancedView(value: boolean) {
 	advancedViewSetting.value = value
 }
 
-const editorComponent = shallowRef<Component | null>(null)
-import('vue3-ace-editor').then(async (mod) => {
-	await Promise.all([import('#ui/utils/ace-theme'), import('#ui/utils/ace-mode-log.ts')])
-	editorComponent.value = mod.VAceEditor
-})
-
 const baseId = `files-${Math.random().toString(36).slice(2, 9)}`
 
-const items = computed(() => ctx.directoryTree.get(ctx.currentDirectory.value).data.value)
-
 /**
  * Only the very first load hides the viewer. Unmounting it on later navigations would tear down
  * the tabs' dockview, and with it every other tab's open editor.
@@ -325,24 +399,8 @@ const busyTooltip = computed(() =>
 
 const activeLocation = computed(() => fileTabs.activeLocation.value)
 
-// Composables
-const { searchQuery, searchedItems } = useFileSearch(items)
-const {
-	sortField,
-	sortDesc,
-	handleSort,
-	sortedItems: filteredItems,
-	resetSort,
-} = useFileSorting(searchedItems)
-
-const {
-	selectedItems,
-	toggleItemSelection,
-	deselectAll,
-	toggleSelectAll,
-	allSelected,
-	someSelected,
-} = useFileSelection(filteredItems)
+const selection = useFileSelection()
+const { selectedItems, toggleItemSelection, deselectAll } = selection
 
 const selectionReadOnly = computed(() =>
 	[...selectedItems.value.values()].some((file) => ctx.isReadOnly?.(file)),
@@ -361,13 +419,56 @@ const { recordOperation, onKeydown } = useFileUndoRedo(
 	(title, text, type) => addNotification({ title, text, type }),
 )
 
+const workspaceSettings = provideFilesWorkspaceSettings(
+	useFilesWorkspaceSettings(props.workspace, { browsing: props.defaultBrowsing }),
+)
+
+/** How folders are browsed, as listings without the advanced view's sidebar and tabs. */
+const browsing = computed<FilesBrowsing>(() =>
+	advancedView.value ? workspaceSettings.store.get(workspaceSettings.browsing) : 'listing',
+)
+
+/** Shows a folder in the tree, expanding the folders down to it, while tabs don't list folders. */
+function revealDirectory(location: FileInfo) {
+	const segments = location.path.split('/').filter(Boolean)
+	const paths = segments.map((_, index) => `/${segments.slice(0, index + 1).join('/')}`)
+	const expanded = ctx.directoryTree.expandedEntries
+	const missing = paths.filter((path) => !expanded.value.includes(path))
+	if (missing.length > 0) expanded.value = [...expanded.value, ...missing]
+	void nextTick(() => setSidebarOpen(true))
+}
+
 const fileTabs = useFileTabs({
 	ctx,
 	confirmDiscard: confirmDiscardEditors,
 	workspaceId: () => (advancedView.value ? (toValue(ctx.workspaceId) ?? null) : null),
 	enabled: advancedView,
+	mode: props.workbench ? 'shared' : 'managed',
+	directories: () => browsing.value !== 'sidebar',
+	revealDirectory,
 })
 
+const { viewFor } = useDirectoryViews({
+	directoryTree: ctx.directoryTree,
+	selection,
+	locationOf: (tabId) => {
+		const tab = fileTabs.getTab(tabId)
+		return tab ? currentLocation(tab) : undefined
+	},
+	tabIds: () => fileTabs.tabs.value.map((tab) => tab.id),
+})
+
+/** Without an open tab (every tab closed) this views the root, which nothing shows anyway. */
+const fallbackView = useDirectoryView({
+	location: () => fileTabs.activeLocation.value,
+	directoryTree: ctx.directoryTree,
+	selection,
+})
+
+const activeView = computed(() =>
+	fileTabs.activeTab.value ? viewFor(fileTabs.activeTab.value.id) : fallbackView,
+)
+
 const fileEditorApi = fileTabs.activeEditor
 const hasUnsavedChanges = fileTabs.hasUnsavedChanges
 
@@ -408,8 +509,6 @@ const selectedItem = ref<FileInfo | null>(null)
 
 const unsavedChangesModal = ref<InstanceType<typeof FileUnsavedChangesModal>>()
 
-const mainColumn = ref<MaybeElement>()
-
 const SIDEBAR_MIN_WIDTH = 240
 const SIDEBAR_DEFAULT_WIDTH = 300
 
@@ -425,12 +524,15 @@ const sidebarWidthSetting = useLocalStorage('file-layout-sidebar-width', SIDEBAR
 /** The pullout sidebar used in small mode is transient, so it doesn't touch the saved setting. */
 const sidebarModalOpen = ref(false)
 
-const sidebarOpen = computed(() =>
-	smallMode.value ? sidebarModalOpen.value : sidebarOpenSetting.value,
-)
+const sidebarOpen = computed(() => {
+	if (props.sidebar) return props.sidebar.isOpen()
+	return smallMode.value ? sidebarModalOpen.value : sidebarOpenSetting.value
+})
 
 function setSidebarOpen(value: boolean) {
-	if (smallMode.value) {
+	if (props.sidebar) {
+		props.sidebar.setOpen(value)
+	} else if (smallMode.value) {
 		sidebarModalOpen.value = value
 	} else {
 		sidebarOpenSetting.value = value
@@ -447,17 +549,10 @@ watch(sidebarModalOpen, (value) => {
 
 /** Width of the whole files tab, used to pick between the docked sidebar and the pullout modal. */
 const shellWidth = ref<number>()
-/** Width of the main column, i.e. what `FileBrowserPanel` actually gets next to the sidebar. */
-const containerWidth = ref<number>()
-
 useResizeObserver(fileViewer, (entries) => {
 	shellWidth.value = entries[0].contentRect.width
 })
 
-useResizeObserver(mainColumn, (entries) => {
-	containerWidth.value = entries[0].contentRect.width
-})
-
 const smallMode = computed(() => shellWidth.value == null || shellWidth.value < 1100)
 const fullWidthSidebar = computed(() => shellWidth.value == null || shellWidth.value < 400)
 const showDockedSidebar = computed(
@@ -539,8 +634,13 @@ async function navigateTo(file: FileInfo) {
 	await fileTabs.navigate(file)
 }
 
+function canOpenInTab(item: FileInfo) {
+	if (item.type === 'directory') return true
+	return ctx.canOpenInEditor?.(item) ?? canOpenInFileEditor(item.name)
+}
+
 function handleOpenInNewTab(item: FileInfo) {
-	if (item.type !== 'directory' && !canOpenInFileEditor(item.name)) return
+	if (!canOpenInTab(item)) return
 	fileTabs.openTab(item)
 }
 
@@ -788,7 +888,7 @@ function handleItemPrefetch(item: Pick<FileItem, 'type' | 'path' | 'name'>) {
 		prefetchTimeout = null
 	}
 
-	if (item.type === 'directory' || canOpenInFileEditor(item.name)) {
+	if (canOpenInTab(item)) {
 		prefetchTimeout = setTimeout(() => {
 			ctx.directoryTree.prefetch(item)
 		}, 150)
@@ -806,86 +906,93 @@ function handleContextMenu(event: MouseEvent, options: ButtonMenuOption[]) {
 // Shared UI state/handlers for FileSideBar, FileBrowserPanel and the dockview-hosted editor
 // tabs. Dockview mounts tab panels itself (teleported, so still Vue descendants), which means
 // prop/emit/ref bindings can't reach them but provide/inject does. See providers/file-browser-ui.ts.
-provideFileBrowserUI({
-	...ctx,
-
-	baseId,
-	showDebugInfo: computed(() => props.showDebugInfo ?? false),
-	showRefreshButton: computed(() => props.showRefreshButton ?? false),
-	searchLoadedOnlyNotice: computed(() => props.searchLoadedOnlyNotice),
-	reworkEnabled,
-	advancedView,
-	setAdvancedView,
-	coloredIcons,
-	setColoredIcons: (value) => (coloredIconsSetting.value = value),
-
-	items,
-	filteredItems,
-	isEditing,
-	isBusy,
-	busyTooltip,
-	activeLocation,
-	sidebarOpen: computed(() => advancedView.value && sidebarOpen.value),
-	setSidebarOpen,
-	containerWidth,
-
-	searchQuery,
-	sortField,
-	sortDesc,
-	handleSort,
-
-	selectedItems,
-	toggleItemSelection,
-	deselectAll,
-	toggleSelectAll,
-	allSelected,
-	someSelected,
-
-	editorComponent,
-	fileTabs,
-	fileEditorApi,
-	hasUnsavedChanges,
-	saveFileContent,
-	revertChanges,
-	shareEditorToMclogs,
-	toggleFind,
-
-	navigateTo,
-	navigateToSegment,
-	handleOpenInNewTab,
-	handleEditorClose,
-	handleHomePrefetch,
-	handleItemPrefetch,
-
-	showCreateModal,
-	showRenameModal,
-	showMoveModal,
-	showDeleteModal,
-	showBulkDeleteModal,
-	showUnzipFromUrlModal,
-
-	createItem,
-	renameItem,
-	moveItem,
-	deleteItem,
-	downloadFile,
-	zipFolder: ctx.zipFolder ? zipFolder : undefined,
-	handleExtractItem,
-
-	uploadFiles,
-	handleDropError,
-	initiateFileUpload,
-
-	handleContextMenu,
-})
-
-// Reset search/sort on path change; selection spans directories, so it is kept
-watch(
-	() => ctx.currentFile.value,
-	() => {
-		searchQuery.value = ''
-		resetSort()
-	},
+// Members of the file manager not overridden here are looked up on it when read rather than
+// copied once, so hosts can swap what it browses (see `switchableFileManager`).
+provideFileBrowserUI(
+	Object.assign(Object.create(ctx) as FileManagerContext, {
+		baseId,
+		showDebugInfo: computed(() => props.showDebugInfo ?? false),
+		showRefreshButton: computed(() => props.showRefreshButton ?? false),
+		searchLoadedOnlyNotice: computed(() => props.searchLoadedOnlyNotice),
+		canUseAdvancedView: canUseAdvancedView,
+		advancedView,
+		setAdvancedView,
+		compactNavigation: computed(() => props.compactNavigation ?? false),
+		coloredIcons,
+		setColoredIcons: (value) => (coloredIconsSetting.value = value),
+		compactFolders: computed(() => compactFoldersSetting.value),
+		setCompactFolders: (value) => (compactFoldersSetting.value = value),
+		contentVariantOf,
+		setContentVariant: (tabId, file, variant) =>
+			contentVariantChoices.set(`${tabId}:${file.path}`, variant),
+		interpretationOf: (tabId, file) =>
+			interpretationChoices.get(`${tabId}:${file.path}`) ?? defaultInterpretation(file),
+		jsonIndent: computed(() => jsonIndentOf(filesSettings.get(filesTabSettings.jsonIndent))),
+		setInterpretation: (tabId, file, interpretation) =>
+			interpretationChoices.set(`${tabId}:${file.path}`, interpretation),
+		newTabButton: computed(() => filesSettings.get(filesTabSettings.newTabButton)),
+		showNewTabButton: computed(
+			() => filesSettings.get(filesTabSettings.newTabButton) && browsing.value !== 'sidebar',
+		),
+		browsing,
+		revealInTab: (item) => {
+			if (canOpenInTab(item)) fileTabs.revealTab(item)
+		},
+		sidebarToggleLocation: computed(() => filesSettings.get(filesTabSettings.sidebarToggle)),
+		setSidebarToggleLocation: (location) =>
+			filesSettings.set(filesTabSettings.sidebarToggle, location),
+
+		inWorkbench: props.workbench ?? false,
+		viewFor,
+		activeView,
+		isEditing,
+		isBusy,
+		busyTooltip,
+		activeLocation,
+		sidebarOpen: computed(() => advancedView.value && sidebarOpen.value),
+		setSidebarOpen,
+
+		selectedItems,
+		toggleItemSelection,
+		deselectAll,
+
+		fileTabs,
+		fileEditorApi,
+		hasUnsavedChanges,
+		saveFileContent,
+		revertChanges,
+		shareEditorToMclogs,
+		toggleFind,
+
+		navigateTo,
+		navigateToSegment,
+		handleOpenInNewTab,
+		canOpenInTab,
+		handleEditorClose,
+		handleHomePrefetch,
+		handleItemPrefetch,
+
+		showCreateModal,
+		showRenameModal,
+		showMoveModal,
+		showDeleteModal,
+		showBulkDeleteModal,
+		showUnzipFromUrlModal,
+
+		createItem,
+		renameItem,
+		moveItem,
+		deleteItem,
+		downloadFile,
+		zipFolder: ctx.zipFolder ? zipFolder : undefined,
+		handleExtractItem,
+
+		uploadFiles,
+		handleDropError,
+		initiateFileUpload,
+
+		handleContextMenu,
+	}),
 )
 
 // Keyboard shortcuts
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
index 4dcfa589e1..f84cccd3db 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
@@ -1,11 +1,18 @@
-import type { Component, ComputedRef, Ref, ShallowRef } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
 import type { ButtonMenuOption } from '#ui/components'
 import { createContext } from '#ui/providers/create-context'
 
+import type { DirectoryView } from '../composables/directory-view'
 import type { FileTabs } from '../composables/file-tabs'
-import type { FileItem, FileSortField } from '../types'
-import type { FileInfo, FileManagerContext } from './file-manager'
+import type { FilesBrowsing, FilesSidebarToggleLocation } from '../settings'
+import type { FileItem } from '../types'
+import type {
+	FileContentVariants,
+	FileInfo,
+	FileInterpretation,
+	FileManagerContext,
+} from './file-manager'
 
 /**
  * API exposed by each tab's file editor, registered on `FileTabs` on mount
@@ -33,16 +40,57 @@ export interface FileBrowserUIContext extends FileManagerContext {
 	/** Whether the sidebar search notes that it only covers folders opened so far. */
 	searchLoadedOnlyNotice: ComputedRef<boolean>
 	/** Whether the files tab rework feature flag is on, which offers the view settings. */
-	reworkEnabled: ComputedRef<boolean>
+	canUseAdvancedView: ComputedRef<boolean>
 	/** Whether the advanced view (sidebar tree, tabs and column picker) is in use. */
 	advancedView: ComputedRef<boolean>
 	setAdvancedView: (value: boolean) => Promise<void>
+	/** Smaller navigation whose breadcrumbs wrap instead of scrolling, for tighter spaces. */
+	compactNavigation: ComputedRef<boolean>
 	/** Whether file and folder icons are tinted by type. */
 	coloredIcons: ComputedRef<boolean>
 	setColoredIcons: (value: boolean) => void
+	/** Whether the tree folds chains of folders that each hold just one folder into a single row. */
+	compactFolders: ComputedRef<boolean>
+	setCompactFolders: (value: boolean) => void
+	/** The content variants of the file a tab shows, with the one picked for it (or the default). */
+	contentVariantOf: (
+		tabId: string,
+		file: FileInfo<'file'>,
+	) => (FileContentVariants & { selected: string }) | null
+	setContentVariant: (tabId: string, file: FileInfo<'file'>, variant: string) => void
+	/** How formatted JSON is indented, as `JSON.stringify` takes it. */
+	jsonIndent: ComputedRef<string | number>
+	/**
+	 * How a tab shows the file it's on: the way it picked, else formatted JSON for JSON files that
+	 * can't be edited (when the settings say so), else `auto`.
+	 */
+	interpretationOf: (tabId: string, file: FileInfo<'file'>) => FileInterpretation
+	setInterpretation: (
+		tabId: string,
+		file: FileInfo<'file'>,
+		interpretation: FileInterpretation,
+	) => void
+	/** Whether the tab strip offers a button for opening a new tab. */
+	showNewTabButton: ComputedRef<boolean>
+	/** The user's "new tab button" setting, which also shows a workbench's add menus. */
+	newTabButton: ComputedRef<boolean>
+	/** How folders are browsed: in tabs listing them, in the sidebar alone, or in tabs of trees. */
+	browsing: ComputedRef<FilesBrowsing>
+	/** Brings forward a tab already on the entry, or opens one for it. */
+	revealInTab: (item: FileInfo) => void
+	/** Where the user keeps the button for showing and hiding the folder tree. */
+	sidebarToggleLocation: ComputedRef<FilesSidebarToggleLocation>
+	setSidebarToggleLocation: (location: FilesSidebarToggleLocation) => void
 
-	items: ComputedRef<FileItem[]>
-	filteredItems: ComputedRef<FileItem[]>
+	/**
+	 * Whether the tabs are hosted by an enclosing workbench, so each tab shows its own navigation
+	 * and listing rather than the shared ones of `FileBrowserPanel`.
+	 */
+	inWorkbench: boolean
+	/** The view of the given tab: its location, listing, search and sort. */
+	viewFor: (tabId: string) => DirectoryView
+	/** The active tab's view. */
+	activeView: ComputedRef<DirectoryView>
 	isEditing: ComputedRef<boolean>
 	/** Busy, or the active location is read-only. */
 	isBusy: ComputedRef<boolean>
@@ -50,23 +98,12 @@ export interface FileBrowserUIContext extends FileManagerContext {
 	activeLocation: ComputedRef<FileInfo>
 	sidebarOpen: ComputedRef<boolean>
 	setSidebarOpen: (value: boolean) => void
-	/** Width of the main content column, i.e. the space `FileBrowserPanel` actually has. */
-	containerWidth: Ref<number | undefined>
 
-	searchQuery: Ref<string>
-	sortField: Ref<FileSortField>
-	sortDesc: Ref<boolean>
-	handleSort: (field: FileSortField) => void
-
-	/** Selected entries keyed by path; may span directories. */
+	/** Selected entries keyed by path; may span directories and tabs. */
 	selectedItems: Ref<Map<string, FileItem>>
 	toggleItemSelection: (item: FileItem) => void
 	deselectAll: () => void
-	toggleSelectAll: () => void
-	allSelected: ComputedRef<boolean>
-	someSelected: ComputedRef<boolean>
 
-	editorComponent: ShallowRef<Component | null>
 	fileTabs: FileTabs
 	/** The editor of the active tab. */
 	fileEditorApi: ComputedRef<FileEditorBridge | null>
@@ -81,6 +118,8 @@ export interface FileBrowserUIContext extends FileManagerContext {
 	navigateTo: (file: FileInfo) => Promise<void>
 	navigateToSegment: (index: number) => void
 	handleOpenInNewTab: (item: FileInfo) => void
+	/** Whether the entry opens in a tab, i.e. it is a directory or a file the editor can show. */
+	canOpenInTab: (file: FileInfo) => boolean
 	handleEditorClose: () => Promise<void>
 	handleHomePrefetch: () => void
 	handleItemPrefetch: (item: FileInfo) => void
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
index e8d527fa95..21885c1125 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
@@ -39,13 +39,38 @@ export type FileItemResultFrom<T extends FileTypes> = T extends 'directory'
 		? FileResult
 		: never
 
+/** The content variant asking for a file's stored bytes, rather than any transformed view of them. */
+export const RAW_CONTENT_VARIANT = 'raw'
+
+/**
+ * How a tab shows a file: as it would by default (e.g. decompiled, or as an image), or its stored
+ * bytes as text, as a hex dump, or as formatted JSON.
+ */
+export type FileInterpretation = 'auto' | 'text' | 'hex' | 'json'
+
+/**
+ * Ways a file's contents can be produced besides the default, e.g. which decompiler reads a
+ * class file. Each tab picks one for the file it shows.
+ */
+export interface FileContentVariants {
+	label: string
+	options: { id: string; label: string }[]
+	/** The one used until the tab picks another. */
+	default: string
+}
+
 /**
  * Lazily loaded, cached directory listings used by the sidebar tree. Paths are absolute
  * (`/`, `/config`, `/config/sub`), independent of `currentPath`.
  */
 export interface DirectoryTree {
-	/** Returns the (cached) listing for `path`, starting to load it on first access. */
-	get: <T extends FileTypes>(file: FileInfo<T>) => FileItemResultFrom<T>
+	/**
+	 * Returns the (cached) listing for `path`, starting to load it on first access. Files can be
+	 * read as one of their content variants (see `FileManagerContext.contentVariants`), or as
+	 * their stored bytes with `RAW_CONTENT_VARIANT`, which hosts that transform files (e.g. by
+	 * decompiling them) honour and others can ignore.
+	 */
+	get: <T extends FileTypes>(file: FileInfo<T>, variant?: string) => FileItemResultFrom<T>
 	prefetch: <T extends FileTypes>(file: FileInfo<T>) => void
 	/** Absolute paths of the directories expanded in the tree. Owned by the host so it survives remounts. */
 	expandedEntries: Ref<string[]>
@@ -98,6 +123,17 @@ export interface FileManagerContext {
 	busyWarning?: Ref<string | null> | ComputedRef<string | null>
 	isReadOnly?: (file: FileInfo | null) => boolean
 	readOnlyReason?: Ref<string> | ComputedRef<string>
+	/**
+	 * Whether every entry is read-only (e.g. an archive being inspected), which hides the actions
+	 * that create or upload entries rather than only disabling them.
+	 */
+	readOnly?: boolean
+	/** Whether a file can be opened in the editor; defaults to its extension being viewable. */
+	canOpenInEditor?: (file: FileInfo) => boolean
+	/** The variants a file's contents can be read as, if it has any (e.g. decompilers for class files). */
+	contentVariants?: (file: FileInfo<'file'>) => FileContentVariants | null
+	/** The editor language of a file, for files whose contents differ from what their extension suggests. */
+	editorLanguage?: (file: FileInfo<'file'>) => string | undefined
 
 	extractFile?: (
 		path: string,
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/index.ts b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
index 00f859d23f..b092ff326d 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/index.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
@@ -1,3 +1,4 @@
+export { injectFileBrowserUI } from './file-browser-ui'
 export type {
 	DirectoryResult,
 	DirectoryTree,
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/switchable-file-manager.ts b/packages/ui/src/layouts/shared/files-tab/providers/switchable-file-manager.ts
new file mode 100644
index 0000000000..cda010dd92
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/providers/switchable-file-manager.ts
@@ -0,0 +1,81 @@
+import { computed, type Ref, ref } from 'vue'
+
+import { infoFrom } from '../utils'
+import type {
+	DirectoryTree,
+	FileInfo,
+	FileItemResultFrom,
+	FileManagerContext,
+	FileTypes,
+} from './file-manager'
+
+/**
+ * A read-only file manager with nothing in it, for while there's nothing to browse yet. It never
+ * reports loading, so the files layout shows its workspace right away; hosts show their own
+ * progress instead.
+ */
+export function emptyFileManager(options: {
+	readOnlyReason: Readonly<Ref<string>>
+}): FileManagerContext {
+	const root = infoFrom('/')
+	const expandedEntries = ref<string[]>([])
+	const directoryTree: DirectoryTree = {
+		get: <T extends FileTypes>(file: FileInfo<T>) =>
+			({
+				...file,
+				data: computed(() => (file.type === 'directory' ? [] : null)),
+				isLoading: ref(false),
+				loadError: ref(null),
+			}) as unknown as FileItemResultFrom<T>,
+		prefetch: () => {},
+		expandedEntries,
+		loadedEntries: computed(() => []),
+	}
+
+	return {
+		workspaceId: null,
+		currentFile: computed(() => root),
+		currentDirectory: computed(() => root),
+		directoryTree,
+		loading: computed(() => false),
+		error: computed(() => null),
+		navigateTo: () => {},
+		createItem: async () => null,
+		renameItem: async () => null,
+		moveItem: async () => null,
+		deleteItem: async () => false,
+		writeFile: async () => {},
+		uploadFiles: () => {},
+		downloadFile: async () => {},
+		isRefreshing: ref(false),
+		refresh: async () => {},
+		readOnly: true,
+		isReadOnly: () => true,
+		readOnlyReason: options.readOnlyReason,
+	}
+}
+
+/**
+ * A file manager standing in for whichever one is current, so the files layout and the workbench
+ * around it stay mounted while what they browse changes (e.g. another archive is opened). Falls
+ * back to `idle` while there's no current one.
+ *
+ * Every property is looked up on the current manager when it's read, and as that reads `current`,
+ * templates and computeds that read the context update once it changes.
+ */
+export function switchableFileManager(
+	current: Readonly<Ref<FileManagerContext | null>>,
+	idle: FileManagerContext,
+): FileManagerContext {
+	const manager = () => current.value ?? idle
+	/** The directory tree is handed on once (e.g. to directory views), so it forwards too. */
+	const directoryTree = new Proxy({} as DirectoryTree, {
+		get: (_, key) => Reflect.get(manager().directoryTree, key),
+		has: (_, key) => key in manager().directoryTree,
+	})
+
+	return new Proxy({} as FileManagerContext, {
+		get: (_, key) => (key === 'directoryTree' ? directoryTree : Reflect.get(manager(), key)),
+		has: (_, key) => key in manager(),
+	})
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/settings.ts b/packages/ui/src/layouts/shared/files-tab/settings.ts
new file mode 100644
index 0000000000..5cade0b7ee
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/settings.ts
@@ -0,0 +1,213 @@
+import {
+	defineSetting,
+	type SettingGroup,
+	type SettingsStore,
+	useLocalSettings,
+} from '#ui/components/settings'
+import { defineMessages } from '#ui/composables/i18n'
+import { createContext } from '#ui/providers/create-context'
+
+/** How formatted JSON is indented: with tabs, or with the given number of spaces. */
+export type FilesJsonIndent = 'tab' | '2' | '4'
+
+/** The indentation formatted JSON uses, as `JSON.stringify` takes it. */
+export function jsonIndentOf(indent: FilesJsonIndent) {
+	return indent === 'tab' ? '\t' : Number(indent)
+}
+
+/**
+ * How folders are browsed: `listing` opens them in tabs listing their contents, `sidebar` browses
+ * them in the sidebar's tree alone (tabs only showing files), and `tree` opens them in tabs showing
+ * their tree, in place of the sidebar.
+ */
+export type FilesBrowsing = 'listing' | 'sidebar' | 'tree'
+
+/** Where the folder tree's button sits: atop the tree, or in the navigation of each tab. */
+export type FilesSidebarToggleLocation = 'sidebar' | 'navigation'
+
+const messages = defineMessages({
+	group: { id: 'files.settings.group', defaultMessage: 'Files' },
+	groupDescription: {
+		id: 'files.settings.group-description',
+		defaultMessage: 'How files and folders are listed and browsed.',
+	},
+	coloredIcons: { id: 'files.settings.colored-icons', defaultMessage: 'Colored file icons' },
+	coloredIconsDescription: {
+		id: 'files.settings.colored-icons-description',
+		defaultMessage: 'Tint file and folder icons by their type.',
+	},
+	compactFolders: { id: 'files.settings.compact-folders', defaultMessage: 'Compact folders' },
+	compactFoldersDescription: {
+		id: 'files.settings.compact-folders-description',
+		defaultMessage:
+			'Fold chains of folders that each hold just one folder into a single row of the tree.',
+	},
+	newTabButton: { id: 'files.settings.new-tab-button', defaultMessage: 'New tab button' },
+	newTabButtonDescription: {
+		id: 'files.settings.new-tab-button-description',
+		defaultMessage:
+			'Show a button beside the tabs for opening a new tab, or bringing in a panel where the layout allows it.',
+	},
+	formatJson: { id: 'files.settings.format-json', defaultMessage: 'Format JSON files' },
+	formatJsonDescription: {
+		id: 'files.settings.format-json-description',
+		defaultMessage:
+			"Open JSON files that can't be edited laid out over lines and indented, even if they're stored compacted.",
+	},
+	jsonIndent: { id: 'files.settings.json-indent', defaultMessage: 'JSON indentation' },
+	jsonIndentDescription: {
+		id: 'files.settings.json-indent-description',
+		defaultMessage: 'How formatted JSON is indented.',
+	},
+	jsonIndentTab: { id: 'files.settings.json-indent.tab', defaultMessage: 'Tabs' },
+	jsonIndentTwo: { id: 'files.settings.json-indent.two', defaultMessage: '2 spaces' },
+	jsonIndentFour: { id: 'files.settings.json-indent.four', defaultMessage: '4 spaces' },
+	browsing: { id: 'files.settings.browsing', defaultMessage: 'Browse folders' },
+	browsingDescription: {
+		id: 'files.settings.browsing-description',
+		defaultMessage:
+			"Open folders in tabs listing their contents, browse them in the sidebar's tree alone with tabs only for files, or open them in tabs showing their tree in place of the sidebar. Kept for each place files are browsed.",
+	},
+	browsingListing: { id: 'files.settings.browsing.listing', defaultMessage: 'Folder listings' },
+	browsingSidebar: { id: 'files.settings.browsing.sidebar', defaultMessage: 'Sidebar only' },
+	browsingTree: { id: 'files.settings.browsing.tree', defaultMessage: 'Folder trees' },
+	sidebarToggle: { id: 'files.settings.sidebar-toggle', defaultMessage: 'Folder tree button' },
+	sidebarToggleSidebar: {
+		id: 'files.settings.sidebar-toggle.sidebar',
+		defaultMessage: 'In the folder tree',
+	},
+	sidebarToggleNavigation: {
+		id: 'files.settings.sidebar-toggle.navigation',
+		defaultMessage: 'In the navigation bar',
+	},
+})
+
+/**
+ * Settings of the files layout, read by it and offered by hosts' settings (e.g. the archive
+ * viewer's). The folder tree button's placement is picked from the files' own view settings
+ * instead, as hosts with a layout of their own (e.g. a workbench) toggle the tree themselves.
+ */
+export const filesTabSettings = {
+	coloredIcons: defineSetting.toggle({
+		id: 'colored-icons',
+		storageKey: 'files-colored-icons',
+		title: messages.coloredIcons,
+		description: messages.coloredIconsDescription,
+		default: true,
+	}),
+	compactFolders: defineSetting.toggle({
+		id: 'compact-folders',
+		storageKey: 'files-compact-folders',
+		title: messages.compactFolders,
+		description: messages.compactFoldersDescription,
+		default: false,
+	}),
+	newTabButton: defineSetting.toggle({
+		id: 'new-tab-button',
+		title: messages.newTabButton,
+		description: messages.newTabButtonDescription,
+		default: true,
+	}),
+	formatJson: defineSetting.toggle({
+		id: 'format-json',
+		title: messages.formatJson,
+		description: messages.formatJsonDescription,
+		default: true,
+	}),
+	jsonIndent: defineSetting.enum<FilesJsonIndent>({
+		id: 'json-indent',
+		title: messages.jsonIndent,
+		description: messages.jsonIndentDescription,
+		default: 'tab',
+		display: 'chips',
+		entries: [
+			{ value: 'tab', label: messages.jsonIndentTab },
+			{ value: '2', label: messages.jsonIndentTwo },
+			{ value: '4', label: messages.jsonIndentFour },
+		],
+	}),
+	sidebarToggle: defineSetting.enum<FilesSidebarToggleLocation>({
+		id: 'sidebar-toggle-placement',
+		title: messages.sidebarToggle,
+		default: 'sidebar',
+		entries: [
+			{ value: 'sidebar', label: messages.sidebarToggleSidebar },
+			{ value: 'navigation', label: messages.sidebarToggleNavigation },
+		],
+	}),
+}
+
+export const filesTabSettingGroups: SettingGroup[] = [
+	{
+		id: 'files',
+		title: messages.group,
+		description: messages.groupDescription,
+		settings: [
+			filesTabSettings.coloredIcons,
+			filesTabSettings.compactFolders,
+			filesTabSettings.newTabButton,
+			filesTabSettings.formatJson,
+			filesTabSettings.jsonIndent,
+		],
+	},
+]
+
+/** The files layout's settings, kept in local storage. */
+export function useFilesTabSettings() {
+	return useLocalSettings(Object.values(filesTabSettings), {
+		prefix: 'files-setting:',
+		initOnMounted: true,
+	})
+}
+
+/**
+ * How folders are browsed in one place files are browsed, kept apart from other places' under its
+ * name, and starting out as that place prefers.
+ */
+function filesBrowsingSetting(workspace: string, fallback: FilesBrowsing) {
+	return defineSetting.enum<FilesBrowsing>({
+		id: 'browsing',
+		storageKey: `files-setting:${workspace}:folders`,
+		title: messages.browsing,
+		description: messages.browsingDescription,
+		default: fallback,
+		display: 'chips',
+		entries: [
+			{ value: 'listing', label: messages.browsingListing },
+			{ value: 'sidebar', label: messages.browsingSidebar },
+			{ value: 'tree', label: messages.browsingTree },
+		],
+	})
+}
+
+/** The files layout's settings in one place files are browsed, including those kept per place. */
+export interface FilesWorkspaceSettings {
+	store: SettingsStore
+	browsing: ReturnType<typeof filesBrowsingSetting>
+	groups: SettingGroup[]
+}
+
+/**
+ * The files layout's settings as one place files are browsed (e.g. the archive viewer's page) sees
+ * them: the shared ones, and how folders are browsed there, defaulting as that place prefers.
+ */
+export function useFilesWorkspaceSettings(
+	workspace: string,
+	defaults: { browsing: FilesBrowsing },
+): FilesWorkspaceSettings {
+	const browsing = filesBrowsingSetting(workspace, defaults.browsing)
+	return {
+		store: useLocalSettings([...Object.values(filesTabSettings), browsing], {
+			prefix: 'files-setting:',
+			initOnMounted: true,
+		}),
+		browsing,
+		groups: filesTabSettingGroups.map((group) => ({
+			...group,
+			settings: [browsing, ...group.settings],
+		})),
+	}
+}
+
+export const [injectFilesWorkspaceSettings, provideFilesWorkspaceSettings] =
+	createContext<FilesWorkspaceSettings>('FilePageLayout', 'filesWorkspaceSettings')
diff --git a/packages/ui/src/layouts/shared/files-tab/types.ts b/packages/ui/src/layouts/shared/files-tab/types.ts
index 0c279d37ae..f1024a8884 100644
--- a/packages/ui/src/layouts/shared/files-tab/types.ts
+++ b/packages/ui/src/layouts/shared/files-tab/types.ts
@@ -15,11 +15,6 @@ export interface FileItem {
 	readOnly?: boolean
 }
 
-export interface EditingFile {
-	name: string
-	path: string
-}
-
 export type FileSortField = 'name' | 'size' | 'items' | 'created' | 'modified'
 
 export type FileViewFilter = 'all' | 'filesOnly' | 'foldersOnly'
diff --git a/packages/ui/src/layouts/shared/files-tab/utils.ts b/packages/ui/src/layouts/shared/files-tab/utils.ts
index 917600737d..280a0e18a9 100644
--- a/packages/ui/src/layouts/shared/files-tab/utils.ts
+++ b/packages/ui/src/layouts/shared/files-tab/utils.ts
@@ -2,6 +2,7 @@ import {
 	BoxIcon,
 	BracesIcon,
 	ClipboardListIcon,
+	FolderArchiveIcon,
 	FolderCogIcon,
 	FolderOpenIcon,
 	GlassesIcon,
@@ -14,7 +15,7 @@ import type { Component } from 'vue'
 
 import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
 import { getFileExtensionIcon } from '#ui/utils/auto-icons'
-import { getFileExtension } from '#ui/utils/file-extensions'
+import { getFileExtension, isArchiveFile } from '#ui/utils/file-extensions'
 
 export interface FileIconStyle {
 	icon: Component
@@ -24,6 +25,9 @@ export interface FileIconStyle {
 
 const DEFAULT_DIRECTORY_ICON: FileIconStyle = { icon: FolderOpenIcon, color: 'text-amber-400' }
 
+/** An archive that can be browsed like a directory, e.g. a jar nested in another. */
+const ARCHIVE_DIRECTORY_ICON: FileIconStyle = { icon: FolderArchiveIcon, color: 'text-orange' }
+
 const DIRECTORY_ICON_STYLES: Record<string, FileIconStyle> = {
 	config: { icon: FolderCogIcon, color: 'text-purple' },
 	'crash-reports': { icon: ClipboardListIcon, color: 'text-red-400' },
@@ -40,6 +44,7 @@ const DIRECTORY_ICON_STYLES: Record<string, FileIconStyle> = {
 /** Icon and color for a file or directory, shared by the listing, sidebar tree and tabs. */
 export function fileIconFor(file: Pick<FileInfo, 'name' | 'type'>): FileIconStyle {
 	if (file.type === 'directory') {
+		if (isArchiveFile(getFileExtension(file.name))) return ARCHIVE_DIRECTORY_ICON
 		return DIRECTORY_ICON_STYLES[file.name.toLowerCase()] ?? DEFAULT_DIRECTORY_ICON
 	}
 	return { icon: getFileExtensionIcon(getFileExtension(file.name)), color: 'text-mist-200' }
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/add-menu.vue b/packages/ui/src/layouts/shared/workbench/components/dock/add-menu.vue
new file mode 100644
index 0000000000..2c0183ad56
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/add-menu.vue
@@ -0,0 +1,73 @@
+<template>
+	<div v-if="options.length" class="flex h-full items-center pr-2.5">
+		<TeleportOverflowMenu
+			v-tooltip="formatMessage(messages.add)"
+			type="quiet"
+			:label="formatMessage(messages.add)"
+			:options="options"
+			@open="version++"
+		>
+			<PlusIcon aria-hidden="true" />
+		</TeleportOverflowMenu>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon } from '@modrinth/assets'
+import type { DockviewGroupPanel } from 'dockview-vue'
+import { computed, ref } from 'vue'
+
+import { type ButtonMenuOption, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { injectWorkbench, injectWorkbenchDock } from '../../providers/workbench'
+
+/**
+ * Adds to a group from its tab bar: a new document (e.g. a files tab at the home folder), or any
+ * of the workbench's panels, brought into this group from wherever they are (or reopened).
+ */
+const props = defineProps<{
+	group: DockviewGroupPanel
+}>()
+
+const { formatMessage } = useVIntl()
+const workbench = injectWorkbench()
+const host = injectWorkbenchDock()
+
+const messages = defineMessages({
+	add: { id: 'workbench.add-menu', defaultMessage: 'Add a tab' },
+	panels: { id: 'workbench.add-menu.panels', defaultMessage: 'Panels' },
+})
+
+/** Bumped as the menu opens, so it shows which panels the group holds right then. */
+const version = ref(0)
+
+const options = computed<ButtonMenuOption[]>(() => {
+	void version.value
+	const result: ButtonMenuOption[] = []
+	const create = workbench.documents?.create
+	if (create && (create.shown?.() ?? true)) {
+		result.push({
+			id: 'new-document',
+			label: create.label(),
+			icon: create.icon,
+			action: () => create.open(props.group),
+		})
+	}
+	if (workbench.mode.movePanels && workbench.panels.value.length) {
+		if (result.length) result.push({ type: 'divider', id: 'panels-divider' })
+		result.push({ type: 'heading', id: 'panels', label: formatMessage(messages.panels) })
+		for (const panel of workbench.panels.value) {
+			result.push({
+				id: `panel-${panel.id}`,
+				label: panel.title,
+				icon: panel.icon,
+				selected: props.group.panels.some((entry) => entry.id === panel.id),
+				action: () =>
+					workbench.movePanel(panel.id, host, { referenceGroup: props.group, direction: 'within' }),
+			})
+		}
+	}
+	return result
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/collapsed-strip.vue b/packages/ui/src/layouts/shared/workbench/components/dock/collapsed-strip.vue
new file mode 100644
index 0000000000..153fa4092c
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/collapsed-strip.vue
@@ -0,0 +1,67 @@
+<template>
+	<div
+		class="workbench-collapsed-strip flex shrink-0 items-center gap-1 overflow-hidden p-1"
+		:class="vertical ? 'h-full w-full flex-col' : 'h-full w-full flex-row'"
+		role="toolbar"
+		:aria-label="formatMessage(messages.label)"
+		:aria-orientation="vertical ? 'vertical' : 'horizontal'"
+	>
+		<IconButton
+			v-for="tab in tabs"
+			:key="tab.id"
+			v-tooltip="tab.title"
+			type="quiet"
+			size="sm"
+			:circular="false"
+			:label="tab.title"
+			class="shrink-0"
+			:class="tab.active ? 'text-brand' : 'text-secondary'"
+			:aria-pressed="tab.active"
+			@click="workbench.activateTab(region, tab.id)"
+		>
+			<component :is="tab.icon ?? FileIcon" aria-hidden="true" />
+		</IconButton>
+		<IconButton
+			v-if="!vertical"
+			v-tooltip="expandLabel"
+			type="quiet"
+			size="sm"
+			:circular="false"
+			:label="expandLabel"
+			class="ml-auto shrink-0 opacity-70 hover:opacity-100"
+			@click="workbench.setRegionCollapsed(region, false)"
+		>
+			<PanelTopOpenIcon class="rotate-180" aria-hidden="true" />
+		</IconButton>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FileIcon, PanelTopOpenIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { IconButton } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { injectWorkbench } from '../../providers/workbench'
+import type { WorkbenchRegion } from '../../types'
+
+/**
+ * A collapsed region: a strip of its tabs' icons, any of which brings the region back with that
+ * tab in front. The side regions' toggles sit in the center's corners; the bottom region's keeps
+ * its place at the strip's end.
+ */
+const props = defineProps<{ region: WorkbenchRegion }>()
+
+const { formatMessage } = useVIntl()
+const workbench = injectWorkbench()
+
+const messages = defineMessages({
+	label: { id: 'workbench.collapsed.label', defaultMessage: 'Collapsed panels' },
+	expand: { id: 'workbench.collapsed.expand', defaultMessage: 'Expand bottom panel' },
+})
+
+const vertical = computed(() => props.region !== 'bottom')
+const tabs = computed(() => workbench.dockTabs(props.region))
+const expandLabel = computed(() => formatMessage(messages.expand))
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/corner-toggle.vue b/packages/ui/src/layouts/shared/workbench/components/dock/corner-toggle.vue
new file mode 100644
index 0000000000..cbe38f7974
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/corner-toggle.vue
@@ -0,0 +1,121 @@
+<template>
+	<div v-if="shown" class="flex h-full items-center" :class="{ 'px-2': square }">
+		<IconButton
+			v-tooltip="label"
+			type="quiet"
+			size="sm"
+			:circular="false"
+			:label="label"
+			:aria-expanded="visible"
+			class="opacity-70 hover:opacity-100"
+			@click="workbench.toggleRegion(side)"
+		>
+			<component :is="icon" :class="{ 'rotate-180': side === 'bottom' }" aria-hidden="true" />
+		</IconButton>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	PanelLeftCloseIcon,
+	PanelLeftOpenIcon,
+	PanelRightCloseIcon,
+	PanelRightOpenIcon,
+	PanelTopCloseIcon,
+	PanelTopOpenIcon,
+} from '@modrinth/assets'
+import type { DockviewGroupPanel } from 'dockview-vue'
+import { computed } from 'vue'
+
+import { IconButton } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { injectWorkbench, injectWorkbenchDock } from '../../providers/workbench'
+import type { WorkbenchRegion } from '../../types'
+
+defineOptions({ inheritAttrs: false })
+
+/**
+ * Shows and hides (or collapses and expands, as the settings choose) a region: the left and right
+ * ones from the outer corners of the center's tab bars, and the bottom one from the top-right
+ * corner of its own.
+ */
+const props = withDefaults(
+	defineProps<{
+		params: { group: DockviewGroupPanel }
+		side?: WorkbenchRegion
+	}>(),
+	{ side: 'left' },
+)
+
+const { formatMessage } = useVIntl()
+const workbench = injectWorkbench()
+const host = injectWorkbenchDock()
+
+const messages = defineMessages({
+	showPanel: { id: 'workbench.corner.show-panel', defaultMessage: 'Show {name}' },
+	hidePanel: { id: 'workbench.corner.hide-panel', defaultMessage: 'Hide {name}' },
+	expandPanel: { id: 'workbench.corner.expand-panel', defaultMessage: 'Expand {name}' },
+	collapsePanel: { id: 'workbench.corner.collapse-panel', defaultMessage: 'Collapse {name}' },
+	showRegion: {
+		id: 'workbench.corner.show-region',
+		defaultMessage:
+			'{side, select, left {Show left panel} right {Show right panel} other {Show bottom panel}}',
+	},
+	hideRegion: {
+		id: 'workbench.corner.hide-region',
+		defaultMessage:
+			'{side, select, left {Hide left panel} right {Hide right panel} other {Hide bottom panel}}',
+	},
+	expandRegion: {
+		id: 'workbench.corner.expand-region',
+		defaultMessage:
+			'{side, select, left {Expand left panel} right {Expand right panel} other {Expand bottom panel}}',
+	},
+	collapseRegion: {
+		id: 'workbench.corner.collapse-region',
+		defaultMessage:
+			'{side, select, left {Collapse left panel} right {Collapse right panel} other {Collapse bottom panel}}',
+	},
+})
+
+/**
+ * Only the group in the center's outer corner on this side shows the toggle, once; the bottom
+ * region's shows in its own top-right group.
+ */
+const shown = computed(() => {
+	if (!workbench.cornerToggles.value || !workbench.usedRegions.value.includes(props.side)) {
+		return false
+	}
+	if (props.side === 'bottom') {
+		return host === 'bottom' && workbench.regionCornerGroups.value.bottom === props.params.group.id
+	}
+	return workbench.cornerGroups.value[props.side] === props.params.group.id
+})
+const collapsing = computed(() => workbench.toggleAction.value === 'collapse')
+/** Whether the region is shown in full, i.e. neither hidden nor collapsed. */
+const visible = computed(
+	() => workbench.visible[props.side].value && !workbench.collapsed[props.side].value,
+)
+/** Square tab bars run edge to edge, so the toggle keeps some room from the edges and the tabs. */
+const square = computed(() => workbench.variant.value === 'square')
+const icon = computed(() => {
+	if (props.side === 'left') return visible.value ? PanelLeftCloseIcon : PanelLeftOpenIcon
+	if (props.side === 'right') return visible.value ? PanelRightCloseIcon : PanelRightOpenIcon
+	return visible.value ? PanelTopCloseIcon : PanelTopOpenIcon
+})
+/** Named after the region's panel when it holds just one, e.g. "Hide Summary". */
+const label = computed(() => {
+	const held = workbench.panels.value.filter(
+		(panel) => workbench.isOpen(panel.id) && workbench.regionOf(panel) === props.side,
+	)
+	const show = collapsing.value ? messages.expandPanel : messages.showPanel
+	const hide = collapsing.value ? messages.collapsePanel : messages.hidePanel
+	if (held.length === 1) {
+		return formatMessage(visible.value ? hide : show, { name: held[0].title })
+	}
+	const showRegion = collapsing.value ? messages.expandRegion : messages.showRegion
+	const hideRegion = collapsing.value ? messages.collapseRegion : messages.hideRegion
+	return formatMessage(visible.value ? hideRegion : showRegion, { side: props.side })
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/header-actions.vue b/packages/ui/src/layouts/shared/workbench/components/dock/header-actions.vue
new file mode 100644
index 0000000000..e99ce85835
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/header-actions.vue
@@ -0,0 +1,42 @@
+<template>
+	<div class="flex h-full items-center">
+		<component
+			:is="workbench.documents.headerActions"
+			v-if="workbench.documents?.headerActions"
+			:params="params"
+		/>
+		<AddMenu v-if="addMenuShown" :group="params.group" />
+		<CornerToggle v-if="inGrid && host === 'center'" side="right" :params="params" />
+		<CornerToggle v-if="inGrid && host === 'bottom'" side="bottom" :params="params" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { DockviewGroupLocation, DockviewGroupPanel, IDockviewPanel } from 'dockview-vue'
+import { computed } from 'vue'
+
+import { injectWorkbench, injectWorkbenchDock } from '../../providers/workbench'
+import AddMenu from './add-menu.vue'
+import CornerToggle from './corner-toggle.vue'
+
+defineOptions({ inheritAttrs: false })
+
+/**
+ * The end of a group's tab bar: the documents' own actions, the add menu (as the settings show it),
+ * then the toggle of the right region (in the center's top-right group) or of the bottom region
+ * (in its own top-right group). Groups popped out into windows keep the documents' actions and
+ * the add menu.
+ */
+const props = defineProps<{
+	params: { group: DockviewGroupPanel; panels: IDockviewPanel[]; location?: DockviewGroupLocation }
+}>()
+
+const workbench = injectWorkbench()
+const host = injectWorkbenchDock()
+
+const inGrid = computed(
+	() => (props.params.location ?? props.params.group.api.location).type === 'grid',
+)
+
+const addMenuShown = computed(() => workbench.documents?.addMenuShown?.() ?? true)
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/index.vue b/packages/ui/src/layouts/shared/workbench/components/dock/index.vue
new file mode 100644
index 0000000000..ca2c980121
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/index.vue
@@ -0,0 +1,160 @@
+<template>
+	<div
+		ref="dockElement"
+		class="workbench-dock flex h-full w-full flex-col"
+		:data-workbench-host="host"
+		@contextmenu="openTabBarMenu"
+	>
+		<CollapsedStrip v-if="collapsedRegion" :region="collapsedRegion" />
+		<div v-show="!collapsedRegion" class="workbench-dockview min-h-0 w-full flex-1">
+			<DockviewVue
+				class="h-full w-full"
+				:theme="theme"
+				:components="components"
+				:tab-components="tabComponents"
+				:prefix-header-actions-component="host === 'center' ? CornerToggle : undefined"
+				:right-header-actions-component="HeaderActions"
+				:watermark-component="Watermark"
+				:popout-url="workbench.mode.popouts?.url"
+				dnd-strategy="html5"
+				disable-floating-groups
+				disable-tabs-overflow-list
+				no-panels-overlay="emptyGroup"
+				@ready="onReady"
+			/>
+		</div>
+		<WorkbenchToolbar v-if="host === 'center' && workbench.mode.toolbar" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import 'dockview-vue/dist/styles/dockview.css'
+import '#ui/styles/dockview-theme.css'
+
+import {
+	type DockviewApi,
+	type DockviewIDisposable,
+	type DockviewReadyEvent,
+	type DockviewTheme,
+	DockviewVue,
+	type GridviewApi,
+	type GridviewPanelApi,
+} from 'dockview-vue'
+import { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue'
+
+import {
+	WORKBENCH_PANEL_COMPONENT,
+	WORKBENCH_TAB_COMPONENT,
+	type WorkbenchDockParams,
+} from '../../composables/create-workbench'
+import { useDetachedLayout } from '../../composables/use-detached-layout'
+import { injectWorkbench, provideWorkbenchDock } from '../../providers/workbench'
+import { WORKBENCH_REGIONS, type WorkbenchRegion } from '../../types'
+import WorkbenchToolbar from '../toolbar.vue'
+import CollapsedStrip from './collapsed-strip.vue'
+import CornerToggle from './corner-toggle.vue'
+import HeaderActions from './header-actions.vue'
+import Panel from './panel.vue'
+import Tab from './tab.vue'
+import Watermark from './watermark.vue'
+
+/** Gridview hands its panels their params and api directly, unlike dockview's nested `params`. */
+const props = defineProps<{
+	params: WorkbenchDockParams
+	api: GridviewPanelApi
+	containerApi: GridviewApi
+}>()
+
+const workbench = injectWorkbench()
+const host = props.params.host
+provideWorkbenchDock(host)
+
+/** The region, while it's collapsed to a strip of its tabs (its dock staying set up, out of sight). */
+const collapsedRegion = computed(() =>
+	(WORKBENCH_REGIONS as readonly string[]).includes(host) &&
+	workbench.collapsed[host as WorkbenchRegion].value
+		? (host as WorkbenchRegion)
+		: undefined,
+)
+
+const theme: DockviewTheme = {
+	name: 'modrinth-workbench',
+	className: 'dockview-theme-modrinth',
+	dndOverlayMounting: 'absolute',
+	dndTabIndicator: 'line',
+}
+
+const components = {
+	[WORKBENCH_PANEL_COMPONENT]: Panel,
+	...workbench.documents?.components,
+}
+const tabComponents = {
+	[WORKBENCH_TAB_COMPONENT]: Tab,
+	...workbench.documents?.tabComponents,
+}
+
+/** Right-clicks on a tab open the tab's own menu; ones on the rest of the tab bar open this one. */
+function openTabBarMenu(event: MouseEvent) {
+	if (event.defaultPrevented) return
+	const target = event.target as HTMLElement | null
+	if (!target?.closest('.dv-tabs-and-actions-container') || target.closest('.dv-tab')) return
+	event.preventDefault()
+	const groupElement = target.closest('.dv-groupview')
+	const group = dockApi?.groups.find((candidate) => candidate.element === groupElement)
+	workbench.openRegionMenu(event, host, group?.panels[0]?.id)
+}
+
+let dockApi: DockviewApi | undefined
+const dockElement = shallowRef<HTMLElement | null>(null)
+const dockviewElement = shallowRef<HTMLElement | null>(null)
+
+/**
+ * Popped out groups sit in windows of their own, outside the dock's element, so their tab bars'
+ * right-clicks are listened for on those windows, for the groups of this dock.
+ */
+const popoutWindows = new Set<Window>()
+let popoutSubscriptions: DockviewIDisposable[] = []
+
+function onPopoutContextMenu(event: MouseEvent) {
+	const groupElement = (event.target as HTMLElement | null)?.closest('.dv-groupview')
+	if (dockApi?.groups.some((group) => group.element === groupElement)) openTabBarMenu(event)
+}
+
+function syncPopoutWindows() {
+	const open = new Set(dockApi?.getPopouts().map((popout) => popout.window) ?? [])
+	for (const child of popoutWindows) {
+		if (open.has(child)) continue
+		child.removeEventListener('contextmenu', onPopoutContextMenu)
+		popoutWindows.delete(child)
+	}
+	for (const child of open) {
+		if (popoutWindows.has(child)) continue
+		child.addEventListener('contextmenu', onPopoutContextMenu)
+		popoutWindows.add(child)
+	}
+}
+
+function onReady(event: DockviewReadyEvent) {
+	dockApi = event.api
+	for (const subscription of popoutSubscriptions) subscription.dispose()
+	popoutSubscriptions = [
+		dockApi.onDidAddPopoutGroup(syncPopoutWindows),
+		dockApi.onDidRemovePopoutGroup(syncPopoutWindows),
+	]
+	workbench.onDockReady(host, event)
+}
+
+onMounted(() => {
+	dockviewElement.value =
+		dockElement.value?.querySelector<HTMLElement>(':scope > .workbench-dockview') ?? null
+})
+
+useDetachedLayout(dockviewElement, (width, height) => dockApi?.layout(width, height))
+
+onBeforeUnmount(() => {
+	for (const subscription of popoutSubscriptions) subscription.dispose()
+	for (const child of popoutWindows) child.removeEventListener('contextmenu', onPopoutContextMenu)
+	popoutWindows.clear()
+	workbench.onDockDispose(host)
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/linked-member.vue b/packages/ui/src/layouts/shared/workbench/components/dock/linked-member.vue
new file mode 100644
index 0000000000..bb7a28f686
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/linked-member.vue
@@ -0,0 +1,31 @@
+<template>
+	<section
+		class="workbench-panel"
+		:class="[member.scroll === false ? '' : 'overflow-auto', { 'p-3': member.padded }]"
+		:aria-label="member.title"
+	>
+		<SlotOutlet v-if="workbench.slots[slotName]" :slots="workbench.slots" :name="slotName" />
+	</section>
+</template>
+
+<script setup lang="ts">
+import {
+	injectWorkbench,
+	injectWorkbenchPanel,
+	provideWorkbenchPanel,
+} from '../../providers/workbench'
+import type { WorkbenchPanel } from '../../types'
+import { SlotOutlet } from '../slot-outlet'
+
+/**
+ * One panel of a linked tab, shown as its own panel would show it: within the tab's panel, it's
+ * shown whenever the tab is.
+ */
+const props = defineProps<{ member: WorkbenchPanel }>()
+
+const workbench = injectWorkbench()
+const tab = injectWorkbenchPanel()
+const slotName = `panel-${props.member.id}` as const
+
+provideWorkbenchPanel({ id: props.member.id, visible: tab.visible, window: tab.window })
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/linked-panels.vue b/packages/ui/src/layouts/shared/workbench/components/dock/linked-panels.vue
new file mode 100644
index 0000000000..765ab39ec6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/linked-panels.vue
@@ -0,0 +1,134 @@
+<template>
+	<div
+		ref="container"
+		class="flex h-full min-h-0 w-full min-w-0"
+		:class="vertical ? 'flex-col' : 'flex-row'"
+	>
+		<template v-for="(member, index) in members" :key="member.id">
+			<div
+				v-if="index"
+				role="separator"
+				tabindex="0"
+				:aria-orientation="vertical ? 'horizontal' : 'vertical'"
+				:aria-label="formatMessage(messages.resize)"
+				class="workbench-link-sash relative z-[1] shrink-0 touch-none bg-surface-5"
+				:class="vertical ? 'h-px w-full cursor-row-resize' : 'h-full w-px cursor-col-resize'"
+				@pointerdown="startResize(index, $event)"
+				@pointermove="resize"
+				@pointerup="stopResize"
+				@pointercancel="stopResize"
+				@dblclick="evenOut"
+			/>
+			<LinkedMember
+				:member="member"
+				class="min-h-0 min-w-0"
+				:style="{ flex: `${shares[index] ?? 1} 1 0` }"
+			/>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { injectWorkbench } from '../../providers/workbench'
+import type { WorkbenchPanel } from '../../types'
+import LinkedMember from './linked-member.vue'
+
+/** A linked tab's content: its panels split along the link's orientation, resized by dragging. */
+const props = defineProps<{ tab: WorkbenchPanel }>()
+
+const { formatMessage } = useVIntl()
+const workbench = injectWorkbench()
+
+const messages = defineMessages({
+	resize: { id: 'workbench.link.resize', defaultMessage: 'Resize linked panels' },
+})
+
+/** A panel's share can't shrink below this part of the tab. */
+const MINIMUM_SHARE = 0.1
+
+const members = computed(() => props.tab.members ?? [])
+const link = computed(() =>
+	workbench.links.value.find((candidate) => candidate.id === props.tab.id),
+)
+const vertical = computed(() => link.value?.orientation !== 'horizontal')
+
+const container = ref<HTMLElement | null>(null)
+const shares = ref<number[]>([])
+
+watch(
+	[() => link.value?.sizes, () => members.value.length],
+	([sizes, count]) => {
+		shares.value =
+			sizes && sizes.length === count ? [...sizes] : Array.from({ length: count }, () => 1 / count)
+	},
+	{ immediate: true },
+)
+
+let drag: { index: number; start: number; extent: number; shares: number[] } | null = null
+
+function position(event: PointerEvent) {
+	return vertical.value ? event.clientY : event.clientX
+}
+
+function startResize(index: number, event: PointerEvent) {
+	if (event.button !== 0 || !container.value) return
+	event.preventDefault()
+	const target = event.currentTarget as HTMLElement
+	target.setPointerCapture(event.pointerId)
+	const bounds = container.value.getBoundingClientRect()
+	drag = {
+		index,
+		start: position(event),
+		extent: vertical.value ? bounds.height : bounds.width,
+		shares: [...shares.value],
+	}
+}
+
+function resize(event: PointerEvent) {
+	if (!drag || drag.extent <= 0) return
+	const { index, shares: initial } = drag
+	const total = initial[index - 1] + initial[index]
+	const moved = ((position(event) - drag.start) / drag.extent) * initial.reduce((a, b) => a + b, 0)
+	const before = Math.min(
+		Math.max(initial[index - 1] + moved, MINIMUM_SHARE),
+		total - MINIMUM_SHARE,
+	)
+	const next = [...initial]
+	next[index - 1] = before
+	next[index] = total - before
+	shares.value = next
+}
+
+function stopResize(event: PointerEvent) {
+	if (!drag) return
+	drag = null
+	const target = event.currentTarget as HTMLElement
+	if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId)
+	workbench.setLinkSizes(props.tab.id, shares.value)
+}
+
+function evenOut() {
+	const count = members.value.length
+	workbench.setLinkSizes(
+		props.tab.id,
+		Array.from({ length: count }, () => 1 / count),
+	)
+}
+</script>
+
+<style scoped>
+.workbench-link-sash::before {
+	content: '';
+	position: absolute;
+	inset: -3px;
+}
+
+.workbench-link-sash:hover,
+.workbench-link-sash:focus-visible {
+	background-color: var(--color-brand);
+}
+</style>
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/panel.vue b/packages/ui/src/layouts/shared/workbench/components/dock/panel.vue
new file mode 100644
index 0000000000..3d3346b87d
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/panel.vue
@@ -0,0 +1,62 @@
+<template>
+	<section
+		class="workbench-panel h-full min-h-0 w-full"
+		:class="[panel?.scroll === false ? '' : 'overflow-auto', { 'p-3': panel?.padded }]"
+		:inert="regionHidden"
+		:aria-label="panel?.title"
+	>
+		<LinkedPanels v-if="panel?.members" :tab="panel" />
+		<SlotOutlet v-else-if="workbench.slots[slotName]" :slots="workbench.slots" :name="slotName" />
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { DockviewPanelApi } from 'dockview-vue'
+import { computed, onBeforeUnmount, ref, shallowRef } from 'vue'
+
+import type { WorkbenchPanelParams } from '../../composables/create-workbench'
+import { injectWorkbench, provideWorkbenchPanel } from '../../providers/workbench'
+import { WORKBENCH_REGIONS, type WorkbenchRegion } from '../../types'
+import { SlotOutlet } from '../slot-outlet'
+import LinkedPanels from './linked-panels.vue'
+
+const props = defineProps<{
+	params: {
+		params: WorkbenchPanelParams
+		api: DockviewPanelApi
+	}
+}>()
+
+const workbench = injectWorkbench()
+const id = props.params.params.id
+
+const panel = computed(() => workbench.panels.value.find((candidate) => candidate.id === id))
+const slotName = `panel-${id}` as const
+
+const host = computed(() => (panel.value ? workbench.regionOf(panel.value) : 'center'))
+const regionHidden = computed(
+	() =>
+		(WORKBENCH_REGIONS as readonly string[]).includes(host.value) &&
+		(!workbench.visible[host.value as WorkbenchRegion].value ||
+			workbench.collapsed[host.value as WorkbenchRegion].value),
+)
+
+const tabVisible = ref(props.params.api.isVisible)
+const visibility = props.params.api.onDidVisibilityChange(
+	(event) => (tabVisible.value = event.isVisible),
+)
+const ownerWindow = shallowRef(props.params.api.getWindow())
+const location = props.params.api.onDidLocationChange(
+	() => (ownerWindow.value = props.params.api.getWindow()),
+)
+onBeforeUnmount(() => {
+	visibility.dispose()
+	location.dispose()
+})
+
+provideWorkbenchPanel({
+	id,
+	visible: computed(() => tabVisible.value && !regionHidden.value),
+	window: ownerWindow,
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/tab.vue b/packages/ui/src/layouts/shared/workbench/components/dock/tab.vue
new file mode 100644
index 0000000000..b1d4053331
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/tab.vue
@@ -0,0 +1,111 @@
+<template>
+	<div
+		:data-workbench-panel="id"
+		class="group flex h-full items-center gap-1 text-sm"
+		:class="tabClass"
+		:title="rounded ? undefined : panel?.title"
+		@auxclick.prevent="(event) => event.button === 1 && canClose && close()"
+		@contextmenu.prevent.stop="(event) => workbench.openPanelMenu(event, id)"
+	>
+		<component
+			:is="customContent"
+			v-if="customContent && panel"
+			:panel="panel"
+			:active="isActive"
+			:selected="isSelected"
+		/>
+		<template v-else>
+			<component
+				:is="panel.icon"
+				v-if="panel?.icon"
+				class="size-4 shrink-0"
+				:class="iconClass"
+				aria-hidden="true"
+			/>
+			<span class="truncate" :class="titleClass">{{ panel?.title }}</span>
+		</template>
+		<button
+			v-if="canClose"
+			type="button"
+			:aria-label="formatMessage(messages.close, { name: panel?.title ?? id })"
+			class="flex size-4 shrink-0 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-current opacity-0 hover:bg-surface-5 focus-visible:opacity-100 group-hover:opacity-100"
+			:class="{ 'opacity-100': isActive }"
+			@pointerdown.stop
+			@mousedown.stop
+			@click.stop="close"
+		>
+			<XIcon class="size-3" aria-hidden="true" />
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import type { DockviewPanelApi } from 'dockview-vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import type { WorkbenchPanelParams } from '../../composables/create-workbench'
+import { injectWorkbench } from '../../providers/workbench'
+
+const props = defineProps<{
+	params: {
+		params: WorkbenchPanelParams
+		api: DockviewPanelApi
+	}
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	close: {
+		id: 'workbench.tab.close',
+		defaultMessage: 'Close {name}',
+	},
+})
+
+const workbench = injectWorkbench()
+const id = props.params.params.id
+
+const panel = computed(() => workbench.panels.value.find((candidate) => candidate.id === id))
+const rounded = computed(() => workbench.variant.value === 'rounded')
+const customContent = computed(() => workbench.slots.tab)
+const canClose = computed(() => workbench.mode.closePanels)
+const isSelected = computed(() => workbench.selectedPanels.value.includes(id))
+
+const isActive = ref(props.params.api.isVisible)
+const visibility = props.params.api.onDidVisibilityChange(
+	(event) => (isActive.value = event.isVisible),
+)
+onBeforeUnmount(() => visibility.dispose())
+
+/** Rounded tabs are pills, green while shown; square ones are plain, marked by the tab bar. */
+const tabClass = computed(() =>
+	rounded.value
+		? [
+				'box-border w-full justify-center whitespace-nowrap rounded-lg border border-solid px-2 font-medium transition-all active:scale-[0.97] motion-reduce:transition-none',
+				isActive.value
+					? 'border-green bg-highlight-green text-green'
+					: 'border-transparent bg-transparent text-primary hover:bg-surface-3',
+				{ 'ring-1 ring-inset ring-primary': isSelected.value },
+			]
+		: [
+				'max-w-[14rem] pl-2.5',
+				canClose.value ? 'pr-1.5' : 'pr-2.5',
+				{ 'bg-surface-3': isSelected.value },
+			],
+)
+const iconClass = computed(() => {
+	if (rounded.value) return ''
+	return isActive.value ? 'text-brand' : 'text-secondary'
+})
+const titleClass = computed(() => {
+	if (rounded.value) return ''
+	return isActive.value ? 'font-semibold text-contrast' : 'text-secondary'
+})
+
+function close() {
+	workbench.closePanel(id)
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/dock/watermark.vue b/packages/ui/src/layouts/shared/workbench/components/dock/watermark.vue
new file mode 100644
index 0000000000..0c2654b3d9
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/dock/watermark.vue
@@ -0,0 +1,38 @@
+<template>
+	<div v-if="inPopout" class="flex h-full items-center justify-center p-3 text-secondary">
+		<span role="status">{{ formatMessage(messages.emptyPopout) }}</span>
+	</div>
+	<component
+		:is="workbench.documents.watermark"
+		v-else-if="workbench.documents?.watermark && inCenter"
+		:params="params"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { WatermarkRendererInitParameters } from 'dockview-vue'
+import { computed } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { injectWorkbench, injectWorkbenchDock } from '../../providers/workbench'
+
+defineOptions({ inheritAttrs: false })
+
+/** Shown in an empty group: a note in an emptied popout window, or the documents' own in the center. */
+const props = defineProps<{ params: WatermarkRendererInitParameters }>()
+
+const { formatMessage } = useVIntl()
+const workbench = injectWorkbench()
+const host = injectWorkbenchDock()
+
+const messages = defineMessages({
+	emptyPopout: {
+		id: 'workbench.popout.empty',
+		defaultMessage: 'No tabs open in this panel',
+	},
+})
+
+const inPopout = computed(() => props.params.group?.api.location.type === 'popout')
+const inCenter = host === 'center'
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/slot-outlet.ts b/packages/ui/src/layouts/shared/workbench/components/slot-outlet.ts
new file mode 100644
index 0000000000..68150321ec
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/slot-outlet.ts
@@ -0,0 +1,20 @@
+import { defineComponent, type PropType, renderSlot, type Slots } from 'vue'
+
+/**
+ * Renders a slot handed over from another component (e.g. the workbench's panel slots, shown from
+ * within dockview's panels). Compiled slots have to go through `renderSlot` to keep their block
+ * tree intact; rendering one directly as a component (`<component :is="slot" />`) lets updates
+ * patch the wrong nodes once its content has conditional parts.
+ */
+export const SlotOutlet = defineComponent({
+	name: 'SlotOutlet',
+	props: {
+		slots: { type: Object as PropType<Slots>, required: true },
+		name: { type: String, required: true },
+		/** Props handed to the slot, as a scoped slot's are. */
+		slotProps: { type: Object as PropType<Record<string, unknown>>, default: undefined },
+	},
+	setup(props) {
+		return () => renderSlot(props.slots, props.name, props.slotProps)
+	},
+})
diff --git a/packages/ui/src/layouts/shared/workbench/components/toolbar-controls.vue b/packages/ui/src/layouts/shared/workbench/components/toolbar-controls.vue
new file mode 100644
index 0000000000..4132b5f493
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/toolbar-controls.vue
@@ -0,0 +1,90 @@
+<template>
+	<TeleportOverflowMenu
+		type="quiet"
+		size="xs"
+		:circular="false"
+		:label="formatMessage(messages.layout)"
+		:tooltip="formatMessage(messages.layout)"
+		:options="options"
+	>
+		<LayoutTemplateIcon aria-hidden="true" />
+	</TeleportOverflowMenu>
+</template>
+
+<script setup lang="ts">
+import {
+	LayoutTemplateIcon,
+	MonitorXIcon,
+	PanelLeftOpenIcon,
+	PanelRightOpenIcon,
+	PanelTopIcon,
+	UndoIcon,
+} from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { type ButtonMenuOption, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { injectWorkbench } from '../providers/workbench'
+import type { WorkbenchRegion } from '../types'
+
+/**
+ * The layout menu: showing and hiding each region, opening and closing panels, returning popped
+ * out panels, and resetting the layout to its defaults.
+ */
+const { formatMessage } = useVIntl()
+const workbench = injectWorkbench()
+
+const messages = defineMessages({
+	layout: { id: 'workbench.layout-menu', defaultMessage: 'Layout' },
+	regions: { id: 'workbench.layout-menu.regions', defaultMessage: 'Regions' },
+	left: { id: 'workbench.layout-menu.left', defaultMessage: 'Left panel' },
+	right: { id: 'workbench.layout-menu.right', defaultMessage: 'Right panel' },
+	bottom: { id: 'workbench.layout-menu.bottom', defaultMessage: 'Bottom panel' },
+	resetLayout: { id: 'workbench.reset-layout', defaultMessage: 'Reset layout' },
+	closePopouts: { id: 'workbench.close-popouts', defaultMessage: 'Close popout windows' },
+})
+
+const regionIcons = {
+	left: PanelLeftOpenIcon,
+	right: PanelRightOpenIcon,
+	bottom: PanelTopIcon,
+} satisfies Record<WorkbenchRegion, unknown>
+
+/** The icons have no bottom panel of their own, so the top one is turned over. */
+const bottomIconClass = computed(() => 'rotate-180')
+
+const options = computed<ButtonMenuOption[]>(() => [
+	{ type: 'heading', id: 'regions', label: formatMessage(messages.regions) },
+	...workbench.usedRegions.value.map((region) => ({
+		id: `region-${region}`,
+		label: formatMessage(messages[region]),
+		icon: regionIcons[region],
+		iconClass: region === 'bottom' ? bottomIconClass : undefined,
+		selected: workbench.visible[region].value,
+		remainOpen: true,
+		action: () => workbench.toggleRegion(region),
+	})),
+	...(workbench.mode.closePanels
+		? [{ type: 'divider' as const, id: 'panels-divider' }, ...workbench.panelsMenuOptions.value]
+		: []),
+	{ type: 'divider', id: 'reset-divider' },
+	...(workbench.hasPopouts.value
+		? [
+				{
+					id: 'close-popouts',
+					label: formatMessage(messages.closePopouts),
+					icon: MonitorXIcon,
+					action: () => workbench.closePopouts(),
+				},
+			]
+		: []),
+	{
+		id: 'reset-layout',
+		label: formatMessage(messages.resetLayout),
+		icon: UndoIcon,
+		disabled: workbench.poppingOut.value.length > 0,
+		action: () => workbench.resetLayout(),
+	},
+])
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/components/toolbar.vue b/packages/ui/src/layouts/shared/workbench/components/toolbar.vue
new file mode 100644
index 0000000000..9335fe4d09
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/components/toolbar.vue
@@ -0,0 +1,27 @@
+<template>
+	<div
+		class="workbench-toolbar flex min-h-10 shrink-0 flex-wrap items-center gap-2 border-0 border-t border-solid border-surface-4 bg-surface-3 px-2 py-1"
+	>
+		<SlotOutlet v-if="workbench.slots.toolbar" :slots="workbench.slots" name="toolbar" />
+		<div class="ml-auto flex items-center gap-1">
+			<SlotOutlet
+				v-if="workbench.slots['toolbar-end']"
+				:slots="workbench.slots"
+				name="toolbar-end"
+			/>
+			<ToolbarControls />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { injectWorkbench } from '../providers/workbench'
+import { SlotOutlet } from './slot-outlet'
+import ToolbarControls from './toolbar-controls.vue'
+
+/**
+ * The workbench's toolbar, along the bottom of the center like a review's queue bar: the host's
+ * controls, then its end controls and the layout menu.
+ */
+const workbench = injectWorkbench()
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/composables/create-workbench.ts b/packages/ui/src/layouts/shared/workbench/composables/create-workbench.ts
new file mode 100644
index 0000000000..45f4258dd6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/composables/create-workbench.ts
@@ -0,0 +1,1600 @@
+import type {
+	AddPanelPositionOptions,
+	DockviewApi,
+	DockviewDidDropEvent,
+	DockviewDndOverlayEvent,
+	DockviewGroupPanel,
+	DockviewIDisposable,
+	DockviewReadyEvent,
+	GridviewApi,
+	GridviewReadyEvent,
+	GroupviewPanelState,
+	IDockviewPanel,
+	Position,
+	SerializedDockview,
+} from 'dockview-vue'
+import { LayoutPriority } from 'dockview-vue'
+import {
+	computed,
+	type MaybeRefOrGetter,
+	onBeforeUnmount,
+	type Ref,
+	ref,
+	shallowRef,
+	type Slots,
+	toValue,
+	watch,
+} from 'vue'
+
+import type { ButtonMenuOption } from '#ui/components/base/buttons/types'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import type { WorkbenchContext } from '../providers/workbench'
+import {
+	DEFAULT_WORKBENCH_REGION_SIZES,
+	WORKBENCH_CENTER_MINIMUM,
+	WORKBENCH_HOSTS,
+	WORKBENCH_MODES,
+	WORKBENCH_REGIONS,
+	type WorkbenchDocuments,
+	type WorkbenchHost,
+	type WorkbenchLink,
+	type WorkbenchLinkOrientation,
+	type WorkbenchMode,
+	type WorkbenchModeName,
+	type WorkbenchPanel,
+	type WorkbenchPopoutRestore,
+	type WorkbenchRegion,
+	type WorkbenchRegionSizes,
+	type WorkbenchSplitSide,
+	type WorkbenchToggleAction,
+	type WorkbenchToggleLocation,
+	type WorkbenchVariant,
+} from '../types'
+import {
+	evenOutDockSash,
+	findCornerGroups,
+	registerEvenSplits,
+	registerNoSplits,
+	registerPanelOnlyDrops,
+	registerWrappedTabs,
+} from './dock-behaviours'
+import { createDockPopouts, type DockPopouts, usePopoutServices } from './dock-popouts'
+import { registerTabBars } from './tab-bars'
+import { useWorkbenchMenus } from './use-menus'
+import { useWorkbenchSelection } from './use-tab-selection'
+import { useWorkbenchWindows } from './use-windows'
+
+const messages = defineMessages({
+	showTabs: { id: 'workbench.lone-tab.show-tabs', defaultMessage: 'Show tabs' },
+	hideTabs: { id: 'workbench.lone-tab.hide-tabs', defaultMessage: 'Hide tabs' },
+})
+
+export const WORKBENCH_DOCK_COMPONENT = 'workbenchDock'
+export const WORKBENCH_PANEL_COMPONENT = 'workbenchPanel'
+export const WORKBENCH_TAB_COMPONENT = 'workbenchTab'
+
+const STORAGE_PREFIX = 'workbench-layout:'
+const LINK_PREFIX = 'link:'
+const LAYOUT_VERSION = 4
+const SAVE_DELAY = 200
+
+/** How wide (or tall, for the bottom) a collapsed region's strip of tabs is. */
+export const WORKBENCH_COLLAPSED_SIZE = 36
+
+export interface WorkbenchDockParams {
+	host: WorkbenchHost
+}
+
+export interface WorkbenchPanelParams {
+	id: string
+}
+
+/** A workbench's layout, as persisted to local storage. */
+interface SavedWorkbenchLayout {
+	version: typeof LAYOUT_VERSION
+	variant?: WorkbenchVariant
+	/** Whether panels can be popped out, for modes that allow it. */
+	popouts?: boolean
+	/** Where the region toggles sit, for modes with a toolbar. */
+	toggles?: WorkbenchToggleLocation
+	/** Whether the region toggles hide their regions or collapse them. */
+	toggleAction?: WorkbenchToggleAction
+	/** Whether groups holding a single tab (outside the center) hide their tab bar. */
+	hideLoneTabs?: boolean
+	/** Panels whose groups' tab bars the user hid. */
+	hiddenBars?: string[]
+	/** What becomes of popped out panels when the page is opened again. */
+	popoutRestore?: WorkbenchPopoutRestore
+	sizes: Partial<Record<WorkbenchRegion, number>>
+	visible: Partial<Record<WorkbenchRegion, boolean>>
+	/** Regions collapsed to a strip of their tabs. */
+	collapsed?: Partial<Record<WorkbenchRegion, boolean>>
+	/** Each dock's arrangements, by the set of workbench panels it held at the time. */
+	docks: Partial<Record<WorkbenchHost, Record<string, SerializedDockview>>>
+	/** Panels moved away from the dock they're declared in. */
+	placements: Record<string, WorkbenchHost>
+	/** Panels the user closed. */
+	closed: string[]
+	/** Panels the layout has known, so ones closed by default only start closed the first time. */
+	seen?: string[]
+	/** Panels linked into single tabs. */
+	links?: WorkbenchLink[]
+}
+
+export interface WorkbenchOptions {
+	panels: MaybeRefOrGetter<WorkbenchPanel[]>
+	/**
+	 * Identifies the layout in local storage. `null` keeps it in memory only, e.g. for a one-off
+	 * view that shouldn't touch the user's own arrangement.
+	 */
+	storageKey: string | null
+	/** How much of the layout users can change; a preset's name, or the features themselves. */
+	mode?: WorkbenchModeName | WorkbenchMode
+	/** The look used until the user picks one. */
+	variant?: WorkbenchVariant
+	sizes?: Partial<WorkbenchRegionSizes>
+	/** Minimum size of the center, in both directions. */
+	centerMinimum?: number
+	/** Regions hidden when opened, regardless of how they were left. */
+	hiddenRegions?: WorkbenchRegion[]
+	documents?: WorkbenchDocuments
+	/**
+	 * Whether the panels are settled (e.g. their data has loaded). Until then the saved layout is
+	 * neither restored nor overwritten, so it isn't lost to a partial set of panels.
+	 */
+	ready?: MaybeRefOrGetter<boolean>
+}
+
+function loadLayout(storageKey: string | null): SavedWorkbenchLayout | null {
+	if (!storageKey) return null
+	try {
+		const saved = JSON.parse(localStorage.getItem(STORAGE_PREFIX + storageKey) ?? 'null')
+		return saved?.version === LAYOUT_VERSION ? (saved as SavedWorkbenchLayout) : null
+	} catch {
+		return null
+	}
+}
+
+function saveLayout(storageKey: string | null, layout: SavedWorkbenchLayout) {
+	if (!storageKey) return
+	try {
+		localStorage.setItem(STORAGE_PREFIX + storageKey, JSON.stringify(layout))
+	} catch {
+		// Storage may be full or unavailable; the layout then only lives in memory.
+	}
+}
+
+const DROP_DIRECTIONS = {
+	top: 'above',
+	bottom: 'below',
+	left: 'left',
+	right: 'right',
+	center: 'within',
+} as const satisfies Record<Position, string>
+
+/** Where a panel dropped at `position` (of `group`, or of the whole dock without one) goes. */
+function dropPosition(
+	position: Position,
+	group?: DockviewGroupPanel,
+): AddPanelPositionOptions | undefined {
+	if (group) return { referenceGroup: group, direction: DROP_DIRECTIONS[position] }
+	if (position === 'center') return undefined
+	return { direction: DROP_DIRECTIONS[position] }
+}
+
+/**
+ * The position, unless it's beside a group the dock no longer has (e.g. one dropped on before the
+ * dock loaded another arrangement), in which case the dock's default one.
+ */
+function usablePosition(api: DockviewApi, position: AddPanelPositionOptions | undefined) {
+	const group = position && 'referenceGroup' in position ? position.referenceGroup : undefined
+	if (!group || typeof group === 'string') return position
+	return api.getGroup(group.id) === group ? position : defaultPosition(api)
+}
+
+/** Alongside the panels of the dock's active (or first) group in the main window. */
+function defaultPosition(api: DockviewApi): AddPanelPositionOptions | undefined {
+	const inGrid = (group?: DockviewGroupPanel | null) => group?.api.location.type === 'grid'
+	const group = inGrid(api.activeGroup)
+		? api.activeGroup
+		: api.groups.find((candidate) => inGrid(candidate))
+	return group ? { referenceGroup: group, direction: 'within' } : undefined
+}
+
+/**
+ * Where a panel the layout hasn't placed yet starts: with the placed panels of its `group`, or
+ * else in a group of its own below the dock's others (see `WorkbenchPanel.group`).
+ */
+function startingPosition(
+	api: DockviewApi,
+	panel: WorkbenchPanel,
+	wanted: WorkbenchPanel[],
+): AddPanelPositionOptions | undefined {
+	if (!panel.group) return defaultPosition(api)
+	const sibling = wanted.find(
+		(other) => other.id !== panel.id && other.group === panel.group && api.getPanel(other.id),
+	)
+	if (sibling) return { referencePanel: sibling.id, direction: 'within' }
+	return api.panels.length > 0 ? { direction: 'below' } : defaultPosition(api)
+}
+
+function isRegion(host: WorkbenchHost): host is WorkbenchRegion {
+	return host !== 'center'
+}
+
+function resolveMode(mode: WorkbenchOptions['mode']): WorkbenchMode {
+	if (!mode) return WORKBENCH_MODES.explorer
+	return typeof mode === 'string' ? WORKBENCH_MODES[mode] : mode
+}
+
+/**
+ * Lays the workbench out as a grid: its center, with resizable regions to the left, right and
+ * below it. Each is its own dockview (a "dock"), so its panels can be tabbed and split within it,
+ * and (as the mode allows) dragged or moved from their menu between docks, or popped out into
+ * windows of their own. Besides its own panels, it hosts `documents` (e.g. file tabs) whose owner
+ * creates and closes them. Region sizes and visibility, every dock's arrangement (per set of
+ * panels it held), where panels were moved or closed, and the look are persisted per
+ * `storageKey`.
+ *
+ * Create it in the host's setup and hand it to `WorkbenchLayout`, so the host can use it (e.g.
+ * provide its own context from it) before the layout renders.
+ */
+export function createWorkbench(options: WorkbenchOptions): WorkbenchContext {
+	const { formatMessage } = useVIntl()
+	const mode = resolveMode(options.mode)
+	const sizes: WorkbenchRegionSizes = { ...DEFAULT_WORKBENCH_REGION_SIZES, ...options.sizes }
+	const centerMinimum = options.centerMinimum ?? WORKBENCH_CENTER_MINIMUM
+	const saved = loadLayout(options.storageKey)
+	const documents = options.documents
+	const regions = WORKBENCH_REGIONS.filter((region) => mode.regions.includes(region))
+	const popoutHosts: WorkbenchHost[] = mode.popouts ? (mode.popouts.docks ?? ['center']) : []
+
+	const root = shallowRef<HTMLElement | null>(null)
+	const windows = useWorkbenchWindows()
+	const selection = mode.tabSelection ? useWorkbenchSelection(windows) : null
+	const popoutServices = popoutHosts.length ? usePopoutServices() : null
+
+	const variant = ref<WorkbenchVariant>(saved?.variant ?? options.variant ?? 'square')
+	const popoutsEnabled = ref(saved?.popouts ?? true)
+	const hideLoneTabBars = ref(saved?.hideLoneTabs ?? false)
+	const hiddenBars = ref<string[]>(saved?.hiddenBars ?? [])
+	const popoutRestore = ref<WorkbenchPopoutRestore>(saved?.popoutRestore ?? 'prompt')
+	const toggleLocation = ref<WorkbenchToggleLocation>(
+		saved?.toggles ?? (mode.cornerToggles ? 'tabs' : 'menu'),
+	)
+	const toggleAction = ref<WorkbenchToggleAction>(saved?.toggleAction ?? 'hide')
+	/** Modes without a toolbar always keep their toggles in the tab bar, having nowhere else for them. */
+	const cornerToggles = computed(() => !mode.toolbar || toggleLocation.value === 'tabs')
+
+	const documentLoaded = ref(typeof document === 'undefined' || document.readyState === 'complete')
+	function onDocumentLoad() {
+		documentLoaded.value = true
+	}
+	if (!documentLoaded.value) window.addEventListener('load', onDocumentLoad, { once: true })
+
+	const isReady = computed(() => (toValue(options.ready) ?? true) && documentLoaded.value)
+	/** Set while the page unloads, after its layout was saved, so the teardown doesn't overwrite it. */
+	let leavingPage = false
+
+	/** The host's panels, before any are linked into single tabs. */
+	const ownPanels = computed(() =>
+		toValue(options.panels).filter(
+			(panel) => panel.region === 'center' || regions.includes(panel.region),
+		),
+	)
+	const links = ref<WorkbenchLink[]>(saved?.links ?? [])
+	/** Links of two or more panels the host still offers, holding only those. */
+	const activeLinks = computed(() =>
+		links.value
+			.map((link) => ({
+				...link,
+				members: link.members.filter((id) => ownPanels.value.some((panel) => panel.id === id)),
+			}))
+			.filter((link) => link.members.length > 1),
+	)
+
+	function linkOf(id: string) {
+		return activeLinks.value.find((link) => link.members.includes(id))
+	}
+
+	/** The panel holding a panel in view: its linked tab, if it's linked, or else itself. */
+	function hostPanelId(id: string) {
+		return linkOf(id)?.id ?? id
+	}
+
+	/** A linked tab, standing in for its members where the first of them was offered. */
+	function linkedTab(link: WorkbenchLink): WorkbenchPanel {
+		const members = link.members.flatMap((id) => {
+			const panel = ownPanels.value.find((candidate) => candidate.id === id)
+			return panel ? [panel] : []
+		})
+		const [first] = members
+		return {
+			id: link.id,
+			title: members.map((member) => member.title).join(' · '),
+			icon: first.icon,
+			region: first.region,
+			group: first.group,
+			scroll: false,
+			minimumHeight: Math.max(0, ...members.map((member) => member.minimumHeight ?? 0)),
+			members,
+		}
+	}
+
+	/** The panels as the docks hold them, with linked panels replaced by their linked tabs. */
+	const panels = computed(() =>
+		ownPanels.value.flatMap((panel) => {
+			const link = linkOf(panel.id)
+			if (!link) return [panel]
+			return link.members[0] === panel.id ? [linkedTab(link)] : []
+		}),
+	)
+	const placements = ref<Record<string, WorkbenchHost>>({ ...saved?.placements })
+	/** Panels starting closed, unless the saved layout already decided whether they're open. */
+	function closedByDefault() {
+		return toValue(options.panels)
+			.filter((panel) => panel.closedByDefault && !saved?.seen?.includes(panel.id))
+			.map((panel) => panel.id)
+	}
+	const closed = ref<string[]>(
+		mode.closePanels ? [...new Set([...(saved?.closed ?? []), ...closedByDefault()])] : [],
+	)
+
+	/** The dock a panel is in: the one its linked tab is in, if it's linked. */
+	function regionOf(panel: WorkbenchPanel): WorkbenchHost {
+		const link = linkOf(panel.id)
+		const id = link?.id ?? panel.id
+		const declared = link ? linkedTab(link).region : panel.region
+		const placed = mode.movePanels ? placements.value[id] : undefined
+		return placed && (placed === 'center' || regions.includes(placed)) ? placed : declared
+	}
+
+	const openPanels = computed(() =>
+		panels.value.filter((panel) => !closed.value.includes(panel.id)),
+	)
+	const closedPanels = computed(() =>
+		panels.value.filter((panel) => closed.value.includes(panel.id)),
+	)
+
+	function panelsIn(host: WorkbenchHost) {
+		return openPanels.value.filter((panel) => regionOf(panel) === host)
+	}
+
+	/** Identifies the set of workbench panels a dock holds, which its saved arrangements are kept by. */
+	function panelSetKey(host: WorkbenchHost) {
+		return panelsIn(host)
+			.map((panel) => panel.id)
+			.sort()
+			.join(',')
+	}
+
+	function findPanel(id: string) {
+		return panels.value.find((candidate) => candidate.id === id)
+	}
+
+	function isDocumentComponent(component: string | undefined) {
+		return !!documents && !!component && component in documents.components
+	}
+
+	function isDocumentPanel(panel: IDockviewPanel) {
+		return isDocumentComponent(panel.api.component)
+	}
+
+	function hasSavedDocuments(host: WorkbenchHost) {
+		return Object.values(saved?.docks?.[host] ?? {}).some((layout) =>
+			Object.values(layout.panels ?? {}).some((panel) =>
+				isDocumentComponent(panel.contentComponent),
+			),
+		)
+	}
+
+	/**
+	 * Every region of the mode stays laid out, so one emptied by dragging its panels away can take
+	 * them back; the toggles show and hide them.
+	 */
+	const usedRegions = computed(() => [...regions])
+
+	const regionSizes = Object.fromEntries(
+		WORKBENCH_REGIONS.map((region) => [region, saved?.sizes[region] ?? sizes[region].default]),
+	) as Record<WorkbenchRegion, number>
+
+	const visible = Object.fromEntries(
+		WORKBENCH_REGIONS.map((region) => [
+			region,
+			ref(
+				regions.includes(region) &&
+					!options.hiddenRegions?.includes(region) &&
+					(saved?.visible[region] ?? (panelsIn(region).length > 0 || hasSavedDocuments(region))),
+			),
+		]),
+	) as Record<WorkbenchRegion, Ref<boolean>>
+
+	/** Regions collapsed to a strip of their tabs, which brings any of them back. */
+	const collapsed = Object.fromEntries(
+		WORKBENCH_REGIONS.map((region) => [
+			region,
+			ref(regions.includes(region) && !!saved?.collapsed?.[region]),
+		]),
+	) as Record<WorkbenchRegion, Ref<boolean>>
+
+	/** How wide (or tall) a region is laid out while shown: its size, or its strip's if collapsed. */
+	function shownSize(region: WorkbenchRegion) {
+		return collapsed[region].value ? WORKBENCH_COLLAPSED_SIZE : regionSizes[region]
+	}
+
+	/** How wide (or tall, for the bottom) each region is shown, 0 while hidden. */
+	const regionExtents = Object.fromEntries(
+		WORKBENCH_REGIONS.map((region) => [region, ref(visible[region].value ? shownSize(region) : 0)]),
+	) as Record<WorkbenchRegion, Ref<number>>
+
+	/** Top-right group of each region's dock, whose tab bar holds the button collapsing the region. */
+	const regionCornerGroups = ref<Partial<Record<WorkbenchRegion, string>>>({})
+
+	/** Bumped as docks rearrange, so what's derived from their arrangement (e.g. strips) follows. */
+	const arrangement = ref(0)
+
+	/** The center's top-left and top-right groups, whose tab bars hold the corner region toggles. */
+	const cornerGroups = ref<{ left?: string; right?: string }>({})
+
+	let grid: GridviewApi | null = null
+	let gridDisposables: DockviewIDisposable[] = []
+
+	interface Dock {
+		api: DockviewApi
+		disposables: DockviewIDisposable[]
+		/** The panel set the dock's arrangement was last loaded or saved for. */
+		key?: string
+		popouts?: DockPopouts
+		wrappedTabs?: DockviewIDisposable
+		tabBars?: ReturnType<typeof registerTabBars>
+	}
+
+	const docks = new Map<WorkbenchHost, Dock>()
+	/** Saved arrangements per dock, by panel set, updated as docks are saved. */
+	const savedDockLayouts = Object.fromEntries(
+		WORKBENCH_HOSTS.map((host) => [host, new Map(Object.entries(saved?.docks?.[host] ?? {}))]),
+	) as Record<WorkbenchHost, Map<string, SerializedDockview>>
+	/** Where panels being moved into a dock should go once it adds them. */
+	const pendingPositions = new Map<string, AddPanelPositionOptions | undefined>()
+	/** Documents headed for a dock that isn't set up yet. */
+	const pendingDocuments = new Map<WorkbenchHost, GroupviewPanelState[]>()
+	/** Removals made here rather than by the user closing the panel. */
+	let ownRemovals = 0
+
+	let saveTimer: ReturnType<typeof setTimeout> | undefined
+
+	function isHorizontal(region: WorkbenchRegion) {
+		return region !== 'bottom'
+	}
+
+	/**
+	 * Whether the grid has been laid out at its real size. Until then the sizes dockview gives the
+	 * regions aren't theirs, so they aren't measured (and saved over the ones they should have).
+	 */
+	let gridSized = false
+	/** Set while the regions' sizes are applied one by one, so the in-between layouts aren't measured. */
+	let applyingSizes = false
+
+	function measureRegions() {
+		if (!gridSized || applyingSizes) return
+		for (const region of regions) {
+			const panel = grid?.getPanel(region)
+			if (!panel) continue
+			const size = isHorizontal(region) ? panel.api.width : panel.api.height
+			if (visible[region].value && !collapsed[region].value && size > 0) {
+				regionSizes[region] = size
+			}
+			regionExtents[region].value = visible[region].value ? size : 0
+		}
+	}
+
+	function dockLayout(dock: Dock) {
+		return dock.popouts?.currentLayout() ?? dock.api.toJSON()
+	}
+
+	function persist() {
+		clearTimeout(saveTimer)
+		if (!isReady.value || leavingPage) return
+		measureRegions()
+		for (const [host, dock] of docks) {
+			if (dock.key !== undefined) savedDockLayouts[host].set(dock.key, dockLayout(dock))
+		}
+		saveLayout(options.storageKey, {
+			version: LAYOUT_VERSION,
+			variant: variant.value,
+			popouts: popoutsEnabled.value,
+			toggles: toggleLocation.value,
+			toggleAction: toggleAction.value,
+			hideLoneTabs: hideLoneTabBars.value,
+			hiddenBars: hiddenBars.value,
+			popoutRestore: popoutRestore.value,
+			sizes: { ...regionSizes },
+			visible: Object.fromEntries(regions.map((region) => [region, visible[region].value])),
+			collapsed: Object.fromEntries(regions.map((region) => [region, collapsed[region].value])),
+			docks: Object.fromEntries(
+				WORKBENCH_HOSTS.map((host) => [host, Object.fromEntries(savedDockLayouts[host])]),
+			),
+			placements: { ...placements.value },
+			closed: [...closed.value],
+			seen: [...ownPanels.value, ...panels.value].map((panel) => panel.id),
+			links: links.value,
+		})
+	}
+
+	function scheduleSave() {
+		clearTimeout(saveTimer)
+		if (leavingPage) return
+		saveTimer = setTimeout(persist, SAVE_DELAY)
+	}
+
+	/** A collapsed region is held at its strip's size; otherwise it can be resized past its minimum. */
+	function regionConstraints(region: WorkbenchRegion) {
+		const fixed = collapsed[region].value ? WORKBENCH_COLLAPSED_SIZE : undefined
+		const minimum = fixed ?? sizes[region].minimum
+		const maximum = fixed ?? Number.MAX_SAFE_INTEGER
+		return isHorizontal(region)
+			? { minimumWidth: minimum, maximumWidth: maximum }
+			: { minimumHeight: minimum, maximumHeight: maximum }
+	}
+
+	function applyRegionSize(region: WorkbenchRegion) {
+		const panel = grid?.getPanel(region)
+		if (!panel) return
+		const size = shownSize(region)
+		panel.api.setConstraints(regionConstraints(region))
+		panel.api.setSize(isHorizontal(region) ? { width: size } : { height: size })
+	}
+
+	function addRegion(region: WorkbenchRegion) {
+		if (!grid || grid.getPanel(region)) return
+		grid.addPanel<WorkbenchDockParams>({
+			id: region,
+			component: WORKBENCH_DOCK_COMPONENT,
+			params: { host: region },
+			position: { direction: region === 'bottom' ? 'below' : region, referencePanel: 'center' },
+			...regionConstraints(region),
+			/*
+			 * Offered space last, so the center (and the branch holding it with the bottom region)
+			 * takes up the workbench being resized, rather than a region growing past its saved size.
+			 */
+			priority: LayoutPriority.Low,
+		})
+		applyRegionSize(region)
+		grid.getPanel(region)?.api.setVisible(visible[region].value)
+	}
+
+	function onGridReady({ api }: GridviewReadyEvent) {
+		onGridDispose()
+		grid = api
+		api.addPanel<WorkbenchDockParams>({
+			id: 'center',
+			component: WORKBENCH_DOCK_COMPONENT,
+			params: { host: 'center' },
+			minimumWidth: centerMinimum,
+			minimumHeight: centerMinimum,
+			priority: LayoutPriority.High,
+		})
+		for (const region of regions) addRegion(region)
+		gridDisposables = [api.onDidLayoutChange(onGridLayout)]
+		onGridLayout()
+	}
+
+	/** Gives the regions their sizes once the grid has its own, then keeps measuring them. */
+	function onGridLayout() {
+		if (!grid) return
+		if (!gridSized) {
+			if (grid.width <= 0 || grid.height <= 0) return
+			gridSized = true
+			applyRegionSizes()
+		}
+		measureRegions()
+		scheduleSave()
+	}
+
+	function applyRegionSizes() {
+		applyingSizes = true
+		try {
+			for (const region of regions) applyRegionSize(region)
+		} finally {
+			applyingSizes = false
+		}
+		measureRegions()
+	}
+
+	function onGridDispose() {
+		for (const disposable of gridDisposables) disposable.dispose()
+		gridDisposables = []
+		grid = null
+		gridSized = false
+	}
+
+	function withOwnRemovals(action: () => void) {
+		ownRemovals += 1
+		try {
+			action()
+		} finally {
+			ownRemovals -= 1
+		}
+	}
+
+	function removeOwn(api: DockviewApi, id: string) {
+		const panel = api.getPanel(id)
+		if (panel) withOwnRemovals(() => api.removePanel(panel))
+	}
+
+	/** Groups of headerless docks hide their tab bar. */
+	function applyHeaders(host: WorkbenchHost) {
+		const api = docks.get(host)?.api
+		if (!api || !mode.headerless.includes(host)) return
+		for (const group of api.groups) {
+			if (group.header.hidden) continue
+			group.header.hidden = true
+			group.relayout()
+		}
+	}
+
+	/**
+	 * Adds the dock's missing workbench panels, drops ones it no longer holds (one popped out is
+	 * released from its window, which stays open for it to return to) and updates titles.
+	 */
+	function syncDockPanels(host: WorkbenchHost) {
+		const dock = docks.get(host)
+		if (!dock || dock.key === undefined) return
+		const { api } = dock
+		const wanted = panelsIn(host)
+		const ids = new Set(wanted.map((panel) => panel.id))
+
+		const leaving = api.panels.filter((panel) => !ids.has(panel.id) && !isDocumentPanel(panel))
+		for (const panel of wanted) {
+			const existing = api.getPanel(panel.id)
+			if (existing) {
+				existing.api.setTitle(panel.title)
+				continue
+			}
+			const moved = pendingPositions.has(panel.id)
+			const position = moved
+				? usablePosition(api, pendingPositions.get(panel.id))
+				: (dock.popouts?.positionFor(panel.id) ?? startingPosition(api, panel, wanted))
+			pendingPositions.delete(panel.id)
+			api.addPanel<WorkbenchPanelParams>({
+				id: panel.id,
+				component: WORKBENCH_PANEL_COMPONENT,
+				tabComponent: WORKBENCH_TAB_COMPONENT,
+				title: panel.title,
+				params: { id: panel.id },
+				renderer: 'always',
+				minimumHeight: panel.minimumHeight,
+				inactive: !moved,
+				position,
+			})
+		}
+		/* Dropped once the new ones are in, so those can be placed where the leaving ones were. */
+		for (const panel of leaving) {
+			withOwnRemovals(() => {
+				if (!dock.popouts?.release(panel)) api.removePanel(panel)
+			})
+		}
+		if (!api.activePanel) api.panels[0]?.api.setActive()
+		if (!hasGridGroup(api)) api.addGroup()
+		applyHeaders(host)
+	}
+
+	/**
+	 * Whether the group shows in its dock. A group popped out into a window leaves a hidden one
+	 * behind in the dock, for it to return to once the window closes.
+	 */
+	function isShownGridGroup(group: DockviewGroupPanel) {
+		return group.api.location.type === 'grid' && group.api.isVisible
+	}
+
+	function hasGridGroup(api: DockviewApi) {
+		return api.groups.some(isShownGridGroup)
+	}
+
+	/** Empty groups added to keep an emptied dock's tab bar, until another group shows again. */
+	const placeholderGroups = new WeakSet<DockviewGroupPanel>()
+
+	/**
+	 * Dockview drops a group once its last panel leaves, and a popped out group leaves only a
+	 * hidden one behind; an emptied dock gets an empty group, so it keeps a tab bar to drop panels
+	 * onto, which goes again once a popped out group returns. Checked once a move settles, since
+	 * moving a whole group briefly leaves the dock without any.
+	 */
+	function keepGroup(api: DockviewApi) {
+		queueMicrotask(() => {
+			const shown = api.groups.filter(isShownGridGroup)
+			if (shown.length === 0) {
+				placeholderGroups.add(api.addGroup())
+				return
+			}
+			if (shown.length < 2) return
+			for (const group of shown) {
+				if (placeholderGroups.has(group) && group.panels.length === 0) api.removeGroup(group)
+			}
+		})
+	}
+
+	function addDocumentPanel(
+		api: DockviewApi,
+		state: GroupviewPanelState,
+		position?: AddPanelPositionOptions,
+	) {
+		if (!state.contentComponent || api.getPanel(state.id)) return
+		api.addPanel({
+			id: state.id,
+			component: state.contentComponent,
+			tabComponent: state.tabComponent,
+			title: state.title,
+			params: state.params,
+			position: position ?? defaultPosition(api),
+		})
+		api.getPanel(state.id)?.api.setActive()
+	}
+
+	/** The dock a dockview belongs to, by its id. */
+	function hostWithView(viewId: string) {
+		for (const [host, { api }] of docks) if (api.id === viewId) return host
+		return undefined
+	}
+
+	/** The dragged panel, when it's one of this workbench's panels or documents in another dock. */
+	function draggedPanel(event: Pick<DockviewDndOverlayEvent, 'getData'>) {
+		const data = event.getData()
+		if (data?.panelId == null) return null
+		const host = hostWithView(data.viewId)
+		const panel = host ? docks.get(host)?.api.getPanel(data.panelId) : undefined
+		if (!host || !panel) return null
+		if (findPanel(panel.id)) return { host, panel, document: false }
+		if (isDocumentPanel(panel)) return { host, panel, document: true }
+		return null
+	}
+
+	function acceptForeignPanel(event: DockviewDndOverlayEvent) {
+		if (mode.movePanels && draggedPanel(event)) event.accept()
+	}
+
+	function onForeignDrop(host: WorkbenchHost, event: DockviewDidDropEvent) {
+		if (!mode.movePanels) return
+		const dragged = draggedPanel(event)
+		if (!dragged) return
+		const position = dropPosition(event.position, event.group)
+		if (dragged.document) void moveDocumentFrom(dragged.host, dragged.panel.id, host, position)
+		else movePanel(dragged.panel.id, host, position)
+	}
+
+	/** A panel the user closed from its tab (rather than one moved or removed here) is remembered. */
+	function onPanelRemoved(host: WorkbenchHost, id: string) {
+		if (ownRemovals > 0 || !mode.closePanels) return
+		queueMicrotask(() => {
+			if (docks.get(host)?.api.getPanel(id)) return
+			const panel = findPanel(id)
+			if (!panel || regionOf(panel) !== host || closed.value.includes(id)) return
+			closed.value = [...closed.value, id]
+			scheduleSave()
+		})
+	}
+
+	/** Whether a saved arrangement only holds documents and workbench panels the dock still has. */
+	function isRestorable(layout: SerializedDockview | undefined, host: WorkbenchHost) {
+		if (!layout?.grid || !layout.panels) return false
+		if (layout.floatingGroups?.length) return false
+		if (layout.popoutGroups?.length && !popoutHosts.includes(host)) return false
+		const ids = new Set(panelsIn(host).map((panel) => panel.id))
+		return Object.entries(layout.panels).every(([id, panel]) =>
+			panel.contentComponent === WORKBENCH_PANEL_COMPONENT
+				? ids.has(id)
+				: isDocumentComponent(panel.contentComponent),
+		)
+	}
+
+	/** Loads the dock's saved arrangement for its current panel set, if there's a usable one. */
+	function restoreDock(host: WorkbenchHost, dock: Dock) {
+		const key = dock.key ?? ''
+		const layout = savedDockLayouts[host].get(key)
+		if (!layout || !isRestorable(layout, host)) return false
+		withOwnRemovals(() => {
+			try {
+				if (dock.popouts) dock.popouts.restore(layout)
+				else dock.api.fromJSON(layout, { reuseExistingPanels: true })
+			} catch {
+				dock.api.clear()
+				savedDockLayouts[host].delete(key)
+			}
+		})
+		return true
+	}
+
+	function updateCornerGroups() {
+		const api = docks.get('center')?.api
+		cornerGroups.value = api ? findCornerGroups(api) : {}
+	}
+
+	function updateRegionCornerGroup(region: WorkbenchRegion) {
+		const api = docks.get(region)?.api
+		const group = api ? findCornerGroups(api).right : undefined
+		if (regionCornerGroups.value[region] !== group) {
+			regionCornerGroups.value = { ...regionCornerGroups.value, [region]: group }
+		}
+	}
+
+	/** Brings a dock up once both it and the workbench's panels are ready. */
+	function initializeDock(host: WorkbenchHost) {
+		const dock = docks.get(host)
+		if (!dock || dock.key !== undefined || !isReady.value) return
+		dock.key = panelSetKey(host)
+		restoreDock(host, dock)
+		for (const state of pendingDocuments.get(host) ?? []) addDocumentPanel(dock.api, state)
+		pendingDocuments.delete(host)
+		syncDockPanels(host)
+		documents?.attach(dock.api, host)
+		if (host === 'center') updateCornerGroups()
+		else updateRegionCornerGroup(host)
+	}
+
+	/**
+	 * Follows a change of the dock's panel set: its arrangement is kept for the set it had, and the
+	 * one kept for the new set (if any) is loaded, before the panels themselves are synced.
+	 */
+	function updateDock(host: WorkbenchHost) {
+		const dock = docks.get(host)
+		if (!dock) return
+		if (dock.key === undefined) {
+			initializeDock(host)
+			return
+		}
+		const key = panelSetKey(host)
+		if (key !== dock.key) {
+			savedDockLayouts[host].set(dock.key, dockLayout(dock))
+			dock.key = key
+			if (!dock.popouts?.restoring() && !dock.api.getPopouts().length && restoreDock(host, dock)) {
+				documents?.restore()
+			}
+		}
+		syncDockPanels(host)
+	}
+
+	function applyVariant(dock: Dock) {
+		const wrapped = variant.value === 'rounded'
+		if (wrapped && !dock.wrappedTabs) dock.wrappedTabs = registerWrappedTabs(dock.api)
+		if (!wrapped && dock.wrappedTabs) {
+			dock.wrappedTabs.dispose()
+			dock.wrappedTabs = undefined
+		}
+	}
+
+	/** Bumped as docks come and go, so the combined popout state below follows them. */
+	const dockVersion = ref(0)
+
+	function onDockReady(host: WorkbenchHost, { api }: DockviewReadyEvent) {
+		onDockDispose(host)
+		const dock: Dock = { api, disposables: [] }
+		if (popoutHosts.includes(host) && mode.popouts && popoutServices) {
+			dock.popouts = createDockPopouts({
+				api,
+				services: popoutServices,
+				options: mode.popouts,
+				windows,
+				root: () => root.value,
+				canChange: () => isReady.value && !leavingPage,
+				titleOf: (id) => findPanel(id)?.title ?? id,
+				onChange: scheduleSave,
+				dragPanels: selection?.getDragPanels,
+				keepDrag: selection?.keepDragForPopout,
+				restoreMode: () => popoutRestore.value,
+			})
+		}
+		dock.disposables.push(
+			api.onDidLayoutChange(scheduleSave),
+			api.onDidActivePanelChange(scheduleSave),
+			api.onUnhandledDragOver(acceptForeignPanel),
+			api.onDidDrop((event) => onForeignDrop(host, event)),
+			api.onDidRemovePanel((panel) => onPanelRemoved(host, panel.id)),
+			api.onDidRemoveGroup(() => keepGroup(api)),
+			api.onDidLayoutChange(() => keepGroup(api)),
+			api.onDidAddGroup(() => queueMicrotask(() => applyHeaders(host))),
+			registerPanelOnlyDrops(api),
+			registerEvenSplits(api, () => isReady.value),
+		)
+		if (!mode.splitPanels || mode.headerless.includes(host)) {
+			dock.disposables.push(registerNoSplits(api))
+		}
+		if (selection) dock.disposables.push(selection.register(api))
+		if (!mode.headerless.includes(host)) {
+			dock.tabBars = registerTabBars(api, {
+				hideLone: () => host !== 'center' && hideLoneTabBars.value,
+				hiddenByUser: (group) => group.panels.some((panel) => hiddenBars.value.includes(panel.id)),
+				showHidden: (group) => {
+					const ids = group.panels.map((panel) => panel.id)
+					hiddenBars.value = hiddenBars.value.filter((id) => !ids.includes(id))
+				},
+				label: (hidden) => formatMessage(hidden ? messages.showTabs : messages.hideTabs),
+			})
+			dock.disposables.push(dock.tabBars)
+		}
+		if (host === 'center') dock.disposables.push(api.onDidLayoutChange(updateCornerGroups))
+		else dock.disposables.push(api.onDidLayoutChange(() => updateRegionCornerGroup(host)))
+		dock.disposables.push(
+			api.onDidLayoutChange(() => (arrangement.value += 1)),
+			api.onDidActivePanelChange(() => (arrangement.value += 1)),
+		)
+		docks.set(host, dock)
+		dockVersion.value += 1
+		applyVariant(dock)
+		initializeDock(host)
+	}
+
+	function onDockDispose(host: WorkbenchHost) {
+		const dock = docks.get(host)
+		if (!dock) return
+		documents?.detach(dock.api)
+		if (dock.key !== undefined && !leavingPage) {
+			savedDockLayouts[host].set(dock.key, dockLayout(dock))
+		}
+		for (const disposable of dock.disposables) disposable.dispose()
+		dock.popouts?.dispose()
+		dock.wrappedTabs?.dispose()
+		docks.delete(host)
+		dockVersion.value += 1
+	}
+
+	watch(isReady, (ready) => {
+		if (!ready) return
+		for (const host of docks.keys()) initializeDock(host)
+	})
+	watch(openPanels, () => {
+		if (!isReady.value) return
+		for (const host of docks.keys()) updateDock(host)
+	})
+	watch(variant, () => {
+		for (const dock of docks.values()) applyVariant(dock)
+		scheduleSave()
+	})
+	watch(toggleLocation, scheduleSave)
+	/** Switching what the toggles do turns regions they'd hidden into collapsed ones, and back. */
+	watch(toggleAction, (action) => {
+		for (const region of regions) {
+			if (action === 'collapse' && !visible[region].value && panelsIn(region).length) {
+				setRegionCollapsed(region, true)
+			} else if (action === 'hide' && visible[region].value && collapsed[region].value) {
+				setRegionVisible(region, false)
+				setRegionCollapsed(region, false)
+			}
+		}
+		scheduleSave()
+	})
+	watch(popoutRestore, scheduleSave)
+	watch([hideLoneTabBars, hiddenBars], () => {
+		for (const dock of docks.values()) dock.tabBars?.update()
+		scheduleSave()
+	})
+	watch(popoutsEnabled, (enabled) => {
+		if (!enabled) closePopouts()
+		scheduleSave()
+	})
+
+	function setRegionVisible(region: WorkbenchRegion, value: boolean) {
+		if (!regions.includes(region) || visible[region].value === value) return
+		if (!value) measureRegions()
+		visible[region].value = value
+		grid?.getPanel(region)?.api.setVisible(value)
+		if (value) applyRegionSize(region)
+		measureRegions()
+		scheduleSave()
+	}
+
+	/**
+	 * Collapses a region to a strip of its tabs, or brings it back to its size. A collapsed region
+	 * is shown, so its strip is too.
+	 */
+	function setRegionCollapsed(region: WorkbenchRegion, value: boolean) {
+		if (!regions.includes(region)) return
+		if (value) setRegionVisible(region, true)
+		if (collapsed[region].value === value) return
+		if (value) measureRegions()
+		collapsed[region].value = value
+		applyRegionSize(region)
+		measureRegions()
+		scheduleSave()
+	}
+
+	/** Shows a dock, bringing its region back from being hidden or collapsed. */
+	function showHost(host: WorkbenchHost) {
+		if (!isRegion(host)) return
+		setRegionVisible(host, true)
+		setRegionCollapsed(host, false)
+	}
+
+	/**
+	 * Brings a hidden or collapsed region back in full; otherwise hides it, or collapses it to its
+	 * tabs, as the settings choose.
+	 */
+	function toggleRegion(region: WorkbenchRegion) {
+		if (!visible[region].value) setRegionVisible(region, true)
+		else if (collapsed[region].value) setRegionCollapsed(region, false)
+		else if (toggleAction.value === 'collapse') setRegionCollapsed(region, true)
+		else setRegionVisible(region, false)
+	}
+
+	/**
+	 * The tabs a dock holds, in order (its workbench panels and documents alike), e.g. for its
+	 * strip while collapsed.
+	 */
+	function dockTabs(host: WorkbenchHost) {
+		void arrangement.value
+		const api = docks.get(host)?.api
+		if (!api) return []
+		return api.groups
+			.filter((group) => group.api.location.type === 'grid')
+			.flatMap((group) =>
+				group.panels.map((panel) => ({
+					id: panel.id,
+					title: panel.title ?? findPanel(panel.id)?.title ?? panel.id,
+					icon: findPanel(panel.id)?.icon,
+					active: group.activePanel === panel,
+				})),
+			)
+	}
+
+	/** Brings a dock's tab to the front, showing the dock (e.g. from its collapsed strip). */
+	function activateTab(host: WorkbenchHost, id: string) {
+		showHost(host)
+		const panel = docks.get(host)?.api.getPanel(id)
+		if (!panel) return
+		panel.group.model.openPanel(panel)
+		panel.api.setActive()
+	}
+
+	/**
+	 * Moves (or reopens) a workbench panel into `host`, at `position` within it or else alongside
+	 * its active group's panels, and shows it.
+	 */
+	function movePanel(requested: string, host: WorkbenchHost, position?: AddPanelPositionOptions) {
+		const id = hostPanelId(requested)
+		const panel = findPanel(id)
+		if (!panel || (host !== 'center' && !regions.includes(host))) return
+		const from = regionOf(panel)
+		if (from !== host && !mode.movePanels) return
+		const fromApi = docks.get(from)?.api
+		if (fromApi) removeOwn(fromApi, id)
+
+		const { [id]: _previous, ...otherPlacements } = placements.value
+		placements.value = host === panel.region ? otherPlacements : { ...otherPlacements, [id]: host }
+		closed.value = closed.value.filter((closedId) => closedId !== id)
+		pendingPositions.set(id, position)
+
+		showHost(host)
+		updateDock(host)
+		docks.get(host)?.api.getPanel(id)?.api.setActive()
+		if (from !== host) updateDock(from)
+		scheduleSave()
+	}
+
+	/** The panels a dock panel shows: a linked tab's members, or else the panel itself. */
+	function membersOf(id: string) {
+		return activeLinks.value.find((link) => link.id === id)?.members ?? [id]
+	}
+
+	/** Updates every dock a change to the links touched, once they've been set. */
+	function applyLinks(hosts: Iterable<WorkbenchHost>) {
+		for (const host of new Set(hosts)) updateDock(host)
+		scheduleSave()
+	}
+
+	/**
+	 * Links a panel (or linked tab) with another, making them one tab where the first is, split
+	 * between them. Linking with a linked tab brings in all of its panels.
+	 */
+	function linkPanels(id: string, otherId: string) {
+		if (!mode.movePanels) return
+		const target = hostPanelId(id)
+		const other = hostPanelId(otherId)
+		const targetPanel = findPanel(target)
+		const otherPanel = findPanel(other)
+		if (!targetPanel || !otherPanel || target === other) return
+		const hosts = [regionOf(targetPanel), regionOf(otherPanel)]
+		const adding = membersOf(other)
+		const existing = links.value.find((link) => link.id === target)
+		const remaining = links.value
+			.filter((link) => link.id !== other && link.id !== target)
+			.map((link) => ({
+				...link,
+				members: link.members.filter((member) => !adding.includes(member)),
+			}))
+		if (existing) {
+			links.value = [
+				...remaining,
+				{ ...existing, members: [...existing.members, ...adding], sizes: undefined },
+			]
+		} else {
+			const link: WorkbenchLink = {
+				id: `${LINK_PREFIX}${target}`,
+				members: [target, ...adding],
+				orientation: 'vertical',
+			}
+			placements.value = { ...placements.value, [link.id]: regionOf(targetPanel) }
+			closed.value = closed.value.filter((closedId) => closedId !== link.id)
+			pendingPositions.set(link.id, { referencePanel: target, direction: 'within' })
+			links.value = [...remaining, link]
+		}
+		applyLinks(hosts)
+	}
+
+	/** Takes a panel out of its linked tab, beside it; a link left with a single panel is undone. */
+	function unlinkPanel(id: string) {
+		const link = linkOf(id)
+		if (!link) return
+		const tab = findPanel(link.id)
+		const host = tab ? regionOf(tab) : 'center'
+		const members = link.members.filter((member) => member !== id)
+		const released = members.length > 1 ? [id] : link.members
+		for (const member of released) {
+			placements.value = { ...placements.value, [member]: host }
+			pendingPositions.set(member, { referencePanel: link.id, direction: 'within' })
+		}
+		links.value = links.value.flatMap((candidate) => {
+			if (candidate.id !== link.id) return [candidate]
+			return members.length > 1 ? [{ ...candidate, members, sizes: undefined }] : []
+		})
+		applyLinks([host])
+	}
+
+	/** Undoes a link, its panels each becoming a tab of their own where it was. */
+	function unlinkAll(linkId: string) {
+		const link = activeLinks.value.find((candidate) => candidate.id === linkId)
+		if (link) unlinkPanel(link.members[0])
+		if (activeLinks.value.some((candidate) => candidate.id === linkId)) unlinkAll(linkId)
+	}
+
+	function updateLink(linkId: string, change: Partial<WorkbenchLink>) {
+		links.value = links.value.map((link) => (link.id === linkId ? { ...link, ...change } : link))
+		scheduleSave()
+	}
+
+	function setLinkOrientation(linkId: string, orientation: WorkbenchLinkOrientation) {
+		updateLink(linkId, { orientation })
+	}
+
+	function setLinkSizes(linkId: string, sizes: number[]) {
+		updateLink(linkId, { sizes })
+	}
+
+	/**
+	 * Turns the order of a linked tab's panels around, keeping each one's share. The tab stays in
+	 * its dock, though the panel now first may have been offered in another.
+	 */
+	function reverseLink(linkId: string) {
+		const link = links.value.find((candidate) => candidate.id === linkId)
+		const tab = findPanel(linkId)
+		if (!link || !tab) return
+		placements.value = { ...placements.value, [linkId]: regionOf(tab) }
+		updateLink(linkId, {
+			members: [...link.members].reverse(),
+			sizes: link.sizes ? [...link.sizes].reverse() : undefined,
+		})
+	}
+
+	function hostOfDocument(id: string) {
+		for (const [host, { api }] of docks) {
+			const panel = api.getPanel(id)
+			if (panel && isDocumentPanel(panel)) return host
+		}
+		return undefined
+	}
+
+	/**
+	 * Moves a document to another dock, which remounts it, so its owner gets to confirm first
+	 * (e.g. about unsaved changes). A dock that isn't set up yet takes it once it is.
+	 */
+	async function moveDocumentFrom(
+		from: WorkbenchHost,
+		id: string,
+		host: WorkbenchHost,
+		position?: AddPanelPositionOptions,
+	) {
+		if (from === host || !mode.movePanels) return
+		if (documents?.confirmMove && !(await documents.confirmMove(id))) return
+		const fromApi = docks.get(from)?.api
+		const panel = fromApi?.getPanel(id)
+		if (!fromApi || !panel) return
+
+		const state = panel.toJSON()
+		fromApi.removePanel(panel)
+		showHost(host)
+
+		const target = docks.get(host)
+		if (target && target.key !== undefined) {
+			addDocumentPanel(target.api, state, position)
+		} else {
+			pendingDocuments.set(host, [...(pendingDocuments.get(host) ?? []), state])
+		}
+		scheduleSave()
+	}
+
+	function moveDocument(id: string, host: WorkbenchHost) {
+		const from = hostOfDocument(id)
+		if (from) void moveDocumentFrom(from, id, host)
+	}
+
+	function dockPanelOf(requested: string) {
+		const id = hostPanelId(requested)
+		const panel = findPanel(id)
+		const dock = panel ? docks.get(regionOf(panel)) : undefined
+		return dock ? { dock, panel: dock.api.getPanel(id) } : undefined
+	}
+
+	/** The dock panels showing the given panels, each once. */
+	function dockPanelsOf(ids: string[]) {
+		const found = ids.flatMap((id) => {
+			const panel = dockPanelOf(id)?.panel
+			return panel ? [panel] : []
+		})
+		return [...new Set(found)]
+	}
+
+	/** Whether the panels share a group they don't fill, so they can be split off from it. */
+	function canSplit(ids: string[]) {
+		const found = dockPanelsOf(ids)
+		const group = found[0]?.group
+		return (
+			mode.splitPanels &&
+			!!group &&
+			found.every((panel) => panel.group === group) &&
+			group.panels.length > found.length
+		)
+	}
+
+	/** Splits panels off into a group of their own beside the rest of their group, within its dock. */
+	function splitPanels(ids: string[], side: WorkbenchSplitSide) {
+		if (!canSplit(ids)) return
+		const [first, ...rest] = dockPanelsOf(ids)
+		first.api.moveTo({ group: first.group, position: side })
+		for (const panel of rest) panel.api.moveTo({ group: first.group, position: 'center' })
+		first.api.setActive()
+	}
+
+	/** Hides the tab bar of the panel's group, until it's pulled down again from its handle. */
+	function hideTabBar(id: string) {
+		const group = dockPanelOf(id)?.panel?.group
+		if (!group) return
+		const ids = group.panels.map((panel) => panel.id)
+		hiddenBars.value = [...new Set([...hiddenBars.value, ...ids])]
+	}
+
+	type GridNode = SerializedDockview['grid']['root']
+
+	/**
+	 * The dock's layout, with the outermost split of its groups (in its own window), when it has
+	 * one; a split holding a single other split is looked through.
+	 */
+	function outermostSplit(host: WorkbenchHost) {
+		const dock = docks.get(host)
+		if (!dock) return undefined
+		const layout = dock.api.toJSON()
+		let node: GridNode = layout.grid.root
+		let horizontal = layout.grid.orientation === 'HORIZONTAL'
+		while (Array.isArray(node.data) && node.data.length === 1) {
+			node = node.data[0]
+			horizontal = !horizontal
+		}
+		if (!Array.isArray(node.data)) return undefined
+		const children = node.data
+		/** Groups left hidden by popped out ones, waiting for them to return, keep their place. */
+		const shown = children.filter((child) => child.visible !== false)
+		if (shown.length < 2) return undefined
+		const groups = shown.flatMap((child) => {
+			const data = child.data
+			const group = Array.isArray(data)
+				? undefined
+				: dock.api.groups.find((candidate) => candidate.id === data.id)
+			return group ? [group] : []
+		})
+		/*
+		 * Groups side by side are moved around one by one, which leaves popped out windows open; a
+		 * split of splits is laid out anew, which can only be done without any.
+		 */
+		const movable = groups.length === shown.length
+		if (!movable && dock.api.getPopouts().length) return undefined
+		return { dock, layout, children, groups: movable ? groups : undefined, horizontal }
+	}
+
+	/** Turns the order of a dock's groups around, e.g. to have its last group on top. */
+	function reverseGroups(host: WorkbenchHost) {
+		const split = outermostSplit(host)
+		if (!split) return
+		const { dock, layout, children, groups, horizontal } = split
+		withOwnRemovals(() => {
+			if (groups) {
+				for (let index = 1; index < groups.length; index++) {
+					groups[index].api.moveTo({
+						group: groups[index - 1],
+						position: horizontal ? 'left' : 'top',
+					})
+				}
+			} else {
+				children.reverse()
+				dock.api.fromJSON(layout, { reuseExistingPanels: true })
+			}
+		})
+		updateCornerGroups()
+		scheduleSave()
+	}
+
+	function closePanel(requested: string) {
+		if (linkOf(requested)) unlinkPanel(requested)
+		const id = hostPanelId(requested)
+		const panel = findPanel(id)
+		if (!mode.closePanels || !panel || closed.value.includes(id)) return
+		const api = docks.get(regionOf(panel))?.api
+		closed.value = [...closed.value, id]
+		if (api) removeOwn(api, id)
+		scheduleSave()
+	}
+
+	/** Shows a panel: opening it if closed, showing its region, or bringing its popout window forward. */
+	function revealPanel(requested: string) {
+		const id = hostPanelId(requested)
+		const panel = findPanel(id)
+		if (!panel) return
+		if (closed.value.includes(id)) {
+			movePanel(id, regionOf(panel))
+			return
+		}
+		const found = dockPanelOf(id)
+		if (found?.panel && found.dock.popouts?.reveal(found.panel)) return
+		showHost(regionOf(panel))
+		found?.panel?.api.setActive()
+	}
+
+	/** Brings the first panel of every group to the front, e.g. when moving on to another subject. */
+	function resetActiveTabs() {
+		for (const { api } of docks.values()) {
+			for (const group of api.groups) {
+				const first = group.panels[0]
+				if (first) group.model.openPanel(first, { skipSetGroupActive: true })
+			}
+		}
+	}
+
+	/**
+	 * Restores the defaults, with every popout docked and every document back in the center. Regions
+	 * left without panels stay hidden, as they would on a first visit.
+	 */
+	function resetLayout() {
+		if (!isReady.value) return
+		for (const dock of docks.values()) {
+			if (dock.popouts?.restoring() || dock.popouts?.poppingOut.value.length) return
+		}
+		for (const dock of docks.values()) dock.popouts?.closeAll()
+		pendingPositions.clear()
+		pendingDocuments.clear()
+		placements.value = {}
+		links.value = []
+		closed.value = mode.closePanels
+			? panels.value.filter((panel) => panel.closedByDefault).map((panel) => panel.id)
+			: []
+		for (const host of WORKBENCH_HOSTS) savedDockLayouts[host].clear()
+		for (const region of regions) {
+			const shown = !options.hiddenRegions?.includes(region) && panelsIn(region).length > 0
+			regionSizes[region] = sizes[region].default
+			collapsed[region].value = false
+			visible[region].value = shown
+			grid?.getPanel(region)?.api.setVisible(shown)
+		}
+		applyRegionSizes()
+		for (const [host, dock] of docks) {
+			withOwnRemovals(() => dock.api.clear())
+			dock.key = panelSetKey(host)
+			syncDockPanels(host)
+		}
+		documents?.restore()
+		measureRegions()
+		persist()
+	}
+
+	function popoutDocks() {
+		void dockVersion.value
+		return [...docks.values()].flatMap((dock) => (dock.popouts ? [dock.popouts] : []))
+	}
+
+	const detachedPanels = computed(() => popoutDocks().flatMap((popouts) => popouts.detached.value))
+	const hasPopouts = computed(() => popoutDocks().some((popouts) => popouts.hasPopouts.value))
+	const poppingOut = computed(() => popoutDocks().flatMap((popouts) => popouts.poppingOut.value))
+
+	function closePopouts() {
+		for (const popouts of popoutDocks()) popouts.closeAll()
+	}
+
+	/**
+	 * A double click on a sash evens out the groups on either side of it within a dock, or returns
+	 * the region beside it in the grid to its default size.
+	 */
+	function onSashDoubleClick(event: MouseEvent) {
+		if (!(event.target instanceof HTMLElement)) return
+		const sash = event.target.closest('.dv-sash:not(.dv-disabled)')
+		if (!sash) return
+		const dockElement = sash.closest<HTMLElement>('[data-workbench-host]')
+		if (dockElement) {
+			const dock = docks.get(dockElement.dataset.workbenchHost as WorkbenchHost)
+			if (!dock || !mode.splitPanels) return
+			let evened = false
+			withOwnRemovals(() => (evened = evenOutDockSash(dock.api, sash)))
+			if (!evened) return
+		} else {
+			const container = sash.parentElement
+			const views = container?.parentElement?.querySelector(':scope > .dv-view-container')
+			if (!container || !views) return
+			const index = Array.from(container.children).indexOf(sash)
+			const region = [views.children[index], views.children[index + 1]]
+				.map((view) => {
+					const hosts = [...(view?.querySelectorAll<HTMLElement>('[data-workbench-host]') ?? [])]
+					return hosts.length === 1 ? (hosts[0].dataset.workbenchHost as WorkbenchHost) : undefined
+				})
+				.find((host): host is WorkbenchRegion => !!host && isRegion(host))
+			if (!region || !visible[region].value || collapsed[region].value) return
+			regionSizes[region] = sizes[region].default
+			applyRegionSize(region)
+		}
+		event.preventDefault()
+		event.stopPropagation()
+		scheduleSave()
+	}
+
+	/**
+	 * Saves as the page unloads, so changes made just before aren't lost to the save delay, and
+	 * before Dockview's unload handlers return popped out panels to the main window.
+	 */
+	function onBeforeUnload() {
+		persist()
+		leavingPage = true
+		clearTimeout(saveTimer)
+	}
+
+	function onPageShow() {
+		leavingPage = false
+	}
+
+	function resumeAfterCancelledUnload(event: Event) {
+		if (event.currentTarget === window) leavingPage = false
+	}
+
+	/** Refreshing a popout would reload it as the main page, so it's kept from doing so. */
+	function preventPopoutRefresh(event: KeyboardEvent) {
+		if (event.currentTarget === window) return
+		const refresh =
+			event.key === 'F5' ||
+			((event.ctrlKey || event.metaKey) &&
+				!event.altKey &&
+				(event.code === 'KeyR' || event.key.toLowerCase() === 'r'))
+		if (!refresh) return
+		event.preventDefault()
+		event.stopImmediatePropagation()
+	}
+
+	if (popoutHosts.length) {
+		windows.listen('keydown', preventPopoutRefresh, { capture: true })
+		windows.listen('pointerdown', resumeAfterCancelledUnload, { capture: true })
+		windows.listen('keydown', resumeAfterCancelledUnload, { capture: true })
+	} else {
+		window.addEventListener('pointerdown', resumeAfterCancelledUnload, { capture: true })
+		window.addEventListener('keydown', resumeAfterCancelledUnload, { capture: true })
+	}
+	window.addEventListener('beforeunload', onBeforeUnload, { capture: true })
+	window.addEventListener('pagehide', onBeforeUnload)
+	window.addEventListener('pageshow', onPageShow)
+
+	onBeforeUnmount(() => {
+		persist()
+		clearTimeout(saveTimer)
+		window.removeEventListener('load', onDocumentLoad)
+		window.removeEventListener('beforeunload', onBeforeUnload, true)
+		window.removeEventListener('pagehide', onBeforeUnload)
+		window.removeEventListener('pageshow', onPageShow)
+		window.removeEventListener('pointerdown', resumeAfterCancelledUnload, true)
+		window.removeEventListener('keydown', resumeAfterCancelledUnload, true)
+		onGridDispose()
+		for (const host of [...docks.keys()]) onDockDispose(host)
+	})
+
+	let openMenu: ((event: MouseEvent, menuOptions: ButtonMenuOption[]) => void) | undefined
+
+	const context: WorkbenchContext = {
+		slots: {} as Slots,
+		root,
+		mode,
+		variant,
+		setVariant: (value) => (variant.value = value),
+		canUsePopouts: popoutHosts.length > 0,
+		popoutsEnabled,
+		setPopoutsEnabled: (value) => (popoutsEnabled.value = value),
+		hideLoneTabBars,
+		setHideLoneTabBars: (value) => (hideLoneTabBars.value = value),
+		hideTabBar,
+		canHideTabBar: (host) => !mode.headerless.includes(host),
+		reverseGroups,
+		canReverseGroups: (host) => !!outermostSplit(host),
+		popoutRestore,
+		setPopoutRestore: (value) => (popoutRestore.value = value),
+		toggleLocation,
+		setToggleLocation: (value) => (toggleLocation.value = value),
+		toggleAction,
+		setToggleAction: (value) => (toggleAction.value = value),
+		cornerToggles,
+		documents,
+		panels,
+		closedPanels,
+		usedRegions,
+		visible,
+		regionExtents,
+		cornerGroups,
+		selectedPanels: selection?.selectedPanels ?? shallowRef<readonly string[]>([]),
+		detachedPanels,
+		hasPopouts,
+		poppingOut,
+		popoutPanel: (id) =>
+			popoutsEnabled.value
+				? dockPanelOf(id)?.dock.popouts?.popoutPanel(hostPanelId(id))
+				: undefined,
+		dockPanel: (id) => dockPanelOf(id)?.dock.popouts?.dock(hostPanelId(id)),
+		closePopouts,
+		canPopout: (id) => {
+			if (!popoutsEnabled.value) return false
+			const found = dockPanelOf(id)
+			return !!found?.dock.popouts && found.panel?.api.location.type === 'grid'
+		},
+		isDetached: (id) => detachedPanels.value.includes(hostPanelId(id)),
+		regionOf,
+		isOpen: (id) => !closed.value.includes(hostPanelId(id)),
+		isShown: (requested) => {
+			const id = hostPanelId(requested)
+			const panel = findPanel(id)
+			if (!panel || closed.value.includes(id)) return false
+			const host = regionOf(panel)
+			if (isRegion(host) && (!visible[host].value || collapsed[host].value)) return false
+			return dockPanelOf(id)?.panel?.api.isVisible ?? false
+		},
+		setRegionVisible,
+		toggleRegion,
+		collapsed,
+		setRegionCollapsed,
+		regionCornerGroups,
+		dockTabs,
+		activateTab,
+		movePanel,
+		moveDocument,
+		hostOfDocument,
+		splitPanels,
+		closePanel,
+		revealPanel,
+		links: activeLinks,
+		linkPanels,
+		unlinkPanel,
+		unlinkAll,
+		setLinkOrientation,
+		reverseLink,
+		setLinkSizes,
+		resetActiveTabs,
+		resetLayout,
+		canSplit,
+		popoutPanels: (ids) => {
+			if (!popoutsEnabled.value || !ids.length) return undefined
+			return dockPanelOf(ids[0])?.dock.popouts?.popoutPanels(ids.map(hostPanelId))
+		},
+		onGridReady,
+		onDockReady,
+		onDockDispose,
+		onSashDoubleClick,
+		setMenuOpener: (opener) => (openMenu = opener),
+		openPanelMenu: () => {},
+		openRegionMenu: () => {},
+		panelsMenuOptions: computed(() => []),
+		documentMoveOption: () => null,
+	}
+
+	Object.assign(
+		context,
+		useWorkbenchMenus(context, (event, menuOptions) => openMenu?.(event, menuOptions)),
+	)
+
+	return context
+}
diff --git a/packages/ui/src/layouts/shared/workbench/composables/dock-behaviours.ts b/packages/ui/src/layouts/shared/workbench/composables/dock-behaviours.ts
new file mode 100644
index 0000000000..09eab05553
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/composables/dock-behaviours.ts
@@ -0,0 +1,221 @@
+import type {
+	DockviewApi,
+	DockviewGroupPanel,
+	DockviewIDisposable,
+	DockviewWillDropEvent,
+	DockviewWillShowOverlayLocationEvent,
+	IDockviewPanel,
+} from 'dockview-vue'
+import { getGridLocation } from 'dockview-vue'
+
+/**
+ * Moves each group's tab strip into the header's free space, where it can wrap onto several
+ * lines, while keeping it inside the header's own drag and drop target. Disposing puts the strips
+ * back, so the workbench can switch styles.
+ */
+export function registerWrappedTabs(api: DockviewApi): DockviewIDisposable {
+	let disposed = false
+	const cleanups = new Map<DockviewGroupPanel, () => void>()
+
+	/** Lets individual tab targets handle reordering before the enclosing header claims the drop. */
+	const overlaySubscription = api.onWillShowOverlay((event) => {
+		if (event.kind !== 'header_space') return
+		const target = event.nativeEvent.target as Element | null
+		if (target?.closest('.dv-tab')) event.preventDefault()
+	})
+
+	function wrapGroup(group: DockviewGroupPanel) {
+		if (cleanups.has(group)) return
+		const tabs = group.model.tabsListElement
+		const header = tabs.closest('.dv-tabs-and-actions-container')
+		const space = header?.querySelector<HTMLElement>(':scope > .dv-void-container')
+		const strip = tabs.parentElement?.classList.contains('dv-scrollable')
+			? tabs.parentElement
+			: tabs
+		if (!header || !space || strip.parentElement !== header) return
+		const nextSibling = strip.nextSibling
+		space.appendChild(strip)
+		let restoreDraggable: (() => void) | undefined
+
+		/** Keeps the browser from picking an adjacent draggable tab when a drag starts in a narrow gap. */
+		function onPointerDown(event: PointerEvent) {
+			restoreDraggable?.()
+			if (event.button !== 0 || (event.target as Element).closest('.dv-tab')) return
+			const ownerWindow = tabs.ownerDocument.defaultView
+			if (!ownerWindow) return
+			const draggable = [...tabs.querySelectorAll<HTMLElement>('.dv-tab')].map(
+				(tab) => [tab, tab.draggable] as const,
+			)
+			for (const [tab] of draggable) tab.draggable = false
+			function restore() {
+				for (const [tab, enabled] of draggable) tab.draggable = enabled
+				ownerWindow?.removeEventListener('pointerup', restore, true)
+				ownerWindow?.removeEventListener('pagehide', restore)
+				space?.removeEventListener('dragend', restore)
+				restoreDraggable = undefined
+			}
+			restoreDraggable = restore
+			ownerWindow.addEventListener('pointerup', restore, { capture: true, once: true })
+			ownerWindow.addEventListener('pagehide', restore, { once: true })
+			space?.addEventListener('dragend', restore, { once: true })
+		}
+
+		function onTabDragStart(event: DragEvent) {
+			event.stopPropagation()
+		}
+
+		space.addEventListener('pointerdown', onPointerDown)
+		tabs.addEventListener('dragstart', onTabDragStart)
+		cleanups.set(group, () => {
+			restoreDraggable?.()
+			space.removeEventListener('pointerdown', onPointerDown)
+			tabs.removeEventListener('dragstart', onTabDragStart)
+			if (strip.parentElement === space && header.isConnected) {
+				header.insertBefore(strip, nextSibling?.parentNode === header ? nextSibling : space)
+			}
+		})
+	}
+
+	for (const group of api.groups) wrapGroup(group)
+	const addSubscription = api.onDidAddGroup((group) => {
+		queueMicrotask(() => {
+			if (!disposed && api.groups.includes(group)) wrapGroup(group)
+		})
+	})
+	const removeSubscription = api.onDidRemoveGroup((group) => {
+		cleanups.get(group)?.()
+		cleanups.delete(group)
+	})
+
+	return {
+		dispose() {
+			disposed = true
+			overlaySubscription.dispose()
+			addSubscription.dispose()
+			removeSubscription.dispose()
+			for (const cleanup of cleanups.values()) cleanup()
+			cleanups.clear()
+		},
+	}
+}
+
+/** Ignores drags that carry no panel (e.g. files from outside), so docks don't offer to take them. */
+export function registerPanelOnlyDrops(api: DockviewApi): DockviewIDisposable {
+	function constrain(event: DockviewWillDropEvent | DockviewWillShowOverlayLocationEvent) {
+		if (!event.getData()) event.preventDefault()
+	}
+	const subscriptions = [api.onWillShowOverlay(constrain), api.onWillDrop(constrain)]
+	return { dispose: () => subscriptions.forEach((subscription) => subscription.dispose()) }
+}
+
+/** Keeps panels from being dropped beside a group or on the dock's edges, which would split it. */
+export function registerNoSplits(api: DockviewApi): DockviewIDisposable {
+	return api.onWillShowOverlay((event) => {
+		if (event.kind === 'content' || event.kind === 'edge') event.preventDefault()
+	})
+}
+
+/** Splits a group evenly with the one a panel was dropped beside, rather than taking a sliver. */
+export function registerEvenSplits(api: DockviewApi, enabled: () => boolean): DockviewIDisposable {
+	return api.onWillDrop((event: DockviewWillDropEvent) => {
+		const data = event.getData()
+		const target = event.group
+		if (
+			event.defaultPrevented ||
+			event.kind !== 'content' ||
+			!target ||
+			!data ||
+			data.viewId !== event.api.id ||
+			event.position === 'center'
+		)
+			return
+
+		const horizontal = event.position === 'left' || event.position === 'right'
+		let movedPanel: IDockviewPanel | undefined
+		const subscription = event.api.onDidMovePanel(({ panel, from }) => {
+			if (from.id === data.groupId && (!data.panelId || panel.id === data.panelId)) {
+				movedPanel = panel
+			}
+		})
+		queueMicrotask(() => {
+			subscription.dispose()
+			const moved = movedPanel?.group
+			if (!enabled() || !moved || moved === target || !event.api.groups.includes(target)) return
+			const dimension = horizontal ? 'width' : 'height'
+			const minimum = horizontal ? 'minimumWidth' : 'minimumHeight'
+			const maximum = horizontal ? 'maximumWidth' : 'maximumHeight'
+			const total = target.api[dimension] + moved.api[dimension]
+			const lower = Math.max(moved[minimum], total - target[maximum])
+			const upper = Math.min(moved[maximum], total - target[minimum])
+			if (lower > upper) return
+			const size = Math.max(lower, Math.min(Math.round(total / 2), upper))
+			target.api.setSize({ [dimension]: total - size })
+			moved.api.setSize({ [dimension]: size })
+		})
+	})
+}
+
+/**
+ * Evens out the two sides of a sash within a dock: the groups' sizes when some are popped out
+ * (whose layout can't be reloaded), otherwise its saved sizes, reloaded in place.
+ */
+export function evenOutDockSash(api: DockviewApi, sash: Element) {
+	const container = sash.parentElement
+	const split = container?.parentElement
+	const branch = split?.parentElement
+	if (!container || !split || !branch?.classList.contains('dv-branch-node')) return false
+	const index = Array.from(container.children).indexOf(sash)
+	const layout = api.toJSON()
+	let node = layout.grid.root
+	for (const childIndex of getGridLocation(branch)) {
+		if (!Array.isArray(node.data) || !node.data[childIndex]) return false
+		node = node.data[childIndex]
+	}
+	if (!Array.isArray(node.data)) return false
+	const before = node.data[index]
+	const after = node.data[index + 1]
+	if (!before?.size || !after?.size) return false
+	const total = before.size + after.size
+
+	if (api.getPopouts().length) {
+		const horizontal = split.classList.contains('dv-horizontal')
+		const sizes: { id: string; size: number }[] = []
+		function collectSizes(child: typeof layout.grid.root, scale: number) {
+			if (Array.isArray(child.data)) {
+				for (const entry of child.data) collectSizes(entry, scale)
+				return
+			}
+			const id = child.data.id
+			const group = api.groups.find((candidate) => candidate.id === id)
+			if (group) {
+				sizes.push({ id, size: (horizontal ? group.api.width : group.api.height) * scale })
+			}
+		}
+		collectSizes(before, total / 2 / before.size)
+		collectSizes(after, total / 2 / after.size)
+		for (const { id, size } of sizes) {
+			api.groups
+				.find((group) => group.id === id)
+				?.api.setSize(horizontal ? { width: size } : { height: size })
+		}
+	} else {
+		before.size = Math.round(total / 2)
+		after.size = total - before.size
+		api.fromJSON(layout, { reuseExistingPanels: true })
+	}
+	return true
+}
+
+/** The top-left and top-right groups of a dock's grid, whose tab bars sit in its outer corners. */
+export function findCornerGroups(api: DockviewApi) {
+	const groups = api.groups
+		.filter(
+			(group) =>
+				group.api.location.type === 'grid' && group.api.isVisible && group.panels.length > 0,
+		)
+		.map((group) => ({ id: group.id, bounds: group.element.getBoundingClientRect() }))
+	const top = Math.min(...groups.map(({ bounds }) => bounds.top))
+	const topGroups = groups.filter(({ bounds }) => Math.abs(bounds.top - top) < 1)
+	topGroups.sort((a, b) => a.bounds.left - b.bounds.left)
+	return { left: topGroups[0]?.id, right: topGroups[topGroups.length - 1]?.id }
+}
diff --git a/packages/ui/src/layouts/shared/workbench/composables/dock-popouts.ts b/packages/ui/src/layouts/shared/workbench/composables/dock-popouts.ts
new file mode 100644
index 0000000000..eb2ed56966
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/composables/dock-popouts.ts
@@ -0,0 +1,907 @@
+import { useIntervalFn } from '@vueuse/core'
+import type {
+	DockviewApi,
+	DockviewGroupPanel,
+	DockviewIDisposable,
+	DockviewPopoutGroupOptions,
+	IDockviewPanel,
+	SerializedDockview,
+} from 'dockview-vue'
+import { type Ref, ref } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+
+import type { WorkbenchPopoutOptions, WorkbenchPopoutRestore } from '../types'
+import type { WorkbenchWindows } from './use-windows'
+
+export type PopoutTarget = IDockviewPanel | DockviewGroupPanel
+type PopoutLayout = NonNullable<SerializedDockview['popoutGroups']>[number]
+type GridNode = SerializedDockview['grid']['root']
+type GroupNode = Exclude<GridNode['data'], GridNode[]>
+
+const messages = defineMessages({
+	popoutFailed: {
+		id: 'workbench.popout.failed',
+		defaultMessage: 'Could not open the panel window',
+	},
+	restoreTitle: {
+		id: 'workbench.popout.restore-title',
+		defaultMessage: 'Popout window closed',
+	},
+	restoreDescription: {
+		id: 'workbench.popout.restore-description',
+		defaultMessage: 'Panels from this window have been moved to the main window: {panels}.',
+	},
+	reopen: {
+		id: 'workbench.popout.reopen',
+		defaultMessage: 'Reopen window',
+	},
+	keepClosed: {
+		id: 'workbench.popout.keep-closed',
+		defaultMessage: 'Keep closed',
+	},
+})
+
+/** The ids of the panels a saved popout window held. */
+function popoutPanelIds(popout: PopoutLayout) {
+	const ids: string[] = []
+	function collect(node: GridNode) {
+		if (Array.isArray(node.data)) node.data.forEach(collect)
+		else ids.push(...node.data.views)
+	}
+	if (popout.grid) collect(popout.grid.root)
+	else if (popout.data) ids.push(...popout.data.views)
+	return ids
+}
+
+/** The layout with its popout windows' panels returned to the grid, beside where they came from. */
+export function dockPopoutLayout(layout: SerializedDockview): SerializedDockview {
+	const result: SerializedDockview = structuredClone(layout)
+	function findGroupPath(node: GridNode, id: string): GridNode[] | undefined {
+		if (!Array.isArray(node.data)) return node.data.id === id ? [node] : undefined
+		for (const child of node.data) {
+			const path = findGroupPath(child, id)
+			if (path) return [node, ...path]
+		}
+	}
+	function restoreGroup(popoutGroup: GroupNode, reference?: string) {
+		const { hideHeader: _hidden, ...group } = popoutGroup
+		const path = reference ? findGroupPath(result.grid.root, reference) : undefined
+		const existing = path?.at(-1)
+		if (existing && !Array.isArray(existing.data)) {
+			existing.data.views.push(...group.views)
+			existing.data.activeView ??= group.activeView
+			for (const node of path ?? []) node.visible = true
+			return
+		}
+		const leaf: GridNode = { type: 'leaf', data: group }
+		if (Array.isArray(result.grid.root.data)) result.grid.root.data.push(leaf)
+		else result.grid.root = { type: 'branch', data: [result.grid.root, leaf] }
+	}
+	function restoreGrid(node: GridNode, reference?: string) {
+		if (Array.isArray(node.data)) {
+			for (const child of node.data) restoreGrid(child, reference)
+		} else restoreGroup(node.data, reference)
+	}
+	for (const popout of result.popoutGroups ?? []) {
+		if (popout.data) restoreGroup(popout.data, popout.gridReferenceGroup)
+		if (popout.grid) restoreGrid(popout.grid.root, popout.gridReferenceGroup)
+	}
+	delete result.popoutGroups
+	if (result.activeGroup && !findGroupPath(result.grid.root, result.activeGroup)) {
+		delete result.activeGroup
+	}
+	return result
+}
+
+/** Disposes a panel that's no longer offered while keeping its popout window open for it to return to. */
+function releasePopoutPanel(panel: IDockviewPanel) {
+	const group = panel.group
+	group.model.removePanel(panel)
+	group.model.renderContainer.detatch(panel)
+	panel.dispose()
+}
+
+/** Reopens one saved window without replacing any live popouts. */
+async function restorePopout(api: DockviewApi, popout: PopoutLayout) {
+	function dockedLayout(node: GridNode): GridNode | undefined {
+		if (Array.isArray(node.data)) {
+			const children = node.data.map(dockedLayout).filter((child): child is GridNode => !!child)
+			return children.length ? { ...node, data: children } : undefined
+		}
+		const views = node.data.views.filter((id) => api.getPanel(id)?.api.location.type === 'grid')
+		if (!views.length) return
+		return {
+			...node,
+			data: {
+				...node.data,
+				views,
+				activeView: views.includes(node.data.activeView ?? '') ? node.data.activeView : views[0],
+			},
+		}
+	}
+	function firstPanel(node: GridNode): IDockviewPanel | undefined {
+		if (!Array.isArray(node.data)) return api.getPanel(node.data.views[0])
+		return node.data.length ? firstPanel(node.data[0]) : undefined
+	}
+	function prepareGroups(node: GridNode) {
+		if (Array.isArray(node.data)) {
+			for (const child of node.data) prepareGroups(child)
+			return
+		}
+		const panels = node.data.views
+			.map((id) => api.getPanel(id))
+			.filter((panel): panel is IDockviewPanel => !!panel && panel.api.location.type === 'grid')
+		if (!panels.length) return
+		const existing = panels[0].group
+		const group =
+			existing.panels.length === panels.length && panels.every((panel) => panel.group === existing)
+				? existing
+				: api.addGroup()
+		for (const panel of panels) {
+			if (panel.group !== group) panel.api.moveTo({ group, position: 'center' })
+		}
+		if (node.data.activeView) api.getPanel(node.data.activeView)?.api.setActive()
+	}
+	function restoreGrid(node: GridNode, horizontal: boolean) {
+		if (!Array.isArray(node.data)) return
+		const children = node.data
+		for (let index = 1; index < children.length; index++) {
+			const group = firstPanel(children[index])?.group
+			const reference = firstPanel(children[index - 1])?.group
+			if (group && reference) {
+				group.api.moveTo({ group: reference, position: horizontal ? 'right' : 'bottom' })
+			}
+		}
+		for (const child of children) restoreGrid(child, !horizontal)
+	}
+	function restoreSizes(node: GridNode, horizontal: boolean, width: number, height: number) {
+		if (!Array.isArray(node.data)) {
+			firstPanel(node)?.group.api.setSize({ width, height })
+			return
+		}
+		const total = node.data.reduce((sum, child) => sum + (child.size ?? 1), 0)
+		for (const child of node.data) {
+			const ratio = (child.size ?? 1) / total
+			restoreSizes(
+				child,
+				!horizontal,
+				horizontal ? width * ratio : width,
+				horizontal ? height : height * ratio,
+			)
+		}
+	}
+	try {
+		const root = dockedLayout(popout.grid?.root ?? { type: 'leaf', data: popout.data! })
+		if (!root) return true
+		const panel = firstPanel(root)
+		if (!panel) return false
+		prepareGroups(root)
+		const opened = await api.addPopoutGroup(panel.group, {
+			position: popout.position ?? undefined,
+			popoutUrl: popout.url,
+		})
+		if (opened && popout.grid) {
+			const horizontal = popout.grid.orientation === 'HORIZONTAL'
+			restoreGrid(root, horizontal)
+			const child = panel.api.getWindow()
+			restoreSizes(root, horizontal, child.innerWidth, child.innerHeight)
+		}
+		return opened
+	} catch {
+		return false
+	}
+}
+
+const STYLESHEETS = 'style, link[rel="stylesheet"]'
+
+/**
+ * Keeps a popout window's stylesheets those of the main document, as they're added, changed or
+ * removed (e.g. a theme's, or ones loaded with components first shown later). Dockview copies them
+ * once as the window opens, which would leave the window as the page looked then. The popout
+ * page's own styles, marked `data-workbench-own`, are kept.
+ */
+function mirrorStylesheets(child: Window) {
+	const head = child.document.head
+	const clones = new Map<HTMLElement, HTMLElement>()
+	let scheduled = false
+
+	function cssText(style: HTMLStyleElement) {
+		if (style.textContent) return style.textContent
+		try {
+			return Array.from(style.sheet?.cssRules ?? [], (rule) => rule.cssText).join('\n')
+		} catch {
+			return ''
+		}
+	}
+
+	function cloneOf(source: HTMLElement) {
+		let clone = clones.get(source)
+		if (source instanceof HTMLLinkElement) {
+			if (!(clone instanceof HTMLLinkElement) || clone.href !== source.href) {
+				clone?.remove()
+				clone = child.document.createElement('link')
+				clone.setAttribute('rel', 'stylesheet')
+				clone.setAttribute('href', source.href)
+			}
+			;(clone as HTMLLinkElement).disabled = source.disabled
+		} else {
+			clone ??= child.document.createElement('style')
+			const text = cssText(source as HTMLStyleElement)
+			if (clone.textContent !== text) clone.textContent = text
+		}
+		const media = source.getAttribute('media')
+		if (media === null) clone.removeAttribute('media')
+		else clone.setAttribute('media', media)
+		clones.set(source, clone)
+		return clone
+	}
+
+	function sync() {
+		scheduled = false
+		if (child.closed) return
+		const sources = Array.from(document.head.querySelectorAll<HTMLElement>(STYLESHEETS))
+		const kept = new Set(sources)
+		for (const [source, clone] of clones) {
+			if (kept.has(source)) continue
+			clone.remove()
+			clones.delete(source)
+		}
+		const wanted = sources.map(cloneOf)
+		const placed = Array.from(head.children).filter((element) =>
+			wanted.includes(element as HTMLElement),
+		)
+		if (
+			placed.length === wanted.length &&
+			placed.every((element, index) => element === wanted[index])
+		) {
+			return
+		}
+		for (const clone of wanted) head.appendChild(clone)
+	}
+
+	function schedule() {
+		if (scheduled) return
+		scheduled = true
+		queueMicrotask(sync)
+	}
+
+	for (const element of Array.from(head.querySelectorAll(STYLESHEETS))) {
+		if (!element.hasAttribute('data-workbench-own')) element.remove()
+	}
+	sync()
+	const observer = new MutationObserver(schedule)
+	observer.observe(document.head, {
+		childList: true,
+		subtree: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: ['href', 'media', 'disabled'],
+	})
+	return () => observer.disconnect()
+}
+
+/**
+ * Dresses a popout window like the workbench: a bare copy of the workbench's root (keeping its
+ * classes, so its styles apply) around the popout's content, and the main document's theme and
+ * stylesheets, kept in sync while the window is open.
+ */
+function configurePopoutWindow(child: Window, root: HTMLElement | null) {
+	const container = child.document.querySelector<HTMLElement>('.dv-popout-window')
+	if (root && container) {
+		const frame = root.cloneNode(false) as HTMLElement
+		frame.style.height = '100dvh'
+		container.style.width = '100%'
+		container.style.flex = '1 1 auto'
+		container.style.minHeight = '0'
+		container.before(frame)
+		frame.appendChild(container)
+	}
+
+	function syncAppearance() {
+		for (const [source, target] of [
+			[document.documentElement, child.document.documentElement],
+			[document.body, child.document.body],
+		] as const) {
+			for (const name of ['class', 'style', 'data-theme', 'lang', 'dir']) {
+				const value = source.getAttribute(name)
+				if (name === 'style' && source === document.body) {
+					const targetStyle = (target as HTMLElement).style
+					const overflow = targetStyle.overflow
+					targetStyle.cssText = value ?? ''
+					targetStyle.overflow = overflow
+					continue
+				}
+				if (value === null) target.removeAttribute(name)
+				else target.setAttribute(name, value)
+			}
+		}
+	}
+
+	syncAppearance()
+	const stopMirroring = mirrorStylesheets(child)
+	const observer = new MutationObserver(syncAppearance)
+	for (const element of [document.documentElement, document.body]) {
+		observer.observe(element, {
+			attributes: true,
+			attributeFilter: ['class', 'style', 'data-theme', 'lang', 'dir'],
+		})
+	}
+	child.focus()
+	return () => {
+		observer.disconnect()
+		stopMirroring()
+	}
+}
+
+/** Dockview opens popouts through the main window; this uses the gesture's window, keeping its activation. */
+function openPopoutGroup(
+	api: DockviewApi,
+	target: PopoutTarget,
+	options: DockviewPopoutGroupOptions,
+	sourceWindow = target.api.getWindow(),
+) {
+	if (sourceWindow === window) return api.addPopoutGroup(target, options)
+	const originalOpen = window.open
+	window.open = sourceWindow.open.bind(sourceWindow)
+	try {
+		return api.addPopoutGroup(target, options)
+	} finally {
+		window.open = originalOpen
+	}
+}
+
+/**
+ * Pops a tab or group out when it's dragged off the workbench (or dropped on its bare
+ * background), into a window placed where it was released.
+ */
+function registerDragPopouts(
+	api: DockviewApi,
+	root: () => HTMLElement | null,
+	popout: (
+		target: PopoutTarget,
+		position: NonNullable<DockviewPopoutGroupOptions['position']>,
+		sourceWindow: Window,
+	) => void,
+): DockviewIDisposable {
+	let clearDrag: (() => void) | undefined
+
+	function onDragStart(
+		target: PopoutTarget,
+		group: DockviewGroupPanel,
+		nativeEvent: DragEvent | PointerEvent,
+	) {
+		clearDrag?.()
+		if ('pointerId' in nativeEvent) return
+		const eventTarget = nativeEvent.target as HTMLElement | null
+		const ownerWindow = eventTarget?.ownerDocument.defaultView
+		const dock = group.element.closest('.dv-popout-window, .workbench-dock')
+		if (!eventTarget || !ownerWindow || !dock) return
+		const source = eventTarget
+		const sourceWindow = ownerWindow
+		const bounds = dock.getBoundingClientRect()
+		/** Only releases off the whole workbench pop out; other docks can take the tab instead. */
+		const area = (root() ?? dock).getBoundingClientRect()
+		const windowOrigin = {
+			left: nativeEvent.screenX - nativeEvent.clientX - sourceWindow.screenX,
+			top: nativeEvent.screenY - nativeEvent.clientY - sourceWindow.screenY,
+		}
+		const panelIds = new Set(
+			'panels' in target ? target.panels.map((panel) => panel.id) : [target.id],
+		)
+		const windows = [window, ...api.getPopouts().map((entry) => entry.window)]
+		let dropCleanupTimer: ReturnType<typeof setTimeout> | undefined
+		let nativeDrop: DragEvent | undefined
+		/**
+		 * Whether the drop landed on a dock (of this window or a popout). Checked as it happens, as
+		 * the dock's tab bar can be gone by the time the drag ends, once the move empties it.
+		 */
+		let droppedOnDock = false
+		let moved = false
+		let dropped = false
+		let cancelled = false
+		const movedSubscription = api.onDidMovePanel((event) => {
+			if (panelIds.has(event.panel.id)) moved = true
+		})
+		const dropSubscription = api.onDidDrop(() => {
+			dropped = true
+		})
+
+		function openPopout(event: DragEvent) {
+			popout(
+				target,
+				{
+					left: event.screenX,
+					top: event.screenY,
+					width: Math.max(400, bounds.width),
+					height: Math.max(300, bounds.height),
+				},
+				sourceWindow,
+			)
+		}
+
+		function isWorkbenchBackground(event: DragEvent) {
+			const element = event.target as Element | null
+			const workbench = root()
+			return (
+				!!workbench &&
+				!!element &&
+				workbench.contains(element) &&
+				!element.closest(
+					'.workbench-dock, .dv-popout-window, .dv-drop-target, .dv-drop-target-container',
+				)
+			)
+		}
+
+		function onDragOver(event: DragEvent) {
+			if (event.defaultPrevented || !isWorkbenchBackground(event)) return
+			event.preventDefault()
+			if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+		}
+
+		function observeDrop(event: DragEvent) {
+			nativeDrop = event
+			droppedOnDock = !!(event.target as Element | null)?.closest?.(
+				'.workbench-dock, .dv-popout-window',
+			)
+			dropCleanupTimer = setTimeout(() => onDragEnd(event), 0)
+		}
+
+		function onBackgroundDrop(event: DragEvent) {
+			if (event.defaultPrevented || cancelled || moved || !isWorkbenchBackground(event)) return
+			event.preventDefault()
+			dropped = true
+			openPopout(event)
+		}
+
+		function onDragEnd(event: DragEvent) {
+			const release = nativeDrop ?? event
+			const clientX = release.screenX - sourceWindow.screenX - windowOrigin.left
+			const clientY = release.screenY - sourceWindow.screenY - windowOrigin.top
+			const destination = (nativeDrop?.target as Node | null)?.ownerDocument
+			const outside =
+				!droppedOnDock &&
+				((destination && destination !== source.ownerDocument) ||
+					clientX < area.left ||
+					clientX > area.right ||
+					clientY < area.top ||
+					clientY > area.bottom)
+			const shouldPopout =
+				!cancelled &&
+				!moved &&
+				!dropped &&
+				(release.screenX !== 0 || release.screenY !== 0) &&
+				outside
+			clearDrag?.()
+			if (shouldPopout) openPopout(release)
+		}
+
+		function onKeydown(event: KeyboardEvent) {
+			if (event.key === 'Escape') cancelled = true
+		}
+
+		function onWindowClose() {
+			cancelled = true
+			clearDrag?.()
+		}
+
+		function cleanup() {
+			if (clearDrag === cleanup) clearDrag = undefined
+			clearTimeout(dropCleanupTimer)
+			source.removeEventListener('dragend', onDragEnd)
+			for (const child of windows) {
+				child.removeEventListener('dragover', onDragOver)
+				child.removeEventListener('drop', observeDrop, true)
+				child.removeEventListener('drop', onBackgroundDrop)
+				child.removeEventListener('keydown', onKeydown, true)
+				child.removeEventListener('beforeunload', onWindowClose)
+			}
+			movedSubscription.dispose()
+			dropSubscription.dispose()
+		}
+		clearDrag = cleanup
+		source.addEventListener('dragend', onDragEnd)
+		for (const child of windows) {
+			child.addEventListener('dragover', onDragOver)
+			child.addEventListener('drop', observeDrop, { capture: true, passive: true })
+			child.addEventListener('drop', onBackgroundDrop)
+			child.addEventListener('keydown', onKeydown, true)
+			child.addEventListener('beforeunload', onWindowClose)
+		}
+	}
+
+	const subscriptions = [
+		api.onWillDragPanel(({ panel, nativeEvent }) => onDragStart(panel, panel.group, nativeEvent)),
+		api.onWillDragGroup(({ group, nativeEvent }) => onDragStart(group, group, nativeEvent)),
+	]
+	return {
+		dispose() {
+			clearDrag?.()
+			subscriptions.forEach((subscription) => subscription.dispose())
+		},
+	}
+}
+
+/**
+ * What popouts need from the component setting the workbench up, which can only be had during
+ * its setup, while docks (and their popouts) come up later.
+ */
+export function usePopoutServices() {
+	const { addNotification, removeNotification } = injectNotificationManager()
+	const { formatMessage } = useVIntl()
+	return { addNotification, removeNotification, formatMessage }
+}
+
+export type PopoutServices = ReturnType<typeof usePopoutServices>
+
+export interface DockPopoutsOptions {
+	api: DockviewApi
+	services: PopoutServices
+	options: WorkbenchPopoutOptions
+	windows: WorkbenchWindows
+	root: () => HTMLElement | null
+	/** Whether the layout can be changed (e.g. it's loaded, and the page isn't being left). */
+	canChange: () => boolean
+	titleOf: (id: string) => string
+	/** The layout changed in a way that should be saved. */
+	onChange: () => void
+	/** The panels being dragged along with one (a selection of tabs), if any. */
+	dragPanels?: (id: string) => IDockviewPanel[] | undefined
+	/** Keeps a dragged selection around while it's popped out, until the returned function runs. */
+	keepDrag?: () => () => void
+	/** What becomes of a saved layout's windows as it's loaded. */
+	restoreMode: () => WorkbenchPopoutRestore
+}
+
+export type DockPopouts = ReturnType<typeof createDockPopouts>
+
+/**
+ * Popping a dock's panels out into their own windows: dragged off the workbench, or on request.
+ * Saved layouts keep the windows; since browsers only open them from a user gesture, reopening
+ * them is offered through a notification, while their panels wait in the main window.
+ */
+export function createDockPopouts(config: DockPopoutsOptions) {
+	const { api, options, windows } = config
+	const { addNotification, removeNotification, formatMessage } = config.services
+
+	const detached = ref<string[]>([])
+	const hasPopouts = ref(false)
+	const poppingOut = ref<string[]>([])
+	/** Where each popped out panel came from, to return it there. */
+	const sources = new Map<string, string>()
+	/** Panels no longer offered that were popped out, to return to their window if offered again. */
+	const releasedPanels = new Map<string, { group: DockviewGroupPanel; index: number }>()
+	const windowCleanups = new Map<Window, () => void>()
+	const pending = new Map<PopoutLayout, { notificationId?: string | number; opening: boolean }>()
+	/** The saved layout, kept (popouts and all) while its windows wait to be reopened. */
+	let blockedLayout: SerializedDockview | undefined
+	let blockedBaseline: string | undefined
+
+	const { pause: stopWatchingWindows, resume: watchWindows } = useIntervalFn(
+		() => {
+			for (const id of detached.value) {
+				const panel = api.getPanel(id)
+				if (panel?.api.location.type === 'popout' && panel.api.getWindow().closed) dock(id)
+			}
+		},
+		500,
+		{ immediate: false },
+	)
+
+	function updateDetached() {
+		hasPopouts.value = api.getPopouts().length > 0
+		detached.value = api.panels
+			.filter((panel) => panel.api.location.type === 'popout')
+			.map((panel) => panel.id)
+		if (detached.value.length) watchWindows()
+		else stopWatchingWindows()
+	}
+
+	function restoring() {
+		return [...pending.values()].some((entry) => entry.opening)
+	}
+
+	/** The layout to save: the blocked one while its windows wait, unless the layout has changed since. */
+	function currentLayout() {
+		const layout = api.toJSON()
+		if (blockedLayout && !restoring() && blockedBaseline !== JSON.stringify(layout)) {
+			blockedLayout = undefined
+			blockedBaseline = undefined
+		}
+		return blockedLayout ?? layout
+	}
+
+	function dismissNotifications() {
+		for (const entry of pending.values()) {
+			if (entry.notificationId !== undefined) removeNotification(entry.notificationId)
+		}
+		pending.clear()
+	}
+
+	function notifyRestoration(popout: PopoutLayout) {
+		const entry = pending.get(popout)
+		if (!entry || entry.notificationId !== undefined) return
+		const panels = popoutPanelIds(popout).map(config.titleOf).join(', ')
+		entry.notificationId = addNotification({
+			id: crypto.randomUUID(),
+			type: 'neutral',
+			containerClass: '!py-1.5 !pr-0.5 !pb-2 !rounded-xl',
+			title: formatMessage(messages.restoreTitle),
+			text: formatMessage(messages.restoreDescription, { panels }),
+			autoCloseMs: null,
+			noIcon: true,
+			buttons: [
+				{
+					label: formatMessage(messages.reopen),
+					keepOpen: true,
+					color: 'green',
+					action: () => reopen(popout),
+				},
+				{
+					label: formatMessage(messages.keepClosed),
+					keepOpen: true,
+					action: () => keepClosed(popout),
+				},
+			],
+		}).id
+	}
+
+	function keepClosed(popout: PopoutLayout) {
+		const entry = pending.get(popout)
+		if (!entry || entry.opening) return
+		if (entry.notificationId !== undefined) removeNotification(entry.notificationId)
+		pending.delete(popout)
+		if (blockedLayout) {
+			const remaining = blockedLayout.popoutGroups?.filter((group) => group !== popout)
+			blockedLayout = dockPopoutLayout({ ...blockedLayout, popoutGroups: [popout] })
+			blockedLayout.popoutGroups = remaining
+		}
+		if (!pending.size) {
+			blockedLayout = undefined
+			blockedBaseline = undefined
+		}
+		config.onChange()
+	}
+
+	async function reopen(popout: PopoutLayout) {
+		const entry = pending.get(popout)
+		if (!entry || entry.opening || !config.canChange()) return
+		currentLayout()
+		entry.opening = true
+		const opened = await restorePopout(api, popout)
+		if (pending.get(popout) !== entry) return
+		entry.opening = false
+		if (opened) {
+			if (entry.notificationId !== undefined) removeNotification(entry.notificationId)
+			pending.delete(popout)
+			if (!pending.size) blockedLayout = undefined
+		} else notifyRestoration(popout)
+		if (blockedLayout && !restoring()) blockedBaseline = JSON.stringify(api.toJSON())
+		config.onChange()
+	}
+
+	/**
+	 * Reopens a waiting window with the first click (or key press) after the page loads, as the
+	 * browser only opens windows in answer to one; each takes a click of its own.
+	 */
+	function reopenOnGesture() {
+		const next = [...pending.entries()].find(([, entry]) => !entry.opening)
+		if (next) void reopen(next[0])
+		if (![...pending.values()].some((entry) => !entry.opening)) stopReopeningOnGesture()
+	}
+
+	function stopReopeningOnGesture() {
+		window.removeEventListener('pointerdown', reopenOnGesture, true)
+		window.removeEventListener('keydown', reopenOnGesture, true)
+	}
+
+	/**
+	 * Loads a saved layout, whose windows' panels wait in the main window. As the settings choose,
+	 * they stay there, they're offered to be reopened, or their windows are reopened.
+	 */
+	function restore(layout: SerializedDockview) {
+		dismissNotifications()
+		stopReopeningOnGesture()
+		blockedLayout = undefined
+		blockedBaseline = undefined
+		const mode = config.restoreMode()
+		if (!layout.popoutGroups?.length || mode === 'close') {
+			api.fromJSON(layout.popoutGroups?.length ? dockPopoutLayout(layout) : layout, {
+				reuseExistingPanels: true,
+			})
+			return
+		}
+		api.fromJSON(dockPopoutLayout(layout), { reuseExistingPanels: true })
+		blockedLayout = layout
+		blockedBaseline = JSON.stringify(api.toJSON())
+		for (const popout of layout.popoutGroups) pending.set(popout, { opening: false })
+		if (mode === 'prompt') {
+			for (const popout of layout.popoutGroups) notifyRestoration(popout)
+			return
+		}
+		for (const popout of layout.popoutGroups) void reopen(popout)
+		window.addEventListener('pointerdown', reopenOnGesture, true)
+		window.addEventListener('keydown', reopenOnGesture, true)
+	}
+
+	function notifyFailure() {
+		addNotification({ type: 'error', title: formatMessage(messages.popoutFailed) })
+	}
+
+	async function popout(
+		target: PopoutTarget,
+		position?: DockviewPopoutGroupOptions['position'],
+		sourceWindow?: Window,
+	) {
+		const panels =
+			'panels' in target ? [...target.panels] : (config.dragPanels?.(target.id) ?? [target])
+		const ids = panels.map((panel) => panel.id)
+		if (!panels.length || ids.some((id) => poppingOut.value.includes(id))) return
+		if (target.api.location.type === 'popout' && !position) return
+		for (const panel of panels) {
+			if (panel.api.location.type === 'grid') sources.set(panel.id, panel.group.id)
+		}
+		poppingOut.value = [...poppingOut.value, ...ids]
+		try {
+			const opened = await openPopoutGroup(
+				api,
+				target,
+				{ popoutUrl: options.url, position },
+				sourceWindow,
+			)
+			if (!opened) notifyFailure()
+		} catch {
+			notifyFailure()
+		} finally {
+			poppingOut.value = poppingOut.value.filter((id) => !ids.includes(id))
+		}
+	}
+
+	function popoutPanel(id: string) {
+		const panel = api.getPanel(id)
+		if (panel) return popout(panel)
+	}
+
+	/**
+	 * Pops several panels out into one window: their group when they're all it holds, or else a
+	 * group they're gathered into beside it first.
+	 */
+	function popoutPanels(ids: string[]) {
+		const panels = ids.flatMap((id) => {
+			const panel = api.getPanel(id)
+			return panel && panel.api.location.type === 'grid' ? [panel] : []
+		})
+		const [first, ...rest] = panels
+		if (!first) return
+		if (!rest.length) return popout(first)
+		const group = first.group
+		const whole =
+			group.panels.length === panels.length && panels.every((panel) => panel.group === group)
+		if (!whole) {
+			for (const panel of panels) sources.set(panel.id, group.id)
+			first.api.moveTo({ group, position: 'right' })
+			for (const panel of rest) panel.api.moveTo({ group: first.group, position: 'center' })
+		}
+		return popout(first.group)
+	}
+
+	/** Returns a popped out panel to the group it came from, or another one in the main window. */
+	function dock(id: string) {
+		const panel = api.getPanel(id)
+		if (!panel || panel.api.location.type !== 'popout') return
+		const source = api.groups.find((group) => group.id === sources.get(id))
+		const group =
+			source?.api.location.type === 'grid' && source.panels.length
+				? source
+				: (api.groups.find(
+						(entry) =>
+							entry.api.location.type === 'grid' && entry.api.isVisible && entry.panels.length,
+					) ??
+					api.groups.find((entry) => entry.api.location.type === 'grid' && entry.api.isVisible) ??
+					api.addGroup())
+		panel.api.moveTo({ group, position: 'center' })
+		panel.api.setActive()
+		sources.delete(id)
+		config.onChange()
+	}
+
+	/** Returns every popped out panel to the main window, dropping any windows waiting to reopen. */
+	function closeAll() {
+		stopReopeningOnGesture()
+		blockedLayout = undefined
+		dismissNotifications()
+		for (const id of [...detached.value]) dock(id)
+		releasedPanels.clear()
+		for (const group of api.groups) {
+			if (group.api.location.type === 'popout' && !group.panels.length) api.removeGroup(group)
+		}
+	}
+
+	/** Shows a panel; one in a popout is brought to the front of its window. */
+	function reveal(panel: IDockviewPanel) {
+		if (panel.api.location.type !== 'popout') return false
+		if (!panel.api.isVisible) panel.group.model.openPanel(panel, { skipSetGroupActive: true })
+		panel.api.getWindow().focus()
+		return true
+	}
+
+	/** Takes a panel that's no longer offered out of its window, remembering where to return it. */
+	function release(panel: IDockviewPanel) {
+		if (panel.api.location.type !== 'popout') return false
+		const group = panel.group
+		releasedPanels.set(panel.id, { group, index: group.panels.indexOf(panel) })
+		releasePopoutPanel(panel)
+		return true
+	}
+
+	/** Where a panel offered again should go: back to the window it was released from, if still open. */
+	function positionFor(id: string) {
+		const previous = releasedPanels.get(id)
+		releasedPanels.delete(id)
+		if (
+			previous &&
+			api.groups.includes(previous.group) &&
+			previous.group.api.location.type === 'popout' &&
+			!previous.group.api.getWindow().closed
+		) {
+			return { referenceGroup: previous.group.id, index: previous.index }
+		}
+		return undefined
+	}
+
+	const subscriptions: DockviewIDisposable[] = [
+		registerDragPopouts(api, config.root, (target, position, sourceWindow) => {
+			const releaseDrag = config.keepDrag?.()
+			void popout(target, position, sourceWindow).finally(() => releaseDrag?.())
+		}),
+		api.onDidAddPopoutGroup(({ window: child }) => {
+			updateDetached()
+			if (windowCleanups.has(child)) return
+			const unregister = windows.register(child)
+			const removeAppearance = configurePopoutWindow(child, config.root())
+			const hostCleanup = options.onWindow?.(child)
+			windowCleanups.set(child, () => {
+				unregister()
+				removeAppearance()
+				hostCleanup?.()
+			})
+		}),
+		api.onDidRemovePopoutGroup(() => {
+			updateDetached()
+			const open = new Set(api.getPopouts().map((entry) => entry.window))
+			for (const [child, cleanup] of windowCleanups) {
+				if (open.has(child)) continue
+				cleanup()
+				windowCleanups.delete(child)
+			}
+		}),
+		api.onDidLayoutChange(updateDetached),
+	]
+
+	function dispose() {
+		stopWatchingWindows()
+		stopReopeningOnGesture()
+		dismissNotifications()
+		for (const subscription of subscriptions) subscription.dispose()
+		for (const cleanup of windowCleanups.values()) cleanup()
+		windowCleanups.clear()
+	}
+
+	return {
+		detached: detached as Ref<string[]>,
+		hasPopouts,
+		poppingOut,
+		restoring,
+		currentLayout,
+		restore,
+		popoutPanel,
+		popoutPanels,
+		dock,
+		closeAll,
+		reveal,
+		release,
+		positionFor,
+		dispose,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/workbench/composables/tab-bars.ts b/packages/ui/src/layouts/shared/workbench/composables/tab-bars.ts
new file mode 100644
index 0000000000..afab5d8382
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/composables/tab-bars.ts
@@ -0,0 +1,130 @@
+import type { DockviewApi, DockviewGroupPanel, DockviewIDisposable } from 'dockview-vue'
+
+const CHEVRON_DOWN =
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>'
+
+export interface TabBarsOptions {
+	/** Whether groups holding a single tab hide their tab bar at the moment. */
+	hideLone: () => boolean
+	/** Whether the user hid the group's tab bar. */
+	hiddenByUser: (group: DockviewGroupPanel) => boolean
+	/** Shows a tab bar the user hid. */
+	showHidden: (group: DockviewGroupPanel) => void
+	/** The handle's label, while its tab bar is hidden or pulled down. */
+	label: (hidden: boolean) => string
+}
+
+/**
+ * Hides the tab bars of a dock's groups (in its popout windows too) that the user hid, and, as the
+ * settings choose, of those holding a single tab, leaving the tab the group's whole height. A
+ * handle at the group's top right pulls the tab bar down (e.g. to reach its menus, or to drag
+ * another tab in), and folds a lone tab's bar away again.
+ */
+export function registerTabBars(
+	api: DockviewApi,
+	options: TabBarsOptions,
+): DockviewIDisposable & { update: () => void } {
+	const handles = new Map<DockviewGroupPanel, HTMLButtonElement>()
+	const pulledDown = new WeakSet<DockviewGroupPanel>()
+	let scheduled = false
+
+	function tabBarOf(group: DockviewGroupPanel) {
+		return group.element.querySelector<HTMLElement>(':scope > .dv-tabs-and-actions-container')
+	}
+
+	function isLone(group: DockviewGroupPanel) {
+		return options.hideLone() && group.panels.length === 1
+	}
+
+	function toggle(group: DockviewGroupPanel) {
+		if (options.hiddenByUser(group)) {
+			options.showHidden(group)
+			pulledDown.add(group)
+		} else if (pulledDown.has(group)) pulledDown.delete(group)
+		else pulledDown.add(group)
+		update()
+	}
+
+	function handleFor(group: DockviewGroupPanel) {
+		const existing = handles.get(group)
+		if (existing) return existing
+		const handle = group.element.ownerDocument.createElement('button')
+		handle.type = 'button'
+		handle.className = 'workbench-tab-bar-handle'
+		handle.innerHTML = CHEVRON_DOWN
+		handle.addEventListener('click', (event) => {
+			event.stopPropagation()
+			toggle(group)
+		})
+		handle.addEventListener('pointerdown', (event) => event.stopPropagation())
+		group.element.appendChild(handle)
+		handles.set(group, handle)
+		return handle
+	}
+
+	function removeHandle(group: DockviewGroupPanel) {
+		handles.get(group)?.remove()
+		handles.delete(group)
+	}
+
+	function update() {
+		scheduled = false
+		for (const group of handles.keys()) {
+			if (!api.groups.includes(group)) removeHandle(group)
+		}
+		for (const group of api.groups) {
+			const occupied = group.panels.length > 0
+			const lone = occupied && isLone(group)
+			const hidden = occupied && (options.hiddenByUser(group) || (lone && !pulledDown.has(group)))
+			if (group.header.hidden !== hidden) {
+				group.header.hidden = hidden
+				group.relayout()
+			}
+			if (!hidden && !lone) {
+				removeHandle(group)
+				continue
+			}
+			const handle = handleFor(group)
+			if (handle.parentElement !== group.element) group.element.appendChild(handle)
+			const tabBar = tabBarOf(group)
+			handle.style.top = hidden || !tabBar ? '' : `${tabBar.offsetHeight}px`
+			handle.classList.toggle('is-pulled-down', !hidden)
+			handle.setAttribute('aria-expanded', String(!hidden))
+			const label = options.label(hidden)
+			handle.setAttribute('aria-label', label)
+			handle.title = label
+		}
+	}
+
+	/** Waits for a move to settle, as moving a group's tabs briefly empties or fills it. */
+	function schedule() {
+		if (scheduled) return
+		scheduled = true
+		queueMicrotask(update)
+	}
+
+	const subscriptions = [
+		api.onDidLayoutChange(schedule),
+		api.onDidAddPanel(schedule),
+		api.onDidRemovePanel(schedule),
+		api.onDidAddGroup(schedule),
+		api.onDidRemoveGroup(schedule),
+		api.onDidAddPopoutGroup(schedule),
+	]
+	schedule()
+
+	return {
+		update,
+		dispose() {
+			for (const subscription of subscriptions) subscription.dispose()
+			for (const [group, handle] of handles) {
+				handle.remove()
+				if (group.header.hidden) {
+					group.header.hidden = false
+					group.relayout()
+				}
+			}
+			handles.clear()
+		},
+	}
+}
diff --git a/packages/ui/src/layouts/shared/workbench/composables/use-detached-layout.ts b/packages/ui/src/layouts/shared/workbench/composables/use-detached-layout.ts
new file mode 100644
index 0000000000..97744d9df7
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/composables/use-detached-layout.ts
@@ -0,0 +1,62 @@
+import { onBeforeUnmount, type Ref, watch } from 'vue'
+
+import { injectWorkbenchPanel } from '../providers/workbench'
+
+/**
+ * Lays out a grid or dock of a workbench nested in another's panel while that panel is popped
+ * out. Dockview only follows the size of views within the main document, so in a popout window a
+ * nested workbench would keep the size it first had; this follows it with the window's own
+ * observer, and lays it out once more on its return.
+ */
+export function useDetachedLayout(
+	element: Readonly<Ref<HTMLElement | null | undefined>>,
+	layout: (width: number, height: number) => void,
+) {
+	const panel = injectWorkbenchPanel(null)
+	let observer: ResizeObserver | undefined
+	let detached = false
+	let timer: ReturnType<typeof setTimeout> | undefined
+
+	function observe() {
+		observer?.disconnect()
+		observer = undefined
+		const target = element.value
+		const view = target?.ownerDocument.defaultView
+		if (!target || !view) return
+		if (target.ownerDocument === document) {
+			if (detached && target.clientWidth > 0 && target.clientHeight > 0) {
+				layout(target.clientWidth, target.clientHeight)
+			}
+			detached = false
+			return
+		}
+		detached = true
+		const owner = target.ownerDocument
+		observer = new view.ResizeObserver(([entry]) => {
+			if (target.ownerDocument !== owner) {
+				observe()
+				return
+			}
+			const width = Math.round(entry.contentRect.width)
+			const height = Math.round(entry.contentRect.height)
+			if (width > 0 && height > 0) layout(width, height)
+		})
+		observer.observe(target)
+	}
+
+	if (panel) {
+		watch(
+			[element, panel.window],
+			() => {
+				clearTimeout(timer)
+				timer = setTimeout(observe)
+			},
+			{ immediate: true, flush: 'post' },
+		)
+	}
+
+	onBeforeUnmount(() => {
+		clearTimeout(timer)
+		observer?.disconnect()
+	})
+}
diff --git a/packages/ui/src/layouts/shared/workbench/composables/use-menus.ts b/packages/ui/src/layouts/shared/workbench/composables/use-menus.ts
new file mode 100644
index 0000000000..c44006cd6c
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/composables/use-menus.ts
@@ -0,0 +1,393 @@
+import {
+	ArrowUpDownIcon,
+	ExternalIcon,
+	EyeOffIcon,
+	FoldVerticalIcon,
+	LayersIcon,
+	LayoutTemplateIcon,
+	LinkIcon,
+	MoveIcon,
+	PanelTopCloseIcon,
+	SplitIcon,
+	UndoIcon,
+	UnfoldHorizontalIcon,
+	UnfoldVerticalIcon,
+	UnlinkIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { computed } from 'vue'
+
+import type { ButtonMenuLeafOption, ButtonMenuOption } from '#ui/components/base/buttons/types'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import type { WorkbenchContext } from '../providers/workbench'
+import type { WorkbenchHost, WorkbenchPanel, WorkbenchSplitSide } from '../types'
+
+const messages = defineMessages({
+	moveTo: { id: 'workbench.menu.move-to', defaultMessage: 'Move to' },
+	center: { id: 'workbench.menu.region.center', defaultMessage: 'Center' },
+	left: { id: 'workbench.menu.region.left', defaultMessage: 'Left panel' },
+	right: { id: 'workbench.menu.region.right', defaultMessage: 'Right panel' },
+	bottom: { id: 'workbench.menu.region.bottom', defaultMessage: 'Bottom panel' },
+	split: { id: 'workbench.menu.split', defaultMessage: 'Split' },
+	splitRight: { id: 'workbench.menu.split.right', defaultMessage: 'To the right' },
+	splitLeft: { id: 'workbench.menu.split.left', defaultMessage: 'To the left' },
+	splitBelow: { id: 'workbench.menu.split.below', defaultMessage: 'Below' },
+	splitAbove: { id: 'workbench.menu.split.above', defaultMessage: 'Above' },
+	popout: { id: 'workbench.menu.popout', defaultMessage: 'Open in its own window' },
+	popoutSelected: {
+		id: 'workbench.menu.popout-selected',
+		defaultMessage: 'Open {count} tabs in their own window',
+	},
+	dock: { id: 'workbench.menu.dock', defaultMessage: 'Return to the main window' },
+	openPanel: { id: 'workbench.menu.open-panel', defaultMessage: 'Open panel' },
+	closePanel: { id: 'workbench.menu.close-panel', defaultMessage: 'Close panel' },
+	closeSelected: { id: 'workbench.menu.close-selected', defaultMessage: 'Close {count} tabs' },
+	selected: { id: 'workbench.menu.selected', defaultMessage: '{count} tabs selected' },
+	area: { id: 'workbench.menu.area', defaultMessage: 'Area' },
+	hideRegion: { id: 'workbench.menu.hide-region', defaultMessage: 'Hide' },
+	collapseRegion: { id: 'workbench.menu.collapse-region', defaultMessage: 'Collapse to tabs' },
+	expandRegion: { id: 'workbench.menu.expand-region', defaultMessage: 'Expand' },
+	hideBar: { id: 'workbench.menu.hide-bar', defaultMessage: 'Hide tab bar' },
+	reverseGroups: { id: 'workbench.menu.reverse-groups', defaultMessage: 'Reverse group order' },
+	panels: { id: 'workbench.menu.panels', defaultMessage: 'Panels' },
+	togglePanel: { id: 'workbench.menu.toggle-panel', defaultMessage: 'Toggle panel' },
+	linkWith: { id: 'workbench.menu.link-with', defaultMessage: 'Link with' },
+	linkSelected: { id: 'workbench.menu.link-selected', defaultMessage: 'Link {count} tabs' },
+	group: { id: 'workbench.menu.group', defaultMessage: 'Group' },
+	separateAll: { id: 'workbench.menu.separate-all', defaultMessage: 'Separate all' },
+	takeOut: { id: 'workbench.menu.take-out', defaultMessage: 'Take out {name}' },
+	sideBySide: { id: 'workbench.menu.side-by-side', defaultMessage: 'Side by side' },
+	stacked: { id: 'workbench.menu.stacked', defaultMessage: 'One above the other' },
+	reverseLink: { id: 'workbench.menu.reverse-link', defaultMessage: 'Reverse linked order' },
+})
+
+const hostMessages = {
+	center: messages.center,
+	left: messages.left,
+	right: messages.right,
+	bottom: messages.bottom,
+} satisfies Record<WorkbenchHost, unknown>
+
+const splitMessages = {
+	right: messages.splitRight,
+	left: messages.splitLeft,
+	bottom: messages.splitBelow,
+	top: messages.splitAbove,
+} satisfies Record<WorkbenchSplitSide, unknown>
+
+/**
+ * The workbench's menus, opened with `open` (e.g. a context menu's), offering what the mode
+ * allows. Closed panels can be opened from each of them, which is how they come back. A tab's
+ * menu acts on every selected tab when it's one of them.
+ */
+export function useWorkbenchMenus(
+	workbench: WorkbenchContext,
+	open: (event: MouseEvent, options: ButtonMenuOption[]) => void,
+): Pick<
+	WorkbenchContext,
+	'openPanelMenu' | 'openRegionMenu' | 'panelsMenuOptions' | 'documentMoveOption'
+> {
+	const { formatMessage } = useVIntl()
+	const { mode } = workbench
+
+	function hosts(): WorkbenchHost[] {
+		return ['center', ...workbench.usedRegions.value]
+	}
+
+	function openClosedOptions(host: WorkbenchHost): ButtonMenuLeafOption[] {
+		return workbench.closedPanels.value.map((panel) => ({
+			id: `open-${panel.id}`,
+			label: panel.title,
+			icon: panel.icon,
+			action: () => workbench.movePanel(panel.id, host),
+		}))
+	}
+
+	function moveToOption(current: WorkbenchHost, move: (host: WorkbenchHost) => void) {
+		return {
+			type: 'submenu',
+			id: 'move-to',
+			label: formatMessage(messages.moveTo),
+			icon: MoveIcon,
+			options: hosts()
+				.filter((host) => host !== current)
+				.map((host) => ({
+					id: `move-${host}`,
+					label: formatMessage(hostMessages[host]),
+					action: () => move(host),
+				})),
+		} satisfies ButtonMenuOption
+	}
+
+	/** Splits along a dock's length first: below or above in the narrow side regions, else beside. */
+	function splitOption(host: WorkbenchHost, ids: string[]): ButtonMenuOption {
+		const sides: WorkbenchSplitSide[] =
+			host === 'left' || host === 'right'
+				? ['bottom', 'top', 'right', 'left']
+				: ['right', 'left', 'bottom', 'top']
+		return {
+			type: 'submenu',
+			id: 'split',
+			label: formatMessage(messages.split),
+			icon: SplitIcon,
+			disabled: !workbench.canSplit(ids),
+			options: sides.map((side) => ({
+				id: `split-${side}`,
+				label: formatMessage(splitMessages[side]),
+				action: () => workbench.splitPanels(ids, side),
+			})),
+		}
+	}
+
+	/**
+	 * What can be done with the area a tab bar is in: collapsing, expanding or hiding a side
+	 * region (the center is always shown), hiding the tab bar's group's bar, and turning the
+	 * area's groups around. A popout window only has its tab bar to hide.
+	 */
+	function areaOption(
+		host: WorkbenchHost,
+		panelId: string | undefined,
+		inPopout: boolean,
+	): ButtonMenuOption | null {
+		const options: ButtonMenuLeafOption[] = []
+		if (host !== 'center' && !inPopout) {
+			const collapsed = workbench.collapsed[host].value
+			options.push(
+				{
+					id: collapsed ? 'expand-region' : 'collapse-region',
+					label: formatMessage(collapsed ? messages.expandRegion : messages.collapseRegion),
+					icon: FoldVerticalIcon,
+					action: () => workbench.setRegionCollapsed(host, !collapsed),
+				},
+				{
+					id: 'hide-region',
+					label: formatMessage(messages.hideRegion),
+					icon: EyeOffIcon,
+					action: () => workbench.setRegionVisible(host, false),
+				},
+			)
+		}
+		if (panelId && workbench.canHideTabBar(host)) {
+			options.push({
+				id: 'hide-bar',
+				label: formatMessage(messages.hideBar),
+				icon: PanelTopCloseIcon,
+				action: () => workbench.hideTabBar(panelId),
+			})
+		}
+		if (!inPopout && workbench.canReverseGroups(host)) {
+			options.push({
+				id: 'reverse-groups',
+				label: formatMessage(messages.reverseGroups),
+				icon: ArrowUpDownIcon,
+				action: () => workbench.reverseGroups(host),
+			})
+		}
+		if (!options.length) return null
+		return {
+			type: 'submenu',
+			id: 'area',
+			label: formatMessage(messages.area),
+			icon: LayoutTemplateIcon,
+			options,
+		}
+	}
+
+	/** What can be done with a linked tab's panels: how they're laid out, and separating them. */
+	function linkGroupOption(tab: WorkbenchPanel): ButtonMenuOption {
+		const link = workbench.links.value.find((candidate) => candidate.id === tab.id)
+		const sideBySide = link?.orientation === 'horizontal'
+		return {
+			type: 'submenu',
+			id: 'group',
+			label: formatMessage(messages.group),
+			icon: LinkIcon,
+			options: [
+				{
+					id: 'link-orientation',
+					label: formatMessage(sideBySide ? messages.stacked : messages.sideBySide),
+					icon: sideBySide ? UnfoldVerticalIcon : UnfoldHorizontalIcon,
+					action: () =>
+						workbench.setLinkOrientation(tab.id, sideBySide ? 'vertical' : 'horizontal'),
+				},
+				{
+					id: 'reverse-link',
+					label: formatMessage(messages.reverseLink),
+					icon: ArrowUpDownIcon,
+					action: () => workbench.reverseLink(tab.id),
+				},
+				{ type: 'divider' },
+				{
+					id: 'separate-all',
+					label: formatMessage(messages.separateAll),
+					icon: UnlinkIcon,
+					action: () => workbench.unlinkAll(tab.id),
+				},
+				...(tab.members ?? []).map((member) => ({
+					id: `take-out-${member.id}`,
+					label: formatMessage(messages.takeOut, { name: member.title }),
+					icon: member.icon,
+					action: () => workbench.unlinkPanel(member.id),
+				})),
+			],
+		}
+	}
+
+	function openPanelMenu(event: MouseEvent, id: string) {
+		const panel = workbench.panels.value.find((candidate) => candidate.id === id)
+		if (!panel) return
+		const host = workbench.regionOf(panel)
+		const detached = workbench.isDetached(id)
+		const selection = workbench.selectedPanels.value
+		const ids = selection.length > 1 && selection.includes(id) ? [...selection] : [id]
+		const several = ids.length > 1
+		const closedOptions = mode.closePanels ? openClosedOptions(host) : []
+		const options: ButtonMenuOption[] = []
+
+		if (several) {
+			options.push({
+				type: 'heading',
+				id: 'selected',
+				label: formatMessage(messages.selected, { count: ids.length }),
+			})
+		}
+		if (mode.movePanels && !detached) {
+			options.push(
+				moveToOption(host, (target) => {
+					for (const each of ids) workbench.movePanel(each, target)
+				}),
+			)
+			if (several) {
+				options.push({
+					id: 'link-selected',
+					label: formatMessage(messages.linkSelected, { count: ids.length }),
+					icon: LinkIcon,
+					action: () => {
+						for (const other of ids.slice(1)) workbench.linkPanels(ids[0], other)
+					},
+				})
+			} else {
+				const others = workbench.panels.value.filter(
+					(other) => other.id !== id && workbench.isOpen(other.id),
+				)
+				if (others.length) {
+					options.push({
+						type: 'submenu',
+						id: 'link-with',
+						label: formatMessage(messages.linkWith),
+						icon: LinkIcon,
+						options: others.map((other) => ({
+							id: `link-${other.id}`,
+							label: other.title,
+							icon: other.icon,
+							action: () => workbench.linkPanels(id, other.id),
+						})),
+					})
+				}
+			}
+		}
+		if (panel.members && !several) options.push(linkGroupOption(panel))
+		if (mode.splitPanels && !mode.headerless.includes(host) && !detached) {
+			options.push(splitOption(host, ids))
+		}
+		if (detached) {
+			options.push({
+				id: 'dock',
+				label: formatMessage(messages.dock),
+				icon: UndoIcon,
+				action: () => {
+					for (const each of ids) workbench.dockPanel(each)
+				},
+			})
+		} else if (workbench.canPopout(id)) {
+			options.push({
+				id: 'popout',
+				label: several
+					? formatMessage(messages.popoutSelected, { count: ids.length })
+					: formatMessage(messages.popout),
+				icon: ExternalIcon,
+				action: () => void workbench.popoutPanels(ids),
+			})
+		}
+		const area = areaOption(host, id, detached)
+		if (area) options.push({ type: 'divider' }, area)
+		if (closedOptions.length) {
+			options.push(
+				{ type: 'divider' },
+				{
+					type: 'submenu',
+					id: 'open-panel',
+					label: formatMessage(messages.openPanel),
+					icon: LayersIcon,
+					options: closedOptions,
+				},
+			)
+		}
+		if (mode.closePanels) {
+			options.push(
+				{ type: 'divider' },
+				{
+					id: 'close-panel',
+					label: several
+						? formatMessage(messages.closeSelected, { count: ids.length })
+						: formatMessage(messages.closePanel),
+					icon: XIcon,
+					action: () => {
+						for (const each of ids) workbench.closePanel(each)
+					},
+				},
+			)
+		}
+		if (options.some((option) => option.type !== 'divider')) open(event, options)
+	}
+
+	/** The menu of a tab bar's empty part; `panelId` is a panel of its group, if it holds any. */
+	function openRegionMenu(event: MouseEvent, host: WorkbenchHost, panelId?: string) {
+		const closedOptions = mode.closePanels ? openClosedOptions(host) : []
+		const options: ButtonMenuOption[] = []
+		if (closedOptions.length) {
+			options.push({
+				type: 'submenu',
+				id: 'open-panel',
+				label: formatMessage(messages.openPanel),
+				icon: LayersIcon,
+				options: closedOptions,
+			})
+		}
+		const area = areaOption(host, panelId, !!event.view && event.view !== window)
+		if (area) options.push(area)
+		if (options.length) open(event, options)
+	}
+
+	/** Every panel, to open or close each, in a submenu, e.g. for a toolbar menu. */
+	const panelsMenuOptions = computed<ButtonMenuOption[]>(() => [
+		{
+			type: 'submenu',
+			id: 'toggle-panel',
+			label: formatMessage(messages.togglePanel),
+			icon: LayersIcon,
+			options: workbench.panels.value.map((panel) => {
+				const isOpen = workbench.isOpen(panel.id)
+				return {
+					id: `panel-${panel.id}`,
+					label: panel.title,
+					icon: panel.icon,
+					selected: isOpen,
+					action: () =>
+						isOpen && mode.closePanels
+							? workbench.closePanel(panel.id)
+							: workbench.revealPanel(panel.id),
+				}
+			}),
+		},
+	])
+
+	function documentMoveOption(id: string) {
+		const host = workbench.hostOfDocument(id)
+		if (!host || !mode.movePanels) return null
+		return moveToOption(host, (target) => workbench.moveDocument(id, target))
+	}
+
+	return { openPanelMenu, openRegionMenu, panelsMenuOptions, documentMoveOption }
+}
diff --git a/packages/ui/src/layouts/shared/workbench/composables/use-tab-selection.ts b/packages/ui/src/layouts/shared/workbench/composables/use-tab-selection.ts
new file mode 100644
index 0000000000..f4e82ee436
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/composables/use-tab-selection.ts
@@ -0,0 +1,180 @@
+import type { DockviewApi, IDockviewPanel } from 'dockview-vue'
+import { shallowRef } from 'vue'
+
+import type { WorkbenchWindows } from './use-windows'
+
+/** The attribute on a tab's content naming the panel it belongs to. */
+export const WORKBENCH_TAB_ATTRIBUTE = 'data-workbench-panel'
+
+/**
+ * Selecting several tabs of a group (shift click for a range, ctrl or cmd click to toggle), which
+ * are then dragged together. Spans every dock it's registered with.
+ */
+export function useWorkbenchSelection(windows: WorkbenchWindows) {
+	const selectedPanels = shallowRef<readonly string[]>([])
+	const apis = new Set<DockviewApi>()
+	let anchor: IDockviewPanel | undefined
+	let drag:
+		| {
+				panel: IDockviewPanel
+				panels: IDockviewPanel[]
+				pendingPopout: boolean
+		  }
+		| undefined
+
+	function clear() {
+		selectedPanels.value = []
+		anchor = undefined
+	}
+
+	function findPanel(id: string) {
+		for (const api of apis) {
+			const panel = api.getPanel(id)
+			if (panel) return panel
+		}
+		return undefined
+	}
+
+	function panelAt(event: Event) {
+		const target = event.target as Element | null
+		const tab = target
+			?.closest('.dv-tab')
+			?.querySelector<HTMLElement>(`[${WORKBENCH_TAB_ATTRIBUTE}]`)
+		const id = tab?.getAttribute(WORKBENCH_TAB_ATTRIBUTE)
+		return id ? findPanel(id) : undefined
+	}
+
+	windows.listen(
+		'pointerdown',
+		(event) => {
+			if (event.button !== 0) return
+			drag = undefined
+			const panel = panelAt(event)
+			if (!panel) {
+				clear()
+				return
+			}
+			const toggle = event.metaKey || event.ctrlKey
+			if (event.shiftKey || toggle) {
+				event.preventDefault()
+				event.stopPropagation()
+				const group = panel.group
+				const selected = selectedPanels.value.filter((id) => findPanel(id)?.group === group)
+				const active = group.activePanel
+				/* Starting a selection takes in the tab in front, as browsers' tab strips do. */
+				const previous = selected.length || !active || active === panel ? selected : [active.id]
+				if (event.shiftKey) {
+					const start = anchor?.group === group ? anchor : (group.activePanel ?? panel)
+					const from = group.panels.indexOf(start)
+					const to = group.panels.indexOf(panel)
+					const range = group.panels.slice(Math.min(from, to), Math.max(from, to) + 1)
+					selectedPanels.value = [
+						...new Set([...(toggle ? previous : []), ...range.map((entry) => entry.id)]),
+					]
+					anchor = start
+				} else {
+					selectedPanels.value = previous.includes(panel.id)
+						? previous.filter((id) => id !== panel.id)
+						: [...previous, panel.id]
+					anchor = panel
+				}
+			} else {
+				if (!selectedPanels.value.includes(panel.id)) selectedPanels.value = []
+				anchor = panel
+			}
+		},
+		{ capture: true },
+	)
+	windows.listen(
+		'click',
+		(event) => {
+			const panel = panelAt(event)
+			if (panel && (event.shiftKey || event.metaKey || event.ctrlKey)) {
+				event.preventDefault()
+				event.stopPropagation()
+			} else if (panel) selectedPanels.value = []
+			else clear()
+		},
+		{ capture: true },
+	)
+	windows.listen('keydown', (event) => {
+		if (event.key === 'Escape') {
+			clear()
+			drag = undefined
+		}
+	})
+	windows.listen('dragend', () => {
+		const ended = drag
+		queueMicrotask(() => {
+			if (drag === ended && !ended?.pendingPopout) drag = undefined
+		})
+	})
+
+	return {
+		selectedPanels,
+		/** The selected panels being dragged along with the given one, if it's part of a selection. */
+		getDragPanels(id: string) {
+			return drag?.panel.id === id ? drag.panels : undefined
+		},
+		/** Keeps the dragged selection around while it's popped out, until the returned function runs. */
+		keepDragForPopout() {
+			const pending = drag
+			if (pending) pending.pendingPopout = true
+			return () => {
+				if (drag === pending) drag = undefined
+			}
+		},
+		register(api: DockviewApi) {
+			apis.add(api)
+			let disposed = false
+			const subscriptions = [
+				api.onWillDragPanel(({ panel }) => {
+					const panels = panel.group.panels.filter((entry) =>
+						selectedPanels.value.includes(entry.id),
+					)
+					drag =
+						panels.length > 1 && panels.includes(panel)
+							? { panel, panels, pendingPopout: false }
+							: undefined
+				}),
+				api.onDidMovePanel(({ panel }) => {
+					const moved = drag
+					if (!moved || moved.panel !== panel) return
+					drag = undefined
+					queueMicrotask(() => {
+						if (disposed || api.getPanel(panel.id) !== panel) return
+						const group = panel.group
+						const panels = moved.panels.filter((entry) => api.getPanel(entry.id) === entry)
+						const before = group.panels.slice(0, group.panels.indexOf(panel))
+						const index = before.filter((entry) => !panels.includes(entry)).length
+						const order = group.panels.filter((entry) => !panels.includes(entry))
+						order.splice(index, 0, ...panels)
+						for (const [position, entry] of order.entries()) {
+							if (group.panels[position] !== entry) {
+								entry.api.moveTo({
+									group,
+									position: 'center',
+									index: position,
+									skipSetActive: true,
+								})
+							}
+						}
+						panel.api.setActive()
+					})
+				}),
+				api.onDidRemovePanel((panel) => {
+					selectedPanels.value = selectedPanels.value.filter((id) => id !== panel.id)
+					if (anchor === panel) anchor = undefined
+				}),
+				api.onDidLayoutFromJSON(clear),
+			]
+			return {
+				dispose() {
+					disposed = true
+					apis.delete(api)
+					for (const subscription of subscriptions) subscription.dispose()
+				},
+			}
+		},
+	}
+}
diff --git a/packages/ui/src/layouts/shared/workbench/composables/use-windows.ts b/packages/ui/src/layouts/shared/workbench/composables/use-windows.ts
new file mode 100644
index 0000000000..b3ae301d1e
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/composables/use-windows.ts
@@ -0,0 +1,40 @@
+import { onScopeDispose, shallowRef, watch } from 'vue'
+
+export type WorkbenchWindows = ReturnType<typeof useWorkbenchWindows>
+
+/**
+ * The windows showing the workbench: the main one and any popouts. Popout windows share the main
+ * window's JavaScript, so listeners meant for the whole workbench go on each of them.
+ */
+export function useWorkbenchWindows() {
+	const windows = shallowRef<Window[]>(typeof window === 'undefined' ? [] : [window])
+
+	/** Listens on every window showing the workbench, as they come and go, until stopped. */
+	function listen<K extends keyof WindowEventMap>(
+		event: K,
+		listener: (event: WindowEventMap[K]) => void,
+		options?: AddEventListenerOptions,
+	) {
+		const stop = watch(
+			windows,
+			(targets, _, onCleanup) => {
+				for (const target of targets) target.addEventListener(event, listener, options)
+				onCleanup(() => {
+					for (const target of targets) target.removeEventListener(event, listener, options)
+				})
+			},
+			{ immediate: true, flush: 'sync' },
+		)
+		onScopeDispose(stop)
+		return stop
+	}
+
+	function register(target: Window) {
+		windows.value = [...windows.value, target]
+		return () => {
+			windows.value = windows.value.filter((entry) => entry !== target)
+		}
+	}
+
+	return { windows, listen, register }
+}
diff --git a/packages/ui/src/layouts/shared/workbench/index.ts b/packages/ui/src/layouts/shared/workbench/index.ts
new file mode 100644
index 0000000000..0300f5c61e
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/index.ts
@@ -0,0 +1,12 @@
+export { SlotOutlet } from './components/slot-outlet'
+export { createWorkbench, type WorkbenchOptions } from './composables/create-workbench'
+export { default as WorkbenchLayout } from './layout.vue'
+export {
+	injectWorkbench,
+	injectWorkbenchPanel,
+	provideWorkbench,
+	type WorkbenchContext,
+	type WorkbenchPanelContext,
+} from './providers'
+export * from './settings'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/workbench/layout.vue b/packages/ui/src/layouts/shared/workbench/layout.vue
new file mode 100644
index 0000000000..b3a073d92a
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/layout.vue
@@ -0,0 +1,129 @@
+<template>
+	<div
+		ref="root"
+		class="workbench-root dockview-theme-modrinth flex h-full min-h-0 w-full flex-col"
+		:class="`workbench-${workbench.variant.value}`"
+		@dblclick="workbench.onSashDoubleClick"
+	>
+		<GridviewVue
+			class="workbench-grid min-h-0 w-full flex-1"
+			:orientation="Orientation.HORIZONTAL"
+			:components="components"
+			:proportional-layout="false"
+			@ready="onGridReady"
+		/>
+		<ContextMenu ref="contextMenu" :label="formatMessage(messages.menuLabel)" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type GridviewApi, type GridviewReadyEvent, GridviewVue, Orientation } from 'dockview-vue'
+import { onMounted, ref, shallowRef, type VNode } from 'vue'
+
+import { ContextMenu } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import Dock from './components/dock/index.vue'
+import { createWorkbench, WORKBENCH_DOCK_COMPONENT } from './composables/create-workbench'
+import { useDetachedLayout } from './composables/use-detached-layout'
+import { provideWorkbench, type WorkbenchContext } from './providers/workbench'
+import type {
+	WorkbenchDocuments,
+	WorkbenchMode,
+	WorkbenchModeName,
+	WorkbenchPanel,
+	WorkbenchRegion as Region,
+	WorkbenchRegionSizes,
+	WorkbenchVariant,
+} from './types'
+
+const props = defineProps<{
+	/**
+	 * A workbench made with `createWorkbench`, for hosts that need it before the layout renders.
+	 * Without one, the layout makes its own from the props below.
+	 */
+	workbench?: WorkbenchContext
+	panels?: WorkbenchPanel[]
+	/**
+	 * Identifies the layout in local storage. `null` keeps it in memory only, e.g. for an embedded
+	 * or one-off view that shouldn't change the user's own arrangement.
+	 */
+	storageKey?: string | null
+	mode?: WorkbenchModeName | WorkbenchMode
+	variant?: WorkbenchVariant
+	sizes?: Partial<WorkbenchRegionSizes>
+	/** Regions hidden when opened, regardless of how they were left. */
+	hiddenRegions?: Region[]
+	/** Panels hosted for someone else (e.g. file tabs), which can live in any dock. */
+	documents?: WorkbenchDocuments
+}>()
+
+const slots = defineSlots<{
+	toolbar?: () => VNode[]
+	/** Controls at the end of the toolbar, before the layout's own (e.g. settings). */
+	'toolbar-end'?: () => VNode[]
+	/** Content of a tab, in place of its icon and title. */
+	tab?: (props: { panel: WorkbenchPanel; active: boolean; selected: boolean }) => VNode[]
+	[panel: `panel-${string}`]: (() => VNode[]) | undefined
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	menuLabel: {
+		id: 'workbench.menu.label',
+		defaultMessage: 'Panel actions',
+	},
+})
+
+const components = { [WORKBENCH_DOCK_COMPONENT]: Dock }
+
+const workbench =
+	props.workbench ??
+	createWorkbench({
+		panels: () => props.panels ?? [],
+		storageKey: props.storageKey ?? null,
+		mode: props.mode,
+		variant: props.variant,
+		sizes: props.sizes,
+		hiddenRegions: props.hiddenRegions,
+		documents: props.documents,
+	})
+
+workbench.slots = slots
+
+const root = ref<HTMLElement | null>(null)
+const contextMenu = ref<InstanceType<typeof ContextMenu>>()
+
+workbench.setMenuOpener((event, options) => contextMenu.value?.open(event, options))
+
+let grid: GridviewApi | undefined
+const gridElement = shallowRef<HTMLElement | null>(null)
+
+function onGridReady(event: GridviewReadyEvent) {
+	grid = event.api
+	workbench.onGridReady(event)
+}
+
+onMounted(() => {
+	workbench.root.value = root.value
+	gridElement.value = root.value?.querySelector<HTMLElement>(':scope > .workbench-grid') ?? null
+})
+
+useDetachedLayout(gridElement, (width, height) => grid?.layout(width, height))
+
+provideWorkbench(workbench)
+
+defineExpose({
+	workbench,
+	visible: workbench.visible,
+	setRegionVisible: workbench.setRegionVisible,
+	toggleRegion: workbench.toggleRegion,
+	regionOf: workbench.regionOf,
+	isOpen: workbench.isOpen,
+	revealPanel: workbench.revealPanel,
+	closePanel: workbench.closePanel,
+	movePanel: workbench.movePanel,
+	resetLayout: workbench.resetLayout,
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/workbench/providers/index.ts b/packages/ui/src/layouts/shared/workbench/providers/index.ts
new file mode 100644
index 0000000000..510efe5bcb
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/providers/index.ts
@@ -0,0 +1 @@
+export * from './workbench'
diff --git a/packages/ui/src/layouts/shared/workbench/providers/workbench.ts b/packages/ui/src/layouts/shared/workbench/providers/workbench.ts
new file mode 100644
index 0000000000..b2a05cfdb2
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/providers/workbench.ts
@@ -0,0 +1,183 @@
+import type { AddPanelPositionOptions, DockviewReadyEvent, GridviewReadyEvent } from 'dockview-vue'
+import type { Component, ComputedRef, Ref, ShallowRef, Slots } from 'vue'
+
+import type { ButtonMenuOption } from '#ui/components/base/buttons/types'
+import { createContext } from '#ui/providers/create-context'
+
+import type {
+	WorkbenchDocuments,
+	WorkbenchHost,
+	WorkbenchLink,
+	WorkbenchLinkOrientation,
+	WorkbenchMode,
+	WorkbenchPanel,
+	WorkbenchPopoutRestore,
+	WorkbenchRegion,
+	WorkbenchSplitSide,
+	WorkbenchToggleAction,
+	WorkbenchToggleLocation,
+	WorkbenchVariant,
+} from '../types'
+
+/** A tab of a dock: one of the workbench's panels, or a document. */
+export interface WorkbenchDockTab {
+	id: string
+	title: string
+	icon?: Component
+	/** Whether it's the front tab of its group. */
+	active: boolean
+}
+
+/** The workbench's layout state and the operations on it. */
+export interface WorkbenchContext {
+	/**
+	 * The layout's slots: `panel-{id}` for each panel, `tab` for custom tab content and the
+	 * toolbar's. Set by `WorkbenchLayout` when it renders.
+	 */
+	slots: Slots
+	/** The workbench's root element, set by `WorkbenchLayout`. */
+	root: ShallowRef<HTMLElement | null>
+	mode: WorkbenchMode
+	variant: Ref<WorkbenchVariant>
+	setVariant: (variant: WorkbenchVariant) => void
+	/** Whether the mode lets panels be popped out at all. */
+	canUsePopouts: boolean
+	/** Whether the user lets panels be popped out, where the mode allows it. */
+	popoutsEnabled: Ref<boolean>
+	setPopoutsEnabled: (enabled: boolean) => void
+	/** Whether groups holding a single tab hide their tab bar, behind a handle pulling it down. */
+	hideLoneTabBars: Ref<boolean>
+	setHideLoneTabBars: (hide: boolean) => void
+	/** Hides the tab bar of a panel's group, behind a handle pulling it down again. */
+	hideTabBar: (id: string) => void
+	canHideTabBar: (host: WorkbenchHost) => boolean
+	/** Turns the order of a dock's groups around. */
+	reverseGroups: (host: WorkbenchHost) => void
+	canReverseGroups: (host: WorkbenchHost) => boolean
+	/** What becomes of popped out panels when the page is opened again. */
+	popoutRestore: Ref<WorkbenchPopoutRestore>
+	setPopoutRestore: (restore: WorkbenchPopoutRestore) => void
+	/** Where the user keeps the region toggles: in the layout menu only, or also in the tab bar. */
+	toggleLocation: Ref<WorkbenchToggleLocation>
+	setToggleLocation: (location: WorkbenchToggleLocation) => void
+	/** Whether the region toggles hide their regions or collapse them to their tabs. */
+	toggleAction: Ref<WorkbenchToggleAction>
+	setToggleAction: (action: WorkbenchToggleAction) => void
+	/** Whether the left and right region toggles show in the corners of the center's tab bars. */
+	cornerToggles: ComputedRef<boolean>
+	documents?: WorkbenchDocuments
+	panels: ComputedRef<WorkbenchPanel[]>
+	/** Panels the user closed, which can be opened again. */
+	closedPanels: ComputedRef<WorkbenchPanel[]>
+	/** The regions laid out, each kept even once emptied so panels can be dragged back into it. */
+	usedRegions: ComputedRef<WorkbenchRegion[]>
+	visible: Record<WorkbenchRegion, Ref<boolean>>
+	/** How wide (or tall, for the bottom) each region is shown, 0 while hidden. */
+	regionExtents: Record<WorkbenchRegion, Ref<number>>
+	/** The center's top-left and top-right groups, whose tab bars hold the corner region toggles. */
+	cornerGroups: Ref<{ left?: string; right?: string }>
+	/** Tabs selected together, which are dragged as one. */
+	selectedPanels: Ref<readonly string[]>
+	/** Panels popped out into windows of their own. */
+	detachedPanels: ComputedRef<string[]>
+	hasPopouts: ComputedRef<boolean>
+	/** Panels whose windows are being opened. */
+	poppingOut: ComputedRef<string[]>
+	popoutPanel: (id: string) => Promise<void> | undefined
+	/** Returns a popped out panel to the main window. */
+	dockPanel: (id: string) => void
+	/** Returns every popped out panel to the main window. */
+	closePopouts: () => void
+	canPopout: (id: string) => boolean
+	isDetached: (id: string) => boolean
+	/** The dock a panel is in, which it may have been moved to. */
+	regionOf: (panel: WorkbenchPanel) => WorkbenchHost
+	isOpen: (id: string) => boolean
+	/** Whether the panel is in view: open, in a shown region, and the front tab of its group. */
+	isShown: (id: string) => boolean
+	setRegionVisible: (region: WorkbenchRegion, visible: boolean) => void
+	/** Brings a hidden or collapsed region back, or else hides or collapses it, as the settings choose. */
+	toggleRegion: (region: WorkbenchRegion) => void
+	/** Regions collapsed to a strip of their tabs. */
+	collapsed: Record<WorkbenchRegion, Ref<boolean>>
+	setRegionCollapsed: (region: WorkbenchRegion, collapsed: boolean) => void
+	/** Each region's top-right group, whose tab bar holds the button collapsing the region. */
+	regionCornerGroups: Ref<Partial<Record<WorkbenchRegion, string>>>
+	/** The tabs a dock holds, in order, e.g. for its strip while collapsed. */
+	dockTabs: (host: WorkbenchHost) => WorkbenchDockTab[]
+	/** Brings a dock's tab to the front, showing (and expanding) its dock. */
+	activateTab: (host: WorkbenchHost, id: string) => void
+	/** Moves (or reopens) a panel into a dock, and shows it. */
+	movePanel: (id: string, host: WorkbenchHost, position?: AddPanelPositionOptions) => void
+	/** Moves a document into another dock, once its owner confirms it may be remounted. */
+	moveDocument: (id: string, host: WorkbenchHost) => void
+	/** The dock holding a document, if any does. */
+	hostOfDocument: (id: string) => WorkbenchHost | undefined
+	/** Splits a panel off into its own group beside the rest of its group. */
+	/** Splits panels of a group off into a group of their own beside it. */
+	splitPanels: (ids: string[], side: WorkbenchSplitSide) => void
+	/** Whether the panel shares its group, so it can be split off. */
+	canSplit: (ids: string[]) => boolean
+	/** Pops several panels out together, into one window. */
+	popoutPanels: (ids: string[]) => Promise<void> | undefined
+	/** Closes a panel; a linked one is taken out of its linked tab first. */
+	closePanel: (id: string) => void
+	/** Panels linked into single tabs, each split between its panels. */
+	links: ComputedRef<WorkbenchLink[]>
+	/** Links a panel (or linked tab) with another, as one tab split between them. */
+	linkPanels: (id: string, otherId: string) => void
+	/** Takes a panel out of its linked tab, beside it. */
+	unlinkPanel: (id: string) => void
+	/** Undoes a link, its panels each becoming a tab of their own. */
+	unlinkAll: (linkId: string) => void
+	setLinkOrientation: (linkId: string, orientation: WorkbenchLinkOrientation) => void
+	/** Turns the order of a linked tab's panels around. */
+	reverseLink: (linkId: string) => void
+	/** Keeps the shares of a linked tab its panels were resized to. */
+	setLinkSizes: (linkId: string, sizes: number[]) => void
+	/** Opens the panel if closed, shows its dock or window and brings it to the front of its group. */
+	revealPanel: (id: string) => void
+	/** Brings the first panel of every group to the front. */
+	resetActiveTabs: () => void
+	/** Restores the default sizes, visibility, placement and arrangement of every panel. */
+	resetLayout: () => void
+	onGridReady: (event: GridviewReadyEvent) => void
+	onDockReady: (host: WorkbenchHost, event: DockviewReadyEvent) => void
+	onDockDispose: (host: WorkbenchHost) => void
+	onSashDoubleClick: (event: MouseEvent) => void
+	/** Sets how the workbench's menus are shown, i.e. `WorkbenchLayout`'s context menu. */
+	setMenuOpener: (open: (event: MouseEvent, options: ButtonMenuOption[]) => void) => void
+	/** The menu of a panel's tab: moving, splitting, popping out and closing it. */
+	openPanelMenu: (event: MouseEvent, id: string) => void
+	/** The menu of a dock's tab bar: opening closed panels there, or hiding the region. */
+	openRegionMenu: (event: MouseEvent, host: WorkbenchHost, panelId?: string) => void
+	/** Options listing every panel, to open or close each. */
+	panelsMenuOptions: ComputedRef<ButtonMenuOption[]>
+	/** A "Move to" entry for a document's own tab menu, or `null` when it can't be moved. */
+	documentMoveOption: (id: string) => ButtonMenuOption | null
+}
+
+export const [injectWorkbench, provideWorkbench] = createContext<WorkbenchContext>(
+	'WorkbenchLayout',
+	'workbench',
+)
+
+/** The dock a component is rendered in (its tabs, panels, header actions and watermark). */
+export const [injectWorkbenchDock, provideWorkbenchDock] = createContext<WorkbenchHost>(
+	'WorkbenchDock',
+	'workbenchDock',
+)
+
+/** The workbench panel a component is rendered in. */
+export interface WorkbenchPanelContext {
+	id: string
+	/** Whether the panel is shown, i.e. the active tab of its group, in a shown region. */
+	visible: Readonly<Ref<boolean>>
+	/** The window showing the panel: the main one, or the popout it was moved into. */
+	window: Readonly<ShallowRef<Window>>
+}
+
+export const [injectWorkbenchPanel, provideWorkbenchPanel] = createContext<WorkbenchPanelContext>(
+	'WorkbenchPanel',
+	'workbenchPanel',
+)
diff --git a/packages/ui/src/layouts/shared/workbench/settings.ts b/packages/ui/src/layouts/shared/workbench/settings.ts
new file mode 100644
index 0000000000..6a25839850
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/settings.ts
@@ -0,0 +1,186 @@
+import {
+	defineSetting,
+	type SettingDefinitionBase,
+	type SettingGroup,
+	type SettingsStore,
+} from '#ui/components/settings'
+import { defineMessages } from '#ui/composables/i18n'
+
+import type { WorkbenchContext } from './providers/workbench'
+import type { WorkbenchPopoutRestore, WorkbenchToggleAction, WorkbenchVariant } from './types'
+
+const messages = defineMessages({
+	group: { id: 'workbench.settings.group', defaultMessage: 'Layout' },
+	groupDescription: {
+		id: 'workbench.settings.group-description',
+		defaultMessage: 'How the panels around the workspace look and behave.',
+	},
+	variant: { id: 'workbench.settings.variant', defaultMessage: 'Panel style' },
+	variantDescription: {
+		id: 'workbench.settings.variant-description',
+		defaultMessage: 'Square panels sit edge to edge, while rounded panels float apart as cards.',
+	},
+	square: { id: 'workbench.settings.variant.square', defaultMessage: 'Square' },
+	rounded: { id: 'workbench.settings.variant.rounded', defaultMessage: 'Rounded' },
+	toggles: { id: 'workbench.settings.toggles', defaultMessage: 'Panel toggles in the tab bar' },
+	togglesDescription: {
+		id: 'workbench.settings.toggles-description',
+		defaultMessage:
+			'Show buttons for the left and right panels at the ends of the tab bar, and for the bottom panel in its own. They can always be shown and hidden from the layout menu.',
+	},
+	loneTabs: { id: 'workbench.settings.lone-tabs', defaultMessage: 'Hide lone tab bars' },
+	loneTabsDescription: {
+		id: 'workbench.settings.lone-tabs-description',
+		defaultMessage:
+			'Hide the tab bar of panels on their own outside the center, giving them its room. A handle at their top right shows it again. Any tab bar can also be hidden from its menu.',
+	},
+	toggleAction: { id: 'workbench.settings.toggle-action', defaultMessage: 'Panel toggles' },
+	toggleActionDescription: {
+		id: 'workbench.settings.toggle-action-description',
+		defaultMessage:
+			'Whether the buttons for the left, right and bottom panels hide them entirely, or collapse them to a strip of their tabs.',
+	},
+	toggleActionHide: { id: 'workbench.settings.toggle-action.hide', defaultMessage: 'Hide' },
+	toggleActionCollapse: {
+		id: 'workbench.settings.toggle-action.collapse',
+		defaultMessage: 'Collapse',
+	},
+	popouts: { id: 'workbench.settings.popouts', defaultMessage: 'Pop out panels' },
+	popoutRestore: {
+		id: 'workbench.settings.popout-restore',
+		defaultMessage: 'Popped out panels on reopening',
+	},
+	popoutRestoreDescription: {
+		id: 'workbench.settings.popout-restore-description',
+		defaultMessage:
+			'When the page is opened again: return popped out panels to the main window, return them while offering to reopen their windows, or reopen their windows (on your next click, if the browser asks for one).',
+	},
+	popoutRestoreClose: {
+		id: 'workbench.settings.popout-restore.close',
+		defaultMessage: 'Close and merge',
+	},
+	popoutRestorePrompt: {
+		id: 'workbench.settings.popout-restore.prompt',
+		defaultMessage: 'Merge and ask',
+	},
+	popoutRestorePreserve: {
+		id: 'workbench.settings.popout-restore.preserve',
+		defaultMessage: 'Preserve',
+	},
+	popoutsDescription: {
+		id: 'workbench.settings.popouts-description',
+		defaultMessage: 'Let panels be moved into windows of their own from their menus.',
+	},
+})
+
+/** A workbench's own settings, kept with its layout rather than in a settings store. */
+export const workbenchSettings = {
+	variant: defineSetting.enum<WorkbenchVariant>({
+		id: 'workbench-variant',
+		title: messages.variant,
+		description: messages.variantDescription,
+		default: 'square',
+		display: 'chips',
+		entries: [
+			{ value: 'square', label: messages.square },
+			{ value: 'rounded', label: messages.rounded },
+		],
+	}),
+	toggles: defineSetting.toggle({
+		id: 'workbench-corner-toggles',
+		title: messages.toggles,
+		description: messages.togglesDescription,
+		default: false,
+	}),
+	toggleAction: defineSetting.enum<WorkbenchToggleAction>({
+		id: 'workbench-toggle-action',
+		title: messages.toggleAction,
+		description: messages.toggleActionDescription,
+		default: 'hide',
+		display: 'chips',
+		entries: [
+			{ value: 'hide', label: messages.toggleActionHide },
+			{ value: 'collapse', label: messages.toggleActionCollapse },
+		],
+	}),
+	loneTabs: defineSetting.toggle({
+		id: 'workbench-lone-tabs',
+		title: messages.loneTabs,
+		description: messages.loneTabsDescription,
+		default: false,
+	}),
+	popouts: defineSetting.toggle({
+		id: 'workbench-popouts',
+		title: messages.popouts,
+		description: messages.popoutsDescription,
+		default: true,
+	}),
+	popoutRestore: defineSetting.enum<WorkbenchPopoutRestore>({
+		id: 'workbench-popout-restore',
+		title: messages.popoutRestore,
+		description: messages.popoutRestoreDescription,
+		default: 'prompt',
+		display: 'chips',
+		entries: [
+			{ value: 'close', label: messages.popoutRestoreClose },
+			{ value: 'prompt', label: messages.popoutRestorePrompt },
+			{ value: 'preserve', label: messages.popoutRestorePreserve },
+		],
+	}),
+}
+
+/** The workbench's settings, as offered in a host's settings (e.g. its settings modal). */
+export function workbenchSettingGroup(workbench: WorkbenchContext): SettingGroup {
+	return {
+		id: 'workbench',
+		title: messages.group,
+		description: messages.groupDescription,
+		settings: [
+			workbenchSettings.variant,
+			workbenchSettings.loneTabs,
+			...(workbench.mode.toolbar ? [workbenchSettings.toggles] : []),
+			workbenchSettings.toggleAction,
+			...(workbench.canUsePopouts
+				? [workbenchSettings.popouts, workbenchSettings.popoutRestore]
+				: []),
+		],
+	}
+}
+
+/** Reads and writes the workbench's settings on the workbench itself, which saves them with its layout. */
+export function workbenchSettingsStore(workbench: WorkbenchContext): SettingsStore {
+	return {
+		get<T>(definition: SettingDefinitionBase<T>): T {
+			if (definition.id === workbenchSettings.variant.id) return workbench.variant.value as T
+			if (definition.id === workbenchSettings.popouts.id) return workbench.popoutsEnabled.value as T
+			if (definition.id === workbenchSettings.loneTabs.id) {
+				return workbench.hideLoneTabBars.value as T
+			}
+			if (definition.id === workbenchSettings.toggleAction.id) {
+				return workbench.toggleAction.value as T
+			}
+			if (definition.id === workbenchSettings.popoutRestore.id) {
+				return workbench.popoutRestore.value as T
+			}
+			if (definition.id === workbenchSettings.toggles.id) {
+				return (workbench.toggleLocation.value === 'tabs') as T
+			}
+			return definition.default
+		},
+		set<T>(definition: SettingDefinitionBase<T>, value: T) {
+			if (definition.id === workbenchSettings.variant.id) {
+				workbench.setVariant(value as WorkbenchVariant)
+			} else if (definition.id === workbenchSettings.popouts.id) {
+				workbench.setPopoutsEnabled(value as boolean)
+			} else if (definition.id === workbenchSettings.loneTabs.id) {
+				workbench.setHideLoneTabBars(value as boolean)
+			} else if (definition.id === workbenchSettings.toggleAction.id) {
+				workbench.setToggleAction(value as WorkbenchToggleAction)
+			} else if (definition.id === workbenchSettings.popoutRestore.id) {
+				workbench.setPopoutRestore(value as WorkbenchPopoutRestore)
+			} else if (definition.id === workbenchSettings.toggles.id) {
+				workbench.setToggleLocation(value ? 'tabs' : 'menu')
+			}
+		},
+	}
+}
diff --git a/packages/ui/src/layouts/shared/workbench/types.ts b/packages/ui/src/layouts/shared/workbench/types.ts
new file mode 100644
index 0000000000..b1b6546172
--- /dev/null
+++ b/packages/ui/src/layouts/shared/workbench/types.ts
@@ -0,0 +1,188 @@
+import type { DockviewApi, DockviewGroupPanel } from 'dockview-vue'
+import type { Component } from 'vue'
+
+/** The regions around the workbench's center, each holding its panels as dockable tabs. */
+export const WORKBENCH_REGIONS = ['left', 'right', 'bottom'] as const
+
+export type WorkbenchRegion = (typeof WORKBENCH_REGIONS)[number]
+
+/** Every dock of the workbench: its center and the regions around it. */
+export const WORKBENCH_HOSTS = ['center', ...WORKBENCH_REGIONS] as const
+
+export type WorkbenchHost = (typeof WORKBENCH_HOSTS)[number]
+
+/**
+ * How the workbench looks: `square` for flat, editor-like tab strips, `rounded` for pill shaped
+ * tabs in rounded bars, as the moderation view has.
+ */
+export const WORKBENCH_VARIANTS = ['square', 'rounded'] as const
+
+export type WorkbenchVariant = (typeof WORKBENCH_VARIANTS)[number]
+
+/**
+ * What becomes of popped out panels when the page is opened again: `close` returns them to the
+ * main window, `prompt` returns them while offering to reopen their windows, and `preserve`
+ * reopens their windows (on the next click, when the browser won't open them unprompted).
+ */
+export type WorkbenchPopoutRestore = 'close' | 'prompt' | 'preserve'
+
+/** What the region toggles do: hide their regions, or collapse them to a strip of their tabs. */
+export type WorkbenchToggleAction = 'hide' | 'collapse'
+
+/** Where the region toggles sit: in the layout menu, or also in the corners of the center's tab bars. */
+export type WorkbenchToggleLocation = 'menu' | 'tabs'
+
+/** A panel of the workbench, whose content is the host's `panel-{id}` slot. */
+export interface WorkbenchPanel {
+	id: string
+	title: string
+	region: WorkbenchHost
+	icon?: Component
+	/** Pads the panel's content. */
+	padded?: boolean
+	/** Whether the panel scrolls its content (the default), rather than leaving that to it. */
+	scroll?: boolean
+	minimumHeight?: number
+	/**
+	 * Starts closed until opened (e.g. from the panels menu or by the host), for panels only
+	 * wanted now and then. Needs a mode whose panels can be closed.
+	 */
+	closedByDefault?: boolean
+	/**
+	 * Panels of a dock sharing a group start out as tabs of one group, and each group of the dock
+	 * in its own split, below the ones before it. Without one, a panel joins the dock's active group.
+	 * Only decides where panels start, before the user arranges them.
+	 */
+	group?: string
+	/**
+	 * Set on a linked tab, made by the workbench when the user links panels: the panels it shows
+	 * split within it, as if they were one.
+	 */
+	members?: WorkbenchPanel[]
+}
+
+/** Where panels split off from their group go, beside it. */
+export type WorkbenchSplitSide = 'left' | 'right' | 'top' | 'bottom'
+
+/** How a linked tab splits its panels: one above the other, or side by side. */
+export type WorkbenchLinkOrientation = 'vertical' | 'horizontal'
+
+/** Panels the user linked into a single tab, splitting it between them. */
+export interface WorkbenchLink {
+	id: string
+	members: string[]
+	orientation: WorkbenchLinkOrientation
+	/** Each member's share of the tab, in order; even shares without them. */
+	sizes?: number[]
+}
+
+export interface WorkbenchPopoutOptions {
+	/** An empty page of the same origin that popout windows load. */
+	url: string
+	/** Docks whose panels can be popped out into their own windows. Defaults to the center. */
+	docks?: WorkbenchHost[]
+	/** Called for each popout window once it opens; the function returned runs once it closes. */
+	onWindow?: (window: Window) => () => void
+}
+
+/**
+ * How much of the layout users can change. Archive browsing hands them every panel to arrange
+ * freely, while a review keeps its side panels fixed and only rearranges the center's tabs.
+ */
+export interface WorkbenchMode {
+	/** Regions laid out around the center. */
+	regions: WorkbenchRegion[]
+	/** Panels can be moved between docks, by dragging or from their menu. */
+	movePanels: boolean
+	/** Panels can be closed, and reopened from the menus. */
+	closePanels: boolean
+	/** Docks can be split into several groups. */
+	splitPanels: boolean
+	/** The toolbar row, with the region toggles, panels menu and layout reset. */
+	toolbar: boolean
+	/** Region toggles in the outer corners of the center's tab bars, for workbenches without a toolbar. */
+	cornerToggles: boolean
+	/** Docks shown without tab bars, each holding a single panel. */
+	headerless: WorkbenchHost[]
+	/** Tabs can be selected together (shift or ctrl click) and dragged as one. */
+	tabSelection: boolean
+	popouts?: WorkbenchPopoutOptions
+}
+
+export const WORKBENCH_MODES = {
+	explorer: {
+		regions: [...WORKBENCH_REGIONS],
+		movePanels: true,
+		closePanels: true,
+		splitPanels: true,
+		toolbar: true,
+		cornerToggles: false,
+		headerless: [],
+		tabSelection: true,
+	},
+	review: {
+		regions: ['left', 'right'],
+		movePanels: false,
+		closePanels: false,
+		splitPanels: true,
+		toolbar: false,
+		cornerToggles: true,
+		headerless: ['left', 'right'],
+		tabSelection: true,
+	},
+} satisfies Record<string, WorkbenchMode>
+
+export type WorkbenchModeName = keyof typeof WORKBENCH_MODES
+
+/**
+ * Panels the workbench hosts on behalf of someone else, e.g. the files layout's tabs. They're
+ * created and closed by their owner, which also renders their tabs, but they can live in (and be
+ * dragged between) any of the workbench's docks, and are kept with its saved layout.
+ */
+export interface WorkbenchDocuments {
+	/** Content components of the documents' panels, by name. */
+	components: Record<string, Component>
+	/** Tab components of the documents' panels, by name. */
+	tabComponents: Record<string, Component>
+	/** Shown at the end of a group's tab bar, e.g. a list of every open document. */
+	headerActions?: Component
+	/** Whether tab bars offer their add menu, e.g. per the owner's "new tab button" setting. */
+	addMenuShown?: () => boolean
+	/** Opening a new document in a group, offered first by each tab bar's add menu. */
+	create?: {
+		label: () => string
+		icon?: Component
+		open: (group: DockviewGroupPanel) => void
+		/** Whether it's offered at the moment, e.g. per the user's settings. */
+		shown?: () => boolean
+	}
+	/** Shown in the center while it holds no panel at all. */
+	watermark?: Component
+	/**
+	 * Asked before a document moves to another dock, which remounts it. Resolves `true` once it
+	 * is safe to move, e.g. after any unsaved changes were saved or discarded.
+	 */
+	confirmMove?: (id: string) => Promise<boolean>
+	/** A dock came up (after its saved layout was restored), the center being the primary one. */
+	attach: (api: DockviewApi, host: WorkbenchHost) => void
+	detach: (api: DockviewApi) => void
+	/** The workbench's layout was replaced, dropping documents; their panels should be re-added. */
+	restore: () => void
+}
+
+export interface WorkbenchRegionSize {
+	/** Width (or height, for the bottom region) the region opens with. */
+	default: number
+	minimum: number
+}
+
+export type WorkbenchRegionSizes = Record<WorkbenchRegion, WorkbenchRegionSize>
+
+export const DEFAULT_WORKBENCH_REGION_SIZES: WorkbenchRegionSizes = {
+	left: { default: 320, minimum: 200 },
+	right: { default: 360, minimum: 220 },
+	bottom: { default: 220, minimum: 100 },
+}
+
+/** Minimum size of the center, in both directions, unless a workbench sets its own. */
+export const WORKBENCH_CENTER_MINIMUM = 240
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 26d1a4acc3..8e44cd8db3 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -44,6 +44,321 @@
   "app.server-settings.failed-to-load-server": {
     "defaultMessage": "Failed to load server settings"
   },
+  "archive-viewer.action.copied-sha512": {
+    "defaultMessage": "Copied SHA-512"
+  },
+  "archive-viewer.action.copy-sha512": {
+    "defaultMessage": "Copy SHA-512"
+  },
+  "archive-viewer.action.download-archive": {
+    "defaultMessage": "Download archive"
+  },
+  "archive-viewer.decompile-failed": {
+    "defaultMessage": "{decompiler} could not decompile {path}"
+  },
+  "archive-viewer.detail.compressed-size": {
+    "defaultMessage": "Compressed size"
+  },
+  "archive-viewer.detail.detected-type": {
+    "defaultMessage": "Detected type"
+  },
+  "archive-viewer.detail.sha1": {
+    "defaultMessage": "SHA-1"
+  },
+  "archive-viewer.details.class-files-count": {
+    "defaultMessage": "{count, plural, one {# class file} other {# class files}}"
+  },
+  "archive-viewer.details.comment": {
+    "defaultMessage": "Comment"
+  },
+  "archive-viewer.details.compressed-ratio": {
+    "defaultMessage": "Compressed to {ratio, number, percent} of its size"
+  },
+  "archive-viewer.details.compressed-ratio-with-contents": {
+    "defaultMessage": "Compressed to {ratio, number, percent} of its size, holding {contents} of uncompressed contents"
+  },
+  "archive-viewer.details.compression": {
+    "defaultMessage": "Compression"
+  },
+  "archive-viewer.details.compression-deflate": {
+    "defaultMessage": "Deflate"
+  },
+  "archive-viewer.details.compression-other": {
+    "defaultMessage": "Method {method}"
+  },
+  "archive-viewer.details.compression-stored": {
+    "defaultMessage": "Stored"
+  },
+  "archive-viewer.details.contents-counts": {
+    "defaultMessage": "Contents"
+  },
+  "archive-viewer.details.copy-path": {
+    "defaultMessage": "Copy path"
+  },
+  "archive-viewer.details.copy-value": {
+    "defaultMessage": "Copy {label}"
+  },
+  "archive-viewer.details.detected-language": {
+    "defaultMessage": "Language"
+  },
+  "archive-viewer.details.detected-type": {
+    "defaultMessage": "Detected type"
+  },
+  "archive-viewer.details.encrypted": {
+    "defaultMessage": "Encrypted"
+  },
+  "archive-viewer.details.entries": {
+    "defaultMessage": "Entries"
+  },
+  "archive-viewer.details.file": {
+    "defaultMessage": "File"
+  },
+  "archive-viewer.details.files-count": {
+    "defaultMessage": "{count, plural, one {# file} other {# files}}"
+  },
+  "archive-viewer.details.folder": {
+    "defaultMessage": "Folder"
+  },
+  "archive-viewer.details.folders-count": {
+    "defaultMessage": "{count, plural, one {# folder} other {# folders}}"
+  },
+  "archive-viewer.details.hide-details": {
+    "defaultMessage": "Hide details"
+  },
+  "archive-viewer.details.hide-parents": {
+    "defaultMessage": "Only show the closest parent archive"
+  },
+  "archive-viewer.details.listed-hash": {
+    "defaultMessage": "Listed hash"
+  },
+  "archive-viewer.details.listed-hash-match": {
+    "defaultMessage": "Matches"
+  },
+  "archive-viewer.details.listed-hash-mismatch": {
+    "defaultMessage": "Doesn't match"
+  },
+  "archive-viewer.details.listed-hash-pending": {
+    "defaultMessage": "Checked once fully downloaded"
+  },
+  "archive-viewer.details.listed-hash-value": {
+    "defaultMessage": "Listed SHA-512: {hash}"
+  },
+  "archive-viewer.details.modified": {
+    "defaultMessage": "Modified"
+  },
+  "archive-viewer.details.nested-archive": {
+    "defaultMessage": "Nested archive · depth {depth}"
+  },
+  "archive-viewer.details.nested-archives-count": {
+    "defaultMessage": "{count, plural, one {# nested archive} other {# nested archives}}"
+  },
+  "archive-viewer.details.on-modrinth": {
+    "defaultMessage": "On Modrinth"
+  },
+  "archive-viewer.details.on-modrinth-match": {
+    "defaultMessage": "{project} {version}"
+  },
+  "archive-viewer.details.on-modrinth-none": {
+    "defaultMessage": "Not found"
+  },
+  "archive-viewer.details.path-copied": {
+    "defaultMessage": "Path copied"
+  },
+  "archive-viewer.details.root-archive": {
+    "defaultMessage": "Archive"
+  },
+  "archive-viewer.details.show-details": {
+    "defaultMessage": "Show details"
+  },
+  "archive-viewer.details.show-parents": {
+    "defaultMessage": "{count, plural, one {Show # more parent archive} other {Show # more parent archives}}"
+  },
+  "archive-viewer.details.size": {
+    "defaultMessage": "Size"
+  },
+  "archive-viewer.details.size-ratio": {
+    "defaultMessage": "{compressed} / {size}"
+  },
+  "archive-viewer.details.source": {
+    "defaultMessage": "Source"
+  },
+  "archive-viewer.details.source-name": {
+    "defaultMessage": "{host, select, modrinth {Modrinth} curseforge {CurseForge} other {External}}"
+  },
+  "archive-viewer.details.status-pending": {
+    "defaultMessage": "Not read yet"
+  },
+  "archive-viewer.details.status-read": {
+    "defaultMessage": "Fully read"
+  },
+  "archive-viewer.details.status-reading": {
+    "defaultMessage": "Reading nested archives..."
+  },
+  "archive-viewer.details.value-copied": {
+    "defaultMessage": "{label} copied"
+  },
+  "archive-viewer.details.yes": {
+    "defaultMessage": "Yes"
+  },
+  "archive-viewer.disassembler": {
+    "defaultMessage": "Disassembler"
+  },
+  "archive-viewer.error-title": {
+    "defaultMessage": "Unable to open {name}"
+  },
+  "archive-viewer.fetched-progress": {
+    "defaultMessage": "{loaded} of {total} fetched"
+  },
+  "archive-viewer.fetching-rest": {
+    "defaultMessage": "Fetching the rest of the archive..."
+  },
+  "archive-viewer.hash.copy": {
+    "defaultMessage": "Copy {hash}"
+  },
+  "archive-viewer.logs.count": {
+    "defaultMessage": "{shown} of {total}"
+  },
+  "archive-viewer.logs.empty": {
+    "defaultMessage": "Nothing has been logged yet."
+  },
+  "archive-viewer.logs.level-debug": {
+    "defaultMessage": "Debug"
+  },
+  "archive-viewer.logs.level-error": {
+    "defaultMessage": "Errors"
+  },
+  "archive-viewer.logs.level-info": {
+    "defaultMessage": "Info"
+  },
+  "archive-viewer.logs.level-warning": {
+    "defaultMessage": "Warnings"
+  },
+  "archive-viewer.missing-entry": {
+    "defaultMessage": "\"{path}\" does not exist within this archive"
+  },
+  "archive-viewer.panel.details": {
+    "defaultMessage": "Details"
+  },
+  "archive-viewer.panel.logs": {
+    "defaultMessage": "Logs"
+  },
+  "archive-viewer.panel.tree": {
+    "defaultMessage": "Files"
+  },
+  "archive-viewer.read-only": {
+    "defaultMessage": "Archives are read-only"
+  },
+  "archive-viewer.reading": {
+    "defaultMessage": "Reading {name}"
+  },
+  "archive-viewer.reading-description": {
+    "defaultMessage": "Fetching the archive's index. Files are fetched as they are opened."
+  },
+  "archive-viewer.reading-index": {
+    "defaultMessage": "Reading the archive..."
+  },
+  "archive-viewer.reading-nested": {
+    "defaultMessage": "Reading nested archives..."
+  },
+  "archive-viewer.settings.content-counts": {
+    "defaultMessage": "Contents counts"
+  },
+  "archive-viewer.settings.content-counts-description": {
+    "defaultMessage": "How many files, folders, class files and nested archives an archive holds."
+  },
+  "archive-viewer.settings.decompiler": {
+    "defaultMessage": "Default decompiler"
+  },
+  "archive-viewer.settings.decompiler-description": {
+    "defaultMessage": "The decompiler class files open with. Each tab can switch to another from its navigation."
+  },
+  "archive-viewer.settings.detected-language": {
+    "defaultMessage": "Detected language"
+  },
+  "archive-viewer.settings.detected-language-description": {
+    "defaultMessage": "The language a text file is highlighted as."
+  },
+  "archive-viewer.settings.detected-type": {
+    "defaultMessage": "Detected type"
+  },
+  "archive-viewer.settings.detected-type-description": {
+    "defaultMessage": "A file's type, as detected from its contents."
+  },
+  "archive-viewer.settings.files": {
+    "defaultMessage": "Class files"
+  },
+  "archive-viewer.settings.files-description": {
+    "defaultMessage": "How compiled Java classes are turned back into source."
+  },
+  "archive-viewer.settings.hashes": {
+    "defaultMessage": "Hashes"
+  },
+  "archive-viewer.settings.hashes-description": {
+    "defaultMessage": "Hashes are only computed once shown. The SHA family is computed by the browser, Murmur2 is the fingerprint CurseForge identifies files by, and CRC-32 is the checksum archives store for their files."
+  },
+  "archive-viewer.settings.information": {
+    "defaultMessage": "Information"
+  },
+  "archive-viewer.settings.information-description": {
+    "defaultMessage": "When each kind of detail shows: always, only with details pulled out, or never."
+  },
+  "archive-viewer.settings.modrinth-lookup": {
+    "defaultMessage": "On Modrinth"
+  },
+  "archive-viewer.settings.modrinth-lookup-description": {
+    "defaultMessage": "Whether nested archives (and archives opened from other links) are already published on Modrinth, found by their hash."
+  },
+  "archive-viewer.settings.page.details": {
+    "defaultMessage": "Details"
+  },
+  "archive-viewer.settings.page.layout": {
+    "defaultMessage": "Layout and files"
+  },
+  "archive-viewer.settings.section.entry": {
+    "defaultMessage": "Open file or folder"
+  },
+  "archive-viewer.settings.section.entry-description": {
+    "defaultMessage": "The file or folder open in the active tab."
+  },
+  "archive-viewer.settings.section.nested": {
+    "defaultMessage": "Nested archives"
+  },
+  "archive-viewer.settings.section.nested-description": {
+    "defaultMessage": "Archives stored within the opened one, down to the one holding the open file."
+  },
+  "archive-viewer.settings.section.root": {
+    "defaultMessage": "Opened archive"
+  },
+  "archive-viewer.settings.section.root-description": {
+    "defaultMessage": "The archive itself: where it came from, its size, hashes and contents."
+  },
+  "archive-viewer.settings.section.source": {
+    "defaultMessage": "Project and version"
+  },
+  "archive-viewer.settings.section.source-description": {
+    "defaultMessage": "Where the archive was published, when the viewer knows."
+  },
+  "archive-viewer.settings.sections": {
+    "defaultMessage": "Details stack"
+  },
+  "archive-viewer.settings.sections-description": {
+    "defaultMessage": "Which items the details panel describes, from the outside in."
+  },
+  "archive-viewer.settings.size": {
+    "defaultMessage": "Size"
+  },
+  "archive-viewer.settings.size-description": {
+    "defaultMessage": "Sizes as stored and in full."
+  },
+  "archive-viewer.settings.visibility.always": {
+    "defaultMessage": "Always"
+  },
+  "archive-viewer.settings.visibility.details": {
+    "defaultMessage": "In details"
+  },
+  "archive-viewer.settings.visibility.never": {
+    "defaultMessage": "Never"
+  },
   "badge.alpha": {
     "defaultMessage": "Alpha"
   },
@@ -1529,6 +1844,9 @@
   "files.editor.find-toggle-replace": {
     "defaultMessage": "Toggle replace"
   },
+  "files.editor.hex-truncated": {
+    "defaultMessage": "… {bytes, plural, one {# more byte} other {# more bytes}} not shown"
+  },
   "files.editor.log-url-copied-text": {
     "defaultMessage": "Your log file URL has been copied to your clipboard."
   },
@@ -1640,6 +1958,9 @@
   "files.layout.zip-mixed-folders": {
     "defaultMessage": "Only entries from the same folder can be zipped together"
   },
+  "files.media-viewer.unplayable": {
+    "defaultMessage": "This file can't be played in the browser."
+  },
   "files.move-modal.current-location": {
     "defaultMessage": "Current location"
   },
@@ -1736,6 +2057,9 @@
   "files.operations.modpack-from-url": {
     "defaultMessage": "modpack from URL"
   },
+  "files.preview-fallback.description": {
+    "defaultMessage": "This file isn't text, an image or media, so it can't be previewed here."
+  },
   "files.rename-modal.header": {
     "defaultMessage": "Rename {name}"
   },
@@ -1772,6 +2096,78 @@
   "files.search.placeholder": {
     "defaultMessage": "Go to file or folder"
   },
+  "files.settings.browsing": {
+    "defaultMessage": "Browse folders"
+  },
+  "files.settings.browsing-description": {
+    "defaultMessage": "Open folders in tabs listing their contents, browse them in the sidebar's tree alone with tabs only for files, or open them in tabs showing their tree in place of the sidebar. Kept for each place files are browsed."
+  },
+  "files.settings.browsing.listing": {
+    "defaultMessage": "Folder listings"
+  },
+  "files.settings.browsing.sidebar": {
+    "defaultMessage": "Sidebar only"
+  },
+  "files.settings.browsing.tree": {
+    "defaultMessage": "Folder trees"
+  },
+  "files.settings.colored-icons": {
+    "defaultMessage": "Colored file icons"
+  },
+  "files.settings.colored-icons-description": {
+    "defaultMessage": "Tint file and folder icons by their type."
+  },
+  "files.settings.compact-folders": {
+    "defaultMessage": "Compact folders"
+  },
+  "files.settings.compact-folders-description": {
+    "defaultMessage": "Fold chains of folders that each hold just one folder into a single row of the tree."
+  },
+  "files.settings.format-json": {
+    "defaultMessage": "Format JSON files"
+  },
+  "files.settings.format-json-description": {
+    "defaultMessage": "Open JSON files that can't be edited laid out over lines and indented, even if they're stored compacted."
+  },
+  "files.settings.group": {
+    "defaultMessage": "Files"
+  },
+  "files.settings.group-description": {
+    "defaultMessage": "How files and folders are listed and browsed."
+  },
+  "files.settings.json-indent": {
+    "defaultMessage": "JSON indentation"
+  },
+  "files.settings.json-indent-description": {
+    "defaultMessage": "How formatted JSON is indented."
+  },
+  "files.settings.json-indent.four": {
+    "defaultMessage": "4 spaces"
+  },
+  "files.settings.json-indent.tab": {
+    "defaultMessage": "Tabs"
+  },
+  "files.settings.json-indent.two": {
+    "defaultMessage": "2 spaces"
+  },
+  "files.settings.new-tab-button": {
+    "defaultMessage": "New tab button"
+  },
+  "files.settings.new-tab-button-description": {
+    "defaultMessage": "Show a button beside the tabs for opening a new tab, or bringing in a panel where the layout allows it."
+  },
+  "files.settings.sidebar-toggle": {
+    "defaultMessage": "Folder tree button"
+  },
+  "files.settings.sidebar-toggle.navigation": {
+    "defaultMessage": "In the navigation bar"
+  },
+  "files.settings.sidebar-toggle.sidebar": {
+    "defaultMessage": "In the folder tree"
+  },
+  "files.sidebar.compact-folders": {
+    "defaultMessage": "Compact folders"
+  },
   "files.table-header.advanced-view": {
     "defaultMessage": "Advanced view"
   },
@@ -1796,6 +2192,15 @@
   "files.table-header.show-details": {
     "defaultMessage": "Show details"
   },
+  "files.table-header.sidebar-toggle": {
+    "defaultMessage": "Folder tree button"
+  },
+  "files.table-header.sidebar-toggle.navigation": {
+    "defaultMessage": "In the navigation bar"
+  },
+  "files.table-header.sidebar-toggle.sidebar": {
+    "defaultMessage": "In the folder tree"
+  },
   "files.table-header.size": {
     "defaultMessage": "Size"
   },
@@ -1823,6 +2228,12 @@
   "files.tabs.new-tab": {
     "defaultMessage": "New tab"
   },
+  "files.tabs.split-down": {
+    "defaultMessage": "Split down"
+  },
+  "files.tabs.split-right": {
+    "defaultMessage": "Split right"
+  },
   "files.tabs.unsaved-changes": {
     "defaultMessage": "Unsaved changes"
   },
@@ -1892,6 +2303,27 @@
   "files.validation.name-required": {
     "defaultMessage": "Name is required."
   },
+  "files.view-controls.auto": {
+    "defaultMessage": "Default view"
+  },
+  "files.view-controls.auto-variant": {
+    "defaultMessage": "Disassembled"
+  },
+  "files.view-controls.hex": {
+    "defaultMessage": "Hex"
+  },
+  "files.view-controls.interpretation": {
+    "defaultMessage": "Show as"
+  },
+  "files.view-controls.interpretation-tooltip": {
+    "defaultMessage": "Showing as {current}"
+  },
+  "files.view-controls.json": {
+    "defaultMessage": "JSON"
+  },
+  "files.view-controls.text": {
+    "defaultMessage": "Text"
+  },
   "files.zip-url-modal.backup-name": {
     "defaultMessage": "CurseForge modpack install"
   },
@@ -3029,6 +3461,9 @@
   "markdown-editor.error-label": {
     "defaultMessage": "Error"
   },
+  "markdown-editor.hide-formatter-buttons": {
+    "defaultMessage": "Hide Formatter Buttons"
+  },
   "markdown-editor.image-modal.description-field.description": {
     "defaultMessage": "Describe the image completely as you would to someone who could not see the image."
   },
@@ -3092,6 +3527,9 @@
   "markdown-editor.preview-toggle.label": {
     "defaultMessage": "Preview"
   },
+  "markdown-editor.show-formatter-buttons": {
+    "defaultMessage": "Show Formatter Buttons"
+  },
   "markdown-editor.toolbar.bold": {
     "defaultMessage": "Bold"
   },
@@ -6335,6 +6773,21 @@
   "settings.billing.title": {
     "defaultMessage": "Billing and subscriptions"
   },
+  "settings.display.code-theme.default": {
+    "defaultMessage": "Modrinth"
+  },
+  "settings.display.code-theme.description": {
+    "defaultMessage": "Pick the code theme used to highlight, style, and color code found within descriptions, changelogs and files. Kept on this device."
+  },
+  "settings.display.code-theme.preview": {
+    "defaultMessage": "Preview"
+  },
+  "settings.display.code-theme.search": {
+    "defaultMessage": "Search themes..."
+  },
+  "settings.display.code-theme.title": {
+    "defaultMessage": "Code highlighting"
+  },
   "settings.display.project-list-layouts.datapack": {
     "defaultMessage": "Data Packs page"
   },
@@ -6476,6 +6929,27 @@
   "settings.language.warning": {
     "defaultMessage": "Changing the {platform} language may cause some content to appear in English if a translation is not available. The {platform} is not yet fully translated, so some content may remain in English for certain languages."
   },
+  "settings.pages.label": {
+    "defaultMessage": "Settings pages"
+  },
+  "settings.panel.default-value": {
+    "defaultMessage": "Default: <value></value>"
+  },
+  "settings.panel.no-results": {
+    "defaultMessage": "No settings match your search."
+  },
+  "settings.panel.none": {
+    "defaultMessage": "None"
+  },
+  "settings.panel.off": {
+    "defaultMessage": "Off"
+  },
+  "settings.panel.on": {
+    "defaultMessage": "On"
+  },
+  "settings.panel.search": {
+    "defaultMessage": "Search settings..."
+  },
   "settings.pats.title": {
     "defaultMessage": "Personal access tokens"
   },
@@ -7627,5 +8101,257 @@
   },
   "version.supplementary-resources.type": {
     "defaultMessage": "Type"
+  },
+  "workbench.add-menu": {
+    "defaultMessage": "Add a tab"
+  },
+  "workbench.add-menu.panels": {
+    "defaultMessage": "Panels"
+  },
+  "workbench.close-popouts": {
+    "defaultMessage": "Close popout windows"
+  },
+  "workbench.collapsed.expand": {
+    "defaultMessage": "Expand bottom panel"
+  },
+  "workbench.collapsed.label": {
+    "defaultMessage": "Collapsed panels"
+  },
+  "workbench.corner.collapse-panel": {
+    "defaultMessage": "Collapse {name}"
+  },
+  "workbench.corner.collapse-region": {
+    "defaultMessage": "{side, select, left {Collapse left panel} right {Collapse right panel} other {Collapse bottom panel}}"
+  },
+  "workbench.corner.expand-panel": {
+    "defaultMessage": "Expand {name}"
+  },
+  "workbench.corner.expand-region": {
+    "defaultMessage": "{side, select, left {Expand left panel} right {Expand right panel} other {Expand bottom panel}}"
+  },
+  "workbench.corner.hide-panel": {
+    "defaultMessage": "Hide {name}"
+  },
+  "workbench.corner.hide-region": {
+    "defaultMessage": "{side, select, left {Hide left panel} right {Hide right panel} other {Hide bottom panel}}"
+  },
+  "workbench.corner.show-panel": {
+    "defaultMessage": "Show {name}"
+  },
+  "workbench.corner.show-region": {
+    "defaultMessage": "{side, select, left {Show left panel} right {Show right panel} other {Show bottom panel}}"
+  },
+  "workbench.layout-menu": {
+    "defaultMessage": "Layout"
+  },
+  "workbench.layout-menu.bottom": {
+    "defaultMessage": "Bottom panel"
+  },
+  "workbench.layout-menu.left": {
+    "defaultMessage": "Left panel"
+  },
+  "workbench.layout-menu.regions": {
+    "defaultMessage": "Regions"
+  },
+  "workbench.layout-menu.right": {
+    "defaultMessage": "Right panel"
+  },
+  "workbench.link.resize": {
+    "defaultMessage": "Resize linked panels"
+  },
+  "workbench.lone-tab.hide-tabs": {
+    "defaultMessage": "Hide tabs"
+  },
+  "workbench.lone-tab.show-tabs": {
+    "defaultMessage": "Show tabs"
+  },
+  "workbench.menu.area": {
+    "defaultMessage": "Area"
+  },
+  "workbench.menu.close-panel": {
+    "defaultMessage": "Close panel"
+  },
+  "workbench.menu.close-selected": {
+    "defaultMessage": "Close {count} tabs"
+  },
+  "workbench.menu.collapse-region": {
+    "defaultMessage": "Collapse to tabs"
+  },
+  "workbench.menu.dock": {
+    "defaultMessage": "Return to the main window"
+  },
+  "workbench.menu.expand-region": {
+    "defaultMessage": "Expand"
+  },
+  "workbench.menu.group": {
+    "defaultMessage": "Group"
+  },
+  "workbench.menu.hide-bar": {
+    "defaultMessage": "Hide tab bar"
+  },
+  "workbench.menu.hide-region": {
+    "defaultMessage": "Hide"
+  },
+  "workbench.menu.label": {
+    "defaultMessage": "Panel actions"
+  },
+  "workbench.menu.link-selected": {
+    "defaultMessage": "Link {count} tabs"
+  },
+  "workbench.menu.link-with": {
+    "defaultMessage": "Link with"
+  },
+  "workbench.menu.move-to": {
+    "defaultMessage": "Move to"
+  },
+  "workbench.menu.open-panel": {
+    "defaultMessage": "Open panel"
+  },
+  "workbench.menu.panels": {
+    "defaultMessage": "Panels"
+  },
+  "workbench.menu.popout": {
+    "defaultMessage": "Open in its own window"
+  },
+  "workbench.menu.popout-selected": {
+    "defaultMessage": "Open {count} tabs in their own window"
+  },
+  "workbench.menu.region.bottom": {
+    "defaultMessage": "Bottom panel"
+  },
+  "workbench.menu.region.center": {
+    "defaultMessage": "Center"
+  },
+  "workbench.menu.region.left": {
+    "defaultMessage": "Left panel"
+  },
+  "workbench.menu.region.right": {
+    "defaultMessage": "Right panel"
+  },
+  "workbench.menu.reverse-groups": {
+    "defaultMessage": "Reverse group order"
+  },
+  "workbench.menu.reverse-link": {
+    "defaultMessage": "Reverse linked order"
+  },
+  "workbench.menu.selected": {
+    "defaultMessage": "{count} tabs selected"
+  },
+  "workbench.menu.separate-all": {
+    "defaultMessage": "Separate all"
+  },
+  "workbench.menu.side-by-side": {
+    "defaultMessage": "Side by side"
+  },
+  "workbench.menu.split": {
+    "defaultMessage": "Split"
+  },
+  "workbench.menu.split.above": {
+    "defaultMessage": "Above"
+  },
+  "workbench.menu.split.below": {
+    "defaultMessage": "Below"
+  },
+  "workbench.menu.split.left": {
+    "defaultMessage": "To the left"
+  },
+  "workbench.menu.split.right": {
+    "defaultMessage": "To the right"
+  },
+  "workbench.menu.stacked": {
+    "defaultMessage": "One above the other"
+  },
+  "workbench.menu.take-out": {
+    "defaultMessage": "Take out {name}"
+  },
+  "workbench.menu.toggle-panel": {
+    "defaultMessage": "Toggle panel"
+  },
+  "workbench.popout.empty": {
+    "defaultMessage": "No tabs open in this panel"
+  },
+  "workbench.popout.failed": {
+    "defaultMessage": "Could not open the panel window"
+  },
+  "workbench.popout.keep-closed": {
+    "defaultMessage": "Keep closed"
+  },
+  "workbench.popout.reopen": {
+    "defaultMessage": "Reopen window"
+  },
+  "workbench.popout.restore-description": {
+    "defaultMessage": "Panels from this window have been moved to the main window: {panels}."
+  },
+  "workbench.popout.restore-title": {
+    "defaultMessage": "Popout window closed"
+  },
+  "workbench.reset-layout": {
+    "defaultMessage": "Reset layout"
+  },
+  "workbench.settings.group": {
+    "defaultMessage": "Layout"
+  },
+  "workbench.settings.group-description": {
+    "defaultMessage": "How the panels around the workspace look and behave."
+  },
+  "workbench.settings.lone-tabs": {
+    "defaultMessage": "Hide lone tab bars"
+  },
+  "workbench.settings.lone-tabs-description": {
+    "defaultMessage": "Hide the tab bar of panels on their own outside the center, giving them its room. A handle at their top right shows it again. Any tab bar can also be hidden from its menu."
+  },
+  "workbench.settings.popout-restore": {
+    "defaultMessage": "Popped out panels on reopening"
+  },
+  "workbench.settings.popout-restore-description": {
+    "defaultMessage": "When the page is opened again: return popped out panels to the main window, return them while offering to reopen their windows, or reopen their windows (on your next click, if the browser asks for one)."
+  },
+  "workbench.settings.popout-restore.close": {
+    "defaultMessage": "Close and merge"
+  },
+  "workbench.settings.popout-restore.preserve": {
+    "defaultMessage": "Preserve"
+  },
+  "workbench.settings.popout-restore.prompt": {
+    "defaultMessage": "Merge and ask"
+  },
+  "workbench.settings.popouts": {
+    "defaultMessage": "Pop out panels"
+  },
+  "workbench.settings.popouts-description": {
+    "defaultMessage": "Let panels be moved into windows of their own from their menus."
+  },
+  "workbench.settings.toggle-action": {
+    "defaultMessage": "Panel toggles"
+  },
+  "workbench.settings.toggle-action-description": {
+    "defaultMessage": "Whether the buttons for the left, right and bottom panels hide them entirely, or collapse them to a strip of their tabs."
+  },
+  "workbench.settings.toggle-action.collapse": {
+    "defaultMessage": "Collapse"
+  },
+  "workbench.settings.toggle-action.hide": {
+    "defaultMessage": "Hide"
+  },
+  "workbench.settings.toggles": {
+    "defaultMessage": "Panel toggles in the tab bar"
+  },
+  "workbench.settings.toggles-description": {
+    "defaultMessage": "Show buttons for the left and right panels at the ends of the tab bar, and for the bottom panel in its own. They can always be shown and hidden from the layout menu."
+  },
+  "workbench.settings.variant": {
+    "defaultMessage": "Panel style"
+  },
+  "workbench.settings.variant-description": {
+    "defaultMessage": "Square panels sit edge to edge, while rounded panels float apart as cards."
+  },
+  "workbench.settings.variant.rounded": {
+    "defaultMessage": "Rounded"
+  },
+  "workbench.settings.variant.square": {
+    "defaultMessage": "Square"
+  },
+  "workbench.tab.close": {
+    "defaultMessage": "Close {name}"
   }
 }
diff --git a/packages/ui/src/styles/dockview-theme.css b/packages/ui/src/styles/dockview-theme.css
new file mode 100644
index 0000000000..f8f8b904ff
--- /dev/null
+++ b/packages/ui/src/styles/dockview-theme.css
@@ -0,0 +1,289 @@
+.dockview-theme-modrinth {
+	--dv-group-view-background-color: var(--surface-2);
+	--dv-tabs-and-actions-container-background-color: var(--surface-3);
+	--dv-tabs-and-actions-container-height: 2.25rem;
+	--dv-tabs-and-actions-container-font-size: 0.875rem;
+	--dv-activegroup-visiblepanel-tab-background-color: var(--surface-2);
+	--dv-activegroup-hiddenpanel-tab-background-color: var(--surface-3);
+	--dv-inactivegroup-visiblepanel-tab-background-color: var(--surface-2);
+	--dv-inactivegroup-hiddenpanel-tab-background-color: var(--surface-3);
+	--dv-activegroup-visiblepanel-tab-color: var(--color-contrast);
+	--dv-activegroup-hiddenpanel-tab-color: var(--color-text-default);
+	--dv-inactivegroup-visiblepanel-tab-color: var(--color-text-default);
+	--dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-tertiary);
+	--dv-tab-divider-color: var(--surface-5);
+	--dv-separator-border: var(--surface-5);
+	--dv-paneview-header-border-color: var(--surface-5);
+	--dv-icon-hover-background-color: var(--surface-5);
+	--dv-drag-over-background-color: var(--color-brand-highlight);
+	--dv-active-sash-color: var(--color-brand);
+	--dv-tabs-container-scrollbar-color: var(--surface-5);
+}
+
+/*
+ * Dockview marks shown split views with a `visible` class, which Tailwind's utility of the same
+ * name would make visible even within a hidden panel (e.g. a workbench nested in an inactive tab).
+ */
+.dv-view.visible {
+	visibility: inherit;
+}
+
+.workbench-root .dv-groupview {
+	position: relative;
+}
+
+.workbench-tab-bar-handle {
+	position: absolute;
+	top: 0;
+	right: 1rem;
+	z-index: 10;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.5rem;
+	height: 0.875rem;
+	padding: 0;
+	border: 1px solid var(--surface-5);
+	border-top: none;
+	border-radius: 0 0 0.5rem 0.5rem;
+	background-color: var(--surface-3);
+	color: var(--color-text-default);
+	cursor: pointer;
+	opacity: 0.6;
+}
+
+.workbench-tab-bar-handle:hover,
+.workbench-tab-bar-handle:focus-visible {
+	opacity: 1;
+	color: var(--color-contrast);
+}
+
+.workbench-tab-bar-handle svg {
+	width: 0.875rem;
+	height: 0.875rem;
+}
+
+.workbench-tab-bar-handle.is-pulled-down svg {
+	transform: rotate(180deg);
+}
+
+.dv-tab {
+	border-width: 0px;
+	border-right-width: 1px;
+	border-style: solid;
+	border-color: var(--surface-5);
+}
+
+.workbench-root,
+.workbench-root .dockview-theme-modrinth {
+	--dv-sash-color: transparent;
+	--dv-active-sash-color: transparent;
+}
+
+.workbench-root .dv-sash:not(.dv-disabled)::after {
+	content: '';
+	position: absolute;
+	pointer-events: none;
+	background-color: var(--color-brand);
+	opacity: 0;
+}
+
+.workbench-root .dv-horizontal > .dv-sash-container > .dv-sash::after {
+	top: 0;
+	left: 50%;
+	width: 1px;
+	height: 100%;
+}
+
+.workbench-root .dv-vertical > .dv-sash-container > .dv-sash::after {
+	top: 50%;
+	left: 0;
+	width: 100%;
+	height: 1px;
+}
+
+.workbench-root .dv-sash:not(.dv-disabled):hover::after {
+	opacity: 1;
+	transition: opacity 0s 0.3s;
+}
+
+.workbench-root .dv-sash:not(.dv-disabled):active::after {
+	opacity: 1;
+	transition: none;
+}
+
+.workbench-square,
+.workbench-square .dockview-theme-modrinth {
+	--dv-separator-border: var(--surface-4);
+}
+
+.workbench-square .workbench-panel {
+	background-color: var(--surface-2);
+}
+
+.workbench-square .dv-tabs-and-actions-container {
+	border-bottom: 1px solid var(--surface-4);
+}
+
+.workbench-square .dv-tab.dv-active-tab {
+	box-shadow: inset 0 -2px 0 var(--color-brand);
+}
+
+.workbench-square .dv-inactive-group .dv-tab.dv-active-tab {
+	box-shadow: inset 0 -2px 0 var(--surface-5);
+}
+
+.workbench-rounded,
+.workbench-rounded .dockview-theme-modrinth {
+	--dv-background-color: var(--surface-1);
+	--dv-group-view-background-color: var(--surface-1);
+	--dv-tabs-and-actions-container-background-color: var(--surface-1);
+	--dv-separator-border: var(--surface-4);
+	--dv-activegroup-visiblepanel-tab-background-color: transparent;
+	--dv-activegroup-hiddenpanel-tab-background-color: transparent;
+	--dv-inactivegroup-visiblepanel-tab-background-color: transparent;
+	--dv-inactivegroup-hiddenpanel-tab-background-color: transparent;
+	--dv-activegroup-visiblepanel-tab-color: var(--color-green);
+	--dv-inactivegroup-visiblepanel-tab-color: var(--color-green);
+	--dv-activegroup-hiddenpanel-tab-color: var(--color-text-default);
+	--dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-default);
+	--dv-icon-hover-background-color: var(--surface-3);
+	--dv-tab-divider-color: transparent;
+	--dv-tabs-and-actions-container-height: 28px;
+	--dv-tabs-and-actions-container-font-size: 14px;
+	--dv-drag-over-background-color: color-mix(in srgb, var(--color-text-default) 5%, transparent);
+	--dv-drag-over-border-color: color-mix(in srgb, var(--color-text-default) 10%, transparent);
+	--dv-drag-over-border: 1px solid var(--dv-drag-over-border-color);
+}
+
+.workbench-rounded {
+	background-color: var(--surface-1);
+}
+
+.workbench-rounded .workbench-panel,
+.workbench-rounded .workbench-toolbar,
+.workbench-rounded .workbench-collapsed-strip {
+	background-color: var(--surface-1);
+}
+
+.workbench-rounded .workbench-toolbar {
+	border-color: var(--color-divider);
+}
+
+.workbench-square .workbench-collapsed-strip {
+	background-color: var(--surface-3);
+}
+
+.workbench-rounded .dv-tab {
+	height: var(--dv-tabs-and-actions-container-height);
+	padding: 0;
+	border: none;
+	border-radius: 0.5rem;
+}
+
+.workbench-rounded .dv-drop-target-container {
+	--dv-transition-duration: 70ms;
+}
+
+.workbench-rounded .dv-drop-target-anchor-line {
+	transition: none;
+}
+
+.workbench-rounded .dv-tabs-and-actions-container {
+	height: auto;
+	min-height: var(--dv-tabs-and-actions-container-height);
+	align-items: flex-start;
+	padding: 9px 6px 9px 6px;
+	gap: 4px;
+}
+
+.workbench-rounded .dv-tabs-container {
+	flex-wrap: wrap;
+	height: auto;
+	overflow: visible;
+	align-content: flex-start;
+	gap: 4px;
+	padding: 2px;
+	border: 1px solid var(--surface-4);
+	border-radius: 0.75rem;
+	box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+}
+
+.workbench-rounded .dv-pre-actions-container,
+.workbench-rounded .dv-left-actions-container,
+.workbench-rounded .dv-right-actions-container {
+	height: calc(var(--dv-tabs-and-actions-container-height) + 6px);
+}
+
+.workbench-rounded .dv-void-container {
+	display: flex;
+	min-width: 0;
+	height: auto;
+	align-self: stretch;
+}
+
+.workbench-rounded .dv-tab:focus-visible::after,
+.workbench-rounded .dv-tab:has(:focus-visible)::after {
+	border-radius: 0.5rem;
+	box-shadow: 0 0 0 4px var(--color-brand-shadow);
+}
+
+.workbench-rounded
+	.dv-tab
+	> .dv-drop-target-dropzone
+	> .dv-drop-target-selection.dv-drop-target-selection-line {
+	position: absolute;
+	width: 2px !important;
+	background-color: var(--color-text-default);
+	border: none;
+	transition: none;
+}
+
+.workbench-rounded .dv-tab > .dv-drop-target-dropzone > .dv-drop-target-left {
+	left: -1px !important;
+	right: auto !important;
+}
+
+.workbench-rounded .dv-tab > .dv-drop-target-dropzone > .dv-drop-target-right {
+	left: auto !important;
+	right: -1px !important;
+}
+
+@property --workbench-panel-scrollbar-color {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: transparent;
+}
+
+/* Rounded panels only show their scrollbars while hovered. */
+.workbench-rounded .workbench-panel {
+	--workbench-panel-scrollbar-color: transparent;
+	transition: --workbench-panel-scrollbar-color 1750ms ease;
+}
+
+.workbench-rounded .workbench-panel:hover {
+	--workbench-panel-scrollbar-color: var(--color-scrollbar);
+	transition-duration: 200ms;
+}
+
+.workbench-rounded .workbench-panel,
+.workbench-rounded .workbench-panel * {
+	scrollbar-color: var(--workbench-panel-scrollbar-color) transparent;
+}
+
+.workbench-rounded .workbench-panel::-webkit-scrollbar-thumb,
+.workbench-rounded .workbench-panel *::-webkit-scrollbar-thumb {
+	background: var(--workbench-panel-scrollbar-color);
+}
+
+@media (hover: none) {
+	.workbench-rounded .workbench-panel {
+		--workbench-panel-scrollbar-color: var(--color-scrollbar);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.workbench-rounded .workbench-panel {
+		transition: none;
+	}
+}
diff --git a/packages/ui/src/utils/ace-mode-log.ts b/packages/ui/src/utils/ace-mode-log.ts
deleted file mode 100644
index 720ff6f30e..0000000000
--- a/packages/ui/src/utils/ace-mode-log.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import ace from 'ace-builds'
-
-ace['define'](
-	'ace/mode/mclog_highlight_rules',
-	['require', 'exports', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
-	function (require: any, exports: any) {
-		const oop = require('ace/lib/oop')
-		const TextHighlightRules = require('ace/mode/text_highlight_rules').TextHighlightRules
-
-		const MclogHighlightRules = function (this: any) {
-			this.$rules = {
-				start: [
-					{
-						token: 'comment.timestamp',
-						regex: /^\[\d\d:\d\d:\d\d\]/.source,
-					},
-					{
-						token: 'invalid.error',
-						regex: /\[.+?\/ERROR\]:?/.source,
-					},
-					{
-						token: 'keyword.warn',
-						regex: /\[.+?\/WARN\]:?/.source,
-					},
-					{
-						token: 'string.info',
-						regex: /\[.+?\/INFO\]:/.source,
-					},
-					{
-						token: 'support.command',
-						regex: /: \/.+/.source,
-					},
-					{
-						token: 'comment.stacktrace',
-						regex: /\tat\s.+/.source,
-					},
-					{
-						token: 'entity.name.function',
-						regex: /\w+?\[\/\d+?\.\d+?\.\d+?\.\d+?:\d+?\]/.source,
-					},
-					{
-						token: 'storage.chat',
-						regex: /\[CHAT\]/.source,
-					},
-				],
-			}
-			this.normalizeRules()
-		}
-
-		oop.inherits(MclogHighlightRules, TextHighlightRules)
-		exports.MclogHighlightRules = MclogHighlightRules
-	},
-)
-
-ace['define'](
-	'ace/mode/mclog',
-	['require', 'exports', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/mclog_highlight_rules'],
-	function (require: any, exports: any) {
-		const oop = require('ace/lib/oop')
-		const TextMode = require('ace/mode/text').Mode
-		const MclogHighlightRules = require('ace/mode/mclog_highlight_rules').MclogHighlightRules
-
-		const Mode = function (this: any) {
-			this.HighlightRules = MclogHighlightRules
-		}
-
-		oop.inherits(Mode, TextMode)
-		exports.Mode = Mode
-	},
-)
diff --git a/packages/ui/src/utils/ace-mode-mcfunction.ts b/packages/ui/src/utils/ace-mode-mcfunction.ts
deleted file mode 100644
index 62d209fda1..0000000000
--- a/packages/ui/src/utils/ace-mode-mcfunction.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import ace from 'ace-builds'
-
-ace['define'](
-	'ace/mode/mcfunction_highlight_rules',
-	['require', 'exports', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
-	function (require: any, exports: any) {
-		const oop = require('ace/lib/oop')
-		const TextHighlightRules = require('ace/mode/text_highlight_rules').TextHighlightRules
-
-		const McfunctionHighlightRules = function (this: any) {
-			this.$rules = {
-				start: [
-					{
-						token: 'comment.doc',
-						regex: /^\s*#>.*$/.source,
-					},
-					{
-						token: 'comment',
-						regex: /^\s*#!.*$/.source,
-					},
-					{
-						token: 'comment',
-						regex: /^\s*##.*$/.source,
-					},
-					{
-						token: 'comment',
-						regex: /^\s*#(?![a-z0-9_.]+:).*$/i.source,
-					},
-					{
-						token: 'string',
-						regex: /"(?:\\.|[^"\\])*"/.source,
-					},
-					{
-						token: 'string',
-						regex: /'(?:\\.|[^'\\])*'/.source,
-					},
-					{
-						token: 'variable',
-						regex: /\$\([a-zA-Z0-9_]+\)/.source,
-					},
-					{
-						token: 'constant.language',
-						regex: /@[apers]\b/i.source,
-					},
-					{
-						token: 'constant.language',
-						regex: /\b[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\b/i.source,
-					},
-					{
-						token: 'support.constant',
-						regex: /#?[a-z0-9_.]+:[a-z0-9_./-]+/i.source,
-					},
-					{
-						token: 'keyword',
-						regex: /\brun\s+\/?[a-z][a-z0-9_]*/i.source,
-					},
-					{
-						token: 'constant.numeric',
-						regex: /[~^]-?(?:\d*\.)?\d+/.source,
-					},
-					{
-						token: 'keyword.operator',
-						regex: /[~^]/.source,
-					},
-					{
-						token: 'constant.numeric',
-						regex: /-?(?:\d*\.)?\d+[bdfils]?\b/i.source,
-					},
-					{
-						token: 'constant.language',
-						regex: /\.\.|\b(?:true|false)\b/i.source,
-					},
-					{
-						token: 'keyword',
-						regex: /^\s*\/?[a-z][a-z0-9_]*/i.source,
-					},
-				],
-			}
-			this.normalizeRules()
-		}
-
-		oop.inherits(McfunctionHighlightRules, TextHighlightRules)
-		exports.McfunctionHighlightRules = McfunctionHighlightRules
-	},
-)
-
-ace['define'](
-	'ace/mode/mcfunction',
-	['require', 'exports', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/mcfunction_highlight_rules'],
-	function (require: any, exports: any) {
-		const oop = require('ace/lib/oop')
-		const TextMode = require('ace/mode/text').Mode
-		const McfunctionHighlightRules =
-			require('ace/mode/mcfunction_highlight_rules').McfunctionHighlightRules
-
-		const Mode = function (this: any) {
-			this.HighlightRules = McfunctionHighlightRules
-			this.$id = 'ace/mode/mcfunction'
-		}
-
-		oop.inherits(Mode, TextMode)
-		exports.Mode = Mode
-	},
-)
diff --git a/packages/ui/src/utils/ace-theme.ts b/packages/ui/src/utils/ace-theme.ts
deleted file mode 100644
index e78e42d483..0000000000
--- a/packages/ui/src/utils/ace-theme.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import 'ace-builds/esm-resolver'
-
-import cssText from '@modrinth/assets/styles/ace.css?raw'
-import ace from 'ace-builds'
-
-ace['define'](
-	'ace/theme/modrinth',
-	['require', 'exports', 'module', 'ace/lib/dom'],
-	function (require, exports, _module) {
-		exports.isDark = false
-		exports.cssClass = 'ace-modrinth'
-		exports.cssText = cssText
-
-		const dom = require('ace/lib/dom')
-		dom.importCssString(exports.cssText, exports.cssClass, false)
-	},
-)
diff --git a/packages/ui/src/utils/code-highlight-themes.ts b/packages/ui/src/utils/code-highlight-themes.ts
new file mode 100644
index 0000000000..51e931b32d
--- /dev/null
+++ b/packages/ui/src/utils/code-highlight-themes.ts
@@ -0,0 +1,442 @@
+/**
+ * The base themes highlight.js ships, by file name, each loaded only once picked. Generated from
+ * `highlight.js/styles` (leaving out its `base16` folder of variants).
+ */
+export const HIGHLIGHT_JS_THEMES: { id: string; label: string; load: () => Promise<string> }[] = [
+	{
+		id: '1c-light',
+		label: '1C Light',
+		load: () => import('highlight.js/styles/1c-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'a11y-dark',
+		label: 'A11y Dark',
+		load: () => import('highlight.js/styles/a11y-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'a11y-light',
+		label: 'A11y Light',
+		load: () => import('highlight.js/styles/a11y-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'agate',
+		label: 'Agate',
+		load: () => import('highlight.js/styles/agate.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'an-old-hope',
+		label: 'An Old Hope',
+		load: () => import('highlight.js/styles/an-old-hope.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'androidstudio',
+		label: 'Android Studio',
+		load: () =>
+			import('highlight.js/styles/androidstudio.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'arduino-light',
+		label: 'Arduino Light',
+		load: () =>
+			import('highlight.js/styles/arduino-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'arta',
+		label: 'Arta',
+		load: () => import('highlight.js/styles/arta.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'ascetic',
+		label: 'Ascetic',
+		load: () => import('highlight.js/styles/ascetic.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'atom-one-dark',
+		label: 'Atom One Dark',
+		load: () =>
+			import('highlight.js/styles/atom-one-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'atom-one-dark-reasonable',
+		label: 'Atom One Dark Reasonable',
+		load: () =>
+			import('highlight.js/styles/atom-one-dark-reasonable.min.css?inline').then(
+				(css) => css.default,
+			),
+	},
+	{
+		id: 'atom-one-light',
+		label: 'Atom One Light',
+		load: () =>
+			import('highlight.js/styles/atom-one-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'brown-paper',
+		label: 'Brown Paper',
+		load: () => import('highlight.js/styles/brown-paper.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'codepen-embed',
+		label: 'CodePen Embed',
+		load: () =>
+			import('highlight.js/styles/codepen-embed.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'color-brewer',
+		label: 'Color Brewer',
+		load: () =>
+			import('highlight.js/styles/color-brewer.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'cybertopia-cherry',
+		label: 'Cybertopia Cherry',
+		load: () =>
+			import('highlight.js/styles/cybertopia-cherry.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'cybertopia-dimmer',
+		label: 'Cybertopia Dimmer',
+		load: () =>
+			import('highlight.js/styles/cybertopia-dimmer.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'cybertopia-icecap',
+		label: 'Cybertopia Icecap',
+		load: () =>
+			import('highlight.js/styles/cybertopia-icecap.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'cybertopia-saturated',
+		label: 'Cybertopia Saturated',
+		load: () =>
+			import('highlight.js/styles/cybertopia-saturated.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'dark',
+		label: 'Dark',
+		load: () => import('highlight.js/styles/dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'default',
+		label: 'Default',
+		load: () => import('highlight.js/styles/default.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'devibeans',
+		label: 'Devibeans',
+		load: () => import('highlight.js/styles/devibeans.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'docco',
+		label: 'Docco',
+		load: () => import('highlight.js/styles/docco.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'far',
+		label: 'Far',
+		load: () => import('highlight.js/styles/far.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'felipec',
+		label: 'Felipec',
+		load: () => import('highlight.js/styles/felipec.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'foundation',
+		label: 'Foundation',
+		load: () => import('highlight.js/styles/foundation.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'github',
+		label: 'GitHub',
+		load: () => import('highlight.js/styles/github.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'github-dark',
+		label: 'GitHub Dark',
+		load: () => import('highlight.js/styles/github-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'github-dark-dimmed',
+		label: 'GitHub Dark Dimmed',
+		load: () =>
+			import('highlight.js/styles/github-dark-dimmed.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'gml',
+		label: 'GML',
+		load: () => import('highlight.js/styles/gml.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'googlecode',
+		label: 'Google Code',
+		load: () => import('highlight.js/styles/googlecode.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'gradient-dark',
+		label: 'Gradient Dark',
+		load: () =>
+			import('highlight.js/styles/gradient-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'gradient-light',
+		label: 'Gradient Light',
+		load: () =>
+			import('highlight.js/styles/gradient-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'grayscale',
+		label: 'Grayscale',
+		load: () => import('highlight.js/styles/grayscale.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'hybrid',
+		label: 'Hybrid',
+		load: () => import('highlight.js/styles/hybrid.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'idea',
+		label: 'Idea',
+		load: () => import('highlight.js/styles/idea.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'intellij-light',
+		label: 'IntelliJ Light',
+		load: () =>
+			import('highlight.js/styles/intellij-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'ir-black',
+		label: 'IR Black',
+		load: () => import('highlight.js/styles/ir-black.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'isbl-editor-dark',
+		label: 'ISBL Editor Dark',
+		load: () =>
+			import('highlight.js/styles/isbl-editor-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'isbl-editor-light',
+		label: 'ISBL Editor Light',
+		load: () =>
+			import('highlight.js/styles/isbl-editor-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'kimbie-dark',
+		label: 'Kimbie Dark',
+		load: () => import('highlight.js/styles/kimbie-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'kimbie-light',
+		label: 'Kimbie Light',
+		load: () =>
+			import('highlight.js/styles/kimbie-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'lightfair',
+		label: 'Lightfair',
+		load: () => import('highlight.js/styles/lightfair.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'lioshi',
+		label: 'Lioshi',
+		load: () => import('highlight.js/styles/lioshi.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'magula',
+		label: 'Magula',
+		load: () => import('highlight.js/styles/magula.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'mono-blue',
+		label: 'Mono Blue',
+		load: () => import('highlight.js/styles/mono-blue.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'monokai',
+		label: 'Monokai',
+		load: () => import('highlight.js/styles/monokai.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'monokai-sublime',
+		label: 'Monokai Sublime',
+		load: () =>
+			import('highlight.js/styles/monokai-sublime.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'night-owl',
+		label: 'Night Owl',
+		load: () => import('highlight.js/styles/night-owl.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'nnfx-dark',
+		label: 'NNFX Dark',
+		load: () => import('highlight.js/styles/nnfx-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'nnfx-light',
+		label: 'NNFX Light',
+		load: () => import('highlight.js/styles/nnfx-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'nord',
+		label: 'Nord',
+		load: () => import('highlight.js/styles/nord.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'obsidian',
+		label: 'Obsidian',
+		load: () => import('highlight.js/styles/obsidian.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'panda-syntax-dark',
+		label: 'Panda Syntax Dark',
+		load: () =>
+			import('highlight.js/styles/panda-syntax-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'panda-syntax-light',
+		label: 'Panda Syntax Light',
+		load: () =>
+			import('highlight.js/styles/panda-syntax-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'paraiso-dark',
+		label: 'Paraiso Dark',
+		load: () =>
+			import('highlight.js/styles/paraiso-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'paraiso-light',
+		label: 'Paraiso Light',
+		load: () =>
+			import('highlight.js/styles/paraiso-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'pojoaque',
+		label: 'Pojoaque',
+		load: () => import('highlight.js/styles/pojoaque.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'purebasic',
+		label: 'PureBasic',
+		load: () => import('highlight.js/styles/purebasic.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'qtcreator-dark',
+		label: 'Qt Creator Dark',
+		load: () =>
+			import('highlight.js/styles/qtcreator-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'qtcreator-light',
+		label: 'Qt Creator Light',
+		load: () =>
+			import('highlight.js/styles/qtcreator-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'rainbow',
+		label: 'Rainbow',
+		load: () => import('highlight.js/styles/rainbow.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'rose-pine',
+		label: 'Rose Pine',
+		load: () => import('highlight.js/styles/rose-pine.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'rose-pine-dawn',
+		label: 'Rose Pine Dawn',
+		load: () =>
+			import('highlight.js/styles/rose-pine-dawn.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'rose-pine-moon',
+		label: 'Rose Pine Moon',
+		load: () =>
+			import('highlight.js/styles/rose-pine-moon.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'routeros',
+		label: 'RouterOS',
+		load: () => import('highlight.js/styles/routeros.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'school-book',
+		label: 'School Book',
+		load: () => import('highlight.js/styles/school-book.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'shades-of-purple',
+		label: 'Shades Of Purple',
+		load: () =>
+			import('highlight.js/styles/shades-of-purple.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'srcery',
+		label: 'Srcery',
+		load: () => import('highlight.js/styles/srcery.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'stackoverflow-dark',
+		label: 'Stack Overflow Dark',
+		load: () =>
+			import('highlight.js/styles/stackoverflow-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'stackoverflow-light',
+		label: 'Stack Overflow Light',
+		load: () =>
+			import('highlight.js/styles/stackoverflow-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'sunburst',
+		label: 'Sunburst',
+		load: () => import('highlight.js/styles/sunburst.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'tokyo-night-dark',
+		label: 'Tokyo Night Dark',
+		load: () =>
+			import('highlight.js/styles/tokyo-night-dark.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'tokyo-night-light',
+		label: 'Tokyo Night Light',
+		load: () =>
+			import('highlight.js/styles/tokyo-night-light.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'tomorrow-night-blue',
+		label: 'Tomorrow Night Blue',
+		load: () =>
+			import('highlight.js/styles/tomorrow-night-blue.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'tomorrow-night-bright',
+		label: 'Tomorrow Night Bright',
+		load: () =>
+			import('highlight.js/styles/tomorrow-night-bright.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'vs',
+		label: 'VS',
+		load: () => import('highlight.js/styles/vs.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'vs2015',
+		label: 'VS 2015',
+		load: () => import('highlight.js/styles/vs2015.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'xcode',
+		label: 'Xcode',
+		load: () => import('highlight.js/styles/xcode.min.css?inline').then((css) => css.default),
+	},
+	{
+		id: 'xt256',
+		label: 'XT256',
+		load: () => import('highlight.js/styles/xt256.min.css?inline').then((css) => css.default),
+	},
+]
diff --git a/packages/ui/src/utils/codemirror/find.ts b/packages/ui/src/utils/codemirror/find.ts
new file mode 100644
index 0000000000..bf6f53a696
--- /dev/null
+++ b/packages/ui/src/utils/codemirror/find.ts
@@ -0,0 +1,98 @@
+import {
+	closeSearchPanel,
+	findNext,
+	findPrevious,
+	getSearchQuery,
+	openSearchPanel,
+	replaceAll,
+	replaceNext,
+	search,
+	searchPanelOpen,
+	SearchQuery,
+	setSearchQuery,
+} from '@codemirror/search'
+import { EditorSelection } from '@codemirror/state'
+import type { EditorView } from '@codemirror/view'
+
+/** How many matches a search has, and which of them (from 1) is selected, or `0` for none. */
+export interface FindMatches {
+	total: number
+	current: number
+}
+
+const NO_MATCHES: FindMatches = { total: 0, current: 0 }
+
+/**
+ * Search state for an editor whose find bar is drawn by the page rather than by CodeMirror: the
+ * panel it opens is empty, but keeps every match highlighted while searching.
+ */
+export const findWithoutPanel = search({
+	createPanel: (view) => ({ dom: view.dom.ownerDocument.createElement('div') }),
+})
+
+export function countMatches(view: EditorView): FindMatches {
+	const query = getSearchQuery(view.state)
+	if (!query.valid) return NO_MATCHES
+	const selection = view.state.selection.main
+	const cursor = query.getCursor(view.state)
+	let total = 0
+	let current = 0
+	for (let match = cursor.next(); !match.done; match = cursor.next()) {
+		total++
+		if (match.value.from === selection.from && match.value.to === selection.to) current = total
+	}
+	return { total, current }
+}
+
+function setQuery(view: EditorView, text: string, replacement = '') {
+	view.dispatch({
+		effects: setSearchQuery.of(
+			new SearchQuery({ search: text, replace: replacement, literal: true }),
+		),
+	})
+}
+
+/**
+ * Searches for the text (ignoring case) and selects its first match from where the selection
+ * starts, so a search that's typed out keeps its place.
+ */
+export function findText(view: EditorView, text: string) {
+	if (!text) {
+		clearFind(view)
+		return NO_MATCHES
+	}
+	if (!searchPanelOpen(view.state)) openSearchPanel(view)
+	setQuery(view, text)
+	view.dispatch({ selection: EditorSelection.cursor(view.state.selection.main.from) })
+	findNext(view)
+	return countMatches(view)
+}
+
+export function findNextMatch(view: EditorView) {
+	findNext(view)
+	return countMatches(view)
+}
+
+export function findPreviousMatch(view: EditorView) {
+	findPrevious(view)
+	return countMatches(view)
+}
+
+/** Replaces the selected match (or else the next one) and selects the one after it. */
+export function replaceMatch(view: EditorView, replacement: string) {
+	setQuery(view, getSearchQuery(view.state).search, replacement)
+	replaceNext(view)
+	return countMatches(view)
+}
+
+export function replaceAllMatches(view: EditorView, replacement: string) {
+	setQuery(view, getSearchQuery(view.state).search, replacement)
+	replaceAll(view)
+	findNext(view)
+	return countMatches(view)
+}
+
+export function clearFind(view: EditorView) {
+	setQuery(view, '')
+	closeSearchPanel(view)
+}
diff --git a/packages/ui/src/utils/codemirror/highlight-js-classes.ts b/packages/ui/src/utils/codemirror/highlight-js-classes.ts
new file mode 100644
index 0000000000..05974d606e
--- /dev/null
+++ b/packages/ui/src/utils/codemirror/highlight-js-classes.ts
@@ -0,0 +1,50 @@
+import { tagHighlighter, tags as t } from '@lezer/highlight'
+
+/**
+ * Gives each token the class highlight.js would give it, so editors are coloured by the same theme
+ * as highlighted code blocks (see `useCodeHighlightTheme`), with no colours of their own.
+ */
+export const highlightJsClasses = tagHighlighter([
+	{ tag: [t.comment, t.lineComment, t.blockComment, t.docComment], class: 'hljs-comment' },
+	{
+		tag: [
+			t.keyword,
+			t.controlKeyword,
+			t.definitionKeyword,
+			t.moduleKeyword,
+			t.operatorKeyword,
+			t.modifier,
+		],
+		class: 'hljs-keyword',
+	},
+	{ tag: [t.self], class: 'hljs-variable language_' },
+	{ tag: [t.string, t.docString, t.character, t.attributeValue], class: 'hljs-string' },
+	{ tag: [t.special(t.string), t.url], class: 'hljs-link' },
+	{ tag: [t.regexp], class: 'hljs-regexp' },
+	{ tag: [t.escape], class: 'hljs-char escape_' },
+	{ tag: [t.number, t.integer, t.float], class: 'hljs-number' },
+	{ tag: [t.bool, t.null, t.atom], class: 'hljs-literal' },
+	{ tag: [t.typeName, t.standard(t.typeName)], class: 'hljs-type' },
+	{ tag: [t.className, t.namespace], class: 'hljs-title class_' },
+	{
+		tag: [t.function(t.variableName), t.function(t.propertyName), t.macroName],
+		class: 'hljs-title function_',
+	},
+	{ tag: [t.standard(t.variableName)], class: 'hljs-built_in' },
+	{ tag: [t.variableName, t.special(t.variableName)], class: 'hljs-variable' },
+	{ tag: [t.propertyName, t.attributeName], class: 'hljs-attr' },
+	{ tag: [t.labelName], class: 'hljs-symbol' },
+	{ tag: [t.tagName], class: 'hljs-name' },
+	{ tag: [t.meta, t.annotation, t.processingInstruction], class: 'hljs-meta' },
+	{ tag: [t.operator], class: 'hljs-operator' },
+	{ tag: [t.punctuation], class: 'hljs-punctuation' },
+	{ tag: [t.heading], class: 'hljs-section' },
+	{ tag: [t.strong], class: 'hljs-strong' },
+	{ tag: [t.emphasis], class: 'hljs-emphasis' },
+	{ tag: [t.link], class: 'hljs-link' },
+	{ tag: [t.quote], class: 'hljs-quote' },
+	{ tag: [t.list], class: 'hljs-bullet' },
+	{ tag: [t.monospace], class: 'hljs-code' },
+	{ tag: [t.inserted], class: 'hljs-addition' },
+	{ tag: [t.deleted, t.invalid], class: 'hljs-deletion' },
+])
diff --git a/packages/ui/src/utils/codemirror/highlight-js.ts b/packages/ui/src/utils/codemirror/highlight-js.ts
new file mode 100644
index 0000000000..8d4eca58af
--- /dev/null
+++ b/packages/ui/src/utils/codemirror/highlight-js.ts
@@ -0,0 +1,97 @@
+import type { Range, Text } from '@codemirror/state'
+import { Decoration, type DecorationSet, ViewPlugin, type ViewUpdate } from '@codemirror/view'
+import { hljs } from '@modrinth/utils/highlightjs/index'
+
+/** The highlight.js grammar for each editor language that has one (see `getEditorLanguage`). */
+const HIGHLIGHT_JS_LANGUAGES: Record<string, string> = {
+	java: 'java',
+	kotlin: 'kotlin',
+	scala: 'scala',
+	groovy: 'groovy',
+	gradle: 'gradle',
+	json: 'json',
+	yaml: 'yaml',
+	xml: 'xml',
+	html: 'xml',
+	properties: 'properties',
+	ini: 'ini',
+	toml: 'ini',
+	javascript: 'javascript',
+	typescript: 'javascript',
+	python: 'python',
+	lua: 'lua',
+	mcfunction: 'mcfunction',
+}
+
+/** Past this size, highlighting the whole document on each change would make typing lag. */
+const MAX_LENGTH = 512 * 1024
+
+const ENTITIES: Record<string, string> = {
+	'&amp;': '&',
+	'&lt;': '<',
+	'&gt;': '>',
+	'&quot;': '"',
+	'&#x27;': "'",
+}
+
+const TOKENS = /<span class="([^"]*)">|<\/span>|&(?:amp|lt|gt|quot|#x27);|[^<&]+/g
+
+const marks = new Map<string, Decoration>()
+function markFor(className: string) {
+	let mark = marks.get(className)
+	if (!mark) {
+		mark = Decoration.mark({ class: className })
+		marks.set(className, mark)
+	}
+	return mark
+}
+
+/** Marks each token highlight.js finds with the classes it gives it, from its HTML output. */
+function decorate(doc: Text, language: string): DecorationSet {
+	let html: string
+	try {
+		html = hljs.highlight(doc.toString(), { language, ignoreIllegals: true }).value
+	} catch {
+		return Decoration.none
+	}
+
+	const ranges: Range<Decoration>[] = []
+	const open: { className: string; from: number }[] = []
+	let position = 0
+	for (const [token, className] of html.matchAll(TOKENS)) {
+		if (className !== undefined) {
+			open.push({ className, from: position })
+		} else if (token === '</span>') {
+			const span = open.pop()
+			if (span && span.from < position)
+				ranges.push(markFor(span.className).range(span.from, position))
+		} else {
+			position += ENTITIES[token]?.length ?? token.length
+		}
+	}
+	return Decoration.set(ranges, true)
+}
+
+/**
+ * Highlights the document as highlight.js does, so code is coloured exactly like highlighted code
+ * blocks elsewhere (e.g. technical review), or `null` for languages it has no grammar for.
+ */
+export function highlightJsHighlighting(name: string, doc: Text) {
+	const language = HIGHLIGHT_JS_LANGUAGES[name]
+	if (!language || !hljs.getLanguage(language) || doc.length > MAX_LENGTH) return null
+
+	return ViewPlugin.fromClass(
+		class {
+			decorations: DecorationSet
+
+			constructor(view: { state: { doc: Text } }) {
+				this.decorations = decorate(view.state.doc, language)
+			}
+
+			update(update: ViewUpdate) {
+				if (update.docChanged) this.decorations = decorate(update.state.doc, language)
+			}
+		},
+		{ decorations: (plugin) => plugin.decorations },
+	)
+}
diff --git a/packages/ui/src/utils/codemirror/languages.ts b/packages/ui/src/utils/codemirror/languages.ts
new file mode 100644
index 0000000000..c5677c8f06
--- /dev/null
+++ b/packages/ui/src/utils/codemirror/languages.ts
@@ -0,0 +1,67 @@
+import { type LanguageSupport, StreamLanguage, type StreamParser } from '@codemirror/language'
+
+type LanguageLoader = () => Promise<LanguageSupport | StreamLanguage<unknown>>
+
+/**
+ * A language from `@codemirror/legacy-modes`, whose parsers are typed by their own copy of
+ * CodeMirror's stream parser types, which only differ from this package's by name.
+ */
+function legacy(load: () => Promise<unknown>): LanguageLoader {
+	return async () => StreamLanguage.define((await load()) as StreamParser<unknown>)
+}
+
+const clike = () => import('@codemirror/legacy-modes/mode/clike')
+const xml = legacy(async () => (await import('@codemirror/legacy-modes/mode/xml')).xml)
+const shell = legacy(async () => (await import('@codemirror/legacy-modes/mode/shell')).shell)
+const properties = legacy(
+	async () => (await import('@codemirror/legacy-modes/mode/properties')).properties,
+)
+const toml = legacy(async () => (await import('@codemirror/legacy-modes/mode/toml')).toml)
+
+/**
+ * Each language an editor can highlight, loaded only once used. Keyed by the names files are given
+ * (see `getEditorLanguage`), which covers both the editor's own names and highlight.js's.
+ */
+const LANGUAGES: Record<string, LanguageLoader> = {
+	json: async () => (await import('@codemirror/lang-json')).json(),
+	javascript: async () => (await import('@codemirror/lang-javascript')).javascript(),
+	typescript: async () =>
+		(await import('@codemirror/lang-javascript')).javascript({ typescript: true }),
+	html: async () => (await import('@codemirror/lang-html')).html(),
+	css: async () => (await import('@codemirror/lang-css')).css(),
+	markdown: async () => (await import('@codemirror/lang-markdown')).markdown(),
+	yaml: async () => (await import('@codemirror/lang-yaml')).yaml(),
+	java: async () => (await import('@codemirror/lang-java')).java(),
+	kotlin: legacy(async () => (await clike()).kotlin),
+	scala: legacy(async () => (await clike()).scala),
+	c: legacy(async () => (await clike()).c),
+	cpp: legacy(async () => (await clike()).cpp),
+	c_cpp: legacy(async () => (await clike()).cpp),
+	groovy: legacy(async () => (await import('@codemirror/legacy-modes/mode/groovy')).groovy),
+	gradle: legacy(async () => (await import('@codemirror/legacy-modes/mode/groovy')).groovy),
+	rust: legacy(async () => (await import('@codemirror/legacy-modes/mode/rust')).rust),
+	go: legacy(async () => (await import('@codemirror/legacy-modes/mode/go')).go),
+	golang: legacy(async () => (await import('@codemirror/legacy-modes/mode/go')).go),
+	python: legacy(async () => (await import('@codemirror/legacy-modes/mode/python')).python),
+	ruby: legacy(async () => (await import('@codemirror/legacy-modes/mode/ruby')).ruby),
+	lua: legacy(async () => (await import('@codemirror/legacy-modes/mode/lua')).lua),
+	powershell: legacy(
+		async () => (await import('@codemirror/legacy-modes/mode/powershell')).powerShell,
+	),
+	dockerfile: legacy(
+		async () => (await import('@codemirror/legacy-modes/mode/dockerfile')).dockerFile,
+	),
+	xml,
+	sh: shell,
+	bash: shell,
+	toml,
+	ini: properties,
+	properties,
+	mclog: legacy(async () => (await import('./mode-mclog')).mclog),
+	mcfunction: legacy(async () => (await import('./mode-mcfunction')).mcfunction),
+}
+
+/** The highlighting for a language, or `null` when it's shown as plain text. */
+export async function loadCodeLanguage(name: string) {
+	return (await LANGUAGES[name]?.()) ?? null
+}
diff --git a/packages/ui/src/utils/codemirror/mode-mcfunction.ts b/packages/ui/src/utils/codemirror/mode-mcfunction.ts
new file mode 100644
index 0000000000..420e33c90d
--- /dev/null
+++ b/packages/ui/src/utils/codemirror/mode-mcfunction.ts
@@ -0,0 +1,38 @@
+import type { StreamParser } from '@codemirror/language'
+
+/** The parts of a command after its name, by the token each is shown as, tried in order. */
+const RULES: [RegExp, string][] = [
+	[/^"(?:\\.|[^"\\])*"/, 'string'],
+	[/^'(?:\\.|[^'\\])*'/, 'string'],
+	[/^\$\([a-zA-Z0-9_]+\)/, 'variableName'],
+	[/^@[apers]\b/i, 'atom'],
+	[/^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\b/i, 'atom'],
+	[/^#?[a-z0-9_.]+:[a-z0-9_./-]+/i, 'typeName'],
+	[/^run\s+\/?[a-z][a-z0-9_]*/i, 'keyword'],
+	[/^[~^]-?(?:\d*\.)?\d+/, 'number'],
+	[/^[~^]/, 'operator'],
+	[/^-?(?:\d*\.)?\d+[bdfils]?\b/i, 'number'],
+	[/^(?:\.\.|(?:true|false)\b)/i, 'atom'],
+]
+
+/** Minecraft function files (`.mcfunction`) and command history, one command per line. */
+export const mcfunction: StreamParser<null> = {
+	name: 'mcfunction',
+	token(stream) {
+		if (stream.sol()) {
+			stream.eatSpace()
+			if (stream.match(/^#(?![a-z0-9_.]+:)/i)) {
+				stream.skipToEnd()
+				return 'comment'
+			}
+			if (stream.match(/^\/?[a-z][a-z0-9_]*/i)) return 'keyword'
+		}
+		if (stream.eatSpace()) return null
+		for (const [pattern, token] of RULES) {
+			if (stream.match(pattern)) return token
+		}
+		if (!stream.eatWhile(/\w/)) stream.next()
+		return null
+	},
+	languageData: { commentTokens: { line: '#' } },
+}
diff --git a/packages/ui/src/utils/codemirror/mode-mclog.ts b/packages/ui/src/utils/codemirror/mode-mclog.ts
new file mode 100644
index 0000000000..9ec621fd1e
--- /dev/null
+++ b/packages/ui/src/utils/codemirror/mode-mclog.ts
@@ -0,0 +1,29 @@
+import type { StreamParser } from '@codemirror/language'
+
+const TIMESTAMP = /^\[\d\d:\d\d:\d\d\]/
+
+/** The parts of a log line after its timestamp, by the token each is shown as, tried in order. */
+const RULES: [RegExp, string][] = [
+	[/^\[[^\]]+?\/ERROR\]:?/, 'invalid'],
+	[/^\[[^\]]+?\/WARN\]:?/, 'keyword'],
+	[/^\[[^\]]+?\/INFO\]:/, 'string'],
+	[/^: \/.+/, 'meta'],
+	[/^\tat\s.+/, 'comment'],
+	[/^\w+?\[\/\d+?\.\d+?\.\d+?\.\d+?:\d+?\]/, 'variableName.function'],
+	[/^\[CHAT\]/, 'atom'],
+]
+
+/** Minecraft logs (`latest.log`), with their timestamps, levels, commands and stack traces. */
+export const mclog: StreamParser<null> = {
+	name: 'mclog',
+	token(stream) {
+		if (stream.sol() && stream.match(TIMESTAMP)) return 'comment'
+		for (const [pattern, token] of RULES) {
+			if (stream.match(pattern)) return token
+		}
+		if (stream.eatWhile(/\w/)) return null
+		stream.next()
+		stream.eatWhile(/[^[:\t\w]/)
+		return null
+	},
+}
diff --git a/packages/ui/src/utils/file-extensions.ts b/packages/ui/src/utils/file-extensions.ts
index 16e4022170..0b169dbcf4 100644
--- a/packages/ui/src/utils/file-extensions.ts
+++ b/packages/ui/src/utils/file-extensions.ts
@@ -1,4 +1,6 @@
 // File extension constants
+import { type FileTypeInfo, getFileTypeInfo, getLanguageFromFile } from '#ui/helpers/toolbox/file'
+
 export const FILE_CODE_EXTENSIONS = [
 	'json',
 	'json5',
@@ -41,6 +43,20 @@ export const FILE_IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'
 
 export const FILE_ARCHIVE_EXTENSIONS = ['zip', 'jar', 'tar', 'gz', 'rar', '7z'] as const
 
+export const FILE_VIDEO_EXTENSIONS = ['mp4', 'webm', 'ogv', 'mov', 'm4v'] as const
+
+/** `ogg` counts as audio, as games mostly use it for sounds. */
+export const FILE_AUDIO_EXTENSIONS = [
+	'mp3',
+	'ogg',
+	'oga',
+	'wav',
+	'flac',
+	'm4a',
+	'aac',
+	'opus',
+] as const
+
 // Type for extension strings
 export type CodeExtension = (typeof FILE_CODE_EXTENSIONS)[number]
 export type TextExtension = (typeof FILE_TEXT_EXTENSIONS)[number]
@@ -75,6 +91,27 @@ export function isImageFile(ext: string): boolean {
 	return (FILE_IMAGE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
 }
 
+/** Check if extension is a video file */
+export function isVideoFile(ext: string): boolean {
+	return (FILE_VIDEO_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+}
+
+/** Check if extension is an audio file */
+export function isAudioFile(ext: string): boolean {
+	return (FILE_AUDIO_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
+}
+
+/** How a file plays, from its type when known (e.g. detected from its contents) or else its name. */
+export function mediaKindOf(
+	filename: string,
+	fileInfo: FileTypeInfo | null = getFileTypeInfo(filename),
+): 'video' | 'audio' | null {
+	const ext = getFileExtension(filename)
+	if (isAudioFile(ext) || fileInfo?.mime.startsWith('audio/')) return 'audio'
+	if (isVideoFile(ext) || fileInfo?.mime.startsWith('video/')) return 'video'
+	return null
+}
+
 /**
  * Check if extension is an archive file
  */
@@ -90,18 +127,60 @@ export function isEditableFile(ext: string): boolean {
 }
 
 /**
- * Check if a file can be opened in the file editor
+ * Check if a file can be opened in the file editor, from its type when known (e.g. detected from
+ * its contents) or else from its name. A type detected from its contents as neither text, code nor
+ * an image can't be opened, whatever its extension suggests.
  */
-export function canOpenInFileEditor(filename: string): boolean {
+export function canOpenInFileEditor(
+	filename: string,
+	fileInfo: FileTypeInfo | null = getFileTypeInfo(filename),
+): boolean {
+	const lang = getLanguageFromFile(filename, fileInfo)
+	if (lang != null) return true
+	if (mediaKindOf(filename, fileInfo)) return true
+	if (fileInfo != null) {
+		if (fileInfo.mime.startsWith('text/') || isImageFile(fileInfo.extension ?? '')) {
+			return true
+		}
+		if (fileInfo.method === 'content-analysis') return false
+	}
 	const ext = getFileExtension(filename)
 	return !filename.includes('.') || isEditableFile(ext) || isImageFile(ext)
 }
 
+/** Check if a file can be opened in the file editor, detecting its type from its contents. */
+export async function canOpenDataInFileEditor(
+	filename: string,
+	data: ArrayBuffer | Blob,
+): Promise<boolean> {
+	return canOpenInFileEditor(filename, await getFileTypeInfo(filename, data))
+}
+
+/**
+ * Minecraft's own formats, which the editor highlights by modes of its own. They take precedence
+ * over the type a file is detected as, which only knows them as plain text.
+ */
+const MINECRAFT_EDITOR_LANGUAGES: Record<string, string> = {
+	log: 'mclog',
+	mcfunction: 'mcfunction',
+}
+
 /**
- * Get Ace editor language mode for a file extension
+ * Get the editor language mode for a file, from its type when known (e.g. detected from its
+ * contents) or else from its name.
  */
-export function getEditorLanguage(ext: string): string {
-	const lowered = ext.toLowerCase()
+export function getEditorLanguage(
+	filename: string,
+	fileInfo: FileTypeInfo | null = getFileTypeInfo(filename),
+): string {
+	const minecraftLanguage = MINECRAFT_EDITOR_LANGUAGES[getFileExtension(filename)]
+	if (minecraftLanguage) return minecraftLanguage
+
+	const language = getLanguageFromFile(filename, fileInfo)
+	if (language) return language
+
+	const lowered = getFileExtension(filename)
+
 	switch (lowered) {
 		// Code files
 		case 'json':
@@ -154,8 +233,6 @@ export function getEditorLanguage(ext: string): string {
 		case 'cfg':
 		case 'conf':
 			return 'ini'
-		case 'log':
-			return 'mclog'
 		default:
 			return 'text'
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd1c684424..d8c9b94aab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -313,9 +313,6 @@ importers:
       '@vueuse/core':
         specifier: ^11.1.0
         version: 11.3.0(vue@3.5.43(typescript@5.9.3))
-      ace-builds:
-        specifier: ^1.43.5
-        version: 1.43.6
       dayjs:
         specifier: ^1.11.10
         version: 1.11.19
@@ -352,9 +349,6 @@ importers:
       vue-virtual-scroller:
         specifier: v2.0.0-beta.8
         version: 2.0.0-beta.8(vue@3.5.43(typescript@5.9.3))
-      vue3-ace-editor:
-        specifier: ^2.2.4
-        version: 2.2.4(ace-builds@1.43.6)(vue@3.5.43(typescript@5.9.3))
       vuedraggable:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.5.43(typescript@5.9.3))
@@ -437,12 +431,18 @@ importers:
 
   apps/frontend:
     dependencies:
+      '@codemirror/autocomplete':
+        specifier: ^6.20.0
+        version: 6.20.0
       '@codemirror/commands':
         specifier: ^6.3.2
         version: 6.10.1
       '@codemirror/language':
         specifier: ^6.9.3
         version: 6.12.1
+      '@codemirror/state':
+        specifier: ^6.5.4
+        version: 6.5.4
       '@codemirror/view':
         specifier: ^6.22.1
         version: 6.39.12
@@ -497,9 +497,6 @@ importers:
       '@zip.js/zip.js':
         specifier: ^2.8.34
         version: 2.8.34
-      ace-builds:
-        specifier: ^1.36.2
-        version: 1.43.6
       ansi-to-html:
         specifier: ^0.7.2
         version: 0.7.2
@@ -566,9 +563,6 @@ importers:
       vue-typed-virtual-list:
         specifier: ^1.0.10
         version: 1.0.10(vue@3.5.43(typescript@5.9.3))
-      vue3-ace-editor:
-        specifier: ^2.2.4
-        version: 2.2.4(ace-builds@1.43.6)(vue@3.5.43(typescript@5.9.3))
       vue3-apexcharts:
         specifier: ^1.5.2
         version: 1.10.0(apexcharts@4.7.0)(vue@3.5.43(typescript@5.9.3))
@@ -811,15 +805,42 @@ importers:
 
   packages/ui:
     dependencies:
+      '@codemirror/autocomplete':
+        specifier: ^6.20.0
+        version: 6.20.0
       '@codemirror/commands':
         specifier: ^6.3.2
         version: 6.10.1
+      '@codemirror/lang-css':
+        specifier: ^6.3.1
+        version: 6.3.1
+      '@codemirror/lang-html':
+        specifier: ^6.4.11
+        version: 6.4.11
+      '@codemirror/lang-java':
+        specifier: ^6.0.2
+        version: 6.0.2
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.4
+        version: 6.2.4
+      '@codemirror/lang-json':
+        specifier: ^6.0.2
+        version: 6.0.2
       '@codemirror/lang-markdown':
         specifier: ^6.2.3
         version: 6.5.0
+      '@codemirror/lang-yaml':
+        specifier: ^6.1.3
+        version: 6.1.3
       '@codemirror/language':
         specifier: ^6.9.3
         version: 6.12.1
+      '@codemirror/legacy-modes':
+        specifier: ^6.5.5
+        version: 6.5.5
+      '@codemirror/search':
+        specifier: ^6.7.2
+        version: 6.7.2
       '@codemirror/state':
         specifier: ^6.3.2
         version: 6.5.4
@@ -832,6 +853,9 @@ importers:
       '@intercom/messenger-js-sdk':
         specifier: ^0.0.14
         version: 0.0.14
+      '@lezer/highlight':
+        specifier: ^1.2.3
+        version: 1.2.3
       '@modrinth/api-client':
         specifier: workspace:*
         version: link:../api-client
@@ -844,6 +868,15 @@ importers:
       '@modrinth/utils':
         specifier: workspace:*
         version: link:../utils
+      '@run-slicer/cfr':
+        specifier: 0.1.8-0.152
+        version: 0.1.8-0.152
+      '@run-slicer/procyon':
+        specifier: 0.1.2-0.6.0
+        version: 0.1.2-0.6.0
+      '@run-slicer/vf':
+        specifier: 0.6.4-1.12.0
+        version: 0.6.4-1.12.0
       '@tanstack/vue-query':
         specifier: 5.101.4
         version: 5.101.4(vue@3.5.43(typescript@5.9.3))
@@ -880,9 +913,9 @@ importers:
       '@xterm/xterm':
         specifier: ^6.0.0
         version: 6.0.0
-      ace-builds:
-        specifier: ^1.43.5
-        version: 1.43.6
+      '@zip.js/zip.js':
+        specifier: ^2.8.34
+        version: 2.8.34
       apexcharts:
         specifier: ^4.0.0
         version: 4.7.0
@@ -907,6 +940,9 @@ importers:
       fabric:
         specifier: ^7.4.0
         version: 7.4.0(supports-color@10.2.2)
+      file-type:
+        specifier: ^22.1.1
+        version: 22.1.1(supports-color@10.2.2)
       flatpickr:
         specifier: ^4.6.13
         version: 4.6.13
@@ -931,6 +967,9 @@ importers:
       markdown-it:
         specifier: ^13.0.2
         version: 13.0.2
+      mime:
+        specifier: ^4.1.0
+        version: 4.1.0
       motion-v:
         specifier: ^2.2.1
         version: 2.2.1(@vueuse/core@11.3.0(vue@3.5.43(typescript@5.9.3)))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vue@3.5.43(typescript@5.9.3))
@@ -946,9 +985,15 @@ importers:
       qrcode.vue:
         specifier: ^3.4.1
         version: 3.8.0(vue@3.5.43(typescript@5.9.3))
+      smol-toml:
+        specifier: ^1.9.0
+        version: 1.9.1
       three:
         specifier: ^0.172.0
         version: 0.172.0
+      uuid:
+        specifier: ^14.0.2
+        version: 14.0.3
       vue-i18n:
         specifier: ^10.0.0
         version: 10.0.8(vue@3.5.43(typescript@5.9.3))
@@ -958,9 +1003,6 @@ importers:
       vue-typed-virtual-list:
         specifier: ^1.0.10
         version: 1.0.10(vue@3.5.43(typescript@5.9.3))
-      vue3-ace-editor:
-        specifier: ^2.2.4
-        version: 2.2.4(ace-builds@1.43.6)(vue@3.5.43(typescript@5.9.3))
       vue3-apexcharts:
         specifier: ^1.5.2
         version: 1.10.0(apexcharts@4.7.0)(vue@3.5.43(typescript@5.9.3))
@@ -992,6 +1034,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))
+      '@types/js-yaml':
+        specifier: ^4.0.9
+        version: 4.0.9
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
         version: 5.2.4(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.43(typescript@5.9.3))
@@ -1324,6 +1369,9 @@ packages:
       commander:
         optional: true
 
+  '@borewit/text-codec@0.2.2':
+    resolution: {integrity: sha512-DDaRehssg1aNrH4+2hnj1B7vnUGEjU6OIlyRdkMd0aUdIUvKXrJfXsy8LVtXAy7DRvYVluWbMspsRhz2lcW0mQ==}
+
   '@capsizecss/unpack@4.0.0':
     resolution: {integrity: sha512-VERIM64vtTP1C4mxQ5thVT9fK0apjPFobqybMtA1UdUujWka24ERHbRHFGmpbbhp73MhV+KSsHQH9C6uOTdEQA==}
     engines: {node: '>=18'}
@@ -1401,21 +1449,39 @@ packages:
   '@codemirror/lang-html@6.4.11':
     resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
 
+  '@codemirror/lang-java@6.0.2':
+    resolution: {integrity: sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==}
+
   '@codemirror/lang-javascript@6.2.4':
     resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
 
+  '@codemirror/lang-json@6.0.2':
+    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
+
   '@codemirror/lang-markdown@6.5.0':
     resolution: {integrity: sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==}
 
+  '@codemirror/lang-yaml@6.1.3':
+    resolution: {integrity: sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==}
+
   '@codemirror/language@6.12.1':
     resolution: {integrity: sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==}
 
+  '@codemirror/legacy-modes@6.5.5':
+    resolution: {integrity: sha512-9ltT214oMb3Y1w5eAZMSigzrjzZnMI2Wa3Feq73rU/i4C56MkwrpfswfQYOr28C5pXr6dWwspNTMyeHXlzWMxg==}
+
   '@codemirror/lint@6.9.3':
     resolution: {integrity: sha512-y3YkYhdnhjDBAe0VIA0c4wVoFOvnp8CnAvfLqi0TqotIv92wIlAAP7HELOpLBsKwjAX6W92rSflA6an/2zBvXw==}
 
+  '@codemirror/search@6.7.2':
+    resolution: {integrity: sha512-gUYkYhT2+n/+VGZ+8EzE5WFkYZUZYm1VOKDudIsNqh42uRVQJ0a6Yss9sdKT3MeOYfuL1N6AZA57oza0Oyr0LA==}
+
   '@codemirror/state@6.5.4':
     resolution: {integrity: sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==}
 
+  '@codemirror/streamparser@6.0.0':
+    resolution: {integrity: sha512-JTFPF6xrfjt0mnfGPgzcLiMwYmvIyNaoizp8BYzv8FE8KrT6GBGDZ190rtt+O7Wke3gG/MFHyiY9YGNeimof4w==}
+
   '@codemirror/view@6.39.12':
     resolution: {integrity: sha512-f+/VsHVn/kOA9lltk/GFzuYwVVAKmOnNjxbrhkk3tPHntFqjWeI2TbIXx006YkBkqC10wZ4NsnWXCQiFPeAISQ==}
 
@@ -2808,15 +2874,24 @@ packages:
   '@lezer/html@1.3.13':
     resolution: {integrity: sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==}
 
+  '@lezer/java@1.1.5':
+    resolution: {integrity: sha512-JppTd1iKHpeNlLYw/Zl8JX7zSY5HqAzK4zZ05lpn8l8Sk7Fo5KAKiDiMiezKoT5lfeC2xZf8HeKp1tSctj4G6Q==}
+
   '@lezer/javascript@1.5.4':
     resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
 
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
   '@lezer/lr@1.4.8':
     resolution: {integrity: sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==}
 
   '@lezer/markdown@1.6.3':
     resolution: {integrity: sha512-jpGm5Ps+XErS+xA4urw7ogEGkeZOahVQF21Z6oECF0sj+2liwZopd2+I8uH5I/vZsRuuze3OxBREIANLf6KKUw==}
 
+  '@lezer/yaml@1.0.4':
+    resolution: {integrity: sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==}
+
   '@ltd/j-toml@1.38.0':
     resolution: {integrity: sha512-lYtBcmvHustHQtg4X7TXUu1Xa/tbLC3p2wLvgQI+fWVySguVZJF60Snxijw5EiohumxZbR10kWYFFebh1zotiw==}
 
@@ -3871,6 +3946,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@run-slicer/cfr@0.1.8-0.152':
+    resolution: {integrity: sha512-FN5I41CF0QcscV5HCcbq5iJHqIueNtROvLtfXohNt9pNJUxo2WFncg0a7jPinRjBi7VgNxjJmWE7sP++vYVFRw==}
+
+  '@run-slicer/procyon@0.1.2-0.6.0':
+    resolution: {integrity: sha512-xPra0FuATHnjLYLXFUlmRYkfmIukCrl5Zv6iM8ajSTYFDgK85HVNpBAo23NQbp+cMU6QpvOEviwE8nRwGuS07Q==}
+
+  '@run-slicer/vf@0.6.4-1.12.0':
+    resolution: {integrity: sha512-fKKqDHVCOKed3jcbrX4aA9Za7YY+/7tq2tVlkbSPQ9NVMaGeBhqyRE/gnLc30ZJ3zKP/UYIh69FaUkrF/dmLuQ==}
+
   '@rushstack/node-core-library@5.23.1':
     resolution: {integrity: sha512-wlKmIKIYCKuCASbITvOxLZXepPbwXvrv7S6ig6XNWFchSyhL/E2txmVXspHY49Wu2dzf7nI27a2k/yV5BA3EiA==}
     peerDependencies:
@@ -4327,6 +4411,13 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@tokenizer/inflate@0.4.1':
+    resolution: {integrity: sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA==}
+    engines: {node: '>=18'}
+
+  '@tokenizer/token@0.3.0':
+    resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
+
   '@tresjs/cientos@4.3.1':
     resolution: {integrity: sha512-3qp6lEtMrFdhxDuASP1Sz/hEi8+xcEpM6Vd6uDJysCh4uRAzyJLlBSbPoR7gVjN12wrhwJIF1AfYEFz/Vhz5ZQ==}
     peerDependencies:
@@ -5090,9 +5181,6 @@ packages:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
 
-  ace-builds@1.43.6:
-    resolution: {integrity: sha512-L1ddibQ7F3vyXR2k2fg+I8TQTPWVA6CKeDQr/h2+8CeyTp3W6EQL8xNFZRTztuP8xNOAqL3IYPqdzs31GCjDvg==}
-
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
@@ -6448,6 +6536,10 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
+  file-type@22.1.1:
+    resolution: {integrity: sha512-sEB0oStmeLGtpmSAD88RDNuLsvhv4iC3u0lE25CUvfCULvj49xoQ3l3K525Vn+ZzsZ6DOLajQCV6RmhwwhqiJg==}
+    engines: {node: '>=22'}
+
   file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
 
@@ -8795,9 +8887,6 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  resize-observer-polyfill@1.5.1:
-    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -9055,6 +9144,10 @@ packages:
     resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
     engines: {node: '>= 18'}
 
+  smol-toml@1.9.1:
+    resolution: {integrity: sha512-j7WyPdf0CJoutMzMoPLF/bVXHtKZIT9Rb4eGeEbWw8X2t5oirjPgpL+OpaENZrILYaXqYwnVH+qgUwVbl+pUJQ==}
+    engines: {node: '>= 18'}
+
   sortablejs@1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
 
@@ -9230,6 +9323,10 @@ packages:
       '@types/node':
         optional: true
 
+  strtok3@10.3.5:
+    resolution: {integrity: sha512-ki4hZQfh5rX0QDLLkOCj+h+CVNkqmp/CMf8v8kZpkNVK6jGQooMytqzLZYUVYIZcFZ6yDB70EfD8POcFXiF5oA==}
+    engines: {node: '>=18'}
+
   structured-clone-es@2.0.1:
     resolution: {integrity: sha512-10ZL5r77LhknxlP1FBiCW+VdnuWOEFLdSS2SKtjyEV+L4qP1hUEIMIZW94LC3jKxRmT/Dj7KkD1mqh/IY6lhKQ==}
 
@@ -9412,6 +9509,10 @@ packages:
   token-stream@1.0.0:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
 
+  token-types@6.1.2:
+    resolution: {integrity: sha512-dRXchy+C0IgK8WPC6xvCHFRIWYUbqqdEIKPaKo/AcTUNzwLTK6AH7RjdLWsEZcAN/TBdtfUw3PYEgPr5VPr6ww==}
+    engines: {node: '>=14.16'}
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -9535,6 +9636,10 @@ packages:
   ufo@1.6.4:
     resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
 
+  uint8array-extras@1.6.0:
+    resolution: {integrity: sha512-8iAasVS4wUx0gPLjH8Xtz2PeDzTSiy8QiLGu2DT3X5GU+egFEQhpnbtkehbAwjvDcxIERmCYcysiODFmE3Ud0Q==}
+    engines: {node: '>=18'}
+
   ultrahtml@1.6.0:
     resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
 
@@ -9893,6 +9998,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@14.0.3:
+    resolution: {integrity: sha512-Sc5u1VVln93y1Xnz4R+CunOZc7R9LUcTmhj7Rc7Eg3HVcf7rVn2FOoa812fe0W8p3jD7xeoGSYbfqCGGH2B6xw==}
+    hasBin: true
+
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -10348,12 +10457,6 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
-  vue3-ace-editor@2.2.4:
-    resolution: {integrity: sha512-FZkEyfpbH068BwjhMyNROxfEI8135Sc+x8ouxkMdCNkuj/Tuw83VP/gStFQqZHqljyX9/VfMTCdTqtOnJZGN8g==}
-    peerDependencies:
-      ace-builds: '*'
-      vue: ^3
-
   vue3-apexcharts@1.10.0:
     resolution: {integrity: sha512-sBma2In4rU5n/JBrv8KVb8if+IoY019Dse2yRDD/eRU1WGZHK07zuy9erefKzbJ7T3wP9+Jsy9bH6Vdjy85HZg==}
     peerDependencies:
@@ -11000,6 +11103,8 @@ snapshots:
       cac: 6.7.14
       citty: 0.2.2
 
+  '@borewit/text-codec@0.2.2': {}
+
   '@capsizecss/unpack@4.0.0':
     dependencies:
       fontkitten: 1.0.2
@@ -11084,6 +11189,11 @@ snapshots:
       '@lezer/css': 1.3.0
       '@lezer/html': 1.3.13
 
+  '@codemirror/lang-java@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@lezer/java': 1.1.5
+
   '@codemirror/lang-javascript@6.2.4':
     dependencies:
       '@codemirror/autocomplete': 6.20.0
@@ -11094,6 +11204,11 @@ snapshots:
       '@lezer/common': 1.5.0
       '@lezer/javascript': 1.5.4
 
+  '@codemirror/lang-json@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.12.1
+      '@lezer/json': 1.0.3
+
   '@codemirror/lang-markdown@6.5.0':
     dependencies:
       '@codemirror/autocomplete': 6.20.0
@@ -11104,6 +11219,16 @@ snapshots:
       '@lezer/common': 1.5.0
       '@lezer/markdown': 1.6.3
 
+  '@codemirror/lang-yaml@6.1.3':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/language': 6.12.1
+      '@codemirror/state': 6.5.4
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+      '@lezer/yaml': 1.0.4
+
   '@codemirror/language@6.12.1':
     dependencies:
       '@codemirror/state': 6.5.4
@@ -11113,16 +11238,28 @@ snapshots:
       '@lezer/lr': 1.4.8
       style-mod: 4.1.3
 
+  '@codemirror/legacy-modes@6.5.5':
+    dependencies:
+      '@codemirror/streamparser': 6.0.0
+
   '@codemirror/lint@6.9.3':
     dependencies:
       '@codemirror/state': 6.5.4
       '@codemirror/view': 6.39.12
       crelt: 1.0.6
 
+  '@codemirror/search@6.7.2':
+    dependencies:
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.12
+      crelt: 1.0.6
+
   '@codemirror/state@6.5.4':
     dependencies:
       '@marijn/find-cluster-break': 1.0.2
 
+  '@codemirror/streamparser@6.0.0': {}
+
   '@codemirror/view@6.39.12':
     dependencies:
       '@codemirror/state': 6.5.4
@@ -12158,12 +12295,24 @@ snapshots:
       '@lezer/highlight': 1.2.3
       '@lezer/lr': 1.4.8
 
+  '@lezer/java@1.1.5':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
   '@lezer/javascript@1.5.4':
     dependencies:
       '@lezer/common': 1.5.0
       '@lezer/highlight': 1.2.3
       '@lezer/lr': 1.4.8
 
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
   '@lezer/lr@1.4.8':
     dependencies:
       '@lezer/common': 1.5.0
@@ -12173,6 +12322,12 @@ snapshots:
       '@lezer/common': 1.5.0
       '@lezer/highlight': 1.2.3
 
+  '@lezer/yaml@1.0.4':
+    dependencies:
+      '@lezer/common': 1.5.0
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
   '@ltd/j-toml@1.38.0': {}
 
   '@mapbox/node-pre-gyp@2.0.3(supports-color@10.2.2)':
@@ -13261,6 +13416,12 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.63.6':
     optional: true
 
+  '@run-slicer/cfr@0.1.8-0.152': {}
+
+  '@run-slicer/procyon@0.1.2-0.6.0': {}
+
+  '@run-slicer/vf@0.6.4-1.12.0': {}
+
   '@rushstack/node-core-library@5.23.1(@types/node@24.12.2)':
     dependencies:
       ajv: 8.18.0
@@ -13723,6 +13884,15 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
+  '@tokenizer/inflate@0.4.1(supports-color@10.2.2)':
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+      token-types: 6.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tokenizer/token@0.3.0': {}
+
   '@tresjs/cientos@4.3.1(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.43(typescript@5.9.3)))(@types/three@0.172.0)(react@19.2.8)(three@0.172.0)(typescript@5.9.3)(vue@3.5.43(typescript@5.9.3))':
     dependencies:
       '@tresjs/core': 4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.43(typescript@5.9.3))
@@ -14676,8 +14846,6 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
-  ace-builds@1.43.6: {}
-
   acorn-import-attributes@1.9.5(acorn@8.18.0):
     dependencies:
       acorn: 8.18.0
@@ -16392,6 +16560,15 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
+  file-type@22.1.1(supports-color@10.2.2):
+    dependencies:
+      '@tokenizer/inflate': 0.4.1(supports-color@10.2.2)
+      strtok3: 10.3.5
+      token-types: 6.1.2
+      uint8array-extras: 1.6.0
+    transitivePeerDependencies:
+      - supports-color
+
   file-uri-to-path@1.0.0: {}
 
   fill-range@7.1.1:
@@ -19409,8 +19586,6 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
-  resize-observer-polyfill@1.5.1: {}
-
   resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
@@ -19849,6 +20024,8 @@ snapshots:
 
   smol-toml@1.6.0: {}
 
+  smol-toml@1.9.1: {}
+
   sortablejs@1.14.0: {}
 
   source-map-js@1.2.1: {}
@@ -20028,6 +20205,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.12.2
 
+  strtok3@10.3.5:
+    dependencies:
+      '@tokenizer/token': 0.3.0
+
   structured-clone-es@2.0.1: {}
 
   style-mod@4.1.3: {}
@@ -20261,6 +20442,12 @@ snapshots:
 
   token-stream@1.0.0: {}
 
+  token-types@6.1.2:
+    dependencies:
+      '@borewit/text-codec': 0.2.2
+      '@tokenizer/token': 0.3.0
+      ieee754: 1.2.1
+
   totalist@3.0.1: {}
 
   tough-cookie@5.1.2:
@@ -20358,6 +20545,8 @@ snapshots:
 
   ufo@1.6.4: {}
 
+  uint8array-extras@1.6.0: {}
+
   ultrahtml@1.6.0: {}
 
   ultrahtml@1.7.0: {}
@@ -20667,6 +20856,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@14.0.3: {}
+
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
@@ -21096,12 +21287,6 @@ snapshots:
       vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.43(typescript@5.9.3))
       vue-resize: 2.0.0-alpha.1(vue@3.5.43(typescript@5.9.3))
 
-  vue3-ace-editor@2.2.4(ace-builds@1.43.6)(vue@3.5.43(typescript@5.9.3)):
-    dependencies:
-      ace-builds: 1.43.6
-      resize-observer-polyfill: 1.5.1
-      vue: 3.5.43(typescript@5.9.3)
-
   vue3-apexcharts@1.10.0(apexcharts@4.7.0)(vue@3.5.43(typescript@5.9.3)):
     dependencies:
       apexcharts: 4.7.0