Add PF2e encounter difficulty calculation with 5-tier budget system

Implements PF2e encounter difficulty alongside the existing D&D system.
PF2e uses creature level vs party level to derive XP, compares against
5-tier budgets (Trivial/Low/Moderate/Severe/Extreme), and adjusts
thresholds for party size. The indicator shows 4 bars in PF2e mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/__tests__/factories/build-pf2e-creature.ts

@@ -0,0 +1,28 @@
+import type { Pf2eCreature } from "@initiative/domain";
+import { creatureId } from "@initiative/domain";
+
+let counter = 0;
+
+export function buildPf2eCreature(
+	overrides?: Partial<Pf2eCreature>,
+): Pf2eCreature {
+	const id = ++counter;
+	return {
+		system: "pf2e",
+		id: creatureId(`pf2e-creature-${id}`),
+		name: `PF2e Creature ${id}`,
+		source: "crb",
+		sourceDisplayName: "Core Rulebook",
+		level: 1,
+		traits: ["humanoid"],
+		perception: 5,
+		abilityMods: { str: 2, dex: 1, con: 2, int: 0, wis: 1, cha: -1 },
+		ac: 15,
+		saveFort: 7,
+		saveRef: 4,
+		saveWill: 5,
+		hp: 20,
+		speed: "25 ft.",
+		...overrides,
+	};
+}

apps/web/src/__tests__/factories/index.ts

@@ -1,3 +1,4 @@
 export { buildCombatant } from "./build-combatant.js";
 export { buildCreature } from "./build-creature.js";
 export { buildEncounter } from "./build-encounter.js";
+export { buildPf2eCreature } from "./build-pf2e-creature.js";

apps/web/src/components/__tests__/difficulty-breakdown-panel.test.tsx

@@ -1,7 +1,11 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
 
