@@ -28,6 +28,12 @@ Nuxt 3 with SSR — pages are server-rendered and hydrated on the client. Uses `
 
 Rule of thumb: if it doesn't depend on Nuxt-specific APIs or website-only features, it should be in `packages/ui`.
 
+### Project Review Popout Windows
+
+Project review panels can be displayed in multiple browser documents while sharing the main window's Vue application and JavaScript context. Use an anchor, panel, or event target's `ownerDocument` for DOM queries and its `defaultView` for window behavior. Global `document` and `window` still identify the main window after a panel moves.
+
+Use the review shortcut context's listeners (`shortcuts.listen` or `useReviewEventListener`) for review interactions that must work in both the workspace and popouts. Shared overlay and modal behavior follows the multiple-document guidance in `packages/ui/AGENTS.md`.
+
 ## Data Fetching
 
 Use `@modrinth/api-client` via `injectModrinthClient()` for all API calls. See `packages/api-client/AGENTS.md` for the full API client documentation.
 
@@ -21,6 +21,8 @@ This includes, but may not be limited to, the following files:
 - src/public/favicon-light-32x32.png
 - src/public/favicon-settings-32x32.png
 - src/public/favicon-light-settings-32x32.png
+- src/public/favicon-review.svg
+- src/public/favicon-light-review.svg
 - src/public/dev-favicons/\*
 - src/public/news/\*
 
 
@@ -5,6 +5,9 @@ import { fileURLToPath } from 'url'
 import svgLoader from 'vite-svg-loader'
 
 import { GenericModrinthClient, type Labrinth } from '../../packages/api-client/src/index.ts'
+import moderationMessages, {
+	moderationMessagesDirectory,
+} from '../../packages/moderation/vite-plugin'
 
 const STAGING_API_URL = 'https://staging-api.modrinth.com/v2/'
 const STAGING_SHARED_INSTANCES_API_URL = 'https://staging-shared-instances.modrinth.com'
@@ -26,6 +29,7 @@ export default defineNuxtConfig({
 	srcDir: 'src/',
 	alias: {
 		'@modrinth/api-client': API_CLIENT_SOURCE,
+		'#messages': moderationMessagesDirectory,
 	},
 	app: {
 		buildAssetsDir: '/_assets/',
@@ -82,6 +86,7 @@ export default defineNuxtConfig({
 			dedupe: ['vue'],
 		},
 		plugins: [
+			moderationMessages(),
 			svgLoader({
 				svgoConfig: {
 					plugins: [
 
@@ -38,6 +38,9 @@
 		"wrangler": "^4.115.0"
 	},
 	"dependencies": {
+		"@codemirror/commands": "^6.3.2",
+		"@codemirror/language": "^6.9.3",
+		"@codemirror/view": "^6.22.1",
 		"@contentauth/c2pa-web": "^0.13.1",
 		"@floating-ui/vue": "^2.0.1",
 		"@formatjs/intl-localematcher": "^0.5.4",
@@ -59,6 +62,7 @@
 		"ansi-to-html": "^0.7.2",
 		"chart.js": "^4.5.1",
 		"dayjs": "^1.11.7",
+		"dockview-vue": "^8.2.0",
 		"dompurify": "^3.1.7",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.7.0",
 
@@ -111,18 +111,6 @@
 				max-width: 100%;
 			}
 		}
-
-		&.align-x {
-			margin: 0 auto;
-		}
-
-		&.align-l {
-			margin: 0 0 0 auto;
-		}
-
-		&.align-r {
-			margin: 0 auto 0 0;
-		}
 	}
 
 	.normal-page__sidebar {
@@ -152,18 +140,6 @@
 		'sidebar'
 		/ 100%;
 
-	&.align-x {
-		margin: 0 auto;
-	}
-
-	&.align-l {
-		margin: 0 0 0 auto;
-	}
-
-	&.align-r {
-		margin: 0 auto 0 0;
-	}
-
 	@media screen and (min-width: 1024px) {
 		&.sidebar {
 			grid-template:
 
@@ -0,0 +1,117 @@
+<template>
+	<div class="mt-1 flex flex-wrap gap-x-2 gap-y-1 text-xs">
+		<Tooltip
+			v-for="stat in statusStats"
+			:key="stat.status"
+			:text="formatMessage(stat.message, { count: stat.count })"
+			:aria-label="formatMessage(stat.message, { count: stat.count })"
+			class="flex items-center gap-0.5 font-medium tabular-nums"
+			:class="stat.color"
+		>
+			<component :is="stat.icon" class="size-[12px] shrink-0" aria-hidden="true" />
+			<span aria-hidden="true">{{ stat.count }}</span>
+		</Tooltip>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, ShieldAlertIcon } from '@modrinth/assets'
+import { defineMessages, PROJECT_STATUS_ICONS, Tooltip, useVIntl } from '@modrinth/ui'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	stats: { status: string; count: number }[]
+}>()
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	approvedCount: {
+		id: 'moderation.project-review.approvedCount',
+		defaultMessage: '{count} approved',
+	},
+	archivedCount: {
+		id: 'moderation.project-review.archivedCount',
+		defaultMessage: '{count} archived',
+	},
+	unlistedCount: {
+		id: 'moderation.project-review.unlistedCount',
+		defaultMessage: '{count} unlisted',
+	},
+	withheldCount: {
+		id: 'moderation.project-review.withheldCount',
+		defaultMessage: '{count} withheld',
+	},
+	processingCount: {
+		id: 'moderation.project-review.processingCount',
+		defaultMessage: '{count} under review',
+	},
+	draftCount: {
+		id: 'moderation.project-review.draftCount',
+		defaultMessage: '{count} draft',
+	},
+	rejectedCount: {
+		id: 'moderation.project-review.rejectedCount',
+		defaultMessage: '{count} rejected',
+	},
+	techReviewFailedCount: {
+		id: 'moderation.project-review.techReviewFailedCount',
+		defaultMessage: '{count} failed technical review',
+	},
+	privateCount: {
+		id: 'moderation.project-review.privateCount',
+		defaultMessage: '{count} private',
+	},
+	scheduledCount: {
+		id: 'moderation.project-review.scheduledCount',
+		defaultMessage: '{count} scheduled',
+	},
+	unknownCount: {
+		id: 'moderation.project-review.unknownCount',
+		defaultMessage: '{count} unknown',
+	},
+})
+const statusMessages = {
+	tech_review_failed: messages.techReviewFailedCount,
+	approved: messages.approvedCount,
+	unlisted: messages.unlistedCount,
+	private: messages.privateCount,
+	withheld: messages.withheldCount,
+	rejected: messages.rejectedCount,
+	draft: messages.draftCount,
+	processing: messages.processingCount,
+	archived: messages.archivedCount,
+	scheduled: messages.scheduledCount,
+	unknown: messages.unknownCount,
+}
+const statusColors = {
+	approved: 'text-green',
+	archived: 'text-purple',
+	unlisted: 'text-purple',
+	withheld: 'text-red',
+	processing: 'text-orange',
+	draft: 'text-blue',
+	rejected: 'text-red',
+	private: 'text-purple',
+	scheduled: 'text-orange',
+	unknown: 'text-orange',
+	tech_review_failed: 'text-red',
+}
+const statusStats = computed(() =>
+	Object.entries(statusMessages)
+		.map(([key, message]) => {
+			const status = key as keyof typeof statusMessages
+			return {
+				status,
+				message,
+				count: props.stats.find((stat) => stat.status === status)?.count ?? 0,
+				icon:
+					status === 'tech_review_failed'
+						? ShieldAlertIcon
+						: status === 'approved'
+							? CheckIcon
+							: PROJECT_STATUS_ICONS[status],
+				color: statusColors[status],
+			}
+		})
+		.filter((stat) => stat.count > 0),
+)
+</script>
@@ -80,7 +80,7 @@
 		</div>
 
 		<div class="pointer-events-none absolute inset-0 z-[20] overflow-hidden rounded-xl">
-			<AnalyticsLoadingBar :loading="isDataLoading" />
+			<PageLoadingBar :loading="isDataLoading" />
 		</div>
 
 		<div v-if="isDataLoading" class="absolute inset-0 z-[19] overflow-hidden rounded-xl">
@@ -98,14 +98,13 @@
 </template>
 
 <script setup lang="ts">
-import { useVIntl } from '@modrinth/ui'
+import { PageLoadingBar, useVIntl } from '@modrinth/ui'
 
 import { getDefaultAnalyticsGraphProjectEventsVisibility } from '~/components/analytics-dashboard/analytics-route-query'
 import type { AnalyticsGroupByPreset } from '~/providers/analytics/analytics'
 import { injectAnalyticsDashboardContext } from '~/providers/analytics/analytics'
 
 import { analyticsMessages } from '../analytics-messages.ts'
-import AnalyticsLoadingBar from '../AnalyticsLoadingBar.vue'
 import AnalyticsChartLegend from './analytics-chart-header/AnalyticsChartLegend.vue'
 import AnalyticsChartRenderLimitModal from './analytics-chart-header/AnalyticsChartRenderLimitModal.vue'
 import AnalyticsChartHeader from './analytics-chart-header/index.vue'
 
@@ -1,6 +1,6 @@
 <template>
 	<div class="relative overflow-hidden rounded-2xl">
-		<AnalyticsLoadingBar :loading="isDataLoading" />
+		<PageLoadingBar :loading="isDataLoading" />
 		<Table
 			v-model:selected-ids="tableSelectedGraphDatasetIds"
 			:sort-column="displayedSortColumn"
@@ -194,6 +194,7 @@ import { TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	type ButtonMenuOption,
 	Input,
+	PageLoadingBar,
 	Pagination,
 	Table,
 	useFormatNumber,
@@ -221,7 +222,6 @@ import {
 	analyticsMessages,
 	analyticsTableMessages,
 } from '../analytics-messages.ts'
-import AnalyticsLoadingBar from '../AnalyticsLoadingBar.vue'
 import {
 	isNoDependentAnalyticsBreakdownValue,
 	isUnknownAnalyticsBreakdownValue,
 
@@ -0,0 +1,107 @@
+<template>
+	<div
+		ref="interactionScope"
+		class="editable-review-section flex h-full min-h-0 flex-col gap-2.5 overflow-y-auto overflow-x-hidden px-2 pb-2"
+	>
+		<div
+			class="sticky top-0 z-10 flex shrink-0 items-start justify-between gap-4 bg-surface-1 pt-2"
+		>
+			<ReviewPanel
+				mode="inline"
+				:target="{ kind: 'description' }"
+				hide-title
+				:disabled="isLoading || !!error"
+				:interaction-scope="interactionScope"
+				class="!w-auto min-w-0 flex-1 pb-2.5"
+			/>
+			<div class="mt-0.5 flex shrink-0 justify-end gap-1">
+				<template v-if="editing">
+					<Button type="quiet" size="xs" :disabled="saving" @click="resetEditing">
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						size="xs"
+						:loading="saving"
+						:disabled="!valid"
+						@click="save"
+					>
+						{{ formatMessage(commonMessages.saveButton) }}
+					</Button>
+				</template>
+				<EditButton
+					v-else-if="project && !isLoading && !error"
+					:section="formatMessage(messages.description)"
+					:disabled="saving"
+					@click="startEditing"
+				/>
+			</div>
+		</div>
+		<div class="min-h-0 flex-1">
+			<p v-if="!selection" class="m-0 text-secondary">
+				{{ formatMessage(messages.empty) }}
+			</p>
+			<p v-else-if="isLoading" role="status" class="m-0">
+				{{ formatMessage(messages.loading) }}
+			</p>
+			<div v-else-if="error" role="alert">
+				<p class="m-0">{{ formatMessage(messages.loadError) }}</p>
+				<Button @click="refresh">{{ formatMessage(messages.retry) }}</Button>
+			</div>
+			<div v-else-if="editing" class="flex min-h-full flex-col gap-2">
+				<TemplateMarkdownEditor
+					ref="editor"
+					v-model="draft"
+					:disabled="saving"
+					:hide-formatting-buttons="
+						settings.get(moderationSettings.General.HideMarkdownFormattingButtons)
+					"
+				/>
+				<p v-if="validationMessage" class="m-0 text-sm text-red" role="alert">
+					{{ validationMessage }}
+				</p>
+			</div>
+			<ProjectPageDescription
+				v-else-if="project?.description?.trim()"
+				class="text-sm leading-tight"
+				:description="project.description"
+			/>
+			<p v-else class="m-0 text-secondary">
+				{{ formatMessage(messages.emptyDescription) }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { moderationSettings } from '@modrinth/moderation'
+import { Button, commonMessages, ProjectPageDescription, useVIntl } from '@modrinth/ui'
+import { useTemplateRef } from 'vue'
+
+import TemplateMarkdownEditor from '~/components/project-review/message-thread/template-markdown-editor.vue'
+import { useModerationSettings } from '~/composables/moderation'
+import { injectProjectReviewPageContext } from '~/providers/project-review'
+
+import { projectReviewMessages as messages } from '../messages'
+import EditButton from '../project-info/edit/button.vue'
+import { useProjectTextEdit } from '../project-info/edit/use-project-text-edit'
+import ReviewPanel from '../review-panel/index.vue'
+
+const { formatMessage } = useVIntl()
+const settings = useModerationSettings()
+const interactionScope = useTemplateRef<HTMLElement>('interactionScope')
+const { selection, isLoading, error, refresh } = injectProjectReviewPageContext()
+const editor = useTemplateRef<InstanceType<typeof TemplateMarkdownEditor>>('editor')
+const {
+	project,
+	saving,
+	editing,
+	draft,
+	valid,
+	validationMessage,
+	startEditing,
+	resetEditing,
+	save,
+} = useProjectTextEdit('description', () => editor.value?.focus())
+</script>