diff --git a/apps/frontend/src/components/project-review/index.vue b/apps/frontend/src/components/project-review/index.vue
index a28cf5962d3..eb234d9b0a1 100644
--- a/apps/frontend/src/components/project-review/index.vue
+++ b/apps/frontend/src/components/project-review/index.vue
@@ -1,5 +1,31 @@
 <template>
 	<ClientOnly>
+		<DefineReviewConversation>
+			<section class="flex min-h-0 min-w-0 flex-1 flex-col [&_.cm-editor]:text-xs">
+				<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 />
+		</DefineReviewConversation>
 		<NewModal
 			ref="resetIssuesModal"
 			header="Reset all issues"
@@ -42,38 +68,23 @@
 				</div>
 			</template>
 		</NewModal>
-		<ProjectReviewLayout :tabs="visibleTabs" :reset-key="selection" :ready="layoutReady">
+		<ProjectReviewLayout
+			:class="{ invisible: openingProject }"
+			:inert="openingProject"
+			:aria-hidden="openingProject || undefined"
+			:tabs="visibleTabs"
+			:reset-key="selection"
+			:ready="layoutReady"
+		>
 			<template #left><ProjectInfo /></template>
 			<template #right>
 				<div
+					v-if="!techReviewMode"
 					:key="projectId"
 					class="flex h-full min-h-0 min-w-0 flex-col gap-2.5 [&_.cm-editor]:text-xs"
 				>
 					<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 />
+					<ReviewConversation />
 				</div>
 			</template>
 			<template #footer><QueueBar /></template>
@@ -82,7 +93,15 @@
 			<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 #tech-review>
+				<TechReview
+					:key="projectId"
+					@add-code="addCodeToMessage"
+					@ready="techReviewReadyProject = $event"
+				>
+					<template v-if="techReviewMode" #conversation><ReviewConversation /></template>
+				</TechReview>
+			</template>
 			<template #slicer><Slicer :key="projectId" /></template>
 		</ProjectReviewLayout>
 		<template #fallback>
@@ -94,7 +113,8 @@
 <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 { Button, formatCodeBlock, injectLoadingState, NewModal, Tabs, Tooltip } from '@modrinth/ui'
+import { createReusableTemplate } from '@vueuse/core'
 import { computed, onScopeDispose, ref, watch } from 'vue'
 
 import {
@@ -144,6 +164,8 @@ import Slicer from './slicer/index.vue'
 import TechReview from './tech-review/index.vue'
 import Versions from './versions/index.vue'
 
+const [DefineReviewConversation, ReviewConversation] = createReusableTemplate()
+
 const shortcuts = provideReviewShortcuts(createReviewShortcuts())
 function useShortcut(...args: Parameters<typeof shortcuts.register>) {
 	onScopeDispose(shortcuts.register(...args))
@@ -164,6 +186,8 @@ const {
 	permissions,
 	selection,
 	isLoading,
+	initialLoading,
+	error,
 	navigation,
 } = injectProjectReviewPageContext()
 const layoutReady = computed(() => !!project.value && !isLoading.value && !navigation.busy.value)
@@ -231,9 +255,50 @@ const issueCount = computed(() => {
 const reviewContext = provideReviewContext(
 	createReviewContext(reviewProjectId, (target) => !!panels.resolve(target), shortcuts),
 )
-const { pending, loadingAction } = provideReviewSubmission(
+const { draft, pending, loadingAction, techReviewMode } = provideReviewSubmission(
 	createReviewSubmission(messages, panels, session, previousIssues),
 )
+const techReviewReadyProject = ref<string>()
+const loadedSelection = ref<string>()
+const openingProject = computed(
+	() => !!selection.value && loadedSelection.value !== selection.value,
+)
+watch(
+	selection,
+	() => {
+		loadedSelection.value = undefined
+	},
+	{ flush: 'sync' },
+)
+watch(
+	projectId,
+	() => {
+		techReviewReadyProject.value = undefined
+	},
+	{ flush: 'sync' },
+)
+watch(
+	[
+		selection,
+		initialLoading,
+		layoutReady,
+		error,
+		navigation.busy,
+		techReviewMode,
+		techReviewReadyProject,
+	],
+	() => {
+		if (initialLoading.value || navigation.busy.value) return
+		if (
+			!error.value &&
+			(!layoutReady.value ||
+				(techReviewMode.value && techReviewReadyProject.value !== projectId.value))
+		)
+			return
+		loadedSelection.value = selection.value
+	},
+	{ immediate: true, flush: 'post' },
+)
 const { resetting, resetIssues } = useReReviewIssues(
 	{ project, threadQuery },
 	session,
@@ -243,6 +308,7 @@ const { resetting, resetIssues } = useReReviewIssues(
 const loadingState = injectLoadingState()
 watch(
 	() =>
+		openingProject.value ||
 		isLoading.value ||
 		navigation.busy.value ||
 		(loadingAction.value !== undefined &&
@@ -273,6 +339,14 @@ const messageThread = ref<InstanceType<typeof MessageThread>>()
 const auth = useAuthState()
 const keybinds = useModerationKeybinds()
 
+async function addCodeToMessage(code: string) {
+	if (pending.value) return
+	const separator = draft.value.length ? (draft.value.endsWith('\n') ? '\n' : '\n\n') : ''
+	draft.value += separator + formatCodeBlock(code, 'java')
+	activeReviewTab.value = 'thread'
+	await messageThread.value?.openEditor(true)
+}
+
 function resetAllIssues() {
 	resetIssuesModal.value?.hide()
 	void resetIssues()
@@ -315,7 +389,7 @@ 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')
+	shortcuts.run('reveal-conversation')
 })
 useShortcut(
 	'new-issue',
@@ -333,7 +407,7 @@ useShortcut(
 	're-review',
 	() => {
 		void reviewContext.revealPanel('re-review')
-		shortcuts.run('reveal-right')
+		shortcuts.run('reveal-conversation')
 	},
 	() =>
 		hasPreviousStructuredIssues.value || !!panels.resolve({ kind: 'panel', key: 're-review-misc' }),
diff --git a/apps/frontend/src/components/project-review/issue-list/issue-picker.vue b/apps/frontend/src/components/project-review/issue-list/issue-picker.vue
index d54866c0c54..c7bb1aef0fb 100644
--- a/apps/frontend/src/components/project-review/issue-list/issue-picker.vue
+++ b/apps/frontend/src/components/project-review/issue-list/issue-picker.vue
@@ -46,7 +46,7 @@ import { injectReviewShortcuts } from '../shortcuts'
 const emit = defineEmits<{ selected: [] }>()
 const panels = injectReviewPanels()
 const reviewMessages = injectReviewMessages()
-const { pending } = injectReviewSubmission()
+const { pending, techReviewMode } = injectReviewSubmission()
 
 const selected = computed(() => panels.activeIssues.value.map(({ id }) => id))
 const picker = ref<{ close: () => void; open: () => Promise<void> }>()
@@ -64,7 +64,9 @@ const options = computed<MultiSelectItem<string>[]>(() => {
 		categories.set(issue.category, group)
 	}
 	const orderedCategories = [...categories].sort(
-		([a], [b]) => Number(b === 'Project wide') - Number(a === 'Project wide'),
+		([a], [b]) =>
+			(techReviewMode.value ? Number(b === 'Tech review') - Number(a === 'Tech review') : 0) ||
+			Number(b === 'Project wide') - Number(a === 'Project wide'),
 	)
 	for (const [category, issues] of orderedCategories) {
 		items.push({
@@ -129,7 +131,7 @@ watch(selected, (value) => {
 })
 async function openPicker() {
 	if (pending.value) return
-	shortcuts.run('reveal-right')
+	shortcuts.run('reveal-conversation')
 	await picker.value?.open()
 }
 defineExpose({ openPicker })
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
index a72369412a7..f794203639f 100644
--- a/apps/frontend/src/components/project-review/layout/controls/sidebar-control.vue
+++ b/apps/frontend/src/components/project-review/layout/controls/sidebar-control.vue
@@ -1,5 +1,8 @@
 <template>
-	<div v-if="params.group.id === cornerGroupId" class="flex h-full items-center">
+	<div
+		v-if="params.group.id === cornerGroupId && (side !== 'right' || rightEnabled)"
+		class="flex h-full items-center"
+	>
 		<IconButton
 			type="quiet"
 			size="sm"
@@ -33,7 +36,7 @@ const props = defineProps<{
 	params: IDockviewHeaderActionsProps
 }>()
 
-const { leftVisible, rightVisible, topLeftGroupId, topRightGroupId, toggleSidebar } =
+const { leftVisible, rightVisible, rightEnabled, topLeftGroupId, topRightGroupId, toggleSidebar } =
 	injectProjectReviewContext()
 const visible = computed(() => (props.side === 'left' ? leftVisible.value : rightVisible.value))
 const icon = computed(() => {
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 de13b833a4d..56d8b5bda58 100644
--- a/apps/frontend/src/components/project-review/layout/index.client.vue
+++ b/apps/frontend/src/components/project-review/layout/index.client.vue
@@ -23,6 +23,7 @@ import 'dockview-vue/dist/styles/dockview.css'
 import { onScopeDispose, watch, watchEffect } from 'vue'
 
 import { useModerationKeybinds } from '~/composables/moderation'
+import { injectReviewSubmission } from '~/providers/project-review/review-submission'
 
 import { injectReviewContext } from '../review-panel/context'
 import { reviewShortcutBlocked, useReviewEventListener, useReviewShortcut } from '../shortcuts'
@@ -80,8 +81,20 @@ watch(
 provideProjectReviewContext({ ...layout, slots })
 
 useReviewShortcut('toggle-left', () => layout.toggleSidebar('left'))
-useReviewShortcut('toggle-right', () => layout.toggleSidebar('right'))
-useReviewShortcut('reveal-right', () => layout.revealSlot('right'))
+useReviewShortcut(
+	'toggle-right',
+	() => layout.toggleSidebar('right'),
+	() => layout.rightEnabled.value,
+)
+useReviewShortcut(
+	'reveal-right',
+	() => layout.revealSlot('right'),
+	() => layout.rightEnabled.value,
+)
+const { techReviewMode } = injectReviewSubmission()
+useReviewShortcut('reveal-conversation', () =>
+	layout.revealSlot(techReviewMode.value ? 'tech-review' : 'right'),
+)
 
 const keybinds = useModerationKeybinds()
 useReviewEventListener('keydown', (event) => {
diff --git a/apps/frontend/src/components/project-review/layout/layout-storage.ts b/apps/frontend/src/components/project-review/layout/layout-storage.ts
index 5c31f4e75ec..50fec0f0474 100644
--- a/apps/frontend/src/components/project-review/layout/layout-storage.ts
+++ b/apps/frontend/src/components/project-review/layout/layout-storage.ts
@@ -11,15 +11,50 @@ export const workspacePanelSizes = {
 	center: { minimum: 20 },
 } as const
 
-export interface SavedWorkspaceLayout {
+export interface SavedWorkspacePanels {
 	leftWidth: number
 	rightWidth: number
 	leftVisible: boolean
 	rightVisible: boolean
+}
+
+export interface SavedWorkspaceLayout extends SavedWorkspacePanels {
 	tabs: SerializedDockview
 	tabLayouts?: Record<string, SerializedDockview>
 }
 
+export function readWorkspacePanels(): SavedWorkspacePanels | undefined {
+	try {
+		const saved = 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'
+		) {
+			return {
+				leftWidth: saved.leftWidth,
+				rightWidth: saved.rightWidth,
+				leftVisible: saved.leftVisible,
+				rightVisible: saved.rightVisible,
+			}
+		}
+	} catch {
+		return
+	}
+}
+
+export function saveWorkspacePanels(panels: SavedWorkspacePanels) {
+	try {
+		const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? 'null')
+		localStorage.setItem(STORAGE_KEY, JSON.stringify({ ...saved, ...panels }))
+	} catch {
+		// no-op
+	}
+}
+
 export function workspaceTabLayoutKey(tabs: readonly ProjectReviewTab[]) {
 	return projectReviewTabs.filter((tab) => tabs.includes(tab)).join(',')
 }
diff --git a/apps/frontend/src/components/project-review/layout/panel.vue b/apps/frontend/src/components/project-review/layout/panel.vue
index 115dfb1694b..15d36443bbf 100644
--- a/apps/frontend/src/components/project-review/layout/panel.vue
+++ b/apps/frontend/src/components/project-review/layout/panel.vue
@@ -1,16 +1,18 @@
 <template>
 	<section
-		class="layout-panel h-full p-3"
+		class="layout-panel review-scrollbars h-full p-3"
 		:class="
 			slotName === 'right' ||
 			slotName === 'disclosures' ||
 			slotName === 'permissions' ||
 			slotName === 'gallery' ||
-			slotName === 'slicer'
+			slotName === 'slicer' ||
+			slotName === 'tech-review'
 				? 'overflow-hidden'
 				: 'overflow-auto'
 		"
 		:inert="panelHidden"
+		:data-scrollbars-inactive="!panelVisible || panelHidden || !content || undefined"
 		:aria-label="reviewPanelLabels[slotName]"
 	>
 		<component :is="content" v-if="content" />
@@ -63,40 +65,63 @@ const panelHidden = computed(
 </script>
 
 <style scoped>
-@property --layout-panel-scrollbar-color {
+@property --review-scrollbar-color {
 	syntax: '<color>';
 	inherits: true;
 	initial-value: transparent;
 }
 
-.layout-panel {
-	--layout-panel-scrollbar-color: transparent;
-	transition: --layout-panel-scrollbar-color 1750ms ease;
+.review-scrollbars {
+	--review-scrollbar-color: transparent;
+	--overlay-scrollbar-color: var(--review-scrollbar-color);
+	transition: --review-scrollbar-color 1750ms ease;
 }
 
-.layout-panel:hover {
-	--layout-panel-scrollbar-color: var(--color-scrollbar);
+.review-scrollbars:hover {
+	--review-scrollbar-color: var(--color-scrollbar);
 	transition-duration: 200ms;
 }
 
-.layout-panel,
-.layout-panel :deep(*) {
-	scrollbar-color: var(--layout-panel-scrollbar-color) transparent;
+.review-scrollbars,
+.review-scrollbars :deep(*) {
+	scrollbar-color: var(--review-scrollbar-color) transparent;
 }
 
-.layout-panel::-webkit-scrollbar-thumb,
-.layout-panel :deep(*::-webkit-scrollbar-thumb) {
-	background: var(--layout-panel-scrollbar-color);
+.review-scrollbars::-webkit-scrollbar-thumb,
+.review-scrollbars :deep(*::-webkit-scrollbar-thumb) {
+	background: var(--review-scrollbar-color);
+}
+
+.layout-panel[data-scrollbars-inactive],
+.layout-panel[data-scrollbars-inactive] :deep(.review-scrollbars) {
+	--review-scrollbar-color: transparent !important;
+	--overlay-scrollbar-color: transparent !important;
+	transition: none !important;
+}
+
+.layout-panel[data-scrollbars-inactive],
+.layout-panel[data-scrollbars-inactive] :deep(*) {
+	scrollbar-color: transparent transparent !important;
+}
+
+.layout-panel[data-scrollbars-inactive]::-webkit-scrollbar-thumb,
+.layout-panel[data-scrollbars-inactive] :deep(*::-webkit-scrollbar-thumb) {
+	background: transparent !important;
+}
+
+.layout-panel[data-scrollbars-inactive] :deep(.os-scrollbar) {
+	visibility: hidden;
+	transition: none !important;
 }
 
 @media (hover: none) {
-	.layout-panel {
-		--layout-panel-scrollbar-color: var(--color-scrollbar);
+	.review-scrollbars {
+		--review-scrollbar-color: var(--color-scrollbar);
 	}
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.layout-panel {
+	.review-scrollbars {
 		transition: none;
 	}
 }
diff --git a/apps/frontend/src/components/project-review/layout/use-layout.ts b/apps/frontend/src/components/project-review/layout/use-layout.ts
index 6449a120755..eb11411f9d8 100644
--- a/apps/frontend/src/components/project-review/layout/use-layout.ts
+++ b/apps/frontend/src/components/project-review/layout/use-layout.ts
@@ -1,3 +1,4 @@
+import { moderationSettings } from '@modrinth/moderation'
 import { injectNotificationManager } from '@modrinth/ui'
 import { useIntervalFn } from '@vueuse/core'
 import type {
@@ -13,7 +14,9 @@ import type {
 	SplitviewReadyEvent,
 } from 'dockview-vue'
 import { getGridLocation, LayoutPriority, Orientation } from 'dockview-vue'
-import { onBeforeUnmount, ref, watchEffect } from 'vue'
+import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue'
+
+import { useModerationSettings } from '~/composables/moderation'
 
 import { injectReviewContext } from '../review-panel/context'
 import { injectReviewShortcuts } from '../shortcuts'
@@ -21,8 +24,10 @@ import { registerDragPopouts } from './drag-popout'
 import {
 	dockPopoutLayout,
 	readWorkspaceLayout,
+	readWorkspacePanels,
 	reviewPopoutUrl,
 	saveWorkspaceLayout,
+	saveWorkspacePanels,
 	workspacePanelSizes,
 	workspaceTabLayoutKey,
 } from './layout-storage'
@@ -58,14 +63,35 @@ export function useProjectReviewLayout(
 	>()
 	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 savedPanels = readWorkspacePanels()
+	const settings = useModerationSettings()
+	const techReviewMode = computed(() =>
+		settings.value.get(moderationSettings.General.TechReviewMode),
+	)
+	const leftVisible = ref(!techReviewMode.value && (savedPanels?.leftVisible ?? false))
+	const rightEnabled = computed(() => !techReviewMode.value)
+	const rightPanelVisible = ref(savedPanels?.rightVisible ?? true)
+	const rightVisible = computed({
+		get: () => rightEnabled.value && rightPanelVisible.value,
+		set: (visible: boolean) => {
+			rightPanelVisible.value = visible
+		},
+	})
+	let leftWidth = savedPanels?.leftWidth ?? workspacePanelSizes.left.default
+	let rightWidth = savedPanels?.rightWidth ?? workspacePanelSizes.right.default
 	const visibleRightWidth = ref(rightVisible.value ? rightWidth : 0)
 	const topLeftGroupId = ref<string>()
 	const topRightGroupId = ref<string>()
 	let columns: SplitviewApi | undefined
+	watch(rightVisible, (visible) => {
+		columns?.getPanel('right')?.api.setVisible(visible)
+		updateRightPanelWidth()
+	})
+	watch(techReviewMode, (enabled) => {
+		if (!enabled || !leftVisible.value) return
+		if (columns) toggleSidebar('left')
+		else leftVisible.value = false
+	})
 	let tabsReady = false
 	let leavingPage = false
 	let blockedPopoutLayout: SerializedDockview | undefined
@@ -133,7 +159,7 @@ export function useProjectReviewLayout(
 			leftWidth,
 			rightWidth,
 			leftVisible: leftVisible.value,
-			rightVisible: rightVisible.value,
+			rightVisible: rightPanelVisible.value,
 			tabs: currentTabs,
 			tabLayouts: Object.fromEntries(tabLayouts),
 		})
@@ -145,6 +171,15 @@ export function useProjectReviewLayout(
 		saveTimer = setTimeout(saveLayout, 200)
 	}
 
+	function savePanelState() {
+		saveWorkspacePanels({
+			leftWidth,
+			rightWidth,
+			leftVisible: leftVisible.value,
+			rightVisible: rightPanelVisible.value,
+		})
+	}
+
 	function dismissRestoreNotifications() {
 		for (const pending of pendingPopouts.values()) {
 			if (pending.notificationId !== undefined) removeNotification(pending.notificationId)
@@ -512,11 +547,12 @@ export function useProjectReviewLayout(
 		)
 		leftWidth = workspacePanelSizes.left.default
 		rightWidth = workspacePanelSizes.right.default
-		leftVisible.value = true
+		leftVisible.value = false
 		rightVisible.value = true
+		savePanelState()
 		for (const side of ['left', 'right'] as const) {
 			const panel = columns?.getPanel(side)
-			panel?.api.setVisible(true)
+			panel?.api.setVisible(side === 'left' ? leftVisible.value : rightVisible.value)
 			panel?.api.setSize({ size: workspacePanelSizes[side].default })
 		}
 		updateRightPanelWidth()
@@ -544,14 +580,16 @@ export function useProjectReviewLayout(
 	}
 
 	function toggleSidebar(side: 'left' | 'right') {
+		if (side === 'right' && !rightEnabled.value) return
 		const visible = side === 'left' ? leftVisible : rightVisible
 		const panel = columns?.getPanel(side)
 		if (!panel || !columns) return
-		if (visible.value) {
+		if (visible.value && panel.api.width > 0) {
 			if (side === 'left') leftWidth = panel.api.width
 			else rightWidth = panel.api.width
 		}
 		visible.value = !visible.value
+		savePanelState()
 		panel.api.setVisible(visible.value)
 		updateRightPanelWidth()
 		scheduleSave()
@@ -790,6 +828,7 @@ export function useProjectReviewLayout(
 		revealSlot,
 		resetActiveTabs,
 		rightVisible,
+		rightEnabled,
 		visibleRightWidth,
 		topLeftGroupId,
 		topRightGroupId,
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 ba8e04ebd6d..5c994b3cf8a 100644
--- a/apps/frontend/src/components/project-review/message-thread/index.vue
+++ b/apps/frontend/src/components/project-review/message-thread/index.vue
@@ -51,7 +51,7 @@ import ThreadTimeline from '~/components/ui/thread/ThreadTimeline.vue'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
 
 import ImageViewerActions from '../image-viewer-actions.vue'
-import { injectProjectReviewContext } from '../layout/context'
+import { injectReviewShortcuts } from '../shortcuts'
 import MessageBox from './message-box.vue'
 
 const {
@@ -60,7 +60,7 @@ const {
 	members: projectMembers,
 	organizationMembers,
 } = injectProjectReviewPageContext()
-const { rightVisible, toggleSidebar } = injectProjectReviewContext()
+const shortcuts = injectReviewShortcuts()
 const { data: thread, isError, refetch } = threadQuery
 const auth = useAuthState()
 
@@ -138,12 +138,12 @@ watch(
 	},
 	{ flush: 'post' },
 )
-async function openEditor() {
-	if (!rightVisible.value) toggleSidebar('right')
+async function openEditor(atEnd = false) {
+	shortcuts.run('reveal-conversation')
 	isAtBottom.value = true
 	await nextTick()
 	scrollToBottom()
-	await messageBox.value?.openEditor()
+	await messageBox.value?.openEditor(atEnd)
 }
 defineExpose({ openEditor })
 </script>
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 f35cda43554..87b837b12a1 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 ?? (techReviewMode ? 200 : 300)}px`,
 		}"
 	>
 		<div
@@ -12,7 +12,7 @@
 			aria-orientation="horizontal"
 			aria-label="Resize message box"
 			:aria-valuenow="Math.round(measuredHeight)"
-			:aria-valuemin="180"
+			:aria-valuemin="minimumHeight"
 			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"
@@ -127,7 +127,9 @@ const templates = computed(() => {
 			: template,
 	)
 })
-const { draft, pending, canSubmit, loadingAction, submit, uploadImage } = injectReviewSubmission()
+const { draft, pending, canSubmit, loadingAction, submit, uploadImage, techReviewMode } =
+	injectReviewSubmission()
+const minimumHeight = computed(() => (techReviewMode.value ? 100 : 180))
 const correctionsInserted = ref(false)
 const showClearIssues = computed(
 	() => correctionsInserted.value || hasCorrectionsHeading(draft.value),
@@ -149,7 +151,7 @@ const height = ref<number | null>(null)
 const resizeStart = ref<{ y: number; height: number } | null>(null)
 
 function setHeight(value: number) {
-	height.value = Math.max(180, value)
+	height.value = Math.max(minimumHeight.value, value)
 }
 function startResize(event: PointerEvent) {
 	if (event.button !== 0) return
@@ -168,9 +170,9 @@ function stopResize(event: PointerEvent) {
 	const target = event.currentTarget as HTMLElement
 	if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId)
 }
-async function openEditor() {
+async function openEditor(atEnd = false) {
 	await nextTick()
-	await editor.value?.focus()
+	await editor.value?.focus(atEnd)
 }
 function onKeydown(event: KeyboardEvent) {
 	if (event.defaultPrevented || event.repeat || event.isComposing) return
diff --git a/apps/frontend/src/components/project-review/message-thread/template-markdown-editor.vue b/apps/frontend/src/components/project-review/message-thread/template-markdown-editor.vue
index 3e926bff29e..875c0928bdb 100644
--- a/apps/frontend/src/components/project-review/message-thread/template-markdown-editor.vue
+++ b/apps/frontend/src/components/project-review/message-thread/template-markdown-editor.vue
@@ -229,8 +229,17 @@ onBeforeUnmount(() => {
 	editorView.value = undefined
 })
 
-async function focus() {
+async function focus(atEnd = false) {
 	await markdownEditor.value?.focus()
+	await nextTick()
+	const view = editorView.value
+	if (atEnd && view) {
+		view.dispatch({
+			selection: { anchor: view.state.doc.length },
+			scrollIntoView: true,
+		})
+		view.focus()
+	}
 }
 defineExpose({ focus })
 </script>
diff --git a/apps/frontend/src/components/project-review/project-info/index.vue b/apps/frontend/src/components/project-review/project-info/index.vue
index 6796b6bb398..e15be445e49 100644
--- a/apps/frontend/src/components/project-review/project-info/index.vue
+++ b/apps/frontend/src/components/project-review/project-info/index.vue
@@ -15,7 +15,7 @@
 			<Tags />
 			<Links />
 			<Compatibility v-if="!project.minecraft_server" />
-			<ServerDetails v-else />
+			<ServerDetails v-if="project.minecraft_server" />
 			<Members />
 			<Details />
 		</template>
diff --git a/apps/frontend/src/components/project-review/project-info/members/member-item.vue b/apps/frontend/src/components/project-review/project-info/members/member-item.vue
index 02daef1de3a..1cffdbe200c 100644
--- a/apps/frontend/src/components/project-review/project-info/members/member-item.vue
+++ b/apps/frontend/src/components/project-review/project-info/members/member-item.vue
@@ -1,5 +1,11 @@
 <template>
 	<li class="group/member flex min-w-0 items-start gap-2">
+		<RestrictUserModal
+			v-if="userQuery.data.value"
+			ref="restrictModal"
+			:user="userQuery.data.value"
+			:user-id="member.user.id"
+		/>
 		<button
 			v-if="avatarUrl"
 			type="button"
@@ -40,21 +46,47 @@
 			<p class="m-0 text-xs">{{ member.role }}</p>
 			<ProjectStatusStats :stats="stats" />
 		</div>
-		<MemberActions
-			:user="member.user"
-			class="shrink-0 group-focus-within/member:opacity-100 group-hover/member:opacity-100 aria-expanded:opacity-100 [@media(hover:hover)]:opacity-0"
-		/>
+		<div class="flex shrink-0 gap-0">
+			<IconButton
+				v-if="techReviewMode && isStaffViewing && member.user.role === 'developer'"
+				v-tooltip="restrictionLabel"
+				:label="restrictionLabel"
+				type="quiet"
+				color="red"
+				size="sm"
+				class="shrink-0 group-focus-within/member:opacity-100 group-hover/member:opacity-100 [@media(hover:hover)]:opacity-0"
+				:loading="userQuery.isFetching.value"
+				@click="openRestrictions"
+			>
+				<ShieldAlertIcon aria-hidden="true" />
+			</IconButton>
+			<MemberActions
+				:user="member.user"
+				class="shrink-0 group-focus-within/member:opacity-100 group-hover/member:opacity-100 aria-expanded:opacity-100 [@media(hover:hover)]:opacity-0"
+			/>
+		</div>
 	</li>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { CrownIcon } from '@modrinth/assets'
-import { Avatar, ImageViewerEditor } from '@modrinth/ui'
-import { computed, ref } from 'vue'
+import { CrownIcon, ShieldAlertIcon } from '@modrinth/assets'
+import {
+	Avatar,
+	IconButton,
+	ImageViewerEditor,
+	injectModrinthClient,
+	injectNotificationManager,
+} from '@modrinth/ui'
+import RestrictUserModal from '@modrinth/ui/src/layouts/shared/user-profile/components/restrict-user-modal.vue'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, nextTick, ref } from 'vue'
 
 import ProjectStatusStats from '~/components/ProjectStatusStats.vue'
+import { useAuthState } from '~/composables/auth'
+import { isStaff } from '~/helpers/users.js'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
+import { injectReviewSubmission } from '~/providers/project-review/review-submission'
 
 import ImageViewerActions from '../../image-viewer-actions.vue'
 import MemberActions from './member-actions.vue'
@@ -66,6 +98,43 @@ const props = defineProps<{
 
 const viewer = ref<InstanceType<typeof ImageViewerEditor>>()
 const { pixelated } = injectProjectReviewPageContext()
+const { techReviewMode } = injectReviewSubmission()
+const auth = useAuthState()
+const isStaffViewing = computed(() => isStaff(auth.value.user))
+const client = injectModrinthClient()
+const { addNotification } = injectNotificationManager()
+const restrictModal = ref<InstanceType<typeof RestrictUserModal>>()
+const restrictionsActivated = ref(false)
+const userQuery = useQuery({
+	queryKey: computed(() => ['user', props.member.user.id]),
+	queryFn: () => client.labrinth.users_v3.get(props.member.user.id),
+	enabled: restrictionsActivated,
+	staleTime: 30_000,
+})
+const restrictionLabel = computed(() =>
+	(userQuery.data.value ?? props.member.user).restriction
+		? `Edit restrictions for ${props.member.user.username}`
+		: `Restrict ${props.member.user.username}`,
+)
+
+async function openRestrictions() {
+	if (!techReviewMode.value || !isStaffViewing.value || userQuery.isFetching.value) return
+	const id = props.member.user.id
+	restrictionsActivated.value = true
+	const result = await userQuery.refetch()
+	if (props.member.user.id !== id || !techReviewMode.value) return
+	if (result.isError || !result.data) {
+		addNotification({
+			title: 'Could not load user restrictions',
+			text: 'Try opening the restriction dialog again.',
+			type: 'error',
+		})
+		return
+	}
+	await nextTick()
+	restrictModal.value?.show()
+}
+
 const avatarUrl = computed(() => props.member.user.raw_avatar_url || props.member.user.avatar_url)
 const viewerItems = computed(() =>
 	avatarUrl.value
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 9f3a0ed19bf..213132758eb 100644
--- a/apps/frontend/src/components/project-review/project-wide-checks.vue
+++ b/apps/frontend/src/components/project-review/project-wide-checks.vue
@@ -100,6 +100,7 @@ const selectedTarget = ref<ActionTarget | undefined>(reviewPanels.misc[0]?.key)
 const shortcuts = injectReviewShortcuts()
 const { registerRoute } = injectReviewContext()
 for (const { key: target } of reviewPanels.misc) {
+	if (target === 'tech-review') continue
 	if (target !== 're-review-misc') {
 		useReviewShortcut(
 			target,
@@ -117,7 +118,7 @@ for (const { key: target } of reviewPanels.misc) {
 	)
 }
 const visiblePanels = computed(() =>
-	reviewPanels.misc.filter(({ key }) => resolve({ kind: 'panel', key })),
+	reviewPanels.misc.filter(({ key }) => key !== 'tech-review' && resolve({ kind: 'panel', key })),
 )
 const visibleTargets = computed(() => visiblePanels.value.map(({ key }) => key))
 const tabs = computed(() => visiblePanels.value.map(({ key, label }) => ({ value: key, label })))
diff --git a/apps/frontend/src/components/project-review/queue-bar.vue b/apps/frontend/src/components/project-review/queue-bar.vue
index 22214445788..df967577edd 100644
--- a/apps/frontend/src/components/project-review/queue-bar.vue
+++ b/apps/frontend/src/components/project-review/queue-bar.vue
@@ -156,6 +156,7 @@ import { computed, ref } 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 ModerationTechReview from '~/components/ui/moderation/settings/ModerationTechReview.vue'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
 
 import { injectProjectReviewContext } from './layout/context'
@@ -182,6 +183,14 @@ const settingsTabs: TabbedModalTab[] = [
 		icon: SettingsIcon,
 		content: ModerationSettings,
 	},
+	{
+		name: {
+			id: 'moderation.project-review.techReviewSettings',
+			defaultMessage: 'Tech review',
+		},
+		icon: LayoutPanelLeftIcon,
+		content: ModerationTechReview,
+	},
 	{
 		name: {
 			id: 'moderation.project-review.appearanceSettings',
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 9fa34144508..ebdbabc1970 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
@@ -7,22 +7,45 @@
 		<span v-if="sendIssuesAsThreadMessage" class="w-full text-xs text-secondary">
 			Send issues as thread message
 		</span>
-		<Button
+		<Tooltip
 			v-for="action in actions"
 			:key="action.status"
-			class="grow"
-			:type="action.type"
-			:color="action.color"
-			:disabled="!actionAvailable(action.status)"
-			@click="submitDecisionAndContinue(action.status)"
+			:text="actionTooltip(action.status)"
+			:disabled="!actionTooltip(action.status)"
+			class="flex grow"
+			:class="{ 'basis-0': techReviewMode }"
 		>
-			<SpinnerIcon
-				v-if="loadingAction === action.status || advancingAction === action.status"
-				class="animate-spin"
-				aria-hidden="true"
-			/>
-			{{ action.label }}
-		</Button>
+			<Button
+				class="grow"
+				:type="action.type"
+				:color="action.color"
+				:disabled="!actionAvailable(action.status)"
+				@click="submitDecisionAndContinue(action.status)"
+			>
+				<SpinnerIcon
+					v-if="loadingAction === action.status || advancingAction === action.status"
+					class="animate-spin"
+					aria-hidden="true"
+				/>
+				<ShieldCheckIcon v-else-if="action.status === 'tech-review-pass'" aria-hidden="true" />
+				<ShieldAlertIcon
+					v-else-if="techReviewMode && action.status === 'rejected'"
+					aria-hidden="true"
+				/>
+				{{ action.label }}
+			</Button>
+		</Tooltip>
+		<Tooltip
+			v-if="techReviewMode"
+			:text="actionTooltip('rejected')"
+			:disabled="!actionTooltip('rejected')"
+			class="flex grow basis-0"
+		>
+			<Button class="grow" :disabled="!actionAvailable('rejected')" @click="failLater">
+				<span>Fail later</span>
+				<ChevronRightIcon class="-mr-2" aria-hidden="true" />
+			</Button>
+		</Tooltip>
 		<TeleportOverflowMenu label="More options" :options="overflowActions" :circular="false">
 			<MoreHorizontalIcon aria-hidden="true" />
 			<template #send-to-review>
@@ -39,14 +62,18 @@
 
 <script setup lang="ts">
 import {
+	ChevronRightIcon,
 	FileTextIcon,
 	MoreHorizontalIcon,
 	PlusIcon,
 	ScaleIcon,
+	ShieldAlertIcon,
+	ShieldCheckIcon,
 	SpinnerIcon,
+	XIcon,
 } from '@modrinth/assets'
 import { moderationSettings } from '@modrinth/moderation'
-import { Button, TeleportOverflowMenu } from '@modrinth/ui'
+import { Button, TeleportOverflowMenu, Tooltip } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { useModerationSettings } from '~/composables/moderation'
@@ -63,6 +90,14 @@ const settings = useModerationSettings()
 const {
 	canSubmit,
 	canApprove,
+	approvalDisabledReason,
+	techReviewMode,
+	canPassTechReview,
+	techReviewPassDisabledReason,
+	canRejectTechReview,
+	techReviewRejectDisabledReason,
+	submitTechReviewPass,
+	submitProjectReject,
 	canAddIssues,
 	sendIssuesAsThreadMessage,
 	pending,
@@ -71,9 +106,10 @@ const {
 	submitIssues,
 } = injectReviewSubmission()
 const { generating } = injectReviewMessages()
-const advancingAction = ref<Parameters<typeof submitDecision>[0]>()
+type ReviewOutcome = Parameters<typeof submitDecision>[0] | 'tech-review-pass' | 'project-reject'
+const advancingAction = ref<ReviewOutcome | 'fail-later'>()
 
-const actions = computed(() => [
+const standardActions = computed(() => [
 	{
 		status: ['approved', 'unlisted', 'private'].includes(project.value?.requested_status ?? '')
 			? project.value!.requested_status!
@@ -95,7 +131,45 @@ const actions = computed(() => [
 		color: 'red' as const,
 	},
 ])
+const actions = computed(() =>
+	techReviewMode.value
+		? [
+				{
+					status: 'tech-review-pass' as const,
+					label: 'Pass',
+					type: 'colored' as const,
+					color: 'green' as const,
+				},
+				{
+					...standardActions.value[2],
+					label: 'Fail',
+					type: 'colored' as const,
+				},
+			]
+		: standardActions.value,
+)
+
+function actionTooltip(status: ReviewOutcome) {
+	if (status === 'tech-review-pass') return techReviewPassDisabledReason.value
+	if (status === 'rejected' && techReviewMode.value) return techReviewRejectDisabledReason.value
+	if (['approved', 'unlisted', 'private'].includes(status)) return approvalDisabledReason.value
+	return undefined
+}
+
 const overflowActions = computed(() => [
+	...(techReviewMode.value
+		? [
+				{
+					id: 'reject',
+					label: 'Reject',
+					tone: 'red' as const,
+					icon: XIcon,
+					hoverFilled: true,
+					action: () => submitDecisionAndContinue('project-reject'),
+					disabled: !actionAvailable('project-reject'),
+				},
+			]
+		: []),
 	{
 		id: 'add-issues',
 		label: sendIssuesAsThreadMessage.value ? 'Send issues thread message' : 'Add issues on project',
@@ -127,7 +201,25 @@ const overflowActions = computed(() => [
 	},
 ])
 
-function actionAvailable(status: Parameters<typeof submitDecision>[0]) {
+function actionAvailable(status: ReviewOutcome) {
+	if (status === 'tech-review-pass')
+		return (
+			techReviewMode.value &&
+			!heldBy.value &&
+			canPassTechReview.value &&
+			!generating.value &&
+			advancingAction.value === undefined
+		)
+	if (status === 'project-reject')
+		return (
+			techReviewMode.value &&
+			!heldBy.value &&
+			canSubmit.value &&
+			!generating.value &&
+			advancingAction.value === undefined &&
+			project.value?.status !== 'rejected'
+		)
+	if (status === 'withheld' && techReviewMode.value) return false
 	if (heldBy.value) return false
 	if (status === 'processing')
 		return (
@@ -139,7 +231,8 @@ function actionAvailable(status: Parameters<typeof submitDecision>[0]) {
 		canSubmit.value &&
 		!generating.value &&
 		advancingAction.value === undefined &&
-		project.value?.status !== status &&
+		(project.value?.status !== status || (status === 'rejected' && techReviewMode.value)) &&
+		(status !== 'rejected' || !techReviewMode.value || canRejectTechReview.value) &&
 		(!['approved', 'unlisted', 'private'].includes(status) || canApprove.value)
 	)
 }
@@ -147,22 +240,38 @@ for (const [index, action] of (['approve', 'withhold', 'reject'] as const).entri
 	useReviewShortcut(
 		action,
 		() => {
-			void submitDecisionAndContinue(actions.value[index].status)
+			void submitDecisionAndContinue(standardActions.value[index].status)
 		},
-		() => actionAvailable(actions.value[index].status),
+		() =>
+			actionAvailable(standardActions.value[index].status) &&
+			(action !== 'approve' || !techReviewMode.value),
 	)
 }
 
-async function submitDecisionAndContinue(
-	status: Parameters<typeof submitDecision>[0],
-	advance = true,
-) {
+async function failLater() {
+	if (!actionAvailable('rejected')) return
+	const id = project.value?.id
+	if (!id) return
+	advancingAction.value = 'fail-later'
+	try {
+		await navigation.completeAndNext(id)
+	} finally {
+		advancingAction.value = undefined
+	}
+}
+
+async function submitDecisionAndContinue(status: ReviewOutcome, advance = true) {
 	if (!actionAvailable(status) || advancingAction.value !== undefined) return
 	const id = project.value?.id
 	if (!id) return
 	advancingAction.value = status
 	try {
-		if (await submitDecision(status)) {
+		const submitted = await (status === 'tech-review-pass'
+			? submitTechReviewPass()
+			: status === 'project-reject'
+				? submitProjectReject()
+				: submitDecision(status))
+		if (submitted) {
 			if (advance && settings.value.get(moderationSettings.General.AutoGoNextOnReviewOutcome)) {
 				await navigation.completeAndNext(id)
 			} else {
diff --git a/apps/frontend/src/components/project-review/review-panel/anchor.vue b/apps/frontend/src/components/project-review/review-panel/anchor.vue
index 5634ba05012..3fa022f43c5 100644
--- a/apps/frontend/src/components/project-review/review-panel/anchor.vue
+++ b/apps/frontend/src/components/project-review/review-panel/anchor.vue
@@ -54,8 +54,8 @@ const { active, isAvailable, open, release, leave, enter, cancelClose, revealAnc
 	injectReviewContext()
 const id = props.anchorId
 const element = ref<HTMLElement>()
-const available = computed(() => !props.disabled && isAvailable(props.target))
 const settings = useModerationSettings()
+const available = computed(() => !props.disabled && isAvailable(props.target))
 const panels = injectReviewPanels()
 const previousIssues = injectReviewPreviousIssues()
 const reReviewFindingCount = computed(() => {
diff --git a/apps/frontend/src/components/project-review/shortcuts.ts b/apps/frontend/src/components/project-review/shortcuts.ts
index 8145af17635..03027f88205 100644
--- a/apps/frontend/src/components/project-review/shortcuts.ts
+++ b/apps/frontend/src/components/project-review/shortcuts.ts
@@ -148,8 +148,8 @@ export function useReviewInteraction(entry: Interaction) {
 	onScopeDispose(injectReviewShortcuts().registerInteraction(entry))
 }
 
-export function reviewShortcutBlocked(event: KeyboardEvent) {
-	if (event.defaultPrevented || event.repeat || event.isComposing) return true
+export function reviewShortcutBlocked(event: KeyboardEvent, allowRepeat = false) {
+	if (event.defaultPrevented || (event.repeat && !allowRepeat) || event.isComposing) return true
 	if (
 		[
 			...((event.target as Node | null)?.ownerDocument?.querySelectorAll(
diff --git a/apps/frontend/src/components/project-review/tech-review/file-detail/archive-tree.vue b/apps/frontend/src/components/project-review/tech-review/file-detail/archive-tree.vue
new file mode 100644
index 00000000000..334debe411e
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/file-detail/archive-tree.vue
@@ -0,0 +1,752 @@
+<script setup lang="ts">
+import {
+	ChevronRightIcon,
+	ChevronsDownUpIcon,
+	ChevronsUpDownIcon,
+	FileArchiveIcon,
+	FileIcon,
+	FilterIcon,
+	FolderIcon,
+	FolderOpenIcon,
+	ListChevronsUpDownIcon,
+	SearchIcon,
+	ShieldAlertIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	type ButtonMenuOption,
+	Checkbox,
+	FloatingMenu,
+	Input,
+	MultiSelect,
+	OverlayScrollArea,
+	TagItem,
+	TeleportOverflowMenu,
+	Tooltip,
+	truncatedTooltip,
+} from '@modrinth/ui'
+import { dismissFloatingMenus } from '@modrinth/ui/src/providers/floating-menu'
+import { computed, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue'
+
+import { getHighestSeverity, severityOrder } from '../helpers'
+import { folderMenuLockKey } from '../menus'
+import TraceName from '../traces/name.vue'
+import { severityPresentation, traceName } from '../traces/presentation'
+import type { ClassGroup, FlagItem } from '../types'
+import { injectTechReviewDecisions } from '../verdict/use-decisions'
+import FolderMenu from './folder-menu.vue'
+import ProjectCard from './project-card.vue'
+
+const props = defineProps<{
+	classes: ClassGroup[]
+	traceTypes: string[]
+	unavailableSources: Set<string>
+	selectedKey?: string
+	fileName: string
+	globallyPassedCount: number
+	hiddenCount: number
+}>()
+const showGloballyPassed = defineModel<boolean>('showGloballyPassed', {
+	default: false,
+})
+const showHidden = defineModel<boolean>('showHidden', { default: false })
+const treeElement = ref<HTMLElement>()
+provide(folderMenuLockKey, ref<symbol>())
+
+const emit = defineEmits<{ select: [classItem: ClassGroup] }>()
+const { getDetailDecision, getMarkedFlagsCount } = injectTechReviewDecisions()
+
+interface TreeNode {
+	key: string
+	name: string
+	kind: 'folder' | 'archive' | 'file'
+	children: Map<string, TreeNode>
+	classItem?: ClassGroup
+}
+
+const previews = computed(
+	() =>
+		new Map(
+			props.classes.map((classItem) => {
+				const severity = getHighestSeverity(classItem.flags.map((flag) => flag.detail))
+				const presentation = severityPresentation[severity]
+				const unsafeCount = classItem.flags.filter(
+					({ detail }) => getDetailDecision(detail.id, detail.status) === 'malware',
+				).length
+				const traceTypes = new Map<
+					string,
+					{
+						issueType: string
+						severity: FlagItem['detail']['severity']
+						count: number
+					}
+				>()
+				for (const flag of classItem.flags) {
+					const trace = traceTypes.get(flag.issueType)
+					if (trace) {
+						trace.count++
+						if (severityOrder[flag.detail.severity] > severityOrder[trace.severity]) {
+							trace.severity = flag.detail.severity
+						}
+					} else {
+						traceTypes.set(flag.issueType, {
+							issueType: flag.issueType,
+							severity: flag.detail.severity,
+							count: 1,
+						})
+					}
+				}
+				return [
+					classItem.key,
+					{
+						severityRank: severityOrder[severity],
+						unsafeCount,
+						unsafeLabel: `${unsafeCount} traces marked unsafe`,
+						tagClass: severity === 'low' ? '!border-surface-5' : undefined,
+						tagStyle: {
+							'--_bg-color': presentation.bgColor,
+							'--_color': presentation.color,
+						},
+						traceTypes: [...traceTypes.values()].sort(
+							(a, b) => severityOrder[b.severity] - severityOrder[a.severity],
+						),
+					},
+				]
+			}),
+		),
+)
+
+const hoveredName = ref<HTMLElement>()
+const hoveredNameText = ref<string>()
+let nameTooltipTimer: ReturnType<typeof setTimeout> | undefined
+
+function showNameTooltip(event: MouseEvent | FocusEvent) {
+	hideNameTooltip()
+	const target = event.currentTarget as HTMLElement
+	const name = target.hasAttribute('data-tree-name')
+		? target
+		: target.querySelector<HTMLElement>('[data-tree-name]')
+	if (!name) return
+	nameTooltipTimer = setTimeout(() => {
+		const text = truncatedTooltip(name, name.textContent ?? '')
+		hoveredName.value = text ? name : undefined
+		hoveredNameText.value = text
+	}, 750)
+}
+
+function hideNameTooltip() {
+	clearTimeout(nameTooltipTimer)
+	hoveredName.value = undefined
+	hoveredNameText.value = undefined
+}
+
+onBeforeUnmount(hideNameTooltip)
+
+const search = ref('')
+const selectedTraceTypes = ref<string[]>([])
+const selectedTraceTypeSet = computed(() => new Set(selectedTraceTypes.value))
+const traceTypeCounts = computed(() => {
+	const counts = new Map<string, number>()
+	for (const classItem of props.classes) {
+		for (const flag of classItem.flags) {
+			counts.set(flag.issueType, (counts.get(flag.issueType) ?? 0) + 1)
+		}
+	}
+	return counts
+})
+const traceTypeOptions = computed(() =>
+	[...new Set(props.traceTypes)]
+		.map((type) => ({ value: type, label: traceName(type) }))
+		.sort((a, b) => a.label.localeCompare(b.label)),
+)
+const isFiltering = computed(() => !!search.value.trim() || selectedTraceTypes.value.length > 0)
+const expanded = ref(new Map<string, boolean>())
+const manuallyToggled = new Set<string>()
+const expandFilterMatches = ref(true)
+const filteredExpansion = ref(new Map<string, boolean>())
+let automaticSelectionKey: string | undefined
+
+watch([search, selectedTraceTypes], () => {
+	expandFilterMatches.value = true
+	filteredExpansion.value.clear()
+})
+
+function isExpanded(node: TreeNode) {
+	if (isFiltering.value && expandFilterMatches.value) {
+		return filteredExpansion.value.get(node.key) ?? true
+	}
+	return expanded.value.get(node.key) ?? !completedFolders.value.has(node.key)
+}
+
+function segmentKey(parentKey: string, segment: Pick<TreeNode, 'name' | 'kind'>) {
+	return `${parentKey}/${segment.name}${segment.kind === 'archive' ? '#' : ''}`
+}
+
+function archiveSegments(classItem: ClassGroup) {
+	const archives = (classItem.jar ?? '')
+		.split('#')
+		.filter(Boolean)
+		.map((segment) => {
+			try {
+				return decodeURIComponent(segment)
+			} catch {
+				return segment
+			}
+		})
+	if (archives[0] === props.fileName) archives.shift()
+	return [...archives, classItem.filePath].flatMap((path, pathIndex) => {
+		const names = path.split('/').filter(Boolean)
+		return names.map<Pick<TreeNode, 'name' | 'kind'>>((name, index) => ({
+			name,
+			kind: index < names.length - 1 ? 'folder' : pathIndex < archives.length ? 'archive' : 'file',
+		}))
+	})
+}
+
+const folderCounts = computed(() => {
+	const counts = new Map<
+		string,
+		{ total: number; marked: number; unsafe: number; flags: FlagItem[] }
+	>()
+	for (const classItem of props.classes) {
+		const total = classItem.flags.length
+		const marked = getMarkedFlagsCount(classItem.flags)
+		const unsafe = previews.value.get(classItem.key)?.unsafeCount ?? 0
+		let key = ''
+		for (const segment of archiveSegments(classItem).slice(0, -1)) {
+			key = segmentKey(key, segment)
+			const count = counts.get(key) ?? {
+				total: 0,
+				marked: 0,
+				unsafe: 0,
+				flags: [],
+			}
+			count.total += total
+			count.marked += marked
+			count.unsafe += unsafe
+			count.flags.push(...classItem.flags)
+			counts.set(key, count)
+		}
+	}
+	return counts
+})
+
+const completedFolders = computed(
+	() =>
+		new Set(
+			[...folderCounts.value].flatMap(([key, { total, marked, unsafe }]) =>
+				total > 0 && marked === total && unsafe === 0 ? [key] : [],
+			),
+		),
+)
+
+watch(completedFolders, (completed, previous) => {
+	for (const key of previous) {
+		if (!completed.has(key) && !manuallyToggled.has(key)) {
+			expanded.value.delete(key)
+		}
+	}
+	for (const key of completed) {
+		if (!previous.has(key) && !manuallyToggled.has(key)) {
+			expanded.value.set(key, false)
+		}
+	}
+})
+
+function setFolderExpansion(action: 'collapse-resolved' | 'collapse-all' | 'expand-all') {
+	expandFilterMatches.value = false
+	for (const key of folderCounts.value.keys()) {
+		if (action === 'collapse-resolved' && !completedFolders.value.has(key)) continue
+		manuallyToggled.add(key)
+		expanded.value.set(key, action === 'expand-all')
+	}
+}
+
+const folderActions: ButtonMenuOption[] = [
+	{
+		id: 'expand-all',
+		label: 'Expand all',
+		icon: ChevronsUpDownIcon,
+		action: () => setFolderExpansion('expand-all'),
+	},
+	{
+		id: 'collapse-all',
+		label: 'Collapse all',
+		icon: ChevronsDownUpIcon,
+		action: () => setFolderExpansion('collapse-all'),
+	},
+	{
+		id: 'collapse-resolved',
+		label: 'Collapse resolved',
+		icon: ChevronsDownUpIcon,
+		action: () => setFolderExpansion('collapse-resolved'),
+	},
+]
+
+const tree = computed(() => {
+	const root: TreeNode = {
+		key: '',
+		name: '',
+		kind: 'archive',
+		children: new Map(),
+	}
+	const query = search.value.trim().toLowerCase()
+	for (const classItem of props.classes) {
+		if (
+			selectedTraceTypeSet.value.size > 0 &&
+			!classItem.flags.some((flag) => selectedTraceTypeSet.value.has(flag.issueType))
+		)
+			continue
+		const segments = archiveSegments(classItem)
+		if (
+			query &&
+			!segments
+				.map((segment) => segment.name)
+				.join('/')
+				.toLowerCase()
+				.includes(query)
+		)
+			continue
+		let node = root
+		for (const segment of segments) {
+			const isFile = segment.kind === 'file'
+			const key = isFile ? `file:${classItem.key}` : segmentKey(node.key, segment)
+			if (!node.children.has(key)) {
+				node.children.set(key, { key, ...segment, children: new Map() })
+			}
+			node = node.children.get(key)!
+			if (isFile) node.classItem = classItem
+		}
+	}
+	return root
+})
+
+function sortPriority(node: TreeNode, parent: TreeNode) {
+	if (node.kind !== 'folder') return 4
+	if (parent.kind !== 'archive') return 1
+	if (node.name === 'META-INF') return 0
+	if (node.name === 'assets') return 2
+	if (node.name === 'data') return 3
+	return 1
+}
+
+function sortedChildren(parent: TreeNode) {
+	const children = [...parent.children.values()].sort(
+		(a, b) =>
+			sortPriority(a, parent) - sortPriority(b, parent) ||
+			a.name.localeCompare(b.name, 'en', { numeric: true }),
+	)
+	const files = children
+		.filter((node) => node.classItem)
+		.sort(
+			(a, b) =>
+				(previews.value.get(b.classItem!.key)?.severityRank ?? -1) -
+					(previews.value.get(a.classItem!.key)?.severityRank ?? -1) ||
+				b.classItem!.flags.length - a.classItem!.flags.length ||
+				a.name.localeCompare(b.name, 'en', { numeric: true }),
+		)
+	let fileIndex = 0
+	return children.map((node) => (node.classItem ? files[fileIndex++] : node))
+}
+
+function firstFile(parent: TreeNode, unresolvedOnly = false): ClassGroup | undefined {
+	for (const child of sortedChildren(parent)) {
+		if (child.classItem) {
+			if (
+				!unresolvedOnly ||
+				getMarkedFlagsCount(child.classItem.flags) < child.classItem.flags.length
+			)
+				return child.classItem
+			continue
+		}
+		const file = firstFile(child, unresolvedOnly)
+		if (file) return file
+	}
+}
+
+watch(
+	[() => props.classes, () => props.selectedKey],
+	([classes, selectedKey]) => {
+		if (classes.some((item) => item.key === selectedKey)) return
+		const first = firstFile(tree.value, true) ?? firstFile(tree.value)
+		if (first) {
+			automaticSelectionKey = first.key
+			emit('select', first)
+		}
+	},
+	{ immediate: true },
+)
+
+const rows = computed(() => {
+	const result: { node: TreeNode; depth: number }[] = []
+	function visit(parent: TreeNode, depth: number) {
+		const children = sortedChildren(parent)
+		for (let node of children) {
+			let name = node.name
+			while (node.kind === 'folder' && node.children.size === 1) {
+				const child = [...node.children.values()][0]
+				if (child.kind !== 'folder') break
+				name += `/${child.name}`
+				node = child
+			}
+			result.push({ node: { ...node, name }, depth })
+			if (!node.classItem && isExpanded(node)) {
+				visit(node, depth + 1)
+			}
+		}
+	}
+	visit(tree.value, 0)
+	return result
+})
+
+const orderedFiles = computed(() => {
+	const files: ClassGroup[] = []
+	function visit(parent: TreeNode) {
+		for (const node of sortedChildren(parent)) {
+			if (node.classItem) files.push(node.classItem)
+			else visit(node)
+		}
+	}
+	visit(tree.value)
+	return files
+})
+
+function select(node: TreeNode) {
+	dismissFloatingMenus()
+	if (node.classItem) {
+		automaticSelectionKey = undefined
+		emit('select', node.classItem)
+	} else {
+		const nextExpanded = !isExpanded(node)
+		if (isFiltering.value && expandFilterMatches.value) {
+			filteredExpansion.value.set(node.key, nextExpanded)
+		}
+		manuallyToggled.add(node.key)
+		expanded.value.set(node.key, nextExpanded)
+	}
+}
+
+function getNextFile(direction: number) {
+	const visibleKeys = new Set(
+		rows.value.flatMap(({ node }) => (node.classItem ? [node.classItem.key] : [])),
+	)
+	const files = orderedFiles.value
+	const index = files.findIndex((item) => item.key === props.selectedKey)
+	const step = direction > 0 ? 1 : -1
+	const start = index < 0 ? (step > 0 ? 0 : files.length - 1) : index + step
+	for (let nextIndex = start; nextIndex >= 0 && nextIndex < files.length; nextIndex += step) {
+		if (visibleKeys.has(files[nextIndex].key)) return files[nextIndex]
+	}
+}
+
+function navigateFile(direction: number) {
+	const next = getNextFile(direction)
+	if (!next) return false
+	emit('select', next)
+	void nextTick(() => {
+		treeElement.value?.querySelector('[aria-current="true"]')?.scrollIntoView({ block: 'nearest' })
+	})
+	return true
+}
+
+defineExpose({
+	navigateFile,
+	canNavigateFile: (direction: number) => !!getNextFile(direction),
+})
+
+watch(
+	() => props.selectedKey,
+	() => {
+		dismissFloatingMenus()
+		const selected = props.classes.find((item) => item.key === props.selectedKey)
+		if (!selected) return
+		if (
+			selected.key === automaticSelectionKey &&
+			getMarkedFlagsCount(selected.flags) === selected.flags.length
+		)
+			return
+		let key = ''
+		for (const segment of archiveSegments(selected).slice(0, -1)) {
+			key = segmentKey(key, segment)
+			filteredExpansion.value.set(key, true)
+			expanded.value.set(key, true)
+		}
+	},
+	{ immediate: true },
+)
+</script>
+
+<template>
+	<nav
+		ref="treeElement"
+		aria-label="Archive files"
+		class="review-scrollbars flex min-h-0 min-w-0 flex-col"
+	>
+		<div class="flex shrink-0 items-center gap-0.5 pr-2">
+			<Input
+				v-model="search"
+				:icon="SearchIcon"
+				type="search"
+				aria-label="Filter archive files"
+				placeholder="Filter files..."
+				size="small"
+				wrapper-class="min-w-0 flex-1"
+			/>
+			<MultiSelect
+				v-model="selectedTraceTypes"
+				:options="traceTypeOptions"
+				:searchable="traceTypeOptions.length > 6"
+				search-placeholder="Search trace types..."
+				show-selection-actions
+				:show-chevron="false"
+				:clearable="false"
+				:dropdown-width="280"
+				dropdown-align="right"
+				trigger-type="quiet"
+				trigger-size="sm"
+				fit-content
+				:trigger-class="`!size-8 !p-0 ${selectedTraceTypes.length ? 'text-brand' : ''}`"
+			>
+				<template #input-content>
+					<FilterIcon class="size-4 shrink-0" aria-hidden="true" />
+					<span class="sr-only">Filter by trace type</span>
+					<span
+						v-if="selectedTraceTypes.length"
+						class="absolute right-0 top-0 text-[10px] leading-3"
+						>{{ selectedTraceTypes.length }}</span
+					>
+				</template>
+				<template #option="{ item, selected }">
+					<div class="flex min-w-0 flex-1 items-center justify-between gap-3 text-sm">
+						<span
+							class="min-w-0 truncate font-semibold leading-tight"
+							:class="selected ? 'text-contrast' : 'text-primary'"
+							>{{ item.label }}</span
+						>
+						<span class="tabular-nums text-secondary">{{
+							traceTypeCounts.get(item.value) ?? 0
+						}}</span>
+					</div>
+				</template>
+			</MultiSelect>
+			<TeleportOverflowMenu
+				type="quiet"
+				size="sm"
+				class="size-8 shrink-0"
+				label="Folder actions"
+				:circular="false"
+				aria-label="Folder actions"
+				placement="bottom-end"
+				:options="folderActions"
+			>
+				<ListChevronsUpDownIcon class="size-4" aria-hidden="true" />
+			</TeleportOverflowMenu>
+		</div>
+		<OverlayScrollArea :auto-hide="false" class="flex-1">
+			<div class="py-2 pr-2.5">
+				<p v-if="!rows.length" class="m-0 p-2 text-sm text-secondary">No matching files</p>
+				<FolderMenu
+					v-for="{ node, depth } in rows"
+					:key="node.key"
+					:show-delay="250"
+					:disabled="!!node.classItem"
+					class="!block min-w-0"
+				>
+					<button
+						type="button"
+						:aria-current="
+							node.classItem && node.classItem.key === selectedKey ? 'true' : undefined
+						"
+						:aria-expanded="node.classItem ? undefined : isExpanded(node)"
+						class="flex h-8 w-full min-w-0 items-center gap-1.5 rounded-md border-0 py-0 text-left text-sm hover:bg-surface-3 focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+						:class="
+							node.classItem && node.classItem.key === selectedKey
+								? 'bg-surface-3 text-contrast'
+								: 'bg-transparent text-secondary'
+						"
+						:style="{ paddingLeft: `${depth * 12 + 6}px` }"
+						@click="select(node)"
+						@focus="showNameTooltip"
+						@blur="hideNameTooltip"
+					>
+						<ChevronRightIcon
+							class="size-3 shrink-0"
+							:class="{
+								invisible: node.classItem,
+								'rotate-90': !node.classItem && isExpanded(node),
+							}"
+							aria-hidden="true"
+						/>
+						<component
+							:is="
+								node.classItem
+									? FileIcon
+									: node.kind === 'archive'
+										? FileArchiveIcon
+										: isExpanded(node)
+											? FolderOpenIcon
+											: FolderIcon
+							"
+							class="size-4 shrink-0"
+							:class="{
+								'text-yellow-500': node.kind === 'folder',
+								'text-blue': node.kind === 'archive',
+							}"
+							aria-hidden="true"
+						/>
+						<span
+							data-tree-name
+							class="min-w-0 truncate text-xs"
+							@mouseenter="showNameTooltip"
+							@mouseleave="hideNameTooltip"
+							>{{ node.name }}</span
+						>
+						<div
+							v-if="node.classItem"
+							class="ml-auto flex shrink-0 items-center gap-1 self-stretch px-1.5"
+						>
+							<span
+								v-if="unavailableSources.has(node.classItem.key)"
+								title="Source code unavailable or failed to decompile"
+								class="inline-flex shrink-0"
+								role="img"
+								aria-label="Source code unavailable or failed to decompile"
+							>
+								<XIcon class="size-3 text-red" aria-hidden="true" />
+							</span>
+							<span
+								v-if="previews.get(node.classItem.key)?.unsafeCount"
+								v-tooltip="previews.get(node.classItem.key)?.unsafeLabel"
+								class="inline-flex shrink-0"
+								role="img"
+								:aria-label="previews.get(node.classItem.key)?.unsafeLabel"
+							>
+								<ShieldAlertIcon class="size-[18px] text-red" aria-hidden="true" />
+							</span>
+							<FloatingMenu
+								trigger="hover"
+								:show-delay="250"
+								class="items-center self-stretch"
+								placement="right-start"
+								:arrow="false"
+								bare
+							>
+								<TagItem
+									class="pointer-events-none h-[22px] min-w-[18px] shrink-0 justify-center !px-1 !py-0 !text-xs !font-medium !leading-none"
+									:class="previews.get(node.classItem.key)?.tagClass"
+									:style="previews.get(node.classItem.key)?.tagStyle"
+								>
+									<span class="[text-box:trim-both_cap_alphabetic]"
+										>{{ getMarkedFlagsCount(node.classItem.flags) }}/{{
+											node.classItem.flags.length
+										}}</span
+									>
+								</TagItem>
+								<template #popper>
+									<div
+										v-if="node.classItem"
+										class="review-scrollbars w-max max-w-[calc(100vw-2rem)] rounded-lg border border-solid border-surface-4 bg-surface-2 p-3 text-sm shadow-lg"
+									>
+										<ul
+											class="m-0 flex max-h-[min(60vh,24rem)] list-none flex-col gap-2 overflow-y-auto p-0"
+											aria-label="Trace preview"
+										>
+											<li
+												v-for="trace in previews.get(node.classItem.key)?.traceTypes"
+												:key="trace.issueType"
+												class="flex items-center gap-1"
+											>
+												<TraceName
+													:issue-type="trace.issueType"
+													:severity="trace.severity"
+													colored
+												/>
+												<span
+													v-if="trace.count > 1"
+													class="font-medium"
+													:class="severityPresentation[trace.severity].textClass"
+													>({{ trace.count }})</span
+												>
+											</li>
+										</ul>
+									</div>
+								</template>
+							</FloatingMenu>
+						</div>
+					</button>
+					<template v-if="!node.classItem" #popper>
+						<section
+							:aria-label="`Trace actions for ${node.name}`"
+							class="review-scrollbars flex max-w-[calc(100vw-2rem)] flex-col gap-2 rounded-xl border border-solid border-surface-5 bg-surface-2 p-3 shadow-2xl"
+						>
+							<div class="flex min-w-0 items-end justify-between gap-3">
+								<h4 class="m-0 min-w-0 truncate text-sm font-semibold text-contrast">
+									{{ node.name }}
+								</h4>
+								<span class="shrink-0 text-xs font-medium text-secondary">
+									{{ folderCounts.get(node.key)?.total ?? 0 }} traces
+								</span>
+							</div>
+							<slot name="folder-actions" :flags="folderCounts.get(node.key)?.flags ?? []" />
+						</section>
+					</template>
+				</FolderMenu>
+			</div>
+		</OverlayScrollArea>
+		<div class="flex shrink-0 flex-col gap-1 py-1.5 pl-0.5 pr-2">
+			<Checkbox
+				v-model="showGloballyPassed"
+				class="!gap-1.5 !text-sm !text-primary [&>span:first-child]:!size-4 [&>span:first-child]:!rounded"
+				:label="`Show ${globallyPassedCount} globally passed`"
+			/>
+			<Checkbox
+				v-model="showHidden"
+				class="!gap-1.5 !text-sm !text-primary [&>span:first-child]:!size-4 [&>span:first-child]:!rounded"
+				:label="`Show ${hiddenCount} hidden`"
+			/>
+		</div>
+		<ProjectCard />
+		<Tooltip :reference="hoveredName ?? null" :text="hoveredNameText" />
+	</nav>
+</template>
+
+<style scoped>
+@property --review-scrollbar-color {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: transparent;
+}
+
+.review-scrollbars {
+	--review-scrollbar-color: transparent;
+	--overlay-scrollbar-color: var(--review-scrollbar-color);
+	transition: --review-scrollbar-color 1750ms ease;
+}
+
+.review-scrollbars:hover {
+	--review-scrollbar-color: var(--color-scrollbar);
+	transition-duration: 200ms;
+}
+
+.review-scrollbars,
+.review-scrollbars :deep(*) {
+	scrollbar-color: var(--review-scrollbar-color) transparent;
+}
+
+.review-scrollbars::-webkit-scrollbar-thumb,
+.review-scrollbars :deep(*::-webkit-scrollbar-thumb) {
+	background: var(--review-scrollbar-color);
+}
+
+@media (hover: none) {
+	.review-scrollbars {
+		--review-scrollbar-color: var(--color-scrollbar);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.review-scrollbars {
+		transition: none;
+	}
+}
+</style>
diff --git a/apps/frontend/src/components/project-review/tech-review/file-detail/class-item.vue b/apps/frontend/src/components/project-review/tech-review/file-detail/class-item.vue
new file mode 100644
index 00000000000..3631870d823
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/file-detail/class-item.vue
@@ -0,0 +1,958 @@
+<script setup lang="ts">
+import {
+	CheckIcon,
+	ChevronDownIcon,
+	ClipboardCopyIcon,
+	CopyIcon,
+	EyeIcon,
+	EyeOffIcon,
+	LoaderCircleIcon,
+} from '@modrinth/assets'
+import { moderationSettings } from '@modrinth/moderation'
+import {
+	Button,
+	codeClipboardHtml,
+	formatCodeBlock,
+	IconButton,
+	injectModrinthClient,
+	injectNotificationManager,
+} from '@modrinth/ui'
+import { highlightCodeLines } from '@modrinth/utils'
+import {
+	StorageSerializers,
+	useDebounceFn,
+	useEventListener,
+	useLocalStorage,
+	useResizeObserver,
+} from '@vueuse/core'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
+
+import { useModerationSettings } from '~/composables/moderation'
+import { slicerFileName } from '~/providers/project-review/review-slicer'
+
+import FileActions from '../files/actions.vue'
+import HeightDivider from '../height-divider.vue'
+import { severityOrder, truncateMiddle } from '../helpers'
+import PanelDivider from '../panel-divider.vue'
+import TraceData from '../traces/data.vue'
+import TraceName from '../traces/name.vue'
+import type { ClassGroup, FlattenedFileReport, TraceVerdictEvent } from '../types'
+import { useFastScroll } from '../use-fast-scroll'
+import VerdictButtons from '../verdict/buttons.vue'
+import { injectTechReviewDecisions } from '../verdict/use-decisions'
+import {
+	collectSourceValues,
+	findSourceMatches,
+	markSourceLine,
+	mergeSourceMatches,
+	parseSourceHighlightWords,
+	type SourceMatch,
+} from './source-matches'
+import { isUsableDecompiledSource } from './source-status'
+
+const props = defineProps<{
+	file: FlattenedFileReport
+	classItem: ClassGroup
+	expanded: boolean
+	splitView?: boolean
+	focusedDetailId?: string | null
+	loadingIssues: Set<string>
+	decompiledSources: Map<string, string>
+}>()
+
+const tracesWidth = defineModel<number>('tracesWidth', { default: 360 })
+const tracesHeight = useLocalStorage<number | null>('moderation-tech-review-traces-height', null, {
+	serializer: StorageSerializers.number,
+})
+
+const emit = defineEmits<{
+	toggle: []
+	verdict: [event: TraceVerdictEvent]
+}>()
+
+const client = injectModrinthClient()
+const { addNotification } = injectNotificationManager()
+const { isPreReviewed, getMarkedFlagsCount } = injectTechReviewDecisions()
+const settings = useModerationSettings()
+const wrapCode = computed(() => settings.value.get(moderationSettings.General.WrapTechReviewCode))
+const globalHighlightWords = computed(() =>
+	parseSourceHighlightWords(
+		settings.value.get(moderationSettings.General.TechReviewHighlightWords),
+	),
+)
+
+const showHiddenTraces = defineModel<boolean>('showHiddenTraces', {
+	default: false,
+})
+const hiddenTraceCount = computed(
+	() => props.classItem.flags.filter((flag) => flag.detail.severity === 'hidden').length,
+)
+const visibleFlags = computed(() =>
+	props.classItem.flags
+		.filter((flag) => showHiddenTraces.value || flag.detail.severity !== 'hidden')
+		.sort((a, b) => severityOrder[b.detail.severity] - severityOrder[a.detail.severity]),
+)
+
+watch(
+	() => props.focusedDetailId,
+	(id) => {
+		if (
+			props.classItem.flags.some(
+				(flag) => String(flag.detail.id) === id && flag.detail.severity === 'hidden',
+			)
+		) {
+			showHiddenTraces.value = true
+		}
+	},
+	{ immediate: true },
+)
+
+const showCopyFeedback = ref(false)
+const copyingCelDetails = reactive<Set<string>>(new Set())
+const copiedCelDetails = reactive<Set<string>>(new Set())
+
+const truncatedPath = computed(() => truncateMiddle(props.classItem.filePath))
+const pathTooltip = computed(() =>
+	truncatedPath.value !== props.classItem.filePath ? props.classItem.filePath : undefined,
+)
+
+const allFlagsMarked = computed(
+	() => getMarkedFlagsCount(props.classItem.flags) === props.classItem.flags.length,
+)
+
+const isLoadingSource = computed(() =>
+	props.classItem.flags.some((flag) => props.loadingIssues.has(flag.issueId)),
+)
+
+const decompiledSource = computed(() => {
+	const sources = props.classItem.flags.map((flag) => props.decompiledSources.get(flag.detail.id))
+	return sources.find(isUsableDecompiledSource) ?? sources.find((source) => source?.trim())
+})
+
+const highlightedSource = computed(() => {
+	const source = decompiledSource.value
+	if (!source) return []
+	return highlightCodeLines(source, 'java')
+})
+
+const sourcePane = ref<HTMLElement>()
+const scrollSource = useFastScroll()
+const sourceMatches = computed(() => {
+	const lines = decompiledSource.value?.split('\n') ?? []
+	const cache = new Map<string, ReturnType<typeof findSourceMatches>>()
+	return (value: string) => {
+		if (!cache.has(value)) cache.set(value, findSourceMatches(lines, value))
+		return cache.get(value)!
+	}
+})
+function canHighlight(value: string) {
+	return sourceMatches.value(value).size > 0
+}
+const traceMatches = computed(() =>
+	mergeSourceMatches(
+		visibleFlags.value
+			.flatMap((flag) => collectSourceValues(flag.detail.data))
+			.map((value) => sourceMatches.value(value)),
+	),
+)
+const globalMatches = computed(() =>
+	mergeSourceMatches(globalHighlightWords.value.map((value) => sourceMatches.value(value))),
+)
+const activeMatches = computed(() => mergeSourceMatches([traceMatches.value, globalMatches.value]))
+const navigableMatches = computed(() =>
+	[...activeMatches.value]
+		.sort(([a], [b]) => a - b)
+		.flatMap(([line, ranges]) => ranges.map((range) => ({ line, range }))),
+)
+let currentHighlight = -1
+
+function clearSelectedHighlight() {
+	for (const mark of sourcePane.value?.querySelectorAll('[data-selected-source-match]') ?? []) {
+		mark.removeAttribute('data-selected-source-match')
+	}
+}
+
+function navigateHighlight(direction: number) {
+	const matches = navigableMatches.value
+	if (!matches.length || !sourcePane.value) return false
+	if (currentHighlight < 0) currentHighlight = direction > 0 ? 0 : matches.length - 1
+	else currentHighlight = (currentHighlight + direction + matches.length) % matches.length
+	const { line, range } = matches[currentHighlight]
+	selectSourceMatch(line, range)
+	return true
+}
+
+defineExpose({
+	navigateHighlight,
+	canNavigateHighlight: () => !!navigableMatches.value.length && !!sourcePane.value,
+})
+
+const sourceWithMatches = computed(() => {
+	const document = sourcePane.value?.ownerDocument
+	if (!document || !activeMatches.value.size) return highlightedSource.value
+	return highlightedSource.value.map((line, index) => {
+		const matches = activeMatches.value.get(index)
+		return matches ? markSourceLine(line, matches, document, globalMatches.value.get(index)) : line
+	})
+})
+watch(
+	sourceWithMatches,
+	() => {
+		currentHighlight = -1
+		clearSelectedHighlight()
+	},
+	{ flush: 'post' },
+)
+
+const sourceContent = ref<HTMLElement>()
+const selectedLines = ref<{ start: number; end: number }>()
+let lineSelection: { anchor: number; pointerId: number } | undefined
+
+function isLineSelected(line: number) {
+	return (
+		!!selectedLines.value && line >= selectedLines.value.start && line <= selectedLines.value.end
+	)
+}
+
+useEventListener(
+	computed(() => sourceContent.value?.ownerDocument),
+	'selectionchange',
+	() => {
+		if (!selectedLines.value) return
+		const content = sourceContent.value
+		const selection = content?.ownerDocument.getSelection()
+		const range = selection?.rangeCount ? selection.getRangeAt(0) : undefined
+		const first = content?.querySelector(`[data-source-line="${selectedLines.value.start}"] pre`)
+		const last = content?.querySelector(`[data-source-line="${selectedLines.value.end}"] pre`)
+		if (
+			!range ||
+			selection?.isCollapsed ||
+			range.startContainer !== first ||
+			range.endContainer !== last ||
+			range.startOffset !== 0 ||
+			range.endOffset !== last?.childNodes.length
+		) {
+			selectedLines.value = undefined
+		}
+	},
+)
+
+watch(sourceContent, () => {
+	selectedLines.value = undefined
+	lineSelection = undefined
+})
+
+function selectSourceLines(anchor: number, end: number) {
+	const content = sourceContent.value
+	const first = content?.querySelector(`[data-source-line="${Math.min(anchor, end)}"] pre`)
+	const last = content?.querySelector(`[data-source-line="${Math.max(anchor, end)}"] pre`)
+	if (!content || !first || !last) return
+	const range = content.ownerDocument.createRange()
+	range.setStart(first, 0)
+	range.setEnd(last, last.childNodes.length)
+	const selection = content.ownerDocument.getSelection()
+	selection?.removeAllRanges()
+	selection?.addRange(range)
+	if (
+		selectedLines.value?.start !== Math.min(anchor, end) ||
+		selectedLines.value?.end !== Math.max(anchor, end)
+	) {
+		selectedLines.value = { start: Math.min(anchor, end), end: Math.max(anchor, end) }
+	}
+}
+
+function startLineSelection(event: PointerEvent, line: number) {
+	if (event.button !== 0) return
+	event.preventDefault()
+	const gutter = event.currentTarget as HTMLElement
+	gutter.setPointerCapture(event.pointerId)
+	lineSelection = { anchor: line, pointerId: event.pointerId }
+	selectSourceLines(line, line)
+}
+
+function dragLineSelection(event: PointerEvent) {
+	if (!lineSelection || lineSelection.pointerId !== event.pointerId) return
+	const rows = sourceContent.value?.querySelectorAll<HTMLElement>('[data-source-line]')
+	if (!rows?.length) return
+	let start = 0
+	let end = rows.length - 1
+	while (start < end) {
+		const middle = Math.floor((start + end) / 2)
+		if (event.clientY >= rows[middle].getBoundingClientRect().bottom) start = middle + 1
+		else end = middle
+	}
+	selectSourceLines(lineSelection.anchor, Number(rows[start].dataset.sourceLine))
+}
+
+function endLineSelection(event: PointerEvent) {
+	if (lineSelection?.pointerId === event.pointerId) lineSelection = undefined
+}
+
+const scrollbarMatches = ref<{ position: number; global: boolean; trace: boolean }[]>([])
+const scrollbarTrackWidth = ref(0)
+
+function updateScrollbarMatches() {
+	const pane = sourcePane.value
+	const content = sourceContent.value
+	if (pane) scrollbarTrackWidth.value = pane.offsetWidth - pane.clientWidth
+	const scrollHeight = pane?.scrollHeight ?? 0
+	if (!props.splitView || !pane || !content || scrollHeight <= pane.clientHeight) {
+		scrollbarMatches.value = []
+		return
+	}
+	const positions = new Map<number, { global: boolean; trace: boolean }>()
+	for (const row of content.querySelectorAll<HTMLElement>('.source-match-row')) {
+		const position = ((row.offsetTop + row.offsetHeight / 2) / scrollHeight) * 100
+		const line = Number(row.dataset.sourceLine)
+		const previous = positions.get(position)
+		positions.set(position, {
+			global: !!previous?.global || globalMatches.value.has(line),
+			trace: !!previous?.trace || traceMatches.value.has(line),
+		})
+	}
+	const nextPositions = [...positions].map(([position, matches]) => ({
+		position,
+		...matches,
+	}))
+	if (
+		nextPositions.length !== scrollbarMatches.value.length ||
+		nextPositions.some(
+			(match, index) =>
+				match.position !== scrollbarMatches.value[index].position ||
+				match.global !== scrollbarMatches.value[index].global ||
+				match.trace !== scrollbarMatches.value[index].trace,
+		)
+	) {
+		scrollbarMatches.value = nextPositions
+	}
+}
+
+const updateScrollbarMatchesAfterResize = useDebounceFn(updateScrollbarMatches, 100)
+useResizeObserver(sourcePane, updateScrollbarMatchesAfterResize)
+useResizeObserver(sourceContent, updateScrollbarMatchesAfterResize)
+watch(sourceWithMatches, () => nextTick(updateScrollbarMatches), {
+	flush: 'post',
+})
+
+function seekSource(event: PointerEvent) {
+	const track = event.currentTarget as HTMLElement
+	const pane = sourcePane.value
+	if (!pane || (event.type === 'pointerdown' && event.button !== 0)) return
+	if (event.type === 'pointerdown') {
+		event.preventDefault()
+		track.setPointerCapture(event.pointerId)
+	} else if (!track.hasPointerCapture(event.pointerId)) return
+	const bounds = track.getBoundingClientRect()
+	const position = Math.max(0, Math.min(1, (event.clientY - bounds.top) / bounds.height))
+	pane.scrollTo({
+		top: position * pane.scrollHeight - pane.clientHeight / 2,
+		behavior: 'instant',
+	})
+}
+
+function scrollSourceTrack(event: WheelEvent) {
+	const pane = sourcePane.value
+	if (!pane) return
+	const unit = event.deltaMode === 1 ? 20 : event.deltaMode === 2 ? pane.clientHeight : 1
+	pane.scrollBy({
+		top: event.deltaY * unit,
+		left: event.deltaX * unit,
+		behavior: 'instant',
+	})
+}
+
+async function selectSourceValue(value: string) {
+	await nextTick()
+	const firstMatch = sourceMatches.value(value).entries().next().value
+	if (!firstMatch) return
+	const [line, ranges] = firstMatch
+	currentHighlight = navigableMatches.value.findIndex(
+		(match) =>
+			match.line === line &&
+			match.range.start <= ranges[0].start &&
+			match.range.end > ranges[0].start,
+	)
+	selectSourceMatch(line, ranges[0])
+}
+
+function selectClickedMatch(event: MouseEvent) {
+	const pane = sourcePane.value
+	if (!pane || pane.ownerDocument.getSelection()?.isCollapsed === false) return
+	const mark = (event.target as HTMLElement | null)?.closest<HTMLElement>('[data-source-match]')
+	const row = mark?.closest<HTMLElement>('[data-source-line]')
+	if (!mark || !row || !pane.contains(mark)) return
+	const line = Number(row.dataset.sourceLine)
+	const start = Number(mark.dataset.sourceStart)
+	const index = navigableMatches.value.findIndex(
+		(match) => match.line === line && match.range.start <= start && match.range.end > start,
+	)
+	if (index < 0) return
+	currentHighlight = index
+	const match = navigableMatches.value[index]
+	selectSourceMatch(match.line, match.range)
+}
+
+function selectSourceMatch(line: number, range: SourceMatch) {
+	const pane = sourcePane.value
+	clearSelectedHighlight()
+	const marks = [
+		...(pane?.querySelectorAll<HTMLElement>(`[data-source-line="${line}"] [data-source-match]`) ??
+			[]),
+	].filter(
+		(element) =>
+			Number(element.dataset.sourceStart) < range.end &&
+			Number(element.dataset.sourceEnd) > range.start,
+	)
+	const match = marks[0]
+	if (!pane || !match) return
+	for (const mark of marks) mark.setAttribute('data-selected-source-match', '')
+	const bounds = pane.getBoundingClientRect()
+	const target = match.getBoundingClientRect()
+	const viewportLeft = bounds.left + pane.clientLeft
+	const viewportRight = viewportLeft + pane.clientWidth
+	let left = pane.scrollLeft
+	if (
+		target.left + pane.scrollLeft >= viewportLeft &&
+		target.right + pane.scrollLeft <= viewportRight
+	) {
+		left = 0
+	} else if (target.left < viewportLeft) {
+		left += target.left - viewportLeft - 8
+	} else if (target.right > viewportRight) {
+		left += Math.max(0, Math.min(target.right - viewportRight + 8, target.left - viewportLeft - 8))
+	}
+	const viewportTop = bounds.top + pane.clientTop
+	const viewportBottom = viewportTop + pane.clientHeight
+	const top =
+		target.top >= viewportTop && target.bottom <= viewportBottom
+			? pane.scrollTop
+			: pane.scrollTop + target.top - viewportTop - (pane.clientHeight - target.height) / 2
+	scrollSource(pane, top, left)
+}
+
+function emitVerdict(event: TraceVerdictEvent) {
+	emit('verdict', event)
+}
+
+async function copyToClipboard() {
+	const source = decompiledSource.value
+	if (!source) return
+
+	try {
+		const document = sourcePane.value?.ownerDocument
+		const view = document?.defaultView
+		if (document && view?.ClipboardItem && view.navigator.clipboard.write) {
+			await view.navigator.clipboard.write([
+				new view.ClipboardItem({
+					'text/plain': new Blob([source], { type: 'text/plain' }),
+					'text/html': new Blob([codeClipboardHtml(document, source, 'java')], {
+						type: 'text/html',
+					}),
+				}),
+			])
+		} else {
+			await (view?.navigator ?? navigator).clipboard.writeText(formatCodeBlock(source, 'java'))
+		}
+		showCopyFeedback.value = true
+		setTimeout(() => {
+			showCopyFeedback.value = false
+		}, 2000)
+	} catch (error) {
+		console.error('Failed to copy code:', error)
+	}
+}
+
+async function copyDetailCelInput(detailId: string) {
+	if (copyingCelDetails.has(detailId)) return
+
+	copyingCelDetails.add(detailId)
+	try {
+		const input = await client.labrinth.tech_review_internal.getDetailRuleInput(detailId)
+		await navigator.clipboard.writeText(JSON.stringify(input, null, 2))
+		copiedCelDetails.add(detailId)
+		setTimeout(() => {
+			copiedCelDetails.delete(detailId)
+		}, 2000)
+	} catch (error) {
+		console.error('Failed to copy CEL input:', error)
+		addNotification({
+			type: 'error',
+			title: 'Failed to copy CEL input',
+			text: 'An error occurred while loading the trace rule input.',
+		})
+	} finally {
+		copyingCelDetails.delete(detailId)
+	}
+}
+
+function trimSlashes(path: string): string {
+	if (path.startsWith('/')) {
+		path = path.slice(1)
+	}
+	if (path.endsWith('/')) {
+		path = path.slice(0, -1)
+	}
+	return path
+}
+
+/**
+ * Resolves the slicer workspace entry for a class group, 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))
+	const filePath = trimSlashes(group.filePath)
+	const hasFileExtension = (filePath.split('/').pop() || '').includes('.')
+	return `${jarPath}/${hasFileExtension ? filePath : `${filePath}.class`}`
+}
+</script>
+
+<template>
+	<div
+		:class="
+			splitView
+				? 'archive-class-panes grid min-h-0 min-w-0 gap-y-1'
+				: 'flex min-h-0 min-w-0 flex-col gap-1'
+		"
+		:style="splitView ? { '--traces-width': `${tracesWidth}px` } : undefined"
+	>
+		<div
+			class="flex min-w-0 shrink-0 items-center justify-between gap-2"
+			@click="!splitView && emit('toggle')"
+		>
+			<div class="flex min-w-0 grow items-center gap-2 pl-4">
+				<IconButton
+					v-if="!splitView"
+					type="quiet"
+					label="Toggle details"
+					class="transition-transform"
+					:class="{ 'rotate-180': expanded }"
+				>
+					<ChevronDownIcon class="h-5 w-5 text-contrast" />
+				</IconButton>
+
+				<div class="group/file-actions flex min-w-0 items-center gap-1">
+					<span
+						v-tooltip="pathTooltip"
+						class="min-w-0 truncate font-mono text-sm font-semibold text-primary"
+						:class="{ 'opacity-50': allFlagsMarked }"
+					>
+						{{ truncatedPath }}
+					</span>
+					<FileActions :file="file" :entry-path="slicerEntry(file.download_url, classItem)" />
+				</div>
+
+				<div class="ml-auto flex items-center gap-2">
+					<Transition name="fade">
+						<div v-if="isLoadingSource" class="text-secondary">
+							<span class="flex items-center gap-1.5 text-sm font-medium text-secondary">
+								<LoaderCircleIcon class="size-4 animate-spin" />
+								Loading source...
+							</span>
+						</div>
+					</Transition>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="expanded" class="contents">
+			<aside
+				:class="
+					splitView
+						? 'col-start-3 row-span-2 row-start-1 flex min-h-0 min-w-0 flex-col pb-1 pl-1'
+						: 'contents'
+				"
+				:aria-label="splitView ? 'Traces' : undefined"
+			>
+				<div
+					:class="splitView ? 'flex min-h-0 flex-col overflow-hidden' : 'contents'"
+					:style="
+						splitView && $slots.conversation
+							? {
+									height: tracesHeight === null ? 'calc(50% - 0.5rem)' : `${tracesHeight}px`,
+									maxHeight: 'calc(50% - 0.5rem)',
+									flexShrink: 0,
+								}
+							: { flex: 1 }
+					"
+				>
+					<div
+						v-if="splitView || hiddenTraceCount > 0"
+						class="flex shrink-0 items-center justify-between gap-2 pb-1 pt-1"
+					>
+						<h4 class="m-0 text-sm font-semibold text-primary">
+							Traces ({{ getMarkedFlagsCount(classItem.flags) }}/{{ classItem.flags.length }})
+						</h4>
+						<Button
+							v-if="!splitView && hiddenTraceCount > 0"
+							type="quiet"
+							size="sm"
+							:aria-pressed="showHiddenTraces"
+							:aria-label="showHiddenTraces ? 'Hide hidden traces' : 'Show hidden traces'"
+							@click="showHiddenTraces = !showHiddenTraces"
+						>
+							<EyeIcon v-if="showHiddenTraces" aria-hidden="true" />
+							<EyeOffIcon v-else aria-hidden="true" />
+							Hidden ({{ hiddenTraceCount }})
+						</Button>
+					</div>
+					<div data-trace-list :class="splitView ? 'min-h-0 flex-1 overflow-y-auto' : 'contents'">
+						<p v-if="!visibleFlags.length" class="m-0 py-1.5 text-sm text-secondary">
+							All traces are hidden.
+						</p>
+						<div
+							v-for="flag in visibleFlags"
+							:id="`tech-review-detail-${flag.detail.id}`"
+							:key="`${flag.issueId}-${flag.detail.id}`"
+							class="flex shrink-0 flex-col gap-0.5 border-0 border-b border-solid border-surface-3 py-1.5 first:pt-0 last:border-b-0"
+							:class="{ 'pl-1': splitView }"
+						>
+							<div class="flex flex-wrap items-center justify-between gap-2">
+								<div
+									class="flex flex-wrap items-center gap-1.5"
+									:class="{
+										'opacity-50': isPreReviewed(flag.detail.id, flag.detail.status),
+									}"
+								>
+									<TraceName :issue-type="flag.issueType" :severity="flag.detail.severity" />
+								</div>
+
+								<div class="flex flex-wrap items-center gap-1">
+									<IconButton
+										v-tooltip="
+											copiedCelDetails.has(flag.detail.id) ? 'Copied!' : 'Copy CEL to clipboard'
+										"
+										type="quiet"
+										size="sm"
+										:label="
+											copiedCelDetails.has(flag.detail.id) ? 'Copied!' : 'Copy CEL to clipboard'
+										"
+										:disabled="copyingCelDetails.has(flag.detail.id)"
+										@click="copyDetailCelInput(flag.detail.id)"
+									>
+										<LoaderCircleIcon
+											v-if="copyingCelDetails.has(flag.detail.id)"
+											class="!size-4 !min-h-4 !min-w-4 animate-spin"
+											aria-hidden="true"
+										/>
+										<CheckIcon
+											v-else-if="copiedCelDetails.has(flag.detail.id)"
+											class="!size-4 !min-h-4 !min-w-4"
+											aria-hidden="true"
+										/>
+										<ClipboardCopyIcon
+											v-else
+											class="!size-4 !min-h-4 !min-w-4"
+											aria-hidden="true"
+										/>
+									</IconButton>
+									<VerdictButtons
+										variant="trace"
+										:detail="flag.detail"
+										@global-safe="
+											emitVerdict({
+												detail: flag.detail,
+												decision: 'safe',
+												scope: 'global',
+											})
+										"
+										@local-safe="
+											emitVerdict({
+												detail: flag.detail,
+												decision: 'safe',
+												scope: 'local',
+											})
+										"
+										@local-unsafe="
+											emitVerdict({
+												detail: flag.detail,
+												decision: 'malware',
+												scope: 'local',
+											})
+										"
+										@global-unsafe="
+											emitVerdict({
+												detail: flag.detail,
+												decision: 'malware',
+												scope: 'global',
+											})
+										"
+									/>
+								</div>
+							</div>
+							<TraceData
+								v-if="flag.detail.data && Object.keys(flag.detail.data).length > 0"
+								:value="flag.detail.data"
+								:can-highlight="canHighlight"
+								@select="selectSourceValue"
+							/>
+						</div>
+					</div>
+				</div>
+				<HeightDivider v-if="$slots.conversation" v-model="tracesHeight" />
+				<div v-if="$slots.conversation" class="flex min-h-0 flex-1 flex-col gap-2.5">
+					<slot name="conversation" />
+				</div>
+			</aside>
+			<PanelDivider
+				v-if="splitView"
+				v-model="tracesWidth"
+				class="col-start-2 row-span-2 row-start-1"
+				label="Traces width"
+				width-property="--traces-width"
+				side="right"
+				:min="220"
+				:max="720"
+				:reserve="200"
+				:default-width="360"
+			/>
+			<div
+				:class="
+					splitView
+						? 'source-scroll-area relative col-start-1 row-start-2 min-h-0 min-w-0'
+						: 'contents'
+				"
+			>
+				<section
+					ref="sourcePane"
+					:class="[
+						splitView
+							? 'review-scrollbars h-full min-h-0 min-w-0 overflow-auto pr-1 [container-type:inline-size]'
+							: 'contents',
+						{ 'overflow-x-hidden': splitView && wrapCode },
+					]"
+					:aria-label="splitView ? 'File content' : undefined"
+				>
+					<div
+						v-if="highlightedSource.length > 0"
+						ref="sourceContent"
+						class="relative min-h-full bg-surface-1"
+						:class="{
+							'w-max min-w-full': splitView && !wrapCode,
+							'source-line-wrap w-full min-w-0': wrapCode,
+						}"
+					>
+						<div
+							class="sticky left-0 top-0 z-10 h-0"
+							:class="splitView && !wrapCode ? 'w-[100cqw]' : 'w-full'"
+						>
+							<IconButton
+								v-tooltip="'Copy code'"
+								type="quiet"
+								size="sm"
+								label="Copy code"
+								class="!absolute right-0 top-2 bg-surface-1"
+								@click.stop="copyToClipboard"
+							>
+								<CopyIcon v-if="!showCopyFeedback" />
+								<CheckIcon v-else />
+							</IconButton>
+						</div>
+
+						<div
+							data-source-code
+							class="py-3"
+							:class="[
+								wrapCode ? 'w-full min-w-0' : 'w-max',
+								{ 'source-line-selection': selectedLines },
+							]"
+							@click="selectClickedMatch"
+							@pointermove="dragLineSelection"
+							@pointerup="endLineSelection"
+							@pointercancel="endLineSelection"
+							@lostpointercapture="endLineSelection"
+						>
+							<div
+								v-for="(line, n) in sourceWithMatches"
+								:key="n"
+								class="flex font-mono text-[13px] leading-[1.6]"
+								:data-source-line="n"
+								:class="{
+									'source-match-row': activeMatches.has(n),
+									'trace-source-match-row': traceMatches.has(n),
+									'source-selected-row': isLineSelected(n),
+								}"
+							>
+								<div
+									class="source-line-number shrink-0 cursor-text touch-none select-none border-0 border-r border-solid border-surface-5 px-4 py-0 text-right text-primary"
+									style="min-width: 3.5rem"
+									title="Drag to select lines"
+									@pointerdown="startLineSelection($event, n)"
+								>
+									{{ n + 1 }}
+								</div>
+								<div class="min-w-0 flex-1 px-4 py-0 text-primary">
+									<pre v-html="line || ' '"></pre>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div v-else-if="!isLoadingSource" class="p-4">
+						<p class="text-sm text-secondary">
+							Source code not available or failed to decompile for this file.
+						</p>
+					</div>
+					<p v-else class="m-0 p-4 text-sm text-secondary" role="status">Loading source...</p>
+				</section>
+				<div
+					v-if="splitView"
+					aria-hidden="true"
+					class="absolute inset-y-0 right-0 z-20 touch-none overflow-hidden"
+					:style="{ width: `max(0.75rem, ${scrollbarTrackWidth}px)` }"
+					@pointerdown.stop="seekSource"
+					@pointermove="seekSource"
+					@wheel.prevent="scrollSourceTrack"
+				>
+					<span
+						v-for="match in scrollbarMatches"
+						:key="match.position"
+						class="absolute right-0.5 h-0.5 opacity-50"
+						:style="{
+							top: `${match.position}%`,
+							width: `${Math.max(2, (scrollbarTrackWidth || 6) - 4)}px`,
+							background:
+								match.global && match.trace
+									? 'linear-gradient(to right, var(--color-blue) 50%, var(--color-orange) 50%)'
+									: match.global
+										? 'var(--color-blue)'
+										: 'var(--color-orange)',
+						}"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+@property --traces-width {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 360px;
+}
+
+@property --review-scrollbar-color {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: transparent;
+}
+
+.review-scrollbars {
+	--review-scrollbar-color: transparent;
+	--overlay-scrollbar-color: var(--review-scrollbar-color);
+	transition: --review-scrollbar-color 1750ms ease;
+}
+
+.review-scrollbars:hover,
+.source-scroll-area:hover .review-scrollbars {
+	--review-scrollbar-color: var(--color-scrollbar);
+	transition-duration: 200ms;
+}
+
+.review-scrollbars,
+.review-scrollbars :deep(*) {
+	scrollbar-color: var(--review-scrollbar-color) transparent;
+}
+
+.review-scrollbars::-webkit-scrollbar-thumb,
+.review-scrollbars :deep(*::-webkit-scrollbar-thumb) {
+	background: var(--review-scrollbar-color);
+}
+
+@media (hover: none) {
+	.review-scrollbars {
+		--review-scrollbar-color: var(--color-scrollbar);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.review-scrollbars {
+		transition: none;
+	}
+}
+
+.trace-source-match-row {
+	background: color-mix(in srgb, var(--color-orange-bg) 50%, transparent);
+}
+
+.source-line-number:hover {
+	background: color-mix(in srgb, var(--color-blue) 15%, transparent);
+	color: var(--color-blue);
+	box-shadow: inset 3px 0 var(--color-blue);
+}
+
+.source-selected-row {
+	background: color-mix(in srgb, var(--color-blue) 15%, transparent);
+}
+
+.source-selected-row .source-line-number {
+	background: color-mix(in srgb, var(--color-blue) 20%, transparent);
+	color: var(--color-blue);
+	font-weight: 700;
+	box-shadow: inset 3px 0 var(--color-blue);
+}
+
+.source-line-selection :deep(::selection) {
+	background: transparent;
+	color: inherit;
+}
+
+.source-scroll-area > .review-scrollbars {
+	scrollbar-width: auto;
+}
+
+.source-scroll-area > .review-scrollbars::-webkit-scrollbar {
+	width: calc(0.75rem + 4px);
+}
+
+:deep(mark[data-source-match]) {
+	background: transparent;
+	color: inherit;
+	text-decoration: underline;
+	text-decoration-style: wavy;
+	text-decoration-color: var(--color-orange);
+}
+
+:deep(mark[data-global-source-match]) {
+	text-decoration-color: var(--color-blue);
+}
+
+:deep(mark[data-selected-source-match]) {
+	background: color-mix(in srgb, var(--color-orange) 50%, transparent);
+}
+
+:deep(mark[data-selected-source-match][data-global-source-match]) {
+	background: color-mix(in srgb, var(--color-blue) 50%, transparent);
+}
+
+.archive-class-panes {
+	grid-template-rows: auto minmax(0, 1fr);
+	grid-template-columns: minmax(0, 1fr) 8px min(var(--traces-width), max(220px, calc(100% - 208px)));
+}
+
+pre {
+	all: unset;
+	display: inline;
+	white-space: pre;
+}
+
+.source-line-wrap pre {
+	display: block;
+	white-space: break-spaces;
+	overflow-wrap: anywhere;
+}
+
+.fade-enter-active {
+	transition: opacity 0.3s ease-in;
+	transition-delay: 0.2s;
+}
+
+.fade-leave-active {
+	transition: opacity 0.15s ease-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/apps/frontend/src/components/project-review/tech-review/file-detail/folder-menu.vue b/apps/frontend/src/components/project-review/tech-review/file-detail/folder-menu.vue
new file mode 100644
index 00000000000..bb17124e81f
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/file-detail/folder-menu.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { FloatingMenu } from '@modrinth/ui'
+import { inject, onBeforeUnmount, provide, ref, watch } from 'vue'
+
+import { folderMenuLockKey, registerFolderMenuChildKey } from '../menus'
+
+const props = withDefaults(defineProps<{ disabled?: boolean; showDelay?: number }>(), {
+	disabled: false,
+	showDelay: 250,
+})
+const menu = ref<InstanceType<typeof FloatingMenu>>()
+const trigger = ref<HTMLElement>()
+const panel = ref<HTMLElement>()
+const lockedMenu = inject(folderMenuLockKey, ref<symbol>())
+const menuId = Symbol('FolderMenu')
+let showTimer: ReturnType<typeof setTimeout> | undefined
+let hideTimer: ReturnType<typeof setTimeout> | undefined
+let pointerWithin = false
+const childMenus = new Set<(event: MouseEvent) => void>()
+let disposed = false
+
+function clearTimers() {
+	clearTimeout(showTimer)
+	clearTimeout(hideTimer)
+}
+
+function show(delayed = false) {
+	clearTimers()
+	if (!canShow()) return
+	if (delayed) {
+		showTimer = setTimeout(() => {
+			if (canShow()) menu.value?.show()
+		}, props.showDelay)
+	} else menu.value?.show()
+}
+
+function canShow() {
+	return !props.disabled && (!lockedMenu.value || lockedMenu.value === menuId)
+}
+
+watch(lockedMenu, (owner) => {
+	if (owner && owner !== menuId) {
+		clearTimers()
+		menu.value?.hide()
+	}
+})
+
+function hide() {
+	clearTimers()
+	hideTimer = setTimeout(() => {
+		const activeElement = trigger.value?.ownerDocument.activeElement
+		const focusWithin =
+			!!activeElement &&
+			(trigger.value?.contains(activeElement) || panel.value?.contains(activeElement))
+		if (!pointerWithin && childMenus.size === 0 && !focusWithin) menu.value?.hide()
+	}, 80)
+}
+
+function enter(delayed = false) {
+	pointerWithin = true
+	show(delayed)
+}
+
+function leave() {
+	pointerWithin = false
+	hide()
+}
+
+function onPanelClick(event: MouseEvent) {
+	for (const dismiss of [...childMenus]) dismiss(event)
+}
+
+provide(registerFolderMenuChildKey, (dismiss) => {
+	childMenus.add(dismiss)
+	lockedMenu.value = menuId
+	clearTimeout(hideTimer)
+	return () => {
+		childMenus.delete(dismiss)
+		if (childMenus.size === 0 && lockedMenu.value === menuId) lockedMenu.value = undefined
+		if (!disposed) hide()
+	}
+})
+
+onBeforeUnmount(() => {
+	disposed = true
+	if (lockedMenu.value === menuId) lockedMenu.value = undefined
+	clearTimers()
+})
+</script>
+
+<template>
+	<FloatingMenu
+		ref="menu"
+		trigger="click"
+		:disabled="disabled"
+		placement="right-start"
+		:arrow="false"
+		bare
+		@close="clearTimers"
+	>
+		<div
+			ref="trigger"
+			@mouseenter="enter(true)"
+			@mouseleave="leave"
+			@focusin="show()"
+			@focusout="hide"
+			@click.stop="clearTimers"
+		>
+			<slot />
+		</div>
+		<template #popper>
+			<div
+				ref="panel"
+				@mouseenter="enter()"
+				@mouseleave="leave"
+				@focusin="show()"
+				@focusout="hide"
+				@click.capture="onPanelClick"
+			>
+				<slot name="popper" />
+			</div>
+		</template>
+	</FloatingMenu>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue b/apps/frontend/src/components/project-review/tech-review/file-detail/index.vue
similarity index 53%
rename from apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue
rename to apps/frontend/src/components/project-review/tech-review/file-detail/index.vue
index 28f8d1127e8..a8b566513eb 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileDetailTab.vue
+++ b/apps/frontend/src/components/project-review/tech-review/file-detail/index.vue
@@ -1,32 +1,38 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { injectNotificationManager, Toggle } from '@modrinth/ui'
+import { useLocalStorage } from '@vueuse/core'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
 
 import IssueDetailPath from '~/components/ui/moderation/IssueDetailPath.vue'
 
-import { canUpdateGlobalDetail, getFileDetailCount, verdictToDecision } from './helpers'
-import TechRevClassItem from './TechRevClassItem.vue'
-import TechRevVerdictButtons from './TechRevVerdictButtons.vue'
+import { canUpdateGlobalDetail, getFileDetailCount, verdictToDecision } from '../helpers'
+import PanelDivider from '../panel-divider.vue'
 import type {
 	ClassGroup,
 	FlagItem,
 	FlattenedFileReport,
 	JarGroup,
 	TraceVerdictEvent,
-} from './types'
-import { injectTechReviewDecisions } from './use-tech-review-decisions'
+} from '../types'
+import { useFastScroll } from '../use-fast-scroll'
+import VerdictButtons from '../verdict/buttons.vue'
+import { injectTechReviewDecisions } from '../verdict/use-decisions'
+import ArchiveTree from './archive-tree.vue'
+import ClassItem from './class-item.vue'
+import { isUsableDecompiledSource } from './source-status'
 
 const props = defineProps<{
 	file: FlattenedFileReport
+	fileTree?: boolean
 	focusedDetailId?: string | null
 	loadingIssues: Set<string>
+	settledIssues: Set<string>
 	decompiledSources: Map<string, string>
 }>()
 
 const emit = defineEmits<{
 	refetch: []
-	loadIssueSources: [issueIds: string[]]
 	allFlagsResolved: []
 }>()
 
@@ -47,7 +53,31 @@ const {
 	updateGlobalIssueDetails,
 } = injectTechReviewDecisions()
 
-const hideGloballyPassed = ref(true)
+const treeWidth = useLocalStorage('moderation-tech-review-tree-width', 256)
+const tracesWidth = useLocalStorage('moderation-tech-review-traces-width', 360)
+const panel = ref<HTMLElement>()
+const scrollTrace = useFastScroll()
+const archiveTree = ref<InstanceType<typeof ArchiveTree>>()
+const classDetail = ref<InstanceType<typeof ClassItem>>()
+
+defineExpose({
+	navigateFile: (direction: number) => archiveTree.value?.navigateFile(direction) ?? false,
+	navigateHighlight: (direction: number) =>
+		classDetail.value?.navigateHighlight(direction) ?? false,
+	canNavigateFile: (direction: number) => archiveTree.value?.canNavigateFile(direction) ?? false,
+	canNavigateHighlight: () => classDetail.value?.canNavigateHighlight() ?? false,
+})
+const selectedClassKey = ref<string>()
+const selectedClass = computed(() =>
+	groupedByClass.value.find((item) => item.key === selectedClassKey.value),
+)
+
+function selectClass(classItem: ClassGroup) {
+	selectedClassKey.value = classItem.key
+}
+
+const showGloballyPassed = useLocalStorage('moderation-tech-review-show-globally-passed', false)
+const showHidden = useLocalStorage('moderation-tech-review-show-hidden', false)
 const isBatchUpdating = ref(false)
 const expandedClasses = reactive<Set<string>>(new Set())
 const autoExpandedFileIds = reactive<Set<string>>(new Set())
@@ -68,10 +98,6 @@ const globallyResolvedCount = computed(() => {
 	)
 })
 
-const remainingUnmarkedCount = computed(() => {
-	return getFileDetailCount(props.file) - getFileMarkedCount(props.file)
-})
-
 const selectedFileFlags = computed<FlagItem[]>(() =>
 	props.file.issues.flatMap((issue) =>
 		issue.details.map((detail) => ({
@@ -82,6 +108,49 @@ const selectedFileFlags = computed<FlagItem[]>(() =>
 	),
 )
 
+const filterCounts = computed(() => {
+	let globallyPassed = 0
+	let hidden = 0
+	for (const { detail } of selectedFileFlags.value) {
+		const passed = isDetailGloballyPassed(detail)
+		if (passed && (showHidden.value || detail.severity !== 'hidden')) globallyPassed++
+		if (detail.severity === 'hidden' && (showGloballyPassed.value || !passed)) hidden++
+	}
+	return { globallyPassed, hidden }
+})
+
+function getRemainingVerdictProps(flags: FlagItem[]) {
+	return {
+		variant: 'remaining' as const,
+		remainingCount: flags.length - getMarkedFlagsCount(flags),
+		remainingFlags: flags.filter(
+			({ detail }) => getDetailDecision(detail.id, detail.status) === 'pending',
+		),
+		onSelectFile: async (fileKey: string) => {
+			const flags = selectedFileFlags.value.filter(
+				({ detail }) => `${detail.jar ?? ''}::${detail.file_path}` === fileKey,
+			)
+			if (flags.every(({ detail }) => detail.severity === 'hidden')) showHidden.value = true
+			if (flags.every(({ detail }) => isDetailGloballyPassed(detail)))
+				showGloballyPassed.value = true
+			await nextTick()
+			const group = groupedByClass.value.find((item) => item.key === fileKey)
+			if (group) {
+				selectClass(group)
+				expandClass(group)
+			}
+		},
+		globalDisabled: isBatchUpdating.value || getRemainingGlobalDetailCount(flags) === 0,
+		localDisabled: isBatchUpdating.value,
+		onGlobalSafe: () => batchMarkRemainingGlobally(flags, 'safe'),
+		onLocalSafe: () => batchMarkRemaining(flags, 'safe'),
+		onLocalUnsafe: () => batchMarkRemaining(flags, 'unsafe'),
+		onGlobalUnsafe: () => batchMarkRemainingGlobally(flags, 'unsafe'),
+	}
+}
+
+const fileVerdictProps = computed(() => getRemainingVerdictProps(selectedFileFlags.value))
+
 function getJarFlags(jarGroup: JarGroup): FlagItem[] {
 	return jarGroup.classes.flatMap((classItem) => classItem.flags)
 }
@@ -350,10 +419,12 @@ const groupedByClass = computed<ClassGroup[]>(() => {
 
 	for (const issue of props.file.issues) {
 		for (const detail of issue.details) {
-			if (hideGloballyPassed.value && isDetailGloballyPassed(detail)) {
+			if (!showGloballyPassed.value && isDetailGloballyPassed(detail)) {
 				continue
 			}
 
+			if (props.fileTree && !showHidden.value && detail.severity === 'hidden') continue
+
 			const classKey = `${detail.jar ?? ''}::${detail.file_path}`
 			if (!classMap.has(classKey)) {
 				classMap.set(classKey, {
@@ -382,6 +453,25 @@ const groupedByClass = computed<ClassGroup[]>(() => {
 	return Array.from(classMap.values())
 })
 
+const unavailableSources = computed(
+	() =>
+		new Set(
+			groupedByClass.value
+				.filter(
+					(group) =>
+						group.flags.length > 0 &&
+						group.flags.every(
+							(flag) =>
+								props.settledIssues.has(flag.issueId) && !props.loadingIssues.has(flag.issueId),
+						) &&
+						!group.flags.some((flag) =>
+							isUsableDecompiledSource(props.decompiledSources.get(flag.detail.id)),
+						),
+				)
+				.map((group) => group.key),
+		),
+)
+
 const groupedByJar = computed<JarGroup[]>(() => {
 	const jarMap = new Map<string, JarGroup>()
 
@@ -405,17 +495,9 @@ const groupedByJar = computed<JarGroup[]>(() => {
 	})
 })
 
-function loadClassSources(classItem: ClassGroup) {
-	const issueIds = [...new Set(classItem.flags.map((flag) => flag.issueId))]
-	if (issueIds.length > 0) {
-		emit('loadIssueSources', issueIds)
-	}
-}
-
 function expandClass(classItem: ClassGroup) {
 	if (expandedClasses.has(classItem.key)) return
 	expandedClasses.add(classItem.key)
-	loadClassSources(classItem)
 }
 
 function toggleClass(classItem: ClassGroup) {
@@ -427,6 +509,11 @@ function toggleClass(classItem: ClassGroup) {
 }
 
 async function focusDetail(detailId: string) {
+	const detail = props.file.issues
+		.flatMap((issue) => issue.details)
+		.find((item) => String(item.id) === detailId)
+	if (detail?.severity === 'hidden') showHidden.value = true
+	if (detail && isDetailGloballyPassed(detail)) showGloballyPassed.value = true
 	await nextTick()
 
 	const classItem = groupedByClass.value.find((group) =>
@@ -434,18 +521,44 @@ async function focusDetail(detailId: string) {
 	)
 
 	if (classItem) {
+		if (props.fileTree) selectClass(classItem)
 		expandClass(classItem)
 	}
 
 	await nextTick()
 
-	if (!import.meta.client) return
-
-	window.requestAnimationFrame(() => {
-		document.getElementById(`tech-review-detail-${detailId}`)?.scrollIntoView({
-			behavior: 'smooth',
-			block: 'center',
-		})
+	const view = panel.value?.ownerDocument.defaultView
+	if (!view) return
+
+	view.requestAnimationFrame(() => {
+		const trace = panel.value?.ownerDocument.getElementById(`tech-review-detail-${detailId}`)
+		if (!trace) return
+		const reducedMotion = view.matchMedia('(prefers-reduced-motion: reduce)').matches
+		const list = trace.closest<HTMLElement>('[data-trace-list]')
+		if (props.fileTree && list) {
+			const target = trace.getBoundingClientRect()
+			const viewportTop = list.getBoundingClientRect().top + list.clientTop
+			const viewportBottom = viewportTop + list.clientHeight
+			const top =
+				target.top >= viewportTop && target.bottom <= viewportBottom
+					? list.scrollTop
+					: list.scrollTop + target.top - viewportTop - (list.clientHeight - target.height) / 2
+			scrollTrace(list, top)
+		} else {
+			trace.scrollIntoView({ behavior: 'instant', block: 'nearest' })
+		}
+		if (!reducedMotion) {
+			trace.getAnimations().forEach((animation) => animation.cancel())
+			trace.animate(
+				[
+					{
+						backgroundColor: 'color-mix(in srgb, var(--color-orange) 25%, transparent)',
+					},
+					{ backgroundColor: 'transparent' },
+				],
+				{ duration: 1100, delay: 150, easing: 'ease-out', fill: 'backwards' },
+			)
+		}
 	})
 }
 
@@ -462,7 +575,7 @@ watch(
 watch(
 	[() => props.file.id, groupedByClass],
 	([fileId, classes]) => {
-		if (!fileId || classes.length === 0 || autoExpandedFileIds.has(fileId)) return
+		if (props.fileTree || !fileId || classes.length === 0 || autoExpandedFileIds.has(fileId)) return
 
 		autoExpandedFileIds.add(fileId)
 
@@ -477,69 +590,147 @@ watch(
 </script>
 
 <template>
-	<div
-		v-if="getFileDetailCount(file) > 0"
-		class="flex flex-wrap items-center justify-between gap-3 p-4"
-	>
-		<TechRevVerdictButtons
-			v-if="remainingUnmarkedCount > 0"
-			variant="remaining"
-			:remaining-count="remainingUnmarkedCount"
-			:global-disabled="isBatchUpdating || getRemainingGlobalDetailCount(selectedFileFlags) === 0"
-			:local-disabled="isBatchUpdating"
-			@global-safe="batchMarkRemainingGlobally(selectedFileFlags, 'safe')"
-			@local-safe="batchMarkRemaining(selectedFileFlags, 'safe')"
-			@local-unsafe="batchMarkRemaining(selectedFileFlags, 'unsafe')"
-			@global-unsafe="batchMarkRemainingGlobally(selectedFileFlags, 'unsafe')"
-		/>
-		<label class="ml-auto flex cursor-pointer items-center gap-3 text-sm">
-			<span class="text-right text-secondary">
-				Hide globally passed
-				<span class="text-tertiary block text-xs">
-					{{ globallyResolvedCount }}/{{ getFileDetailCount(file) }} traces globally resolved
+	<div ref="panel" :class="{ 'flex min-h-0 flex-1 flex-col': fileTree }">
+		<slot name="header" :verdict-props="fileVerdictProps" />
+		<div
+			v-if="getFileDetailCount(file) > 0 && (!$slots.header || !fileTree)"
+			class="flex shrink-0 flex-wrap items-center justify-between gap-3 pb-3"
+		>
+			<VerdictButtons v-bind="fileVerdictProps" />
+			<label v-if="!fileTree" class="ml-auto flex cursor-pointer items-center gap-3 text-sm">
+				<span class="text-right text-secondary">
+					Show globally passed
+					<span class="block text-xs text-secondary">
+						{{ globallyResolvedCount }}/{{ getFileDetailCount(file) }} traces globally resolved
+					</span>
 				</span>
-			</span>
-			<Toggle v-model="hideGloballyPassed" :disabled="globallyPassedCount === 0" small />
-		</label>
-	</div>
-	<div v-for="jarGroup in groupedByJar" :key="jarGroup.key" class="flex flex-col gap-1 px-4 pb-4">
-		<div v-if="jarGroup.segments.length > 0" class="my-2">
-			<div class="flex flex-wrap items-center justify-between gap-3">
-				<IssueDetailPath
-					:segments="jarGroup.segments"
-					:decode="false"
-					class="font-mono text-sm"
-					emphasize-last
-				/>
-
-				<TechRevVerdictButtons
-					v-if="getJarRemainingUnmarkedCount(jarGroup) > 0"
-					variant="remaining"
-					jar
-					:remaining-count="getJarRemainingUnmarkedCount(jarGroup)"
-					:global-disabled="
-						isBatchUpdating || getRemainingGlobalDetailCount(getJarFlags(jarGroup)) === 0
-					"
-					:local-disabled="isBatchUpdating"
-					@global-safe="batchMarkRemainingGlobally(getJarFlags(jarGroup), 'safe')"
-					@local-safe="batchMarkRemaining(getJarFlags(jarGroup), 'safe', true)"
-					@local-unsafe="batchMarkRemaining(getJarFlags(jarGroup), 'unsafe', true)"
-					@global-unsafe="batchMarkRemainingGlobally(getJarFlags(jarGroup), 'unsafe')"
+				<Toggle v-model="showGloballyPassed" :disabled="globallyPassedCount === 0" small />
+			</label>
+		</div>
+		<div
+			v-if="fileTree"
+			class="archive-workspace grid min-h-0 flex-1"
+			:style="{ '--tree-width': `${treeWidth}px` }"
+		>
+			<ArchiveTree
+				ref="archiveTree"
+				v-model:show-globally-passed="showGloballyPassed"
+				v-model:show-hidden="showHidden"
+				:classes="groupedByClass"
+				:trace-types="file.issues.map((issue) => issue.issue_type)"
+				:unavailable-sources="unavailableSources"
+				:globally-passed-count="filterCounts.globallyPassed"
+				:hidden-count="filterCounts.hidden"
+				:selected-key="selectedClassKey"
+				:file-name="file.file_name ?? ''"
+				@select="selectClass"
+			>
+				<template #folder-actions="{ flags }">
+					<VerdictButtons v-bind="getRemainingVerdictProps(flags)" />
+				</template>
+			</ArchiveTree>
+			<PanelDivider
+				v-model="treeWidth"
+				label="File tree width"
+				width-property="--tree-width"
+				side="left"
+				:min="140"
+				:max="480"
+				:reserve="320"
+				:default-width="256"
+			/>
+			<ClassItem
+				v-if="selectedClass"
+				ref="classDetail"
+				:key="selectedClass.key"
+				v-model:traces-width="tracesWidth"
+				v-model:show-hidden-traces="showHidden"
+				:file="file"
+				:class-item="selectedClass"
+				expanded
+				split-view
+				:focused-detail-id="focusedDetailId"
+				:loading-issues="loadingIssues"
+				:decompiled-sources="decompiledSources"
+				@verdict="handleTraceVerdict"
+			>
+				<template v-if="$slots.conversation" #conversation><slot name="conversation" /></template>
+			</ClassItem>
+			<div
+				v-else
+				class="archive-empty-panes grid min-h-0 min-w-0"
+				:style="{ '--traces-width': `${tracesWidth}px` }"
+			>
+				<section aria-label="File content" class="min-h-0 min-w-0 overflow-auto">
+					<p class="m-0 p-4 text-secondary">No files match the current filters.</p>
+				</section>
+				<PanelDivider
+					v-model="tracesWidth"
+					label="Traces width"
+					width-property="--traces-width"
+					side="right"
+					:min="220"
+					:max="720"
+					:reserve="200"
+					:default-width="360"
 				/>
+				<div class="flex min-h-0 min-w-0 flex-col gap-2.5 pb-1 pl-1">
+					<slot name="conversation" />
+				</div>
 			</div>
 		</div>
-
-		<TechRevClassItem
-			v-for="classItem in jarGroup.classes"
-			:key="classItem.key"
-			:file="file"
-			:class-item="classItem"
-			:expanded="expandedClasses.has(classItem.key)"
-			:focused-detail-id="focusedDetailId"
-			:loading-issues="loadingIssues"
-			:decompiled-sources="decompiledSources"
-			@toggle="toggleClass(classItem)"
-			@verdict="handleTraceVerdict"
-		/>
+		<template v-else>
+			<div v-for="jarGroup in groupedByJar" :key="jarGroup.key" class="flex flex-col gap-1 pb-4">
+				<div v-if="jarGroup.segments.length > 0" class="my-2">
+					<div class="flex flex-wrap items-center justify-between gap-3">
+						<IssueDetailPath
+							:segments="jarGroup.segments"
+							:decode="false"
+							class="font-mono text-sm"
+							emphasize-last
+						/>
+
+						<VerdictButtons
+							variant="remaining"
+							jar
+							:remaining-count="getJarRemainingUnmarkedCount(jarGroup)"
+							:global-disabled="
+								isBatchUpdating || getRemainingGlobalDetailCount(getJarFlags(jarGroup)) === 0
+							"
+							:local-disabled="isBatchUpdating"
+							@global-safe="batchMarkRemainingGlobally(getJarFlags(jarGroup), 'safe')"
+							@local-safe="batchMarkRemaining(getJarFlags(jarGroup), 'safe', true)"
+							@local-unsafe="batchMarkRemaining(getJarFlags(jarGroup), 'unsafe', true)"
+							@global-unsafe="batchMarkRemainingGlobally(getJarFlags(jarGroup), 'unsafe')"
+						/>
+					</div>
+				</div>
+
+				<ClassItem
+					v-for="classItem in jarGroup.classes"
+					:key="classItem.key"
+					:file="file"
+					:class-item="classItem"
+					:expanded="expandedClasses.has(classItem.key)"
+					:focused-detail-id="focusedDetailId"
+					:loading-issues="loadingIssues"
+					:decompiled-sources="decompiledSources"
+					@toggle="toggleClass(classItem)"
+					@verdict="handleTraceVerdict"
+				/>
+			</div>
+		</template>
 	</div>
 </template>
+
+<style scoped>
+.archive-workspace {
+	grid-template-columns:
+		min(var(--tree-width), max(140px, calc(100% - 328px)))
+		8px minmax(0, 1fr);
+}
+
+.archive-empty-panes {
+	grid-template-columns: minmax(0, 1fr) 8px min(var(--traces-width), max(220px, calc(100% - 208px)));
+}
+</style>
diff --git a/apps/frontend/src/components/project-review/tech-review/file-detail/project-card.vue b/apps/frontend/src/components/project-review/tech-review/file-detail/project-card.vue
new file mode 100644
index 00000000000..ecb3b629720
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/file-detail/project-card.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import {
+	ArchiveIcon,
+	BrainCogIcon,
+	CheckIcon,
+	CircleDollarSignIcon,
+	CodeIcon,
+	CopyIcon,
+	ExternalIcon,
+	EyeIcon,
+	GitForkIcon,
+	MegaphoneIcon,
+	MonitorCogIcon,
+	MoreVerticalIcon,
+	RadioTowerIcon,
+	ServerIcon,
+	SparklesIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonLink,
+	type ButtonMenuOption,
+	getProjectTypeIcon,
+	TagItem,
+	TeleportOverflowMenu,
+	truncatedTooltip,
+} from '@modrinth/ui'
+import { getPrimaryProjectType } from '@modrinth/utils'
+import { useClipboard, useMagicKeys } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import { injectProjectReviewPageContext } from '~/providers/project-review'
+import { reviewExternalUrl } from '~/providers/project-review/project-links'
+
+import { projectTypeLabels } from '../../project-info/type-labels'
+import { injectReviewContext } from '../../review-panel/context'
+import ProjectMember from './project-member.vue'
+
+const {
+	project,
+	projectV2,
+	members,
+	memberStats,
+	membersLoading,
+	membersError,
+	organizationMembers,
+	disclosures,
+} = injectProjectReviewPageContext()
+const projectNameRef = ref<HTMLElement | null>(null)
+const { revealPanel } = injectReviewContext()
+const disclosurePresentation = {
+	ai_content: { label: 'AI-generated content', icon: SparklesIcon, key: 'ai' },
+	ai_functionality: {
+		label: 'Generative AI functionality',
+		icon: BrainCogIcon,
+		key: 'ai-functionality',
+	},
+	advertisements: { label: 'Contains advertising', icon: MegaphoneIcon, key: 'ads' },
+	paid_features: {
+		label: 'Contains paid features',
+		icon: CircleDollarSignIcon,
+		key: 'paid-features',
+	},
+	telemetry: { label: 'Contains telemetry', icon: RadioTowerIcon, key: 'telemetry' },
+	derivative_work: { label: 'Derivative work', icon: GitForkIcon, key: 'derivative-content' },
+	epilepsy_triggers: { label: 'Photosensitivity warning', icon: EyeIcon, key: 'photosensitivity' },
+	system_interactions: {
+		label: 'External system interactions',
+		icon: MonitorCogIcon,
+		key: 'system-interactions',
+	},
+	archived: { label: 'Archived', icon: ArchiveIcon, key: 'archive' },
+}
+const activeDisclosures = computed(() =>
+	disclosures.currentSnapshot.value.disclosures.map(({ type }) => ({
+		type,
+		...disclosurePresentation[type],
+	})),
+)
+const sourceUrl = computed(() => reviewExternalUrl(project.value?.link_urls.source?.url))
+const config = useRuntimeConfig()
+const { shift: shiftHeld } = useMagicKeys()
+const { copy: copyProjectId, copied: projectIdCopied } = useClipboard({ copiedDuring: 2000 })
+const { copy: copyPermalink, copied: permalinkCopied } = useClipboard({ copiedDuring: 2000 })
+const projectType = computed(() =>
+	project.value?.minecraft_server
+		? 'server'
+		: project.value
+			? getPrimaryProjectType(project.value)
+			: 'project',
+)
+const projectUrl = computed(
+	() =>
+		`/${projectV2.value?.project_type ?? project.value?.project_types[0]}/${project.value?.slug ?? project.value?.id}`,
+)
+const permalink = computed(
+	() =>
+		`${shiftHeld.value ? 'https://modrinth.com' : config.public.siteUrl}/project/${project.value?.id}`,
+)
+const analyticsOwnerId = computed(
+	() =>
+		members.value.find((member) => member.is_owner)?.user.id ??
+		organizationMembers.value.find((member) => member.is_owner)?.user.id,
+)
+const options = computed<ButtonMenuOption[]>(() => [
+	{
+		id: 'copy-project-id',
+		label: projectIdCopied.value ? 'Copied project ID' : 'Copy project ID',
+		icon: projectIdCopied.value ? CheckIcon : CopyIcon,
+		action: () => copyProjectId(project.value?.id ?? ''),
+	},
+	{
+		id: 'copy-permalink',
+		label: permalinkCopied.value ? 'Copied permanent link' : 'Copy permanent link',
+		icon: permalinkCopied.value ? CheckIcon : CopyIcon,
+		action: () => copyPermalink(permalink.value),
+	},
+	{
+		id: 'analytics',
+		type: 'link',
+		label: 'Go to analytics',
+		icon: ExternalIcon,
+		href: `/dashboard/analytics?${new URLSearchParams({
+			user: analyticsOwnerId.value ?? '',
+			a_projects: project.value?.id ?? '',
+		})}`,
+		target: '_blank',
+		rel: 'noopener noreferrer',
+		disabled: !analyticsOwnerId.value,
+	},
+])
+</script>
+
+<template>
+	<section
+		v-if="project"
+		aria-label="Project overview"
+		class="max-h-[35%] min-h-0 shrink-0 overflow-y-auto border-0 border-t border-solid border-surface-3 pr-2 pt-1.5"
+	>
+		<div>
+			<div class="flex min-w-0 items-center gap-1.5">
+				<NuxtLink
+					:to="projectUrl"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="group/project flex min-w-0 items-center gap-2 rounded text-primary"
+				>
+					<Avatar :src="project.icon_url" :alt="project.name" size="30px" no-shadow />
+					<span
+						ref="projectNameRef"
+						v-tooltip="truncatedTooltip(projectNameRef, project.name)"
+						class="min-w-0 truncate text-sm font-semibold group-hover/project:underline"
+					>
+						{{ project.name }}
+					</span>
+				</NuxtLink>
+				<TagItem class="shrink-0 !px-1.5 !py-0.5 !text-[10px] !font-medium !leading-tight">
+					<component
+						:is="projectType === 'server' ? ServerIcon : getProjectTypeIcon(projectType)"
+						class="!size-3"
+						aria-hidden="true"
+					/>
+					{{ projectTypeLabels[projectType] ?? 'Project' }}
+				</TagItem>
+				<div class="ml-auto flex shrink-0 items-center gap-1">
+					<ButtonLink
+						v-if="sourceUrl"
+						v-tooltip="'Source code'"
+						:href="sourceUrl"
+						target="_blank"
+						type="quiet"
+						size="xs"
+						icon-only
+						circular
+						aria-label="Source code"
+					>
+						<CodeIcon aria-hidden="true" />
+					</ButtonLink>
+					<TeleportOverflowMenu
+						label="Project options"
+						:options="options"
+						type="quiet"
+						size="xs"
+						class="shrink-0"
+					>
+						<MoreVerticalIcon aria-hidden="true" />
+						<span class="sr-only">Project options</span>
+					</TeleportOverflowMenu>
+				</div>
+			</div>
+
+			<hr class="my-1.5 border-0 border-t border-solid border-surface-3" />
+			<p v-if="membersLoading" role="status" class="mb-0 mt-2 text-xs text-secondary">
+				Loading members...
+			</p>
+			<p v-else-if="membersError" role="alert" class="mb-0 mt-2 text-xs text-secondary">
+				Could not load members.
+			</p>
+			<ul v-else aria-label="Project members" class="m-0 flex list-none flex-col gap-1.5 p-0">
+				<ProjectMember
+					v-for="member in members"
+					:key="member.user.id"
+					:member="member"
+					:stats="memberStats[member.user.id] ?? []"
+				/>
+			</ul>
+			<section
+				v-if="activeDisclosures.length"
+				aria-label="Project disclosures"
+				class="mt-1.5 border-0 border-t border-solid border-surface-3 pl-1 pt-1.5"
+			>
+				<ul class="m-0 flex list-none flex-wrap gap-x-2 gap-y-0.5 p-0">
+					<li v-for="disclosure in activeDisclosures" :key="disclosure.type">
+						<button
+							type="button"
+							class="group/disclosure flex w-fit items-start gap-1 rounded border-0 bg-transparent p-0 text-left text-xs leading-4 text-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+							:class="{ 'text-orange': disclosure.type === 'epilepsy_triggers' }"
+							@click="revealPanel(`${disclosure.key}-disclosure`)"
+						>
+							<component :is="disclosure.icon" class="mt-0.5 size-3 shrink-0" aria-hidden="true" />
+							<span class="group-hover/disclosure:underline">{{ disclosure.label }}</span>
+						</button>
+					</li>
+				</ul>
+			</section>
+		</div>
+	</section>
+</template>
diff --git a/apps/frontend/src/components/project-review/tech-review/file-detail/project-member.vue b/apps/frontend/src/components/project-review/tech-review/file-detail/project-member.vue
new file mode 100644
index 00000000000..6c940f793bc
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/file-detail/project-member.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { CrownIcon } from '@modrinth/assets'
+import { Avatar } from '@modrinth/ui'
+
+import ProjectStatusStats from '~/components/ProjectStatusStats.vue'
+
+defineProps<{
+	member: Labrinth.Projects.v3.TeamMember
+	stats: { status: string; count: number }[]
+}>()
+</script>
+
+<template>
+	<li class="flex min-w-0 items-center gap-2 pl-1">
+		<Avatar
+			:src="member.user.avatar_url"
+			:alt="member.user.username"
+			size="1.5rem"
+			circle
+			no-shadow
+		/>
+		<div class="min-w-0">
+			<div class="flex min-w-0 items-center gap-1 text-xs">
+				<NuxtLink
+					:to="`/user/${member.user.username}`"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="min-w-0 truncate font-medium text-primary hover:underline"
+					:title="member.user.username"
+				>
+					{{ member.user.username }}
+				</NuxtLink>
+				<CrownIcon
+					v-if="member.is_owner"
+					class="size-3 shrink-0 text-secondary"
+					aria-label="Owner"
+				/>
+			</div>
+			<p class="m-0 truncate text-xs text-secondary">{{ member.role }}</p>
+		</div>
+		<ProjectStatusStats :stats="stats" class="!mt-0 shrink-0 items-center !gap-x-1" />
+	</li>
+</template>
diff --git a/apps/frontend/src/components/project-review/tech-review/file-detail/source-matches.ts b/apps/frontend/src/components/project-review/tech-review/file-detail/source-matches.ts
new file mode 100644
index 00000000000..b75d614dfe3
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/file-detail/source-matches.ts
@@ -0,0 +1,136 @@
+export interface SourceMatch {
+	start: number
+	end: number
+}
+
+export function parseSourceHighlightWords(value: string): string[] {
+	return [
+		...new Set(
+			value
+				.split(/[,\r\n]+/)
+				.map((word) => word.trim())
+				.filter(Boolean),
+		),
+	]
+}
+
+function normalizeWord(word: unknown): string | null {
+	if (typeof word !== 'string') return null
+	let normalized = word
+	if (!normalized.includes('://')) {
+		if (normalized.includes('/')) normalized = normalized.split('/').pop() ?? ''
+		normalized = normalized.replace(/\.class$/, '')
+		normalized = normalized.replace(/\$/g, '.')
+	}
+	return normalized
+}
+
+/** Finds case-insensitive literal substrings, using simple names for Java class paths. */
+export function findSourceMatches(lines: string[], value: string): Map<number, SourceMatch[]> {
+	const text = normalizeWord(value.trim())
+	const matches = new Map<number, SourceMatch[]>()
+	if (!text) return matches
+	const pattern = new RegExp(text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi')
+	for (const [lineNumber, line] of lines.entries()) {
+		const ranges = [...line.matchAll(pattern)].map((match) => ({
+			start: match.index,
+			end: match.index + match[0].length,
+		}))
+		if (ranges.length) matches.set(lineNumber, ranges)
+	}
+	return matches
+}
+
+/** Marks text nodes without changing syntax highlighting or interpreting trace values as HTML. */
+export function markSourceLine(
+	html: string,
+	matches: SourceMatch[],
+	document: Document,
+	globalMatches: SourceMatch[] = [],
+): string {
+	const template = document.createElement('template')
+	template.innerHTML = html
+	const walker = document.createTreeWalker(template.content, 4)
+	const nodes: Text[] = []
+	while (walker.nextNode()) nodes.push(walker.currentNode as Text)
+	let offset = 0
+	for (const node of nodes) {
+		const text = node.data
+		const end = offset + text.length
+		const ranges = matches
+			.filter((match) => match.start < end && match.end > offset)
+			.flatMap((match) => {
+				const start = Math.max(offset, match.start)
+				const finish = Math.min(end, match.end)
+				const boundaries = [
+					...new Set([
+						start,
+						finish,
+						...globalMatches
+							.flatMap((global) => [global.start, global.end])
+							.filter((boundary) => boundary > start && boundary < finish),
+					]),
+				].sort((a, b) => a - b)
+				return boundaries.slice(0, -1).map((boundary, index) => ({
+					start: boundary,
+					end: boundaries[index + 1],
+				}))
+			})
+		if (ranges.length) {
+			const fragment = document.createDocumentFragment()
+			let cursor = 0
+			for (const range of ranges) {
+				const start = Math.max(0, range.start - offset)
+				const finish = Math.min(text.length, range.end - offset)
+				fragment.append(document.createTextNode(text.slice(cursor, start)))
+				const mark = document.createElement('mark')
+				mark.setAttribute('data-source-match', '')
+				if (
+					globalMatches.some((global) => global.start <= range.start && global.end >= range.end)
+				) {
+					mark.setAttribute('data-global-source-match', '')
+				}
+				mark.setAttribute('data-source-start', String(offset + start))
+				mark.setAttribute('data-source-end', String(offset + finish))
+				mark.textContent = text.slice(start, finish)
+				fragment.append(mark)
+				cursor = finish
+			}
+			fragment.append(document.createTextNode(text.slice(cursor)))
+			node.replaceWith(fragment)
+		}
+		offset = end
+	}
+	return template.innerHTML
+}
+
+/** Collects string values from trace data for highlighting and source navigation. */
+export function collectSourceValues(value: unknown): string[] {
+	if (Array.isArray(value)) return value.flatMap((item) => collectSourceValues(item))
+	if (value && typeof value === 'object') {
+		return Object.values(value).flatMap((item) => collectSourceValues(item))
+	}
+	return typeof value === 'string' ? [value] : []
+}
+
+/** Combines overlapping highlights so each source character is marked only once. */
+export function mergeSourceMatches(
+	groups: Map<number, SourceMatch[]>[],
+): Map<number, SourceMatch[]> {
+	const lines = new Map<number, SourceMatch[]>()
+	for (const group of groups) {
+		for (const [line, ranges] of group) {
+			lines.set(line, [...(lines.get(line) ?? []), ...ranges])
+		}
+	}
+	for (const [line, ranges] of lines) {
+		const merged: SourceMatch[] = []
+		for (const range of ranges.sort((a, b) => a.start - b.start || b.end - a.end)) {
+			const previous = merged[merged.length - 1]
+			if (previous && range.start <= previous.end) previous.end = Math.max(previous.end, range.end)
+			else merged.push({ ...range })
+		}
+		lines.set(line, merged)
+	}
+	return lines
+}
diff --git a/apps/frontend/src/components/project-review/tech-review/file-detail/source-status.ts b/apps/frontend/src/components/project-review/tech-review/file-detail/source-status.ts
new file mode 100644
index 00000000000..628566702c6
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/file-detail/source-status.ts
@@ -0,0 +1,11 @@
+/** Distinguishes usable source from empty output and decompiler diagnostic placeholders. */
+export function isUsableDecompiledSource(source: string | null | undefined): source is string {
+	if (!source?.trim()) return false
+	const content = source.replace(/\/\*[\s\S]*?\*\/|\/\/[^\r\n]*/g, '').trim()
+	if (!content) return false
+	return !/^(?:(?:[\w.$/-]+)\s+)?(?:took too long to decompile|failed to decompile|unable to decompile|could not decompile|decompilation (?:failed|error|timed out)|decompiler (?:failed|error|timed out)|manual analysis is required|(?:java\.[\w.]+(?:Exception|Error))\s*:)/i.test(
+		content,
+	)
+}
+
+// TODO - to make this check better, eventually labrinth will get a boolean if it decompiles correctly and we'll use that instead of this string check
diff --git a/apps/frontend/src/components/project-review/tech-review/files/actions.vue b/apps/frontend/src/components/project-review/tech-review/files/actions.vue
new file mode 100644
index 00000000000..db96672c402
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/files/actions.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import {
+	CoffeeIcon,
+	DownloadIcon,
+	ExternalIcon,
+	MoreVerticalIcon,
+	SpinnerIcon,
+} from '@modrinth/assets'
+import { type ButtonMenuOption, TeleportOverflowMenu } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import { injectReviewSlicer } from '~/providers/project-review/review-slicer'
+
+import type { FlattenedFileReport } from '../types'
+
+const props = defineProps<{
+	file: FlattenedFileReport
+	entryPath?: string
+}>()
+
+const slicer = injectReviewSlicer(null)
+const slicerRequest = ref<number>()
+const menuOpen = ref(false)
+const openingSlicer = computed(
+	() => !!slicer?.loadingFiles.value && slicerRequest.value === slicer.openRequests.value,
+)
+const slicerUrl = computed(() => {
+	const url = `https://slicer.run/?url=${encodeURIComponent(props.file.download_url)}`
+	return props.entryPath ? `${url}&file=${encodeURIComponent(props.entryPath)}` : url
+})
+
+function openExternal(event: MouseEvent) {
+	const element = event.currentTarget as HTMLElement
+	element.ownerDocument.defaultView?.open(slicerUrl.value, '_blank', 'noopener,noreferrer')
+}
+
+function openSlicer(event: MouseEvent) {
+	if (slicer) {
+		slicer.open([props.file.download_url], props.entryPath)
+		slicerRequest.value = slicer.openRequests.value
+	} else {
+		openExternal(event)
+	}
+}
+
+const options = computed<ButtonMenuOption[]>(() => [
+	{
+		id: 'open-slicer',
+		label: 'Open in Slicer',
+		icon: CoffeeIcon,
+		disabled: openingSlicer.value,
+		action: openSlicer,
+		trailingAction: {
+			label: 'Open in Slicer in a new tab',
+			icon: ExternalIcon,
+			action: openExternal,
+		},
+	},
+	{
+		id: 'download',
+		type: 'link',
+		label: 'Download',
+		icon: DownloadIcon,
+		href: props.file.download_url,
+		download: props.file.file_name,
+	},
+])
+</script>
+
+<template>
+	<TeleportOverflowMenu
+		type="quiet"
+		size="sm"
+		label="File options"
+		placement="right-start"
+		:aria-label="entryPath ? 'Class file options' : 'Archive options'"
+		circular
+		class="shrink-0 transition-opacity"
+		:class="
+			menuOpen
+				? 'opacity-100'
+				: 'opacity-0 focus:opacity-100 group-focus-within/file-actions:opacity-100 group-hover/file-actions:opacity-100 [@media(hover:none)]:opacity-100'
+		"
+		:options="options"
+		@open="menuOpen = true"
+		@close="menuOpen = false"
+		@click.stop
+	>
+		<template #open-slicer="{ option }">
+			<SpinnerIcon
+				v-if="openingSlicer"
+				class="animate-spin motion-reduce:animate-none"
+				aria-hidden="true"
+			/>
+			<CoffeeIcon v-else aria-hidden="true" />
+			{{ option.label }}
+		</template>
+		<MoreVerticalIcon />
+	</TeleportOverflowMenu>
+</template>
diff --git a/apps/frontend/src/components/project-review/tech-review/files/item.vue b/apps/frontend/src/components/project-review/tech-review/files/item.vue
new file mode 100644
index 00000000000..3452a5c0e2d
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/files/item.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { defineMessages, TagItem, useFormatBytes, useVIntl } from '@modrinth/ui'
+import { computed } from 'vue'
+
+import { getFileDetailCount, getHighestSeverity } from '../helpers'
+import { severityPresentation } from '../traces/presentation'
+import type { FlattenedFileReport } from '../types'
+import { injectTechReviewDecisions } from '../verdict/use-decisions'
+
+const props = defineProps<{
+	file: FlattenedFileReport
+	selected?: boolean
+}>()
+
+const emit = defineEmits<{
+	viewFlags: [file: FlattenedFileReport]
+}>()
+
+const formatBytes = useFormatBytes()
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	manual: {
+		id: 'moderation.tech-review.file.manual',
+		defaultMessage: 'Manual review',
+	},
+	noFlags: {
+		id: 'moderation.tech-review.file.no-flags',
+		defaultMessage: 'No flags',
+	},
+})
+const { getFileMarkedCount } = injectTechReviewDecisions()
+const details = computed(() => props.file.issues.flatMap((issue) => issue.details))
+const hasFlags = computed(() => details.value.length > 0)
+const canSelect = computed(() => !props.selected)
+const isManualReview = computed(() => props.file.flag_reason.toString() === 'manual')
+const fileSizeLabel = computed(() => formatBytes(props.file.file_size))
+
+const markedCount = computed(() => getFileMarkedCount(props.file))
+const traceCount = computed(() => getFileDetailCount(props.file))
+const severity = computed(() => getHighestSeverity(details.value))
+const severityLabel = computed(
+	() => severity.value.charAt(0).toUpperCase() + severity.value.slice(1),
+)
+const severityStyle = computed(() => ({
+	'--_bg-color': severityPresentation[severity.value].bgColor,
+	'--_color': severityPresentation[severity.value].color,
+}))
+
+function viewFlags() {
+	if (canSelect.value) {
+		emit('viewFlags', props.file)
+	}
+}
+</script>
+
+<template>
+	<button
+		type="button"
+		:disabled="!canSelect"
+		:aria-current="selected ? 'true' : undefined"
+		class="grid h-[72px] w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-4 rounded-lg border-0 px-3 py-2.5 text-left transition-[background-color,filter] focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand disabled:cursor-default"
+		:class="[
+			selected ? 'bg-surface-3' : 'bg-transparent',
+			canSelect ? 'cursor-pointer hover:bg-surface-3 hover:brightness-125' : 'cursor-default',
+		]"
+		@click="viewFlags"
+	>
+		<span class="flex min-w-0 flex-col gap-1.5">
+			<span class="truncate text-sm font-medium text-contrast" :title="file.file_name">{{
+				file.file_name
+			}}</span>
+			<span class="flex min-w-0 items-center gap-2 text-xs text-secondary">
+				<span v-if="file.version_number" class="truncate">{{ file.version_number }}</span>
+				<span v-if="file.version_number" aria-hidden="true">·</span>
+				<span class="shrink-0">{{ fileSizeLabel }}</span>
+			</span>
+		</span>
+		<span class="flex shrink-0 flex-col items-end gap-1.5">
+			<TagItem v-if="hasFlags" class="!px-1.5 !py-0.5 !text-xs" :style="severityStyle">
+				<component
+					:is="severityPresentation[severity].icon"
+					:style="{ color: severityPresentation[severity].color }"
+					aria-hidden="true"
+				/>
+				{{ severityLabel }}
+			</TagItem>
+			<span v-else class="text-xs" :class="isManualReview ? 'text-blue' : 'text-secondary'">{{
+				formatMessage(isManualReview ? messages.manual : messages.noFlags)
+			}}</span>
+			<span v-if="hasFlags" class="text-xs tabular-nums text-secondary"
+				>{{ markedCount }}/{{ traceCount }} reviewed</span
+			>
+		</span>
+	</button>
+</template>
diff --git a/apps/frontend/src/components/project-review/tech-review/files/menu.vue b/apps/frontend/src/components/project-review/tech-review/files/menu.vue
new file mode 100644
index 00000000000..256c5c05b69
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/files/menu.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import { Input, Tabs } from '@modrinth/ui'
+import { useVirtualList } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+import { getFileDetailCount } from '../helpers'
+import type { FlattenedFileReport } from '../types'
+import { injectTechReviewDecisions } from '../verdict/use-decisions'
+import FileItem from './item.vue'
+
+const props = defineProps<{
+	files: FlattenedFileReport[]
+	selectedId: string
+}>()
+const emit = defineEmits<{ select: [file: FlattenedFileReport] }>()
+const { getFileMarkedCount } = injectTechReviewDecisions()
+const searches = ref({ pending: '', completed: '' })
+const tab = ref<string | number>('pending')
+const pending = computed(() =>
+	props.files.filter((file) => getFileMarkedCount(file) < getFileDetailCount(file)),
+)
+const completed = computed(() =>
+	props.files.filter((file) => getFileMarkedCount(file) >= getFileDetailCount(file)),
+)
+const tabs = computed(() => [
+	{ value: 'pending', label: `Pending (${pending.value.length})` },
+	{ value: 'completed', label: `Completed (${completed.value.length})` },
+])
+const activeFiles = computed(() => (tab.value === 'pending' ? pending.value : completed.value))
+const search = computed({
+	get: () => searches.value[tab.value === 'pending' ? 'pending' : 'completed'],
+	set: (value: string) => {
+		searches.value[tab.value === 'pending' ? 'pending' : 'completed'] = value
+	},
+})
+const filteredFiles = computed(() => {
+	const term = activeFiles.value.length > 6 ? search.value.trim().toLowerCase() : ''
+	return activeFiles.value.filter((file) =>
+		`${file.file_name} ${file.version_number ?? ''}`.toLowerCase().includes(term),
+	)
+})
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredFiles, {
+	itemHeight: 76,
+	overscan: 3,
+})
+watch([search, tab], () => scrollTo(0))
+watch(
+	filteredFiles,
+	() => {
+		const container = containerProps.ref.value
+		if (!container) return
+		const lastStart = Math.max(
+			0,
+			filteredFiles.value.length - Math.ceil(container.clientHeight / 76),
+		)
+		scrollTo(Math.min(Math.floor(container.scrollTop / 76), lastStart))
+	},
+	{ flush: 'post' },
+)
+</script>
+
+<template>
+	<section
+		aria-label="Archives"
+		class="review-scrollbars flex w-[30rem] max-w-[calc(100vw-2rem)] flex-col gap-2 rounded-xl border border-solid border-surface-5 bg-surface-2 p-1.5 shadow-2xl"
+	>
+		<Tabs v-model:value="tab" :tabs="tabs" />
+		<Input
+			v-if="activeFiles.length > 6"
+			v-model="search"
+			:icon="SearchIcon"
+			placeholder="Search archives..."
+			aria-label="Search archives"
+		/>
+		<div
+			v-bind="containerProps"
+			class="max-h-[60vh] overscroll-contain"
+			:style="{ height: `${Math.min(filteredFiles.length, 6) * 76}px` }"
+		>
+			<div v-bind="wrapperProps">
+				<div v-for="item in list" :key="item.data.id" class="h-[76px] pb-1">
+					<FileItem
+						:file="item.data"
+						:selected="item.data.id === selectedId"
+						@view-flags="emit('select', $event)"
+					/>
+				</div>
+			</div>
+		</div>
+		<p v-if="!filteredFiles.length" class="m-0 p-3 text-sm text-secondary">No matching archives</p>
+	</section>
+</template>
diff --git a/apps/frontend/src/components/project-review/tech-review/height-divider.vue b/apps/frontend/src/components/project-review/tech-review/height-divider.vue
new file mode 100644
index 00000000000..dc3785d07c3
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/height-divider.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const height = defineModel<number | null>({ required: true })
+const divider = ref<HTMLElement>()
+const parent = computed(() => divider.value?.parentElement)
+const pane = computed(() => divider.value?.previousElementSibling as HTMLElement | undefined)
+const { height: parentHeight } = useElementSize(parent)
+const { height: paneHeight } = useElementSize(pane)
+const maximum = computed(() => Math.floor(parentHeight.value / 2))
+const drag = ref<{ pointerId: number; y: number; height: number }>()
+
+function update(value: number) {
+	height.value = Math.round(Math.max(0, Math.min(maximum.value, value)))
+}
+
+function start(event: PointerEvent) {
+	if (event.button !== 0 || !event.isPrimary) return
+	event.preventDefault()
+	const element = event.currentTarget as HTMLElement
+	drag.value = { pointerId: event.pointerId, y: event.clientY, height: paneHeight.value }
+	element.setPointerCapture(event.pointerId)
+}
+
+function move(event: PointerEvent) {
+	if (drag.value?.pointerId !== event.pointerId) return
+	update(drag.value.height + event.clientY - drag.value.y)
+}
+
+function stop(event: PointerEvent) {
+	if (drag.value?.pointerId !== event.pointerId) return
+	drag.value = undefined
+	const element = event.currentTarget as HTMLElement
+	if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId)
+}
+
+function keydown(event: KeyboardEvent) {
+	const step = event.shiftKey ? 50 : 10
+	switch (event.key) {
+		case 'ArrowUp':
+			update(paneHeight.value - step)
+			break
+		case 'ArrowDown':
+			update(paneHeight.value + step)
+			break
+		case 'Home':
+			update(0)
+			break
+		case 'End':
+			update(maximum.value)
+			break
+		default:
+			return
+	}
+	event.preventDefault()
+}
+</script>
+
+<template>
+	<div
+		ref="divider"
+		role="separator"
+		tabindex="0"
+		aria-orientation="horizontal"
+		aria-label="Resize traces height"
+		:aria-valuemin="0"
+		:aria-valuemax="maximum"
+		:aria-valuenow="Math.round(paneHeight)"
+		class="height-divider relative h-4 shrink-0 cursor-row-resize touch-none select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+		:class="{ 'is-dragging': drag }"
+		@pointerdown="start"
+		@pointermove="move"
+		@pointerup="stop"
+		@pointercancel="stop"
+		@lostpointercapture="stop"
+		@keydown="keydown"
+		@dblclick.prevent="height = null"
+	/>
+</template>
+
+<style scoped>
+.height-divider::after {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 0;
+	width: 100%;
+	height: 1px;
+	background: var(--color-divider);
+}
+
+.height-divider:hover::after,
+.height-divider:focus-visible::after,
+.height-divider.is-dragging::after {
+	background: var(--color-brand);
+}
+</style>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/helpers.ts b/apps/frontend/src/components/project-review/tech-review/helpers.ts
similarity index 75%
rename from apps/frontend/src/components/ui/moderation/tech-review/helpers.ts
rename to apps/frontend/src/components/project-review/tech-review/helpers.ts
index ae6ee1f7732..68f884ec4ef 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/helpers.ts
+++ b/apps/frontend/src/components/project-review/tech-review/helpers.ts
@@ -1,6 +1,6 @@
 import type { Labrinth } from '@modrinth/api-client'
 
-import type { DetailDecision, FlattenedFileReport, TechRevProjectRef } from './types'
+import type { DetailDecision, FlattenedFileReport, ProjectRef } from './types'
 
 export const severityOrder: Record<Labrinth.TechReview.Internal.DelphiSeverity, number> = {
 	malware: 4,
@@ -40,7 +40,7 @@ export function truncateMiddle(str: string, maxLength = 120): string {
 export function getHighestSeverity(
 	details: { severity: Labrinth.TechReview.Internal.DelphiSeverity }[],
 ): Labrinth.TechReview.Internal.DelphiSeverity {
-	let highest: Labrinth.TechReview.Internal.DelphiSeverity = 'low'
+	let highest: Labrinth.TechReview.Internal.DelphiSeverity = 'hidden'
 	for (const detail of details) {
 		if (severityOrder[detail.severity] > severityOrder[highest]) {
 			highest = detail.severity
@@ -53,6 +53,28 @@ export function getFileDetailCount(file: FlattenedFileReport): number {
 	return file.issues.reduce((sum, issue) => sum + issue.details.length, 0)
 }
 
+export function getTechReviewState(
+	reports: readonly FlattenedFileReport[],
+	inTechReview: boolean,
+	getDecision: (
+		id: string,
+		status: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
+	) => DetailDecision = (_, status) => verdictToDecision(status),
+) {
+	const details = reports.flatMap((report) => report.issues.flatMap((issue) => issue.details))
+	const pending = details.filter(
+		(detail) => detail.severity !== 'hidden' && getDecision(detail.id, detail.status) === 'pending',
+	).length
+	const unsafe = details.filter(
+		(detail) => detail.severity !== 'hidden' && getDecision(detail.id, detail.status) === 'malware',
+	).length
+	return {
+		inTechReview,
+		pending,
+		unsafe,
+	}
+}
+
 export function flattenFileReports(
 	versions: Labrinth.TechReview.Internal.VersionReport[],
 ): FlattenedFileReport[] {
@@ -70,7 +92,7 @@ export function getVersionLabel(file: FlattenedFileReport): string {
 	return file.version_number || file.version_id
 }
 
-export function getVersionPageHref(project: TechRevProjectRef, versionId: string): string {
+export function getVersionPageHref(project: ProjectRef, versionId: string): string {
 	return `/${project.project_types[0] ?? 'project'}/${project.slug ?? project.id}/version/${versionId}`
 }
 
diff --git a/apps/frontend/src/components/project-review/tech-review/index.vue b/apps/frontend/src/components/project-review/tech-review/index.vue
index 6fc46f8d8bf..07cb37307a2 100644
--- a/apps/frontend/src/components/project-review/tech-review/index.vue
+++ b/apps/frontend/src/components/project-review/tech-review/index.vue
@@ -1,6 +1,8 @@
 <template>
 	<div
-		class="flex min-w-0 flex-col gap-1 rounded-lg border border-solid border-surface-4 bg-surface-2 p-3"
+		ref="panel"
+		class="review-scrollbars flex h-full min-h-0 min-w-0 flex-col gap-3"
+		:class="{ 'overflow-auto': !selectedFile }"
 	>
 		<p v-if="!selection" class="m-0 text-secondary">No project selected</p>
 		<div v-else-if="error || reportsQuery.isError.value" role="alert">
@@ -13,109 +15,403 @@
 		<p v-else-if="!reports.length" class="m-0 text-secondary">
 			No technical-review reports are available for this project
 		</p>
-		<template v-else-if="project">
-			<p class="m-0 text-sm text-secondary">
-				Reviewed flags indicate progress, not a safe verdict. Files without flags have no flag
-				verdict
-			</p>
-			<template v-if="selectedFile">
-				<div class="flex flex-wrap items-center justify-between gap-2">
-					<Button @click="selectedFileId = null"><LeftArrowIcon />Back to files</Button>
-					<TechRevFileActions :file="selectedFile" />
+		<FileDetail
+			v-else-if="project && selectedFile"
+			ref="fileDetail"
+			:key="selectedFile.id"
+			:file="selectedFile"
+			file-tree
+			:focused-detail-id="focusedDetailId"
+			:loading-issues="loadingIssues"
+			:settled-issues="settledIssues"
+			:decompiled-sources="decompiledSources"
+			@refetch="refreshReports"
+		>
+			<template v-if="$slots.conversation" #conversation>
+				<div
+					ref="conversationTarget"
+					class="flex min-h-0 flex-1 flex-col gap-2.5"
+					@vue:before-unmount="captureConversationScroll"
+				/>
+			</template>
+			<template #header="{ verdictProps }">
+				<div
+					class="mb-2.5 flex shrink-0 items-center gap-2 border-0 border-b border-solid border-surface-3 pb-2.5"
+				>
+					<div class="group/file-actions flex min-w-0 items-center gap-1">
+						<h3
+							class="m-0 mt-0.5 min-w-0 truncate pl-1 text-base font-semibold text-contrast"
+							:title="selectedFile.file_name"
+						>
+							{{ selectedFile.file_name }}
+						</h3>
+						<FileActions :file="selectedFile" />
+					</div>
+					<div
+						class="ml-auto flex shrink-0 items-center"
+						role="group"
+						aria-label="Archive navigation"
+					>
+						<TagItem
+							class="mr-0.5"
+							style="--_bg-color: var(--color-orange-bg); --_color: var(--color-orange)"
+							>{{ pendingReports.length }} pending</TagItem
+						>
+						<Button
+							v-tooltip="'Previous archive'"
+							type="quiet"
+							size="sm"
+							icon-only
+							aria-label="Previous archive"
+							:disabled="!previousFile"
+							@click="previousFile && selectFile(previousFile)"
+						>
+							<ChevronLeftIcon aria-hidden="true" />
+						</Button>
+						<FloatingMenu
+							ref="archiveMenu"
+							placement="bottom-end"
+							:arrow="false"
+							bare
+							@open="activateMenu(archiveMenu)"
+						>
+							<Button
+								type="quiet"
+								size="sm"
+								class="tabular-nums"
+								:aria-label="`Choose archive (${selectedFileIndex + 1}/${reports.length})`"
+							>
+								{{ selectedFileIndex + 1 }}/{{ reports.length }}
+							</Button>
+							<template #popper>
+								<ArchiveMenu :files="reports" :selected-id="selectedFile.id" @select="selectFile" />
+							</template>
+						</FloatingMenu>
+						<Button
+							v-tooltip="'Next archive'"
+							type="quiet"
+							size="sm"
+							icon-only
+							aria-label="Next archive"
+							:disabled="!nextFile"
+							@click="nextFile && selectFile(nextFile)"
+						>
+							<ChevronRightIcon aria-hidden="true" />
+						</Button>
+					</div>
+					<div aria-hidden="true" class="mr-2.5 h-6 w-px shrink-0 bg-divider" />
+					<VerdictButtons class="shrink-0" v-bind="verdictProps" />
 				</div>
-				<h3 class="m-0 break-all text-lg font-semibold text-contrast">
-					{{ selectedFile.file_name }}
-				</h3>
 				<div v-if="sourceQueries.some((query) => query.isError)" role="alert">
-					<p class="m-0">Could not load source code. Try opening the flag again</p>
+					<p class="m-0">Could not load source code for some files.</p>
 					<Button @click="retrySources">Retry</Button>
 				</div>
-				<TechRevFileDetailTab
-					:key="selectedFile.id"
-					:file="selectedFile"
-					:loading-issues="loadingIssues"
-					:decompiled-sources="decompiledSources"
-					@load-issue-sources="loadSources"
-					@refetch="refreshReports"
-				/>
-			</template>
-			<template v-else>
-				<h3 class="m-0 text-lg font-semibold text-contrast">
-					{{ `Pending files (${pendingReports.length})` }}
-				</h3>
-				<TechRevFilesTab
-					v-if="pendingReports.length"
-					:reports="pendingReports"
-					:project="project"
-					@view-flags="selectFile"
-				/>
-				<p v-else class="m-0 text-secondary">No files with unresolved flags</p>
-				<details v-if="completedReports.length">
-					<summary class="cursor-pointer py-3 font-semibold text-contrast">
-						{{ `Reviewed files (${completedReports.length})` }}
-					</summary>
-					<TechRevFilesTab
-						:reports="completedReports"
-						:project="project"
-						@view-flags="selectFile"
-					/>
-				</details>
-				<details v-if="unflaggedReports.length">
-					<summary class="cursor-pointer py-3 font-semibold text-contrast">
-						{{ `Files without flags (${unflaggedReports.length})` }}
-					</summary>
-					<TechRevFilesTab
-						:reports="unflaggedReports"
-						:project="project"
-						@view-flags="selectFile"
-					/>
-				</details>
 			</template>
-		</template>
+		</FileDetail>
+		<div
+			v-if="$slots.conversation"
+			v-show="!conversationTarget"
+			ref="conversationFallback"
+			class="flex min-h-0 flex-1 flex-col gap-2.5 border-0 border-t border-solid border-divider pt-3"
+		/>
+		<Teleport
+			v-if="$slots.conversation && conversationFallback"
+			:to="conversationTarget ?? conversationFallback"
+		>
+			<div ref="conversation" class="flex min-h-0 flex-1 flex-col gap-2.5">
+				<slot name="conversation" />
+			</div>
+		</Teleport>
+		<Teleport v-if="codeSelection && panel" :to="panel.ownerDocument.body">
+			<Button
+				ref="selectionAction"
+				class="!fixed z-50 !font-medium shadow-lg"
+				:style="{
+					left: `${codeSelection.left}px`,
+					top: `${codeSelection.top}px`,
+					maxWidth: 'calc(100vw - 16px)',
+				}"
+				:disabled="pending"
+				aria-label="Add to message"
+				@pointerdown.prevent
+				@click="addSelectedCode"
+			>
+				<span class="min-w-0 truncate">Add to message</span>
+				<ArrowRightToLineIcon aria-hidden="true" />
+			</Button>
+		</Teleport>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { LeftArrowIcon } from '@modrinth/assets'
-import { Button, injectModrinthClient } from '@modrinth/ui'
-import { useQueries } from '@tanstack/vue-query'
-import { computed, provide, ref } from 'vue'
-
-import TechRevFileActions from '~/components/ui/moderation/tech-review/TechRevFileActions.vue'
-import TechRevFileDetailTab from '~/components/ui/moderation/tech-review/TechRevFileDetailTab.vue'
-import TechRevFilesTab from '~/components/ui/moderation/tech-review/TechRevFilesTab.vue'
-import type { FlattenedFileReport } from '~/components/ui/moderation/tech-review/types'
-import { TECH_REVIEW_DECISIONS_KEY } from '~/components/ui/moderation/tech-review/use-tech-review-decisions'
+import { ArrowRightToLineIcon, ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
+import {
+	Button,
+	codeClipboardHtml,
+	FloatingMenu,
+	injectModrinthClient,
+	TagItem,
+} from '@modrinth/ui'
+import { type QueryFunctionContext, useQueries } from '@tanstack/vue-query'
+import { computed, nextTick, provide, ref, watch } from 'vue'
+
+import { useModerationKeybinds } from '~/composables/moderation'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
+import { injectReviewSubmission } from '~/providers/project-review/review-submission'
+
+import { injectProjectReviewContext, injectReviewPanelVisible } from '../layout/context'
+import { injectReviewShortcuts, reviewShortcutBlocked, useReviewEventListener } from '../shortcuts'
+import FileDetail from './file-detail/index.vue'
+import FileActions from './files/actions.vue'
+import ArchiveMenu from './files/menu.vue'
+import { provideTechReviewMenus } from './menus'
+import { createSourceRequestQueue } from './source-request-queue'
+import type { FlattenedFileReport } from './types'
+import VerdictButtons from './verdict/buttons.vue'
+import { TECH_REVIEW_DECISIONS_KEY } from './verdict/use-decisions'
+
+const emit = defineEmits<{
+	addCode: [code: string]
+	ready: [projectId: string]
+}>()
+const { pending } = injectReviewSubmission()
+const panel = ref<HTMLElement>()
+const conversationTarget = ref<HTMLElement>()
+const conversationFallback = ref<HTMLElement>()
+const conversation = ref<HTMLElement>()
+let conversationScroll: { element: Element; top: number; left: number }[] = []
+
+function captureConversationScroll() {
+	conversationScroll = [...(conversation.value?.querySelectorAll('*') ?? [])]
+		.filter((element) => element.scrollTop || element.scrollLeft)
+		.map((element) => ({
+			element,
+			top: element.scrollTop,
+			left: element.scrollLeft,
+		}))
+}
+
+watch(
+	conversationTarget,
+	async () => {
+		if (!conversationScroll.length) captureConversationScroll()
+		await nextTick()
+		for (const { element, top, left } of conversationScroll) {
+			element.scrollTop = top
+			element.scrollLeft = left
+		}
+		conversationScroll = []
+	},
+	{ flush: 'pre' },
+)
+const fileDetail = ref<InstanceType<typeof FileDetail>>()
+const panelVisible = injectReviewPanelVisible()
+const keybinds = useModerationKeybinds()
+
+function getSelectedCode() {
+	const document = panel.value?.ownerDocument
+	const selection = document?.getSelection()
+	if (
+		!document ||
+		!selection ||
+		selection.isCollapsed ||
+		!selection.rangeCount ||
+		!panel.value?.getClientRects().length
+	)
+		return
+	const range = selection.getRangeAt(0)
+	const container = range.startContainer.parentElement?.closest('[data-source-code]')
+	if (!container || !panel.value.contains(container) || !container.contains(range.endContainer))
+		return
+	const lines: string[] = []
+	for (const line of container.querySelectorAll('pre')) {
+		if (!range.intersectsNode(line)) continue
+		const selected = document.createRange()
+		selected.selectNodeContents(line)
+		let leadingIndentation = ''
+		if (range.compareBoundaryPoints(range.START_TO_START, selected) > 0) {
+			const prefix = selected.cloneRange()
+			prefix.setEnd(range.startContainer, range.startOffset)
+			const unselectedPrefix = prefix.toString()
+			if (!lines.length && /^[\t ]*$/.test(unselectedPrefix)) {
+				leadingIndentation = unselectedPrefix
+			}
+			selected.setStart(range.startContainer, range.startOffset)
+		}
+		if (range.compareBoundaryPoints(range.END_TO_END, selected) < 0)
+			selected.setEnd(range.endContainer, range.endOffset)
+		lines.push(leadingIndentation + selected.toString())
+	}
+	return lines.join('\n')
+}
+
+const shortcuts = injectReviewShortcuts()
+const selectionAction = ref<InstanceType<typeof Button>>()
+const codeSelection = ref<{ code: string; left: number; top: number }>()
+let selectingCode = false
+
+watch(
+	codeSelection,
+	(selection) => {
+		const action = selectionAction.value?.element
+		const view = action?.ownerDocument.defaultView
+		if (!selection || !action || !view) return
+		selection.left = Math.max(
+			8,
+			Math.min(selection.left, view.innerWidth - action.getBoundingClientRect().width - 8),
+		)
+	},
+	{ flush: 'post' },
+)
+
+function updateCodeSelection() {
+	codeSelection.value = undefined
+	if (selectingCode) return
+	const document = panel.value?.ownerDocument
+	const selection = document?.getSelection()
+	const range = selection?.rangeCount ? selection.getRangeAt(0) : undefined
+	const container = range?.startContainer.parentElement?.closest('.source-line-selection')
+	if (!container || !panel.value?.contains(container)) return
+	const code = getSelectedCode()
+	const view = document?.defaultView
+	if (!code?.trim() || !view || !range) return
+	const bounds = range.getBoundingClientRect()
+	if (!bounds.width && !bounds.height) return
+	codeSelection.value = {
+		code,
+		left: Math.max(8, bounds.left),
+		top: Math.max(8, Math.min(bounds.bottom + 8, view.innerHeight - 48)),
+	}
+}
+
+function scheduleCodeSelectionUpdate() {
+	void nextTick(updateCodeSelection)
+}
+
+function addSelectedCode() {
+	if (!codeSelection.value || pending.value) return
+	const code = codeSelection.value.code
+	panel.value?.ownerDocument.getSelection()?.removeAllRanges()
+	codeSelection.value = undefined
+	emit('addCode', code)
+}
+
+watch(
+	shortcuts.windows,
+	(windows, _, onCleanup) => {
+		for (const view of windows)
+			view.document.addEventListener('selectionchange', scheduleCodeSelectionUpdate)
+		onCleanup(() => {
+			for (const view of windows)
+				view.document.removeEventListener('selectionchange', scheduleCodeSelectionUpdate)
+		})
+	},
+	{ immediate: true },
+)
+useReviewEventListener(
+	'pointerdown',
+	(event) => {
+		const target = event.target as HTMLElement | null
+		if (event.button !== 0 || !target || !panel.value?.contains(target)) return
+		if (!target.closest('[data-source-code]')) return
+		selectingCode = true
+		codeSelection.value = undefined
+	},
+	{ capture: true },
+)
+useReviewEventListener('pointerup', () => {
+	if (!selectingCode) return
+	selectingCode = false
+	scheduleCodeSelectionUpdate()
+})
+useReviewEventListener('pointercancel', () => {
+	selectingCode = false
+	codeSelection.value = undefined
+})
+useReviewEventListener('blur', () => {
+	selectingCode = false
+	codeSelection.value = undefined
+})
+useReviewEventListener('scroll', scheduleCodeSelectionUpdate, { capture: true })
+useReviewEventListener('resize', scheduleCodeSelectionUpdate)
+
+useReviewEventListener('copy', (event) => {
+	if (event.defaultPrevented || !event.clipboardData) return
+	if ((event.target as Node | null)?.ownerDocument !== panel.value?.ownerDocument) return
+	const code = getSelectedCode()
+	if (!code || !panel.value) return
+	event.clipboardData.setData('text/plain', code)
+	event.clipboardData.setData(
+		'text/html',
+		codeClipboardHtml(panel.value.ownerDocument, code, 'java'),
+	)
+	event.preventDefault()
+})
 
 const client = injectModrinthClient()
+const route = useRoute()
+const { openTab } = injectProjectReviewContext()
+const focusedDetailId = computed(() =>
+	typeof route.query.detail === 'string' ? route.query.detail : null,
+)
 const {
 	selection,
+	projectId,
 	project,
 	isLoading,
 	error,
 	refresh,
 	reportsQuery,
 	reports,
-	decisions,
 	pendingReports,
-	completedReports,
-	unflaggedReports,
+	selectedArchiveId: selectedFileId,
+	decisions,
 	refreshReports,
 } = injectProjectReviewPageContext()
 provide(TECH_REVIEW_DECISIONS_KEY, decisions)
-const selectedFileId = ref<string | null>(null)
-const selectedFile = computed(() => reports.value.find((file) => file.id === selectedFileId.value))
-const requestedIssues = ref(new Set<string>())
-const issueIds = computed(() => [...requestedIssues.value])
+const archiveMenu = ref<InstanceType<typeof FloatingMenu>>()
+const activateMenu = provideTechReviewMenus()
+const selectedFile = computed(
+	() => reports.value.find((file) => file.id === selectedFileId.value) ?? reports.value[0],
+)
+const selectedFileIndex = computed(() =>
+	reports.value.findIndex((file) => file.id === selectedFile.value?.id),
+)
+const previousFile = computed(() => reports.value[selectedFileIndex.value - 1])
+const nextFile = computed(() => reports.value[selectedFileIndex.value + 1])
+let detailLinkHandled = false
+watch(
+	[focusedDetailId, reports],
+	async ([detailId, files], [previousDetailId]) => {
+		if (detailId !== previousDetailId) detailLinkHandled = false
+		if (!detailId || detailLinkHandled) return
+		const file = files.find((file) =>
+			file.issues.some((issue) => issue.details.some((detail) => detail.id === detailId)),
+		)
+		if (!file) return
+		detailLinkHandled = true
+		selectedFileId.value = file.id
+		await nextTick()
+		openTab('tech-review')
+	},
+	{ immediate: true },
+)
+const requestSource = createSourceRequestQueue()
+const issueIds = computed(() => [
+	...new Set(selectedFile.value?.issues.map((issue) => issue.id) ?? []),
+])
 const sourceQueries = useQueries({
 	queries: computed(() =>
 		issueIds.value.map((id) => ({
-			queryKey: ['tech-review', 'issue', id, { includeHidden: true }],
-			queryFn: () =>
-				client.labrinth.tech_review_internal.getIssue(id, {
-					include_hidden: true,
-				}),
+			queryKey: ['tech-review', 'issue', id, { includeHidden: true }] as const,
+			queryFn: ({ signal }: QueryFunctionContext) =>
+				requestSource(
+					() =>
+						client.labrinth.tech_review_internal.getIssue(id, {
+							include_hidden: true,
+						}),
+					signal,
+				),
 			staleTime: 24 * 60 * 60 * 1000,
 		})),
 	),
@@ -123,6 +419,16 @@ const sourceQueries = useQueries({
 const loadingIssues = computed(
 	() => new Set(issueIds.value.filter((_id, index) => sourceQueries.value[index]?.isFetching)),
 )
+const settledIssues = computed(
+	() =>
+		new Set(
+			issueIds.value.filter(
+				(_id, index) =>
+					sourceQueries.value[index]?.isSuccess || sourceQueries.value[index]?.isError,
+			),
+		),
+)
+
 const decompiledSources = computed(
 	() =>
 		new Map(
@@ -133,12 +439,74 @@ const decompiledSources = computed(
 			),
 		),
 )
-function loadSources(ids: string[]) {
-	for (const id of ids) requestedIssues.value.add(id)
-}
+watch(
+	() =>
+		!isLoading.value &&
+		!reportsQuery.isPending.value &&
+		issueIds.value.every(
+			(_id, index) => sourceQueries.value[index]?.isSuccess || sourceQueries.value[index]?.isError,
+		),
+	(ready) => {
+		if (ready) emit('ready', projectId.value)
+	},
+	{ immediate: true, flush: 'post' },
+)
 function selectFile(file: FlattenedFileReport) {
+	archiveMenu.value?.hide()
 	selectedFileId.value = file.id
 }
+
+const navigationActions = {
+	'previous-highlight': {
+		available: () => fileDetail.value?.canNavigateHighlight() ?? false,
+		run: () => fileDetail.value?.navigateHighlight(-1),
+	},
+	'next-highlight': {
+		available: () => fileDetail.value?.canNavigateHighlight() ?? false,
+		run: () => fileDetail.value?.navigateHighlight(1),
+	},
+	'previous-file': {
+		available: () => fileDetail.value?.canNavigateFile(-1) ?? false,
+		run: () => fileDetail.value?.navigateFile(-1),
+	},
+	'next-file': {
+		available: () => fileDetail.value?.canNavigateFile(1) ?? false,
+		run: () => fileDetail.value?.navigateFile(1),
+	},
+	'previous-archive': {
+		available: () => !!previousFile.value,
+		run: () => previousFile.value && selectFile(previousFile.value),
+	},
+	'next-archive': {
+		available: () => !!nextFile.value,
+		run: () => nextFile.value && selectFile(nextFile.value),
+	},
+}
+
+useReviewEventListener('keydown', (event) => {
+	const target = event.target as HTMLElement | null
+	const element = panel.value
+	if (
+		!panelVisible.value ||
+		!element?.getClientRects().length ||
+		target?.ownerDocument !== element.ownerDocument ||
+		reviewShortcutBlocked(event, true) ||
+		target?.isContentEditable ||
+		target?.closest(
+			'input, textarea, select, [role="textbox"], [role="dialog"], [role="menu"], [role="listbox"], [role="separator"], .cm-editor',
+		)
+	)
+		return
+	keybinds.value.handle(event, {
+		scope: 'tech-review',
+		actions: {
+			available: (action) =>
+				(!event.repeat || action === 'previous-highlight' || action === 'next-highlight') &&
+				navigationActions[action].available(),
+			run: (action) => navigationActions[action].run(),
+		},
+	})
+})
 async function retrySources() {
 	await Promise.all(
 		sourceQueries.value.filter((query) => query.isError).map((query) => query.refetch()),
@@ -148,3 +516,44 @@ async function retry() {
 	await Promise.all([refresh(), reportsQuery.refetch()])
 }
 </script>
+
+<style scoped>
+@property --review-scrollbar-color {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: transparent;
+}
+
+.review-scrollbars {
+	--review-scrollbar-color: transparent;
+	--overlay-scrollbar-color: var(--review-scrollbar-color);
+	transition: --review-scrollbar-color 1750ms ease;
+}
+
+.review-scrollbars:hover {
+	--review-scrollbar-color: var(--color-scrollbar);
+	transition-duration: 200ms;
+}
+
+.review-scrollbars,
+.review-scrollbars :deep(*) {
+	scrollbar-color: var(--review-scrollbar-color) transparent;
+}
+
+.review-scrollbars::-webkit-scrollbar-thumb,
+.review-scrollbars :deep(*::-webkit-scrollbar-thumb) {
+	background: var(--review-scrollbar-color);
+}
+
+@media (hover: none) {
+	.review-scrollbars {
+		--review-scrollbar-color: var(--color-scrollbar);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.review-scrollbars {
+		transition: none;
+	}
+}
+</style>
diff --git a/apps/frontend/src/components/project-review/tech-review/menus.ts b/apps/frontend/src/components/project-review/tech-review/menus.ts
new file mode 100644
index 00000000000..d3981e72e08
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/menus.ts
@@ -0,0 +1,24 @@
+import { createContext } from '@modrinth/ui'
+import type { InjectionKey, Ref } from 'vue'
+
+export const folderMenuLockKey: InjectionKey<Ref<symbol | undefined>> = Symbol('FolderMenuLock')
+
+export const registerFolderMenuChildKey: InjectionKey<
+	(dismiss: (event: MouseEvent) => void) => () => void
+> = Symbol('RegisterFolderMenuChild')
+
+type ReviewMenu = { hide: () => void }
+
+const [injectTechReviewMenus, provideMenus] =
+	createContext<(menu: ReviewMenu | undefined) => void>('TechReviewMenus')
+
+export { injectTechReviewMenus }
+
+export function provideTechReviewMenus() {
+	let activeMenu: ReviewMenu | undefined
+	return provideMenus((menu) => {
+		if (!menu) return
+		if (activeMenu !== menu) activeMenu?.hide()
+		activeMenu = menu
+	})
+}
diff --git a/apps/frontend/src/components/project-review/tech-review/panel-divider.vue b/apps/frontend/src/components/project-review/tech-review/panel-divider.vue
new file mode 100644
index 00000000000..98e17c65162
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/panel-divider.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue'
+
+const props = defineProps<{
+	modelValue: number
+	label: string
+	side: 'left' | 'right'
+	min: number
+	max: number
+	reserve: number
+	defaultWidth: number
+	widthProperty: string
+}>()
+const emit = defineEmits<{ 'update:modelValue': [width: number] }>()
+const dragging = ref(false)
+let drag:
+	| {
+			pointerId: number
+			startX: number
+			startWidth: number
+			width: number
+			maximum: number
+			parent: HTMLElement
+			view: Window
+			frame?: number
+	  }
+	| undefined
+
+function layoutParent(element: HTMLElement) {
+	const view = element.ownerDocument.defaultView
+	let parent = element.parentElement
+	while (parent && view?.getComputedStyle(parent).display === 'contents') {
+		parent = parent.parentElement
+	}
+	return parent
+}
+
+function maximum(element: HTMLElement, parent = layoutParent(element)) {
+	return Math.max(
+		props.min,
+		Math.min(props.max, (parent?.clientWidth ?? props.max) - props.reserve - element.offsetWidth),
+	)
+}
+
+function update(element: HTMLElement, width: number) {
+	emit('update:modelValue', Math.round(Math.max(props.min, Math.min(maximum(element), width))))
+}
+
+function start(event: PointerEvent) {
+	if (event.button !== 0 || !event.isPrimary) return
+	const element = event.currentTarget as HTMLElement
+	const parent = layoutParent(element)
+	const view = element.ownerDocument.defaultView
+	if (!parent || !view) return
+	event.preventDefault()
+	const bounds = element.getBoundingClientRect()
+	const parentBounds = parent.getBoundingClientRect()
+	const width =
+		props.side === 'left' ? bounds.left - parentBounds.left : parentBounds.right - bounds.right
+	drag = {
+		pointerId: event.pointerId,
+		startX: event.clientX,
+		startWidth: width,
+		width,
+		maximum: maximum(element, parent),
+		parent,
+		view,
+	}
+	dragging.value = true
+	element.setPointerCapture(event.pointerId)
+}
+
+function move(event: PointerEvent) {
+	const current = drag
+	if (!current || current.pointerId !== event.pointerId) return
+	const delta = (event.clientX - current.startX) * (props.side === 'left' ? 1 : -1)
+	current.width = Math.round(
+		Math.max(props.min, Math.min(current.maximum, current.startWidth + delta)),
+	)
+	if (current.frame !== undefined) return
+	current.frame = current.view.requestAnimationFrame(() => {
+		current.frame = undefined
+		current.parent.style.setProperty(props.widthProperty, `${current.width}px`)
+	})
+}
+
+function stop(event: PointerEvent) {
+	const current = drag
+	if (!current || current.pointerId !== event.pointerId) return
+	if (current.frame !== undefined) current.view.cancelAnimationFrame(current.frame)
+	current.parent.style.setProperty(props.widthProperty, `${current.width}px`)
+	drag = undefined
+	dragging.value = false
+	emit('update:modelValue', current.width)
+	const element = event.currentTarget as HTMLElement
+	if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId)
+}
+
+function keydown(event: KeyboardEvent) {
+	const element = event.currentTarget as HTMLElement
+	const step = event.shiftKey ? 50 : 10
+	const direction = props.side === 'left' ? 1 : -1
+	let width: number
+	switch (event.key) {
+		case 'ArrowLeft':
+			width = props.modelValue - step * direction
+			break
+		case 'ArrowRight':
+			width = props.modelValue + step * direction
+			break
+		case 'Home':
+			width = props.min
+			break
+		case 'End':
+			width = maximum(element)
+			break
+		default:
+			return
+	}
+	event.preventDefault()
+	update(element, width)
+}
+
+onBeforeUnmount(() => {
+	if (drag?.frame !== undefined) drag.view.cancelAnimationFrame(drag.frame)
+	drag = undefined
+})
+</script>
+
+<template>
+	<div
+		role="separator"
+		tabindex="0"
+		aria-orientation="vertical"
+		:aria-label="label"
+		:aria-valuemin="min"
+		:aria-valuemax="max"
+		:aria-valuenow="modelValue"
+		class="panel-divider relative min-h-0 cursor-col-resize touch-none select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+		:class="{ 'is-dragging': dragging }"
+		@pointerdown="start"
+		@pointermove="move"
+		@pointerup="stop"
+		@pointercancel="stop"
+		@lostpointercapture="stop"
+		@keydown="keydown"
+		@dblclick="update($event.currentTarget as HTMLElement, defaultWidth)"
+	/>
+</template>
+
+<style scoped>
+.panel-divider::after {
+	content: '';
+	position: absolute;
+	inset: 0 auto 0 50%;
+	width: 1px;
+	background: var(--surface-3);
+}
+
+.panel-divider:hover::after {
+	background: var(--color-brand);
+	transition: background-color 0s 0.5s;
+}
+
+.panel-divider:focus-visible::after,
+.panel-divider.is-dragging::after {
+	background: var(--color-brand);
+	transition: none;
+}
+</style>
diff --git a/apps/frontend/src/components/project-review/tech-review/source-request-queue.ts b/apps/frontend/src/components/project-review/tech-review/source-request-queue.ts
new file mode 100644
index 00000000000..abf8959411e
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/source-request-queue.ts
@@ -0,0 +1,44 @@
+/** Limits source downloads and drops queued requests when their queries are cancelled. */
+export function createSourceRequestQueue(concurrency = 4) {
+	let active = 0
+	const pending: (() => void)[] = []
+
+	function drain() {
+		while (active < concurrency && pending.length) pending.shift()!()
+	}
+
+	return function requestSource<T>(request: () => Promise<T>, signal: AbortSignal): Promise<T> {
+		return new Promise((resolve, reject) => {
+			function cancel() {
+				const index = pending.indexOf(start)
+				if (index === -1) return
+				pending.splice(index, 1)
+				reject(signal.reason)
+			}
+
+			function start() {
+				signal.removeEventListener('abort', cancel)
+				if (signal.aborted) {
+					reject(signal.reason)
+					return
+				}
+				active++
+				Promise.resolve()
+					.then(request)
+					.then(resolve, reject)
+					.finally(() => {
+						active--
+						drain()
+					})
+			}
+
+			if (signal.aborted) {
+				reject(signal.reason)
+				return
+			}
+			signal.addEventListener('abort', cancel, { once: true })
+			pending.push(start)
+			drain()
+		})
+	}
+}
diff --git a/apps/frontend/src/components/project-review/tech-review/traces/data.vue b/apps/frontend/src/components/project-review/tech-review/traces/data.vue
new file mode 100644
index 00000000000..d990c0fce01
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/traces/data.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue'
+
+const TraceData = getCurrentInstance()!.type
+const props = defineProps<{
+	value: unknown
+	canHighlight?: (value: string) => boolean
+}>()
+const emit = defineEmits<{
+	select: [value: string]
+}>()
+
+const entries = computed(() =>
+	props.value && typeof props.value === 'object' && !Array.isArray(props.value)
+		? Object.entries(props.value).sort(([a], [b]) => a.localeCompare(b))
+		: [],
+)
+const url = computed(() => {
+	if (typeof props.value !== 'string') return undefined
+	try {
+		const parsed = new URL(props.value)
+		return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? parsed.href : undefined
+	} catch {
+		return undefined
+	}
+})
+const interactive = computed(
+	() => typeof props.value === 'string' && Boolean(props.canHighlight?.(props.value)),
+)
+
+function select() {
+	if (interactive.value) emit('select', String(props.value))
+}
+
+function onUrlClick(event: MouseEvent) {
+	if (
+		!interactive.value ||
+		event.button !== 0 ||
+		event.ctrlKey ||
+		event.metaKey ||
+		event.shiftKey ||
+		event.altKey
+	)
+		return
+	event.preventDefault()
+	select()
+}
+
+const text = computed(() => {
+	if (props.value === null) return 'null'
+	if (props.value === undefined) return '—'
+	if (props.value === '') return '(empty)'
+	return String(props.value)
+})
+</script>
+
+<template>
+	<ul
+		v-if="Array.isArray(value) && value.length"
+		class="m-0 list-disc space-y-1 pl-5 marker:text-secondary"
+	>
+		<li v-for="(item, index) in value" :key="index" class="min-w-0 pl-0">
+			<TraceData :value="item" :can-highlight="canHighlight" @select="emit('select', $event)" />
+		</li>
+	</ul>
+	<span v-else-if="Array.isArray(value)" class="text-xs text-secondary">Empty list</span>
+	<dl
+		v-else-if="value !== null && typeof value === 'object' && entries.length"
+		class="m-0 grid min-w-0 grid-cols-[fit-content(40%)_minmax(0,1fr)] items-start gap-x-3 gap-y-2 text-xs leading-relaxed"
+	>
+		<template v-for="[key, item] in entries" :key="key">
+			<dt class="max-w-40 truncate whitespace-nowrap font-medium text-secondary" :title="key">
+				{{ key }}
+			</dt>
+			<dd class="m-0 min-w-0">
+				<TraceData :value="item" :can-highlight="canHighlight" @select="emit('select', $event)" />
+			</dd>
+		</template>
+	</dl>
+	<span v-else-if="value !== null && typeof value === 'object'" class="text-xs text-secondary"
+		>No fields</span
+	>
+	<a
+		v-else-if="url"
+		:href="url"
+		target="_blank"
+		rel="noopener noreferrer"
+		class="rounded-sm font-mono text-xs leading-relaxed text-brand-blue [overflow-wrap:anywhere] hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+		:title="interactive ? 'Go to source (Ctrl/Cmd-click to open link)' : undefined"
+		@click="onUrlClick"
+		>{{ text }}</a
+	>
+	<button
+		v-else-if="interactive"
+		type="button"
+		title="Go to source"
+		class="cursor-pointer rounded-sm border-0 bg-transparent p-0 text-left font-mono text-xs leading-relaxed text-brand-blue [overflow-wrap:anywhere] hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+		@click="select"
+	>
+		{{ text }}
+	</button>
+	<span
+		v-else
+		class="font-mono text-xs leading-relaxed [overflow-wrap:anywhere]"
+		:class="{
+			'text-green': value === true,
+			'text-red': value === false,
+			'text-secondary': value === null || value === undefined,
+			'text-contrast': value !== null && value !== undefined && typeof value !== 'boolean',
+		}"
+		>{{ text }}</span
+	>
+</template>
diff --git a/apps/frontend/src/components/project-review/tech-review/traces/file-path.vue b/apps/frontend/src/components/project-review/tech-review/traces/file-path.vue
new file mode 100644
index 00000000000..bd8e95908d9
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/traces/file-path.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{ path: string }>()
+const label = ref<HTMLElement>()
+const { width } = useElementSize(label)
+let canvas: HTMLCanvasElement | undefined
+
+const displayPath = computed(() => {
+	const element = label.value
+	if (!element || !width.value) return props.path
+	canvas ??= element.ownerDocument.createElement('canvas')
+	const context = canvas.getContext('2d')
+	const style = element.ownerDocument.defaultView?.getComputedStyle(element)
+	if (!context || !style) return props.path
+	context.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
+	if (context.measureText(props.path).width <= width.value) return props.path
+
+	const characters = Array.from(props.path)
+	let start = 0
+	let end = characters.length - 1
+	let result = '…'
+	while (start <= end) {
+		const count = Math.floor((start + end) / 2)
+		const prefixLength = Math.ceil(count / 3)
+		const suffixLength = count - prefixLength
+		const candidate = `${characters.slice(0, prefixLength).join('')}…${suffixLength ? characters.slice(-suffixLength).join('') : ''}`
+		if (context.measureText(candidate).width <= width.value) {
+			result = candidate
+			start = count + 1
+		} else {
+			end = count - 1
+		}
+	}
+	return result
+})
+</script>
+
+<template>
+	<span ref="label" class="block min-w-0 flex-1 overflow-hidden whitespace-nowrap" :title="path">
+		{{ displayPath }}
+	</span>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFlagBadges.vue b/apps/frontend/src/components/project-review/tech-review/traces/flag-badges.vue
similarity index 79%
rename from apps/frontend/src/components/ui/moderation/tech-review/TechRevFlagBadges.vue
rename to apps/frontend/src/components/project-review/tech-review/traces/flag-badges.vue
index f51c07c3d68..c12d160a711 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFlagBadges.vue
+++ b/apps/frontend/src/components/project-review/tech-review/traces/flag-badges.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { ShieldAlertIcon } from '@modrinth/assets'
+import { TagItem } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { computed } from 'vue'
 
-import { getHighestSeverity, getSeverityBadgeColor } from './helpers'
-import { injectTechReviewDecisions } from './use-tech-review-decisions'
+import { getHighestSeverity, getSeverityBadgeColor } from '../helpers'
+import { injectTechReviewDecisions } from '../verdict/use-decisions'
 
 const props = defineProps<{
 	details: Labrinth.TechReview.Internal.ReportIssueDetail[]
+	hideSeverity?: boolean
 }>()
 
 const { getDetailDecision } = injectTechReviewDecisions()
@@ -34,8 +36,8 @@ const allFlagsMarked = computed(
 
 <template>
 	<div v-if="details.length > 0" class="flex items-center gap-2">
-		<div
-			class="rounded-full border-solid px-2.5 py-1"
+		<TagItem
+			v-if="!hideSeverity"
 			:class="[
 				severityBadgeClass,
 				{
@@ -43,11 +45,11 @@ const allFlagsMarked = computed(
 				},
 			]"
 		>
-			<span class="text-sm font-medium">{{ highestSeverityLabel }}</span>
-		</div>
+			{{ highestSeverityLabel }}
+		</TagItem>
 
 		<div
-			class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1 text-sm text-primary"
+			class="flex items-center gap-1 text-xs text-secondary"
 			:class="{
 				'bg-transparent opacity-50': allFlagsMarked,
 			}"
diff --git a/apps/frontend/src/components/project-review/tech-review/traces/name.vue b/apps/frontend/src/components/project-review/tech-review/traces/name.vue
new file mode 100644
index 00000000000..a2452953cba
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/traces/name.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { computed } from 'vue'
+
+import { severityPresentation, traceName } from './presentation'
+
+const props = defineProps<{
+	issueType: string
+	severity: Labrinth.TechReview.Internal.DelphiSeverity
+	colored?: boolean
+}>()
+
+const presentation = computed(() => severityPresentation[props.severity])
+const severityLabel = computed(
+	() => props.severity.charAt(0).toUpperCase() + props.severity.slice(1),
+)
+</script>
+
+<template>
+	<span class="inline-flex min-w-0 items-center gap-1.5">
+		<span
+			v-tooltip="severityLabel"
+			:aria-label="severityLabel"
+			class="mx-0.5 inline-flex shrink-0 items-center justify-center rounded-md"
+			:class="presentation.class"
+		>
+			<component
+				:is="presentation.icon"
+				class="size-4"
+				:style="{ color: presentation.color }"
+				aria-hidden="true"
+			/>
+		</span>
+		<span
+			class="min-w-0 break-words text-sm font-medium"
+			:class="colored ? presentation.textClass : 'text-contrast'"
+			>{{ traceName(issueType) }}</span
+		>
+	</span>
+</template>
diff --git a/apps/frontend/src/components/project-review/tech-review/traces/presentation.ts b/apps/frontend/src/components/project-review/tech-review/traces/presentation.ts
new file mode 100644
index 00000000000..0d7e38159b2
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/traces/presentation.ts
@@ -0,0 +1,51 @@
+import { EyeOffIcon, OctagonAlertIcon, ShieldAlertIcon, VirusIcon } from '@modrinth/assets'
+
+export const severityPresentation = {
+	malware: {
+		icon: VirusIcon,
+		class: 'bg-highlight-red text-red',
+		textClass: 'text-red',
+		bgColor: 'var(--color-red-bg)',
+		color: 'var(--color-red)',
+	},
+	severe: {
+		icon: ShieldAlertIcon,
+		class: 'bg-highlight-red text-red',
+		textClass: 'text-red',
+		bgColor: 'var(--color-red-bg)',
+		color: 'var(--color-red)',
+	},
+	high: {
+		icon: OctagonAlertIcon,
+		class: 'text-red',
+		textClass: 'text-red',
+		bgColor: 'var(--color-red-bg)',
+		color: 'var(--color-red)',
+	},
+	medium: {
+		icon: OctagonAlertIcon,
+		class: 'text-orange',
+		textClass: 'text-orange',
+		bgColor: 'var(--color-orange-bg)',
+		color: 'var(--color-orange)',
+	},
+	low: {
+		icon: OctagonAlertIcon,
+		class: 'text-yellow',
+		textClass: 'text-yellow',
+		bgColor: 'var(--color-yellow-bg)',
+		color: 'var(--color-yellow)',
+	},
+	hidden: {
+		icon: EyeOffIcon,
+		class: 'text-secondary',
+		textClass: 'text-secondary',
+		bgColor: 'var(--surface-3)',
+		color: 'var(--color-secondary)',
+	},
+}
+
+export function traceName(issueType: string) {
+	const name = issueType.replace(/_/g, ' ').toLowerCase()
+	return name.charAt(0).toUpperCase() + name.slice(1)
+}
diff --git a/apps/frontend/src/components/project-review/tech-review/traces/remaining-preview.vue b/apps/frontend/src/components/project-review/tech-review/traces/remaining-preview.vue
new file mode 100644
index 00000000000..02ce2f2f788
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/traces/remaining-preview.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { ChevronDownIcon, SearchIcon } from '@modrinth/assets'
+import { Accordion, FloatingMenu, Input } from '@modrinth/ui'
+import { useElementSize, useResizeObserver, useScroll } from '@vueuse/core'
+import { computed, inject, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+
+import { getHighestSeverity, severityOrder } from '../helpers'
+import { injectTechReviewMenus, registerFolderMenuChildKey } from '../menus'
+import type { ClassGroup, FlagItem } from '../types'
+import FilePath from './file-path.vue'
+import TraceName from './name.vue'
+import { traceName } from './presentation'
+
+const props = defineProps<{ flags: FlagItem[]; label: string }>()
+const emit = defineEmits<{ select: [fileKey: string] }>()
+const menu = ref<InstanceType<typeof FloatingMenu>>()
+const trigger = ref<HTMLButtonElement>()
+const activateMenu = injectTechReviewMenus()
+const registerWithFolder = inject(registerFolderMenuChildKey, undefined)
+let unregisterFromFolder: (() => void) | undefined
+
+function onOpen() {
+	activateMenu(menu.value)
+	unregisterFromFolder = registerWithFolder?.((event) => {
+		if (!trigger.value?.contains(event.target as Node)) menu.value?.hide()
+	})
+}
+
+function onClose() {
+	unregisterFromFolder?.()
+	unregisterFromFolder = undefined
+}
+
+onBeforeUnmount(onClose)
+const search = ref('')
+const collapsed = ref(new Set<string>())
+const groups = computed(() => {
+	const types = new Map<string, FlagItem[]>()
+	for (const flag of props.flags) {
+		const flags = types.get(flag.issueType) ?? []
+		flags.push(flag)
+		types.set(flag.issueType, flags)
+	}
+	const term = search.value.trim().toLowerCase()
+	return [...types]
+		.map(([issueType, flags]) => {
+			const files = new Map<string, ClassGroup>()
+			for (const flag of flags) {
+				if (
+					!`${traceName(issueType)} ${issueType} ${flag.detail.file_path} ${flag.detail.jar ?? ''}`
+						.toLowerCase()
+						.includes(term)
+				)
+					continue
+				const key = `${flag.detail.jar ?? ''}::${flag.detail.file_path}`
+				let file = files.get(key)
+				if (!file) {
+					file = {
+						key,
+						jar: flag.detail.jar ?? null,
+						filePath: flag.detail.file_path,
+						flags: [],
+					}
+					files.set(key, file)
+				}
+				file.flags.push(flag)
+			}
+			return {
+				issueType,
+				severity: getHighestSeverity(flags.map((flag) => flag.detail)),
+				files: [...files.values()],
+			}
+		})
+		.filter((group) => group.files.length)
+		.sort(
+			(a, b) =>
+				severityOrder[b.severity] - severityOrder[a.severity] ||
+				a.issueType.localeCompare(b.issueType),
+		)
+})
+const container = ref<HTMLElement>()
+const { y: scrollTop, measure: measureScroll } = useScroll(container)
+const { height: viewportHeight } = useElementSize(container)
+const content = ref<HTMLElement>()
+const { height: contentHeight } = useElementSize(content)
+const groupElements = new Map<string, HTMLElement>()
+const groupOffsets = ref(new Map<string, number>())
+
+function measureGroups() {
+	const viewport = container.value
+	if (!viewport) return
+	const offsets = new Map<string, number>()
+	for (const [key, element] of groupElements) {
+		let top = 0
+		let current: HTMLElement | null = element
+		while (current && current !== content.value) {
+			top += current.offsetTop
+			current = current.offsetParent as HTMLElement | null
+		}
+		offsets.set(key, top)
+	}
+	if (
+		offsets.size !== groupOffsets.value.size ||
+		[...offsets].some(([key, value]) => groupOffsets.value.get(key) !== value)
+	) {
+		groupOffsets.value = offsets
+	}
+}
+
+function setGroupContent(key: string, element: HTMLElement | null) {
+	if (groupElements.get(key) === element) return
+	if (element) groupElements.set(key, element)
+	else groupElements.delete(key)
+	nextTick(measureGroups)
+}
+
+function syncLayout() {
+	measureScroll()
+	measureGroups()
+}
+
+watch(
+	[container, content],
+	([viewport, body]) => {
+		if (!viewport || !body) {
+			groupOffsets.value = new Map()
+			return
+		}
+		syncLayout()
+	},
+	{ flush: 'post' },
+)
+useResizeObserver(content, syncLayout)
+const visibleGroups = computed(() => {
+	let offset = 0
+	return groups.value.map((group) => {
+		const contentTop = groupOffsets.value.get(group.issueType) ?? offset + 40
+		const open = !collapsed.value.has(group.issueType)
+		offset = contentTop + (open ? group.files.length * 40 : 0)
+		const start = Math.min(
+			group.files.length,
+			Math.max(0, Math.floor((scrollTop.value - contentTop) / 40) - 5),
+		)
+		const end = Math.min(
+			group.files.length,
+			Math.max(start, Math.ceil((scrollTop.value + viewportHeight.value - contentTop) / 40) + 5),
+		)
+		return {
+			...group,
+			visibleFiles: group.files.slice(start, end),
+			paddingTop: start * 40,
+			paddingBottom: (group.files.length - end) * 40,
+		}
+	})
+})
+watch(search, () => {
+	if (container.value) container.value.scrollTop = 0
+})
+function select(fileKey: string) {
+	menu.value?.hide()
+	emit('select', fileKey)
+}
+</script>
+
+<template>
+	<FloatingMenu
+		ref="menu"
+		placement="bottom-end"
+		:arrow="false"
+		bare
+		@open="onOpen"
+		@close="onClose"
+	>
+		<button
+			ref="trigger"
+			type="button"
+			class="custom-focus-indicator h-8 cursor-pointer whitespace-nowrap border-0 bg-transparent px-3 text-sm font-semibold text-secondary hover:bg-surface-4 hover:text-primary"
+		>
+			{{ label }}
+		</button>
+		<template #popper>
+			<section
+				aria-label="Remaining traces"
+				class="review-scrollbars flex w-[500px] max-w-[calc(100vw-2rem)] flex-col gap-2 rounded-xl border border-solid border-surface-5 bg-surface-2 p-1.5 shadow-2xl"
+			>
+				<Input
+					v-model="search"
+					:icon="SearchIcon"
+					placeholder="Search files or issue types..."
+					aria-label="Search files or issue types"
+				/>
+				<div
+					ref="container"
+					class="max-h-[60vh] overflow-y-auto overscroll-contain"
+					:style="{ height: `${Math.min(contentHeight, 400)}px` }"
+				>
+					<div ref="content" class="relative">
+						<Accordion
+							v-for="group in visibleGroups"
+							:key="group.issueType"
+							:open-by-default="!collapsed.has(group.issueType)"
+							button-class="custom-focus-indicator flex h-8 mt-2 w-full cursor-pointer items-center gap-2 border-0 bg-transparent py-0 pl-2 pr-2.5 text-left"
+							@on-open="collapsed.delete(group.issueType)"
+							@on-close="collapsed.add(group.issueType)"
+						>
+							<template #button="{ open }">
+								<TraceName
+									class="min-w-0 [&>span:last-child]:truncate"
+									:title="traceName(group.issueType)"
+									:issue-type="group.issueType"
+									:severity="group.severity"
+									colored
+								/>
+								<ChevronDownIcon
+									class="size-4 shrink-0 text-secondary transition-transform"
+									:class="{ '-rotate-90': !open }"
+									aria-hidden="true"
+								/>
+								<span class="ml-auto min-w-16 shrink-0 text-right text-xs text-secondary"
+									>{{ group.files.length }} {{ group.files.length === 1 ? 'file' : 'files' }}</span
+								>
+							</template>
+							<div
+								:ref="(element) => setGroupContent(group.issueType, element as HTMLElement | null)"
+								:style="{
+									paddingTop: `${group.paddingTop}px`,
+									paddingBottom: `${group.paddingBottom}px`,
+								}"
+							>
+								<button
+									v-for="file in group.visibleFiles"
+									:key="file.key"
+									type="button"
+									class="custom-focus-indicator flex h-10 w-full cursor-pointer items-center rounded-lg border-0 bg-transparent p-0 pl-2 text-left text-sm text-primary hover:bg-surface-3"
+									:title="file.filePath"
+									:aria-label="file.filePath"
+									@click="select(file.key)"
+								>
+									<FilePath :path="file.filePath" />
+								</button>
+							</div>
+						</Accordion>
+					</div>
+				</div>
+				<p v-if="!groups.length" class="m-0 p-3 text-sm text-secondary">No matching traces</p>
+			</section>
+		</template>
+	</FloatingMenu>
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/types.ts b/apps/frontend/src/components/project-review/tech-review/types.ts
similarity index 96%
rename from apps/frontend/src/components/ui/moderation/tech-review/types.ts
rename to apps/frontend/src/components/project-review/tech-review/types.ts
index 349f8a86334..9cc2ef1e10b 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/types.ts
+++ b/apps/frontend/src/components/project-review/tech-review/types.ts
@@ -6,7 +6,7 @@ export type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
 	version_number?: string
 }
 
-export type TechRevProjectRef = {
+export type ProjectRef = {
 	id: string
 	slug?: string
 	project_types: string[]
diff --git a/apps/frontend/src/components/project-review/tech-review/use-fast-scroll.ts b/apps/frontend/src/components/project-review/tech-review/use-fast-scroll.ts
new file mode 100644
index 00000000000..ab7f5998df1
--- /dev/null
+++ b/apps/frontend/src/components/project-review/tech-review/use-fast-scroll.ts
@@ -0,0 +1,92 @@
+import { moderationSettings } from '@modrinth/moderation'
+import { onScopeDispose } from 'vue'
+
+import { useModerationSettings } from '~/composables/moderation'
+
+export function useFastScroll() {
+	const settings = useModerationSettings()
+	let active: { element: HTMLElement; top: number; left: number; cancel: () => void } | undefined
+	onScopeDispose(() => active?.cancel())
+
+	return (element: HTMLElement, top: number, left = element.scrollLeft) => {
+		const targetTop = Math.max(0, Math.min(element.scrollHeight - element.clientHeight, top))
+		const targetLeft = Math.max(0, Math.min(element.scrollWidth - element.clientWidth, left))
+		if (
+			Math.abs(targetTop - element.scrollTop) < 0.5 &&
+			Math.abs(targetLeft - element.scrollLeft) < 0.5
+		) {
+			active?.cancel()
+			return
+		}
+		const view = element.ownerDocument.defaultView
+		if (
+			!view ||
+			settings.value.get(moderationSettings.General.TechReviewScrollTiming) === 0 ||
+			view.matchMedia('(prefers-reduced-motion: reduce)').matches
+		) {
+			active?.cancel()
+			element.scrollTo({ top: targetTop, left: targetLeft, behavior: 'instant' })
+			return
+		}
+		if (active?.element === element) {
+			active.top = targetTop
+			active.left = targetLeft
+			return
+		}
+		active?.cancel()
+
+		let positionTop = element.scrollTop
+		let positionLeft = element.scrollLeft
+		let velocityTop = 0
+		let velocityLeft = 0
+		let previousTime = view.performance.now()
+		let frame: number
+		const stop = () => {
+			view.cancelAnimationFrame(frame)
+			for (const event of ['wheel', 'pointerdown']) element.removeEventListener(event, stop)
+			active = undefined
+		}
+		const animation = { element, top: targetTop, left: targetLeft, cancel: stop }
+		active = animation
+		for (const event of ['wheel', 'pointerdown']) {
+			element.addEventListener(event, stop, { passive: true })
+		}
+
+		function animate(now: number) {
+			if (!element.isConnected) {
+				stop()
+				return
+			}
+			if (settings.value.get(moderationSettings.General.TechReviewScrollTiming) === 0) {
+				element.scrollTo({ top: animation.top, left: animation.left, behavior: 'instant' })
+				stop()
+				return
+			}
+			const elapsed = Math.min((now - previousTime) / 1000, 1 / 30)
+			previousTime = now
+			const frequency = 9000 / settings.value.get(moderationSettings.General.TechReviewScrollTiming)
+			const decay = Math.exp(-frequency * elapsed)
+			const offsetTop = positionTop - animation.top
+			const offsetLeft = positionLeft - animation.left
+			const stepTop = (velocityTop + frequency * offsetTop) * elapsed
+			const stepLeft = (velocityLeft + frequency * offsetLeft) * elapsed
+			positionTop = animation.top + (offsetTop + stepTop) * decay
+			positionLeft = animation.left + (offsetLeft + stepLeft) * decay
+			velocityTop = (velocityTop - frequency * stepTop) * decay
+			velocityLeft = (velocityLeft - frequency * stepLeft) * decay
+			const settled =
+				Math.abs(positionTop - animation.top) < 0.5 &&
+				Math.abs(positionLeft - animation.left) < 0.5 &&
+				Math.abs(velocityTop) < 5 &&
+				Math.abs(velocityLeft) < 5
+			element.scrollTo({
+				top: settled ? animation.top : positionTop,
+				left: settled ? animation.left : positionLeft,
+				behavior: 'instant',
+			})
+			if (settled) stop()
+			else frame = view.requestAnimationFrame(animate)
+		}
+		frame = view.requestAnimationFrame(animate)
+	}
+}
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue b/apps/frontend/src/components/project-review/tech-review/verdict/buttons.vue
similarity index 84%
rename from apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue
rename to apps/frontend/src/components/project-review/tech-review/verdict/buttons.vue
index 0e1dd197a9a..5898fd510f7 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevVerdictButtons.vue
+++ b/apps/frontend/src/components/project-review/tech-review/verdict/buttons.vue
@@ -3,8 +3,10 @@ import type { Labrinth } from '@modrinth/api-client'
 import { BanIcon, CheckCheckIcon, CheckIcon, ShieldAlertIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import { canUpdateGlobalDetail } from './helpers'
-import { injectTechReviewDecisions } from './use-tech-review-decisions'
+import { canUpdateGlobalDetail } from '../helpers'
+import RemainingPreview from '../traces/remaining-preview.vue'
+import type { FlagItem } from '../types'
+import { injectTechReviewDecisions } from './use-decisions'
 
 const REMAINING_LABELS = {
 	globalSafe: 'All remaining globally safe',
@@ -23,6 +25,7 @@ const TRACE_ARIA_LABELS = {
 const props = defineProps<{
 	variant: 'remaining' | 'trace'
 	remainingCount?: number
+	remainingFlags?: FlagItem[]
 	jar?: boolean
 	detail?: Labrinth.TechReview.Internal.ReportIssueDetail
 	globalDisabled?: boolean
@@ -30,6 +33,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
+	selectFile: [fileKey: string]
 	globalSafe: []
 	localSafe: []
 	localUnsafe: []
@@ -45,12 +49,14 @@ const {
 
 const groupAriaLabel = computed(() => {
 	if (props.variant === 'trace') return 'Trace verdict actions'
-	return props.jar ? 'Remaining JAR issue actions' : 'Remaining issue actions'
+	return props.jar ? 'Remaining JAR trace actions' : 'Remaining trace actions'
 })
 
 const remainingLabel = computed(() =>
 	props.variant === 'remaining' && props.remainingCount != null
-		? `${props.remainingCount} issue${props.remainingCount === 1 ? '' : 's'} remaining`
+		? props.remainingCount === 0
+			? 'All traces resolved'
+			: `${props.remainingCount} trace${props.remainingCount === 1 ? '' : 's'} remaining`
 		: undefined,
 )
 
@@ -75,7 +81,7 @@ function selected(decision: 'safe' | 'malware', scope: 'local' | 'global'): bool
 }
 
 const isGlobalDisabled = computed(() => {
-	if (props.variant === 'remaining') return props.globalDisabled
+	if (props.variant === 'remaining') return props.remainingCount === 0 || props.globalDisabled
 	if (!props.detail) return true
 	return (
 		!canUpdateGlobalDetail(props.detail) ||
@@ -85,7 +91,7 @@ const isGlobalDisabled = computed(() => {
 })
 
 const isLocalDisabled = computed(() => {
-	if (props.variant === 'remaining') return props.localDisabled
+	if (props.variant === 'remaining') return props.remainingCount === 0 || props.localDisabled
 	if (!props.detail) return true
 	return updatingDetails.has(props.detail.id) || updatingGlobalDetailKeys.has(props.detail.key)
 })
@@ -113,8 +119,14 @@ function buttonClass(decision: 'safe' | 'malware', scope: 'local' | 'global') {
 		role="group"
 		:aria-label="groupAriaLabel"
 	>
+		<RemainingPreview
+			v-if="remainingLabel && remainingFlags?.length"
+			:flags="remainingFlags"
+			:label="remainingLabel"
+			@select="emit('selectFile', $event)"
+		/>
 		<span
-			v-if="remainingLabel"
+			v-else-if="remainingLabel"
 			class="whitespace-nowrap px-3 text-sm font-semibold text-secondary"
 			>{{ remainingLabel }}</span
 		>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-decisions.ts b/apps/frontend/src/components/project-review/tech-review/verdict/use-decisions.ts
similarity index 95%
rename from apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-decisions.ts
rename to apps/frontend/src/components/project-review/tech-review/verdict/use-decisions.ts
index 71b215b0c6b..adc20adb37c 100644
--- a/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-decisions.ts
+++ b/apps/frontend/src/components/project-review/tech-review/verdict/use-decisions.ts
@@ -2,8 +2,8 @@ import type { Labrinth } from '@modrinth/api-client'
 import { injectModrinthClient } from '@modrinth/ui'
 import { inject, type InjectionKey, type MaybeRefOrGetter, reactive, toValue } from 'vue'
 
-import { canUpdateGlobalDetail, decisionToVerdict, statusMatchesDecision } from './helpers'
-import type { DetailDecision, DetailDecisionScope, FlagItem, FlattenedFileReport } from './types'
+import { canUpdateGlobalDetail, decisionToVerdict, statusMatchesDecision } from '../helpers'
+import type { DetailDecision, DetailDecisionScope, FlagItem, FlattenedFileReport } from '../types'
 
 export function useTechReviewDecisions(reports: MaybeRefOrGetter<FlattenedFileReport[]>) {
 	const client = injectModrinthClient()
@@ -166,12 +166,7 @@ export function useTechReviewDecisions(reports: MaybeRefOrGetter<FlattenedFileRe
 			verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus
 		}[],
 	) {
-		await client.request('/moderation/tech-review/issue-detail', {
-			api: 'labrinth',
-			version: 'internal',
-			method: 'PATCH',
-			body: data,
-		})
+		await client.labrinth.tech_review_internal.updateIssueDetails(data)
 	}
 
 	async function updateGlobalIssueDetails(
@@ -215,7 +210,7 @@ export const TECH_REVIEW_DECISIONS_KEY: InjectionKey<TechReviewDecisions> =
 export function injectTechReviewDecisions(): TechReviewDecisions {
 	const decisions = inject(TECH_REVIEW_DECISIONS_KEY)
 	if (!decisions) {
-		throw new Error('Tech review decisions must be provided by ModerationTechRevCard')
+		throw new Error('Tech review decisions must be provided by the project review tech panel')
 	}
 	return decisions
 }
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 3642d50476f..c57ad682fd9 100644
--- a/apps/frontend/src/components/project-review/versions/version-card.vue
+++ b/apps/frontend/src/components/project-review/versions/version-card.vue
@@ -94,6 +94,14 @@
 						<span v-if="!file.primary" class="mr-1">{{
 							file.file_type && file.file_type !== 'unknown' ? fileTypes[file.file_type] : 'Unknown'
 						}}</span>
+						<Button
+							v-if="archiveForFile(file)"
+							type="quiet"
+							size="sm"
+							@click="openInTechReview(file)"
+						>
+							Open in tech review
+						</Button>
 						<TeleportOverflowMenu
 							type="quiet"
 							size="sm"
@@ -343,6 +351,7 @@ import {
 	formatCompactNumber,
 	formatNumber,
 } from '../format'
+import { injectProjectReviewContext } from '../layout/context'
 import { useReviewInteraction } from '../shortcuts'
 
 const versionLabels = {
@@ -386,7 +395,8 @@ const formatDateTime = createDateFormatter({
 const relativeTime = createRelativeTimeFormatter({ style: 'narrow' })
 const client = injectModrinthClient()
 const tags = injectTags(null)
-const { project, members } = injectProjectReviewPageContext()
+const { project, members, reports, selectedArchiveId } = injectProjectReviewPageContext()
+const { openTab } = injectProjectReviewContext()
 const slicer = injectReviewSlicer()
 const { loadingFiles: slicerLoading } = slicer
 const slicerRequest = ref<{ id: number; button: string }>()
@@ -518,6 +528,19 @@ const filteredDependencies = computed(() => {
 })
 type VersionFile = Labrinth.Versions.v3.Version['files'][number]
 
+function archiveForFile(file: VersionFile) {
+	return reports.value.find(
+		(report) => report.version_id === props.version.id && report.file_name === file.filename,
+	)
+}
+
+function openInTechReview(file: VersionFile) {
+	const archive = archiveForFile(file)
+	if (!archive) return
+	selectedArchiveId.value = archive.id
+	openTab('tech-review')
+}
+
 function openInSlicer(urls: string[], button: string) {
 	slicer.open(urls)
 	slicerRequest.value = { id: slicer.openRequests.value, button }
diff --git a/apps/frontend/src/components/ui/moderation/GlobalDetailLocalTraceCard.vue b/apps/frontend/src/components/ui/moderation/GlobalDetailLocalTraceCard.vue
index 62f2e8dfe86..b3b1d7c135d 100644
--- a/apps/frontend/src/components/ui/moderation/GlobalDetailLocalTraceCard.vue
+++ b/apps/frontend/src/components/ui/moderation/GlobalDetailLocalTraceCard.vue
@@ -36,7 +36,7 @@ const props = defineProps<{
 
 const localTraceLink = computed(
 	() =>
-		`/moderation/technical-review/${props.trace.project_id}?detail=${encodeURIComponent(
+		`/moderation/project-review?project=${encodeURIComponent(props.trace.project_id)}&detail=${encodeURIComponent(
 			props.trace.detail_id,
 		)}`,
 )
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
deleted file mode 100644
index 31bf6134769..00000000000
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ /dev/null
@@ -1,368 +0,0 @@
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import { CheckIcon, CodeIcon, ExternalIcon, TimerIcon, VersionIcon } from '@modrinth/assets'
-import {
-	ButtonLink,
-	CopyCode,
-	CopyLinkButton,
-	getProjectTypeIcon,
-	NavTabs,
-	Toggle,
-} from '@modrinth/ui'
-import { capitalizeString, formatProjectType } from '@modrinth/utils'
-import { computed, provide, ref, watch } from 'vue'
-
-import type { UnsafeFile } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
-import ModerationItemHeader from '~/components/ui/moderation/ModerationItemHeader.vue'
-import {
-	getHighestSeverity,
-	getSeverityBadgeColor,
-	getVersionLabel,
-	getVersionPageHref,
-} from '~/components/ui/moderation/tech-review/helpers'
-import TechRevFileActions from '~/components/ui/moderation/tech-review/TechRevFileActions.vue'
-import TechRevFileDetailTab from '~/components/ui/moderation/tech-review/TechRevFileDetailTab.vue'
-import TechRevFilesTab from '~/components/ui/moderation/tech-review/TechRevFilesTab.vue'
-import TechRevThreadTab from '~/components/ui/moderation/tech-review/TechRevThreadTab.vue'
-import type { FlattenedFileReport } from '~/components/ui/moderation/tech-review/types'
-import {
-	TECH_REVIEW_DECISIONS_KEY,
-	useTechReviewDecisions,
-} from '~/components/ui/moderation/tech-review/use-tech-review-decisions'
-
-const props = defineProps<{
-	item: {
-		project: Labrinth.Projects.v3.Project
-		project_owner: Labrinth.TechReview.Internal.Ownership
-		thread: Labrinth.TechReview.Internal.Thread
-		reports: FlattenedFileReport[]
-	}
-	focusedDetailId?: string | null
-	loadingIssues: Set<string>
-	decompiledSources: Map<string, string>
-	collapsed: boolean
-	allowShowingHiddenTraces?: boolean
-	disableCollapsing?: boolean
-}>()
-
-const emit = defineEmits<{
-	refetch: []
-	loadIssueSources: [issueIds: string[]]
-	markComplete: [projectId: string]
-	showMaliciousSummary: [unsafeFiles: UnsafeFile[]]
-}>()
-
-const showHiddenTraces = ref(props.allowShowingHiddenTraces ?? false)
-const hiddenTraceCount = computed(() =>
-	props.item.reports.reduce(
-		(reportCount, report) =>
-			reportCount +
-			report.issues.reduce(
-				(issueCount, issue) =>
-					issueCount + issue.details.filter((detail) => detail.severity === 'hidden').length,
-				0,
-			),
-		0,
-	),
-)
-const nonHiddenReports = computed(() =>
-	props.item.reports.flatMap((report) => {
-		const issues = report.issues.flatMap((issue) => {
-			const details = issue.details.filter((detail) => detail.severity !== 'hidden')
-			return details.length > 0 ? [{ ...issue, details }] : []
-		})
-		return issues.length > 0 ? [{ ...report, issues }] : []
-	}),
-)
-const visibleReports = computed(() =>
-	showHiddenTraces.value ? props.item.reports : nonHiddenReports.value,
-)
-
-const decisions = useTechReviewDecisions(visibleReports)
-provide(TECH_REVIEW_DECISIONS_KEY, decisions)
-
-const projectStatus = ref<Labrinth.Projects.v2.ProjectStatus>(props.item.project.status)
-const isProjectApproved = computed(() => {
-	return (
-		projectStatus.value === 'approved' ||
-		projectStatus.value === 'archived' ||
-		projectStatus.value === 'unlisted' ||
-		projectStatus.value === 'private'
-	)
-})
-
-const currentTab = ref<'Thread' | 'Files' | 'File'>('Thread')
-const tabs = ['Thread', 'Files'] as const
-const isThreadCollapsed = ref(props.collapsed)
-
-const selectedFileId = ref<string | null>(null)
-
-const selectedFile = computed(() => {
-	if (!selectedFileId.value) return null
-	return visibleReports.value.find((r) => r.id === selectedFileId.value) ?? null
-})
-
-watch(selectedFile, (newFile) => {
-	if (selectedFileId.value && (!newFile || newFile.issues.length === 0)) {
-		backToFileList()
-	}
-})
-
-const highestSeverity = computed(() =>
-	getHighestSeverity(
-		visibleReports.value.flatMap((report) => report.issues.flatMap((issue) => issue.details)),
-	),
-)
-
-const navTabsLinks = computed(() => {
-	const links = tabs.map((tab) => ({
-		label: tab as string,
-		href: tab.toLowerCase(),
-	}))
-
-	if (selectedFile.value) {
-		links.push({
-			label: selectedFile.value.file_name,
-			href: 'file',
-		})
-	}
-
-	return links
-})
-
-const activeTabIndex = computed(() => {
-	if (currentTab.value === 'File' && selectedFile.value) {
-		return navTabsLinks.value.length - 1
-	}
-	const idx = tabs.indexOf(currentTab.value as (typeof tabs)[number])
-	return idx >= 0 ? idx : 0
-})
-
-function handleTabClick(index: number) {
-	if (index < tabs.length) {
-		const newTab = tabs[index]
-		currentTab.value = newTab
-
-		if (newTab === 'Thread') {
-			isThreadCollapsed.value = false
-		}
-	} else if (index === tabs.length && selectedFile.value) {
-		currentTab.value = 'File'
-	}
-}
-
-const severityColor = computed(() => getSeverityBadgeColor(highestSeverity.value))
-
-const formattedDate = computed(() => {
-	const dates = props.item.reports.map((r) => new Date(r.created))
-	const earliest = new Date(Math.min(...dates.map((d) => d.getTime())))
-	const now = new Date()
-	const diffDays = Math.floor((now.getTime() - earliest.getTime()) / (1000 * 60 * 60 * 24))
-	if (diffDays === 0) return 'Today'
-	if (diffDays === 1) return '1 day ago'
-	return `${diffDays} days ago`
-})
-
-function viewFileFlags(file: FlattenedFileReport) {
-	selectedFileId.value = file.id
-	currentTab.value = 'File'
-}
-
-function findFileForDetail(
-	detailId: string,
-): { file: FlattenedFileReport; hidden: boolean } | null {
-	for (const report of props.item.reports) {
-		for (const issue of report.issues) {
-			const detail = issue.details.find((detail) => String(detail.id) === detailId)
-			if (detail) {
-				return { file: report, hidden: detail.severity === 'hidden' }
-			}
-		}
-	}
-
-	return null
-}
-
-function backToFileList() {
-	selectedFileId.value = null
-	if (currentTab.value === 'File') {
-		currentTab.value = 'Files'
-	}
-}
-
-watch(
-	() => props.focusedDetailId,
-	(detailId) => {
-		if (!detailId) return
-
-		const result = findFileForDetail(detailId)
-		if (!result) return
-		if (result.hidden) {
-			if (!props.allowShowingHiddenTraces) return
-			showHiddenTraces.value = true
-		}
-		viewFileFlags(result.file)
-	},
-	{ immediate: true },
-)
-</script>
-
-<template>
-	<div
-		class="shadow-card overflow-hidden rounded-2xl border border-solid border-surface-4 bg-surface-3"
-	>
-		<div
-			class="flex flex-col gap-3 border-0 border-b border-solid border-surface-4 bg-surface-3 p-4 pb-3"
-		>
-			<div class="flex flex-wrap items-start justify-between">
-				<ModerationItemHeader
-					:avatar-url="item.project.icon_url"
-					:title="item.project.name"
-					:title-to="`/${item.project.project_types[0]}/${item.project.slug ?? item.project.id}`"
-					:owner="item.project_owner"
-				>
-					<template #badges>
-						<div
-							class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
-						>
-							<component
-								:is="getProjectTypeIcon(item.project.project_types[0] as any)"
-								aria-hidden="true"
-								class="h-4 w-4"
-							/>
-							<span
-								v-for="project_type in item.project.project_types"
-								:key="project_type + item.project.id"
-								class="text-sm font-medium text-secondary"
-								>{{ formatProjectType(project_type, true) }}</span
-							>
-						</div>
-
-						<div
-							class="flex items-center gap-1 rounded-full border border-solid px-2.5 py-1"
-							:class="
-								isProjectApproved
-									? 'border-green bg-highlight-green'
-									: 'border-orange bg-highlight-orange'
-							"
-						>
-							<CheckIcon v-if="isProjectApproved" aria-hidden="true" class="h-4 w-4 text-green" />
-							<TimerIcon v-else aria-hidden="true" class="h-4 w-4 text-orange" />
-							<span
-								class="text-sm font-medium"
-								:class="isProjectApproved ? 'text-green' : 'text-orange'"
-							>
-								{{ isProjectApproved ? 'Live' : 'In review' }}
-							</span>
-						</div>
-
-						<div class="rounded-full border-solid px-2.5 py-1" :class="severityColor">
-							<span class="text-sm font-medium">
-								{{ capitalizeString(highestSeverity.toLowerCase()) }}
-							</span>
-						</div>
-					</template>
-				</ModerationItemHeader>
-
-				<div class="flex flex-col items-end gap-2">
-					<div class="flex flex-wrap items-center justify-end gap-3">
-						<span class="text-base text-secondary">{{ formattedDate }}</span>
-						<div class="flex items-center gap-2">
-							<ButtonLink
-								v-if="props.item.project.link_urls?.['source']?.url"
-								v-tooltip="'Open sources in new tab'"
-								:href="props.item.project.link_urls?.['source']?.url"
-								target="_blank"
-								circular
-								icon-only
-							>
-								<CodeIcon />
-							</ButtonLink>
-							<CopyLinkButton
-								copy-label="Copy tech review link"
-								:url="`https://modrinth.com/moderation/technical-review/${props.item.project.id}`"
-							/>
-							<ButtonLink
-								v-tooltip="'Open tech review in new tab'"
-								:href="`/moderation/technical-review/${props.item.project.id}`"
-								target="_blank"
-								circular
-								icon-only
-							>
-								<ExternalIcon />
-							</ButtonLink>
-						</div>
-					</div>
-					<CopyCode v-tooltip="'Copy project ID'" :text="item.project.id" />
-				</div>
-			</div>
-			<div class="flex flex-wrap items-end justify-between gap-3">
-				<NavTabs
-					mode="local"
-					:links="navTabsLinks"
-					:active-index="activeTabIndex"
-					class="border border-solid border-surface-4 bg-surface-2"
-					@tab-click="handleTabClick"
-				/>
-
-				<div class="flex flex-wrap items-end justify-end gap-4">
-					<label
-						v-if="allowShowingHiddenTraces"
-						class="flex cursor-pointer items-center gap-3 text-sm"
-					>
-						<span class="text-right text-secondary">
-							Show hidden traces
-							<span class="text-tertiary block text-xs">{{ hiddenTraceCount }} hidden</span>
-						</span>
-						<Toggle v-model="showHiddenTraces" :disabled="hiddenTraceCount === 0" small />
-					</label>
-					<div v-if="currentTab === 'File' && selectedFile" class="flex items-center gap-2">
-						<ButtonLink
-							v-tooltip="'View version'"
-							type="outlined"
-							target="_blank"
-							:href="getVersionPageHref(item.project, selectedFile.version_id)"
-							:aria-label="`Open version ${getVersionLabel(selectedFile)}`"
-						>
-							<VersionIcon aria-hidden="true" />
-							{{ getVersionLabel(selectedFile) }}
-						</ButtonLink>
-						<TechRevFileActions :file="selectedFile" />
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<div class="bg-surface-2">
-			<TechRevThreadTab
-				v-if="currentTab === 'Thread'"
-				v-model:collapsed="isThreadCollapsed"
-				:project="item.project"
-				:project-owner="item.project_owner"
-				:thread="item.thread"
-				:reports="nonHiddenReports"
-				:disable-collapsing="disableCollapsing"
-				@refetch="emit('refetch')"
-				@mark-complete="emit('markComplete', $event)"
-				@show-malicious-summary="emit('showMaliciousSummary', $event)"
-				@status-changed="projectStatus = $event"
-			/>
-			<TechRevFilesTab
-				v-else-if="currentTab === 'Files'"
-				:reports="visibleReports"
-				:project="item.project"
-				@view-flags="viewFileFlags"
-			/>
-			<TechRevFileDetailTab
-				v-else-if="currentTab === 'File' && selectedFile"
-				:file="selectedFile"
-				:focused-detail-id="focusedDetailId"
-				:loading-issues="loadingIssues"
-				:decompiled-sources="decompiledSources"
-				@refetch="emit('refetch')"
-				@load-issue-sources="emit('loadIssueSources', $event)"
-				@all-flags-resolved="backToFileList"
-			/>
-		</div>
-	</div>
-</template>
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
index 1e2d6f31fe1..bf75d7b635c 100644
--- a/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationSettings.vue
@@ -7,6 +7,7 @@ import {
 	defineMessages,
 	Input,
 	IntlFormatted,
+	Textarea,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -14,8 +15,9 @@ import { computed, ref, useId } from 'vue'
 
 import { useModerationSettings } from '~/composables/moderation'
 
-defineProps<{
+const props = defineProps<{
 	embedded?: boolean
+	techReview?: boolean
 }>()
 
 const localhostHostname = 'localhost:3000'
@@ -78,9 +80,9 @@ const groups = [
 		id: 'workflow',
 		title: messages.workflow,
 		settings: [
-			general.SendIssuesAsThreadMessage,
 			general.AutoGoNextOnReviewOutcome,
 			general.IncludeNonProcessingProjects,
+			general.SendIssuesAsThreadMessage,
 		],
 	},
 	{
@@ -88,6 +90,26 @@ const groups = [
 		title: messages.panels,
 		settings: [general.LinkInfoPlacement],
 	},
+	{
+		id: 'tech-review',
+		title: {
+			defaultMessage: 'Tech review',
+			id: 'moderation.settings.tech-review',
+		},
+		settings: [general.TechReviewMode],
+	},
+	{
+		id: 'tech-review-code',
+		title: {
+			defaultMessage: 'Code viewer',
+			id: 'moderation.settings.code-viewer',
+		},
+		settings: [
+			general.WrapTechReviewCode,
+			general.TechReviewHighlightWords,
+			general.TechReviewScrollTiming,
+		],
+	},
 	{
 		id: 'appearance',
 		title: messages.appearance,
@@ -128,6 +150,9 @@ const groups = [
 const filteredGroups = computed(() => {
 	const query = search.value.trim().toLocaleLowerCase()
 	return groups
+		.filter(
+			(group) => ['tech-review', 'tech-review-code'].includes(group.id) === !!props.techReview,
+		)
 		.map((group) => ({
 			...group,
 			settings: group.settings.filter((setting) =>
@@ -141,6 +166,8 @@ const filteredGroups = computed(() => {
 
 function defaultLabel(setting: (typeof groups)[number]['settings'][number]) {
 	if (setting.type === 'toggle') return formatMessage(setting.default ? messages.on : messages.off)
+	if (setting.type === 'number')
+		return `${setting.default}${setting.unit ? ` ${setting.unit}` : ''}`
 	if (setting.type === 'enum')
 		return (
 			setting.entries.find((entry) => entry.value === setting.default)?.label ?? setting.default
@@ -154,7 +181,7 @@ const configuredSettings = useModerationSettings()
 <template>
 	<div :class="{ 'universal-card': !embedded }">
 		<h2 class="m-0 mb-2.5 text-2xl">
-			{{ formatMessage(messages.title) }}
+			{{ techReview ? 'Tech review settings' : formatMessage(messages.title) }}
 		</h2>
 		<Input
 			v-model="search"
@@ -173,9 +200,11 @@ const configuredSettings = useModerationSettings()
 			: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="mb-6 flex items-center justify-between gap-2">
+				<h3 :id="`${settingsId}-${group.id}`" class="m-0 text-xl font-semibold">
+					{{ formatMessage(group.title) }}
+				</h3>
+			</div>
 			<div class="flex flex-col gap-6">
 				<div
 					v-for="setting in group.settings"
@@ -209,6 +238,25 @@ const configuredSettings = useModerationSettings()
 						class="shrink-0"
 						@update:model-value="(value) => configuredSettings.set(setting, value)"
 					/>
+					<Input
+						v-if="setting.type === 'number'"
+						type="number"
+						clamp
+						class="w-28 shrink-0"
+						:aria-label="setting.title"
+						:model-value="configuredSettings.get(setting)"
+						:min="setting.min"
+						:max="setting.max"
+						:step="setting.step"
+						@update:model-value="
+							(value) =>
+								configuredSettings.set(setting, value === undefined ? undefined : Number(value))
+						"
+					>
+						<template #trailing
+							><span class="text-secondary">{{ setting.unit }}</span></template
+						>
+					</Input>
 					<Combobox
 						v-if="setting.type === 'enum'"
 						:aria-label="setting.title"
@@ -224,9 +272,24 @@ const configuredSettings = useModerationSettings()
 					/>
 					<div
 						v-if="setting.type === 'string'"
-						class="flex w-full flex-col items-start gap-2 sm:!w-1/3"
+						class="flex w-full flex-col items-start gap-2"
+						:class="{
+							'sm:!w-1/3': setting.id !== general.TechReviewHighlightWords.id,
+						}"
 					>
+						<Textarea
+							v-if="setting.id === general.TechReviewHighlightWords.id"
+							:aria-label="setting.title"
+							:model-value="configuredSettings.get(setting)"
+							:rows="5"
+							:spellcheck="false"
+							resize="vertical"
+							wrapper-class="w-full"
+							placeholder="Enter words separated by commas or newlines"
+							@update:model-value="(value) => configuredSettings.set(setting, value ?? '')"
+						/>
 						<Input
+							v-else
 							type="text"
 							:aria-label="setting.title"
 							:model-value="configuredSettings.get(setting) ?? ''"
@@ -240,7 +303,11 @@ const configuredSettings = useModerationSettings()
 							:disabled="configuredSettings.get(setting) === localhostHostname"
 							@click="configuredSettings.set(setting, localhostHostname)"
 						>
-							{{ formatMessage(messages.localhost, { hostname: localhostHostname }) }}
+							{{
+								formatMessage(messages.localhost, {
+									hostname: localhostHostname,
+								})
+							}}
 						</Button>
 					</div>
 				</div>
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationTechReview.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationTechReview.vue
new file mode 100644
index 00000000000..dc428d54e33
--- /dev/null
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationTechReview.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import ModerationSettings from './ModerationSettings.vue'
+
+defineProps<{
+	embedded?: boolean
+}>()
+</script>
+
+<template>
+	<ModerationSettings :embedded="embedded" tech-review />
+</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue
deleted file mode 100644
index 9432cc139b6..00000000000
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevClassItem.vue
+++ /dev/null
@@ -1,362 +0,0 @@
-<script setup lang="ts">
-import {
-	CheckIcon,
-	ChevronDownIcon,
-	ClipboardCopyIcon,
-	CoffeeIcon,
-	CopyIcon,
-	ExternalIcon,
-	LoaderCircleIcon,
-} from '@modrinth/assets'
-import {
-	Button,
-	ButtonLink,
-	IconButton,
-	injectModrinthClient,
-	injectNotificationManager,
-} from '@modrinth/ui'
-import { capitalizeString, highlightCodeLines } from '@modrinth/utils'
-import { computed, reactive, ref } from 'vue'
-
-import { injectReviewSlicer, slicerFileName } from '~/providers/project-review/review-slicer'
-
-import { getSeverityBadgeColor, truncateMiddle } from './helpers'
-import TechRevFlagBadges from './TechRevFlagBadges.vue'
-import TechRevVerdictButtons from './TechRevVerdictButtons.vue'
-import type { ClassGroup, FlattenedFileReport, TraceVerdictEvent } from './types'
-import { injectTechReviewDecisions } from './use-tech-review-decisions'
-
-const props = defineProps<{
-	file: FlattenedFileReport
-	classItem: ClassGroup
-	expanded: boolean
-	focusedDetailId?: string | null
-	loadingIssues: Set<string>
-	decompiledSources: Map<string, string>
-}>()
-
-const emit = defineEmits<{
-	toggle: []
-	verdict: [event: TraceVerdictEvent]
-}>()
-
-const client = injectModrinthClient()
-const slicer = injectReviewSlicer(null)
-const { addNotification } = injectNotificationManager()
-const { isPreReviewed, getMarkedFlagsCount } = injectTechReviewDecisions()
-
-const showCopyFeedback = ref(false)
-const copyingCelDetails = reactive<Set<string>>(new Set())
-const copiedCelDetails = reactive<Set<string>>(new Set())
-
-const truncatedPath = computed(() => truncateMiddle(props.classItem.filePath))
-const pathTooltip = computed(() =>
-	truncatedPath.value !== props.classItem.filePath ? props.classItem.filePath : undefined,
-)
-
-const flagDetails = computed(() => props.classItem.flags.map((flag) => flag.detail))
-const allFlagsMarked = computed(
-	() => getMarkedFlagsCount(props.classItem.flags) === props.classItem.flags.length,
-)
-
-const isLoadingSource = computed(() =>
-	props.classItem.flags.some((flag) => props.loadingIssues.has(flag.issueId)),
-)
-
-const decompiledSource = computed(() => {
-	for (const flag of props.classItem.flags) {
-		const source = props.decompiledSources.get(flag.detail.id)
-		if (source) return source
-	}
-	return undefined
-})
-
-const highlightedSource = computed(() => {
-	const source = decompiledSource.value
-	if (!source) return []
-	return highlightCodeLines(source, 'java')
-})
-
-function emitVerdict(event: TraceVerdictEvent) {
-	emit('verdict', event)
-}
-
-async function copyToClipboard() {
-	const source = decompiledSource.value
-	if (!source) return
-
-	try {
-		await navigator.clipboard.writeText(source)
-		showCopyFeedback.value = true
-		setTimeout(() => {
-			showCopyFeedback.value = false
-		}, 2000)
-	} catch (error) {
-		console.error('Failed to copy code:', error)
-	}
-}
-
-async function copyDetailCelInput(detailId: string) {
-	if (copyingCelDetails.has(detailId)) return
-
-	copyingCelDetails.add(detailId)
-	try {
-		const input = await client.labrinth.tech_review_internal.getDetailRuleInput(detailId)
-		await navigator.clipboard.writeText(JSON.stringify(input, null, 2))
-		copiedCelDetails.add(detailId)
-		setTimeout(() => {
-			copiedCelDetails.delete(detailId)
-		}, 2000)
-	} catch (error) {
-		console.error('Failed to copy CEL input:', error)
-		addNotification({
-			type: 'error',
-			title: 'Failed to copy CEL input',
-			text: 'An error occurred while loading the trace rule input.',
-		})
-	} finally {
-		copyingCelDetails.delete(detailId)
-	}
-}
-
-function trimSlashes(path: string): string {
-	if (path.startsWith('/')) {
-		path = path.slice(1)
-	}
-	if (path.endsWith('/')) {
-		path = path.slice(0, -1)
-	}
-	return path
-}
-
-/**
- * Resolves the slicer workspace entry for a class group, 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))
-	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))}`
-}
-</script>
-
-<template>
-	<div class="flex flex-col gap-1">
-		<div
-			class="flex cursor-pointer items-center justify-between rounded-xl px-2 py-1 transition-colors duration-200 hover:bg-surface-3"
-			@click="emit('toggle')"
-		>
-			<div class="flex grow items-center gap-2">
-				<IconButton
-					type="quiet"
-					label="Toggle details"
-					class="transition-transform"
-					:class="{ 'rotate-180': expanded }"
-				>
-					<ChevronDownIcon class="h-5 w-5 text-contrast" />
-				</IconButton>
-
-				<span
-					v-tooltip="pathTooltip"
-					class="font-mono text-sm font-semibold"
-					:class="{ 'opacity-50': allFlagsMarked }"
-				>
-					{{ truncatedPath }}
-				</span>
-
-				<TechRevFlagBadges :details="flagDetails" />
-
-				<div class="ml-auto flex items-center gap-2">
-					<Transition name="fade">
-						<div
-							v-if="isLoadingSource"
-							class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1"
-						>
-							<span class="flex items-center gap-1.5 text-sm font-medium text-secondary">
-								<LoaderCircleIcon class="size-4 animate-spin" />
-								Loading source...
-							</span>
-						</div>
-					</Transition>
-					<Button
-						v-if="slicer"
-						v-tooltip="'Open file in Slicer tab'"
-						type="outlined"
-						circular
-						icon-only
-						@click.stop="
-							slicer.open([file.download_url], slicerEntry(file.download_url, classItem))
-						"
-					>
-						<CoffeeIcon />
-					</Button>
-					<ButtonLink
-						v-tooltip="'Open file in slicer'"
-						type="outlined"
-						:href="createSlicerLink(file.download_url, classItem)"
-						:target="file.file_id"
-						circular
-						icon-only
-						@click="$event.stopPropagation()"
-					>
-						<ExternalIcon />
-					</ButtonLink>
-				</div>
-			</div>
-		</div>
-
-		<template v-if="expanded">
-			<div
-				v-for="flag in classItem.flags"
-				:id="`tech-review-detail-${flag.detail.id}`"
-				:key="`${flag.issueId}-${flag.detail.id}`"
-				class="flex flex-col gap-2 rounded-lg border border-solid border-surface-5 bg-surface-3 py-2 pl-4"
-				:class="{
-					'!border-brand bg-brand-highlight': focusedDetailId === String(flag.detail.id),
-				}"
-			>
-				<div class="grid grid-cols-[1fr_auto] items-center">
-					<div
-						class="flex items-center gap-2"
-						:class="{
-							'opacity-50': isPreReviewed(flag.detail.id, flag.detail.status),
-						}"
-					>
-						<span class="text-base font-semibold text-contrast">{{
-							flag.issueType.replace(/_/g, ' ')
-						}}</span>
-						<div
-							class="rounded-full border-solid px-2.5 py-1"
-							:class="getSeverityBadgeColor(flag.detail.severity)"
-						>
-							<span class="text-sm font-medium">{{ capitalizeString(flag.detail.severity) }}</span>
-						</div>
-					</div>
-
-					<div class="me-2 flex items-center justify-end gap-2">
-						<IconButton
-							v-tooltip="copiedCelDetails.has(flag.detail.id) ? 'Copied!' : 'Copy CEL to clipboard'"
-							type="quiet"
-							:label="copiedCelDetails.has(flag.detail.id) ? 'Copied!' : 'Copy CEL to clipboard'"
-							:disabled="copyingCelDetails.has(flag.detail.id)"
-							@click="copyDetailCelInput(flag.detail.id)"
-						>
-							<LoaderCircleIcon
-								v-if="copyingCelDetails.has(flag.detail.id)"
-								class="animate-spin"
-								aria-hidden="true"
-							/>
-							<CheckIcon v-else-if="copiedCelDetails.has(flag.detail.id)" aria-hidden="true" />
-							<ClipboardCopyIcon v-else aria-hidden="true" />
-						</IconButton>
-						<TechRevVerdictButtons
-							variant="trace"
-							:detail="flag.detail"
-							@global-safe="emitVerdict({ detail: flag.detail, decision: 'safe', scope: 'global' })"
-							@local-safe="emitVerdict({ detail: flag.detail, decision: 'safe', scope: 'local' })"
-							@local-unsafe="
-								emitVerdict({ detail: flag.detail, decision: 'malware', scope: 'local' })
-							"
-							@global-unsafe="
-								emitVerdict({ detail: flag.detail, decision: 'malware', scope: 'global' })
-							"
-						/>
-					</div>
-				</div>
-				<div
-					v-if="flag.detail.data && Object.keys(flag.detail.data).length > 0"
-					class="flex flex-wrap gap-x-4 gap-y-1 pr-4 text-sm"
-				>
-					<div
-						v-for="[key, value] in Object.entries(flag.detail.data).sort(([a], [b]) =>
-							a.localeCompare(b),
-						)"
-						:key="key"
-						class="flex items-center gap-1.5"
-					>
-						<span class="text-secondary">{{ key }}:</span>
-						<a
-							v-if="typeof value === 'string' && value.startsWith('http')"
-							:href="value"
-							target="_blank"
-							rel="noopener noreferrer"
-							class="text-brand-blue hover:underline"
-						>
-							{{ value }}
-						</a>
-						<span v-else class="font-mono text-contrast">{{ value }}</span>
-					</div>
-				</div>
-			</div>
-
-			<div
-				v-if="highlightedSource.length > 0"
-				class="relative overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-4"
-			>
-				<IconButton
-					v-tooltip="'Copy code'"
-					type="quiet"
-					label="Copy code"
-					class="!absolute right-2 top-2 border-[1px]"
-					@click.stop="copyToClipboard"
-				>
-					<CopyIcon v-if="!showCopyFeedback" />
-					<CheckIcon v-else />
-				</IconButton>
-
-				<div class="overflow-x-auto bg-surface-3 py-3">
-					<div
-						v-for="(line, n) in highlightedSource"
-						:key="n"
-						class="flex font-mono text-[13px] leading-[1.6]"
-					>
-						<div
-							class="select-none border-0 border-r border-solid border-surface-5 px-4 py-0 text-right text-primary"
-							style="min-width: 3.5rem"
-						>
-							{{ n + 1 }}
-						</div>
-						<div class="flex-1 px-4 py-0 text-primary">
-							<pre v-html="line || ' '"></pre>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div
-				v-else-if="!isLoadingSource"
-				class="rounded-lg border border-solid border-surface-5 bg-surface-3 p-4"
-			>
-				<p class="text-sm text-secondary">
-					Source code not available or failed to decompile for this file.
-				</p>
-			</div>
-		</template>
-	</div>
-</template>
-
-<style scoped>
-pre {
-	all: unset;
-	display: inline;
-	white-space: pre;
-}
-
-.fade-enter-active {
-	transition: opacity 0.3s ease-in;
-	transition-delay: 0.2s;
-}
-
-.fade-leave-active {
-	transition: opacity 0.15s ease-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue
deleted file mode 100644
index de3c5d7e89c..00000000000
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileActions.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { CoffeeIcon, DownloadIcon, ExternalIcon } from '@modrinth/assets'
-import { Button, ButtonLink, defineMessages, useFormatBytes, useVIntl } from '@modrinth/ui'
-
-import { injectReviewSlicer } from '~/providers/project-review/review-slicer'
-
-import type { FlattenedFileReport } from './types'
-
-defineProps<{
-	file: FlattenedFileReport
-}>()
-
-const slicer = injectReviewSlicer(null)
-const formatBytes = useFormatBytes()
-const { formatMessage } = useVIntl()
-const messages = defineMessages({
-	download: { id: 'moderation.tech-review.file.download', defaultMessage: 'Download' },
-	downloadFile: {
-		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',
-	},
-})
-</script>
-
-<template>
-	<div class="flex items-center gap-2">
-		<ButtonLink
-			v-tooltip="
-				formatMessage(messages.downloadFile, {
-					filename: file.file_name,
-					size: formatBytes(file.file_size),
-				})
-			"
-			type="outlined"
-			target="_blank"
-			:href="file.download_url"
-			:download="file.file_name"
-			:aria-label="formatMessage(messages.download)"
-			icon-only
-			circular
-		>
-			<DownloadIcon aria-hidden="true" />
-		</ButtonLink>
-		<Button
-			v-if="slicer"
-			v-tooltip="formatMessage(messages.openSlicerTab)"
-			:aria-label="formatMessage(messages.openSlicerTab)"
-			type="outlined"
-			icon-only
-			circular
-			@click="slicer.open([file.download_url])"
-		>
-			<CoffeeIcon aria-hidden="true" />
-		</Button>
-		<ButtonLink
-			v-tooltip="formatMessage(messages.openSlicer)"
-			type="outlined"
-			:target="file.file_id"
-			:href="`https://slicer.run/?url=${encodeURIComponent(file.download_url)}`"
-		>
-			<ExternalIcon aria-hidden="true" /> {{ formatMessage(messages.slicer) }}
-		</ButtonLink>
-	</div>
-</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileItem.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileItem.vue
deleted file mode 100644
index 51e7217d332..00000000000
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFileItem.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { RightArrowIcon, VersionIcon } from '@modrinth/assets'
-import { Button, ButtonLink, defineMessages, useFormatBytes, useVIntl } from '@modrinth/ui'
-import { computed } from 'vue'
-
-import { getFileDetailCount, getVersionPageHref, truncateMiddle } from './helpers'
-import TechRevFileActions from './TechRevFileActions.vue'
-import TechRevFlagBadges from './TechRevFlagBadges.vue'
-import type { FlattenedFileReport, TechRevProjectRef } from './types'
-import { injectTechReviewDecisions } from './use-tech-review-decisions'
-
-const props = defineProps<{
-	file: FlattenedFileReport
-	project: TechRevProjectRef
-}>()
-
-const emit = defineEmits<{
-	viewFlags: [file: FlattenedFileReport]
-}>()
-
-const formatBytes = useFormatBytes()
-const { formatMessage } = useVIntl()
-const messages = defineMessages({
-	viewVersion: { id: 'moderation.tech-review.file.view-version', defaultMessage: 'View version' },
-	manual: { id: 'moderation.tech-review.file.manual', defaultMessage: 'Manual review' },
-	noFlags: { id: 'moderation.tech-review.file.no-flags', defaultMessage: 'No flags' },
-	flags: { id: 'moderation.tech-review.file.flags', defaultMessage: 'Flags' },
-})
-const { getFileMarkedCount } = injectTechReviewDecisions()
-const details = computed(() => props.file.issues.flatMap((issue) => issue.details))
-const hasFlags = computed(() => details.value.length > 0)
-const isManualReview = computed(() => props.file.flag_reason.toString() === 'manual')
-const allFlagsMarked = computed(
-	() => hasFlags.value && getFileMarkedCount(props.file) === getFileDetailCount(props.file),
-)
-
-const truncatedFileName = computed(() => truncateMiddle(props.file.file_name, 50))
-const versionHref = computed(() => getVersionPageHref(props.project, props.file.version_id))
-const fileSizeLabel = computed(() => formatBytes(props.file.file_size))
-
-function viewFlags() {
-	if (hasFlags.value) {
-		emit('viewFlags', props.file)
-	}
-}
-</script>
-
-<template>
-	<div class="flex min-w-0 flex-wrap items-center justify-between gap-3 px-4 py-3">
-		<div class="flex min-w-0 flex-wrap items-center gap-2">
-			<ButtonLink
-				v-tooltip="formatMessage(messages.viewVersion)"
-				:aria-label="formatMessage(messages.viewVersion)"
-				type="outlined"
-				target="_blank"
-				:href="versionHref"
-				class="!bg-surface-2"
-				icon-only
-				circular
-			>
-				<VersionIcon aria-hidden="true" />
-			</ButtonLink>
-			<button
-				v-tooltip="file.file_name === truncatedFileName ? undefined : file.file_name"
-				type="button"
-				:disabled="!hasFlags"
-				class="group min-w-0 cursor-pointer break-all rounded-sm border-0 bg-transparent p-0 text-left font-medium text-contrast hover:underline"
-				:class="{ 'opacity-50': allFlagsMarked }"
-				@click="viewFlags"
-			>
-				{{ truncatedFileName }}
-			</button>
-			<div
-				class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1"
-				:class="{ 'opacity-50': allFlagsMarked }"
-			>
-				<span class="text-sm font-medium text-secondary">{{ fileSizeLabel }}</span>
-			</div>
-			<TechRevFlagBadges v-if="hasFlags" :details="details" />
-			<!-- TODO: remove toString when backend supports it properly -->
-			<div
-				v-else-if="isManualReview"
-				class="border-blue/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-blue px-2.5 py-1 text-sm text-blue"
-			>
-				{{ formatMessage(messages.manual) }}
-			</div>
-			<div
-				v-else
-				class="border-green/60 flex items-center gap-1 rounded-full border border-solid bg-highlight-green px-2.5 py-1 text-sm text-green"
-			>
-				{{ formatMessage(messages.noFlags) }}
-			</div>
-		</div>
-
-		<div class="flex min-w-0 flex-wrap items-center gap-2">
-			<Button v-if="hasFlags" @click="viewFlags"
-				>{{ formatMessage(messages.flags) }} <RightArrowIcon />
-			</Button>
-			<TechRevFileActions :file="file" />
-		</div>
-	</div>
-</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue
deleted file mode 100644
index 6228ef2e9cc..00000000000
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevFilesTab.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { getFileDetailCount } from './helpers'
-import TechRevFileItem from './TechRevFileItem.vue'
-import type { FlattenedFileReport, TechRevProjectRef } from './types'
-import { injectTechReviewDecisions } from './use-tech-review-decisions'
-
-const props = defineProps<{
-	reports: FlattenedFileReport[]
-	project: TechRevProjectRef
-}>()
-
-const emit = defineEmits<{
-	viewFlags: [file: FlattenedFileReport]
-}>()
-
-const { getFileMarkedCount } = injectTechReviewDecisions()
-
-const allFiles = computed(() => {
-	return [...props.reports].sort((a, b) => {
-		const aComplete = getFileMarkedCount(a) === getFileDetailCount(a)
-		const bComplete = getFileMarkedCount(b) === getFileDetailCount(b)
-		return aComplete === bComplete ? 0 : aComplete ? 1 : -1
-	})
-})
-</script>
-
-<template>
-	<div>
-		<TechRevFileItem
-			v-for="file in allFiles"
-			:key="file.id"
-			class="bg-surface-2 last:rounded-bl-2xl last:rounded-br-2xl even:bg-surface-1.5"
-			:file="file"
-			:project="project"
-			@view-flags="emit('viewFlags', $event)"
-		/>
-	</div>
-</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue b/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue
deleted file mode 100644
index 18d95256794..00000000000
--- a/apps/frontend/src/components/ui/moderation/tech-review/TechRevThreadTab.vue
+++ /dev/null
@@ -1,416 +0,0 @@
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import {
-	CheckIcon,
-	DropdownIcon,
-	EyeOffIcon,
-	ScaleIcon,
-	ShieldAlertIcon,
-	ShieldCheckIcon,
-	SpinnerIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { type TechReviewContext, techReviewQuickReplies } from '@modrinth/moderation'
-import {
-	Button,
-	type ButtonMenuOption,
-	CollapsibleRegion,
-	commonMessages,
-	injectModrinthClient,
-	injectNotificationManager,
-	TeleportOverflowMenu,
-	useFormatBytes,
-	useFormatDateTime,
-	useVIntl,
-} from '@modrinth/ui'
-import { capitalizeString, type ThreadMessage, type User } from '@modrinth/utils'
-import dayjs from 'dayjs'
-import { computed, ref } from 'vue'
-
-import type { UnsafeFile } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
-import ThreadView from '~/components/ui/thread/ThreadView.vue'
-
-import { severityOrder } from './helpers'
-import type { FlattenedFileReport } from './types'
-import { injectTechReviewDecisions } from './use-tech-review-decisions'
-
-const props = defineProps<{
-	project: Labrinth.Projects.v3.Project
-	projectOwner: Labrinth.TechReview.Internal.Ownership
-	thread: Labrinth.TechReview.Internal.Thread
-	reports: FlattenedFileReport[]
-	disableCollapsing?: boolean
-}>()
-
-const isThreadCollapsed = defineModel<boolean>('collapsed', { required: true })
-
-const emit = defineEmits<{
-	refetch: []
-	markComplete: [projectId: string]
-	showMaliciousSummary: [unsafeFiles: UnsafeFile[]]
-	statusChanged: [status: Labrinth.Projects.v2.ProjectStatus]
-}>()
-
-const auth = useAuthState()
-const featureFlags = useFeatureFlags()
-const { formatMessage } = useVIntl()
-const { addNotification } = injectNotificationManager()
-const client = injectModrinthClient()
-const { getDetailDecision } = injectTechReviewDecisions()
-const formatBytes = useFormatBytes()
-
-const formatDateTimeUtc = useFormatDateTime({
-	year: 'numeric',
-	month: 'long',
-	day: 'numeric',
-	hour: 'numeric',
-	minute: '2-digit',
-	timeZoneName: 'short',
-	timeZone: 'UTC',
-})
-
-const remainingMessageCount = computed(() => {
-	if (!props.thread?.messages) return 0
-	return Math.max(0, props.thread.messages.length - 1)
-})
-
-const threadExpandText = computed(() => {
-	if (remainingMessageCount.value === 0) return 'Expand'
-	if (remainingMessageCount.value === 1) return 'Show 1 more message'
-	return `Show ${remainingMessageCount.value} more messages`
-})
-
-const projectStatus = ref<Labrinth.Projects.v2.ProjectStatus>(props.project.status)
-const isLoadingStatusAction = ref(false)
-
-function isStatusActionDisabled(status: Labrinth.Projects.v2.ProjectStatus): boolean {
-	return projectStatus.value === status || isLoadingStatusAction.value
-}
-
-async function setStatus(status: Labrinth.Projects.v2.ProjectStatus) {
-	isLoadingStatusAction.value = true
-	try {
-		await client.labrinth.projects_v2.edit(props.project.id, { status })
-		emit('refetch')
-		projectStatus.value = status
-		emit('statusChanged', status)
-	} catch (err) {
-		addNotification({
-			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: (err as any)?.data?.description ? (err as any).data.description : String(err),
-			type: 'error',
-		})
-	}
-	isLoadingStatusAction.value = false
-}
-
-const projectStatusActions = computed<ButtonMenuOption[]>(() => [
-	{
-		id: 'approve',
-		label: 'Approve',
-		icon: CheckIcon,
-		tone: 'green',
-		hoverFilled: true,
-		action: () => setStatus('approved'),
-		disabled: isStatusActionDisabled('approved'),
-	},
-	{
-		id: 'withhold',
-		label: 'Withhold',
-		icon: EyeOffIcon,
-		tone: 'orange',
-		hoverFilled: true,
-		action: () => setStatus('withheld'),
-		disabled: isStatusActionDisabled('withheld'),
-	},
-	{
-		id: 'send-to-review',
-		label: 'Send to review',
-		icon: ScaleIcon,
-		action: () => setStatus('processing'),
-		disabled: isStatusActionDisabled('processing'),
-	},
-	{
-		id: 'reject',
-		label: 'Reject',
-		icon: XIcon,
-		tone: 'red',
-		hoverFilled: true,
-		action: () => setStatus('rejected'),
-		disabled: isStatusActionDisabled('rejected'),
-	},
-])
-
-const techReviewContext = computed<TechReviewContext>(() => ({
-	project: props.project,
-	project_owner: props.projectOwner,
-	reports: props.reports,
-}))
-
-const threadViewRef = ref<{
-	setReplyContent: (content: string) => void
-	getReplyContent: () => string
-} | null>(null)
-
-const unsafeFiles = computed<UnsafeFile[]>(() => {
-	return props.reports
-		.filter((report) =>
-			report.issues.some((issue) =>
-				issue.details.some((detail) => getDetailDecision(detail.id, detail.status) === 'malware'),
-			),
-		)
-		.map((report) => ({
-			file: report,
-			projectName: props.project.name,
-			projectId: props.project.id,
-			userId: props.projectOwner.id,
-			username: props.projectOwner.name,
-		}))
-})
-
-const reviewSummaryPreview = computed(() => {
-	const fileDecisions = new Map<
-		string,
-		{
-			fileName: string
-			fileSize: number
-			decisions: {
-				filePath: string
-				issueType: string
-				severity: string
-				decision: 'safe' | 'malware'
-			}[]
-			maxSeverity: Labrinth.TechReview.Internal.DelphiSeverity
-		}
-	>()
-	let totalSafe = 0
-	let totalUnsafe = 0
-
-	for (const report of props.reports) {
-		if (!fileDecisions.has(report.id)) {
-			fileDecisions.set(report.id, {
-				fileName: report.file_name,
-				fileSize: report.file_size,
-				decisions: [],
-				maxSeverity: 'low',
-			})
-		}
-		const fileData = fileDecisions.get(report.id)!
-
-		for (const issue of report.issues) {
-			for (const detail of issue.details) {
-				const decision = getDetailDecision(detail.id, detail.status)
-				if (decision === 'pending') continue
-
-				fileData.decisions.push({
-					filePath: detail.file_path,
-					issueType: issue.issue_type.replace(/_/g, ' '),
-					severity: detail.severity,
-					decision,
-				})
-
-				if (severityOrder[detail.severity] > severityOrder[fileData.maxSeverity]) {
-					fileData.maxSeverity = detail.severity
-				}
-
-				if (decision === 'safe') totalSafe++
-				else totalUnsafe++
-			}
-		}
-	}
-
-	const totalDecisions = totalSafe + totalUnsafe
-	if (totalDecisions === 0) return ''
-
-	const timestamp = formatDateTimeUtc(dayjs().toDate())
-	let markdown = `## Tech Review Summary\n*${timestamp}*\n\n`
-	markdown += `<details>\n<summary>File Details (${totalSafe} safe, ${totalUnsafe} unsafe)</summary>\n\n`
-
-	for (const [, fileData] of fileDecisions) {
-		if (fileData.decisions.length === 0) continue
-
-		const fileSafe = fileData.decisions.filter((d) => d.decision === 'safe').length
-		const fileUnsafe = fileData.decisions.filter((d) => d.decision === 'malware').length
-		const fileVerdict = fileUnsafe > 0 ? 'Unsafe' : 'Safe'
-
-		markdown += `### ${fileData.fileName}\n`
-		markdown += `> ${formatBytes(fileData.fileSize)} • ${fileData.decisions.length} issues • Max severity: ${fileData.maxSeverity} • **Verdict:** ${fileVerdict}\n\n`
-		markdown += `<details>\n<summary>Issues (${fileSafe} safe, ${fileUnsafe} unsafe)</summary>\n\n`
-		markdown += `| Class | Issue Type | Severity | Decision |\n`
-		markdown += `|-------|------------|----------|----------|\n`
-
-		for (const d of fileData.decisions) {
-			const decisionText = d.decision === 'safe' ? '✅ Safe' : '❌ Unsafe'
-			markdown += `| \`${d.filePath}\` | ${d.issueType} | ${capitalizeString(d.severity)} | ${decisionText} |\n`
-		}
-
-		markdown += `\n</details>\n\n`
-	}
-
-	markdown += `</details>\n\n`
-	markdown += `---\n\n**Total:** ${totalDecisions} issues reviewed (${totalSafe} safe, ${totalUnsafe} unsafe)\n\n`
-
-	return markdown
-})
-
-const threadWithPreview = computed(() => {
-	if (!reviewSummaryPreview.value) return props.thread
-
-	const user = auth.value?.user as User | null
-	if (!user) return props.thread
-
-	const previewMessage: ThreadMessage & { preview: true } = {
-		id: 'preview-message',
-		author_id: user.id,
-		body: {
-			type: 'text',
-			body: reviewSummaryPreview.value,
-			private: true,
-			replying_to: null,
-			associated_images: [],
-		},
-		created: new Date().toISOString(),
-		hide_identity: false,
-		preview: true,
-	}
-
-	return {
-		...props.thread,
-		messages: [...props.thread.messages, previewMessage],
-		members: props.thread.members.some((m) => m.id === user.id)
-			? props.thread.members
-			: [...props.thread.members, user],
-	}
-})
-
-const allIssuesResolved = computed(() => {
-	for (const report of props.reports) {
-		for (const issue of report.issues) {
-			for (const detail of issue.details) {
-				if (getDetailDecision(detail.id, detail.status) === 'pending') return false
-			}
-		}
-	}
-	return true
-})
-
-const canSubmitReview = computed(() => {
-	const totalIssues = props.reports.reduce((sum, r) => sum + r.issues.length, 0)
-	if (totalIssues === 0) return true
-	return allIssuesResolved.value
-})
-const hasSubmittedPassReview = ref(false)
-
-async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
-	hasSubmittedPassReview.value = verdict === 'safe'
-	const editorContent = threadViewRef.value?.getReplyContent() || ''
-
-	let message: string | undefined
-	if (reviewSummaryPreview.value && editorContent) {
-		message = `${reviewSummaryPreview.value}${editorContent}`
-	} else if (reviewSummaryPreview.value) {
-		message = reviewSummaryPreview.value
-	} else if (editorContent) {
-		message = editorContent
-	}
-
-	try {
-		await client.labrinth.tech_review_internal.submitProject(props.project.id, {
-			verdict,
-			message,
-		})
-		emit('markComplete', props.project.id)
-		addNotification({
-			type: 'success',
-			title: 'Review submitted',
-			text: 'Technical review completed successfully.',
-		})
-
-		if (verdict === 'unsafe') {
-			emit('showMaliciousSummary', unsafeFiles.value)
-		}
-	} catch (error: unknown) {
-		const err = error as { response?: { data?: { issues?: string[] } } }
-		if (err.response?.data?.issues) {
-			const missedCount = err.response.data.issues.length
-			addNotification({
-				type: 'error',
-				title: 'Pending issues remain',
-				text: `${missedCount} issue(s) still need a verdict before submitting.`,
-			})
-		} else {
-			addNotification({
-				type: 'error',
-				title: 'Submit failed',
-				text: 'Failed to submit review. Please try again.',
-			})
-		}
-	}
-}
-</script>
-
-<template>
-	<CollapsibleRegion
-		v-model:collapsed="isThreadCollapsed"
-		:expand-text="threadExpandText"
-		:disabled="disableCollapsing"
-		collapse-text="Collapse thread"
-	>
-		<div class="bg-surface-2 pt-0">
-			<!-- DEV-531 -->
-			<!-- @vue-expect-error TODO: will convert ThreadView to use api-client types at a later date -->
-			<ThreadView
-				ref="threadViewRef"
-				:thread="threadWithPreview"
-				:quick-replies="techReviewQuickReplies"
-				:quick-reply-context="techReviewContext"
-				primary-action="note"
-				@update-thread="emit('refetch')"
-			>
-				<template #additionalActions>
-					<Button
-						v-tooltip="
-							!canSubmitReview
-								? 'There are still pending flags!'
-								: hasSubmittedPassReview
-									? 'Project already passed!'
-									: undefined
-						"
-						type="colored"
-						color="brand"
-						:disabled="!canSubmitReview || hasSubmittedPassReview"
-						@click="handleSubmitReview('safe')"
-					>
-						<ShieldCheckIcon /> Pass
-					</Button>
-					<Button
-						v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
-						type="colored"
-						color="red"
-						:disabled="!canSubmitReview"
-						@click="handleSubmitReview('unsafe')"
-					>
-						<ShieldAlertIcon /> Fail
-					</Button>
-					<TeleportOverflowMenu
-						label="More options"
-						class="btn-dropdown-animation !w-auto !rounded-xl !px-2.5"
-						:disabled="isLoadingStatusAction"
-						:options="projectStatusActions"
-					>
-						<SpinnerIcon v-if="isLoadingStatusAction" class="animate-spin" aria-hidden="true" />
-						<ScaleIcon v-else aria-hidden="true" />
-						Set status
-						<DropdownIcon aria-hidden="true" />
-					</TeleportOverflowMenu>
-					<Button
-						v-if="featureFlags.developerMode"
-						type="outlined"
-						@click="emit('showMaliciousSummary', unsafeFiles)"
-						>Debug</Button
-					>
-				</template>
-			</ThreadView>
-		</div>
-	</CollapsibleRegion>
-</template>
diff --git a/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-sources.ts b/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-sources.ts
deleted file mode 100644
index 223eaede567..00000000000
--- a/apps/frontend/src/components/ui/moderation/tech-review/use-tech-review-sources.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { Labrinth } from '@modrinth/api-client'
-import { injectModrinthClient } from '@modrinth/ui'
-import { type MaybeRefOrGetter, reactive, toValue } from 'vue'
-
-const CACHE_TTL = 24 * 60 * 60 * 1000
-const CACHE_KEY_PREFIX = 'tech_review_source_'
-
-type CachedSource = {
-	source: string
-	timestamp: number
-}
-
-function getCachedSource(detailId: string): string | null {
-	try {
-		const cached = localStorage.getItem(`${CACHE_KEY_PREFIX}${detailId}`)
-		if (!cached) return null
-
-		const data: CachedSource = JSON.parse(cached)
-		const now = Date.now()
-
-		if (now - data.timestamp > CACHE_TTL) {
-			localStorage.removeItem(`${CACHE_KEY_PREFIX}${detailId}`)
-			return null
-		}
-
-		return data.source
-	} catch {
-		return null
-	}
-}
-
-function setCachedSource(detailId: string, source: string): void {
-	try {
-		const data: CachedSource = {
-			source,
-			timestamp: Date.now(),
-		}
-		localStorage.setItem(`${CACHE_KEY_PREFIX}${detailId}`, JSON.stringify(data))
-	} catch (error) {
-		console.error('Failed to cache source:', error)
-	}
-}
-
-function clearExpiredCache(): void {
-	try {
-		const now = Date.now()
-		const keys = Object.keys(localStorage)
-
-		for (const key of keys) {
-			if (key.startsWith(CACHE_KEY_PREFIX)) {
-				const cached = localStorage.getItem(key)
-				if (cached) {
-					const data: CachedSource = JSON.parse(cached)
-					if (now - data.timestamp > CACHE_TTL) {
-						localStorage.removeItem(key)
-					}
-				}
-			}
-		}
-	} catch (error) {
-		console.error('Failed to clear expired cache:', error)
-	}
-}
-
-export function useTechReviewSources(
-	issues: MaybeRefOrGetter<Labrinth.TechReview.Internal.FileIssue[]>,
-	includeHidden: MaybeRefOrGetter<boolean> = false,
-) {
-	const client = injectModrinthClient()
-
-	if (import.meta.client) {
-		clearExpiredCache()
-	}
-
-	const loadingIssues = reactive<Set<string>>(new Set())
-	const decompiledSources = reactive<Map<string, string>>(new Map())
-	const loadedIssues = reactive<Set<string>>(new Set())
-
-	async function loadIssueSource(issueId: string): Promise<void> {
-		if (loadingIssues.has(issueId) || loadedIssues.has(issueId)) return
-
-		loadingIssues.add(issueId)
-
-		try {
-			const issueData = await client.labrinth.tech_review_internal.getIssue(issueId, {
-				include_hidden: toValue(includeHidden),
-			})
-
-			for (const detail of issueData.details) {
-				if (detail.decompiled_source) {
-					decompiledSources.set(detail.id, detail.decompiled_source)
-					setCachedSource(detail.id, detail.decompiled_source)
-				}
-			}
-			loadedIssues.add(issueId)
-		} catch (error) {
-			console.error('Failed to load issue source:', error)
-		} finally {
-			loadingIssues.delete(issueId)
-		}
-	}
-
-	function handleLoadIssueSources(issueIds: string[]): void {
-		const uniqueIssueIds = new Set(issueIds)
-		const matchedIssues = toValue(issues).filter((issue) => uniqueIssueIds.has(issue.id))
-
-		for (const issue of matchedIssues) {
-			for (const detail of issue.details) {
-				if (!decompiledSources.has(detail.id)) {
-					const cached = getCachedSource(detail.id)
-					if (cached) {
-						decompiledSources.set(detail.id, cached)
-					}
-				}
-			}
-
-			const hasUncached = issue.details.some((detail) => !decompiledSources.has(detail.id))
-			if (hasUncached) {
-				loadIssueSource(issue.id)
-			}
-		}
-	}
-
-	return {
-		loadingIssues,
-		decompiledSources,
-		handleLoadIssueSources,
-	}
-}
diff --git a/apps/frontend/src/components/ui/thread/ThreadMessage.vue b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
index cafe8f1afc4..d6ce9c8c0f1 100644
--- a/apps/frontend/src/components/ui/thread/ThreadMessage.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
@@ -53,7 +53,7 @@
 					</AutoLink>
 					<ThreadRoleBadge :role="author.role" />
 					<EyeOffIcon
-						v-if="isPrivateMessage"
+						v-if="isPrivateMessage && message.body.type !== 'tech_review'"
 						v-tooltip="formatMessage(imageMessages.privateMessage)"
 						class="mb-px ml-1 text-orange"
 					/>
@@ -171,13 +171,29 @@
 					{{ formatMessage(imageMessages.threadReopened) }}
 				</span>
 				<span v-else-if="message.body.type === 'tech_review'">
-					<IntlFormatted :message-id="imageMessages.techReviewCompleted">
+					<IntlFormatted
+						v-if="
+							message.body.safe_issues !== undefined && message.body.unsafe_issues !== undefined
+						"
+						:message-id="
+							message.body.verdict === 'safe'
+								? imageMessages.techReviewPassed
+								: imageMessages.techReviewFailed
+						"
+						:values="{ safe: message.body.safe_issues, unsafe: message.body.unsafe_issues }"
+					/>
+					<IntlFormatted v-else :message-id="imageMessages.techReviewCompleted">
 						<template #status="{ children }">
 							<span class="whitespace-nowrap"
 								><Badge :type="message.body.verdict" /><component :is="() => children"
 							/></span>
 						</template>
 					</IntlFormatted>
+					<EyeOffIcon
+						v-tooltip="formatMessage(imageMessages.privateMessage)"
+						:aria-label="formatMessage(imageMessages.privateMessage)"
+						class="mb-0.5 ml-1.5 inline-block align-middle text-orange"
+					/>
 				</span>
 				<span v-else-if="message.body.type === 'tech_review_entered'">
 					{{ formatMessage(imageMessages.techReviewEntered) }}
@@ -193,6 +209,7 @@
 				v-if="!hasBody"
 				v-tooltip="formatDateTime(message.created)"
 				class="message__date ms-1.5 text-sm text-secondary opacity-80"
+				:class="{ 'ms-0 mt-1 block text-xs': message.body.type === 'tech_review' }"
 			>
 				{{ timeSincePosted }}
 			</span>
@@ -374,6 +391,16 @@ const imageMessages = defineMessages({
 		id: 'thread.message.thread-reopened',
 		defaultMessage: 'reopened the thread.',
 	},
+	techReviewPassed: {
+		id: 'thread.message.tech-review-passed',
+		defaultMessage:
+			'completed technical review and marked project as passed with {safe, plural, one {# safe issue} other {# safe issues}} reviewed.',
+	},
+	techReviewFailed: {
+		id: 'thread.message.tech-review-failed',
+		defaultMessage:
+			'completed technical review and marked project as failed with {safe} safe and {unsafe, plural, one {# unsafe issue} other {# unsafe issues}} reviewed.',
+	},
 	techReviewCompleted: {
 		id: 'thread.message.tech-review-completed',
 		defaultMessage: 'completed technical review and marked project as <status>.</status>',
diff --git a/apps/frontend/src/composables/moderation.ts b/apps/frontend/src/composables/moderation.ts
index becf030aa2b..2acc4ca2afe 100644
--- a/apps/frontend/src/composables/moderation.ts
+++ b/apps/frontend/src/composables/moderation.ts
@@ -81,6 +81,18 @@ const useModerationOptions = () =>
 				settingsOutput[id] = setting
 			}
 
+			if (
+				!('tech-review-mode' in settingsOutput) &&
+				typeof settingsOutput['show-tech-review-buttons'] === 'boolean'
+			) {
+				settingsOutput['tech-review-mode'] = settingsOutput['show-tech-review-buttons']
+			}
+			delete settingsOutput['show-tech-review-buttons']
+
+			delete settingsOutput['animate-tech-review-scroll']
+			delete settingsOutput['hide-floating-issue-panels']
+			delete settingsOutput['show-floating-issue-panels']
+
 			let appearanceTheme: StoredOptions['appearanceTheme']
 			try {
 				if (stored.appearanceTheme) {
@@ -196,7 +208,10 @@ export const useModerationSettings = () =>
 export const useModerationAppearanceTheme = () =>
 	computed({
 		get: () =>
-			useModerationOptions().value.appearanceTheme ?? { id: 'default', values: defaultAppearance },
+			useModerationOptions().value.appearanceTheme ?? {
+				id: 'default',
+				values: defaultAppearance,
+			},
 		set: (theme: NonNullable<StoredOptions['appearanceTheme']>) => {
 			useModerationOptions().value.appearanceTheme = theme
 			saveModerationOptions()
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 961648135c0..b6c6b8049ef 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -381,14 +381,6 @@
 							to: '/moderation',
 							tone: 'orange',
 						},
-						{
-							id: 'tech-review',
-							label: formatMessage(messages.techReview),
-							icon: ShieldAlertIcon,
-							type: 'link',
-							to: '/moderation/technical-review',
-							tone: 'orange',
-						},
 						{
 							id: 'review-reports',
 							label: formatMessage(messages.reports),
@@ -846,7 +838,6 @@ import {
 	ServerSearchIcon,
 	ServerStackIcon,
 	SettingsIcon,
-	ShieldAlertIcon,
 	SunIcon,
 	ToggleRightIcon,
 	TransferIcon,
@@ -1075,10 +1066,6 @@ const messages = defineMessages({
 		id: 'layout.action.review-projects',
 		defaultMessage: 'Project review',
 	},
-	techReview: {
-		id: 'layout.action.tech-review',
-		defaultMessage: 'Tech review',
-	},
 	reports: {
 		id: 'layout.action.reports',
 		defaultMessage: 'Review reports',
diff --git a/apps/frontend/src/locales/ar-SA/index.json b/apps/frontend/src/locales/ar-SA/index.json
index 421eee1f26e..30361d50467 100644
--- a/apps/frontend/src/locales/ar-SA/index.json
+++ b/apps/frontend/src/locales/ar-SA/index.json
@@ -2609,9 +2609,6 @@
   "layout.action.review-projects": {
     "message": "مراجعه المشروع"
   },
-  "layout.action.tech-review": {
-    "message": "المراجعة التقنية"
-  },
   "layout.avatar.alt": {
     "message": "صورتك الرمزية"
   },
@@ -2906,9 +2903,6 @@
   "moderation.page.reports": {
     "message": "البلاغات"
   },
-  "moderation.page.technicalReview": {
-    "message": "المراجعة التقنية"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} لكل دفعة"
   },
diff --git a/apps/frontend/src/locales/de-CH/index.json b/apps/frontend/src/locales/de-CH/index.json
index 72972f09cf7..30a7c04e4d2 100644
--- a/apps/frontend/src/locales/de-CH/index.json
+++ b/apps/frontend/src/locales/de-CH/index.json
@@ -2741,9 +2741,6 @@
   "layout.action.review-projects": {
     "message": "Projektüberprüfung"
   },
-  "layout.action.tech-review": {
-    "message": "Technische Überprüfung"
-  },
   "layout.action.user-lookup": {
     "message": "Benutzersuche"
   },
@@ -3203,9 +3200,6 @@
   "moderation.page.reports": {
     "message": "Meldungen"
   },
-  "moderation.page.technicalReview": {
-    "message": "Technische Überprüfung"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count} angenommen"
   },
@@ -3323,33 +3317,12 @@
   "moderation.settings.workflow": {
     "message": "Arbeitsablauf und Warteschlange der Überprüfung"
   },
-  "moderation.tech-review.file.download": {
-    "message": "Herunterladen"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "{filename} ({size}) herunterladen"
-  },
-  "moderation.tech-review.file.flags": {
-    "message": "Flags"
-  },
   "moderation.tech-review.file.manual": {
     "message": "Manuelle Überprüfung"
   },
   "moderation.tech-review.file.no-flags": {
     "message": "Keine Flags"
   },
-  "moderation.tech-review.file.open-slicer": {
-    "message": "In Slicer öffnen"
-  },
-  "moderation.tech-review.file.open-slicer-tab": {
-    "message": "Im Slicer-Tab öffnen"
-  },
-  "moderation.tech-review.file.slicer": {
-    "message": "Slicer"
-  },
-  "moderation.tech-review.file.view-version": {
-    "message": "Version anzeigen"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} pro Stapel"
   },
diff --git a/apps/frontend/src/locales/de-DE/index.json b/apps/frontend/src/locales/de-DE/index.json
index fe46428c931..58c5197fd13 100644
--- a/apps/frontend/src/locales/de-DE/index.json
+++ b/apps/frontend/src/locales/de-DE/index.json
@@ -2741,9 +2741,6 @@
   "layout.action.review-projects": {
     "message": "Projektüberprüfung"
   },
-  "layout.action.tech-review": {
-    "message": "Technische Überprüfung"
-  },
   "layout.action.user-lookup": {
     "message": "Benutzersuche"
   },
@@ -3203,9 +3200,6 @@
   "moderation.page.reports": {
     "message": "Meldungen"
   },
-  "moderation.page.technicalReview": {
-    "message": "Technische Überprüfung"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count} angenommen"
   },
@@ -3323,33 +3317,12 @@
   "moderation.settings.workflow": {
     "message": "Arbeitsablauf und Warteschlange der Überprüfung"
   },
-  "moderation.tech-review.file.download": {
-    "message": "Herunterladen"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "{filename} ({size}) herunterladen"
-  },
-  "moderation.tech-review.file.flags": {
-    "message": "Flags"
-  },
   "moderation.tech-review.file.manual": {
     "message": "Manuelle Überprüfung"
   },
   "moderation.tech-review.file.no-flags": {
     "message": "Keine Flags"
   },
-  "moderation.tech-review.file.open-slicer": {
-    "message": "In Slicer öffnen"
-  },
-  "moderation.tech-review.file.open-slicer-tab": {
-    "message": "Im Slicer-Tab öffnen"
-  },
-  "moderation.tech-review.file.slicer": {
-    "message": "Slicer"
-  },
-  "moderation.tech-review.file.view-version": {
-    "message": "Version anzeigen"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} pro Stapel"
   },
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 8f2ef19e2f2..457e44f638c 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2741,9 +2741,6 @@
   "layout.action.review-projects": {
     "message": "Project review"
   },
-  "layout.action.tech-review": {
-    "message": "Tech review"
-  },
   "layout.action.user-lookup": {
     "message": "User lookup"
   },
@@ -3203,9 +3200,6 @@
   "moderation.page.reports": {
     "message": "Reports"
   },
-  "moderation.page.technicalReview": {
-    "message": "Tech review"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count} approved"
   },
@@ -3323,33 +3317,12 @@
   "moderation.settings.workflow": {
     "message": "Review workflow and queue"
   },
-  "moderation.tech-review.file.download": {
-    "message": "Download"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "Download {filename} ({size})"
-  },
-  "moderation.tech-review.file.flags": {
-    "message": "Flags"
-  },
   "moderation.tech-review.file.manual": {
     "message": "Manual review"
   },
   "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.slicer": {
-    "message": "Slicer"
-  },
-  "moderation.tech-review.file.view-version": {
-    "message": "View version"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} per batch"
   },
@@ -6266,6 +6239,12 @@
   "thread.message.tech-review-exited": {
     "message": "The project has left the technical review queue as all pending traces have been resolved."
   },
+  "thread.message.tech-review-failed": {
+    "message": "completed technical review and marked project as failed with {safe} safe and {unsafe, plural, one {# unsafe issue} other {# unsafe issues}} reviewed."
+  },
+  "thread.message.tech-review-passed": {
+    "message": "completed technical review and marked project as passed with {safe, plural, one {# safe issue} other {# safe issues}} reviewed."
+  },
   "thread.message.thread-closed": {
     "message": "closed the thread."
   },
diff --git a/apps/frontend/src/locales/es-419/index.json b/apps/frontend/src/locales/es-419/index.json
index f307acaaf93..6e40b7fddcd 100644
--- a/apps/frontend/src/locales/es-419/index.json
+++ b/apps/frontend/src/locales/es-419/index.json
@@ -2726,9 +2726,6 @@
   "layout.action.review-projects": {
     "message": "Revisión de proyecto"
   },
-  "layout.action.tech-review": {
-    "message": "Revisión técnica"
-  },
   "layout.action.user-lookup": {
     "message": "Buscar usuario"
   },
@@ -3104,9 +3101,6 @@
   "moderation.page.reports": {
     "message": "Reportes"
   },
-  "moderation.page.technicalReview": {
-    "message": "Revisión técnica"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count} Aprobado"
   },
diff --git a/apps/frontend/src/locales/es-ES/index.json b/apps/frontend/src/locales/es-ES/index.json
index 0e586e5c102..566b332ca9e 100644
--- a/apps/frontend/src/locales/es-ES/index.json
+++ b/apps/frontend/src/locales/es-ES/index.json
@@ -2702,9 +2702,6 @@
   "layout.action.review-projects": {
     "message": "Revisión de proyecto"
   },
-  "layout.action.tech-review": {
-    "message": "Revisión técnica"
-  },
   "layout.action.user-lookup": {
     "message": "Búsqueda de usuarios"
   },
@@ -3080,9 +3077,6 @@
   "moderation.page.reports": {
     "message": "Informes"
   },
-  "moderation.page.technicalReview": {
-    "message": "Revisión técnica"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count} Aprobado"
   },
diff --git a/apps/frontend/src/locales/fil-PH/index.json b/apps/frontend/src/locales/fil-PH/index.json
index 01396e6cce0..996f11de446 100644
--- a/apps/frontend/src/locales/fil-PH/index.json
+++ b/apps/frontend/src/locales/fil-PH/index.json
@@ -1568,9 +1568,6 @@
   "layout.action.review-projects": {
     "message": "Suriin ang proyekto"
   },
-  "layout.action.tech-review": {
-    "message": "Tech review"
-  },
   "layout.avatar.alt": {
     "message": "Iyong avatar"
   },
@@ -1787,9 +1784,6 @@
   "moderation.page.reports": {
     "message": "Mga Sumbong"
   },
-  "moderation.page.technicalReview": {
-    "message": "Tech review"
-  },
   "modpack-scan-modal.failed": {
     "message": "Nabigo"
   },
diff --git a/apps/frontend/src/locales/fr-FR/index.json b/apps/frontend/src/locales/fr-FR/index.json
index c2663d32cd7..3dec25f9af8 100644
--- a/apps/frontend/src/locales/fr-FR/index.json
+++ b/apps/frontend/src/locales/fr-FR/index.json
@@ -2738,9 +2738,6 @@
   "layout.action.review-projects": {
     "message": "Revue de projet"
   },
-  "layout.action.tech-review": {
-    "message": "Revue technique"
-  },
   "layout.action.user-lookup": {
     "message": "Recherche d'utilisateur"
   },
@@ -3179,9 +3176,6 @@
   "moderation.page.reports": {
     "message": "Signalements"
   },
-  "moderation.page.technicalReview": {
-    "message": "Revue technique"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count} approuvés"
   },
@@ -3236,15 +3230,6 @@
   "moderation.settings.title": {
     "message": "Paramètres généraux"
   },
-  "moderation.tech-review.file.download": {
-    "message": "Télécharger"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "Télécharger {filename} ({size})"
-  },
-  "moderation.tech-review.file.view-version": {
-    "message": "Voir la version"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} par lot"
   },
diff --git a/apps/frontend/src/locales/he-IL/index.json b/apps/frontend/src/locales/he-IL/index.json
index c95fa2900eb..f6e29b317ac 100644
--- a/apps/frontend/src/locales/he-IL/index.json
+++ b/apps/frontend/src/locales/he-IL/index.json
@@ -1403,9 +1403,6 @@
   "layout.action.review-projects": {
     "message": "סקירת פרויקט"
   },
-  "layout.action.tech-review": {
-    "message": "סקירה טכנית"
-  },
   "layout.avatar.alt": {
     "message": "אוותר חשבון"
   },
diff --git a/apps/frontend/src/locales/hu-HU/index.json b/apps/frontend/src/locales/hu-HU/index.json
index 07e749e9ebf..ade692e433a 100644
--- a/apps/frontend/src/locales/hu-HU/index.json
+++ b/apps/frontend/src/locales/hu-HU/index.json
@@ -2681,9 +2681,6 @@
   "layout.action.review-projects": {
     "message": "Projekt áttekintés"
   },
-  "layout.action.tech-review": {
-    "message": "Technikai áttekintés"
-  },
   "layout.action.user-lookup": {
     "message": "Felhasználó kiválasztása"
   },
@@ -2990,9 +2987,6 @@
   "moderation.page.reports": {
     "message": "Jelentések"
   },
-  "moderation.page.technicalReview": {
-    "message": "Technikai áttekintés"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} kötegenként"
   },
diff --git a/apps/frontend/src/locales/id-ID/index.json b/apps/frontend/src/locales/id-ID/index.json
index 2d670dc8d0e..fbe53aebdaa 100644
--- a/apps/frontend/src/locales/id-ID/index.json
+++ b/apps/frontend/src/locales/id-ID/index.json
@@ -1658,9 +1658,6 @@
   "layout.action.review-projects": {
     "message": "Peninjauan proyek"
   },
-  "layout.action.tech-review": {
-    "message": "Tinjauan teknis"
-  },
   "layout.avatar.alt": {
     "message": "Avatar Anda"
   },
diff --git a/apps/frontend/src/locales/it-IT/index.json b/apps/frontend/src/locales/it-IT/index.json
index 3b4f9f880b4..5d1a62b05ea 100644
--- a/apps/frontend/src/locales/it-IT/index.json
+++ b/apps/frontend/src/locales/it-IT/index.json
@@ -2741,9 +2741,6 @@
   "layout.action.review-projects": {
     "message": "Revisione progetto"
   },
-  "layout.action.tech-review": {
-    "message": "Revisione tecnica"
-  },
   "layout.action.user-lookup": {
     "message": "Utenti"
   },
@@ -3203,9 +3200,6 @@
   "moderation.page.reports": {
     "message": "Segnalazioni"
   },
-  "moderation.page.technicalReview": {
-    "message": "Revisione tecnica"
-  },
   "moderation.project-review.approvedCount": {
     "message": "Approvati: {count}"
   },
@@ -3323,33 +3317,12 @@
   "moderation.settings.workflow": {
     "message": "Flusso di lavoro e coda della revisione"
   },
-  "moderation.tech-review.file.download": {
-    "message": "Scarica"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "Scarica {filename} ({size})"
-  },
-  "moderation.tech-review.file.flags": {
-    "message": "Flag"
-  },
   "moderation.tech-review.file.manual": {
     "message": "Revisione manuale"
   },
   "moderation.tech-review.file.no-flags": {
     "message": "Nessun flag"
   },
-  "moderation.tech-review.file.open-slicer": {
-    "message": "Apri con Slicer"
-  },
-  "moderation.tech-review.file.open-slicer-tab": {
-    "message": "Apri nella scheda di Slicer"
-  },
-  "moderation.tech-review.file.slicer": {
-    "message": "Slicer"
-  },
-  "moderation.tech-review.file.view-version": {
-    "message": "Mostra versione"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} alla volta"
   },
diff --git a/apps/frontend/src/locales/ja-JP/index.json b/apps/frontend/src/locales/ja-JP/index.json
index 81ce4c583e8..def7c64a57e 100644
--- a/apps/frontend/src/locales/ja-JP/index.json
+++ b/apps/frontend/src/locales/ja-JP/index.json
@@ -2735,9 +2735,6 @@
   "layout.action.review-projects": {
     "message": "プロジェクトレビュー"
   },
-  "layout.action.tech-review": {
-    "message": "技術レビュー"
-  },
   "layout.action.user-lookup": {
     "message": "ユーザー検索"
   },
@@ -3068,9 +3065,6 @@
   "moderation.page.reports": {
     "message": "レポート"
   },
-  "moderation.page.technicalReview": {
-    "message": "技術評価"
-  },
   "modpack-scan-modal.delete-all-groups.error": {
     "message": "すべてのグループの消去に失敗しました。{error}"
   },
diff --git a/apps/frontend/src/locales/ko-KR/index.json b/apps/frontend/src/locales/ko-KR/index.json
index 3de83003196..c3222f5ceac 100644
--- a/apps/frontend/src/locales/ko-KR/index.json
+++ b/apps/frontend/src/locales/ko-KR/index.json
@@ -2738,9 +2738,6 @@
   "layout.action.review-projects": {
     "message": "프로젝트 검토"
   },
-  "layout.action.tech-review": {
-    "message": "기술 검토"
-  },
   "layout.action.user-lookup": {
     "message": "사용자 조회"
   },
@@ -3200,9 +3197,6 @@
   "moderation.page.reports": {
     "message": "신고"
   },
-  "moderation.page.technicalReview": {
-    "message": "기술 리뷰"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count}개 승인됨"
   },
@@ -3320,33 +3314,12 @@
   "moderation.settings.workflow": {
     "message": "작업 흐름 및 대기열 검토"
   },
-  "moderation.tech-review.file.download": {
-    "message": "다운로드"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "{filename} 다운로드({size})"
-  },
-  "moderation.tech-review.file.flags": {
-    "message": "플래그"
-  },
   "moderation.tech-review.file.manual": {
     "message": "수동 검토"
   },
   "moderation.tech-review.file.no-flags": {
     "message": "플래그 없음"
   },
-  "moderation.tech-review.file.open-slicer": {
-    "message": "Slicer에서 열기"
-  },
-  "moderation.tech-review.file.open-slicer-tab": {
-    "message": "Slicer 탭에서 열기"
-  },
-  "moderation.tech-review.file.slicer": {
-    "message": "Slicer"
-  },
-  "moderation.tech-review.file.view-version": {
-    "message": "버전 보기"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "배치당 {amount}개"
   },
diff --git a/apps/frontend/src/locales/ms-MY/index.json b/apps/frontend/src/locales/ms-MY/index.json
index b53a7b92b41..8bdf245ef0c 100644
--- a/apps/frontend/src/locales/ms-MY/index.json
+++ b/apps/frontend/src/locales/ms-MY/index.json
@@ -2165,9 +2165,6 @@
   "layout.action.review-projects": {
     "message": "Semakan projek"
   },
-  "layout.action.tech-review": {
-    "message": "Semakan teknikal"
-  },
   "layout.action.user-lookup": {
     "message": "Carian pengguna"
   },
@@ -2414,9 +2411,6 @@
   "moderation.page.reports": {
     "message": "Laporan"
   },
-  "moderation.page.technicalReview": {
-    "message": "Semakan teknikal"
-  },
   "modpack-scan-modal.failed": {
     "message": "Gagal"
   },
diff --git a/apps/frontend/src/locales/nl-NL/index.json b/apps/frontend/src/locales/nl-NL/index.json
index 19fe19c2f00..320cf366dcd 100644
--- a/apps/frontend/src/locales/nl-NL/index.json
+++ b/apps/frontend/src/locales/nl-NL/index.json
@@ -2687,9 +2687,6 @@
   "layout.action.review-projects": {
     "message": "Project beoordeling"
   },
-  "layout.action.tech-review": {
-    "message": "Technologie beoordeling"
-  },
   "layout.action.user-lookup": {
     "message": "Gebruiker zoeken"
   },
@@ -3023,9 +3020,6 @@
   "moderation.page.reports": {
     "message": "Inlichtingen"
   },
-  "moderation.page.technicalReview": {
-    "message": "Technische beoordeling"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} per batch"
   },
diff --git a/apps/frontend/src/locales/no-NO/index.json b/apps/frontend/src/locales/no-NO/index.json
index 665adba1cc9..6ea3b3e71c7 100644
--- a/apps/frontend/src/locales/no-NO/index.json
+++ b/apps/frontend/src/locales/no-NO/index.json
@@ -2033,9 +2033,6 @@
   "layout.action.review-projects": {
     "message": "Prosjektgjennomgåing"
   },
-  "layout.action.tech-review": {
-    "message": "Teknologigjennomgang"
-  },
   "layout.avatar.alt": {
     "message": "Avataren din"
   },
@@ -2258,9 +2255,6 @@
   "moderation.page.reports": {
     "message": "Rapporteringer"
   },
-  "moderation.page.technicalReview": {
-    "message": "Teknologigjennomgang"
-  },
   "muralpay.account-type.checking": {
     "message": "Sjekking"
   },
diff --git a/apps/frontend/src/locales/pl-PL/index.json b/apps/frontend/src/locales/pl-PL/index.json
index 3e0d6b16d39..865a50d1f9f 100644
--- a/apps/frontend/src/locales/pl-PL/index.json
+++ b/apps/frontend/src/locales/pl-PL/index.json
@@ -2699,9 +2699,6 @@
   "layout.action.review-projects": {
     "message": "Przegląd projektu"
   },
-  "layout.action.tech-review": {
-    "message": "Przegląd techniczny"
-  },
   "layout.action.user-lookup": {
     "message": "Wyszukiwanie użytkowników"
   },
@@ -3047,9 +3044,6 @@
   "moderation.page.reports": {
     "message": "Zgłoszenia"
   },
-  "moderation.page.technicalReview": {
-    "message": "Przegląd techniczny"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count} zaakceptowane"
   },
diff --git a/apps/frontend/src/locales/pt-BR/index.json b/apps/frontend/src/locales/pt-BR/index.json
index 2ef42394b5a..c4c2a69b98b 100644
--- a/apps/frontend/src/locales/pt-BR/index.json
+++ b/apps/frontend/src/locales/pt-BR/index.json
@@ -2741,9 +2741,6 @@
   "layout.action.review-projects": {
     "message": "Revisão do projeto"
   },
-  "layout.action.tech-review": {
-    "message": "Revisão técnica"
-  },
   "layout.action.user-lookup": {
     "message": "Pesquisar usuário"
   },
@@ -3203,9 +3200,6 @@
   "moderation.page.reports": {
     "message": "Denúncias"
   },
-  "moderation.page.technicalReview": {
-    "message": "Revisão técnica"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count} aprovado"
   },
@@ -3323,33 +3317,12 @@
   "moderation.settings.workflow": {
     "message": "Revisar o fluxo de trabalho e a fila"
   },
-  "moderation.tech-review.file.download": {
-    "message": "Baixar"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "Baixar {filename} ({size})"
-  },
-  "moderation.tech-review.file.flags": {
-    "message": "Sinalizações"
-  },
   "moderation.tech-review.file.manual": {
     "message": "Revisão manual"
   },
   "moderation.tech-review.file.no-flags": {
     "message": "Sem sinalizadores"
   },
-  "moderation.tech-review.file.open-slicer": {
-    "message": "Abrir no Slicer"
-  },
-  "moderation.tech-review.file.open-slicer-tab": {
-    "message": "Abrir na aba do Slicer"
-  },
-  "moderation.tech-review.file.slicer": {
-    "message": "Slicer"
-  },
-  "moderation.tech-review.file.view-version": {
-    "message": "Ver versão"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} por lote"
   },
diff --git a/apps/frontend/src/locales/pt-PT/index.json b/apps/frontend/src/locales/pt-PT/index.json
index ef1c6b9abee..7598d3198de 100644
--- a/apps/frontend/src/locales/pt-PT/index.json
+++ b/apps/frontend/src/locales/pt-PT/index.json
@@ -2264,9 +2264,6 @@
   "layout.action.review-projects": {
     "message": "Revisão do projeto"
   },
-  "layout.action.tech-review": {
-    "message": "Revisão técnica"
-  },
   "layout.avatar.alt": {
     "message": "O teu avatar"
   },
diff --git a/apps/frontend/src/locales/ru-RU/index.json b/apps/frontend/src/locales/ru-RU/index.json
index 18457282b75..67fb29c59ed 100644
--- a/apps/frontend/src/locales/ru-RU/index.json
+++ b/apps/frontend/src/locales/ru-RU/index.json
@@ -2735,9 +2735,6 @@
   "layout.action.review-projects": {
     "message": "Проверка проектов"
   },
-  "layout.action.tech-review": {
-    "message": "Техпроверка"
-  },
   "layout.action.user-lookup": {
     "message": "Поиск пользователя"
   },
@@ -3152,9 +3149,6 @@
   "moderation.page.reports": {
     "message": "Жалобы"
   },
-  "moderation.page.technicalReview": {
-    "message": "Техпроверка"
-  },
   "moderation.project-review.approvedCount": {
     "message": "Одобрено: {count}"
   },
@@ -3245,33 +3239,12 @@
   "moderation.settings.workflow": {
     "message": "Процесс проверки и очередь"
   },
-  "moderation.tech-review.file.download": {
-    "message": "Скачать"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "Скачать {filename} ({size})"
-  },
-  "moderation.tech-review.file.flags": {
-    "message": "Отметки"
-  },
   "moderation.tech-review.file.manual": {
     "message": "Ручная проверка"
   },
   "moderation.tech-review.file.no-flags": {
     "message": "Нет отметок"
   },
-  "moderation.tech-review.file.open-slicer": {
-    "message": "Открыть в Slicer"
-  },
-  "moderation.tech-review.file.open-slicer-tab": {
-    "message": "Открыть во вкладке Slicer"
-  },
-  "moderation.tech-review.file.slicer": {
-    "message": "Slicer"
-  },
-  "moderation.tech-review.file.view-version": {
-    "message": "Открыть версию"
-  },
   "modpack-scan-modal.batch.placeholder": {
     "message": "Файлов за раз"
   },
diff --git a/apps/frontend/src/locales/sv-SE/index.json b/apps/frontend/src/locales/sv-SE/index.json
index 2f0991f6530..1255a378944 100644
--- a/apps/frontend/src/locales/sv-SE/index.json
+++ b/apps/frontend/src/locales/sv-SE/index.json
@@ -2588,9 +2588,6 @@
   "layout.action.review-projects": {
     "message": "Projektgranskning"
   },
-  "layout.action.tech-review": {
-    "message": "Teknikgranskning"
-  },
   "layout.avatar.alt": {
     "message": "Din avatar"
   },
@@ -2948,12 +2945,6 @@
   "moderation.settings.title": {
     "message": "Allmänna inställningar"
   },
-  "moderation.tech-review.file.download": {
-    "message": "Ladda ner"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "Ladda ner {filename} ({size})"
-  },
   "modpack-scan-modal.delete-all-groups.error": {
     "message": "Kunde inte rensa alla grupper: {error}"
   },
diff --git a/apps/frontend/src/locales/tr-TR/index.json b/apps/frontend/src/locales/tr-TR/index.json
index 81d77bda249..287988966bc 100644
--- a/apps/frontend/src/locales/tr-TR/index.json
+++ b/apps/frontend/src/locales/tr-TR/index.json
@@ -2651,9 +2651,6 @@
   "layout.action.review-projects": {
     "message": "Proje incelemesi"
   },
-  "layout.action.tech-review": {
-    "message": "Teknoloji incelemesi"
-  },
   "layout.action.user-lookup": {
     "message": "Kullanıcı arama"
   },
@@ -2957,9 +2954,6 @@
   "moderation.page.reports": {
     "message": "Bildiriler"
   },
-  "moderation.page.technicalReview": {
-    "message": "Teknik inceleme"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "Grup başına {amount}"
   },
diff --git a/apps/frontend/src/locales/uk-UA/index.json b/apps/frontend/src/locales/uk-UA/index.json
index f00ecdf08b3..cac3797a845 100644
--- a/apps/frontend/src/locales/uk-UA/index.json
+++ b/apps/frontend/src/locales/uk-UA/index.json
@@ -2693,9 +2693,6 @@
   "layout.action.review-projects": {
     "message": "Огляд проєкту"
   },
-  "layout.action.tech-review": {
-    "message": "Технічний огляд"
-  },
   "layout.action.user-lookup": {
     "message": "Пошук користувача"
   },
@@ -3032,9 +3029,6 @@
   "moderation.page.reports": {
     "message": "Скарги"
   },
-  "moderation.page.technicalReview": {
-    "message": "Технічний огляд"
-  },
   "moderation.project-review.draftCount": {
     "message": "Чернеток: {count}"
   },
diff --git a/apps/frontend/src/locales/vi-VN/index.json b/apps/frontend/src/locales/vi-VN/index.json
index 5d86697d2f4..a3bccac4538 100644
--- a/apps/frontend/src/locales/vi-VN/index.json
+++ b/apps/frontend/src/locales/vi-VN/index.json
@@ -2708,9 +2708,6 @@
   "layout.action.review-projects": {
     "message": "Đánh giá dự án"
   },
-  "layout.action.tech-review": {
-    "message": "Đánh giá kỹ thuật"
-  },
   "layout.action.user-lookup": {
     "message": "Tra cứu người dùng"
   },
@@ -3017,9 +3014,6 @@
   "moderation.page.reports": {
     "message": "Báo cáo"
   },
-  "moderation.page.technicalReview": {
-    "message": "Đánh giá kỹ thuật"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "{amount} mỗi đợt"
   },
diff --git a/apps/frontend/src/locales/zh-CN/index.json b/apps/frontend/src/locales/zh-CN/index.json
index 14f33268d8b..cf431628ce9 100644
--- a/apps/frontend/src/locales/zh-CN/index.json
+++ b/apps/frontend/src/locales/zh-CN/index.json
@@ -2741,9 +2741,6 @@
   "layout.action.review-projects": {
     "message": "项目审查"
   },
-  "layout.action.tech-review": {
-    "message": "技术审查"
-  },
   "layout.action.user-lookup": {
     "message": "用户查找"
   },
@@ -3191,9 +3188,6 @@
   "moderation.page.reports": {
     "message": "举报"
   },
-  "moderation.page.technicalReview": {
-    "message": "技术审查"
-  },
   "moderation.project-review.approvedCount": {
     "message": "通过了 {count} 项"
   },
@@ -3257,18 +3251,9 @@
   "moderation.settings.title": {
     "message": "常规设置"
   },
-  "moderation.tech-review.file.download": {
-    "message": "下载"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "下载{filename}({size})"
-  },
   "moderation.tech-review.file.manual": {
     "message": "人工审核"
   },
-  "moderation.tech-review.file.view-version": {
-    "message": "浏览版本"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "每批 {amount}"
   },
diff --git a/apps/frontend/src/locales/zh-TW/index.json b/apps/frontend/src/locales/zh-TW/index.json
index e6841e4b581..7140ebfedff 100644
--- a/apps/frontend/src/locales/zh-TW/index.json
+++ b/apps/frontend/src/locales/zh-TW/index.json
@@ -2741,9 +2741,6 @@
   "layout.action.review-projects": {
     "message": "專案審查"
   },
-  "layout.action.tech-review": {
-    "message": "技術審查"
-  },
   "layout.action.user-lookup": {
     "message": "使用者查詢"
   },
@@ -3164,9 +3161,6 @@
   "moderation.page.reports": {
     "message": "檢舉"
   },
-  "moderation.page.technicalReview": {
-    "message": "技術審查"
-  },
   "moderation.project-review.approvedCount": {
     "message": "{count} 個已核准"
   },
@@ -3242,21 +3236,6 @@
   "moderation.settings.title": {
     "message": "一般設定"
   },
-  "moderation.tech-review.file.download": {
-    "message": "下載"
-  },
-  "moderation.tech-review.file.download-file": {
-    "message": "下載 {filename}（{size}）"
-  },
-  "moderation.tech-review.file.open-slicer": {
-    "message": "在 Slicer 中開啟"
-  },
-  "moderation.tech-review.file.slicer": {
-    "message": "Slicer"
-  },
-  "moderation.tech-review.file.view-version": {
-    "message": "檢視版本"
-  },
   "modpack-scan-modal.batch.label": {
     "message": "每批 {amount} 個"
   },
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 0a4e7e42a8d..fcaa20c1375 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -563,7 +563,6 @@ import {
 	PlayIcon,
 	ReportIcon,
 	ScaleIcon,
-	ScanEyeIcon,
 	SearchIcon,
 	ServerPlusIcon,
 	SettingsIcon,
@@ -2048,15 +2047,6 @@ const projectHeaderMoreActions = computed(() => {
 			tone: 'orange',
 			shown: !!auth.value.user && isStaff,
 		},
-		{
-			id: 'tech-review',
-			label: 'Tech review',
-			icon: ScanEyeIcon,
-			type: 'link',
-			to: `/moderation/technical-review/${project.value?.id}`,
-			tone: 'orange',
-			shown: !!auth.value.user && isStaff,
-		},
 		{
 			id: 'moderation-modpack-rescan',
 			label: formatMessage(messages.rescanModpack),
diff --git a/apps/frontend/src/pages/moderation.vue b/apps/frontend/src/pages/moderation.vue
index 0c92f2f7eed..7919b16054d 100644
--- a/apps/frontend/src/pages/moderation.vue
+++ b/apps/frontend/src/pages/moderation.vue
@@ -19,14 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-	FolderIcon,
-	GlobeIcon,
-	HashIcon,
-	ReportIcon,
-	SettingsIcon,
-	ShieldCheckIcon,
-} from '@modrinth/assets'
+import { FolderIcon, GlobeIcon, HashIcon, ReportIcon, SettingsIcon } from '@modrinth/assets'
 import { Chips, defineMessages, NavTabs, useVIntl } from '@modrinth/ui'
 
 definePageMeta({
@@ -46,10 +39,6 @@ const messages = defineMessages({
 		id: 'moderation.page.projects',
 		defaultMessage: 'Projects',
 	},
-	technicalReviewTitle: {
-		id: 'moderation.page.technicalReview',
-		defaultMessage: 'Tech review',
-	},
 	reportsTitle: {
 		id: 'moderation.page.reports',
 		defaultMessage: 'Reports',
@@ -70,11 +59,6 @@ const messages = defineMessages({
 
 const moderationLinks = [
 	{ label: formatMessage(messages.projectsTitle), href: '/moderation', icon: FolderIcon },
-	{
-		label: formatMessage(messages.technicalReviewTitle),
-		href: '/moderation/technical-review',
-		icon: ShieldCheckIcon,
-	},
 	{ label: formatMessage(messages.reportsTitle), href: '/moderation/reports', icon: ReportIcon },
 	{
 		label: formatMessage(messages.externalFilesTitle),
@@ -95,7 +79,6 @@ const moderationLinks = [
 
 const mobileNavOptions = [
 	formatMessage(messages.projectsTitle),
-	formatMessage(messages.technicalReviewTitle),
 	formatMessage(messages.reportsTitle),
 	formatMessage(messages.externalFilesTitle),
 	formatMessage(messages.globalDetailTracesTitle),
@@ -107,8 +90,6 @@ const selectedChip = computed({
 		const path = route.path
 		if (path.startsWith('/moderation/technical-review/rules')) {
 			return formatMessage(messages.delphiRulesTitle)
-		} else if (path.startsWith('/moderation/technical-review')) {
-			return formatMessage(messages.technicalReviewTitle)
 		} else if (path.startsWith('/moderation/reports')) {
 			return formatMessage(messages.reportsTitle)
 		} else if (path.startsWith('/moderation/external-projects')) {
@@ -125,9 +106,7 @@ const selectedChip = computed({
 })
 
 function navigateToPage(selectedOption: string) {
-	if (selectedOption === formatMessage(messages.technicalReviewTitle)) {
-		router.push('/moderation/technical-review')
-	} else if (selectedOption === formatMessage(messages.reportsTitle)) {
+	if (selectedOption === formatMessage(messages.reportsTitle)) {
 		router.push('/moderation/reports')
 	} else if (selectedOption === formatMessage(messages.externalFilesTitle)) {
 		router.push('/moderation/external-projects')
diff --git a/apps/frontend/src/pages/moderation/technical-review/[project].vue b/apps/frontend/src/pages/moderation/technical-review/[project].vue
deleted file mode 100644
index 99f6c228258..00000000000
--- a/apps/frontend/src/pages/moderation/technical-review/[project].vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import { LoaderCircleIcon } from '@modrinth/assets'
-import { BackToParentLink, injectModrinthClient } from '@modrinth/ui'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-
-import MaliciousSummaryModal, {
-	type UnsafeFile,
-} from '~/components/ui/moderation/MaliciousSummaryModal.vue'
-import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
-import { flattenFileReports } from '~/components/ui/moderation/tech-review/helpers'
-import { useTechReviewSources } from '~/components/ui/moderation/tech-review/use-tech-review-sources'
-
-const client = injectModrinthClient()
-const queryClient = useQueryClient()
-const route = useRoute()
-const keybinds = useModerationKeybinds()
-
-const projectId = String(useRouteId('project'))
-
-useHead({ title: () => `Tech review - ${projectId} - Modrinth` })
-
-const {
-	data: projectReportData,
-	isLoading: isLoadingReport,
-	isError: isReportError,
-} = useQuery({
-	queryKey: ['tech-review-project-report', projectId],
-	queryFn: async () => {
-		return await client.labrinth.tech_review_internal.getProjectReport(projectId)
-	},
-	retry: false,
-})
-
-const {
-	data: projectData,
-	isLoading: isLoadingProject,
-	isError: isProjectError,
-} = useQuery({
-	queryKey: ['project', projectId],
-	queryFn: async () => {
-		return await client.labrinth.projects_v3.get(projectId)
-	},
-	retry: false,
-})
-
-const { data: organizationData, isLoading: isLoadingOrg } = useQuery({
-	queryKey: ['project-organization', projectId],
-	queryFn: async () => {
-		return await client.labrinth.projects_v3.getOrganization(projectId)
-	},
-})
-
-const { data: membersData, isLoading: isLoadingMembers } = useQuery({
-	queryKey: ['project-members', projectId],
-	queryFn: async () => {
-		return await client.labrinth.projects_v3.getMembers(projectId)
-	},
-	enabled: computed(() => !organizationData.value && !isLoadingOrg.value),
-})
-
-const isLoading = computed(
-	() =>
-		isLoadingReport.value ||
-		isLoadingProject.value ||
-		isLoadingOrg.value ||
-		(isLoadingMembers.value && !organizationData.value),
-)
-
-const hasError = computed(() => isReportError.value || isProjectError.value)
-
-const ownership = computed<Labrinth.TechReview.Internal.Ownership | null>(() => {
-	if (organizationData.value) {
-		return {
-			kind: 'organization',
-			id: organizationData.value.id,
-			name: organizationData.value.name,
-			icon_url: organizationData.value.icon_url ?? undefined,
-		}
-	}
-
-	if (membersData.value) {
-		const owner = membersData.value.find((m) => m.is_owner)
-		if (owner) {
-			return {
-				kind: 'user',
-				id: owner.user.id,
-				name: owner.user.username,
-				icon_url: owner.user.avatar_url ?? undefined,
-			}
-		}
-	}
-
-	return null
-})
-
-const reviewItem = computed(() => {
-	if (!projectReportData.value || !projectData.value || !ownership.value) return null
-
-	const { project_report, thread } = projectReportData.value
-
-	const reports = project_report ? flattenFileReports(project_report.versions) : []
-
-	return {
-		project: projectData.value,
-		project_owner: ownership.value,
-		thread,
-		reports,
-	}
-})
-
-const { loadingIssues, decompiledSources, handleLoadIssueSources } = useTechReviewSources(
-	() => reviewItem.value?.reports.flatMap((report) => report.issues) ?? [],
-	true,
-)
-
-const focusedDetailId = computed(() => route.query.detail?.toString() ?? null)
-
-async function handleMarkComplete(projectId: string) {
-	await Promise.all([
-		queryClient.invalidateQueries({ queryKey: ['tech-reviews'] }),
-		queryClient.invalidateQueries({ queryKey: ['tech-review-project-report', projectId] }),
-		queryClient.invalidateQueries({ queryKey: ['project', projectId] }),
-		queryClient.invalidateQueries({ queryKey: ['project', 'v2', projectId] }),
-		queryClient.invalidateQueries({ queryKey: ['project', 'v3', projectId] }),
-	])
-}
-
-const maliciousSummaryModalRef = ref<InstanceType<typeof MaliciousSummaryModal>>()
-const currentUnsafeFiles = ref<UnsafeFile[]>([])
-
-function handleShowMaliciousSummary(unsafeFiles: UnsafeFile[]) {
-	currentUnsafeFiles.value = unsafeFiles
-	maliciousSummaryModalRef.value?.show()
-}
-
-function refetch() {
-	queryClient.invalidateQueries({ queryKey: ['tech-review-project-report', projectId] })
-}
-
-function handleKeybinds(event: KeyboardEvent) {
-	keybinds.value.handle(event, {
-		scope: 'tech-review',
-		actions: {
-			goToTop: () => {
-				window.scrollTo({
-					top: 0,
-					behavior: 'smooth',
-				})
-			},
-			goToBottom: () => {
-				window.scrollTo({
-					top: document.body.scrollHeight,
-					behavior: 'smooth',
-				})
-			},
-		},
-	})
-}
-
-onMounted(() => {
-	window.addEventListener('keydown', handleKeybinds)
-})
-
-onUnmounted(() => {
-	window.removeEventListener('keydown', handleKeybinds)
-})
-</script>
-
-<template>
-	<div class="flex flex-col">
-		<BackToParentLink :to="'/moderation/technical-review'"> Back to queue </BackToParentLink>
-
-		<div v-if="isLoading" class="flex flex-col gap-4">
-			<div class="universal-card flex h-48 items-center justify-center">
-				<LoaderCircleIcon class="size-8 animate-spin text-secondary" />
-			</div>
-		</div>
-		<div
-			v-else-if="hasError"
-			class="universal-card flex h-24 items-center justify-center text-secondary"
-		>
-			Project not found in the tech review queue.
-		</div>
-		<div
-			v-else-if="!reviewItem"
-			class="universal-card flex h-24 items-center justify-center text-secondary"
-		>
-			No review data available for this project.
-		</div>
-		<ModerationTechRevCard
-			v-else
-			:item="reviewItem"
-			:focused-detail-id="focusedDetailId"
-			:loading-issues="loadingIssues"
-			:decompiled-sources="decompiledSources"
-			:collapsed="false"
-			allow-showing-hidden-traces
-			disable-collapsing
-			@refetch="refetch"
-			@load-issue-sources="handleLoadIssueSources"
-			@mark-complete="handleMarkComplete"
-			@show-malicious-summary="handleShowMaliciousSummary"
-		/>
-		<MaliciousSummaryModal ref="maliciousSummaryModalRef" :unsafe-files="currentUnsafeFiles" />
-	</div>
-</template>
diff --git a/apps/frontend/src/pages/moderation/technical-review/index.vue b/apps/frontend/src/pages/moderation/technical-review/index.vue
deleted file mode 100644
index be299b04adc..00000000000
--- a/apps/frontend/src/pages/moderation/technical-review/index.vue
+++ /dev/null
@@ -1,775 +0,0 @@
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import {
-	BlendIcon,
-	ListFilterIcon,
-	SettingsIcon,
-	SortAscIcon,
-	SortDescIcon,
-	SpinnerIcon,
-} from '@modrinth/assets'
-import {
-	ButtonLink,
-	Combobox,
-	type ComboboxOption,
-	commonMessages,
-	injectModrinthClient,
-	Pagination,
-	TeleportPopoutMenu,
-	Toggle,
-	useFormatNumber,
-	useVIntl,
-} from '@modrinth/ui'
-import { useInfiniteQuery, useQueryClient } from '@tanstack/vue-query'
-import Fuse from 'fuse.js'
-import { nextTick, reactive } from 'vue'
-
-import MaliciousSummaryModal, {
-	type UnsafeFile,
-} from '~/components/ui/moderation/MaliciousSummaryModal.vue'
-import ModerationQueueSkeleton from '~/components/ui/moderation/ModerationQueueSkeleton.vue'
-import ModerationQueueToolbar from '~/components/ui/moderation/ModerationQueueToolbar.vue'
-import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
-import { flattenFileReports } from '~/components/ui/moderation/tech-review/helpers'
-import { useTechReviewSources } from '~/components/ui/moderation/tech-review/use-tech-review-sources'
-
-useHead({ title: 'Tech review queue - Modrinth' })
-
-const client = injectModrinthClient()
-const queryClient = useQueryClient()
-const keybinds = useModerationKeybinds()
-
-const API_PAGE_SIZE = 50
-const UI_PAGE_SIZE = 4
-const { formatMessage } = useVIntl()
-const formatNumber = useFormatNumber()
-const route = useRoute()
-const router = useRouter()
-
-const SORT_VALUES = ['Severity highest', 'Severity lowest', 'Oldest', 'Newest'] as const
-const sortTypes: ComboboxOption<string>[] = [
-	{ value: 'Severity highest', label: 'Severity highest' },
-	{ value: 'Severity lowest', label: 'Severity lowest' },
-	{ value: 'Oldest', label: 'Oldest' },
-	{ value: 'Newest', label: 'Newest' },
-]
-
-const RESPONSE_FILTER_VALUES = ['All', 'Unread', 'Read'] as const
-const responseFilterTypes: ComboboxOption<string>[] = [
-	{ value: 'All', label: 'All' },
-	{ value: 'Unread', label: 'Unread' },
-	{ value: 'Read', label: 'Read' },
-]
-
-const PROJECT_TYPE_FILTERS = [
-	{ value: 'All project types', name: 'All project types' },
-	{ value: 'Modpacks', name: 'Modpacks' },
-	{ value: 'Mods', name: 'Mods' },
-	{ value: 'Resource Packs', name: 'Resource Packs' },
-	{ value: 'Data Packs', name: 'Data Packs' },
-	{ value: 'Plugins', name: 'Plugins' },
-	{ value: 'Shaders', name: 'Shaders' },
-	{ value: 'Servers', name: 'Servers' },
-] as const
-const PROJECT_TYPE_VALUES = PROJECT_TYPE_FILTERS.map((filter) => filter.value)
-
-function parseAllowed<T extends string>(value: unknown, allowed: readonly T[], fallback: T): T {
-	const parsed = queryAsStringOrEmpty((value as string | string[] | null | undefined) ?? '')
-	return (allowed as readonly string[]).includes(parsed) ? (parsed as T) : fallback
-}
-
-function parsePage(value: unknown): number {
-	const page = Number.parseInt(
-		queryAsStringOrEmpty((value as string | string[] | null | undefined) ?? ''),
-		10,
-	)
-	return Number.isInteger(page) && page > 0 ? page : 1
-}
-
-function parseBoolean(value: unknown, fallback: boolean): boolean {
-	const parsed = queryAsStringOrEmpty(
-		(value as string | string[] | null | undefined) ?? '',
-	).toLowerCase()
-	if (parsed === 'true' || parsed === '1') return true
-	if (parsed === 'false' || parsed === '0') return false
-	return fallback
-}
-
-function serializeRouteQuery(query: typeof route.query): string {
-	const keys = Object.keys(query).sort()
-	return JSON.stringify(
-		Object.fromEntries(
-			keys.flatMap((key) => {
-				const value = query[key]
-				if (value == null || value === '') return []
-				return [[key, Array.isArray(value) ? value.map(String) : String(value)]]
-			}),
-		),
-	)
-}
-
-const query = ref(queryAsStringOrEmpty(route.query.q ?? ''))
-const currentFilterType = ref(queryAsStringOrEmpty(route.query.flags ?? '') || 'All flags')
-const currentSortType = ref(parseAllowed(route.query.sort, SORT_VALUES, 'Severity highest'))
-const currentResponseFilter = ref(parseAllowed(route.query.response, RESPONSE_FILTER_VALUES, 'All'))
-const currentProjectTypeFilter = ref(
-	parseAllowed(route.query.projectType, PROJECT_TYPE_VALUES, 'All project types'),
-)
-const inOtherQueueFilter = ref(parseBoolean(route.query.underReview, true))
-const currentPage = ref(parsePage(route.query.page))
-
-let syncingFromRoute = false
-
-function writeFiltersToRoute() {
-	if (syncingFromRoute) return
-
-	const nextQuery = { ...route.query }
-
-	if (query.value) nextQuery.q = query.value
-	else delete nextQuery.q
-
-	if (currentSortType.value !== 'Severity highest') nextQuery.sort = currentSortType.value
-	else delete nextQuery.sort
-
-	if (currentResponseFilter.value !== 'All') nextQuery.response = currentResponseFilter.value
-	else delete nextQuery.response
-
-	if (currentFilterType.value !== 'All flags') nextQuery.flags = currentFilterType.value
-	else delete nextQuery.flags
-
-	if (currentProjectTypeFilter.value !== 'All project types') {
-		nextQuery.projectType = currentProjectTypeFilter.value
-	} else {
-		delete nextQuery.projectType
-	}
-
-	if (!inOtherQueueFilter.value) nextQuery.underReview = 'false'
-	else delete nextQuery.underReview
-
-	if (currentPage.value > 1) nextQuery.page = String(currentPage.value)
-	else delete nextQuery.page
-
-	if (serializeRouteQuery(route.query) === serializeRouteQuery(nextQuery)) return
-
-	router.replace({
-		path: route.path,
-		query: nextQuery,
-	})
-}
-
-function readFiltersFromRoute() {
-	syncingFromRoute = true
-
-	const nextQuery = queryAsStringOrEmpty(route.query.q ?? '')
-	if (query.value !== nextQuery) query.value = nextQuery
-
-	const nextFlags = queryAsStringOrEmpty(route.query.flags ?? '') || 'All flags'
-	if (currentFilterType.value !== nextFlags) currentFilterType.value = nextFlags
-
-	const nextSort = parseAllowed(route.query.sort, SORT_VALUES, 'Severity highest')
-	if (currentSortType.value !== nextSort) currentSortType.value = nextSort
-
-	const nextResponse = parseAllowed(route.query.response, RESPONSE_FILTER_VALUES, 'All')
-	if (currentResponseFilter.value !== nextResponse) currentResponseFilter.value = nextResponse
-
-	const nextProjectType = parseAllowed(
-		route.query.projectType,
-		PROJECT_TYPE_VALUES,
-		'All project types',
-	)
-	if (currentProjectTypeFilter.value !== nextProjectType) {
-		currentProjectTypeFilter.value = nextProjectType
-	}
-
-	const nextUnderReview = parseBoolean(route.query.underReview, true)
-	if (inOtherQueueFilter.value !== nextUnderReview) inOtherQueueFilter.value = nextUnderReview
-
-	const nextPage = parsePage(route.query.page)
-	if (currentPage.value !== nextPage) currentPage.value = nextPage
-
-	nextTick(() => {
-		syncingFromRoute = false
-	})
-}
-
-watch(
-	[
-		query,
-		currentFilterType,
-		currentSortType,
-		currentResponseFilter,
-		currentProjectTypeFilter,
-		inOtherQueueFilter,
-		currentPage,
-	],
-	writeFiltersToRoute,
-)
-
-watch(() => route.query, readFiltersFromRoute, { deep: true })
-
-const filterTypes = computed<ComboboxOption<string>[]>(() => {
-	const issues =
-		reviewItems.value?.flatMap((review) => review.reports.flatMap((report) => report.issues)) ?? []
-	const counts = new Map<string, number>()
-	for (const issue of issues) {
-		counts.set(issue.issue_type, (counts.get(issue.issue_type) ?? 0) + 1)
-	}
-
-	const options: ComboboxOption<string>[] = [
-		{
-			value: 'All flags',
-			label: isLoading.value ? 'All flags' : `All flags (${formatNumber(issues.length)})`,
-		},
-	]
-	for (const type of Array.from(counts.keys()).sort()) {
-		options.push({
-			value: type,
-			label: isLoading.value ? type : `${type} (${formatNumber(counts.get(type) ?? 0)})`,
-		})
-	}
-	return options
-})
-
-const projectTypeFilterTypes = computed<ComboboxOption<string>[]>(() => {
-	const items = reviewItems.value ?? []
-	const showCounts = !isLoading.value && currentProjectTypeFilter.value === 'All project types'
-
-	return PROJECT_TYPE_FILTERS.map((filter) => {
-		if (!showCounts) {
-			return { value: filter.value, label: filter.name }
-		}
-
-		const apiType = toApiProjectType(filter.value)
-		const count =
-			filter.value === 'All project types'
-				? items.length
-				: items.filter((item) => apiType && item.project.project_types.includes(apiType)).length
-
-		return { value: filter.value, label: `${filter.name} (${formatNumber(count)})` }
-	})
-})
-
-const techReviewQueryKey = computed(
-	() =>
-		[
-			'tech-reviews',
-			currentSortType.value,
-			currentResponseFilter.value,
-			inOtherQueueFilter.value,
-			currentFilterType.value,
-			currentProjectTypeFilter.value,
-		] as const,
-)
-
-const fuse = computed(() => {
-	if (!reviewItems.value || reviewItems.value.length === 0) return null
-	return new Fuse(reviewItems.value, {
-		keys: [
-			{ name: 'project.title', weight: 4 },
-			{ name: 'project.slug', weight: 3 },
-			{ name: 'reports.file_name', weight: 2 },
-			{ name: 'reports.issues.issue_type', weight: 3 },
-			{ name: 'project_owner.name', weight: 2 },
-		],
-		includeScore: true,
-		threshold: 0.4,
-	})
-})
-
-const searchResults = computed(() => {
-	if (!query.value || !fuse.value) return null
-	return fuse.value.search(query.value).map((result) => result.item)
-})
-
-const filteredItems = computed(() => {
-	if (!reviewItems.value) return []
-	return query.value && searchResults.value ? searchResults.value : [...reviewItems.value]
-})
-
-const filteredIssuesCount = computed(() => {
-	return filteredItems.value.reduce((total, review) => {
-		return total + review.reports.reduce((sum, report) => sum + report.issues.length, 0)
-	}, 0)
-})
-
-const totalPages = computed(() => Math.ceil((filteredItems.value?.length || 0) / UI_PAGE_SIZE))
-const paginatedItems = computed(() => {
-	if (!filteredItems.value) return []
-	const start = (currentPage.value - 1) * UI_PAGE_SIZE
-	const end = start + UI_PAGE_SIZE
-	return filteredItems.value.slice(start, end)
-})
-const pageStart = computed(() =>
-	filteredItems.value.length === 0 ? 0 : (currentPage.value - 1) * UI_PAGE_SIZE + 1,
-)
-const pageEnd = computed(() =>
-	Math.min(
-		(currentPage.value - 1) * UI_PAGE_SIZE + paginatedItems.value.length,
-		filteredItems.value.length,
-	),
-)
-function goToPage(page: number, top = false) {
-	currentPage.value = page
-
-	if (top && window) {
-		window.scrollTo({
-			top: 0,
-			left: 0,
-			behavior: 'smooth',
-		})
-	}
-}
-
-function toApiSort(label: string): Labrinth.TechReview.Internal.SearchProjectsSort {
-	switch (label) {
-		case 'Oldest':
-			return 'created_asc'
-		case 'Newest':
-			return 'created_desc'
-		case 'Severity highest':
-			return 'severity_desc'
-		case 'Severity lowest':
-			return 'severity_asc'
-		default:
-			return 'severity_desc'
-	}
-}
-
-function toApiProjectType(label: string): string | undefined {
-	switch (label) {
-		case 'Modpacks':
-			return 'modpack'
-		case 'Mods':
-			return 'mod'
-		case 'Resource Packs':
-			return 'resourcepack'
-		case 'Data Packs':
-			return 'datapack'
-		case 'Plugins':
-			return 'plugin'
-		case 'Shaders':
-			return 'shader'
-		case 'Servers':
-			return 'minecraft_java_server'
-		default:
-			return undefined
-	}
-}
-
-const {
-	data: infiniteData,
-	isLoading,
-	isFetchingNextPage,
-	fetchNextPage,
-	hasNextPage,
-	refetch,
-} = useInfiniteQuery({
-	enabled: true,
-	queryKey: techReviewQueryKey,
-	queryFn: async ({ pageParam = 0 }) => {
-		const filter: Labrinth.TechReview.Internal.SearchProjectsFilter = {
-			project_type: [],
-			replied_to: undefined,
-			project_status: [],
-			issue_type: [],
-		}
-
-		if (currentResponseFilter.value === 'Unread') {
-			filter.replied_to = 'unreplied'
-		} else if (currentResponseFilter.value === 'Read') {
-			filter.replied_to = 'replied'
-		}
-
-		if (inOtherQueueFilter.value) {
-			filter.project_status = ['processing']
-		}
-
-		if (currentFilterType.value !== 'All flags') {
-			filter.issue_type = [currentFilterType.value]
-		}
-
-		const projectType = toApiProjectType(currentProjectTypeFilter.value)
-		if (projectType) {
-			filter.project_type = [projectType]
-		}
-
-		return await client.labrinth.tech_review_internal.searchProjects({
-			limit: API_PAGE_SIZE,
-			page: pageParam,
-			sort_by: toApiSort(currentSortType.value),
-			filter,
-		})
-	},
-	getNextPageParam: (lastPage, allPages) => {
-		// full page = maybe more
-		return lastPage.project_reports.length >= API_PAGE_SIZE ? allPages.length : undefined
-	},
-	initialPageParam: 0,
-})
-
-watch(
-	[() => infiniteData.value, hasNextPage],
-	() => {
-		if (hasNextPage.value && !isFetchingNextPage.value) {
-			fetchNextPage()
-		}
-	},
-	{ immediate: true },
-)
-
-const mergedSearchResponse = computed(() => {
-	if (!infiniteData.value?.pages?.length) return null
-
-	return infiniteData.value.pages.reduce(
-		(merged, page) => ({
-			project_reports: [...merged.project_reports, ...page.project_reports],
-			projects: { ...merged.projects, ...page.projects },
-			threads: { ...merged.threads, ...page.threads },
-			ownership: { ...merged.ownership, ...page.ownership },
-		}),
-		{
-			project_reports: [] as Labrinth.TechReview.Internal.ProjectReport[],
-			projects: {} as Record<string, Labrinth.TechReview.Internal.ProjectModerationInfo>,
-			threads: {} as Record<string, Labrinth.TechReview.Internal.Thread>,
-			ownership: {} as Record<string, Labrinth.TechReview.Internal.Ownership>,
-		},
-	)
-})
-
-const reviewItems = computed(() => {
-	if (!mergedSearchResponse.value?.project_reports?.length) {
-		return []
-	}
-
-	const response = mergedSearchResponse.value
-
-	return response.project_reports.flatMap((projectReport) => {
-		const project = response.projects[projectReport.project_id]
-		const thread = project?.thread_id ? response.threads[project.thread_id] : undefined
-		if (!thread) return []
-
-		return [
-			{
-				project,
-				project_owner: response.ownership[projectReport.project_id],
-				thread,
-				reports: flattenFileReports(projectReport.versions),
-			},
-		]
-	})
-})
-
-const { loadingIssues, decompiledSources, handleLoadIssueSources } = useTechReviewSources(() =>
-	reviewItems.value.flatMap((review) => review.reports.flatMap((report) => report.issues)),
-)
-
-function handleMarkComplete(projectId: string) {
-	const currentIndex = paginatedItems.value.findIndex((item) => item.project.id === projectId)
-	const threadId = reviewItems.value.find((item) => item.project.id === projectId)?.thread?.id
-
-	queryClient.setQueryData(
-		techReviewQueryKey.value,
-		(
-			oldData:
-				| {
-						pages: Labrinth.TechReview.Internal.SearchResponse[]
-						pageParams: number[]
-				  }
-				| undefined,
-		) => {
-			if (!oldData) return oldData
-
-			return {
-				...oldData,
-				pages: oldData.pages.map((page) => ({
-					...page,
-					// leave this as-is so getNextPageParam still sees a full page
-					project_reports: page.project_reports,
-					projects: Object.fromEntries(
-						Object.entries(page.projects).filter(([id]) => id !== projectId),
-					),
-					threads: Object.fromEntries(
-						Object.entries(page.threads).filter(([id]) => id !== threadId),
-					),
-					ownership: Object.fromEntries(
-						Object.entries(page.ownership).filter(([id]) => id !== projectId),
-					),
-				})),
-			}
-		},
-	)
-
-	queryClient.invalidateQueries({
-		queryKey: ['tech-reviews'],
-		refetchType: 'none',
-	})
-
-	nextTick(() => {
-		const nextItem = paginatedItems.value[currentIndex]
-		if (nextItem) {
-			cardRefs.get(nextItem.project.id)?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'start',
-			})
-		}
-	})
-}
-
-const maliciousSummaryModalRef = ref<InstanceType<typeof MaliciousSummaryModal>>()
-const currentUnsafeFiles = ref<UnsafeFile[]>([])
-const cardRefs = reactive<Map<string, HTMLElement>>(new Map())
-
-function handleShowMaliciousSummary(unsafeFiles: UnsafeFile[]) {
-	currentUnsafeFiles.value = unsafeFiles
-	maliciousSummaryModalRef.value?.show()
-}
-
-watch(
-	[
-		currentSortType,
-		currentResponseFilter,
-		inOtherQueueFilter,
-		currentFilterType,
-		currentProjectTypeFilter,
-	],
-	() => {
-		if (syncingFromRoute) return
-		goToPage(1)
-	},
-)
-
-watch(totalPages, (pages) => {
-	if (isLoading.value) return
-
-	if (pages === 0) {
-		if (currentPage.value !== 1) goToPage(1)
-		return
-	}
-
-	if (currentPage.value > pages) {
-		goToPage(pages)
-	}
-})
-
-// TODO: Reimpl when backend is available
-// const batchScanProgressInformation = computed<BatchScanProgress | undefined>(() => {
-// 	return {
-// 		total: 58,
-// 		complete: 20,
-// 	}
-// })
-
-const CARD_BOTTOM_OFFSET = 210
-
-function handleKeybinds(event: KeyboardEvent) {
-	keybinds.value.handle(event, {
-		scope: 'tech-review',
-		actions: {
-			goToTop: () => {
-				Array.from(cardRefs.values())
-					.filter((card) => card.getBoundingClientRect().top <= 0)
-					.reduce((prev, curr) =>
-						curr.getBoundingClientRect().top > prev.getBoundingClientRect().top ? curr : prev,
-					)
-					?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-			},
-			goToBottom: () => {
-				const nearestCard = Array.from(cardRefs.values())
-					.filter((card) => card.getBoundingClientRect().bottom >= window.innerHeight)
-					.reduce((prev, curr) =>
-						curr.getBoundingClientRect().top < prev.getBoundingClientRect().top ? curr : prev,
-					)
-
-				if (nearestCard) {
-					window.scrollTo({
-						behavior: 'smooth',
-						top:
-							nearestCard.getBoundingClientRect().bottom +
-							window.scrollY -
-							window.innerHeight +
-							CARD_BOTTOM_OFFSET,
-					})
-				}
-			},
-		},
-	})
-}
-
-onMounted(() => {
-	window.addEventListener('keydown', handleKeybinds)
-})
-
-onUnmounted(() => {
-	window.removeEventListener('keydown', handleKeybinds)
-})
-</script>
-
-<template>
-	<div class="flex flex-col gap-4">
-		<!-- TODO: Reimpl when backend is available -->
-		<!-- <BatchScanProgressAlert
-			v-if="batchScanProgressInformation"
-			:progress="batchScanProgressInformation"
-		/> -->
-
-		<ModerationQueueToolbar
-			v-model="query"
-			:page="currentPage"
-			:total-pages="totalPages"
-			:loading="isLoading"
-			@search="goToPage(1)"
-			@switch-page="goToPage"
-		>
-			<template #actions>
-				<ButtonLink to="/moderation/technical-review/rules">
-					<SettingsIcon class="size-5" />
-					Rules
-				</ButtonLink>
-
-				<Combobox
-					v-model="currentResponseFilter"
-					class="!w-full flex-grow sm:!w-[120px] sm:flex-grow-0"
-					:options="responseFilterTypes"
-					trigger-type="base"
-					trigger-size="lg"
-				>
-					<template #selected>
-						<span class="flex flex-row gap-2 align-middle font-semibold">
-							<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
-							<span class="truncate text-contrast">{{ currentResponseFilter }}</span>
-						</span>
-					</template>
-				</Combobox>
-
-				<Combobox
-					v-model="currentSortType"
-					class="!w-full flex-grow sm:!w-[215px] sm:flex-grow-0"
-					:options="sortTypes"
-					:placeholder="formatMessage(commonMessages.sortByLabel)"
-					trigger-type="base"
-					trigger-size="lg"
-				>
-					<template #selected>
-						<span class="flex flex-row gap-2 align-middle font-semibold">
-							<SortAscIcon
-								v-if="currentSortType === 'Oldest' || currentSortType === 'Severity lowest'"
-								class="size-5 flex-shrink-0 text-secondary"
-							/>
-							<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
-							<span class="truncate text-contrast">{{ currentSortType }}</span>
-						</span>
-					</template>
-				</Combobox>
-
-				<TeleportPopoutMenu label="Advanced filters" size="lg">
-					<template #trigger>
-						<BlendIcon aria-hidden="true" />
-						Advanced filters
-					</template>
-					<template #panel>
-						<div class="flex min-w-64 flex-col gap-3">
-							<label class="flex cursor-pointer items-center justify-between gap-2 text-sm">
-								<span class="whitespace-nowrap font-semibold">Only under review</span>
-								<Toggle v-model="inOtherQueueFilter" />
-							</label>
-							<div class="flex flex-col gap-2">
-								<span class="flex items-center gap-1.5 text-sm font-semibold text-secondary">
-									Flag type
-									<SpinnerIcon v-if="isLoading" class="size-3.5 animate-spin" aria-hidden="true" />
-									<template v-else>({{ formatNumber(filteredIssuesCount) }})</template>
-								</span>
-								<Combobox
-									v-model="currentFilterType"
-									class="!w-full"
-									:options="filterTypes"
-									:placeholder="formatMessage(commonMessages.filterByLabel)"
-									searchable
-								>
-									<template #selected>
-										<span class="flex flex-row gap-2 align-middle font-semibold">
-											<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
-											<span class="truncate text-contrast">{{ currentFilterType }}</span>
-										</span>
-									</template>
-								</Combobox>
-							</div>
-							<div class="flex flex-col gap-2">
-								<span class="text-sm font-semibold text-secondary">Project type</span>
-								<Combobox
-									v-model="currentProjectTypeFilter"
-									class="!w-full"
-									:options="projectTypeFilterTypes"
-									:placeholder="formatMessage(commonMessages.filterByLabel)"
-									searchable
-								>
-									<template #selected>
-										<span class="flex flex-row gap-2 align-middle font-semibold">
-											<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
-											<span class="truncate text-contrast">{{ currentProjectTypeFilter }}</span>
-										</span>
-									</template>
-								</Combobox>
-							</div>
-						</div>
-					</template>
-				</TeleportPopoutMenu>
-			</template>
-			<template #meta>
-				<div v-if="filteredItems.length > 0" class="flex items-center gap-2">
-					<SpinnerIcon
-						v-if="isFetchingNextPage"
-						v-tooltip="`Pages are still being fetched...`"
-						aria-hidden="true"
-						class="size-4 animate-spin"
-					/>
-					Showing {{ formatNumber(pageStart) }}–{{ formatNumber(pageEnd) }} of
-					{{ formatNumber(filteredItems.length) }} projects
-				</div>
-			</template>
-		</ModerationQueueToolbar>
-
-		<ModerationQueueSkeleton v-if="isLoading" />
-		<div
-			v-else-if="paginatedItems.length === 0"
-			class="universal-card flex h-24 items-center justify-center text-secondary"
-		>
-			No projects in queue.
-		</div>
-		<div v-else class="flex flex-col gap-4">
-			<div
-				v-for="item in paginatedItems"
-				:key="item.project.id"
-				:ref="
-					(el) => {
-						if (el) {
-							cardRefs.set(item.project.id, el as HTMLElement)
-						} else {
-							cardRefs.delete(item.project.id)
-						}
-					}
-				"
-			>
-				<ModerationTechRevCard
-					:item="item"
-					:loading-issues="loadingIssues"
-					:decompiled-sources="decompiledSources"
-					:collapsed="true"
-					@refetch="refetch"
-					@load-issue-sources="handleLoadIssueSources"
-					@mark-complete="handleMarkComplete"
-					@show-malicious-summary="handleShowMaliciousSummary"
-				/>
-			</div>
-		</div>
-
-		<div v-if="totalPages > 1" class="flex justify-end">
-			<Pagination
-				:page="currentPage"
-				:count="totalPages"
-				@switch-page="(num) => goToPage(num, true)"
-			/>
-		</div>
-
-		<MaliciousSummaryModal ref="maliciousSummaryModalRef" :unsafe-files="currentUnsafeFiles" />
-	</div>
-</template>
diff --git a/apps/frontend/src/pages/moderation/technical-review/rules.vue b/apps/frontend/src/pages/moderation/technical-review/rules.vue
index 7bca53a3ca7..16fee9ca783 100644
--- a/apps/frontend/src/pages/moderation/technical-review/rules.vue
+++ b/apps/frontend/src/pages/moderation/technical-review/rules.vue
@@ -352,10 +352,10 @@ IS_MATCH ? "low" : null</code></pre>
 		<div class="flex flex-wrap items-center justify-between gap-3">
 			<div class="flex items-center gap-3">
 				<ButtonLink
-					to="/moderation/technical-review"
+					to="/moderation"
 					type="quiet"
 					class="!size-10 !rounded-full !p-0"
-					aria-label="Back to tech review queue"
+					aria-label="Back to project review queue"
 				>
 					<ArrowLeftIcon />
 				</ButtonLink>
@@ -1340,7 +1340,7 @@ function getAffectedDetailsPageEnd(rule: Labrinth.TechReview.Internal.DelphiRule
 function getAffectedDetailLink(
 	detail: Labrinth.TechReview.Internal.DelphiRuleAffectedDetail,
 ): string {
-	return `/moderation/technical-review/${detail.project_id}?detail=${encodeURIComponent(detail.detail_id)}`
+	return `/moderation/project-review?project=${encodeURIComponent(detail.project_id)}&detail=${encodeURIComponent(detail.detail_id)}`
 }
 
 function getProjectLink(detail: Labrinth.TechReview.Internal.DelphiRuleAffectedDetail): string {
diff --git a/apps/frontend/src/pages/settings/moderation/index.vue b/apps/frontend/src/pages/settings/moderation/index.vue
index 9570a7c1513..809d00f3087 100644
--- a/apps/frontend/src/pages/settings/moderation/index.vue
+++ b/apps/frontend/src/pages/settings/moderation/index.vue
@@ -2,6 +2,7 @@
 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 ModerationTechReview from '~/components/ui/moderation/settings/ModerationTechReview.vue'
 
 definePageMeta({
 	middleware: ['auth', 'staff'],
@@ -15,5 +16,6 @@ useSeoMeta({
 <template>
 	<ModerationKeybinds />
 	<ModerationSettings />
+	<ModerationTechReview />
 	<ModerationAppearance />
 </template>
diff --git a/apps/frontend/src/providers/project-review/content.ts b/apps/frontend/src/providers/project-review/content.ts
index 78dbd43dbf0..a446d45f51f 100644
--- a/apps/frontend/src/providers/project-review/content.ts
+++ b/apps/frontend/src/providers/project-review/content.ts
@@ -1,12 +1,12 @@
 import { injectModrinthClient } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, type Ref, watch } from 'vue'
+import { computed, type Ref, ref, watch } from 'vue'
 
 import {
 	flattenFileReports,
 	getFileDetailCount,
-} from '~/components/ui/moderation/tech-review/helpers'
-import { useTechReviewDecisions } from '~/components/ui/moderation/tech-review/use-tech-review-decisions'
+} from '~/components/project-review/tech-review/helpers'
+import { useTechReviewDecisions } from '~/components/project-review/tech-review/verdict/use-decisions'
 import { projectQueryOptions } from '~/composables/queries/project'
 
 import { reviewQueryOptions } from './queries'
@@ -40,6 +40,10 @@ export function useReviewContent(projectId: Ref<string>) {
 	const reports = computed(() =>
 		flattenFileReports(reportsQuery.data.value?.project_report?.versions ?? []),
 	)
+	const selectedArchiveId = ref<string>()
+	watch(projectId, () => {
+		selectedArchiveId.value = undefined
+	})
 	const decisions = useTechReviewDecisions(reports)
 	watch(projectId, decisions.resetDecisions, { flush: 'sync' })
 	const pendingReports = computed(() =>
@@ -86,6 +90,7 @@ export function useReviewContent(projectId: Ref<string>) {
 		versions,
 		reportsQuery,
 		reports,
+		selectedArchiveId,
 		decisions,
 		pendingReports,
 		completedReports,
diff --git a/apps/frontend/src/providers/project-review/context.ts b/apps/frontend/src/providers/project-review/context.ts
index 264560fd285..e9de109e6b2 100644
--- a/apps/frontend/src/providers/project-review/context.ts
+++ b/apps/frontend/src/providers/project-review/context.ts
@@ -94,6 +94,13 @@ export function createProjectReviewPageContext() {
 		confirmLeaveModal,
 		...data,
 		...content,
+		initialLoading: computed(
+			() =>
+				data.isLoading.value ||
+				data.initialLoading.value ||
+				content.initialLoading.value ||
+				disclosures.initialLoading.value,
+		),
 		tabCounts: computed(() => ({
 			...content.contentCounts.value,
 			gallery: data.project.value ? data.gallery.value.length : undefined,
diff --git a/apps/frontend/src/providers/project-review/prefetch.ts b/apps/frontend/src/providers/project-review/prefetch.ts
index 2b3048fff43..daa183081f0 100644
--- a/apps/frontend/src/providers/project-review/prefetch.ts
+++ b/apps/frontend/src/providers/project-review/prefetch.ts
@@ -1,6 +1,7 @@
 import type { AbstractModrinthClient } from '@modrinth/api-client'
 import type { QueryClient } from '@tanstack/vue-query'
 
+import { flattenFileReports } from '~/components/project-review/tech-review/helpers'
 import { creatorProjectStatsQueryOptions } from '~/composables/creator-project-stats'
 import { projectQueryOptions, warmProjectCheckCaches } from '~/composables/queries/project'
 
@@ -11,6 +12,7 @@ export async function prefetchReviewProject(
 	client: AbstractModrinthClient,
 	queryClient: QueryClient,
 	isCurrent: () => boolean,
+	preloadTechReview = false,
 ) {
 	if (!isCurrent()) return
 	const projectPromise = queryClient.fetchQuery(projectQueryOptions.v3(id, client))
@@ -21,7 +23,25 @@ export async function prefetchReviewProject(
 		queryClient.prefetchQuery(projectQueryOptions.v2(id, client)),
 		queryClient.prefetchQuery(projectQueryOptions.versionsV2(id, client)),
 		queryClient.prefetchQuery(reviewQueryOptions.versions(id, client, queryClient)),
-		queryClient.prefetchQuery(reviewQueryOptions.report(id, client)),
+		(async () => {
+			const report = await queryClient.fetchQuery(reviewQueryOptions.report(id, client))
+			if (!preloadTechReview || !isCurrent()) return
+			const firstArchive = flattenFileReports(report.project_report?.versions ?? [])[0]
+			const issueIds = [...new Set(firstArchive?.issues.map((issue) => issue.id) ?? [])]
+			let nextIssue = 0
+			async function preloadSources() {
+				while (isCurrent() && nextIssue < issueIds.length) {
+					const issueId = issueIds[nextIssue++]
+					await queryClient.prefetchQuery({
+						queryKey: ['tech-review', 'issue', issueId, { includeHidden: true }] as const,
+						queryFn: () =>
+							client.labrinth.tech_review_internal.getIssue(issueId, { include_hidden: true }),
+						staleTime: 24 * 60 * 60 * 1000,
+					})
+				}
+			}
+			await Promise.all([preloadSources(), preloadSources()])
+		})(),
 		disclosuresPromise.then(async (response) => {
 			if (!isCurrent()) return
 			const ids = [...new Set(response.disclosures.flatMap((item) => item.updated_by ?? []))]
diff --git a/apps/frontend/src/providers/project-review/queue.ts b/apps/frontend/src/providers/project-review/queue.ts
index 266f02d9ea7..69a797a60a0 100644
--- a/apps/frontend/src/providers/project-review/queue.ts
+++ b/apps/frontend/src/providers/project-review/queue.ts
@@ -38,11 +38,15 @@ export function useReviewQueue(
 	)
 
 	const settings = useModerationSettings()
+	const preloadTechReview = computed(() =>
+		settings.value.get(moderationSettings.General.TechReviewMode),
+	)
 	const prefetchKey = computed(() =>
 		JSON.stringify([
 			projectId.value,
 			remaining.value,
 			settings.value.get(moderationSettings.General.IncludeNonProcessingProjects),
+			preloadTechReview.value,
 		]),
 	)
 	let lastPrefetchKey = ''
@@ -74,7 +78,13 @@ export function useReviewQueue(
 			)
 				.then(async (next) => {
 					if (next && isCurrent()) {
-						await prefetchReviewProject(next.project, client, queryClient, isCurrent)
+						await prefetchReviewProject(
+							next.project,
+							client,
+							queryClient,
+							isCurrent,
+							preloadTechReview.value,
+						)
 					}
 				})
 				.catch(() => undefined)
diff --git a/apps/frontend/src/providers/project-review/review-decision.ts b/apps/frontend/src/providers/project-review/review-decision.ts
index b58d70d8a94..194c7fc5753 100644
--- a/apps/frontend/src/providers/project-review/review-decision.ts
+++ b/apps/frontend/src/providers/project-review/review-decision.ts
@@ -10,6 +10,7 @@ export type FacetUpdate = {
 export interface ReviewDecision extends ThreadReply {
 	projectId: string
 	status?: Labrinth.Projects.v2.ProjectStatus
+	techReviewVerdict?: 'unsafe'
 	facetUpdates: FacetUpdate[]
 	issues?: Labrinth.Threads.v3.NewThreadIssues
 	issuesMessage?: string
@@ -44,7 +45,11 @@ export async function applyReviewDecision(
 	if (approving) await updateFacets()
 	assertCurrent()
 	// Send thread messages after the status change so they appear below its message in the thread.
-	if (decision.status) {
+	if (decision.techReviewVerdict) {
+		await client.labrinth.tech_review_internal.submitProject(decision.projectId, {
+			verdict: decision.techReviewVerdict,
+		})
+	} else if (decision.status) {
 		await client.labrinth.projects_v3.edit(decision.projectId, {
 			status: decision.status,
 		})
diff --git a/apps/frontend/src/providers/project-review/review-panels.ts b/apps/frontend/src/providers/project-review/review-panels.ts
index 7a0f71cf88f..bf2ab0bf3d5 100644
--- a/apps/frontend/src/providers/project-review/review-panels.ts
+++ b/apps/frontend/src/providers/project-review/review-panels.ts
@@ -36,6 +36,7 @@ export type ResolvedIssueControl = ResolvedIssueControlOptions &
 				type: 'toggle'
 				id?: string
 				unselectToggles?: readonly string[]
+				clearIssueTogglesOnDisable?: boolean
 				issueCardDisplay?: {
 					icon?: string
 					label: string
@@ -443,6 +444,7 @@ export function createReviewPanels(
 							type: 'toggle',
 							id: node.id,
 							unselectToggles: node.unselectToggles,
+							clearIssueTogglesOnDisable: node.clearIssueTogglesOnDisable,
 							issueCardDisplay: node.issueCardDisplay
 								? {
 										icon: resolveWithContext(node.issueCardDisplay.icon, issueContext),
@@ -666,6 +668,8 @@ export function createReviewPanels(
 			return
 		}
 		if (typeof value !== 'boolean') return
+		if (!value && current.clearIssueTogglesOnDisable)
+			session.write(binding.projectId, 'issues', current.issueId, undefined)
 		if (value && current.unselectToggles?.length) {
 			const toggleIdsToUnselect = new Set(current.unselectToggles)
 			for (const [issueId, selected] of Object.entries(session.read(binding.projectId, 'issues'))) {
diff --git a/apps/frontend/src/providers/project-review/review-submission.ts b/apps/frontend/src/providers/project-review/review-submission.ts
index 85bd4587c71..684b9b34288 100644
--- a/apps/frontend/src/providers/project-review/review-submission.ts
+++ b/apps/frontend/src/providers/project-review/review-submission.ts
@@ -5,6 +5,10 @@ import { injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, onScopeDispose, ref, watch } from 'vue'
 
+import {
+	flattenFileReports,
+	getTechReviewState,
+} from '~/components/project-review/tech-review/helpers'
 import { useAuthState } from '~/composables/auth'
 import { useModerationSettings } from '~/composables/moderation'
 import { sendThreadReply, type ThreadReply } from '~/helpers/thread-issues'
@@ -39,7 +43,27 @@ export function createReviewSubmission(
 	const sendIssuesAsThreadMessage = computed(() =>
 		settings.value.get(moderationSettings.General.SendIssuesAsThreadMessage),
 	)
-	const { project, threadQuery, disclosures, lock } = injectProjectReviewPageContext()
+	const { project, threadQuery, disclosures, lock, reportsQuery, reports, decisions } =
+		injectProjectReviewPageContext()
+	const techReviewState = computed(() =>
+		getTechReviewState(
+			reports.value,
+			reportsQuery.data.value?.in_tech_review ?? false,
+			decisions.getDetailDecision,
+		),
+	)
+	const inTechReview = computed(() => techReviewState.value.inTechReview)
+	const techReviewMode = computed(() =>
+		settings.value.get(moderationSettings.General.TechReviewMode),
+	)
+	const techReviewIssueIds = computed(
+		() =>
+			new Set(
+				panels.availableIssues.value
+					.filter(({ category }) => category === 'Tech review')
+					.map(({ id }) => id),
+			),
+	)
 	const draft = ref('')
 	const uploadedImages = ref<string[]>([])
 	let disposed = false
@@ -109,19 +133,68 @@ export function createReviewSubmission(
 			decision,
 			reply,
 			clearIssues,
+			passTechReview,
 		}: {
 			id: string
 			threadId: string
 			decision?: ReviewDecision
 			reply?: ThreadReply
 			clearIssues?: boolean
+			passTechReview?: boolean
 		}) => {
 			assertCurrent(id)
+			if (passTechReview || decision?.techReviewVerdict) {
+				await lock.ensureEligible(id)
+				const result = await reportsQuery.refetch()
+				assertCurrent(id)
+				lock.assertEligible(id)
+				if (result.isError || !result.data)
+					throw new Error('Could not verify technical-review reports.')
+				const state = getTechReviewState(
+					flattenFileReports(result.data.project_report?.versions ?? []),
+					result.data.in_tech_review,
+				)
+				if (passTechReview && state.unsafe)
+					throw new Error('Projects with unsafe traces cannot pass technical review.')
+				if (state.pending)
+					throw new Error('Review all pending traces before submitting technical review.')
+			}
 			const clearMessage = () => {
 				assertCurrent(id)
 				draft.value = ''
 				uploadedImages.value = []
 			}
+			if (passTechReview) {
+				const assertPass = () => {
+					assertCurrent(id)
+					lock.assertEligible(id)
+					if (techReviewPassDisabledReason.value)
+						throw new Error(techReviewPassDisabledReason.value)
+				}
+				assertPass()
+				const facetIds = new Set(
+					previousIssues.issues.value
+						.filter((issue) => techReviewIssueIds.value.has(previousIssues.cardIssue(issue).id))
+						.flatMap((issue) => issue.facets.map(({ id }) => id)),
+				)
+				const facetUpdates = previousIssues.facetUpdates.value.filter(
+					({ id, data }) => facetIds.has(id) && data.moderator_verified,
+				)
+				for (const facet of facetUpdates) {
+					assertPass()
+					await client.labrinth.threads_v3.editIssueFacet(facet.id, facet.data)
+				}
+				assertPass()
+				await client.labrinth.tech_review_internal.submitProject(id, { verdict: 'safe' })
+				if (reply) {
+					await sendThreadReply(reply, client, () => {
+						assertCurrent(id)
+						lock.assertEligible(id)
+					})
+					clearMessage()
+				}
+				return
+			}
 			if (decision) {
 				await lock.ensureEligible(id)
 				const assertReview = () => {
@@ -153,12 +226,18 @@ export function createReviewSubmission(
 				type: 'error',
 			})
 		},
-		onSettled: async (_, __, { id, threadId }) => {
+		onSettled: async (_, __, { id, threadId, passTechReview, decision }) => {
 			await Promise.all([
 				queryClient.invalidateQueries({ queryKey: ['project', 'v3', id] }),
 				queryClient.invalidateQueries({ queryKey: ['project', 'v2', id] }),
 				queryClient.invalidateQueries({ queryKey: ['project', id] }),
 				queryClient.invalidateQueries({ queryKey: ['thread', threadId] }),
+				...(passTechReview || decision?.techReviewVerdict
+					? [
+							queryClient.invalidateQueries({ queryKey: ['tech-review-project-report', id] }),
+							queryClient.invalidateQueries({ queryKey: ['tech-reviews'] }),
+						]
+					: []),
 			])
 		},
 	})
@@ -197,13 +276,15 @@ export function createReviewSubmission(
 	)
 	const loadingAction = computed(() =>
 		submission.isPending.value
-			? submission.variables.value?.decision
-				? (submission.variables.value.decision.status ?? 'issues')
-				: submission.variables.value?.reply?.privateMessage
-					? 'note'
-					: submission.variables.value?.clearIssues
-						? 'reply-clear'
-						: 'reply'
+			? submission.variables.value?.passTechReview
+				? 'tech-review-pass'
+				: submission.variables.value?.decision
+					? (submission.variables.value.decision.status ?? 'issues')
+					: submission.variables.value?.reply?.privateMessage
+						? 'note'
+						: submission.variables.value?.clearIssues
+							? 'reply-clear'
+							: 'reply'
 			: undefined,
 	)
 	async function submit(mode: ReviewEditorMode = 'reply', clearIssues = false) {
@@ -224,9 +305,69 @@ export function createReviewSubmission(
 			.catch(() => undefined)
 	}
 
-	const canApprove = computed(
-		() => !previousIssues.hasUnresolvedFacets.value && panels.activeIssues.value.length === 0,
+	const approvalDisabledReason = computed(() => {
+		if (!reportsQuery.isSuccess.value)
+			return 'Technical-review status must be loaded before approving this project.'
+		if (inTechReview.value)
+			return 'This project is in technical review. Complete technical review before approving it.'
+		if (techReviewState.value.unsafe)
+			return 'This project has unsafe traces and cannot be approved.'
+		if (previousIssues.hasUnresolvedFacets.value || panels.activeIssues.value.length > 0)
+			return 'Verify all remaining fixes and remove new findings before approving this project.'
+		return undefined
+	})
+	const canApprove = computed(() => !approvalDisabledReason.value)
+	const techReviewRejectDisabledReason = computed(() => {
+		if (!reportsQuery.isSuccess.value)
+			return 'Technical-review reports must be loaded before submitting.'
+		if (decisions.updatingDetails.size || decisions.updatingGlobalDetailKeys.size)
+			return 'Wait for trace verdicts to finish saving.'
+		if (techReviewState.value.pending)
+			return 'Review all pending traces before submitting technical review.'
+		return undefined
+	})
+	const techReviewPassDisabledReason = computed(() => {
+		if (techReviewRejectDisabledReason.value) return techReviewRejectDisabledReason.value
+		if (techReviewState.value.unsafe)
+			return 'Projects with unsafe traces cannot pass technical review.'
+		if (
+			panels.activeIssues.value.some(({ id }) => techReviewIssueIds.value.has(id)) ||
+			previousIssues.issues.value.some(
+				(issue) =>
+					techReviewIssueIds.value.has(previousIssues.cardIssue(issue).id) &&
+					issue.facets.some((facet) => previousIssues.isFacetApplicable(issue, facet)),
+			)
+		)
+			return 'Resolve remaining technical-review findings and remove new findings before passing.'
+		return undefined
+	})
+	const canRejectTechReview = computed(
+		() => canSubmit.value && !techReviewRejectDisabledReason.value,
 	)
+	const canPassTechReview = computed(() => canSubmit.value && !techReviewPassDisabledReason.value)
+
+	async function submitTechReviewPass() {
+		const current = project.value
+		if (!current || !canPassTechReview.value) return false
+		try {
+			await submission.mutateAsync({
+				id: current.id,
+				threadId: current.thread_id,
+				passTechReview: true,
+				reply: draft.value.trim()
+					? {
+							threadId: current.thread_id,
+							body: draft.value,
+							images: [...uploadedImages.value],
+							privateMessage: false,
+						}
+					: undefined,
+			})
+			return true
+		} catch {
+			return false
+		}
+	}
 
 	const canAddIssues = computed(
 		() =>
@@ -234,7 +375,7 @@ export function createReviewSubmission(
 			!!(sendIssuesAsThreadMessage.value ? issuesMessage.value : selectedIssues()),
 	)
 
-	async function submitReview(status?: ProjectStatus) {
+	async function submitReview(status?: ProjectStatus, techReview = techReviewMode.value) {
 		const current = project.value
 		const thread = threadQuery.data.value
 		if (!canSubmit.value || !current || !thread || messages.generating.value) return
@@ -253,9 +394,10 @@ export function createReviewSubmission(
 			if (panels.validationErrors.value.length)
 				throw new Error('Complete the required review fields before submitting a review decision.')
 			if (status && ['approved', 'unlisted', 'private'].includes(status) && !canApprove.value)
-				throw new Error(
-					'Verify all remaining fixes and remove new findings before approving this project.',
-				)
+				throw new Error(approvalDisabledReason.value)
+			const techReviewVerdict = status === 'rejected' && techReview ? 'unsafe' : undefined
+			if (techReviewVerdict && techReviewRejectDisabledReason.value)
+				throw new Error(techReviewRejectDisabledReason.value)
 			const messageMode = sendIssuesAsThreadMessage.value
 			const message = messageMode ? issuesMessage.value : undefined
 			if (message && new TextEncoder().encode(message).length > 65536)
@@ -274,6 +416,7 @@ export function createReviewSubmission(
 				projectId: current.id,
 				threadId: current.thread_id,
 				status,
+				techReviewVerdict,
 				body: status ? draft.value : '',
 				images: status ? [...uploadedImages.value] : [],
 				privateMessage: false,
@@ -310,6 +453,15 @@ export function createReviewSubmission(
 		pending,
 		canSubmit,
 		canApprove,
+		approvalDisabledReason,
+		inTechReview,
+		techReviewMode,
+		canPassTechReview,
+		techReviewPassDisabledReason,
+		canRejectTechReview,
+		techReviewRejectDisabledReason,
+		submitTechReviewPass,
+		submitProjectReject: () => submitReview('rejected', false),
 		canAddIssues,
 		sendIssuesAsThreadMessage,
 		loadingAction,
diff --git a/apps/labrinth/.sqlx/query-36899cf74976b8bec1452b071af778827ac0459ce36353a2a70d98a54eb47a8d.json b/apps/labrinth/.sqlx/query-36899cf74976b8bec1452b071af778827ac0459ce36353a2a70d98a54eb47a8d.json
deleted file mode 100644
index 9a8233465fb..00000000000
--- a/apps/labrinth/.sqlx/query-36899cf74976b8bec1452b071af778827ac0459ce36353a2a70d98a54eb47a8d.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "\n        SELECT\n            didws.id AS \"issue_detail_id!\"\n        FROM mods m\n        INNER JOIN versions v ON v.mod_id = m.id\n        INNER JOIN files f ON f.version_id = v.id\n        INNER JOIN delphi_reports dr\n            ON dr.file_id = f.id\n            AND NOT EXISTS (\n                SELECT 1\n                FROM delphi_reports newer_dr\n                WHERE\n                    newer_dr.file_id = dr.file_id\n                    AND newer_dr.delphi_version > dr.delphi_version\n            )\n        INNER JOIN delphi_report_issues dri ON dri.report_id = dr.id\n        INNER JOIN delphi_issue_details_with_statuses didws ON didws.issue_id = dri.id\n        WHERE\n            m.id = $1\n            AND didws.status = 'pending'\n            AND didws.severity != 'hidden'\n        ",
-  "describe": {
-    "columns": [
-      {
-        "ordinal": 0,
-        "name": "issue_detail_id!",
-        "type_info": "Int8",
-        "origin": {
-          "Table": {
-            "table": "delphi_issue_details_with_statuses",
-            "name": "id"
-          }
-        }
-      }
-    ],
-    "parameters": {
-      "Left": [
-        "Int8"
-      ]
-    },
-    "nullable": [
-      true
-    ]
-  },
-  "hash": "36899cf74976b8bec1452b071af778827ac0459ce36353a2a70d98a54eb47a8d"
-}
diff --git a/apps/labrinth/.sqlx/query-5048d41501ee8bedfd7431c1bd790a695fe4d99fd94d501e2148b1181f97eb3e.json b/apps/labrinth/.sqlx/query-5048d41501ee8bedfd7431c1bd790a695fe4d99fd94d501e2148b1181f97eb3e.json
new file mode 100644
index 00000000000..0a8326bdd77
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-5048d41501ee8bedfd7431c1bd790a695fe4d99fd94d501e2148b1181f97eb3e.json
@@ -0,0 +1,23 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n\t\tSELECT EXISTS (\n\t\t\tSELECT 1\n\t\t\tFROM delphi_tech_review_queue\n\t\t\tWHERE project_id = $1\n\t\t) AS \"exists!\"\n\t\t",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "exists!",
+        "type_info": "Bool",
+        "origin": "Expression"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Int8"
+      ]
+    },
+    "nullable": [
+      null
+    ]
+  },
+  "hash": "5048d41501ee8bedfd7431c1bd790a695fe4d99fd94d501e2148b1181f97eb3e"
+}
diff --git a/apps/labrinth/.sqlx/query-7bac4e23534619c79e18b3f832cd96e2f0cdebdf44c449ee8199d6b26618ac9a.json b/apps/labrinth/.sqlx/query-7bac4e23534619c79e18b3f832cd96e2f0cdebdf44c449ee8199d6b26618ac9a.json
new file mode 100644
index 00000000000..af6cfafd5c0
--- /dev/null
+++ b/apps/labrinth/.sqlx/query-7bac4e23534619c79e18b3f832cd96e2f0cdebdf44c449ee8199d6b26618ac9a.json
@@ -0,0 +1,51 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        SELECT\n            didws.id AS \"issue_detail_id!\",\n            didws.status AS \"status!: DelphiStatus\"\n        FROM mods m\n        INNER JOIN versions v ON v.mod_id = m.id\n        INNER JOIN files f ON f.version_id = v.id\n        INNER JOIN delphi_reports dr\n            ON dr.file_id = f.id\n            AND NOT EXISTS (\n                SELECT 1\n                FROM delphi_reports newer_dr\n                WHERE\n                    newer_dr.file_id = dr.file_id\n                    AND newer_dr.delphi_version > dr.delphi_version\n            )\n        INNER JOIN delphi_report_issues dri ON dri.report_id = dr.id\n        INNER JOIN delphi_issue_details_with_statuses didws ON didws.issue_id = dri.id\n        WHERE\n            m.id = $1\n            AND didws.severity != 'hidden'\n        ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "issue_detail_id!",
+        "type_info": "Int8",
+        "origin": {
+          "Table": {
+            "table": "delphi_issue_details_with_statuses",
+            "name": "id"
+          }
+        }
+      },
+      {
+        "ordinal": 1,
+        "name": "status!: DelphiStatus",
+        "type_info": {
+          "Custom": {
+            "name": "delphi_report_issue_status",
+            "kind": {
+              "Enum": [
+                "pending",
+                "safe",
+                "unsafe"
+              ]
+            }
+          }
+        },
+        "origin": {
+          "Table": {
+            "table": "delphi_issue_details_with_statuses",
+            "name": "status"
+          }
+        }
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Int8"
+      ]
+    },
+    "nullable": [
+      true,
+      true
+    ]
+  },
+  "hash": "7bac4e23534619c79e18b3f832cd96e2f0cdebdf44c449ee8199d6b26618ac9a"
+}
diff --git a/apps/labrinth/src/models/v2/threads.rs b/apps/labrinth/src/models/v2/threads.rs
index efd87f6cf2c..892dbf6e9d4 100644
--- a/apps/labrinth/src/models/v2/threads.rs
+++ b/apps/labrinth/src/models/v2/threads.rs
@@ -100,7 +100,7 @@ impl From<crate::models::v3::threads::MessageBody> for LegacyMessageBody {
                 new_status,
                 old_status,
             },
-            crate::models::v3::threads::MessageBody::TechReview { verdict } => {
+            crate::models::v3::threads::MessageBody::TechReview { verdict, .. } => {
                 LegacyMessageBody::Text {
                     body: format!(
                         "(legacy) Reviewed technical report and gave verdict {verdict:?}"
diff --git a/apps/labrinth/src/models/v3/threads.rs b/apps/labrinth/src/models/v3/threads.rs
index 5bef100510c..6be4cf458c0 100644
--- a/apps/labrinth/src/models/v3/threads.rs
+++ b/apps/labrinth/src/models/v3/threads.rs
@@ -54,6 +54,10 @@ pub enum MessageBody {
     },
     TechReview {
         verdict: DelphiVerdict,
+        #[serde(default, skip_serializing_if = "Option::is_none")]
+        safe_issues: Option<u64>,
+        #[serde(default, skip_serializing_if = "Option::is_none")]
+        unsafe_issues: Option<u64>,
     },
     TechReviewEntered,
     TechReviewExited,
diff --git a/apps/labrinth/src/routes/internal/moderation/tech_review.rs b/apps/labrinth/src/routes/internal/moderation/tech_review.rs
index 8780a4a4943..c1ed7f833f8 100644
--- a/apps/labrinth/src/routes/internal/moderation/tech_review.rs
+++ b/apps/labrinth/src/routes/internal/moderation/tech_review.rs
@@ -410,6 +410,8 @@ pub struct SearchResponse {
 pub struct ProjectReportResponse {
     /// The project's technical review report.
     pub project_report: Option<ProjectReport>,
+    /// Whether the project is currently in the technical review queue.
+    pub in_tech_review: bool,
     /// The moderation thread for this project.
     pub thread: Thread,
 }
@@ -1036,6 +1038,20 @@ pub async fn get_project_report(
 
     let project_report = project_reports.into_iter().next();
 
+    let in_tech_review = sqlx::query_scalar!(
+        r#"
+		SELECT EXISTS (
+			SELECT 1
+			FROM delphi_tech_review_queue
+			WHERE project_id = $1
+		) AS "exists!"
+		"#,
+        db_project_id.0,
+    )
+    .fetch_one(&**pool)
+    .await
+    .wrap_internal_err("fetching project technical review membership")?;
+
     let db_threads = DBThread::get_many(&[row.thread_id], &**pool)
         .await
         .wrap_internal_err("failed to fetch thread")?;
@@ -1071,6 +1087,7 @@ pub async fn get_project_report(
 
     Ok(web::Json(ProjectReportResponse {
         project_report,
+        in_tech_review,
         thread,
     }))
 }
@@ -1138,10 +1155,11 @@ pub async fn submit_report(
     .wrap_internal_err("locking project for technical review submission")?
     .wrap_not_found_err("project not found")?;
 
-    let pending_issue_details = sqlx::query!(
+    let issue_details = sqlx::query!(
         r#"
         SELECT
-            didws.id AS "issue_detail_id!"
+            didws.id AS "issue_detail_id!",
+            didws.status AS "status!: DelphiStatus"
         FROM mods m
         INNER JOIN versions v ON v.mod_id = m.id
         INNER JOIN files f ON f.version_id = v.id
@@ -1158,25 +1176,34 @@ pub async fn submit_report(
         INNER JOIN delphi_issue_details_with_statuses didws ON didws.issue_id = dri.id
         WHERE
             m.id = $1
-            AND didws.status = 'pending'
             AND didws.severity != 'hidden'
         "#,
         project_id as _,
     )
     .fetch_all(&mut txn)
     .await
-    .wrap_internal_err("failed to fetch pending issues")?;
+    .wrap_internal_err("failed to fetch issue verdicts")?;
 
+    let pending_issue_details = issue_details
+        .iter()
+        .filter(|detail| detail.status == DelphiStatus::Pending)
+        .map(|detail| DelphiReportIssueDetailsId(detail.issue_detail_id))
+        .collect_vec();
     if !pending_issue_details.is_empty() {
-        let details = pending_issue_details
-            .into_iter()
-            .map(|record| DelphiReportIssueDetailsId(record.issue_detail_id))
-            .collect_vec();
         return Err(ApiError::Request(eyre::eyre!(
-            "report still has issue details with no verdict: {details:?}"
+            "report still has issue details with no verdict: {pending_issue_details:?}"
         )));
     }
 
+    let safe_issues = issue_details
+        .iter()
+        .filter(|detail| detail.status == DelphiStatus::Safe)
+        .count() as u64;
+    let unsafe_issues = issue_details
+        .iter()
+        .filter(|detail| detail.status == DelphiStatus::Unsafe)
+        .count() as u64;
+
     let record = sqlx::query!(
         r#"
         SELECT t.id AS "thread_id: DBThreadId"
@@ -1210,7 +1237,11 @@ pub async fn submit_report(
     let verdict = submit_report.verdict;
     ThreadMessageBuilder {
         author_id: Some(user.id.into()),
-        body: MessageBody::TechReview { verdict },
+        body: MessageBody::TechReview {
+            verdict,
+            safe_issues: Some(safe_issues),
+            unsafe_issues: Some(unsafe_issues),
+        },
         thread_id: record.thread_id,
         hide_identity: user.role.is_mod(),
     }
@@ -1943,7 +1974,7 @@ where
             })?;
 
             let verdict = match &last_review.body {
-                MessageBody::TechReview { verdict } => *verdict,
+                MessageBody::TechReview { verdict, .. } => *verdict,
                 _ => return None,
             };
 
diff --git a/packages/api-client/src/modules/labrinth/tech-review/internal.ts b/packages/api-client/src/modules/labrinth/tech-review/internal.ts
index 8fccfc8ae0a..d2f8445afe7 100644
--- a/packages/api-client/src/modules/labrinth/tech-review/internal.ts
+++ b/packages/api-client/src/modules/labrinth/tech-review/internal.ts
@@ -239,6 +239,7 @@ export class LabrinthTechReviewInternalModule extends AbstractModule {
 			version: 'internal',
 			method: 'PATCH',
 			body: data,
+			timeout: 30_000,
 		})
 	}
 
@@ -250,6 +251,7 @@ export class LabrinthTechReviewInternalModule extends AbstractModule {
 			version: 'internal',
 			method: 'POST',
 			body: data,
+			timeout: 30_000,
 		})
 	}
 
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index 90800c7448f..829eafdabc8 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -2292,6 +2292,8 @@ export namespace Labrinth {
 				| {
 						type: 'tech_review'
 						verdict: 'safe' | 'unsafe'
+						safe_issues?: number
+						unsafe_issues?: number
 				  }
 				| {
 						type: 'tech_review_entered'
@@ -3015,6 +3017,8 @@ export namespace Labrinth {
 				| {
 						type: 'tech_review'
 						verdict: 'safe' | 'unsafe'
+						safe_issues?: number
+						unsafe_issues?: number
 				  }
 				| {
 						type: 'tech_review_entered'
@@ -3073,6 +3077,7 @@ export namespace Labrinth {
 
 			export type ProjectReportResponse = {
 				project_report: ProjectReport | null
+				in_tech_review: boolean
 				thread: Thread
 			}
 		}
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index ccba8797b8b..a33ce0cff27 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -20,6 +20,7 @@ import _ArrowDownWideNarrowIcon from './icons/arrow-down-wide-narrow.svg?compone
 import _ArrowDownZAIcon from './icons/arrow-down-z-a.svg?component'
 import _ArrowLeftIcon from './icons/arrow-left.svg?component'
 import _ArrowLeftRightIcon from './icons/arrow-left-right.svg?component'
+import _ArrowRightToLineIcon from './icons/arrow-right-to-line.svg?component'
 import _ArrowUpIcon from './icons/arrow-up.svg?component'
 import _ArrowUpDownIcon from './icons/arrow-up-down.svg?component'
 import _ArrowUpFromLineIcon from './icons/arrow-up-from-line.svg?component'
@@ -84,6 +85,8 @@ import _ChevronDownIcon from './icons/chevron-down.svg?component'
 import _ChevronLeftIcon from './icons/chevron-left.svg?component'
 import _ChevronRightIcon from './icons/chevron-right.svg?component'
 import _ChevronUpIcon from './icons/chevron-up.svg?component'
+import _ChevronsDownUpIcon from './icons/chevrons-down-up.svg?component'
+import _ChevronsUpDownIcon from './icons/chevrons-up-down.svg?component'
 import _CircleIcon from './icons/circle.svg?component'
 import _CircleAlertIcon from './icons/circle-alert.svg?component'
 import _CircleArrowRightIcon from './icons/circle-arrow-right.svg?component'
@@ -232,6 +235,7 @@ import _MoveUpRightIcon from './icons/move-up-right.svg?component'
 import _NewspaperIcon from './icons/newspaper.svg?component'
 import _NoSignalIcon from './icons/no-signal.svg?component'
 import _NotepadTextIcon from './icons/notepad-text.svg?component'
+import _OctagonAlertIcon from './icons/octagon-alert.svg?component'
 import _OmorphiaIcon from './icons/omorphia.svg?component'
 import _OnlineIndicatorIcon from './icons/online-indicator.svg?component'
 import _OrganizationIcon from './icons/organization.svg?component'
@@ -480,6 +484,7 @@ import _UserXIcon from './icons/user-x.svg?component'
 import _UsersIcon from './icons/users.svg?component'
 import _VersionIcon from './icons/version.svg?component'
 import _VideoIcon from './icons/video.svg?component'
+import _VirusIcon from './icons/virus.svg?component'
 import _Volume2Icon from './icons/volume-2.svg?component'
 import _VolumeXIcon from './icons/volume-x.svg?component'
 import _WikiIcon from './icons/wiki.svg?component'
@@ -507,6 +512,7 @@ export const ArrowDownWideNarrowIcon = _ArrowDownWideNarrowIcon
 export const ArrowDownZAIcon = _ArrowDownZAIcon
 export const ArrowLeftIcon = _ArrowLeftIcon
 export const ArrowLeftRightIcon = _ArrowLeftRightIcon
+export const ArrowRightToLineIcon = _ArrowRightToLineIcon
 export const ArrowUpIcon = _ArrowUpIcon
 export const ArrowUpDownIcon = _ArrowUpDownIcon
 export const ArrowUpFromLineIcon = _ArrowUpFromLineIcon
@@ -571,6 +577,8 @@ export const ChevronDownIcon = _ChevronDownIcon
 export const ChevronLeftIcon = _ChevronLeftIcon
 export const ChevronRightIcon = _ChevronRightIcon
 export const ChevronUpIcon = _ChevronUpIcon
+export const ChevronsDownUpIcon = _ChevronsDownUpIcon
+export const ChevronsUpDownIcon = _ChevronsUpDownIcon
 export const CircleIcon = _CircleIcon
 export const CircleAlertIcon = _CircleAlertIcon
 export const CircleArrowRightIcon = _CircleArrowRightIcon
@@ -719,6 +727,7 @@ export const MoveUpRightIcon = _MoveUpRightIcon
 export const NewspaperIcon = _NewspaperIcon
 export const NoSignalIcon = _NoSignalIcon
 export const NotepadTextIcon = _NotepadTextIcon
+export const OctagonAlertIcon = _OctagonAlertIcon
 export const OmorphiaIcon = _OmorphiaIcon
 export const OnlineIndicatorIcon = _OnlineIndicatorIcon
 export const OrganizationIcon = _OrganizationIcon
@@ -967,6 +976,7 @@ export const UserXIcon = _UserXIcon
 export const UsersIcon = _UsersIcon
 export const VersionIcon = _VersionIcon
 export const VideoIcon = _VideoIcon
+export const VirusIcon = _VirusIcon
 export const Volume2Icon = _Volume2Icon
 export const VolumeXIcon = _VolumeXIcon
 export const WikiIcon = _WikiIcon
diff --git a/packages/assets/icons/arrow-right-to-line.svg b/packages/assets/icons/arrow-right-to-line.svg
new file mode 100644
index 00000000000..13485cbf1f9
--- /dev/null
+++ b/packages/assets/icons/arrow-right-to-line.svg
@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-arrow-right-to-line"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M17 12H3" />
+  <path d="m11 18 6-6-6-6" />
+  <path d="M21 5v14" />
+</svg>
diff --git a/packages/assets/icons/chevrons-down-up.svg b/packages/assets/icons/chevrons-down-up.svg
new file mode 100644
index 00000000000..85c31b91467
--- /dev/null
+++ b/packages/assets/icons/chevrons-down-up.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+	class="lucide lucide-chevrons-down-up"
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path d="m7 20 5-5 5 5" />
+	<path d="m7 4 5 5 5-5" />
+</svg>
diff --git a/packages/assets/icons/chevrons-up-down.svg b/packages/assets/icons/chevrons-up-down.svg
new file mode 100644
index 00000000000..bc14006996a
--- /dev/null
+++ b/packages/assets/icons/chevrons-up-down.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+	class="lucide lucide-chevrons-up-down"
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path d="m7 15 5 5 5-5" />
+	<path d="m7 9 5-5 5 5" />
+</svg>
diff --git a/packages/assets/icons/octagon-alert.svg b/packages/assets/icons/octagon-alert.svg
new file mode 100644
index 00000000000..86899e7aec5
--- /dev/null
+++ b/packages/assets/icons/octagon-alert.svg
@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-octagon-alert"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 16h.01" />
+  <path d="M12 8v4" />
+  <path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z" />
+</svg>
diff --git a/packages/assets/icons/virus.svg b/packages/assets/icons/virus.svg
new file mode 100644
index 00000000000..3bd675fdf60
--- /dev/null
+++ b/packages/assets/icons/virus.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="12" cy="12" r="6" />
+	<path d="M12 2v4m-2-4h4M12 18v4m-2 0h4M2 12h4m-4-2v4M18 12h4m0-2v4M5 5l3 3M4 6l2-2M16 16l3 3m-1 1 2-2M5 19l3-3m-4 2 2 2M16 8l3-3m-1-1 2 2M10 10h.01M14 11h.01M11 14h.01" />
+</svg>
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 545edd475ba..a939464084d 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -32,6 +32,8 @@
 	--color-orange-900: #6e2d19;
 	--color-orange-950: #3f1509;
 	--color-orange: var(--color-orange-500);
+	--color-yellow: #a16207;
+	--color-yellow-bg: rgba(161, 98, 7, 0.1);
 
 	--color-green-50: #eefff6;
 	--color-green-100: #d7ffeb;
@@ -263,6 +265,8 @@ html {
 	--color-orange-900: #7e3110;
 	--color-orange-950: #441606;
 	--color-orange: var(--color-orange-400);
+	--color-yellow: #facc15;
+	--color-yellow-bg: rgba(250, 204, 21, 0.2);
 
 	--color-green-50: #effef5;
 	--color-green-100: #dafee8;
diff --git a/packages/moderation/src/data/issues/component-builders/types.ts b/packages/moderation/src/data/issues/component-builders/types.ts
index 6b6bf14cc8d..d738b18c7de 100644
--- a/packages/moderation/src/data/issues/component-builders/types.ts
+++ b/packages/moderation/src/data/issues/component-builders/types.ts
@@ -97,6 +97,8 @@ export interface IssueToggle extends IssueControlOptions {
 	id?: string
 	/** Explicit toggle IDs to clear across issues when enabled. Item panels scope these IDs to the current item. */
 	unselectToggles?: readonly string[]
+	/** Clear this issue's explicit toggle selections when disabling the control. */
+	clearIssueTogglesOnDisable?: boolean
 }
 
 export type IssueToggleConfig = Omit<IssueToggle, 'type'>
diff --git a/packages/moderation/src/data/issues/index.ts b/packages/moderation/src/data/issues/index.ts
index eb8dac5967a..c27f546f592 100644
--- a/packages/moderation/src/data/issues/index.ts
+++ b/packages/moderation/src/data/issues/index.ts
@@ -41,6 +41,7 @@ import { rulesReviewPanel } from './rules'
 import { serverReviewPanel } from './server'
 import { slugReviewPanel } from './slug'
 import { summaryReviewPanel } from './summary'
+import { techReviewPanel } from './tech-review'
 import { titleReviewPanel } from './title'
 import { undefinedProjectReviewPanel } from './undefined-project'
 import { versionsReviewPanel } from './versions'
@@ -107,6 +108,11 @@ export const reviewPanels = {
 			label: 'Rule Following',
 			panel: rulesReviewPanel,
 		},
+		{
+			key: 'tech-review',
+			label: 'Tech review',
+			panel: techReviewPanel,
+		},
 	],
 	'undefined-project': undefinedProjectReviewPanel,
 	versions: versionsReviewPanel,
diff --git a/packages/moderation/src/data/issues/tech-review.ts b/packages/moderation/src/data/issues/tech-review.ts
new file mode 100644
index 00000000000..3fb48033256
--- /dev/null
+++ b/packages/moderation/src/data/issues/tech-review.ts
@@ -0,0 +1,123 @@
+import { CodeIcon } from '@modrinth/assets'
+
+import misusedObfuscation from '../messages/checklist/messages/tech-review/misused-obfuscation.md'
+import requestSource from '../messages/checklist/messages/tech-review/request-source.md'
+import requestSourceBin from '../messages/checklist/messages/tech-review/request-source-bin.md'
+import requestSourceBinModpack from '../messages/checklist/messages/tech-review/request-source-bin-modpack.md'
+import requestSourceObf from '../messages/checklist/messages/tech-review/request-source-obf.md'
+import requestSourceObfModpack from '../messages/checklist/messages/tech-review/request-source-obf-modpack.md'
+import unclearMisleading from '../messages/checklist/messages/tech-review/unclear-misleading.md'
+import unsafeFunctionality from '../messages/checklist/messages/tech-review/unsafe-functionality.md'
+import { issue, markdown, panel, section, toggle } from './component-builders/builders'
+import { issueTargets } from './component-builders/targets'
+
+export const techReviewUnclearMisleadingIssue = issue({
+	id: 'tech-review-unclear-misleading',
+	title: 'Unclear or misleading functionality',
+	category: 'Tech review',
+	message: unclearMisleading,
+	actions: [issueTargets.modifyDescription()],
+	suggestedStatus: 'rejected',
+})
+
+export const techReviewUnsafeFunctionalityIssue = issue({
+	id: 'tech-review-unsafe-functionality',
+	title: 'Unsafe functionality',
+	category: 'Tech review',
+	message: ({ getMarkdownValue }) =>
+		unsafeFunctionality.replace(/-\s*$/, () => getMarkdownValue('tech-review-safety-changes')),
+	suggestedStatus: 'rejected',
+})
+
+export const techReviewRequestSourceIssue = issue({
+	id: 'tech-review-request-source',
+	title: 'Source code requested',
+	category: 'Tech review',
+	message: ({ projectV3, selected, getMarkdownValue }) => {
+		const isModpack = projectV3.project_types.includes('modpack')
+		let message = requestSource
+		if (selected.toggleIds.includes('tech-review-source-obfuscated')) {
+			message = isModpack ? requestSourceObfModpack : requestSourceObf
+		} else if (selected.toggleIds.includes('tech-review-source-binaries')) {
+			message = isModpack ? requestSourceBinModpack : requestSourceBin
+		}
+		return message.replaceAll('- %LIST_MODS_HERE%', () =>
+			getMarkdownValue('tech-review-source-files'),
+		)
+	},
+	actions: [issueTargets.acknowledge('reply')],
+	suggestedStatus: 'rejected',
+})
+
+export const techReviewMisusedObfuscationIssue = issue({
+	id: 'tech-review-misused-obfuscation',
+	title: 'Misused obfuscation',
+	category: 'Tech review',
+	message: misusedObfuscation,
+	suggestedStatus: 'rejected',
+})
+
+export const techReviewPanel = panel({
+	title: 'Tech review',
+	hint: 'Is the project’s functionality safe and verifiable?',
+	icon: CodeIcon,
+	guidanceUrl: '',
+}).content(
+	toggle({ issue: techReviewUnclearMisleadingIssue, label: 'Unclear / Misleading' }),
+	toggle({ issue: techReviewUnsafeFunctionalityIssue, label: 'Unsafe functionality' }),
+	toggle({
+		issue: techReviewRequestSourceIssue,
+		label: 'Request source',
+		clearIssueTogglesOnDisable: true,
+	}),
+	toggle({ issue: techReviewMisusedObfuscationIssue, label: 'Misused obfuscation' }),
+	section({
+		shown: ({ selected }) => selected.issueIds.includes(techReviewUnsafeFunctionalityIssue.id),
+	}).content(
+		markdown({
+			issue: techReviewUnsafeFunctionalityIssue,
+			id: 'tech-review-safety-changes',
+			label: 'Required functionality changes',
+			required: true,
+		}),
+	),
+	section({
+		label: 'Source request',
+		shown: ({ selected }) => selected.issueIds.includes(techReviewRequestSourceIssue.id),
+	}).content(
+		toggle({
+			issue: techReviewRequestSourceIssue,
+			id: 'tech-review-source-general',
+			label: 'General',
+			issueCardDisplay: { label: 'General' },
+			unselectToggles: ['tech-review-source-obfuscated', 'tech-review-source-binaries'],
+		}),
+		toggle({
+			issue: techReviewRequestSourceIssue,
+			id: 'tech-review-source-obfuscated',
+			label: 'Obfuscated code',
+			issueCardDisplay: { label: 'Obfuscated code' },
+			unselectToggles: ['tech-review-source-general', 'tech-review-source-binaries'],
+		}),
+		toggle({
+			issue: techReviewRequestSourceIssue,
+			id: 'tech-review-source-binaries',
+			label: 'Native code / binaries',
+			issueCardDisplay: { label: 'Native code / binaries' },
+			unselectToggles: ['tech-review-source-general', 'tech-review-source-obfuscated'],
+		}),
+		section({
+			shown: ({ projectV3, selected }) =>
+				projectV3.project_types.includes('modpack') &&
+				(selected.toggleIds.includes('tech-review-source-obfuscated') ||
+					selected.toggleIds.includes('tech-review-source-binaries')),
+		}).content(
+			markdown({
+				issue: techReviewRequestSourceIssue,
+				id: 'tech-review-source-files',
+				label: 'Affected mods or files',
+				required: true,
+			}),
+		),
+	),
+)
diff --git a/packages/moderation/src/data/keybinds.ts b/packages/moderation/src/data/keybinds.ts
index a27ed658ded..428282536c5 100644
--- a/packages/moderation/src/data/keybinds.ts
+++ b/packages/moderation/src/data/keybinds.ts
@@ -336,17 +336,47 @@ const keybinds: { [id: string]: KeybindListener } = {
 		enabled: (ctx) => ctx.available('reject'),
 		action: (ctx) => ctx.run('reject'),
 	},
-	'tech-review-top': {
+	'tech-review-previous-highlight': {
 		keybind: 'ArrowUp',
-		description: 'Scroll to the top of the technical review card or detail page',
+		description: 'Previous source highlight',
 		scope: 'tech-review',
-		action: (ctx) => ctx.actions.goToTop(),
+		enabled: (ctx) => ctx.actions.available('previous-highlight'),
+		action: (ctx) => ctx.actions.run('previous-highlight'),
 	},
-	'tech-review-bottom': {
+	'tech-review-next-highlight': {
 		keybind: 'ArrowDown',
-		description: 'Scroll to the bottom of the technical review card or detail page',
+		description: 'Next source highlight',
 		scope: 'tech-review',
-		action: (ctx) => ctx.actions.goToBottom(),
+		enabled: (ctx) => ctx.actions.available('next-highlight'),
+		action: (ctx) => ctx.actions.run('next-highlight'),
+	},
+	'tech-review-previous-file': {
+		keybind: 'Ctrl+ArrowUp',
+		description: 'Previous file in the archive tree',
+		scope: 'tech-review',
+		enabled: (ctx) => ctx.actions.available('previous-file'),
+		action: (ctx) => ctx.actions.run('previous-file'),
+	},
+	'tech-review-next-file': {
+		keybind: 'Ctrl+ArrowDown',
+		description: 'Next file in the archive tree',
+		scope: 'tech-review',
+		enabled: (ctx) => ctx.actions.available('next-file'),
+		action: (ctx) => ctx.actions.run('next-file'),
+	},
+	'tech-review-previous-archive': {
+		keybind: 'Ctrl+ArrowLeft',
+		description: 'Previous archive',
+		scope: 'tech-review',
+		enabled: (ctx) => ctx.actions.available('previous-archive'),
+		action: (ctx) => ctx.actions.run('previous-archive'),
+	},
+	'tech-review-next-archive': {
+		keybind: 'Ctrl+ArrowRight',
+		description: 'Next archive',
+		scope: 'tech-review',
+		enabled: (ctx) => ctx.actions.available('next-archive'),
+		action: (ctx) => ctx.actions.run('next-archive'),
 	},
 }
 
diff --git a/packages/moderation/src/data/message-library.ts b/packages/moderation/src/data/message-library.ts
index 9d4c5d86e59..b77c290d46f 100644
--- a/packages/moderation/src/data/message-library.ts
+++ b/packages/moderation/src/data/message-library.ts
@@ -12,6 +12,7 @@ import privateProject from './messages/checklist/messages/status-alerts/private-
 import privateServer from './messages/checklist/messages/status-alerts/private-use/server.md'
 import serverUse from './messages/checklist/messages/status-alerts/server-use.md'
 import temporaryServer from './messages/checklist/messages/status-alerts/temporary-server.md'
+import malware from './messages/checklist/messages/tech-review/malware.md'
 
 export interface MessageTemplate {
 	label: string
@@ -91,6 +92,7 @@ export const messageLibrary: readonly MessageLibraryEntry[] = [
 			),
 	},
 	{ label: 'Account issues', body: account },
+	{ label: 'Malware', body: malware },
 ]
 
 export function getMessageTemplates(context: MessageLibraryContext): MessageTemplate[] {
diff --git a/packages/moderation/src/data/messages/quick-replies/tech-review/malware.md b/packages/moderation/src/data/messages/checklist/messages/tech-review/malware.md
similarity index 100%
rename from packages/moderation/src/data/messages/quick-replies/tech-review/malware.md
rename to packages/moderation/src/data/messages/checklist/messages/tech-review/malware.md
diff --git a/packages/moderation/src/data/messages/quick-replies/tech-review/misused-obfuscation.md b/packages/moderation/src/data/messages/checklist/messages/tech-review/misused-obfuscation.md
similarity index 100%
rename from packages/moderation/src/data/messages/quick-replies/tech-review/misused-obfuscation.md
rename to packages/moderation/src/data/messages/checklist/messages/tech-review/misused-obfuscation.md
diff --git a/packages/moderation/src/data/messages/quick-replies/tech-review/request-source-bin-modpack.md b/packages/moderation/src/data/messages/checklist/messages/tech-review/request-source-bin-modpack.md
similarity index 100%
rename from packages/moderation/src/data/messages/quick-replies/tech-review/request-source-bin-modpack.md
rename to packages/moderation/src/data/messages/checklist/messages/tech-review/request-source-bin-modpack.md
diff --git a/packages/moderation/src/data/messages/quick-replies/tech-review/request-source-bin.md b/packages/moderation/src/data/messages/checklist/messages/tech-review/request-source-bin.md
similarity index 100%
rename from packages/moderation/src/data/messages/quick-replies/tech-review/request-source-bin.md
rename to packages/moderation/src/data/messages/checklist/messages/tech-review/request-source-bin.md
diff --git a/packages/moderation/src/data/messages/quick-replies/tech-review/request-source-obf-modpack.md b/packages/moderation/src/data/messages/checklist/messages/tech-review/request-source-obf-modpack.md
similarity index 100%
rename from packages/moderation/src/data/messages/quick-replies/tech-review/request-source-obf-modpack.md
rename to packages/moderation/src/data/messages/checklist/messages/tech-review/request-source-obf-modpack.md
diff --git a/packages/moderation/src/data/messages/quick-replies/tech-review/request-source-obf.md b/packages/moderation/src/data/messages/checklist/messages/tech-review/request-source-obf.md
similarity index 100%
rename from packages/moderation/src/data/messages/quick-replies/tech-review/request-source-obf.md
rename to packages/moderation/src/data/messages/checklist/messages/tech-review/request-source-obf.md
diff --git a/packages/moderation/src/data/messages/quick-replies/tech-review/request-source.md b/packages/moderation/src/data/messages/checklist/messages/tech-review/request-source.md
similarity index 100%
rename from packages/moderation/src/data/messages/quick-replies/tech-review/request-source.md
rename to packages/moderation/src/data/messages/checklist/messages/tech-review/request-source.md
diff --git a/packages/moderation/src/data/messages/quick-replies/tech-review/unclear-misleading.md b/packages/moderation/src/data/messages/checklist/messages/tech-review/unclear-misleading.md
similarity index 100%
rename from packages/moderation/src/data/messages/quick-replies/tech-review/unclear-misleading.md
rename to packages/moderation/src/data/messages/checklist/messages/tech-review/unclear-misleading.md
diff --git a/packages/moderation/src/data/messages/quick-replies/tech-review/unsafe-functionality.md b/packages/moderation/src/data/messages/checklist/messages/tech-review/unsafe-functionality.md
similarity index 100%
rename from packages/moderation/src/data/messages/quick-replies/tech-review/unsafe-functionality.md
rename to packages/moderation/src/data/messages/checklist/messages/tech-review/unsafe-functionality.md
diff --git a/packages/moderation/src/data/quick-replies/tech-review-quick-replies.ts b/packages/moderation/src/data/quick-replies/tech-review-quick-replies.ts
deleted file mode 100644
index 58f399dfab8..00000000000
--- a/packages/moderation/src/data/quick-replies/tech-review-quick-replies.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { Labrinth } from '@modrinth/api-client'
-
-import type { QuickReply } from '../../types/quick-reply'
-
-export interface TechReviewContext {
-	project: Labrinth.Projects.v3.Project
-	project_owner: Labrinth.TechReview.Internal.Ownership
-	reports: Labrinth.TechReview.Internal.FileReport[]
-}
-
-export default [
-	{
-		label: '⚠️ Unclear/Misleading',
-		message: async () =>
-			(await import('../messages/quick-replies/tech-review/unclear-misleading.md?raw')).default,
-		private: false,
-	},
-	{
-		label: '🦺 Unsafe Functionality',
-		message: async () =>
-			(await import('../messages/quick-replies/tech-review/unsafe-functionality.md?raw')).default,
-		private: false,
-	},
-	{
-		label: '📝 Request Source',
-		message: async () =>
-			(await import('../messages/quick-replies/tech-review/request-source.md?raw')).default,
-		private: false,
-	},
-	{
-		label: '🔒 Request Source (Obf)',
-		message: async () =>
-			(await import('../messages/quick-replies/tech-review/request-source-obf.md?raw')).default,
-		private: false,
-	},
-	{
-		label: '📦 Request Source (Bin)',
-		message: async () =>
-			(await import('../messages/quick-replies/tech-review/request-source-bin.md?raw')).default,
-		private: false,
-	},
-	{
-		label: '🔒 Request Source (Obf) - MODPACK',
-		message: async () =>
-			(await import('../messages/quick-replies/tech-review/request-source-obf-modpack.md?raw'))
-				.default,
-		private: false,
-	},
-	{
-		label: '📦 Request Source (Bin) - MODPACK',
-		message: async () =>
-			(await import('../messages/quick-replies/tech-review/request-source-bin-modpack.md?raw'))
-				.default,
-		private: false,
-	},
-	{
-		label: '🚫 Misused Obfuscation',
-		message: async () =>
-			(await import('../messages/quick-replies/tech-review/misused-obfuscation.md?raw')).default,
-		private: false,
-	},
-	{
-		label: '🚫 Malware',
-		message: async () =>
-			(await import('../messages/quick-replies/tech-review/malware.md?raw')).default,
-		private: false,
-	},
-] as ReadonlyArray<QuickReply<TechReviewContext>>
diff --git a/packages/moderation/src/data/settings.ts b/packages/moderation/src/data/settings.ts
index 4dc3b250063..918763629db 100644
--- a/packages/moderation/src/data/settings.ts
+++ b/packages/moderation/src/data/settings.ts
@@ -2,6 +2,41 @@ import { setting } from '../types/settings.ts'
 
 const settings = {
 	General: {
+		TechReviewHighlightWords: setting.asString({
+			type: 'string',
+			id: 'tech-review-highlight-words',
+			title: 'Global words to highlight',
+			description:
+				'Highlight these words in blue in every technical review source viewer. Separate entries with commas or newlines. Matches ignore case and include parts of words. Java class paths use the final class name.',
+			default: '',
+		}),
+		WrapTechReviewCode: setting.asToggle({
+			type: 'toggle',
+			id: 'wrap-tech-review-code',
+			title: 'Wrap tech review code',
+			description: 'Wrap long lines of source code to fit the code viewer in technical review.',
+			default: false,
+		}),
+		TechReviewScrollTiming: setting.asNumber({
+			type: 'number',
+			id: 'tech-review-scroll-timing',
+			title: 'Scroll transition timing',
+			description:
+				'Approximate settling time for scroll transitions. Larger values scroll more slowly. Set to 0 to jump instantly.',
+			default: 300,
+			min: 0,
+			max: 2000,
+			step: 25,
+			unit: 'ms',
+		}),
+		TechReviewMode: setting.asToggle({
+			type: 'toggle',
+			id: 'tech-review-mode',
+			title: 'Tech review mode',
+			description:
+				'Show Pass and Reject controls and place the conversation below traces for technical review.',
+			default: false,
+		}),
 		GalleryColumns: setting.asEnum({
 			type: 'enum',
 			id: 'gallery-columns',
diff --git a/packages/moderation/src/handles/keybinds.ts b/packages/moderation/src/handles/keybinds.ts
index 095a23579fd..575812b9b74 100644
--- a/packages/moderation/src/handles/keybinds.ts
+++ b/packages/moderation/src/handles/keybinds.ts
@@ -73,13 +73,18 @@ export class Keybinds {
 	}
 
 	getConflicts(): Map<string, Set<string>> {
+		const reviewPageScopes = [
+			'project-review',
+			'review-actions',
+			'review-panel-toggle',
+			'tech-review',
+		]
 		const bindings = [...this]
 		const conflicts = new Map<string, Set<string>>()
 		for (const [index, [id, binding]] of bindings.entries()) {
 			for (const [otherId, other] of bindings.slice(index)) {
 				const sameReviewPage =
-					['project-review', 'review-actions', 'review-panel-toggle'].includes(binding.scope) &&
-					['project-review', 'review-actions', 'review-panel-toggle'].includes(other.scope)
+					reviewPageScopes.includes(binding.scope) && reviewPageScopes.includes(other.scope)
 				if (
 					binding.scope !== other.scope &&
 					binding.scope !== 'global' &&
@@ -129,6 +134,7 @@ export class Keybinds {
 					ctx.scope !== 'review-composer' &&
 					ctx.scope !== 'review-actions' &&
 					ctx.scope !== 'review-panel-toggle' &&
+					ctx.scope !== 'tech-review' &&
 					document.activeElement instanceof HTMLElement
 				) {
 					document.activeElement.blur()
diff --git a/packages/moderation/src/index.ts b/packages/moderation/src/index.ts
index 22010f27428..bf1b21ae906 100644
--- a/packages/moderation/src/index.ts
+++ b/packages/moderation/src/index.ts
@@ -9,10 +9,6 @@ export {
 export * from './data/nags/index.ts'
 export { default as attributionQuickReplies } from './data/quick-replies/permissions-quick-replies'
 export { default as reportQuickReplies } from './data/quick-replies/report-quick-replies'
-export {
-	type TechReviewContext,
-	default as techReviewQuickReplies,
-} from './data/quick-replies/tech-review-quick-replies'
 export { default as moderationSettings } from './data/settings'
 export * from './handles/keybinds'
 export * from './handles/settings'
diff --git a/packages/moderation/src/types/keybinds.ts b/packages/moderation/src/types/keybinds.ts
index 132a7d9eb67..b284ccdae56 100644
--- a/packages/moderation/src/types/keybinds.ts
+++ b/packages/moderation/src/types/keybinds.ts
@@ -2,9 +2,17 @@ import type { Labrinth } from '@modrinth/api-client'
 
 import type { MiscReviewPanelKey } from '../data/issues'
 
+export type TechReviewNavigationAction =
+	| 'previous-highlight'
+	| 'next-highlight'
+	| 'previous-file'
+	| 'next-file'
+	| 'previous-archive'
+	| 'next-archive'
+
 export interface TechReviewActions {
-	goToTop: () => void
-	goToBottom: () => void
+	available: (action: TechReviewNavigationAction) => boolean
+	run: (action: TechReviewNavigationAction) => void
 }
 
 export type ModerationProjectContext = {
@@ -68,6 +76,7 @@ export type ReviewShortcutAction =
 	| 'toggle-left'
 	| 'toggle-right'
 	| 'reveal-right'
+	| 'reveal-conversation'
 	| 'back'
 	| 'next'
 	| 'exit'
diff --git a/packages/tooling-config/tailwind/tailwind-preset.ts b/packages/tooling-config/tailwind/tailwind-preset.ts
index 91c3d520b1a..adccf0fdf78 100644
--- a/packages/tooling-config/tailwind/tailwind-preset.ts
+++ b/packages/tooling-config/tailwind/tailwind-preset.ts
@@ -39,6 +39,7 @@ const config: Config = {
 					900: 'var(--color-red-900)',
 					950: 'var(--color-red-950)',
 				},
+				yellow: 'var(--color-yellow)',
 				orange: {
 					DEFAULT: 'var(--color-orange)',
 					50: 'var(--color-orange-50)',
diff --git a/packages/ui/src/components/base/MarkdownEditorImpl.vue b/packages/ui/src/components/base/MarkdownEditorImpl.vue
index a119a7c9f86..efca85cfd02 100644
--- a/packages/ui/src/components/base/MarkdownEditorImpl.vue
+++ b/packages/ui/src/components/base/MarkdownEditorImpl.vue
@@ -311,6 +311,7 @@
 <script setup lang="ts">
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language'
 import { Compartment, EditorState, type Extension } from '@codemirror/state'
 import { EditorView, keymap, placeholder as cm_placeholder } from '@codemirror/view'
 import {
@@ -353,6 +354,7 @@ import IconButton from '#ui/components/base/buttons/IconButton.vue'
 
 import { defineMessages, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages.ts'
+import { readCodeClipboard } from '../../utils/markdown-code'
 import NewModal from '../modal/NewModal.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
@@ -636,7 +638,7 @@ function createEditorTheme(disabled = props.disabled) {
 		},
 		'.cm-content': {
 			minHeight: `${props.minHeight ?? 200}px`,
-			padding: '0',
+			padding: '0 2px',
 			caretColor: 'var(--color-contrast)',
 			width: '100%',
 			pointerEvents: disabled ? 'none' : 'auto',
@@ -667,7 +669,51 @@ onMounted(() => {
 	const eventHandlers = EditorView.domEventHandlers({
 		paste: (ev, view) => {
 			const { clipboardData } = ev
-			if (!clipboardData) return
+			if (!clipboardData || props.disabled) return
+
+			const code = readCodeClipboard(view.contentDOM.ownerDocument, clipboardData)
+			if (code) {
+				const { from, to } = view.state.selection.main
+				let node = (ensureSyntaxTree(view.state, from, 50) ?? syntaxTree(view.state)).resolveInner(
+					from,
+					-1,
+				)
+				while (node) {
+					if (node.name === 'CodeBlock') return false
+					if (node.name === 'FencedCode') {
+						const closingFence = node.lastChild
+						if (
+							closingFence?.name !== 'CodeMark' ||
+							closingFence.from === node.firstChild?.from ||
+							from < closingFence.to
+						)
+							return false
+						break
+					}
+					if (!node.parent) break
+					node = node.parent
+				}
+				const before = view.state.doc.sliceString(0, from)
+				const after = view.state.doc.sliceString(to)
+				const prefix = before.length && !before.endsWith('\n') ? '\n' : ''
+				const suffix = after.length && !after.startsWith('\n') ? '\n' : ''
+				const insert = prefix + code + suffix
+				if (
+					props.maxLength &&
+					view.state.doc.length - (to - from) + insert.length > props.maxLength
+				) {
+					ev.preventDefault()
+					return true
+				}
+				ev.preventDefault()
+				view.dispatch({
+					changes: { from, to, insert },
+					selection: { anchor: from + insert.length },
+					scrollIntoView: true,
+					userEvent: 'input.paste',
+				})
+				return true
+			}
 
 			if (clipboardData.files && clipboardData.files.length > 0 && props.onImageUpload) {
 				// If the user is pasting a file, upload it if there's an included handler and insert the link.
diff --git a/packages/ui/src/components/base/OverlayScrollArea.vue b/packages/ui/src/components/base/OverlayScrollArea.vue
new file mode 100644
index 00000000000..ecd71630449
--- /dev/null
+++ b/packages/ui/src/components/base/OverlayScrollArea.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import 'overlayscrollbars/overlayscrollbars.css'
+
+import { OverlayScrollbars } from 'overlayscrollbars'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = withDefaults(defineProps<{ autoHide?: boolean }>(), { autoHide: true })
+
+const target = ref<HTMLElement>()
+const viewport = ref<HTMLElement>()
+const content = ref<HTMLElement>()
+let scrollbars: ReturnType<typeof OverlayScrollbars>
+
+onMounted(() => {
+	if (!target.value || !viewport.value || !content.value) return
+	scrollbars = OverlayScrollbars(
+		{ target: target.value, elements: { viewport: viewport.value, content: content.value } },
+		{
+			overflow: { x: 'hidden', y: 'scroll' },
+			scrollbars: {
+				theme: 'os-theme-modrinth',
+				autoHide: props.autoHide ? 'leave' : 'never',
+				autoHideSuspend: true,
+			},
+		},
+	)
+})
+
+onBeforeUnmount(() => scrollbars?.destroy())
+</script>
+
+<template>
+	<div
+		ref="target"
+		class="overlay-scroll-area relative min-h-0 min-w-0 overflow-hidden"
+		data-overlayscrollbars-initialize
+	>
+		<div ref="viewport" class="h-full w-full overflow-y-auto" data-overlayscrollbars-viewport>
+			<div ref="content"><slot /></div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.overlay-scroll-area :deep(.os-theme-modrinth) {
+	--os-size: 6px;
+	--os-padding-perpendicular: 0;
+	--os-padding-axis: 2px;
+	--os-track-bg: transparent;
+	--os-track-bg-hover: transparent;
+	--os-track-bg-active: transparent;
+	--os-handle-border-radius: 9999px;
+	--os-handle-bg: var(--overlay-scrollbar-color, var(--color-scrollbar));
+	--os-handle-bg-hover: var(--overlay-scrollbar-color, var(--surface-5));
+	--os-handle-bg-active: var(--overlay-scrollbar-color, var(--surface-5));
+}
+</style>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 99e2e1bdc32..0195e2c1962 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -100,6 +100,7 @@ export type { MaybeCtxFn, StageButtonConfig, StageConfigInput } from './MultiSta
 export { default as MultiStageModal, resolveCtxFn } from './MultiStageModal.vue'
 export { default as NavTabs } from './NavTabs.vue'
 export { default as OptionGroup } from './OptionGroup.vue'
+export { default as OverlayScrollArea } from './OverlayScrollArea.vue'
 export { default as Page } from './Page.vue'
 export { default as PageHeader } from './page-header/index.vue'
 export { default as PageHeaderMetadata } from './page-header/metadata/index.vue'
diff --git a/packages/ui/src/components/floating/FloatingMenu.vue b/packages/ui/src/components/floating/FloatingMenu.vue
index ba573618da0..6c269c0fdbf 100644
--- a/packages/ui/src/components/floating/FloatingMenu.vue
+++ b/packages/ui/src/components/floating/FloatingMenu.vue
@@ -23,6 +23,7 @@ const SIDES = {
 const props = withDefaults(
 	defineProps<{
 		trigger?: 'click' | 'hover'
+		showDelay?: number
 		placement?: Placement
 		flip?: boolean
 		distance?: number
@@ -34,6 +35,7 @@ const props = withDefaults(
 	}>(),
 	{
 		trigger: 'click',
+		showDelay: 0,
 		placement: 'bottom',
 		flip: true,
 		distance: 8,
@@ -106,6 +108,7 @@ const arrowStyles = computed(() => {
 	}
 })
 
+let showTimer: ReturnType<typeof setTimeout> | undefined
 let hideTimer: ReturnType<typeof setTimeout> | undefined
 let unregister: (() => void) | undefined
 
@@ -144,6 +147,7 @@ function unlisten() {
 }
 
 function show() {
+	clearTimeout(showTimer)
 	clearTimeout(hideTimer)
 	if (props.disabled || isOpen.value) {
 		return
@@ -159,7 +163,18 @@ function show() {
 	nextTick(updateOrigin)
 }
 
+function scheduleShow() {
+	clearTimeout(hideTimer)
+	clearTimeout(showTimer)
+	if (props.showDelay <= 0 || isOpen.value) {
+		show()
+	} else {
+		showTimer = setTimeout(show, props.showDelay)
+	}
+}
+
 function close() {
+	clearTimeout(showTimer)
 	clearTimeout(hideTimer)
 	if (!isOpen.value) {
 		return
@@ -172,6 +187,7 @@ function close() {
 }
 
 function hide() {
+	clearTimeout(showTimer)
 	if (hover.value) {
 		clearTimeout(hideTimer)
 		hideTimer = setTimeout(close, 80)
@@ -215,6 +231,7 @@ function onKeydown(event: KeyboardEvent) {
 }
 
 onBeforeUnmount(() => {
+	clearTimeout(showTimer)
 	clearTimeout(hideTimer)
 	unregister?.()
 	unlisten()
@@ -228,7 +245,7 @@ defineExpose({ show, hide: close })
 		class="relative inline-flex"
 		:class="`v-popper--theme-${theme}`"
 		@click="onTriggerClick"
-		@mouseenter="hover && show()"
+		@mouseenter="hover && scheduleShow()"
 		@mouseleave="hover && hide()"
 		@focusin="hover && show()"
 		@focusout="hover && hide()"
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 2fe6feddfb5..1f96ef5e64f 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -7,6 +7,7 @@ export * from './events'
 export * from './file-extensions'
 export * from './game-modes'
 export * from './loaders'
+export * from './markdown-code'
 export * from './modified-selection'
 export * from './notices'
 export * from './profanity-check'
diff --git a/packages/ui/src/utils/markdown-code.ts b/packages/ui/src/utils/markdown-code.ts
new file mode 100644
index 00000000000..21c1ffa031e
--- /dev/null
+++ b/packages/ui/src/utils/markdown-code.ts
@@ -0,0 +1,42 @@
+export function formatCodeBlock(code: string, language = '') {
+	const lines = code.replace(/\r\n?/g, '\n').split('\n')
+	while (lines.length && !lines[0].trim()) lines.shift()
+	while (lines.length && !lines[lines.length - 1].trim()) lines.pop()
+	const nonEmptyLines = lines.filter((line) => line.trim())
+	let indentation = nonEmptyLines[0]?.match(/^[\t ]*/)?.[0] ?? ''
+	for (const line of nonEmptyLines) {
+		while (indentation && !line.startsWith(indentation)) {
+			indentation = indentation.slice(0, -1)
+		}
+	}
+	code = lines.map((line) => (line.trim() ? line.slice(indentation.length) : '')).join('\n')
+	const fenceLength = Array.from(code.matchAll(/`+/g)).reduce(
+		(length, [match]) => Math.max(length, match.length + 1),
+		3,
+	)
+	const fence = '`'.repeat(fenceLength)
+	return `${fence}${language}\n${code}\n${fence}\n`
+}
+
+export function codeClipboardHtml(document: Document, code: string, language: string) {
+	const pre = document.createElement('pre')
+	pre.dataset.modrinthCodeLanguage = language
+	const content = document.createElement('code')
+	content.textContent = code
+	pre.append(content)
+	return pre.outerHTML
+}
+
+export function readCodeClipboard(document: Document, clipboard: DataTransfer) {
+	const html = clipboard.getData('text/html')
+	const Parser = document.defaultView?.DOMParser
+	if (!html || !Parser) return
+	const parsed = new Parser().parseFromString(html, 'text/html')
+	const pre = parsed.querySelector('pre[data-modrinth-code-language]')
+	if (!pre) return
+	const language = pre.getAttribute('data-modrinth-code-language') ?? ''
+	return formatCodeBlock(
+		clipboard.getData('text/plain'),
+		/^[\w+-]*$/.test(language) ? language : '',
+	)
+}