Add evaluation mode: queue, flag bar, info dialog

- src/lib/eval.ts: deterministic eval queue (per match-map: round 1, last,
+ 1 PRNG-picked middle), flag reasons, localStorage flag store
- src/lib/components/eval-bar.svelte: amber strip below the header with
position N/total, Flag dropdown (6 reasons w/ descriptions), Info button,
Next, Exit
- src/lib/components/eval-info-dialog.svelte: explains the policy and what
to flag (missing audio, AV misalignment, POV desync, uninteresting,
missing video, other)
- header.svelte: ListChecks toggle button — start eval (jump to candidate 0)
or exit; reads matches from page.data so any match page can launch eval
- match page: render <EvalBar /> when ?eval=1; route effect now also reacts
to URL round/player/view changes (so eval Next on the same map reloads
the new round); ?eval=1&i=N stays preserved by syncUrl()'s URL clone

Flags persist in localStorage (opencs2:eval:flags:v1) — export manually for
now, no backend round-tripping yet.

bun.lock

@@ -12,6 +12,7 @@
       "devDependencies": {
         "@fontsource-variable/oxanium": "^5.2.8",
         "@fontsource-variable/roboto-slab": "^5.2.8",
+        "@internationalized/date": "^3.12.0",
         "@sveltejs/adapter-static": "latest",
         "@sveltejs/kit": "latest",
         "@sveltejs/vite-plugin-svelte": "^7.0.0",

package.json

@@ -21,6 +21,7 @@
 	"devDependencies": {
 		"@fontsource-variable/oxanium": "^5.2.8",
 		"@fontsource-variable/roboto-slab": "^5.2.8",
+		"@internationalized/date": "^3.12.0",
 		"@sveltejs/adapter-static": "latest",
 		"@sveltejs/kit": "latest",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",

src/lib/components/eval-bar.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import FlagIcon from 'phosphor-svelte/lib/FlagIcon';
+	import InfoIcon from 'phosphor-svelte/lib/InfoIcon';
+	import ArrowRightIcon from 'phosphor-svelte/lib/ArrowRightIcon';
+	import XIcon from 'phosphor-svelte/lib/XIcon';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { addFlag, FLAG_REASONS, evalUrl, type EvalCandidate, type FlagReason } from '$lib/eval';
+	import { toast } from 'svelte-sonner';
+	import EvalInfoDialog from './eval-info-dialog.svelte';
+
+	interface Props {
+		queue: EvalCandidate[];
+		index: number;
+		matchId: number;
+		mapName: string;
+		round: number;
+	}
+	let { queue, index, matchId, mapName, round }: Props = $props();
+
+	let infoOpen = $state(false);
+
+	function flag(reason: FlagReason, label: string) {
+		addFlag({ matchId, mapName, round, reason });
+		toast.success(`Flagged: ${label}`, {
+			description: `match ${matchId} · ${mapName} · round ${round}`
+		});
+	}
+
+	function next() {
+		const ni = index < 0 ? 0 : index + 1;
+		if (ni >= queue.length) {
+			toast.success('Evaluation complete', {
+				description: `Reached end of queue (${queue.length} candidates).`
+			});
+			return;
+		}
+		goto(evalUrl(queue[ni], ni));
+	}
+
+	function exitEval() {
+		const url = new URL(page.url);
+		url.searchParams.delete('eval');
+		url.searchParams.delete('i');
+		goto(url.pathname + (url.searchParams.size ? '?' + url.searchParams.toString() : ''));
+	}
+
+	const total = $derived(queue.length);
+	const positionLabel = $derived(index < 0 ? `— / ${total}` : `${index + 1} / ${total}`);
+</script>
+
+<div
+	class="border-b border-amber-500/30 bg-amber-500/10 dark:border-amber-500/25 dark:bg-amber-500/[0.07]"
+>
+	<div class="mx-auto flex h-10 w-full max-w-[1600px] items-center gap-2 px-4 text-xs">
+		<span class="font-mono font-semibold tracking-wide text-amber-700 uppercase dark:text-amber-300"
+			>Eval</span
+		>
+		<span class="text-muted-foreground tabular-nums">{positionLabel}</span>
+
+		<div class="ml-auto flex items-center gap-1">
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					{#snippet child({ props })}
+						<Button {...props} variant="outline" size="sm">
+							<FlagIcon size={14} weight="fill" /> Flag
+						</Button>
+					{/snippet}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="end" class="w-72">
+					<DropdownMenu.Label>Flag this candidate as…</DropdownMenu.Label>
+					<DropdownMenu.Separator />
+					{#each FLAG_REASONS as r (r.id)}
+						<DropdownMenu.Item
+							onclick={() => flag(r.id, r.label)}
+							class="flex-col items-start gap-0.5"
+						>
+							<span class="font-medium">{r.label}</span>
+							<span class="text-[10px] text-muted-foreground">{r.description}</span>
+						</DropdownMenu.Item>
+					{/each}
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					{#snippet child({ props })}
+						<Button
+							{...props}
+							variant="ghost"
+							size="icon-sm"
+							onclick={() => (infoOpen = true)}
+							aria-label="What to flag"
+						>
+							<InfoIcon size={14} weight="duotone" />
+						</Button>
+					{/snippet}
+				</Tooltip.Trigger>
+				<Tooltip.Content side="bottom">How to evaluate</Tooltip.Content>
+			</Tooltip.Root>
+
+			<Button onclick={next} size="sm" disabled={total === 0}>
+				Next <ArrowRightIcon size={14} weight="bold" />
+			</Button>
+
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					{#snippet child({ props })}
+						<Button
+							{...props}
+							variant="ghost"
+							size="icon-sm"
+							onclick={exitEval}
+							aria-label="Exit evaluation"
+						>
+							<XIcon size={14} weight="bold" />
+						</Button>
+					{/snippet}
+				</Tooltip.Trigger>
+				<Tooltip.Content side="bottom">Exit evaluation</Tooltip.Content>
+			</Tooltip.Root>
+		</div>
+	</div>
+</div>
+
+<EvalInfoDialog bind:open={infoOpen} />

src/lib/components/eval-info-dialog.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { FLAG_REASONS } from '$lib/eval';
+
+	interface Props {
+		open?: boolean;
+	}
+	let { open = $bindable(false) }: Props = $props();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="max-w-xl">
+		<Dialog.Header>
+			<Dialog.Title>How to evaluate</Dialog.Title>
+			<Dialog.Description>
+				The queue samples 3 rounds per match — round 1, the last round, and one deterministic round
+				in the middle. Watch each candidate, flag any issue you spot, then click <span
+					class="font-medium text-foreground">Next</span
+				> to advance.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="mt-3 space-y-3 text-sm">
+			<div>
+				<div class="font-semibold text-foreground">Flag if you see:</div>
+				<ul class="mt-1.5 space-y-1.5 text-xs/relaxed text-muted-foreground">
+					{#each FLAG_REASONS as r (r.id)}
+						<li class="flex flex-col gap-0.5">
+							<span class="font-medium text-foreground">{r.label}</span>
+							<span>{r.description}</span>
+						</li>
+					{/each}
+				</ul>
+			</div>
+
+			<p class="border-t pt-3 text-xs text-muted-foreground">
+				Flags are stored in your browser's <code class="font-mono">localStorage</code> under
+				<code class="font-mono">opencs2:eval:flags:v1</code>. Export them by copying that key from
+				devtools.
+			</p>
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

src/lib/components/header.svelte

@@ -4,9 +4,30 @@
 	import SunIcon from 'phosphor-svelte/lib/SunIcon';
 	import MoonIcon from 'phosphor-svelte/lib/MoonIcon';
 	import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeftIcon';
+	import ListChecksIcon from 'phosphor-svelte/lib/ListChecksIcon';
 	import { mode, toggleMode } from 'mode-watcher';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import HfLogo from '$lib/components/hf-logo.svelte';
 	import { site } from '$lib/site';
+	import type { Match } from '$lib/types';
+	import { buildEvalQueue, evalUrl } from '$lib/eval';
+
+	const inEval = $derived(page.url.searchParams.get('eval') === '1');
+	const matches = $derived((page.data?.matches ?? []) as Match[]);
+
+	function toggleEval() {
+		if (inEval) {
+			const url = new URL(page.url);
+			url.searchParams.delete('eval');
+			url.searchParams.delete('i');
+			goto(url.pathname + (url.searchParams.size ? '?' + url.searchParams.toString() : ''));
+			return;
+		}
+		const queue = buildEvalQueue(matches);
+		if (!queue.length) return;
+		goto(evalUrl(queue[0], 0));
+	}
 </script>
 
 <header class="border-b border-border/60">
@@ -21,6 +42,27 @@
 		</a>
 
 		<div class="ml-auto flex items-center gap-1">
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					{#snippet child({ props })}
+						<Button
+							{...props}
+							variant="ghost"
+							size="icon-sm"
+							onclick={toggleEval}
+							disabled={!matches.length}
+							data-active={inEval || undefined}
+							class="data-active:bg-amber-500/15 data-active:text-amber-700 dark:data-active:text-amber-300"
+							aria-label={inEval ? 'Exit evaluation' : 'Start evaluation'}
+						>
+							<ListChecksIcon size={16} weight="duotone" />
+						</Button>
+					{/snippet}
+				</Tooltip.Trigger>
+				<Tooltip.Content side="bottom">
+					{inEval ? 'Exit evaluation' : 'Start evaluation'}
+				</Tooltip.Content>
+			</Tooltip.Root>
 			<Tooltip.Root>
 				<Tooltip.Trigger>
 					{#snippet child({ props })}

src/lib/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />

src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import DialogPortal from './dialog-portal.svelte';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import XIcon from 'phosphor-svelte/lib/X';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn(
+		'text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3',
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { Button } from '$lib/components/ui/button/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		showCloseButton = false,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn('gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+	{...restProps}
+>
+	{@render children?.()}
+	{#if showCloseButton}
+		<DialogPrimitive.Close>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Close</Button>
+			{/snippet}
+		</DialogPrimitive.Close>
+	{/if}
+</div>

src/lib/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn('gap-1 flex flex-col', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />

src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn('font-heading text-sm font-medium', className)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />

src/lib/components/ui/dialog/dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />

src/lib/components/ui/dialog/index.ts

@@ -0,0 +1,34 @@
+import Root from './dialog.svelte';
+import Portal from './dialog-portal.svelte';
+import Title from './dialog-title.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Close from './dialog-close.svelte';
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose
+};

src/lib/eval.ts

@@ -0,0 +1,142 @@
+import { browser } from '$app/environment';
+import type { Match } from '$lib/types';
+
+export type EvalCandidate = {
+	matchId: number;
+	mapName: string;
+	round: number;
+};
+
+export type FlagReason =
+	| 'missing_audio'
+	| 'av_misaligned'
+	| 'pov_desync'
+	| 'uninteresting'
+	| 'missing_video'
+	| 'other';
+
+export const FLAG_REASONS: { id: FlagReason; label: string; description: string }[] = [
+	{
+		id: 'missing_audio',
+		label: 'Missing audio',
+		description: 'No audio at all when there should be (gunfire, footsteps, callouts).'
+	},
+	{
+		id: 'av_misaligned',
+		label: 'Audio out of sync',
+		description: 'Audio is offset from on-screen action — gunshots before the muzzle flash, etc.'
+	},
+	{
+		id: 'pov_desync',
+		label: 'POVs out of sync',
+		description:
+			'In grid mode, two players who should see the same moment are time-offset from each other.'
+	},
+	{
+		id: 'uninteresting',
+		label: 'Uninteresting gameplay',
+		description: 'Pure AFK, intentional griefing, or otherwise unusable footage.'
+	},
+	{
+		id: 'missing_video',
+		label: 'Missing video',
+		description:
+			'A POV stream stays blank after the round has buffered (i.e. not just a slow-network hiccup).'
+	},
+	{
+		id: 'other',
+		label: 'Other',
+		description: 'Something else worth recording.'
+	}
+];
+
+export type Flag = {
+	matchId: number;
+	mapName: string;
+	round: number;
+	reason: FlagReason;
+	ts: number;
+};
+
+const FLAGS_KEY = 'opencs2:eval:flags:v1';
+
+export function loadFlags(): Flag[] {
+	if (!browser) return [];
+	try {
+		return JSON.parse(localStorage.getItem(FLAGS_KEY) ?? '[]') as Flag[];
+	} catch {
+		return [];
+	}
+}
+
+export function saveFlags(flags: Flag[]) {
+	if (!browser) return;
+	localStorage.setItem(FLAGS_KEY, JSON.stringify(flags));
+}
+
+export function addFlag(f: Omit<Flag, 'ts'>) {
+	const flags = loadFlags();
+	flags.push({ ...f, ts: Date.now() });
+	saveFlags(flags);
+}
+
+// Mulberry32 — small deterministic PRNG so the picked middle round is stable
+// for a given (match_id, map_name) and the eval set doesn't shift between
+// sessions.
+function prng(seed: number): number {
+	let t = (seed + 0x6d2b79f5) | 0;
+	t = Math.imul(t ^ (t >>> 15), t | 1);
+	t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+	return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+}
+
+/**
+ * Evaluation policy: per (match, map), sample 3 rounds — first, last, and
+ * one deterministic random round in the middle. Sorted by match_id, then
+ * map_index to match the rest of the app's canonical order.
+ */
+export function buildEvalQueue(matches: Match[]): EvalCandidate[] {
+	const sorted = matches
+		.slice()
+		.sort((a, b) => a.match_id - b.match_id || (a.map_index ?? 0) - (b.map_index ?? 0));
+
+	const out: EvalCandidate[] = [];
+	for (const m of sorted) {
+		const total = m.rounds_played;
+		if (!total || total < 1) continue;
+
+		const picks = new Set<number>([1, total]);
+		if (total > 2) {
+			const seed = m.match_id * 31 + m.map_name.length * 17 + (m.map_index ?? 0);
+			const span = total - 2; // pick from [2, total - 1]
+			picks.add(2 + Math.floor(prng(seed) * span));
+		}
+
+		for (const round of [...picks].sort((a, b) => a - b)) {
+			out.push({ matchId: m.match_id, mapName: m.map_name, round });
+		}
+	}
+	return out;
+}
+
+export function indexOfCandidate(
+	queue: EvalCandidate[],
+	matchId: number,
+	mapName: string,
+	round: number
+): number {
+	return queue.findIndex(
+		(c) => c.matchId === matchId && c.mapName === mapName && c.round === round
+	);
+}
+
+export function evalUrl(c: EvalCandidate, i: number): string {
+	const params = new URLSearchParams({
+		round: String(c.round),
+		player: '0',
+		view: 'grid',
+		eval: '1',
+		i: String(i)
+	});
+	return `/match/${encodeURIComponent(c.matchId)}/${encodeURIComponent(c.mapName)}?${params}`;
+}

src/routes/match/[matchId]/[mapName]/+page.svelte

@@ -3,6 +3,8 @@
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
 	import Header from '$lib/components/header.svelte';
+	import EvalBar from '$lib/components/eval-bar.svelte';
+	import { buildEvalQueue, indexOfCandidate } from '$lib/eval';
 	import RoundList from '$lib/components/round-list.svelte';
 	import PlayerGrid from '$lib/components/player-grid.svelte';
 	import VideoStage from '$lib/components/video-stage.svelte';
@@ -75,6 +77,17 @@
 
 	let viewMode = $state<'single' | 'grid'>(readViewFromUrl());
 
+	// Evaluation mode driven by ?eval=1&i=N. Queue is deterministic from the
+	// match list so reloading or sharing a URL still lands on the same item.
+	const inEvalMode = $derived(page.url.searchParams.get('eval') === '1');
+	const evalQueue = $derived(inEvalMode ? buildEvalQueue(data.matches) : []);
+	const evalIndex = $derived.by(() => {
+		if (!inEvalMode) return -1;
+		const i = Number(page.url.searchParams.get('i'));
+		if (Number.isFinite(i) && i >= 0 && i < evalQueue.length) return i;
+		return indexOfCandidate(evalQueue, data.match.match_id, data.match.map_name, currentRoundNum);
+	});
+
 	const playerChunks = $derived(
 		previews.filter((p) => p.player === currentPlayer).sort((a, b) => a.chunk_index - b.chunk_index)
 	);
@@ -340,34 +353,47 @@
 		}
 	}
 
-	// React to (matchId, mapName) changes so navigating between maps via the
-	// Select dropdown — which only swaps the route param, not the component —
-	// resets local state and reloads the new round previews.
+	// React to navigations: a (matchId, mapName) change reuses the component
+	// (SvelteKit doesn't remount), so we reset state + reload. A change in
+	// just the round/player/view URL params (e.g. eval mode's Next button
+	// jumping to a new round in the same map) also needs to be picked up.
 	let prevRouteKey = '';
 	$effect(() => {
 		const routeKey = `${data.match.match_id}|${data.match.map_name}`;
-		if (routeKey === prevRouteKey) return;
-		prevRouteKey = routeKey;
-
-		const newRound = readRoundFromUrl(data.rounds);
-		const newPlayer = readPlayerFromUrl();
-		const newView = readViewFromUrl();
+		const urlRound = readRoundFromUrl(data.rounds);
+		const urlPlayer = readPlayerFromUrl();
+		const urlView = readViewFromUrl();
 
 		untrack(() => {
-			currentRoundNum = newRound;
-			currentPlayer = newPlayer;
-			viewMode = newView;
-			previews = [];
-			previewsError = null;
-			virtualTime = 0;
-			initialVirtualTime = 0;
-			activeVideoEnded = false;
-			bufferedRanges = [];
-			preloadedPlayers = new Set();
-			preloadAllPlayers = false;
-			masterPaused = false;
+			const routeChanged = routeKey !== prevRouteKey;
+			prevRouteKey = routeKey;
+
+			if (routeChanged) {
+				currentRoundNum = urlRound;
+				currentPlayer = urlPlayer;
+				viewMode = urlView;
+				previews = [];
+				previewsError = null;
+				virtualTime = 0;
+				initialVirtualTime = 0;
+				activeVideoEnded = false;
+				bufferedRanges = [];
+				preloadedPlayers = new Set();
+				preloadAllPlayers = false;
+				masterPaused = false;
+				loadRound(urlRound);
+				return;
+			}
 
-			loadRound(newRound);
+			// Same match+map, but URL params may have shifted (eval Next, history
+			// nav, ...). Only act on actual differences so internal calls that
+			// already updated state via syncUrl don't re-trigger a load.
+			if (urlRound !== currentRoundNum) {
+				currentRoundNum = urlRound;
+				loadRound(urlRound);
+			}
+			if (urlPlayer !== currentPlayer) currentPlayer = urlPlayer;
+			if (urlView !== viewMode) viewMode = urlView;
 		});
 	});
 </script>
@@ -376,6 +402,16 @@
 
 <Header />
 
+{#if inEvalMode}
+	<EvalBar
+		queue={evalQueue}
+		index={evalIndex}
+		matchId={data.match.match_id}
+		mapName={data.match.map_name}
+		round={currentRoundNum}
+	/>
+{/if}
+
 <main
 	data-view={viewMode}
 	class="mx-auto w-full max-w-[1600px] px-4 py-6 data-[view=grid]:max-w-none"