Add PF2e weak/elite creature adjustments with stat block toggle

Weak/Normal/Elite toggle in PF2e stat block header applies standard
adjustments (level, AC, HP, saves, Perception, attacks, damage) to
individual combatants. Adjusted stats are highlighted blue (elite) or
red (weak). Persisted via creatureAdjustment field on Combatant.

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

apps/web/src/components/combatant-row.tsx

@@ -455,14 +455,20 @@ export function CombatantRow({
 		decrementCondition,
 		toggleConcentration,
 	} = useEncounterContext();
-	const { selectedCreatureId, showCreature, toggleCollapse } =
-		useSidePanelContext();
+	const {
+		selectedCreatureId,
+		selectedCombatantId,
+		showCreature,
+		toggleCollapse,
+	} = useSidePanelContext();
 	const { handleRollInitiative } = useInitiativeRollsContext();
 	const { edition } = useRulesEditionContext();
 	const isPf2e = edition === "pf2e";
 
 	// Derive what was previously conditional props
-	const isStatBlockOpen = combatant.creatureId === selectedCreatureId;
+	const isStatBlockOpen =
+		combatant.creatureId === selectedCreatureId &&
+		combatant.id === selectedCombatantId;
 	const { creatureId } = combatant;
 	const hasStatBlock = !!creatureId;
 	const onToggleStatBlock = hasStatBlock
@@ -470,7 +476,7 @@ export function CombatantRow({
 				if (isStatBlockOpen) {
 					toggleCollapse();
 				} else {
-					showCreature(creatureId);
+					showCreature(creatureId, combatant.id);
 				}
 			}
 		: undefined;

apps/web/src/components/pf2e-stat-block.tsx

@@ -1,10 +1,13 @@
 import type {
+	CombatantId,
 	EquipmentItem,
 	Pf2eCreature,
 	SpellReference,
 } from "@initiative/domain";
 import { formatInitiativeModifier, recallKnowledge } from "@initiative/domain";
+import { ChevronDown, ChevronUp } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
+import { cn } from "../lib/utils.js";
 import { EquipmentDetailPopover } from "./equipment-detail-popover.js";
 import { SpellDetailPopover } from "./spell-detail-popover.js";
 import {
@@ -15,6 +18,14 @@ import {
 
 interface Pf2eStatBlockProps {
 	creature: Pf2eCreature;
+	adjustment?: "weak" | "elite";
+	combatantId?: CombatantId;
+	baseCreature?: Pf2eCreature;
+	onSetAdjustment?: (
+		id: CombatantId,
+		adj: "weak" | "elite" | undefined,
+		base: Pf2eCreature,
+	) => void;
 }
 
 const ALIGNMENTS = new Set([
@@ -41,6 +52,13 @@ function formatMod(mod: number): string {
 	return mod >= 0 ? `+${mod}` : `${mod}`;
 }
 
+/** Returns the text color class for stats affected by weak/elite adjustment. */
+function adjustmentColor(adjustment: "weak" | "elite" | undefined): string {
+	if (adjustment === "elite") return "text-blue-400";
+	if (adjustment === "weak") return "text-red-400";
+	return "";
+}
+
 interface SpellLinkProps {
 	readonly spell: SpellReference;
 	readonly onOpen: (spell: SpellReference, rect: DOMRect) => void;
@@ -136,7 +154,13 @@ function EquipmentLink({ item, onOpen }: Readonly<EquipmentLinkProps>) {
 	);
 }
 
-export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
+export function Pf2eStatBlock({
+	creature,
+	adjustment,
+	combatantId,
+	baseCreature,
+	onSetAdjustment,
+}: Readonly<Pf2eStatBlockProps>) {
 	const [openSpell, setOpenSpell] = useState<{
 		spell: SpellReference;
 		rect: DOMRect;
@@ -157,6 +181,7 @@ export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
 	const handleCloseEquipment = useCallback(() => setOpenEquipment(null), []);
 
 	const rk = recallKnowledge(creature.level, creature.traits);
+	const adjColor = adjustmentColor(adjustment);
 
 	const abilityEntries = [
 		{ label: "Str", mod: creature.abilityMods.str },
@@ -172,13 +197,46 @@ export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
 			{/* Header */}
 			<div>
 				<div className="flex items-baseline justify-between gap-2">
-					<h2 className="font-bold text-stat-heading text-xl">
+					<h2 className="flex items-center gap-1.5 font-bold text-stat-heading text-xl">
+						{adjustment === "elite" && (
+							<ChevronUp className="h-5 w-5 shrink-0 text-blue-400" />
+						)}
+						{adjustment === "weak" && (
+							<ChevronDown className="h-5 w-5 shrink-0 text-red-400" />
+						)}
 						{creature.name}
 					</h2>
-					<span className="shrink-0 font-semibold text-sm">
+					<span className={cn("shrink-0 font-semibold text-sm", adjColor)}>
 						Level {creature.level}
 					</span>
 				</div>
+				{combatantId != null &&
+					onSetAdjustment != null &&
+					baseCreature != null && (
+						<div className="mt-1 flex gap-1">
+							{(["weak", "normal", "elite"] as const).map((opt) => {
+								const value = opt === "normal" ? undefined : opt;
+								const isActive = adjustment === value;
+								return (
+									<button
+										key={opt}
+										type="button"
+										className={cn(
+											"rounded px-2 py-0.5 font-medium text-xs capitalize",
+											isActive
+												? "bg-accent text-primary-foreground"
+												: "bg-card text-muted-foreground hover:bg-accent/30",
+										)}
+										onClick={() =>
+											onSetAdjustment(combatantId, value, baseCreature)
+										}
+									>
+										{opt}
+									</button>
+								);
+							})}
+						</div>
+					)}
 				<div className="mt-1 flex flex-wrap gap-1">
 					{displayTraits(creature.traits).map((trait) => (
 						<span
@@ -204,7 +262,7 @@ export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
 
 			{/* Perception, Languages, Skills */}
 			<div className="space-y-0.5 text-sm">
-				<div>
+				<div className={adjColor}>
 					<span className="font-semibold">Perception</span>{" "}
 					{formatInitiativeModifier(creature.perception)}
 					{creature.senses || creature.perceptionDetails
@@ -236,7 +294,7 @@ export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
 
 			{/* Defenses */}
 			<div className="space-y-0.5 text-sm">
-				<div>
+				<div className={adjColor}>
 					<span className="font-semibold">AC</span> {creature.ac}
 					{creature.acConditional ? ` (${creature.acConditional})` : ""};{" "}
 					<span className="font-semibold">Fort</span>{" "}
@@ -247,7 +305,7 @@ export function Pf2eStatBlock({ creature }: Readonly<Pf2eStatBlockProps>) {
 					{formatMod(creature.saveWill)}
 					{creature.saveConditional ? `; ${creature.saveConditional}` : ""}
 				</div>
-				<div>
+				<div className={adjColor}>
 					<span className="font-semibold">HP</span> {creature.hp}
 					{creature.hpDetails ? ` (${creature.hpDetails})` : ""}
 				</div>

apps/web/src/components/stat-block-panel.tsx

@@ -1,8 +1,17 @@
-import type { Creature, CreatureId } from "@initiative/domain";
+import type {
+	AnyCreature,
+	Combatant,
+	CombatantId,
+	Creature,
+	CreatureId,
+	Pf2eCreature,
+} from "@initiative/domain";
+import { applyPf2eAdjustment } from "@initiative/domain";
 import { PanelRightClose, Pin, PinOff } from "lucide-react";
 import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { useBestiaryContext } from "../contexts/bestiary-context.js";
+import { useEncounterContext } from "../contexts/encounter-context.js";
 import { useSidePanelContext } from "../contexts/side-panel-context.js";
 import { useSwipeToDismiss } from "../hooks/use-swipe-to-dismiss.js";
 import { cn } from "../lib/utils.js";
@@ -216,6 +225,7 @@ function MobileDrawer({
 function usePanelRole(panelRole: "browse" | "pinned") {
 	const sidePanel = useSidePanelContext();
 	const { getCreature } = useBestiaryContext();
+	const { encounter, setCreatureAdjustment } = useEncounterContext();
 
 	const creatureId =
 		panelRole === "browse"
@@ -223,10 +233,18 @@ function usePanelRole(panelRole: "browse" | "pinned") {
 			: sidePanel.pinnedCreatureId;
 	const creature = creatureId ? (getCreature(creatureId) ?? null) : null;
 
+	const combatantId =
+		panelRole === "browse" ? sidePanel.selectedCombatantId : null;
+	const combatant = combatantId
+		? (encounter.combatants.find((c) => c.id === combatantId) ?? null)
+		: null;
+
 	const isBrowse = panelRole === "browse";
 	return {
 		creatureId,
 		creature,
+		combatant,
+		setCreatureAdjustment,
 		isCollapsed: isBrowse ? sidePanel.isRightPanelCollapsed : false,
 		onToggleCollapse: isBrowse ? sidePanel.toggleCollapse : () => {},
 		onDismiss: isBrowse ? sidePanel.dismissPanel : () => {},
@@ -238,6 +256,33 @@ function usePanelRole(panelRole: "browse" | "pinned") {
 	};
 }
 
+function renderStatBlock(
+	creature: AnyCreature,
+	combatant: Combatant | null,
+	setCreatureAdjustment: (
+		id: CombatantId,
+		adj: "weak" | "elite" | undefined,
+		base: Pf2eCreature,
+	) => void,
+) {
+	if ("system" in creature && creature.system === "pf2e") {
+		const baseCreature = creature;
+		const adjusted = combatant?.creatureAdjustment
+			? applyPf2eAdjustment(baseCreature, combatant.creatureAdjustment)
+			: baseCreature;
+		return (
+			<Pf2eStatBlock
+				creature={adjusted}
+				adjustment={combatant?.creatureAdjustment}
+				combatantId={combatant?.id}
+				baseCreature={baseCreature}
+				onSetAdjustment={setCreatureAdjustment}
+			/>
+		);
+	}
+	return <DndStatBlock creature={creature as Creature} />;
+}
+
 export function StatBlockPanel({
 	panelRole,
 	side,
@@ -245,6 +290,8 @@ export function StatBlockPanel({
 	const {
 		creatureId,
 		creature,
+		combatant,
+		setCreatureAdjustment,
 		isCollapsed,
 		onToggleCollapse,
 		onDismiss,
@@ -316,10 +363,7 @@ export function StatBlockPanel({
 		}
 
 		if (creature) {
-			if ("system" in creature && creature.system === "pf2e") {
-				return <Pf2eStatBlock creature={creature} />;
-			}
-			return <DndStatBlock creature={creature as Creature} />;
+			return renderStatBlock(creature, combatant, setCreatureAdjustment);
 		}
 
 		if (needsFetch && sourceCode) {