-import type { Creature, CreatureId, PlayerCharacter } from "@initiative/domain";
+import type {
+	AnyCreature,
+	CreatureId,
+	PlayerCharacter,
+} from "@initiative/domain";
 import { combatantId, creatureId, playerCharacterId } from "@initiative/domain";
 import {
 	cleanup,
@@ -17,6 +21,7 @@ import {
 	buildCombatant,
 	buildCreature,
 	buildEncounter,
+	buildPf2eCreature,
 } from "../../__tests__/factories/index.js";
 import { AllProviders } from "../../__tests__/test-providers.js";
 import { useRulesEdition } from "../../hooks/use-rules-edition.js";
@@ -52,7 +57,7 @@ const goblinCreature = buildCreature({
 function renderPanel(options: {
 	encounter: ReturnType<typeof buildEncounter>;
 	playerCharacters?: PlayerCharacter[];
-	creatures?: Map<CreatureId, Creature>;
+	creatures?: Map<CreatureId, AnyCreature>;
 	onClose?: () => void;
 }) {
 	const adapters = createTestAdapters({
@@ -357,4 +362,157 @@ describe("DifficultyBreakdownPanel", () => {
 
 		expect(onClose).toHaveBeenCalledOnce();
 	});
+
+	describe("PF2e edition", () => {
+		const orcWarrior = buildPf2eCreature({
+			id: creatureId("pf2e:orc-warrior"),
+			name: "Orc Warrior",
+			level: 3,
+			source: "crb",
+			sourceDisplayName: "Core Rulebook",
+		});
+
+		function pf2eEncounter() {
+			return buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Orc Warrior",
+						creatureId: orcWarrior.id,
+					}),
+				],
+			});
+		}
+
+		it("shows PF2e tier label", async () => {
+			const { result: editionResult } = renderHook(() => useRulesEdition());
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				renderPanel({
+					encounter: pf2eEncounter(),
+					playerCharacters: [
+						{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+					],
+					creatures: new Map([[orcWarrior.id, orcWarrior]]),
+				});
+
+				await waitFor(() => {
+					expect(
+						screen.getByText("Encounter Difficulty:", { exact: false }),
+					).toBeInTheDocument();
+				});
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+
+		it("shows party level", async () => {
+			const { result: editionResult } = renderHook(() => useRulesEdition());
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				renderPanel({
+					encounter: pf2eEncounter(),
+					playerCharacters: [
+						{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+					],
+					creatures: new Map([[orcWarrior.id, orcWarrior]]),
+				});
+
+				await waitFor(() => {
+					expect(
+						screen.getByText("Party Level: 5", { exact: false }),
+					).toBeInTheDocument();
+				});
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+
+		it("shows creature level and level difference", async () => {
+			const { result: editionResult } = renderHook(() => useRulesEdition());
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				renderPanel({
+					encounter: pf2eEncounter(),
+					playerCharacters: [
+						{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+					],
+					creatures: new Map([[orcWarrior.id, orcWarrior]]),
+				});
+
+				await waitFor(() => {
+					// Orc Warrior level 3, party level 5 → diff −2
+					expect(
+						screen.getByText("Lv 3 (-2)", { exact: false }),
+					).toBeInTheDocument();
+				});
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+
+		it("shows 5 thresholds with short labels", async () => {
+			const { result: editionResult } = renderHook(() => useRulesEdition());
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				renderPanel({
+					encounter: pf2eEncounter(),
+					playerCharacters: [
+						{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+					],
+					creatures: new Map([[orcWarrior.id, orcWarrior]]),
+				});
+
+				await waitFor(() => {
+					expect(
+						screen.getByText("Triv:", { exact: false }),
+					).toBeInTheDocument();
+					expect(
+						screen.getByText("Low:", { exact: false }),
+					).toBeInTheDocument();
+					expect(
+						screen.getByText("Mod:", { exact: false }),
+					).toBeInTheDocument();
+					expect(
+						screen.getByText("Sev:", { exact: false }),
+					).toBeInTheDocument();
+					expect(
+						screen.getByText("Ext:", { exact: false }),
+					).toBeInTheDocument();
+				});
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+
+		it("shows Net Creature XP label in PF2e mode", async () => {
+			const { result: editionResult } = renderHook(() => useRulesEdition());
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				renderPanel({
+					encounter: pf2eEncounter(),
+					playerCharacters: [
+						{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+					],
+					creatures: new Map([[orcWarrior.id, orcWarrior]]),
+				});
+
+				await waitFor(() => {
+					expect(screen.getByText("Net Creature XP")).toBeInTheDocument();
+				});
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+	});
 });

apps/web/src/components/__tests__/difficulty-indicator.test.tsx

@@ -7,6 +7,7 @@ import {
 	DifficultyIndicator,
 	TIER_LABELS_5_5E,
 	TIER_LABELS_2014,
+	TIER_LABELS_PF2E,
 } from "../difficulty-indicator.js";
 
 afterEach(cleanup);
@@ -23,6 +24,7 @@ function makeResult(tier: DifficultyResult["tier"]): DifficultyResult {
 		encounterMultiplier: undefined,
 		adjustedXp: undefined,
 		partySizeAdjusted: undefined,
+		partyLevel: undefined,
 	};
 }
 
@@ -125,4 +127,64 @@ describe("DifficultyIndicator", () => {
 		const element = container.querySelector("[role='img']");
 		expect(element?.tagName).toBe("BUTTON");
 	});
+
+	it("renders 4 bars when barCount is 4", () => {
+		const { container } = render(
+			<DifficultyIndicator
+				result={makeResult(2)}
+				labels={TIER_LABELS_PF2E}
+				barCount={4}
+			/>,
+		);
+		const bars = container.querySelectorAll("[class*='rounded-sm']");
+		expect(bars).toHaveLength(4);
+	});
+
+	it("shows 0 filled bars for tier 0 with 4 bars", () => {
+		const { container } = render(
+			<DifficultyIndicator
+				result={makeResult(0)}
+				labels={TIER_LABELS_PF2E}
+				barCount={4}
+			/>,
+		);
+		const bars = container.querySelectorAll("[class*='rounded-sm']");
+		for (const bar of bars) {
+			expect(bar.className).toContain("bg-muted");
+		}
+	});
+
+	it("shows correct PF2e tooltip for Severe tier", () => {
+		render(
+			<DifficultyIndicator
+				result={makeResult(3)}
+				labels={TIER_LABELS_PF2E}
+				barCount={4}
+			/>,
+		);
+		expect(
+			screen.getByRole("img", { name: "Severe encounter difficulty" }),
+		).toBeDefined();
+	});
+
+	it("shows correct PF2e tooltip for Extreme tier", () => {
+		render(
+			<DifficultyIndicator
+				result={makeResult(4)}
+				labels={TIER_LABELS_PF2E}
+				barCount={4}
+			/>,
+		);
+		expect(
+			screen.getByRole("img", { name: "Extreme encounter difficulty" }),
+		).toBeDefined();
+	});
+
+	it("D&D indicator still renders 3 bars (no regression)", () => {
+		const { container } = render(
+			<DifficultyIndicator result={makeResult(3)} labels={TIER_LABELS_5_5E} />,
+		);
+		const bars = container.querySelectorAll("[class*='rounded-sm']");
+		expect(bars).toHaveLength(3);
+	});
 });

apps/web/src/components/difficulty-breakdown-panel.tsx

@@ -19,12 +19,21 @@ const TIER_LABEL_MAP: Partial<
 		1: { label: "Low", color: "text-green-500" },
 		2: { label: "Moderate", color: "text-yellow-500" },
 		3: { label: "High", color: "text-red-500" },
+		4: { label: "High", color: "text-red-500" },
 	},
 	"5e": {
 		0: { label: "Easy", color: "text-muted-foreground" },
 		1: { label: "Medium", color: "text-green-500" },
 		2: { label: "Hard", color: "text-yellow-500" },
 		3: { label: "Deadly", color: "text-red-500" },
+		4: { label: "Deadly", color: "text-red-500" },
+	},
+	pf2e: {
+		0: { label: "Trivial", color: "text-muted-foreground" },
+		1: { label: "Low", color: "text-green-500" },
+		2: { label: "Moderate", color: "text-yellow-500" },
+		3: { label: "Severe", color: "text-orange-500" },
+		4: { label: "Extreme", color: "text-red-500" },
 	},
 };
 
@@ -32,6 +41,9 @@ const TIER_LABEL_MAP: Partial<
 const SHORT_LABELS: Readonly<Record<string, string>> = {
 	Moderate: "Mod",
 	Medium: "Med",
+	Trivial: "Triv",
+	Severe: "Sev",
+	Extreme: "Ext",
 };
 
 function shortLabel(label: string): string {
@@ -107,6 +119,54 @@ function NpcRow({
 	);
 }
 
+function Pf2eNpcRow({
+	entry,
+	onToggleSide,
+}: {
+	entry: BreakdownCombatant;
+	onToggleSide: () => void;
+}) {
+	const isParty = entry.side === "party";
+	const targetSide = isParty ? "enemy" : "party";
+
+	let xpDisplay: string;
+	if (entry.xp == null) {
+		xpDisplay = "\u2014";
+	} else if (isParty) {
+		xpDisplay = `\u2212${formatXp(entry.xp)}`;
+	} else {
+		xpDisplay = formatXp(entry.xp);
+	}
+
+	let levelDisplay: string;
+	if (entry.creatureLevel === undefined) {
+		levelDisplay = "\u2014";
+	} else if (entry.levelDifference === undefined) {
+		levelDisplay = `Lv ${entry.creatureLevel}`;
+	} else {
+		const sign = entry.levelDifference >= 0 ? "+" : "";
+		levelDisplay = `Lv ${entry.creatureLevel} (${sign}${entry.levelDifference})`;
+	}
+
+	return (
+		<div className="col-span-4 grid grid-cols-subgrid items-center text-xs">
+			<span className="min-w-0 truncate" title={entry.combatant.name}>
+				{entry.combatant.name}
+			</span>
+			<Button
+				variant="ghost"
+				size="icon-sm"
+				onClick={onToggleSide}
+				aria-label={`Move ${entry.combatant.name} to ${targetSide} side`}
+			>
+				<ArrowLeftRight className="h-3 w-3" />
+			</Button>
+			<span className="text-muted-foreground">{levelDisplay}</span>
+			<span className="text-right tabular-nums">{xpDisplay}</span>
+		</div>
+	);
+}
+
 export function DifficultyBreakdownPanel({ onClose }: { onClose: () => void }) {
 	const ref = useRef<HTMLDivElement>(null);
 	useClickOutside(ref, onClose);
@@ -128,6 +188,8 @@ export function DifficultyBreakdownPanel({ onClose }: { onClose: () => void }) {
 	const isPC = (entry: BreakdownCombatant) =>
 		entry.combatant.playerCharacterId != null;
 
+	const CreatureRow = edition === "pf2e" ? Pf2eNpcRow : NpcRow;
+
 	return (
 		<div
 			ref={ref}
@@ -142,6 +204,9 @@ export function DifficultyBreakdownPanel({ onClose }: { onClose: () => void }) {
 				<div className="mb-1 text-muted-foreground text-xs">
 					Party Budget ({breakdown.pcCount}{" "}
 					{breakdown.pcCount === 1 ? "PC" : "PCs"})
+					{breakdown.partyLevel !== undefined && (
+						<> &middot; Party Level: {breakdown.partyLevel}</>
+					)}
 				</div>
 				<div className="flex gap-3 text-xs">
 					{breakdown.thresholds.map((t) => (
@@ -166,7 +231,7 @@ export function DifficultyBreakdownPanel({ onClose }: { onClose: () => void }) {
 						isPC(entry) ? (
 							<PcRow key={entry.combatant.id} entry={entry} />
 						) : (
-							<NpcRow
+							<CreatureRow
 								key={entry.combatant.id}
 								entry={entry}
 								onToggleSide={() => handleToggle(entry)}
@@ -186,7 +251,7 @@ export function DifficultyBreakdownPanel({ onClose }: { onClose: () => void }) {
 						isPC(entry) ? (
 							<PcRow key={entry.combatant.id} entry={entry} />
 						) : (
-							<NpcRow
+							<CreatureRow
 								key={entry.combatant.id}
 								entry={entry}
 								onToggleSide={() => handleToggle(entry)}
@@ -218,7 +283,9 @@ export function DifficultyBreakdownPanel({ onClose }: { onClose: () => void }) {
 				</div>
 			) : (
 				<div className="mt-2 flex justify-between border-border border-t pt-2 font-medium text-xs">
-					<span>Net Monster XP</span>
+					<span>
+						{edition === "pf2e" ? "Net Creature XP" : "Net Monster XP"}
+					</span>
 					<span className="tabular-nums">
 						{formatXp(breakdown.totalMonsterXp)}
 					</span>

apps/web/src/components/difficulty-indicator.tsx

@@ -6,6 +6,7 @@ export const TIER_LABELS_5_5E: Record<DifficultyTier, string> = {
 	1: "Low",
 	2: "Moderate",
 	3: "High",
+	4: "High",
 };
 
 export const TIER_LABELS_2014: Record<DifficultyTier, string> = {
@@ -13,30 +14,49 @@ export const TIER_LABELS_2014: Record<DifficultyTier, string> = {
 	1: "Medium",
 	2: "Hard",
 	3: "Deadly",
+	4: "Deadly",
 };
 
-const TIER_COLORS: Record<
-	DifficultyTier,
-	{ filledBars: number; color: string }
-> = {
-	0: { filledBars: 0, color: "" },
-	1: { filledBars: 1, color: "bg-green-500" },
-	2: { filledBars: 2, color: "bg-yellow-500" },
-	3: { filledBars: 3, color: "bg-red-500" },
+export const TIER_LABELS_PF2E: Record<DifficultyTier, string> = {
+	0: "Trivial",
+	1: "Low",
+	2: "Moderate",
+	3: "Severe",
+	4: "Extreme",
 };
 
-const BAR_HEIGHTS = ["h-2", "h-3", "h-4"] as const;
+const BAR_HEIGHTS_3 = ["h-2", "h-3", "h-4"] as const;
+const BAR_HEIGHTS_4 = ["h-1.5", "h-2", "h-3", "h-4"] as const;
+
+/** Color for the Nth filled bar (1-indexed) in 4-bar mode. */
+const BAR_COLORS: Record<number, string> = {
+	1: "bg-green-500",
+	2: "bg-yellow-500",
+	3: "bg-orange-500",
+	4: "bg-red-500",
+};
+
+/** For 3-bar mode, bar 3 uses red directly (skip orange). */
+const BAR_COLORS_3: Record<number, string> = {
+	1: "bg-green-500",
+	2: "bg-yellow-500",
+	3: "bg-red-500",
+};
 
 export function DifficultyIndicator({
 	result,
 	labels,
+	barCount = 3,
 	onClick,
 }: {
 	result: DifficultyResult;
 	labels: Record<DifficultyTier, string>;
+	barCount?: 3 | 4;
 	onClick?: () => void;
 }) {
-	const config = TIER_COLORS[result.tier];
+	const barHeights = barCount === 4 ? BAR_HEIGHTS_4 : BAR_HEIGHTS_3;
+	const colorMap = barCount === 4 ? BAR_COLORS : BAR_COLORS_3;
+	const filledBars = result.tier;
 	const label = labels[result.tier];
 	const tooltip = `${label} encounter difficulty`;
 
@@ -54,13 +74,13 @@ export function DifficultyIndicator({
 			onClick={onClick}
 			type={onClick ? "button" : undefined}
 		>
-			{BAR_HEIGHTS.map((height, i) => (
+			{barHeights.map((height, i) => (
 				<div
 					key={height}
 					className={cn(
 						"w-1 rounded-sm",
 						height,
-						i < config.filledBars ? config.color : "bg-muted",
+						i < filledBars ? colorMap[i + 1] : "bg-muted",
 					)}
 				/>
 			))}

apps/web/src/components/turn-navigation.tsx

@@ -8,6 +8,7 @@ import {
 	DifficultyIndicator,
 	TIER_LABELS_5_5E,
 	TIER_LABELS_2014,
+	TIER_LABELS_PF2E,
 } from "./difficulty-indicator.js";
 import { Button } from "./ui/button.js";
 import { ConfirmButton } from "./ui/confirm-button.js";
@@ -26,7 +27,13 @@ export function TurnNavigation() {
 
 	const difficulty = useDifficulty();
 	const { edition } = useRulesEditionContext();
-	const tierLabels = edition === "5e" ? TIER_LABELS_2014 : TIER_LABELS_5_5E;
+	const TIER_LABELS_BY_EDITION = {
+		pf2e: TIER_LABELS_PF2E,
+		"5e": TIER_LABELS_2014,
+		"5.5e": TIER_LABELS_5_5E,
+	} as const;
+	const tierLabels = TIER_LABELS_BY_EDITION[edition];
+	const barCount = edition === "pf2e" ? 4 : 3;
 	const [showBreakdown, setShowBreakdown] = useState(false);
 	const hasCombatants = encounter.combatants.length > 0;
 	const isAtStart = encounter.roundNumber === 1 && encounter.activeIndex === 0;
@@ -87,6 +94,7 @@ export function TurnNavigation() {
 						<DifficultyIndicator
 							result={difficulty}
 							labels={tierLabels}
+							barCount={barCount}
 							onClick={() => setShowBreakdown((prev) => !prev)}
 						/>
 						{showBreakdown ? (

apps/web/src/hooks/__tests__/use-difficulty-breakdown.test.tsx

@@ -1,5 +1,9 @@
 // @vitest-environment jsdom
-import type { Creature, CreatureId, PlayerCharacter } from "@initiative/domain";
+import type {
+	AnyCreature,
+	CreatureId,
+	PlayerCharacter,
+} from "@initiative/domain";
 import { combatantId, creatureId, playerCharacterId } from "@initiative/domain";
 import { renderHook, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
@@ -9,6 +13,7 @@ import {
 	buildCombatant,
 	buildCreature,
 	buildEncounter,
+	buildPf2eCreature,
 } from "../../__tests__/factories/index.js";
 import { AllProviders } from "../../__tests__/test-providers.js";
 import { useDifficultyBreakdown } from "../use-difficulty-breakdown.js";
@@ -42,7 +47,7 @@ const goblinCreature = buildCreature({
 function makeWrapper(options: {
 	encounter: ReturnType<typeof buildEncounter>;
 	playerCharacters?: PlayerCharacter[];
-	creatures?: Map<CreatureId, Creature>;
+	creatures?: Map<CreatureId, AnyCreature>;
 }) {
 	const adapters = createTestAdapters({
 		encounter: options.encounter,
@@ -345,4 +350,115 @@ describe("useDifficultyBreakdown", () => {
 			editionResult.current.setEdition("5.5e");
 		}
 	});
+
+	describe("PF2e edition", () => {
+		const orcWarrior = buildPf2eCreature({
+			id: creatureId("pf2e:orc-warrior"),
+			name: "Orc Warrior",
+			level: 3,
+			source: "crb",
+			sourceDisplayName: "Core Rulebook",
+		});
+
+		it("returns breakdown with creatureLevel, levelDifference, and XP for PF2e creatures", async () => {
+			const wrapper = makeWrapper({
+				encounter: buildEncounter({
+					combatants: [
+						buildCombatant({
+							id: combatantId("c-1"),
+							name: "Hero",
+							playerCharacterId: pcId1,
+						}),
+						buildCombatant({
+							id: combatantId("c-2"),
+							name: "Orc Warrior",
+							creatureId: orcWarrior.id,
+						}),
+					],
+				}),
+				playerCharacters: [
+					{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+				],
+				creatures: new Map([[orcWarrior.id, orcWarrior]]),
+			});
+
+			const { result: editionResult } = renderHook(() => useRulesEdition(), {
+				wrapper,
+			});
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				const { result } = renderHook(() => useDifficultyBreakdown(), {
+					wrapper,
+				});
+
+				await waitFor(() => {
+					const breakdown = result.current;
+					expect(breakdown).not.toBeNull();
+
+					// Party level should be 5
+					expect(breakdown?.partyLevel).toBe(5);
+
+					// Orc Warrior: level 3, party level 5 → diff −2 → 20 XP
+					const orc = breakdown?.enemyCombatants[0];
+					expect(orc?.creatureLevel).toBe(3);
+					expect(orc?.levelDifference).toBe(-2);
+					expect(orc?.xp).toBe(20);
+					expect(orc?.cr).toBeNull();
+					expect(orc?.source).toBe("Core Rulebook");
+
+					// PC should have no creature level
+					const pc = breakdown?.partyCombatants[0];
+					expect(pc?.creatureLevel).toBeUndefined();
+					expect(pc?.levelDifference).toBeUndefined();
+				});
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+
+		it("returns partyLevel in result", async () => {
+			const wrapper = makeWrapper({
+				encounter: buildEncounter({
+					combatants: [
+						buildCombatant({
+							id: combatantId("c-1"),
+							name: "Hero",
+							playerCharacterId: pcId1,
+						}),
+						buildCombatant({
+							id: combatantId("c-2"),
+							name: "Orc Warrior",
+							creatureId: orcWarrior.id,
+						}),
+					],
+				}),
+				playerCharacters: [
+					{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+				],
+				creatures: new Map([[orcWarrior.id, orcWarrior]]),
+			});
+
+			const { result: editionResult } = renderHook(() => useRulesEdition(), {
+				wrapper,
+			});
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				const { result } = renderHook(() => useDifficultyBreakdown(), {
+					wrapper,
+				});
+
+				await waitFor(() => {
+					expect(result.current).not.toBeNull();
+					expect(result.current?.partyLevel).toBe(5);
+					// 5 thresholds for PF2e
+					expect(result.current?.thresholds).toHaveLength(5);
+					expect(result.current?.thresholds[0].label).toBe("Trivial");
+				});
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+	});
 });

apps/web/src/hooks/__tests__/use-difficulty.test.tsx

@@ -1,5 +1,9 @@
 // @vitest-environment jsdom
-import type { Creature, CreatureId, PlayerCharacter } from "@initiative/domain";
+import type {
+	AnyCreature,
+	CreatureId,
+	PlayerCharacter,
+} from "@initiative/domain";
 import { combatantId, creatureId, playerCharacterId } from "@initiative/domain";
 import { renderHook, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
@@ -9,6 +13,7 @@ import {
 	buildCombatant,
 	buildCreature,
 	buildEncounter,
+	buildPf2eCreature,
 } from "../../__tests__/factories/index.js";
 import { AllProviders } from "../../__tests__/test-providers.js";
 import { useDifficulty } from "../use-difficulty.js";
@@ -43,7 +48,7 @@ const goblinCreature = buildCreature({
 function makeWrapper(options: {
 	encounter: ReturnType<typeof buildEncounter>;
 	playerCharacters?: PlayerCharacter[];
-	creatures?: Map<CreatureId, Creature>;
+	creatures?: Map<CreatureId, AnyCreature>;
 }) {
 	const adapters = createTestAdapters({
 		encounter: options.encounter,
@@ -424,4 +429,134 @@ describe("useDifficulty", () => {
 			expect(result.current?.totalMonsterXp).toBe(0);
 		});
 	});
+
+	describe("PF2e edition", () => {
+		const pf2eCreature = buildPf2eCreature({
+			id: creatureId("pf2e:orc-warrior"),
+			name: "Orc Warrior",
+			level: 5,
+		});
+
+		function makePf2eWrapper(options: {
+			encounter: ReturnType<typeof buildEncounter>;
+			playerCharacters?: PlayerCharacter[];
+			creatures?: Map<CreatureId, AnyCreature>;
+		}) {
+			const adapters = createTestAdapters({
+				encounter: options.encounter,
+				playerCharacters: options.playerCharacters ?? [],
+				creatures: options.creatures,
+			});
+			return ({ children }: { children: ReactNode }) => (
+				<AllProviders adapters={adapters}>{children}</AllProviders>
+			);
+		}
+
+		it("returns result for PF2e with leveled PCs and PF2e creatures", async () => {
+			const wrapper = makePf2eWrapper({
+				encounter: buildEncounter({
+					combatants: [
+						buildCombatant({
+							id: combatantId("c1"),
+							name: "Hero",
+							playerCharacterId: pcId1,
+						}),
+						buildCombatant({
+							id: combatantId("c2"),
+							name: "Orc Warrior",
+							creatureId: pf2eCreature.id,
+						}),
+					],
+				}),
+				playerCharacters: [
+					{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+				],
+				creatures: new Map([[pf2eCreature.id, pf2eCreature]]),
+			});
+
+			const { result: editionResult } = renderHook(() => useRulesEdition(), {
+				wrapper,
+			});
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+				await waitFor(() => {
+					expect(result.current).not.toBeNull();
+					// Creature level 5, party level 5 → diff 0 → 40 XP
+					expect(result.current?.totalMonsterXp).toBe(40);
+					expect(result.current?.partyLevel).toBe(5);
+				});
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+
+		it("returns null for PF2e when no PF2e creatures with level", () => {
+			const wrapper = makePf2eWrapper({
+				encounter: buildEncounter({
+					combatants: [
+						buildCombatant({
+							id: combatantId("c1"),
+							name: "Hero",
+							playerCharacterId: pcId1,
+						}),
+						buildCombatant({
+							id: combatantId("c2"),
+							name: "Custom Monster",
+						}),
+					],
+				}),
+				playerCharacters: [
+					{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+				],
+			});
+
+			const { result: editionResult } = renderHook(() => useRulesEdition(), {
+				wrapper,
+			});
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				const { result } = renderHook(() => useDifficulty(), { wrapper });
+				expect(result.current).toBeNull();
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+
+		it("returns null for PF2e when no PCs with level", () => {
+			const wrapper = makePf2eWrapper({
+				encounter: buildEncounter({
+					combatants: [
+						buildCombatant({
+							id: combatantId("c1"),
+							name: "Hero",
+							playerCharacterId: pcId1,
+						}),
+						buildCombatant({
+							id: combatantId("c2"),
+							name: "Orc Warrior",
+							creatureId: pf2eCreature.id,
+						}),
+					],
+				}),
+				playerCharacters: [{ id: pcId1, name: "Hero", ac: 15, maxHp: 30 }],
+				creatures: new Map([[pf2eCreature.id, pf2eCreature]]),
+			});
+
+			const { result: editionResult } = renderHook(() => useRulesEdition(), {
+				wrapper,
+			});
+			editionResult.current.setEdition("pf2e");
+
+			try {
+				const { result } = renderHook(() => useDifficulty(), { wrapper });
+				expect(result.current).toBeNull();
+			} finally {
+				editionResult.current.setEdition("5.5e");
+			}
+		});
+	});
 });

apps/web/src/hooks/use-difficulty-breakdown.ts

@@ -1,11 +1,17 @@
 import type {
+	AnyCreature,
 	Combatant,
 	CreatureId,
 	DifficultyThreshold,
 	DifficultyTier,
 	PlayerCharacter,
 } from "@initiative/domain";
-import { calculateEncounterDifficulty, crToXp } from "@initiative/domain";
+import {
+	calculateEncounterDifficulty,
+	crToXp,
+	derivePartyLevel,
+	pf2eCreatureXp,
+} from "@initiative/domain";
 import { useMemo } from "react";
 import { useBestiaryContext } from "../contexts/bestiary-context.js";
 import { useEncounterContext } from "../contexts/encounter-context.js";
@@ -21,6 +27,10 @@ export interface BreakdownCombatant {
 	readonly editable: boolean;
 	readonly side: "party" | "enemy";
 	readonly level: number | undefined;
+	/** PF2e only: the creature's level from bestiary data. */
+	readonly creatureLevel: number | undefined;
+	/** PF2e only: creature level minus party level. */
+	readonly levelDifference: number | undefined;
 }
 
 interface DifficultyBreakdown {
@@ -30,6 +40,7 @@ interface DifficultyBreakdown {
 	readonly encounterMultiplier: number | undefined;
 	readonly adjustedXp: number | undefined;
 	readonly partySizeAdjusted: boolean | undefined;
+	readonly partyLevel: number | undefined;
 	readonly pcCount: number;
 	readonly partyCombatants: readonly BreakdownCombatant[];
 	readonly enemyCombatants: readonly BreakdownCombatant[];
@@ -48,9 +59,16 @@ export function useDifficultyBreakdown(): DifficultyBreakdown | null {
 		const hasPartyLevel = descriptors.some(
 			(d) => d.side === "party" && d.level !== undefined,
 		);
-		const hasCr = descriptors.some((d) => d.cr !== undefined);
 
-		if (!hasPartyLevel || !hasCr) return null;
+		if (edition === "pf2e") {
+			const hasCreatureLevel = descriptors.some(
+				(d) => d.creatureLevel !== undefined,
+			);
+			if (!hasPartyLevel || !hasCreatureLevel) return null;
+		} else {
+			const hasCr = descriptors.some((d) => d.cr !== undefined);
+			if (!hasPartyLevel || !hasCr) return null;
+		}
 
 		const result = calculateEncounterDifficulty(descriptors, edition);
 
@@ -65,6 +83,7 @@ export function useDifficultyBreakdown(): DifficultyBreakdown | null {
 
 type CreatureInfo = {
 	cr?: string;
+	creatureLevel?: number;
 	source: string;
 	sourceDisplayName: string;
 };
@@ -74,6 +93,7 @@ function buildBreakdownEntry(
 	side: "party" | "enemy",
 	level: number | undefined,
 	creature: CreatureInfo | undefined,
+	partyLevel: number | undefined,
 ): BreakdownCombatant {
 	if (c.playerCharacterId) {
 		return {
@@ -84,6 +104,29 @@ function buildBreakdownEntry(
 			editable: false,
 			side,
 			level,
+			creatureLevel: undefined,
+			levelDifference: undefined,
+		};
+	}
+	if (creature && creature.creatureLevel !== undefined) {
+		const levelDiff =
+			partyLevel === undefined
+				? undefined
+				: creature.creatureLevel - partyLevel;
+		const xp =
+			partyLevel === undefined
+				? null
+				: pf2eCreatureXp(creature.creatureLevel, partyLevel);
+		return {
+			combatant: c,
+			cr: null,
+			xp,
+			source: creature.sourceDisplayName ?? creature.source,
+			editable: false,
+			side,
+			level: undefined,
+			creatureLevel: creature.creatureLevel,
+			levelDifference: levelDiff,
 		};
 	}
 	if (creature) {
@@ -96,6 +139,8 @@ function buildBreakdownEntry(
 			editable: false,
 			side,
 			level: undefined,
+			creatureLevel: undefined,
+			levelDifference: undefined,
 		};
 	}
 	if (c.cr) {
@@ -107,6 +152,8 @@ function buildBreakdownEntry(
 			editable: true,
 			side,
 			level: undefined,
+			creatureLevel: undefined,
+			levelDifference: undefined,
 		};
 	}
 	return {
@@ -117,6 +164,8 @@ function buildBreakdownEntry(
 		editable: !c.creatureId,
 		side,
 		level: undefined,
+		creatureLevel: undefined,
+		levelDifference: undefined,
 	};
 }
 
@@ -128,41 +177,91 @@ function resolveLevel(
 	return characters.find((p) => p.id === c.playerCharacterId)?.level;
 }
 
-function resolveCr(
+function resolveCreatureInfo(
 	c: Combatant,
-	getCreature: (id: CreatureId) => CreatureInfo | undefined,
-): { cr: string | null; creature: CreatureInfo | undefined } {
-	const creature = c.creatureId ? getCreature(c.creatureId) : undefined;
-	const cr = creature?.cr ?? c.cr ?? null;
-	return { cr, creature };
+	getCreature: (id: CreatureId) => AnyCreature | undefined,
+): {
+	cr: string | null;
+	creatureLevel: number | undefined;
+	creature: CreatureInfo | undefined;
+} {
+	const rawCreature = c.creatureId ? getCreature(c.creatureId) : undefined;
+	if (!rawCreature) {
+		return {
+			cr: c.cr ?? null,
+			creatureLevel: undefined,
+			creature: undefined,
+		};
+	}
+	if ("system" in rawCreature && rawCreature.system === "pf2e") {
+		return {
+			cr: null,
+			creatureLevel: rawCreature.level,
+			creature: {
+				creatureLevel: rawCreature.level,
+				source: rawCreature.source,
+				sourceDisplayName: rawCreature.sourceDisplayName,
+			},
+		};
+	}
+	const cr = "cr" in rawCreature ? rawCreature.cr : undefined;
+	return {
+		cr: cr ?? c.cr ?? null,
+		creatureLevel: undefined,
+		creature: {
+			cr,
+			source: rawCreature.source,
+			sourceDisplayName: rawCreature.sourceDisplayName,
+		},
+	};
+}
+
+function collectPartyLevel(
+	combatants: readonly Combatant[],
+	characters: readonly PlayerCharacter[],
+): number | undefined {
+	const partyLevels: number[] = [];
+	for (const c of combatants) {
+		if (resolveSide(c) !== "party") continue;
+		const level = resolveLevel(c, characters);
+		if (level !== undefined) partyLevels.push(level);
+	}
+	return partyLevels.length > 0 ? derivePartyLevel(partyLevels) : undefined;
 }
 
 function classifyCombatants(
 	combatants: readonly Combatant[],
 	characters: readonly PlayerCharacter[],
-	getCreature: (id: CreatureId) => CreatureInfo | undefined,
+	getCreature: (id: CreatureId) => AnyCreature | undefined,
 ) {
 	const partyCombatants: BreakdownCombatant[] = [];
 	const enemyCombatants: BreakdownCombatant[] = [];
 	const descriptors: {
 		level?: number;
 		cr?: string;
+		creatureLevel?: number;
 		side: "party" | "enemy";
 	}[] = [];
 	let pcCount = 0;
+	const partyLevel = collectPartyLevel(combatants, characters);
 
 	for (const c of combatants) {
 		const side = resolveSide(c);
 		const level = resolveLevel(c, characters);
 		if (level !== undefined) pcCount++;
 
-		const { cr, creature } = resolveCr(c, getCreature);
+		const { cr, creatureLevel, creature } = resolveCreatureInfo(c, getCreature);
 
-		if (level !== undefined || cr != null) {
-			descriptors.push({ level, cr: cr ?? undefined, side });
+		if (level !== undefined || cr != null || creatureLevel !== undefined) {
+			descriptors.push({
+				level,
+				cr: cr ?? undefined,
+				creatureLevel,
+				side,
+			});
 		}
 
-		const entry = buildBreakdownEntry(c, side, level, creature);
+		const entry = buildBreakdownEntry(c, side, level, creature, partyLevel);
 		const target = side === "party" ? partyCombatants : enemyCombatants;
 		target.push(entry);
 	}

apps/web/src/hooks/use-difficulty.ts

@@ -33,9 +33,17 @@ function buildDescriptors(
 		const creatureCr =
 			creature && !("system" in creature) ? creature.cr : undefined;
 		const cr = creatureCr ?? c.cr ?? undefined;
+		const creatureLevel =
+			creature && "system" in creature && creature.system === "pf2e"
+				? creature.level
+				: undefined;
 
-		if (level !== undefined || cr !== undefined) {
-			descriptors.push({ level, cr, side });
+		if (
+			level !== undefined ||
+			cr !== undefined ||
+			creatureLevel !== undefined
+		) {
+			descriptors.push({ level, cr, creatureLevel, side });
 		}
 	}
 	return descriptors;
@@ -48,8 +56,6 @@ export function useDifficulty(): DifficultyResult | null {
 	const { edition } = useRulesEditionContext();
 
 	return useMemo(() => {
-		if (edition === "pf2e") return null;
-
 		const descriptors = buildDescriptors(
 			encounter.combatants,
 			characters,
@@ -59,9 +65,16 @@ export function useDifficulty(): DifficultyResult | null {
 		const hasPartyLevel = descriptors.some(
 			(d) => d.side === "party" && d.level !== undefined,
 		);
-		const hasCr = descriptors.some((d) => d.cr !== undefined);
 
-		if (!hasPartyLevel || !hasCr) return null;
+		if (edition === "pf2e") {
+			const hasCreatureLevel = descriptors.some(
+				(d) => d.creatureLevel !== undefined,
+			);
+			if (!hasPartyLevel || !hasCreatureLevel) return null;
+		} else {
+			const hasCr = descriptors.some((d) => d.cr !== undefined);
+			if (!hasPartyLevel || !hasCr) return null;
+		}
 
 		return calculateEncounterDifficulty(descriptors, edition);
 	}, [encounter.combatants, characters, getCreature, edition]);