Implement the 021-bestiary-statblock feature that adds a searchable D&D 2024 Monster Manual creature library with inline autocomplete suggestions, full stat block display in a fixed side panel, auto-numbering of duplicate creature names, HP/AC pre-fill from bestiary data, and automatic stat block display on turn change for wide viewports

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -15,6 +15,7 @@ import {
 import type {
 	CombatantId,
 	ConditionId,
+	Creature,
 	DomainEvent,
 	Encounter,
 } from "@initiative/domain";
@@ -22,6 +23,7 @@ import {
 	combatantId,
 	createEncounter,
 	isDomainError,
+	resolveCreatureName,
 } from "@initiative/domain";
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
@@ -74,7 +76,10 @@ export function useEncounter() {
 	const makeStore = useCallback((): EncounterStore => {
 		return {
 			get: () => encounterRef.current,
-			save: (e) => setEncounter(e),
+			save: (e) => {
+				encounterRef.current = e;
+				setEncounter(e);
+			},
 		};
 	}, []);
 
@@ -218,6 +223,57 @@ export function useEncounter() {
 		[makeStore],
 	);
 
+	const addFromBestiary = useCallback(
+		(creature: Creature) => {
+			const store = makeStore();
+			const existingNames = store.get().combatants.map((c) => c.name);
+			const { newName, renames } = resolveCreatureName(
+				creature.name,
+				existingNames,
+			);
+
+			// Apply renames (e.g., "Goblin" → "Goblin 1")
+			for (const { from, to } of renames) {
+				const target = store.get().combatants.find((c) => c.name === from);
+				if (target) {
+					editCombatantUseCase(makeStore(), target.id, to);
+				}
+			}
+
+			// Add combatant with resolved name
+			const id = combatantId(`c-${++nextId.current}`);
+			const addResult = addCombatantUseCase(makeStore(), id, newName);
+			if (isDomainError(addResult)) return;
+
+			// Set HP
+			const hpResult = setHpUseCase(makeStore(), id, creature.hp.average);
+			if (!isDomainError(hpResult)) {
+				setEvents((prev) => [...prev, ...hpResult]);
+			}
+
+			// Set AC
+			if (creature.ac > 0) {
+				const acResult = setAcUseCase(makeStore(), id, creature.ac);
+				if (!isDomainError(acResult)) {
+					setEvents((prev) => [...prev, ...acResult]);
+				}
+			}
+
+			// Set creatureId on the combatant
+			const currentEncounter = store.get();
+			const updated = {
+				...currentEncounter,
+				combatants: currentEncounter.combatants.map((c) =>
+					c.id === id ? { ...c, creatureId: creature.id } : c,
+				),
+			};
+			setEncounter(updated);
+
+			setEvents((prev) => [...prev, ...addResult]);
+		},
+		[makeStore, editCombatant],
+	);
+
 	return {
 		encounter,
 		events,
@@ -232,5 +288,6 @@ export function useEncounter() {
 		setAc,
 		toggleCondition,
 		toggleConcentration,
+		addFromBestiary,
 	} as const;
 }