feat: tech review global trace database (#6648)

* global detail verdicts system

* global traces frontend

* split global routes into own mod

* tweak migration to only do no-key check at app level

* prepr

apps/frontend/src/components/ui/moderation/GlobalDetailLocalTraceCard.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="rounded-lg border border-divider bg-bg-raised p-3">
+		<div class="flex flex-wrap items-start justify-between gap-3">
+			<div class="min-w-0">
+				<p class="m-0 break-words font-semibold text-contrast">
+					{{ trace.project_name }}
+				</p>
+				<p class="m-0 mt-1 break-all text-sm text-secondary">
+					Project {{ trace.project_slug ?? trace.project_id }} / Version
+					{{ trace.version_number }} / File {{ trace.file_name }}
+				</p>
+			</div>
+			<div class="flex flex-wrap items-center gap-2">
+				<span class="text-sm text-secondary">Local</span>
+				<Badge :type="trace.local_status" />
+				<span class="text-sm text-secondary">Effective</span>
+				<Badge :type="trace.effective_status" />
+				<ButtonStyled>
+					<NuxtLink :to="localTraceLink">
+						<ExternalIcon aria-hidden="true" />
+						View
+					</NuxtLink>
+				</ButtonStyled>
+			</div>
+		</div>
+
+		<div class="mt-3 grid gap-2 text-sm text-secondary md:grid-cols-2">
+			<p class="m-0 break-all">
+				<span class="font-semibold text-contrast">Issue</span>
+				{{ trace.issue_type }}
+			</p>
+			<p class="m-0 break-all">
+				<span class="font-semibold text-contrast">Severity</span>
+				{{ trace.severity }}
+			</p>
+			<p class="m-0 break-all">
+				<span class="font-semibold text-contrast">Path</span>
+				{{ trace.file_path }}
+			</p>
+			<p v-if="trace.jar" class="m-0 break-all">
+				<span class="font-semibold text-contrast">JAR</span>
+				{{ trace.jar }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { ExternalIcon } from '@modrinth/assets'
+import { Badge, ButtonStyled } from '@modrinth/ui'
+
+const props = defineProps<{
+	trace: Labrinth.TechReview.Internal.GlobalIssueDetailTrace
+}>()
+
+const localTraceLink = computed(
+	() =>
+		`/moderation/technical-review/${props.trace.project_id}?detail=${encodeURIComponent(
+			props.trace.detail_id,
+		)}`,
+)
+</script>

apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue

@@ -0,0 +1,180 @@
+<template>
+	<div>
+		<form class="flex flex-col gap-2 sm:flex-row" @submit.prevent="executeSearch">
+			<StyledInput
+				v-model="query"
+				:icon="SearchIcon"
+				type="text"
+				autocomplete="off"
+				placeholder="Search global trace keys..."
+				clearable
+				wrapper-class="flex-1 w-full"
+			/>
+			<ButtonStyled color="brand">
+				<button type="submit" :disabled="isLoading">
+					<SearchIcon aria-hidden="true" />
+					Search
+				</button>
+			</ButtonStyled>
+		</form>
+
+		<div
+			v-if="!isLoading && !loadError && total > 0"
+			class="mt-4 flex flex-wrap items-center justify-between gap-3"
+		>
+			<p class="m-0 text-sm text-secondary">Showing {{ pageStart }}-{{ pageEnd }} of {{ total }}</p>
+			<Pagination :page="currentPage" :count="pageCount" @switch-page="switchPage" />
+		</div>
+
+		<EmptyState
+			v-if="isLoading"
+			type="no-search-result"
+			heading="Loading global detail traces..."
+		/>
+		<EmptyState
+			v-else-if="loadError"
+			type="no-search-result"
+			heading="Failed to load global detail traces"
+		/>
+		<div v-else-if="traces.length > 0" class="mt-4 flex flex-col gap-3">
+			<article
+				v-for="trace in traces"
+				:key="trace.detail_key"
+				class="universal-card flex flex-col gap-3"
+			>
+				<div class="flex flex-wrap items-start justify-between gap-3">
+					<div class="min-w-0">
+						<div class="flex min-w-0 items-center gap-2">
+							<HashIcon class="shrink-0 text-secondary" aria-hidden="true" />
+							<h2 class="m-0 min-w-0 text-lg font-semibold text-contrast">
+								Trace
+								<span class="break-all font-mono text-base">{{ trace.detail_key }}</span>
+							</h2>
+						</div>
+						<p class="m-0 mt-1 text-sm text-secondary">
+							{{ formatTraceCount(trace.local_trace_count) }}
+						</p>
+					</div>
+					<Badge :type="trace.verdict" />
+				</div>
+
+				<div v-if="getPreviewLocalTraces(trace).length > 0" class="flex flex-col gap-2">
+					<div
+						v-if="getVisibleLocalTraceTotal(trace) > getPreviewLocalTraces(trace).length"
+						class="flex flex-wrap items-center justify-between gap-2"
+					>
+						<p class="m-0 text-sm text-secondary">
+							Showing first {{ getPreviewLocalTraces(trace).length }} of
+							{{ getVisibleLocalTraceTotal(trace) }} local traces
+						</p>
+						<ButtonStyled>
+							<NuxtLink :to="getGlobalTraceLink(trace)">
+								<ListIcon aria-hidden="true" />
+								View all
+							</NuxtLink>
+						</ButtonStyled>
+					</div>
+					<GlobalDetailLocalTraceCard
+						v-for="localTrace in getPreviewLocalTraces(trace)"
+						:key="localTrace.detail_id"
+						:trace="localTrace"
+					/>
+				</div>
+				<EmptyState
+					v-else
+					type="no-search-result"
+					heading="No local traces currently match this key"
+				/>
+			</article>
+		</div>
+		<EmptyState v-else type="no-search-result" heading="No global detail traces found" />
+
+		<div v-if="!isLoading && !loadError && total > 0" class="mt-4 flex justify-end">
+			<Pagination :page="currentPage" :count="pageCount" @switch-page="switchPage" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { HashIcon, ListIcon, SearchIcon } from '@modrinth/assets'
+import {
+	Badge,
+	ButtonStyled,
+	EmptyState,
+	injectModrinthClient,
+	Pagination,
+	StyledInput,
+} from '@modrinth/ui'
+
+import GlobalDetailLocalTraceCard from '~/components/ui/moderation/GlobalDetailLocalTraceCard.vue'
+
+const client = injectModrinthClient()
+const query = ref('')
+const activeQuery = ref<string | null>(null)
+const isLoading = ref(false)
+const loadError = ref(false)
+const currentPage = ref(1)
+const itemsPerPage = 20
+const localTracePreviewLimit = 10
+const total = ref(0)
+const traces = ref<Labrinth.TechReview.Internal.GlobalIssueDetail[]>([])
+
+const pageCount = computed(() => Math.max(Math.ceil(total.value / itemsPerPage), 1))
+const pageStart = computed(() =>
+	total.value === 0 ? 0 : (currentPage.value - 1) * itemsPerPage + 1,
+)
+const pageEnd = computed(() => Math.min(currentPage.value * itemsPerPage, total.value))
+
+function formatTraceCount(count: number) {
+	return `${count} local ${count === 1 ? 'trace' : 'traces'}`
+}
+
+function getPreviewLocalTraces(trace: Labrinth.TechReview.Internal.GlobalIssueDetail) {
+	return trace.local_traces.slice(0, localTracePreviewLimit)
+}
+
+function getVisibleLocalTraceTotal(trace: Labrinth.TechReview.Internal.GlobalIssueDetail) {
+	return Math.max(trace.local_trace_count, trace.local_traces.length)
+}
+
+function getGlobalTraceLink(trace: Labrinth.TechReview.Internal.GlobalIssueDetail) {
+	return `/moderation/global-traces/${encodeURIComponent(trace.detail_key)}`
+}
+
+async function loadTraces() {
+	isLoading.value = true
+	loadError.value = false
+
+	try {
+		const response = await client.labrinth.tech_review_internal.searchGlobalIssueDetails({
+			query: activeQuery.value,
+			limit: itemsPerPage,
+			page: currentPage.value - 1,
+		})
+
+		traces.value = response.traces
+		total.value = response.total
+	} catch (error) {
+		console.error('Failed to load global detail traces', error)
+		traces.value = []
+		total.value = 0
+		loadError.value = true
+	} finally {
+		isLoading.value = false
+	}
+}
+
+async function executeSearch() {
+	activeQuery.value = query.value.trim() || null
+	currentPage.value = 1
+	await loadTraces()
+}
+
+async function switchPage(page: number) {
+	currentPage.value = page
+	await loadTraces()
+}
+
+onMounted(loadTraces)
+</script>

apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue

@@ -45,7 +45,7 @@ import {
 	type User,
 } from '@modrinth/utils'
 import dayjs from 'dayjs'
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
 
 import type { UnsafeFile } from '~/components/ui/moderation/MaliciousSummaryModal.vue'
 import ThreadView from '~/components/ui/thread/ThreadView.vue'
@@ -89,6 +89,7 @@ const props = defineProps<{
 		thread: Labrinth.TechReview.Internal.Thread
 		reports: FlattenedFileReport[]
 	}
+	focusedDetailId?: string | null
 	loadingIssues: Set<string>
 	decompiledSources: Map<string, string>
 }>()
@@ -192,7 +193,12 @@ watch(selectedFile, (newFile) => {
 
 const client = injectModrinthClient()
 
-async function updateIssueDetails(data: { detail_id: string; verdict: 'safe' | 'unsafe' }[]) {
+async function updateIssueDetails(
+	data: {
+		detail_id: string
+		verdict: Labrinth.TechReview.Internal.DelphiReportIssueStatus
+	}[],
+) {
 	await client.request('/moderation/tech-review/issue-detail', {
 		api: 'labrinth',
 		version: 'internal',
@@ -381,6 +387,49 @@ function viewFileFlags(file: FlattenedFileReport) {
 	currentTab.value = 'File'
 }
 
+function getDetailElementId(detailId: string) {
+	return `tech-review-detail-${detailId}`
+}
+
+function findFileForDetail(detailId: string): FlattenedFileReport | null {
+	for (const report of props.item.reports) {
+		for (const issue of report.issues) {
+			if (issue.details.some((detail) => detail.id === detailId)) {
+				return report
+			}
+		}
+	}
+
+	return null
+}
+
+async function focusDetail(detailId: string) {
+	const file = findFileForDetail(detailId)
+	if (!file) return
+
+	viewFileFlags(file)
+	await nextTick()
+
+	const classItem = groupedByClass.value.find((group) =>
+		group.flags.some((flag) => flag.detail.id === detailId),
+	)
+
+	if (classItem) {
+		expandClass(classItem)
+	}
+
+	await nextTick()
+
+	if (!import.meta.client) return
+
+	window.requestAnimationFrame(() => {
+		document.getElementById(getDetailElementId(detailId))?.scrollIntoView({
+			behavior: 'smooth',
+			block: 'center',
+		})
+	})
+}
+
 function backToFileList() {
 	selectedFileId.value = null
 	if (currentTab.value === 'File') {
@@ -691,6 +740,16 @@ const groupedByJar = computed<JarGroup[]>(() => {
 	})
 })
 
+watch(
+	() => props.focusedDetailId,
+	(detailId) => {
+		if (detailId) {
+			focusDetail(detailId)
+		}
+	},
+	{ immediate: true },
+)
+
 // Auto-expand/load source for small files; keep larger files lazy.
 watch(
 	[selectedFileId, groupedByClass],
@@ -1384,8 +1443,12 @@ function copyId() {
 							>
 								<div
 									v-for="flag in classItem.flags"
+									:id="getDetailElementId(flag.detail.id)"
 									:key="`${flag.issueId}-${flag.detail.id}`"
 									class="flex flex-col gap-2 rounded-lg border-[1px] border-b border-solid border-surface-5 bg-surface-3 py-2 pl-4 last:border-b-0"
+									:class="{
+										'!border-brand bg-brand-highlight': props.focusedDetailId === flag.detail.id,
+									}"
 								>
 									<div class="grid grid-cols-[1fr_auto] items-center">
 										<div