Add force, void, spirit, vitality, and piercing persistent damage types

Expands persistent damage from 7 to 12 types to cover all PF2e damage
types that have verified persistent damage sources in published content.

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

.claude/skills/commit/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: commit
+description: Create a git commit with pre-commit hooks (bypasses sandbox restrictions).
+allowed-tools: Bash(git *), Bash(pnpm *)
+---
+
+## Instructions
+
+Create a git commit for the current staged and/or unstaged changes.
+
+### Step 1 — Assess changes
+
+Run these in parallel:
+
+```bash
+git status
+```
+
+```bash
+git diff
+```
+
+```bash
+git log --oneline -5
+```
+
+### Step 2 — Draft commit message
+
+- Summarize the nature of the changes (new feature, enhancement, bug fix, refactor, test, docs, etc.)
+- Keep the first line concise (under 72 chars), use imperative mood
+- Add a blank line and a short body if the "why" isn't obvious from the first line
+- Match the style of recent commits in the log
+- Do not commit files that likely contain secrets (.env, credentials, etc.)
+
+### Step 3 — Stage and commit
+
+Stage relevant files by name (avoid `git add -A` or `git add .`). Then commit.
+
+**CRITICAL:** Always use `dangerouslyDisableSandbox: true` for the commit command. Lefthook pre-commit hooks spawn subprocesses (biome, oxlint, vitest, etc.) that require filesystem access beyond what the sandbox allows. They will always fail with "operation not permitted" in sandbox mode.
+
+Append the co-author trailer:
+
+```
+Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+```
+
+Use a HEREDOC for the commit message:
+
+```bash
+git commit -m "$(cat <<'EOF'
+<first line>
+
+<optional body>
+
+Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+### Step 4 — Verify
+
+Run `git status` after the commit to confirm success.
+
+### If the commit fails
+
+If a pre-commit hook fails, fix the issue, re-stage, and create a **new** commit. Never amend unless explicitly asked — amending after a hook failure would modify the previous commit.
+
+## User arguments
+
+```text
+$ARGUMENTS
+```
+
+If the user provided arguments, treat them as the commit message or guidance for what to commit.

.claude/skills/ship/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: ship
+description: Commit, tag with the next version, and push to remote.
+disable-model-invocation: true
+allowed-tools: Bash(git *), Bash(pnpm *), Skill
+---
+
+## Instructions
+
+Commit current changes, create the next version tag, and push everything to remote.
+
+### Step 1 — Commit
+
+Use the `/commit` skill to stage and commit changes. Pass along any user arguments as the commit message.
+
+```
+/commit $ARGUMENTS
+```
+
+### Step 2 — Tag
+
+Get the latest tag and increment the patch number (e.g., `0.9.27` → `0.9.28`). Create the tag:
+
+```bash
+git tag --sort=-v:refname | head -1
+```
+
+```bash
+git tag <next-version>
+```
+
+### Step 3 — Push
+
+Push the commit and tag to remote:
+
+```bash
+git push && git push --tags
+```
+
+### Step 4 — Verify
+
+Confirm the tag exists on the pushed commit:
+
+```bash
+git log --oneline -1 --decorate
+```
+
+## User arguments
+
+```text
+$ARGUMENTS
+```
+
+If the user provided arguments, treat them as the commit message or guidance for what to commit.

.gitignore

@@ -12,4 +12,6 @@ Thumbs.db
 coverage/
 *.tsbuildinfo
 docs/agents/plans/
+docs/agents/research/
+.agent-tests/
 .rodney/

.specify/memory/constitution.md

@@ -1,9 +1,9 @@
 <!--
   Sync Impact Report
   ───────────────────
-  Version change: 3.0.0 → 3.1.0 (MINOR — new principle II-A: context-based state flow)
+  Version change: 3.1.0 → 3.2.0 (MINOR — artifact lifecycle guidance)
   Modified sections:
-    - Core Principles: added II-A. Context-Based State Flow (max 8 props, context over prop drilling)
+    - Development Workflow: added artifact lifecycle rules (spec.md living, plan/tasks bounded, tests authoritative)
   Templates requiring updates: none
 -->
 # Encounter Console Constitution
@@ -113,6 +113,18 @@ architecture, and quality — not product behavior.
   (which creates a feature branch for the full speckit pipeline);
   changes to existing features update the existing spec via
   `/integrate-issue`.
+- **Artifact lifecycles differ by type**:
+  - `spec.md` is a **living capability document** — it describes what
+    the feature does and is updated whenever the feature meaningfully
+    changes. It survives across multiple rounds of work.
+  - `plan.md` and `tasks.md` are **bounded work packages** — they
+    describe what to do for a specific increment of work. After
+    completion they become historical records. The next round of work
+    on the same feature gets a new plan, not an update to the old one.
+  - Tests are the **executable ground truth**. When a spec's
+    acceptance criteria and the tests disagree, the tests are
+    authoritative. Spec prose captures intent and context; tests
+    capture actual behavior.
 - The full pipeline (spec → plan → tasks → implement) applies to new
   features and significant additions. Bug fixes, tooling changes,
   and trivial UI adjustments do not require specs.
@@ -156,4 +168,4 @@ MUST comply with its principles.
 **Compliance review**: Every spec and plan MUST include a
 Constitution Check section validating adherence to all principles.
 
-**Version**: 3.1.0 | **Ratified**: 2026-03-03 | **Last Amended**: 2026-03-19
+**Version**: 3.2.0 | **Ratified**: 2026-03-03 | **Last Amended**: 2026-03-30

CLAUDE.md

@@ -1,6 +1,6 @@
 # CLAUDE.md
 
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+**Initiative** is a browser-based combat encounter tracker for tabletop RPGs (D&D 5.5e, Pathfinder 2e). It runs entirely client-side — no backend, no accounts — with localStorage and IndexedDB for persistence.
 
 ## Commands
 
@@ -66,16 +66,65 @@ docs/agents/               RPI skill artifacts (research reports, plans)
 ## Conventions
 
 - **Biome 2.4** for formatting and linting (no Prettier, no ESLint). Tab indentation, 80-char lines. Imports are auto-organized alphabetically.
-- **oxlint** for type-aware linting that Biome can't do (unnecessary type assertions, deprecated APIs, `replaceAll` preference, `String.raw`). Configured in `.oxlintrc.json`.
+- **oxlint** for type-aware linting that Biome can't do. Configured in `.oxlintrc.json`.
-- **TypeScript strict mode** with `verbatimModuleSyntax`. Use `.js` extensions in relative imports when required by the repo's ESM settings (e.g., `./types.js`).
+- **TypeScript strict mode** with `verbatimModuleSyntax`. Use `.js` extensions in relative imports.
 - **Branded types** for identity values (e.g., `CombatantId`). Prefer immutability/`readonly` where practical.
+- **Reuse UI primitives** — before creating custom interactive elements (buttons, inputs, selects, dialogs), check `apps/web/src/components/ui/` for existing components with established variants and hover styles.
 - **Domain events** are plain data objects with a `type` discriminant — no classes.
-- **Tests** live in `packages/*/src/__tests__/*.test.ts`. Test pure functions directly; map acceptance scenarios and invariants from specs to individual `it()` blocks.
+- **Tests** live in `__tests__/` directories adjacent to source. See the Testing section below for conventions on mocking, assertions, and per-layer approach.
-- **Feature specs** live in `specs/NNN-feature-name/` with spec.md (and optionally plan.md, tasks.md for new work). Specs describe features, not individual changes. The project constitution is at `.specify/memory/constitution.md`.
-- **Component props** — max 8 explicitly declared props per component interface (enforced by `scripts/check-component-props.mjs` using the TypeScript compiler API). Use React context for shared state; reserve props for per-instance config (data items, layout variants, refs).
-- **Export format compatibility** — When changing `Encounter`, `Combatant`, `PlayerCharacter`, or `UndoRedoState` types, verify that previously exported JSON files (version 1) still import correctly. If not, bump the `ExportBundle` version and add migration logic in `validateImportBundle()`.
 - **Quality gates** are enforced at pre-commit via Lefthook (parallel jobs). No gate may exist only as a CI step or manual process.
 
+For component prop rules, export format compatibility, and ADRs, see [`docs/conventions.md`](docs/conventions.md).
+
+## Testing
+
+### Philosophy
+
+Test **user-visible behavior**, not implementation details. A good test answers "does this feature work?" not "does this internal function get called?"
+
+### Adapter Injection
+
+Adapters (storage, cache, browser APIs) are provided via `AdapterContext`. Production wires real implementations; tests wire in-memory implementations. This means:
+- No `vi.mock()` for adapter or persistence modules
+- Tests control adapter behavior by configuring the in-memory implementation
+- Type changes in adapter interfaces are caught at compile time
+
+### Per-Layer Approach
+
+| Layer | How to test |
+|---|---|
+| Domain (`packages/domain`) | Pure unit tests, no mocks, test invariants and acceptance scenarios |
+| Application (`packages/application`) | Mock port interfaces only, use real domain logic |
+| Hooks (context-wrapped) | Test via `renderHook` with `AllProviders` wrapping in-memory adapters |
+| Hooks (component-specific) | Test through the component that uses them |
+| Components | Render with `AllProviders`, use in-memory adapters, use `userEvent` for interactions |
+
+### Test Data
+
+Use factory functions from `apps/web/src/__tests__/factories/` to construct domain objects. Each factory provides sensible defaults overridden via `Partial<T>`:
+
+```typescript
+import { buildEncounter } from "../../__tests__/factories/build-encounter.js";
+import { buildCombatant } from "../../__tests__/factories/build-combatant.js";
+
+const encounter = buildEncounter({
+  combatants: [buildCombatant({ name: "Goblin" })],
+  activeIndex: 0,
+  roundNumber: 1,
+});
+```
+
+Add new factory files as needed (one per domain type). Don't inline test data construction — use factories so type changes are caught at compile time.
+
+### Anti-Patterns
+
+- **`vi.mock()` for adapters**: Use in-memory adapter implementations via `AdapterContext` instead
+- **Mocking contexts**: Use `AllProviders` and drive state through real hooks instead of `vi.mock("../../contexts/...")`. Exception: context mocks are acceptable when the component under test requires specific state machine states that cannot be reached through adapter configuration alone — document the reason in a comment at the top of the test file.
+- **Stubbing child components**: Render real children; stub only if the child has heavy I/O that can't be mocked at the adapter level
+- **Asserting mock call counts**: Prefer asserting what the user sees (`screen.getByText(...)`) over `expect(mockFn).toHaveBeenCalledWith(...)`
+- **Testing internal state**: Don't assert `result.current.suggestionIndex === 0`; assert the first suggestion is highlighted
+- **Assertion-free tests**: Every `it()` block must contain at least one `expect()`. Tests that render without asserting inflate coverage without catching bugs.
+
 ## Self-Review Checklist
 
 Before finishing a change, consider:
@@ -86,21 +135,7 @@ Before finishing a change, consider:
 
 ## Speckit Workflow
 
-Speckit (`/speckit.*` skills) manages the spec-driven development pipeline. Specs are **living documents** that describe features, not individual changes.
+Specs are **living documents** in `specs/NNN-feature-name/` that describe features, not individual changes. Use `/speckit.*` and RPI skills (`rpi-research`, `rpi-plan`, `rpi-implement`) to manage them — skill descriptions have full usage details.
-
-### Issue-driven workflow
-- `/write-issue` — create a well-structured Gitea issue via interactive interview
-- `/integrate-issue <number>` — fetch an issue, route it to the right spec, and update the spec with the new/changed requirements. Then implement directly.
-- `/sync-issue <number>` — push acceptance criteria from the spec back to the Gitea issue
-
-### RPI skills (Research → Plan → Implement)
-- `rpi-research` — deep codebase research producing a written report in `docs/agents/research/`
-- `rpi-plan` — interactive phased implementation plan in `docs/agents/plans/`
-- `rpi-implement` — execute a plan file phase by phase with automated + manual verification
-
-**Research scope**: Research should include a scan for existing patterns similar to what the feature needs (e.g., shared UI primitives, duplicated validation logic, repeated state management patterns). Identify extraction and consolidation opportunities before implementation, not during.
-
-### Choosing the right workflow by scope
 
 | Scope | Workflow |
 |---|---|
@@ -109,24 +144,8 @@ Speckit (`/speckit.*` skills) manages the spec-driven development pipeline. Spec
 | Larger addition to existing feature | `/integrate-issue` → `rpi-research` → `rpi-plan` → `rpi-implement` |
 | New feature | `/speckit.specify` → `/speckit.clarify` → `/speckit.plan` → `/speckit.tasks` → `/speckit.implement` |
 
-Speckit manages **what** to build (specs as living documents). RPI manages **how** to build it (research, planning, execution). The full speckit pipeline is for new features. For changes to existing features, update the spec via `/integrate-issue`, then use RPI skills if the change is non-trivial.
+**Research scope**: Always scan for existing patterns similar to what the feature needs. Identify extraction and consolidation opportunities before implementation, not during.
 
-### Current feature specs
+## Constitution
-- `specs/001-combatant-management/` — CRUD, persistence, clear, batch add, confirm buttons
-- `specs/002-turn-tracking/` — rounds, turn order, advance/retreat, top bar
-- `specs/003-combatant-state/` — HP, AC, conditions, concentration, initiative
-- `specs/004-bestiary/` — search index, stat blocks, source management, panel UX
-- `specs/005-player-characters/` — persistent player character templates (CRUD), search & add to encounters, color/icon visual distinction, `PlayerCharacterStore` port
-- `specs/006-undo-redo/` — undo/redo for encounter state mutations
-- `specs/007-json-import-export/` — JSON import/export for full encounter state (encounter, undo/redo, player characters)
-- `specs/008-encounter-difficulty/` — Live encounter difficulty indicator (5.5e XP budget system), optional PC level field
 
-## Constitution (key principles)
+Project principles governing all feature work are in [`.specify/memory/constitution.md`](.specify/memory/constitution.md). Key rules: deterministic domain core, strict layer boundaries, clarification before assumptions.
-
-The constitution (`.specify/memory/constitution.md`) governs all feature work:
-
-1. **Deterministic Domain Core** — Pure state transitions only; no I/O, randomness, or clocks in domain.
-2. **Layered Architecture** — Domain → Application → Adapters. Never skip layers or reverse dependencies.
-3. **Clarification-First** — Ask before making non-trivial assumptions.
-4. **MVP Baseline** — Say "MVP baseline does not include X", never permanent bans.
-5. **Spec-driven features** — Features are described in living specs; evolve existing specs via `/integrate-issue`, create new ones via `/speckit.specify`. Bug fixes and tooling changes do not require specs.

apps/web/package.json

@@ -29,6 +29,6 @@
 		"@vitejs/plugin-react": "^6.0.1",
 		"jsdom": "^29.0.1",
 		"tailwindcss": "^4.2.2",
-		"vite": "^8.0.1"
+		"vite": "^8.0.5"
 	}
 }

apps/web/src/__tests__/adapters/in-memory-adapters.ts

@@ -0,0 +1,122 @@
+import {
+	type AnyCreature,
+	type CreatureId,
+	EMPTY_UNDO_REDO_STATE,
+	type Encounter,
+	type PlayerCharacter,
+	type UndoRedoState,
+} from "@initiative/domain";
+import type { Adapters } from "../../contexts/adapter-context.js";
+
+export function createTestAdapters(options?: {
+	encounter?: Encounter | null;
+	undoRedoState?: UndoRedoState;
+	playerCharacters?: PlayerCharacter[];
+	creatures?: Map<CreatureId, AnyCreature>;
+	sources?: Map<
+		string,
+		{ displayName: string; creatures: AnyCreature[]; cachedAt: number }
+	>;
+}): Adapters {
+	let storedEncounter = options?.encounter ?? null;
+	let storedUndoRedo = options?.undoRedoState ?? EMPTY_UNDO_REDO_STATE;
+	let storedPCs = options?.playerCharacters ?? [];
+	const sourceStore =
+		options?.sources ??
+		new Map<
+			string,
+			{ displayName: string; creatures: AnyCreature[]; cachedAt: number }
+		>();
+
+	// Pre-populate sourceStore from creatures map if provided
+	if (options?.creatures && !options?.sources) {
+		// No-op: creatures are accessed directly from the map
+	}
+
+	const creatureMap = options?.creatures ?? new Map<CreatureId, AnyCreature>();
+
+	return {
+		encounterPersistence: {
+			load: () => storedEncounter,
+			save: (e) => {
+				storedEncounter = e;
+			},
+		},
+		undoRedoPersistence: {
+			load: () => storedUndoRedo,
+			save: (state) => {
+				storedUndoRedo = state;
+			},
+		},
+		playerCharacterPersistence: {
+			load: () => [...storedPCs],
+			save: (pcs) => {
+				storedPCs = pcs;
+			},
+		},
+		bestiaryCache: {
+			cacheSource(system, sourceCode, displayName, creatures) {
+				const key = `${system}:${sourceCode}`;
+				sourceStore.set(key, {
+					displayName,
+					creatures,
+					cachedAt: Date.now(),
+				});
+				for (const c of creatures) {
+					creatureMap.set(c.id, c);
+				}
+				return Promise.resolve();
+			},
+			isSourceCached(system, sourceCode) {
+				return Promise.resolve(sourceStore.has(`${system}:${sourceCode}`));
+			},
+			getCachedSources(system) {
+				return Promise.resolve(
+					[...sourceStore.entries()]
+						.filter(([key]) => !system || key.startsWith(`${system}:`))
+						.map(([key, info]) => ({
+							sourceCode: key.includes(":")
+								? key.slice(key.indexOf(":") + 1)
+								: key,
+							displayName: info.displayName,
+							creatureCount: info.creatures.length,
+							cachedAt: info.cachedAt,
+						})),
+				);
+			},
+			clearSource(system, sourceCode) {
+				sourceStore.delete(`${system}:${sourceCode}`);
+				return Promise.resolve();
+			},
+			clearAll() {
+				sourceStore.clear();
+				return Promise.resolve();
+			},
+			loadAllCachedCreatures() {
+				return Promise.resolve(new Map(creatureMap));
+			},
+		},
+		bestiaryIndex: {
+			loadIndex: () => ({ sources: {}, creatures: [] }),
+			getAllSourceCodes: () => [],
+			getDefaultFetchUrl: (sourceCode, baseUrl) => {
+				const filename = `bestiary-${sourceCode.toLowerCase()}.json`;
+				if (baseUrl !== undefined) {
+					const normalized = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
+					return `${normalized}${filename}`;
+				}
+				return `https://example.com/${filename}`;
+			},
+			getSourceDisplayName: (sourceCode) => sourceCode,
+		},
+		pf2eBestiaryIndex: {
+			loadIndex: () => ({ sources: {}, creatures: [] }),
+			getAllSourceCodes: () => [],
+			getDefaultFetchUrl: (sourceCode) =>
+				`https://example.com/creatures-${sourceCode.toLowerCase()}.json`,
+			getSourceDisplayName: (sourceCode) => sourceCode,
+			getCreaturePathsForSource: () => [],
+			getCreatureNamesByPaths: () => new Map(),
+		},
+	};
+}

apps/web/src/__tests__/app-integration.test.tsx

@@ -7,34 +7,6 @@ import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 import { App } from "../App.js";
 import { AllProviders } from "./test-providers.js";
 
-// Mock persistence — no localStorage interaction
-vi.mock("../persistence/encounter-storage.js", () => ({
-	loadEncounter: () => null,
-	saveEncounter: () => {},
-}));
-
-vi.mock("../persistence/player-character-storage.js", () => ({
-	loadPlayerCharacters: () => [],
-	savePlayerCharacters: () => {},
-}));
-
-// Mock bestiary — no IndexedDB or JSON index
-vi.mock("../adapters/bestiary-cache.js", () => ({
-	loadAllCachedCreatures: () => Promise.resolve(new Map()),
-	isSourceCached: () => Promise.resolve(false),
-	cacheSource: () => Promise.resolve(),
-	getCachedSources: () => Promise.resolve([]),
-	clearSource: () => Promise.resolve(),
-	clearAll: () => Promise.resolve(),
-}));
-
-vi.mock("../adapters/bestiary-index-adapter.js", () => ({
-	loadBestiaryIndex: () => ({ sources: {}, creatures: [] }),
-	getAllSourceCodes: () => [],
-	getDefaultFetchUrl: () => "",
-	getSourceDisplayName: (code: string) => code,
-}));
-
 // DOM API stubs — jsdom doesn't implement these
 beforeAll(() => {
 	Object.defineProperty(globalThis, "matchMedia", {
@@ -61,8 +33,7 @@ async function addCombatant(
 	opts?: { maxHp?: string },
 ) {
 	const inputs = screen.getAllByPlaceholderText("+ Add combatants");
-	// biome-ignore lint/style/noNonNullAssertion: getAllBy always returns at least one
+	const input = inputs.at(-1) ?? inputs[0];
-	const input = inputs.at(-1)!;
 	await user.type(input, name);
 
 	if (opts?.maxHp) {

apps/web/src/__tests__/bestiary-index-helpers.test.ts

@@ -1,40 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-	getAllSourceCodes,
-	getDefaultFetchUrl,
-} from "../adapters/bestiary-index-adapter.js";
-
-describe("getAllSourceCodes", () => {
-	it("returns all keys from the index sources object", () => {
-		const codes = getAllSourceCodes();
-		expect(codes.length).toBeGreaterThan(0);
-		expect(Array.isArray(codes)).toBe(true);
-		for (const code of codes) {
-			expect(typeof code).toBe("string");
-		}
-	});
-});
-
-describe("getDefaultFetchUrl", () => {
-	it("returns the default URL when no baseUrl is provided", () => {
-		const url = getDefaultFetchUrl("XMM");
-		expect(url).toBe(
-			"https://raw.githubusercontent.com/5etools-mirror-3/5etools-src/main/data/bestiary/bestiary-xmm.json",
-		);
-	});
-
-	it("constructs URL from baseUrl with trailing slash", () => {
-		const url = getDefaultFetchUrl("PHB", "https://example.com/data/");
-		expect(url).toBe("https://example.com/data/bestiary-phb.json");
-	});
-
-	it("normalizes baseUrl without trailing slash", () => {
-		const url = getDefaultFetchUrl("PHB", "https://example.com/data");
-		expect(url).toBe("https://example.com/data/bestiary-phb.json");
-	});
-
-	it("lowercases the source code in the filename", () => {
-		const url = getDefaultFetchUrl("MM", "https://example.com/");
-		expect(url).toBe("https://example.com/bestiary-mm.json");
-	});
-});

apps/web/src/__tests__/confirm-button.test.tsx

@@ -198,21 +198,23 @@ describe("ConfirmButton", () => {
 
 	it("Enter/Space keydown stops propagation to prevent parent handlers", () => {
 		const parentHandler = vi.fn();
-		render(
+		function Wrapper() {
-			// biome-ignore lint/a11y/noStaticElementInteractions: test wrapper
+			return (
-			// biome-ignore lint/a11y/noNoninteractiveElementInteractions: test wrapper
+				<button type="button" onKeyDown={parentHandler}>
-			<div onKeyDown={parentHandler}>
+					<ConfirmButton
-				<ConfirmButton
+						icon={<XIcon />}
-					icon={<XIcon />}
+						label="Remove combatant"
-					label="Remove combatant"
+						onConfirm={vi.fn()}
-					onConfirm={vi.fn()}
+					/>
-				/>
+				</button>
-			</div>,
+			);
-		);
+		}
-		const button = screen.getByRole("button");
+		render(<Wrapper />);
+		const buttons = screen.getAllByRole("button");
+		const confirmButton = buttons.at(-1) ?? buttons[0];
 
-		fireEvent.keyDown(button, { key: "Enter" });
+		fireEvent.keyDown(confirmButton, { key: "Enter" });
-		fireEvent.keyDown(button, { key: " " });
+		fireEvent.keyDown(confirmButton, { key: " " });
 
 		expect(parentHandler).not.toHaveBeenCalled();
 	});

apps/web/src/__tests__/export-import.test.ts

@@ -209,6 +209,82 @@ describe("round-trip: export then import", () => {
 		expect(imported.playerCharacters).toEqual(bundle.playerCharacters);
 	});
 
+	it("round-trips a combatant with cr field", () => {
+		const encounterWithCr: Encounter = {
+			combatants: [
+				{
+					id: combatantId("c-1"),
+					name: "Custom Thug",
+					cr: "2",
+				},
+			],
+			activeIndex: 0,
+			roundNumber: 1,
+		};
+		const emptyUndoRedo: UndoRedoState = {
+			undoStack: [],
+			redoStack: [],
+		};
+		const bundle = assembleExportBundle(encounterWithCr, emptyUndoRedo, []);
+		const serialized = JSON.parse(JSON.stringify(bundle));
+		const result = validateImportBundle(serialized);
+
+		expect(typeof result).toBe("object");
+		const imported = result as ExportBundle;
+		expect(imported.encounter.combatants[0].cr).toBe("2");
+	});
+
+	it("round-trips a combatant with side field", () => {
+		const encounterWithSide: Encounter = {
+			combatants: [
+				{
+					id: combatantId("c-1"),
+					name: "Allied Guard",
+					cr: "2",
+					side: "party",
+				},
+				{
+					id: combatantId("c-2"),
+					name: "Goblin",
+					side: "enemy",
+				},
+			],
+			activeIndex: 0,
+			roundNumber: 1,
+		};
+		const emptyUndoRedo: UndoRedoState = {
+			undoStack: [],
+			redoStack: [],
+		};
+		const bundle = assembleExportBundle(encounterWithSide, emptyUndoRedo, []);
+		const serialized = JSON.parse(JSON.stringify(bundle));
+		const result = validateImportBundle(serialized);
+
+		expect(typeof result).toBe("object");
+		const imported = result as ExportBundle;
+		expect(imported.encounter.combatants[0].side).toBe("party");
+		expect(imported.encounter.combatants[1].side).toBe("enemy");
+	});
+
+	it("round-trips a combatant without side field as undefined", () => {
+		const encounterNoSide: Encounter = {
+			combatants: [{ id: combatantId("c-1"), name: "Custom" }],
+			activeIndex: 0,
+			roundNumber: 1,
+		};
+		const emptyUndoRedo: UndoRedoState = {
+			undoStack: [],
+			redoStack: [],
+		};
+		const bundle = assembleExportBundle(encounterNoSide, emptyUndoRedo, []);
+		const serialized = JSON.parse(JSON.stringify(bundle));
+		const result = validateImportBundle(serialized);
+
+		expect(typeof result).toBe("object");
+		const imported = result as ExportBundle;
+		expect(imported.encounter.combatants[0].side).toBeUndefined();
+	});
+
 	it("round-trips an empty encounter", () => {
 		const emptyEncounter: Encounter = {
 			combatants: [],

apps/web/src/__tests__/factories/build-combatant.ts

@@ -0,0 +1,12 @@
+import type { Combatant } from "@initiative/domain";
+import { combatantId } from "@initiative/domain";
+
+let counter = 0;
+
+export function buildCombatant(overrides?: Partial<Combatant>): Combatant {
+	return {
+		id: combatantId(`c-${++counter}`),
+		name: "Combatant",
+		...overrides,
+	};
+}

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

@@ -0,0 +1,26 @@
+import type { Creature } from "@initiative/domain";
+import { creatureId } from "@initiative/domain";
+
+let counter = 0;
+
+export function buildCreature(overrides?: Partial<Creature>): Creature {
+	const id = ++counter;
+	return {
+		id: creatureId(`creature-${id}`),
+		name: `Creature ${id}`,
+		source: "srd",
+		sourceDisplayName: "SRD",
+		size: "Medium",
+		type: "humanoid",
+		alignment: "neutral",
+		ac: 13,
+		hp: { average: 7, formula: "2d6" },
+		speed: "30 ft.",
+		abilities: { str: 10, dex: 14, con: 10, int: 10, wis: 10, cha: 10 },
+		cr: "1/4",
+		initiativeProficiency: 0,
+		proficiencyBonus: 2,
+		passive: 10,
+		...overrides,
+	};
+}

apps/web/src/__tests__/factories/build-encounter.ts

@@ -0,0 +1,10 @@
+import type { Encounter } from "@initiative/domain";
+
+export function buildEncounter(overrides?: Partial<Encounter>): Encounter {
+	return {
+		combatants: [],
+		activeIndex: 0,
+		roundNumber: 1,
+		...overrides,
+	};
+}

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

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

apps/web/src/__tests__/stat-block-collapse-pin.test.tsx

@@ -5,7 +5,9 @@ import type { Creature, CreatureId } from "@initiative/domain";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-// Mock the context modules
+// Uses context mocks because StatBlockPanel requires fine-grained control over
+// panel state (collapsed/expanded, pinned/unpinned, wide/narrow desktop) that
+// would need extensive setup to drive through real providers.
 vi.mock("../contexts/side-panel-context.js", () => ({
 	useSidePanelContext: vi.fn(),
 }));
@@ -14,20 +16,18 @@ vi.mock("../contexts/bestiary-context.js", () => ({
 	useBestiaryContext: vi.fn(),
 }));
 
-// Mock adapters to avoid IndexedDB
+vi.mock("../contexts/encounter-context.js", () => ({
-vi.mock("../adapters/bestiary-index-adapter.js", () => ({
+	useEncounterContext: vi.fn(),
-	loadBestiaryIndex: () => ({ sources: {}, creatures: [] }),
-	getAllSourceCodes: () => [],
-	getDefaultFetchUrl: () => "",
-	getSourceDisplayName: (code: string) => code,
 }));
 
 import { StatBlockPanel } from "../components/stat-block-panel.js";
 import { useBestiaryContext } from "../contexts/bestiary-context.js";
+import { useEncounterContext } from "../contexts/encounter-context.js";
 import { useSidePanelContext } from "../contexts/side-panel-context.js";
 
 const mockUseSidePanelContext = vi.mocked(useSidePanelContext);
 const mockUseBestiaryContext = vi.mocked(useBestiaryContext);
+const mockUseEncounterContext = vi.mocked(useEncounterContext);
 
 const CLOSE_REGEX = /close/i;
 const COLLAPSE_REGEX = /collapse/i;
@@ -88,6 +88,7 @@ function setupMocks(overrides: PanelOverrides = {}) {
 
 	mockUseSidePanelContext.mockReturnValue({
 		selectedCreatureId: panelRole === "browse" ? creatureId : null,
+		selectedCombatantId: null,
 		pinnedCreatureId: panelRole === "pinned" ? creatureId : null,
 		isRightPanelCollapsed: panelRole === "browse" ? isCollapsed : false,
 		isWideDesktop: false,
@@ -116,6 +117,11 @@ function setupMocks(overrides: PanelOverrides = {}) {
 		refreshCache: vi.fn(),
 	} as ReturnType<typeof useBestiaryContext>);
 
+	mockUseEncounterContext.mockReturnValue({
+		encounter: { combatants: [], activeIndex: 0, roundNumber: 1 },
+		setCreatureAdjustment: vi.fn(),
+	} as unknown as ReturnType<typeof useEncounterContext>);
+
 	return { onToggleCollapse, onPin, onUnpin, onDismiss };
 }
 

apps/web/src/__tests__/test-providers.tsx

@@ -1,4 +1,6 @@
 import type { ReactNode } from "react";
+import type { Adapters } from "../contexts/adapter-context.js";
+import { AdapterProvider } from "../contexts/adapter-context.js";
 import {
 	BestiaryProvider,
 	BulkImportProvider,
@@ -9,23 +11,35 @@ import {
 	SidePanelProvider,
 	ThemeProvider,
 } from "../contexts/index.js";
+import { createTestAdapters } from "./adapters/in-memory-adapters.js";
 
-export function AllProviders({ children }: { children: ReactNode }) {
+export function AllProviders({
+	adapters,
+	children,
+}: {
+	adapters?: Adapters;
+	children: ReactNode;
+}) {
+	const resolved = adapters ?? createTestAdapters();
 	return (
-		<ThemeProvider>
+		<AdapterProvider adapters={resolved}>
-			<RulesEditionProvider>
+			<ThemeProvider>
-				<EncounterProvider>
+				<RulesEditionProvider>
-					<BestiaryProvider>
+					<EncounterProvider>
-						<PlayerCharactersProvider>
+						<BestiaryProvider>
-							<BulkImportProvider>
+							<PlayerCharactersProvider>
-								<SidePanelProvider>
+								<BulkImportProvider>
-									<InitiativeRollsProvider>{children}</InitiativeRollsProvider>
+									<SidePanelProvider>
-								</SidePanelProvider>
+										<InitiativeRollsProvider>
-							</BulkImportProvider>
+											{children}
-						</PlayerCharactersProvider>
+										</InitiativeRollsProvider>
-					</BestiaryProvider>
+									</SidePanelProvider>
-				</EncounterProvider>
+								</BulkImportProvider>
-			</RulesEditionProvider>
+							</PlayerCharactersProvider>
-		</ThemeProvider>
+						</BestiaryProvider>
+					</EncounterProvider>
+				</RulesEditionProvider>
+			</ThemeProvider>
+		</AdapterProvider>
 	);
 }

apps/web/src/adapters/__tests__/bestiary-adapter.test.ts

@@ -1,9 +1,24 @@
+import type { TraitBlock } from "@initiative/domain";
 import { beforeAll, describe, expect, it } from "vitest";
 import {
 	normalizeBestiary,
 	setSourceDisplayNames,
 } from "../bestiary-adapter.js";
 
+/** Flatten segments to a single string for simple text assertions. */
+function flatText(trait: TraitBlock | undefined): string {
+	if (!trait) return "";
+	return trait.segments
+		.map((s) =>
+			s.type === "text"
+				? s.value
+				: s.items
+						.map((i) => (i.label ? `${i.label}. ${i.text}` : i.text))
+						.join(" "),
+		)
+		.join(" ");
+}
+
 beforeAll(() => {
 	setSourceDisplayNames({ XMM: "MM 2024" });
 });
@@ -74,11 +89,11 @@ describe("normalizeBestiary", () => {
 		expect(c.senses).toBe("Darkvision 60 ft.");
 		expect(c.languages).toBe("Common, Goblin");
 		expect(c.actions).toHaveLength(1);
-		expect(c.actions?.[0].text).toContain("Melee Attack Roll:");
+		expect(flatText(c.actions?.[0])).toContain("Melee Attack Roll:");
-		expect(c.actions?.[0].text).not.toContain("{@");
+		expect(flatText(c.actions?.[0])).not.toContain("{@");
 		expect(c.bonusActions).toHaveLength(1);
-		expect(c.bonusActions?.[0].text).toContain("Disengage");
+		expect(flatText(c.bonusActions?.[0])).toContain("Disengage");
-		expect(c.bonusActions?.[0].text).not.toContain("{@");
+		expect(flatText(c.bonusActions?.[0])).not.toContain("{@");
 	});
 
 	it("normalizes a creature with legendary actions", () => {
@@ -166,17 +181,20 @@ describe("normalizeBestiary", () => {
 		expect(sc?.name).toBe("Spellcasting");
 		expect(sc?.headerText).toContain("DC 15");
 		expect(sc?.headerText).not.toContain("{@");
-		expect(sc?.atWill).toEqual(["Detect Magic", "Mage Hand"]);
+		expect(sc?.atWill).toEqual([
+			{ name: "Detect Magic" },
+			{ name: "Mage Hand" },
+		]);
 		expect(sc?.daily).toHaveLength(2);
 		expect(sc?.daily).toContainEqual({
 			uses: 2,
 			each: true,
-			spells: ["Fireball"],
+			spells: [{ name: "Fireball" }],
 		});
 		expect(sc?.daily).toContainEqual({
 			uses: 1,
 			each: false,
-			spells: ["Dimension Door"],
+			spells: [{ name: "Dimension Door" }],
 		});
 	});
 
@@ -333,9 +351,9 @@ describe("normalizeBestiary", () => {
 
 		const creatures = normalizeBestiary(raw);
 		const bite = creatures[0].actions?.[0];
-		expect(bite?.text).toContain("Melee Weapon Attack:");
+		expect(flatText(bite)).toContain("Melee Weapon Attack:");
-		expect(bite?.text).not.toContain("mw");
+		expect(flatText(bite)).not.toContain("mw");
-		expect(bite?.text).not.toContain("{@");
+		expect(flatText(bite)).not.toContain("{@");
 	});
 
 	it("handles fly speed with hover condition", () => {
@@ -368,4 +386,131 @@ describe("normalizeBestiary", () => {
 		const creatures = normalizeBestiary(raw);
 		expect(creatures[0].speed).toBe("10 ft., fly 90 ft. (hover)");
 	});
+
+	it("renders list items with singular entry field (e.g. Confusing Burble d4 effects)", () => {
+		const raw = {
+			monster: [
+				{
+					name: "Jabberwock",
+					source: "WBtW",
+					size: ["H"],
+					type: "dragon",
+					ac: [18],
+					hp: { average: 115, formula: "10d12 + 50" },
+					speed: { walk: 30 },
+					str: 22,
+					dex: 15,
+					con: 20,
+					int: 8,
+					wis: 14,
+					cha: 16,
+					passive: 12,
+					cr: "13",
+					trait: [
+						{
+							name: "Confusing Burble",
+							entries: [
+								"The jabberwock burbles unless {@condition incapacitated}. Roll a {@dice d4}:",
+								{
+									type: "list",
+									style: "list-hang-notitle",
+									items: [
+										{
+											type: "item",
+											name: "1-2",
+											entry: "The creature does nothing.",
+										},
+										{
+											type: "item",
+											name: "3",
+											entry:
+												"The creature uses all its movement to move in a random direction.",
+										},
+										{
+											type: "item",
+											name: "4",
+											entry:
+												"The creature makes one melee attack against a random creature.",
+										},
+									],
+								},
+							],
+						},
+					],
+				},
+			],
+		};
+
+		const creatures = normalizeBestiary(raw);
+		const trait = creatures[0].traits?.[0];
+		expect(trait).toBeDefined();
+		expect(trait?.name).toBe("Confusing Burble");
+		expect(trait?.segments).toHaveLength(2);
+		expect(trait?.segments[0]).toEqual({
+			type: "text",
+			value: expect.stringContaining("d4"),
+		});
+		expect(trait?.segments[1]).toEqual({
+			type: "list",
+			items: [
+				{ label: "1-2", text: "The creature does nothing." },
+				{
+					label: "3",
+					text: expect.stringContaining("random direction"),
+				},
+				{ label: "4", text: expect.stringContaining("melee attack") },
+			],
+		});
+	});
+
+	it("renders table entries as structured list segments", () => {
+		const raw = {
+			monster: [
+				{
+					name: "Test Creature",
+					source: "XMM",
+					size: ["M"],
+					type: "humanoid",
+					ac: [12],
+					hp: { average: 40, formula: "9d8" },
+					speed: { walk: 30 },
+					str: 10,
+					dex: 10,
+					con: 10,
+					int: 10,
+					wis: 10,
+					cha: 10,
+					passive: 10,
+					cr: "1",
+					trait: [
+						{
+							name: "Random Effect",
+							entries: [
+								"Roll on the table:",
+								{
+									type: "table",
+									colLabels: ["d4", "Effect"],
+									rows: [
+										["1", "Nothing happens."],
+										["2", "Something happens."],
+									],
+								},
+							],
+						},
+					],
+				},
+			],
+		};
+
+		const creatures = normalizeBestiary(raw);
+		const trait = creatures[0].traits?.[0];
+		expect(trait).toBeDefined();
+		expect(trait?.segments[1]).toEqual({
+			type: "list",
+			items: [
+				{ label: "1", text: "Nothing happens." },
+				{ label: "2", text: "Something happens." },
+			],
+		});
+	});
 });

apps/web/src/adapters/__tests__/bestiary-cache-fallback.test.ts

@@ -0,0 +1,95 @@
+import type { Creature } from "@initiative/domain";
+import { creatureId } from "@initiative/domain";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock idb to reject — simulates IndexedDB unavailable.
+// This must be a separate file from bestiary-cache.test.ts because the
+// module caches the db connection in a singleton; once openDB succeeds
+// in one test, the fallback path is unreachable.
+vi.mock("idb", () => ({
+	openDB: vi.fn().mockRejectedValue(new Error("IndexedDB unavailable")),
+}));
+
+const {
+	cacheSource,
+	isSourceCached,
+	getCachedSources,
+	clearSource,
+	clearAll,
+	loadAllCachedCreatures,
+} = await import("../bestiary-cache.js");
+
+function makeCreature(id: string, name: string): Creature {
+	return {
+		id: creatureId(id),
+		name,
+		source: "MM",
+		sourceDisplayName: "Monster Manual",
+		size: "Small",
+		type: "humanoid",
+		alignment: "neutral evil",
+		ac: 15,
+		hp: { average: 7, formula: "2d6" },
+		speed: "30 ft.",
+		abilities: { str: 8, dex: 14, con: 10, int: 10, wis: 8, cha: 8 },
+		cr: "1/4",
+		initiativeProficiency: 0,
+		proficiencyBonus: 2,
+		passive: 9,
+	};
+}
+
+describe("bestiary-cache fallback (IndexedDB unavailable)", () => {
+	beforeEach(async () => {
+		await clearAll();
+	});
+
+	it("cacheSource falls back to in-memory store", async () => {
+		const creatures = [makeCreature("mm:goblin", "Goblin")];
+		await cacheSource("dnd", "MM", "Monster Manual", creatures);
+
+		expect(await isSourceCached("dnd", "MM")).toBe(true);
+	});
+
+	it("isSourceCached returns false for uncached source", async () => {
+		expect(await isSourceCached("dnd", "XGE")).toBe(false);
+	});
+
+	it("getCachedSources returns sources from in-memory store", async () => {
+		await cacheSource("dnd", "MM", "Monster Manual", [
+			makeCreature("mm:goblin", "Goblin"),
+		]);
+
+		const sources = await getCachedSources();
+		expect(sources).toHaveLength(1);
+		expect(sources[0].sourceCode).toBe("MM");
+		expect(sources[0].creatureCount).toBe(1);
+	});
+
+	it("loadAllCachedCreatures assembles creatures from in-memory store", async () => {
+		const goblin = makeCreature("mm:goblin", "Goblin");
+		await cacheSource("dnd", "MM", "Monster Manual", [goblin]);
+
+		const map = await loadAllCachedCreatures();
+		expect(map.size).toBe(1);
+		expect(map.get(creatureId("mm:goblin"))?.name).toBe("Goblin");
+	});
+
+	it("clearSource removes a single source from in-memory store", async () => {
+		await cacheSource("dnd", "MM", "Monster Manual", []);
+		await cacheSource("dnd", "VGM", "Volo's Guide", []);
+
+		await clearSource("dnd", "MM");
+
+		expect(await isSourceCached("dnd", "MM")).toBe(false);
+		expect(await isSourceCached("dnd", "VGM")).toBe(true);
+	});
+
+	it("clearAll removes all data from in-memory store", async () => {
+		await cacheSource("dnd", "MM", "Monster Manual", []);
+		await clearAll();
+
+		const sources = await getCachedSources();
+		expect(sources).toEqual([]);
+	});
+});

apps/web/src/adapters/__tests__/bestiary-cache.test.ts

@@ -0,0 +1,174 @@
+import type { Creature } from "@initiative/domain";
+import { creatureId } from "@initiative/domain";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock idb — the one legitimate use of vi.mock for a third-party I/O library.
+// We can't use real IndexedDB in jsdom; this tests the cache logic through
+// all public API methods with an in-memory backing store.
+const fakeStore = new Map<string, unknown>();
+
+vi.mock("idb", () => ({
+	openDB: vi.fn().mockResolvedValue({
+		put: vi.fn((_storeName: string, value: unknown) => {
+			const record = value as { sourceCode: string };
+			fakeStore.set(record.sourceCode, value);
+			return Promise.resolve();
+		}),
+		get: vi.fn((_storeName: string, key: string) =>
+			Promise.resolve(fakeStore.get(key)),
+		),
+		getAll: vi.fn((_storeName: string) =>
+			Promise.resolve([...fakeStore.values()]),
+		),
+		delete: vi.fn((_storeName: string, key: string) => {
+			fakeStore.delete(key);
+			return Promise.resolve();
+		}),
+		clear: vi.fn((_storeName: string) => {
+			fakeStore.clear();
+			return Promise.resolve();
+		}),
+	}),
+}));
+
+// Import after mocking
+const {
+	cacheSource,
+	isSourceCached,
+	getCachedSources,
+	clearSource,
+	clearAll,
+	loadAllCachedCreatures,
+} = await import("../bestiary-cache.js");
+
+function makeCreature(id: string, name: string): Creature {
+	return {
+		id: creatureId(id),
+		name,
+		source: "MM",
+		sourceDisplayName: "Monster Manual",
+		size: "Small",
+		type: "humanoid",
+		alignment: "neutral evil",
+		ac: 15,
+		hp: { average: 7, formula: "2d6" },
+		speed: "30 ft.",
+		abilities: { str: 8, dex: 14, con: 10, int: 10, wis: 8, cha: 8 },
+		cr: "1/4",
+		initiativeProficiency: 0,
+		proficiencyBonus: 2,
+		passive: 9,
+	};
+}
+
+describe("bestiary-cache", () => {
+	beforeEach(() => {
+		fakeStore.clear();
+	});
+
+	describe("cacheSource", () => {
+		it("stores creatures and metadata", async () => {
+			const creatures = [makeCreature("mm:goblin", "Goblin")];
+			await cacheSource("dnd", "MM", "Monster Manual", creatures);
+
+			expect(fakeStore.has("dnd:MM")).toBe(true);
+			const record = fakeStore.get("dnd:MM") as {
+				sourceCode: string;
+				displayName: string;
+				creatures: Creature[];
+				creatureCount: number;
+				cachedAt: number;
+			};
+			expect(record.sourceCode).toBe("dnd:MM");
+			expect(record.displayName).toBe("Monster Manual");
+			expect(record.creatures).toHaveLength(1);
+			expect(record.creatureCount).toBe(1);
+			expect(record.cachedAt).toBeGreaterThan(0);
+		});
+	});
+
+	describe("isSourceCached", () => {
+		it("returns false for uncached source", async () => {
+			expect(await isSourceCached("dnd", "XGE")).toBe(false);
+		});
+
+		it("returns true after caching", async () => {
+			await cacheSource("dnd", "MM", "Monster Manual", []);
+			expect(await isSourceCached("dnd", "MM")).toBe(true);
+		});
+	});
+
+	describe("getCachedSources", () => {
+		it("returns empty array when no sources cached", async () => {
+			const sources = await getCachedSources();
+			expect(sources).toEqual([]);
+		});
+
+		it("returns source info with creature counts", async () => {
+			await cacheSource("dnd", "MM", "Monster Manual", [
+				makeCreature("mm:goblin", "Goblin"),
+				makeCreature("mm:orc", "Orc"),
+			]);
+			await cacheSource("dnd", "VGM", "Volo's Guide", [
+				makeCreature("vgm:flind", "Flind"),
+			]);
+
+			const sources = await getCachedSources();
+			expect(sources).toHaveLength(2);
+
+			const mm = sources.find((s) => s.sourceCode === "MM");
+			expect(mm).toBeDefined();
+			expect(mm?.displayName).toBe("Monster Manual");
+			expect(mm?.creatureCount).toBe(2);
+
+			const vgm = sources.find((s) => s.sourceCode === "VGM");
+			expect(vgm?.creatureCount).toBe(1);
+		});
+	});
+
+	describe("loadAllCachedCreatures", () => {
+		it("returns empty map when nothing cached", async () => {
+			const map = await loadAllCachedCreatures();
+			expect(map.size).toBe(0);
+		});
+
+		it("assembles creatures from all cached sources", async () => {
+			const goblin = makeCreature("mm:goblin", "Goblin");
+			const orc = makeCreature("mm:orc", "Orc");
+			const flind = makeCreature("vgm:flind", "Flind");
+
+			await cacheSource("dnd", "MM", "Monster Manual", [goblin, orc]);
+			await cacheSource("dnd", "VGM", "Volo's Guide", [flind]);
+
+			const map = await loadAllCachedCreatures();
+			expect(map.size).toBe(3);
+			expect(map.get(creatureId("mm:goblin"))?.name).toBe("Goblin");
+			expect(map.get(creatureId("mm:orc"))?.name).toBe("Orc");
+			expect(map.get(creatureId("vgm:flind"))?.name).toBe("Flind");
+		});
+	});
+
+	describe("clearSource", () => {
+		it("removes a single source", async () => {
+			await cacheSource("dnd", "MM", "Monster Manual", []);
+			await cacheSource("dnd", "VGM", "Volo's Guide", []);
+
+			await clearSource("dnd", "MM");
+
+			expect(await isSourceCached("dnd", "MM")).toBe(false);
+			expect(await isSourceCached("dnd", "VGM")).toBe(true);
+		});
+	});
+
+	describe("clearAll", () => {
+		it("removes all cached data", async () => {
+			await cacheSource("dnd", "MM", "Monster Manual", []);
+			await cacheSource("dnd", "VGM", "Volo's Guide", []);
+
+			await clearAll();
+
+			const sources = await getCachedSources();
+			expect(sources).toEqual([]);
+		});
+	});
+});

apps/web/src/adapters/__tests__/bestiary-index-adapter.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest";
+import {
+	getAllSourceCodes,
+	getDefaultFetchUrl,
+	getSourceDisplayName,
+	loadBestiaryIndex,
+} from "../bestiary-index-adapter.js";
+
+describe("loadBestiaryIndex", () => {
+	it("returns an object with sources and creatures", () => {
+		const index = loadBestiaryIndex();
+		expect(index.sources).toBeDefined();
+		expect(index.creatures).toBeDefined();
+		expect(Array.isArray(index.creatures)).toBe(true);
+	});
+
+	it("creatures have the expected shape", () => {
+		const index = loadBestiaryIndex();
+		expect(index.creatures.length).toBeGreaterThan(0);
+		const first = index.creatures[0];
+		expect(first).toHaveProperty("name");
+		expect(first).toHaveProperty("source");
+		expect(first).toHaveProperty("ac");
+		expect(first).toHaveProperty("hp");
+		expect(first).toHaveProperty("dex");
+		expect(first).toHaveProperty("cr");
+		expect(first).toHaveProperty("initiativeProficiency");
+		expect(first).toHaveProperty("size");
+		expect(first).toHaveProperty("type");
+	});
+
+	it("returns the same cached instance on subsequent calls", () => {
+		const a = loadBestiaryIndex();
+		const b = loadBestiaryIndex();
+		expect(a).toBe(b);
+	});
+
+	it("sources is a record of source code to display name", () => {
+		const index = loadBestiaryIndex();
+		const entries = Object.entries(index.sources);
+		expect(entries.length).toBeGreaterThan(0);
+		for (const [code, name] of entries) {
+			expect(typeof code).toBe("string");
+			expect(typeof name).toBe("string");
+			expect(code.length).toBeGreaterThan(0);
+			expect(name.length).toBeGreaterThan(0);
+		}
+	});
+});
+
+describe("getAllSourceCodes", () => {
+	it("returns all keys from the index sources", () => {
+		const codes = getAllSourceCodes();
+		const index = loadBestiaryIndex();
+		expect(codes).toEqual(Object.keys(index.sources));
+	});
+
+	it("returns only strings", () => {
+		for (const code of getAllSourceCodes()) {
+			expect(typeof code).toBe("string");
+		}
+	});
+});
+
+describe("getDefaultFetchUrl", () => {
+	it("returns default GitHub URL when no baseUrl provided", () => {
+		const url = getDefaultFetchUrl("MM");
+		expect(url).toBe(
+			"https://raw.githubusercontent.com/5etools-mirror-3/5etools-src/main/data/bestiary/bestiary-mm.json",
+		);
+	});
+
+	it("constructs URL from baseUrl with trailing slash", () => {
+		const url = getDefaultFetchUrl("PHB", "https://example.com/data/");
+		expect(url).toBe("https://example.com/data/bestiary-phb.json");
+	});
+
+	it("normalizes baseUrl without trailing slash", () => {
+		const url = getDefaultFetchUrl("PHB", "https://example.com/data");
+		expect(url).toBe("https://example.com/data/bestiary-phb.json");
+	});
+
+	it("lowercases the source code in the filename", () => {
+		const url = getDefaultFetchUrl("XMM");
+		expect(url).toContain("bestiary-xmm.json");
+	});
+
+	it("applies filename override for Plane Shift sources", () => {
+		expect(getDefaultFetchUrl("PSA")).toContain("bestiary-ps-a.json");
+		expect(getDefaultFetchUrl("PSD")).toContain("bestiary-ps-d.json");
+		expect(getDefaultFetchUrl("PSK")).toContain("bestiary-ps-k.json");
+	});
+});
+
+describe("getSourceDisplayName", () => {
+	it("returns display name for a known source", () => {
+		const index = loadBestiaryIndex();
+		const [code, expectedName] = Object.entries(index.sources)[0];
+		expect(getSourceDisplayName(code)).toBe(expectedName);
+	});
+
+	it("falls back to source code for unknown source", () => {
+		expect(getSourceDisplayName("UNKNOWN_SOURCE_XYZ")).toBe(
+			"UNKNOWN_SOURCE_XYZ",
+		);
+	});
+});

apps/web/src/adapters/__tests__/pf2e-bestiary-index-adapter.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from "vitest";
+
+const PACK_DIR_PREFIX = /^pathfinder-monster-core\//;
+const JSON_EXTENSION = /\.json$/;
+
+import {
+	getAllPf2eSourceCodes,
+	getCreaturePathsForSource,
+	getDefaultPf2eFetchUrl,
+	getPf2eSourceDisplayName,
+	loadPf2eBestiaryIndex,
+} from "../pf2e-bestiary-index-adapter.js";
+
+describe("loadPf2eBestiaryIndex", () => {
+	it("returns an object with sources and creatures", () => {
+		const index = loadPf2eBestiaryIndex();
+		expect(index.sources).toBeDefined();
+		expect(index.creatures).toBeDefined();
+		expect(Array.isArray(index.creatures)).toBe(true);
+	});
+
+	it("creatures have the expected PF2e shape", () => {
+		const index = loadPf2eBestiaryIndex();
+		expect(index.creatures.length).toBeGreaterThan(0);
+		const first = index.creatures[0];
+		expect(first).toHaveProperty("name");
+		expect(first).toHaveProperty("source");
+		expect(first).toHaveProperty("level");
+		expect(first).toHaveProperty("ac");
+		expect(first).toHaveProperty("hp");
+		expect(first).toHaveProperty("perception");
+		expect(first).toHaveProperty("size");
+		expect(first).toHaveProperty("type");
+	});
+
+	it("contains a substantial number of creatures", () => {
+		const index = loadPf2eBestiaryIndex();
+		expect(index.creatures.length).toBeGreaterThan(2500);
+	});
+
+	it("creatures have size and type populated", () => {
+		const index = loadPf2eBestiaryIndex();
+		const withSize = index.creatures.filter((c) => c.size !== "");
+		const withType = index.creatures.filter((c) => c.type !== "");
+		expect(withSize.length).toBeGreaterThan(index.creatures.length * 0.9);
+		expect(withType.length).toBeGreaterThan(index.creatures.length * 0.8);
+	});
+
+	it("returns the same cached instance on subsequent calls", () => {
+		const a = loadPf2eBestiaryIndex();
+		const b = loadPf2eBestiaryIndex();
+		expect(a).toBe(b);
+	});
+});
+
+describe("getAllPf2eSourceCodes", () => {
+	it("returns all keys from the index sources", () => {
+		const codes = getAllPf2eSourceCodes();
+		const index = loadPf2eBestiaryIndex();
+		expect(codes).toEqual(Object.keys(index.sources));
+	});
+});
+
+describe("getDefaultPf2eFetchUrl", () => {
+	it("returns Foundry VTT PF2e base URL", () => {
+		const url = getDefaultPf2eFetchUrl("pathfinder-monster-core");
+		expect(url).toBe(
+			"https://raw.githubusercontent.com/foundryvtt/pf2e/v13-dev/packs/pf2e/",
+		);
+	});
+
+	it("normalizes custom base URL with trailing slash", () => {
+		const url = getDefaultPf2eFetchUrl(
+			"pathfinder-monster-core",
+			"https://example.com/pf2e",
+		);
+		expect(url).toBe("https://example.com/pf2e/");
+	});
+});
+
+describe("getPf2eSourceDisplayName", () => {
+	it("returns display name for a known source", () => {
+		const name = getPf2eSourceDisplayName("pathfinder-monster-core");
+		expect(name).toBe("Monster Core");
+	});
+
+	it("falls back to source code for unknown source", () => {
+		expect(getPf2eSourceDisplayName("UNKNOWN")).toBe("UNKNOWN");
+	});
+});
+
+describe("getCreaturePathsForSource", () => {
+	it("returns file paths for a known source", () => {
+		const paths = getCreaturePathsForSource("pathfinder-monster-core");
+		expect(paths.length).toBeGreaterThan(100);
+		expect(paths[0]).toMatch(PACK_DIR_PREFIX);
+		expect(paths[0]).toMatch(JSON_EXTENSION);
+	});
+
+	it("returns empty array for unknown source", () => {
+		expect(getCreaturePathsForSource("nonexistent")).toEqual([]);
+	});
+});

apps/web/src/adapters/__tests__/strip-foundry-tags.test.ts

@@ -0,0 +1,168 @@
+import { describe, expect, it } from "vitest";
+import { stripFoundryTags } from "../strip-foundry-tags.js";
+
+describe("stripFoundryTags", () => {
+	describe("@Damage tags", () => {
+		it("formats damage with type bracket", () => {
+			expect(stripFoundryTags("@Damage[3d6+10[fire]]")).toBe("3d6+10 fire");
+		});
+
+		it("prefers display text when present", () => {
+			expect(
+				stripFoundryTags("@Damage[3d6+10[fire]]{3d6+10 fire damage}"),
+			).toBe("3d6+10 fire damage");
+		});
+
+		it("handles multiple damage types", () => {
+			expect(
+				stripFoundryTags("@Damage[2d8+5[slashing]] plus @Damage[1d6[fire]]"),
+			).toBe("2d8+5 slashing plus 1d6 fire");
+		});
+	});
+
+	describe("@Check tags", () => {
+		it("formats basic saving throw", () => {
+			expect(stripFoundryTags("@Check[reflex|dc:33|basic]")).toBe(
+				"DC 33 basic Reflex",
+			);
+		});
+
+		it("formats non-basic check", () => {
+			expect(stripFoundryTags("@Check[athletics|dc:25]")).toBe(
+				"DC 25 Athletics",
+			);
+		});
+
+		it("formats check without DC", () => {
+			expect(stripFoundryTags("@Check[fortitude]")).toBe("Fortitude");
+		});
+	});
+
+	describe("@UUID tags", () => {
+		it("extracts display text", () => {
+			expect(
+				stripFoundryTags(
+					"@UUID[Compendium.pf2e.conditionitems.Item.Grabbed]{Grabbed}",
+				),
+			).toBe("Grabbed");
+		});
+
+		it("extracts last segment when no display text", () => {
+			expect(
+				stripFoundryTags("@UUID[Compendium.pf2e.conditionitems.Item.Grabbed]"),
+			).toBe("Grabbed");
+		});
+	});
+
+	describe("@Template tags", () => {
+		it("formats cone template", () => {
+			expect(stripFoundryTags("@Template[cone|distance:40]")).toBe(
+				"40-foot cone",
+			);
+		});
+
+		it("formats emanation template", () => {
+			expect(stripFoundryTags("@Template[emanation|distance:10]")).toBe(
+				"10-foot emanation",
+			);
+		});
+
+		it("prefers display text", () => {
+			expect(
+				stripFoundryTags("@Template[cone|distance:40]{40-foot cone}"),
+			).toBe("40-foot cone");
+		});
+	});
+
+	describe("unknown @Tag patterns", () => {
+		it("uses display text for unknown tags", () => {
+			expect(stripFoundryTags("@Localize[some.key]{Some Text}")).toBe(
+				"Some Text",
+			);
+		});
+
+		it("strips unknown tags without display text", () => {
+			expect(stripFoundryTags("@Localize[some.key]")).toBe("");
+		});
+	});
+
+	describe("HTML stripping", () => {
+		it("strips paragraph tags", () => {
+			expect(stripFoundryTags("<p>text</p>")).toBe("text");
+		});
+
+		it("converts br to newline", () => {
+			expect(stripFoundryTags("line1<br />line2")).toBe("line1\nline2");
+		});
+
+		it("converts hr to newline", () => {
+			expect(stripFoundryTags("before<hr />after")).toBe("before\nafter");
+		});
+
+		it("preserves strong and em tags", () => {
+			expect(stripFoundryTags("<strong>bold</strong> <em>italic</em>")).toBe(
+				"<strong>bold</strong> <em>italic</em>",
+			);
+		});
+
+		it("preserves list tags", () => {
+			expect(stripFoundryTags("<ul><li>first</li><li>second</li></ul>")).toBe(
+				"<ul><li>first</li><li>second</li></ul>",
+			);
+		});
+
+		it("converts p-to-p transitions to newlines", () => {
+			expect(stripFoundryTags("<p>first</p><p>second</p>")).toBe(
+				"first\nsecond",
+			);
+		});
+
+		it("strips action-glyph spans", () => {
+			expect(
+				stripFoundryTags('<span class="action-glyph">1</span> Strike'),
+			).toBe("Strike");
+		});
+	});
+
+	describe("HTML entities", () => {
+		it("decodes &amp;", () => {
+			expect(stripFoundryTags("fire &amp; ice")).toBe("fire & ice");
+		});
+
+		it("decodes &lt; and &gt;", () => {
+			expect(stripFoundryTags("&lt;tag&gt;")).toBe("<tag>");
+		});
+
+		it("decodes &quot;", () => {
+			expect(stripFoundryTags("&quot;hello&quot;")).toBe('"hello"');
+		});
+	});
+
+	describe("whitespace handling", () => {
+		it("collapses multiple spaces", () => {
+			expect(stripFoundryTags("a   b    c")).toBe("a b c");
+		});
+
+		it("collapses multiple blank lines", () => {
+			expect(stripFoundryTags("a\n\n\nb")).toBe("a\nb");
+		});
+
+		it("trims leading and trailing whitespace", () => {
+			expect(stripFoundryTags("  hello  ")).toBe("hello");
+		});
+	});
+
+	describe("combined/edge cases", () => {
+		it("handles enrichment tags inside HTML", () => {
+			expect(
+				stripFoundryTags(
+					"<p>Deal @Damage[2d6[fire]] damage, @Check[reflex|dc:20|basic] save.</p>",
+				),
+			).toBe("Deal 2d6 fire damage, DC 20 basic Reflex save.");
+		});
+
+		it("handles empty string", () => {
+			expect(stripFoundryTags("")).toBe("");
+		});
+	});
+});

apps/web/src/adapters/__tests__/strip-tags.test.ts

@@ -138,12 +138,20 @@ describe("stripTags", () => {
 		);
 	});
 
-	it("handles nested tags gracefully", () => {
+	it("handles sibling tags in the same string", () => {
 		expect(
 			stripTags("The spell {@spell Fireball|XPHB} deals {@damage 8d6}."),
 		).toBe("The spell Fireball deals 8d6.");
 	});
 
+	it("handles nested tags (outer wrapping inner)", () => {
+		expect(
+			stripTags(
+				"{@b Arcane Innate Spells DC 24; 3rd {@spell fireball}, {@spell slow}}",
+			),
+		).toBe("Arcane Innate Spells DC 24; 3rd fireball, slow");
+	});
+
 	it("handles text with no tags", () => {
 		expect(stripTags("Just plain text.")).toBe("Just plain text.");
 	});

apps/web/src/adapters/bestiary-adapter.ts

@@ -4,7 +4,10 @@ import type {
 	DailySpells,
 	LegendaryBlock,
 	SpellcastingBlock,
+	SpellReference,
 	TraitBlock,
+	TraitListItem,
+	TraitSegment,
 } from "@initiative/domain";
 import { creatureId, proficiencyBonus } from "@initiative/domain";
 import { stripTags } from "./strip-tags.js";
@@ -63,11 +66,18 @@ interface RawEntryObject {
 	type: string;
 	items?: (
 		| string
-		| { type: string; name?: string; entries?: (string | RawEntryObject)[] }
+		| {
+				type: string;
+				name?: string;
+				entry?: string;
+				entries?: (string | RawEntryObject)[];
+		  }
 	)[];
 	style?: string;
 	name?: string;
 	entries?: (string | RawEntryObject)[];
+	colLabels?: string[];
+	rows?: (string | RawEntryObject)[][];
 }
 
 interface RawSpellcasting {
@@ -257,23 +267,34 @@ function formatConditionImmunities(
 		.join(", ");
 }
 
-function renderListItem(item: string | RawEntryObject): string | undefined {
+function toListItem(
+	item:
+		| string
+		| {
+				type: string;
+				name?: string;
+				entry?: string;
+				entries?: (string | RawEntryObject)[];
+		  },
+): TraitListItem | undefined {
 	if (typeof item === "string") {
-		return `• ${stripTags(item)}`;
+		return { text: stripTags(item) };
 	}
 	if (item.name && item.entries) {
-		return `• ${stripTags(item.name)}: ${renderEntries(item.entries)}`;
+		return { label: stripTags(item.name), text: renderEntries(item.entries) };
+	}
+	if (item.name && item.entry) {
+		return { label: stripTags(item.name), text: stripTags(item.entry) };
 	}
 	return undefined;
 }
 
 function renderEntryObject(entry: RawEntryObject, parts: string[]): void {
-	if (entry.type === "list") {
+	if (entry.type === "list" || entry.type === "table") {
-		for (const item of entry.items ?? []) {
+		// Handled structurally in segmentizeEntries
-			const rendered = renderListItem(item);
+		return;
-			if (rendered) parts.push(rendered);
+	}
-		}
+	if (entry.type === "item" && entry.name && entry.entries) {
-	} else if (entry.type === "item" && entry.name && entry.entries) {
 		parts.push(`${stripTags(entry.name)}: ${renderEntries(entry.entries)}`);
 	} else if (entry.entries) {
 		parts.push(renderEntries(entry.entries));
@@ -292,11 +313,67 @@ function renderEntries(entries: (string | RawEntryObject)[]): string {
 	return parts.join(" ");
 }
 
+function tableRowToListItem(row: (string | RawEntryObject)[]): TraitListItem {
+	return {
+		label: typeof row[0] === "string" ? stripTags(row[0]) : undefined,
+		text: row
+			.slice(1)
+			.map((cell) =>
+				typeof cell === "string" ? stripTags(cell) : renderEntries([cell]),
+			)
+			.join(" "),
+	};
+}
+
+function entryToListSegment(entry: RawEntryObject): TraitSegment | undefined {
+	if (entry.type === "list") {
+		const items = (entry.items ?? [])
+			.map(toListItem)
+			.filter((i): i is TraitListItem => i !== undefined);
+		return items.length > 0 ? { type: "list", items } : undefined;
+	}
+	if (entry.type === "table" && entry.rows) {
+		const items = entry.rows.map(tableRowToListItem);
+		return items.length > 0 ? { type: "list", items } : undefined;
+	}
+	return undefined;
+}
+
+function segmentizeEntries(
+	entries: (string | RawEntryObject)[],
+): TraitSegment[] {
+	const segments: TraitSegment[] = [];
+	const textParts: string[] = [];
+
+	const flushText = () => {
+		if (textParts.length > 0) {
+			segments.push({ type: "text", value: textParts.join(" ") });
+			textParts.length = 0;
+		}
+	};
+
+	for (const entry of entries) {
+		if (typeof entry === "string") {
+			textParts.push(stripTags(entry));
+			continue;
+		}
+		const listSeg = entryToListSegment(entry);
+		if (listSeg) {
+			flushText();
+			segments.push(listSeg);
+		} else {
+			renderEntryObject(entry, textParts);
+		}
+	}
+	flushText();
+	return segments;
+}
+
 function normalizeTraits(raw?: RawEntry[]): TraitBlock[] | undefined {
 	if (!raw || raw.length === 0) return undefined;
 	return raw.map((t) => ({
 		name: stripTags(t.name),
-		text: renderEntries(t.entries),
+		segments: segmentizeEntries(t.entries),
 	}));
 }
 
@@ -309,7 +386,7 @@ function normalizeSpellcasting(
 		const block: {
 			name: string;
 			headerText: string;
-			atWill?: string[];
+			atWill?: SpellReference[];
 			daily?: DailySpells[];
 			restLong?: DailySpells[];
 		} = {
@@ -320,7 +397,7 @@ function normalizeSpellcasting(
 		const hidden = new Set(sc.hidden ?? []);
 
 		if (sc.will && !hidden.has("will")) {
-			block.atWill = sc.will.map((s) => stripTags(s));
+			block.atWill = sc.will.map((s) => ({ name: stripTags(s) }));
 		}
 
 		if (sc.daily) {
@@ -342,7 +419,7 @@ function parseDailyMap(map: Record<string, string[]>): DailySpells[] {
 		return {
 			uses,
 			each,
-			spells: spells.map((s) => stripTags(s)),
+			spells: spells.map((s) => ({ name: stripTags(s) })),
 		};
 	});
 }
@@ -361,7 +438,7 @@ function normalizeLegendary(
 		preamble,
 		entries: raw.map((e) => ({
 			name: stripTags(e.name),
-			text: renderEntries(e.entries),
+			segments: segmentizeEntries(e.entries),
 		})),
 	};
 }

apps/web/src/adapters/bestiary-cache.ts

@@ -1,23 +1,26 @@
-import type { Creature, CreatureId } from "@initiative/domain";
+import type { AnyCreature, CreatureId } from "@initiative/domain";
 import { type IDBPDatabase, openDB } from "idb";
 
 const DB_NAME = "initiative-bestiary";
 const STORE_NAME = "sources";
-const DB_VERSION = 2;
+// v8 (2026-04-10): Attack effects, ability frequency, perception details added to PF2e creatures
+const DB_VERSION = 8;
 
-export interface CachedSourceInfo {
+interface CachedSourceInfo {
 	readonly sourceCode: string;
 	readonly displayName: string;
 	readonly creatureCount: number;
 	readonly cachedAt: number;
+	readonly system?: string;
 }
 
 interface CachedSourceRecord {
 	sourceCode: string;
 	displayName: string;
-	creatures: Creature[];
+	creatures: AnyCreature[];
 	cachedAt: number;
 	creatureCount: number;
+	system?: string;
 }
 
 let db: IDBPDatabase | null = null;
@@ -26,6 +29,10 @@ let dbFailed = false;
 // In-memory fallback when IndexedDB is unavailable
 const memoryStore = new Map<string, CachedSourceRecord>();
 
+function scopedKey(system: string, sourceCode: string): string {
+	return `${system}:${sourceCode}`;
+}
+
 async function getDb(): Promise<IDBPDatabase | null> {
 	if (db) return db;
 	if (dbFailed) return null;
@@ -38,8 +45,11 @@ async function getDb(): Promise<IDBPDatabase | null> {
 						keyPath: "sourceCode",
 					});
 				}
-				if (oldVersion < 2 && database.objectStoreNames.contains(STORE_NAME)) {
+				if (
-					// Clear cached creatures to pick up improved tag processing
+					oldVersion < DB_VERSION &&
+					database.objectStoreNames.contains(STORE_NAME)
+				) {
+					// Clear cached creatures so they get re-normalized with latest rendering
 					void transaction.objectStore(STORE_NAME).clear();
 				}
 			},
@@ -55,60 +65,77 @@ async function getDb(): Promise<IDBPDatabase | null> {
 }
 
 export async function cacheSource(
+	system: string,
 	sourceCode: string,
 	displayName: string,
-	creatures: Creature[],
+	creatures: AnyCreature[],
 ): Promise<void> {
+	const key = scopedKey(system, sourceCode);
 	const record: CachedSourceRecord = {
-		sourceCode,
+		sourceCode: key,
 		displayName,
 		creatures,
 		cachedAt: Date.now(),
 		creatureCount: creatures.length,
+		system,
 	};
 
 	const database = await getDb();
 	if (database) {
 		await database.put(STORE_NAME, record);
 	} else {
-		memoryStore.set(sourceCode, record);
+		memoryStore.set(key, record);
 	}
 }
 
-export async function isSourceCached(sourceCode: string): Promise<boolean> {
+export async function isSourceCached(
+	system: string,
+	sourceCode: string,
+): Promise<boolean> {
+	const key = scopedKey(system, sourceCode);
 	const database = await getDb();
 	if (database) {
-		const record = await database.get(STORE_NAME, sourceCode);
+		const record = await database.get(STORE_NAME, key);
 		return record !== undefined;
 	}
-	return memoryStore.has(sourceCode);
+	return memoryStore.has(key);
 }
 
-export async function getCachedSources(): Promise<CachedSourceInfo[]> {
+export async function getCachedSources(
+	system?: string,
+): Promise<CachedSourceInfo[]> {
 	const database = await getDb();
+	let records: CachedSourceRecord[];
 	if (database) {
-		const all: CachedSourceRecord[] = await database.getAll(STORE_NAME);
+		records = await database.getAll(STORE_NAME);
-		return all.map((r) => ({
+	} else {
-			sourceCode: r.sourceCode,
+		records = [...memoryStore.values()];
-			displayName: r.displayName,
-			creatureCount: r.creatureCount,
-			cachedAt: r.cachedAt,
-		}));
 	}
-	return [...memoryStore.values()].map((r) => ({
+
-		sourceCode: r.sourceCode,
+	const filtered = system
+		? records.filter((r) => r.system === system)
+		: records;
+	return filtered.map((r) => ({
+		sourceCode: r.system
+			? r.sourceCode.slice(r.system.length + 1)
+			: r.sourceCode,
 		displayName: r.displayName,
 		creatureCount: r.creatureCount,
 		cachedAt: r.cachedAt,
+		system: r.system,
 	}));
 }
 
-export async function clearSource(sourceCode: string): Promise<void> {
+export async function clearSource(
+	system: string,
+	sourceCode: string,
+): Promise<void> {
+	const key = scopedKey(system, sourceCode);
 	const database = await getDb();
 	if (database) {
-		await database.delete(STORE_NAME, sourceCode);
+		await database.delete(STORE_NAME, key);
 	} else {
-		memoryStore.delete(sourceCode);
+		memoryStore.delete(key);
 	}
 }
 
@@ -122,9 +149,9 @@ export async function clearAll(): Promise<void> {
 }
 
 export async function loadAllCachedCreatures(): Promise<
-	Map<CreatureId, Creature>
+	Map<CreatureId, AnyCreature>
 > {
-	const map = new Map<CreatureId, Creature>();
+	const map = new Map<CreatureId, AnyCreature>();
 	const database = await getDb();
 
 	let records: CachedSourceRecord[];

apps/web/src/adapters/pf2e-bestiary-adapter.ts

@@ -0,0 +1,774 @@
+import type {
+	CreatureId,
+	EquipmentItem,
+	Pf2eCreature,
+	SpellcastingBlock,
+	SpellReference,
+	TraitBlock,
+} from "@initiative/domain";
+import { creatureId } from "@initiative/domain";
+import { stripFoundryTags } from "./strip-foundry-tags.js";
+
+// -- Raw Foundry VTT types (minimal, for parsing) --
+
+interface RawFoundryCreature {
+	_id: string;
+	name: string;
+	type: string;
+	system: {
+		abilities: Record<string, { mod: number }>;
+		attributes: {
+			ac: { value: number; details?: string };
+			hp: { max: number; details?: string };
+			speed: {
+				value: number;
+				otherSpeeds?: { type: string; value: number }[];
+				details?: string;
+			};
+			immunities?: { type: string; exceptions?: string[] }[];
+			resistances?: { type: string; value: number; exceptions?: string[] }[];
+			weaknesses?: { type: string; value: number }[];
+			allSaves?: { value: string };
+		};
+		details: {
+			level: { value: number };
+			languages: { value?: string[]; details?: string };
+			publication: { license: string; remaster: boolean; title: string };
+		};
+		perception: {
+			mod: number;
+			details?: string;
+			senses?: { type: string; acuity?: string; range?: number }[];
+		};
+		saves: {
+			fortitude: { value: number; saveDetail?: string };
+			reflex: { value: number; saveDetail?: string };
+			will: { value: number; saveDetail?: string };
+		};
+		skills: Record<string, { base: number; note?: string }>;
+		traits: { rarity: string; size: { value: string }; value: string[] };
+	};
+	items: RawFoundryItem[];
+}
+
+interface RawFoundryItem {
+	_id: string;
+	name: string;
+	type: string;
+	system: Record<string, unknown>;
+	sort?: number;
+}
+
+interface MeleeSystem {
+	bonus?: { value: number };
+	damageRolls?: Record<string, { damage: string; damageType: string }>;
+	traits?: { value: string[] };
+	attackEffects?: { value: string[] };
+}
+
+interface ActionSystem {
+	category?: string;
+	actionType?: { value: string };
+	actions?: { value: number | null };
+	traits?: { value: string[] };
+	description?: { value: string };
+	frequency?: { max: number; per: string };
+}
+
+interface SpellcastingEntrySystem {
+	tradition?: { value: string };
+	prepared?: { value: string };
+	spelldc?: { dc: number; value?: number };
+}
+
+interface SpellSystem {
+	slug?: string;
+	location?: {
+		value: string;
+		heightenedLevel?: number;
+		uses?: { max: number; value: number };
+	};
+	level?: { value: number };
+	traits?: { rarity?: string; value: string[]; traditions?: string[] };
+	description?: { value: string };
+	range?: { value: string };
+	target?: { value: string };
+	area?: { type?: string; value?: number; details?: string };
+	duration?: { value: string; sustained?: boolean };
+	time?: { value: string };
+	defense?: {
+		save?: { statistic: string; basic?: boolean };
+		passive?: { statistic: string };
+	};
+	heightening?:
+		| {
+				type: "fixed";
+				levels: Record<string, { text?: string }>;
+		  }
+		| {
+				type: "interval";
+				interval: number;
+				damage?: { value: string };
+		  }
+		| undefined;
+	overlays?: Record<
+		string,
+		{ name?: string; system?: { description?: { value: string } } }
+	>;
+}
+
+interface ConsumableSystem {
+	level?: { value: number };
+	traits?: { value: string[] };
+	description?: { value: string };
+	category?: string;
+	spell?: {
+		name: string;
+		system?: { level?: { value: number } };
+	} | null;
+}
+
+const EQUIPMENT_TYPES = new Set(["weapon", "consumable", "equipment", "armor"]);
+
+/** Items shown in the Equipment section with popovers. */
+function isDetailedEquipment(item: RawFoundryItem): boolean {
+	if (!EQUIPMENT_TYPES.has(item.type)) return false;
+	const sys = item.system;
+	const level = (sys.level as { value: number } | undefined)?.value ?? 0;
+	const traits = (sys.traits as { value: string[] } | undefined)?.value ?? [];
+	// All consumables are tactically relevant (potions, scrolls, poisons, etc.)
+	if (item.type === "consumable") return true;
+	// Magical/invested items
+	if (traits.includes("magical") || traits.includes("invested")) return true;
+	// Special material armor/equipment
+	const material = sys.material as { type: string | null } | undefined;
+	if (material?.type) return true;
+	// Higher-level items
+	if (level > 0) return true;
+	return false;
+}
+
+/** Items shown on the "Items" line as plain names. */
+function isMundaneItem(item: RawFoundryItem): boolean {
+	return EQUIPMENT_TYPES.has(item.type) && !isDetailedEquipment(item);
+}
+
+function normalizeEquipmentItem(item: RawFoundryItem): EquipmentItem {
+	const sys = item.system;
+	const level = (sys.level as { value: number } | undefined)?.value ?? 0;
+	const traits = (sys.traits as { value: string[] } | undefined)?.value;
+	const rawDesc = (sys.description as { value: string } | undefined)?.value;
+	const description = rawDesc
+		? stripFoundryTags(rawDesc) || undefined
+		: undefined;
+	const category = sys.category as string | undefined;
+
+	let spellName: string | undefined;
+	let spellRank: number | undefined;
+	if (item.type === "consumable") {
+		const spell = (sys as unknown as ConsumableSystem).spell;
+		if (spell) {
+			spellName = spell.name;
+			spellRank = spell.system?.level?.value;
+		}
+	}
+
+	return {
+		name: item.name,
+		level,
+		category: category || undefined,
+		traits: traits && traits.length > 0 ? traits : undefined,
+		description,
+		spellName,
+		spellRank,
+	};
+}
+
+const SIZE_MAP: Record<string, string> = {
+	tiny: "tiny",
+	sm: "small",
+	med: "medium",
+	lg: "large",
+	huge: "huge",
+	grg: "gargantuan",
+};
+
+// -- Helpers --
+
+function capitalize(s: string): string {
+	return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+function makeCreatureId(source: string, name: string): CreatureId {
+	const slug = name
+		.toLowerCase()
+		.replaceAll(/[^a-z0-9]+/g, "-")
+		.replaceAll(/(^-|-$)/g, "");
+	return creatureId(`${source}:${slug}`);
+}
+
+const NUMERIC_SLUG = /^(.+)-(\d+)$/;
+const LETTER_SLUG = /^(.+)-([a-z])$/;
+
+/** Format rules for traits with a numeric suffix: "reach-10" → "reach 10 feet" */
+const NUMERIC_TRAIT_FORMATS: Record<string, (n: string) => string> = {
+	reach: (n) => `reach ${n} feet`,
+	range: (n) => `range ${n} feet`,
+	"range-increment": (n) => `range increment ${n} feet`,
+	versatile: (n) => `versatile ${n}`,
+	deadly: (n) => `deadly d${n}`,
+	fatal: (n) => `fatal d${n}`,
+	"fatal-aim": (n) => `fatal aim d${n}`,
+	reload: (n) => `reload ${n}`,
+};
+
+/** Format rules for traits with a letter suffix: "versatile-p" → "versatile P" */
+const LETTER_TRAIT_FORMATS: Record<string, (l: string) => string> = {
+	versatile: (l) => `versatile ${l.toUpperCase()}`,
+	deadly: (l) => `deadly d${l}`,
+};
+
+/** Expand slugified trait names: "reach-10" → "reach 10 feet" */
+function formatTrait(slug: string): string {
+	const numMatch = NUMERIC_SLUG.exec(slug);
+	if (numMatch) {
+		const [, base, num] = numMatch;
+		const fmt = NUMERIC_TRAIT_FORMATS[base];
+		return fmt ? fmt(num) : `${base} ${num}`;
+	}
+	const letterMatch = LETTER_SLUG.exec(slug);
+	if (letterMatch) {
+		const [, base, letter] = letterMatch;
+		const fmt = LETTER_TRAIT_FORMATS[base];
+		if (fmt) return fmt(letter);
+	}
+	return slug.replaceAll("-", " ");
+}
+
+// -- Formatting --
+
+function formatSenses(
+	senses: { type: string; acuity?: string; range?: number }[] | undefined,
+): string | undefined {
+	if (!senses || senses.length === 0) return undefined;
+	return senses
+		.map((s) => {
+			const parts = [capitalize(s.type.replaceAll("-", " "))];
+			if (s.acuity && s.acuity !== "precise") {
+				parts.push(`(${s.acuity})`);
+			}
+			if (s.range != null) parts.push(`${s.range} feet`);
+			return parts.join(" ");
+		})
+		.join(", ");
+}
+
+function formatLanguages(
+	languages: { value?: string[]; details?: string } | undefined,
+): string | undefined {
+	if (!languages?.value || languages.value.length === 0) return undefined;
+	const list = languages.value.map(capitalize).join(", ");
+	return languages.details ? `${list} (${languages.details})` : list;
+}
+
+function formatSkills(
+	skills: Record<string, { base: number; note?: string }> | undefined,
+): string | undefined {
+	if (!skills) return undefined;
+	const entries = Object.entries(skills);
+	if (entries.length === 0) return undefined;
+	return entries
+		.map(([name, val]) => {
+			const label = capitalize(name.replaceAll("-", " "));
+			return `${label} +${val.base}`;
+		})
+		.sort()
+		.join(", ");
+}
+
+function formatImmunities(
+	immunities: { type: string; exceptions?: string[] }[] | undefined,
+): string | undefined {
+	if (!immunities || immunities.length === 0) return undefined;
+	return immunities
+		.map((i) => {
+			const base = capitalize(i.type.replaceAll("-", " "));
+			if (i.exceptions && i.exceptions.length > 0) {
+				return `${base} (except ${i.exceptions.map((e) => capitalize(e.replaceAll("-", " "))).join(", ")})`;
+			}
+			return base;
+		})
+		.join(", ");
+}
+
+function formatResistances(
+	resistances:
+		| { type: string; value: number; exceptions?: string[] }[]
+		| undefined,
+): string | undefined {
+	if (!resistances || resistances.length === 0) return undefined;
+	return resistances
+		.map((r) => {
+			const base = `${capitalize(r.type.replaceAll("-", " "))} ${r.value}`;
+			if (r.exceptions && r.exceptions.length > 0) {
+				return `${base} (except ${r.exceptions.map((e) => capitalize(e.replaceAll("-", " "))).join(", ")})`;
+			}
+			return base;
+		})
+		.join(", ");
+}
+
+function formatWeaknesses(
+	weaknesses: { type: string; value: number }[] | undefined,
+): string | undefined {
+	if (!weaknesses || weaknesses.length === 0) return undefined;
+	return weaknesses
+		.map((w) => `${capitalize(w.type.replaceAll("-", " "))} ${w.value}`)
+		.join(", ");
+}
+
+function formatSpeed(speed: {
+	value: number;
+	otherSpeeds?: { type: string; value: number }[];
+	details?: string;
+}): string {
+	const parts = [`${speed.value} feet`];
+	if (speed.otherSpeeds) {
+		for (const s of speed.otherSpeeds) {
+			parts.push(`${capitalize(s.type)} ${s.value} feet`);
+		}
+	}
+	const base = parts.join(", ");
+	return speed.details ? `${base} (${speed.details})` : base;
+}
+
+// -- Attack normalization --
+
+/** Format an attack effect slug to display text: "grab" → "Grab", "lich-siphon-life" → "Siphon Life". */
+function formatAttackEffect(slug: string, creatureName: string): string {
+	const prefix = `${creatureName.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-")}-`;
+	const stripped = slug.startsWith(prefix) ? slug.slice(prefix.length) : slug;
+	return stripped.split("-").map(capitalize).join(" ");
+}
+
+function normalizeAttack(
+	item: RawFoundryItem,
+	creatureName: string,
+): TraitBlock {
+	const sys = item.system as unknown as MeleeSystem;
+	const bonus = sys.bonus?.value ?? 0;
+	const traits = sys.traits?.value ?? [];
+	const damageEntries = Object.values(sys.damageRolls ?? {});
+	const damage = damageEntries
+		.map((d) => `${d.damage} ${d.damageType}`)
+		.join(" plus ");
+	const traitStr =
+		traits.length > 0 ? ` (${traits.map(formatTrait).join(", ")})` : "";
+	const effects = sys.attackEffects?.value ?? [];
+	const effectStr =
+		effects.length > 0
+			? ` plus ${effects.map((e) => formatAttackEffect(e, creatureName)).join(" and ")}`
+			: "";
+	return {
+		name: capitalize(item.name),
+		activity: { number: 1, unit: "action" },
+		segments: [
+			{
+				type: "text",
+				value: `+${bonus}${traitStr}, ${damage}${effectStr}`,
+			},
+		],
+	};
+}
+
+function parseActivity(
+	actionType: string | undefined,
+	actionCount: number | null | undefined,
+): { number: number; unit: "action" | "free" | "reaction" } | undefined {
+	if (actionType === "action") {
+		return { number: actionCount ?? 1, unit: "action" };
+	}
+	if (actionType === "reaction") {
+		return { number: 1, unit: "reaction" };
+	}
+	if (actionType === "free") {
+		return { number: 1, unit: "free" };
+	}
+	return undefined;
+}
+
+// -- Ability normalization --
+
+const FREQUENCY_LINE = /(<strong>)?Frequency(<\/strong>)?\s+[^\n]+\n*/i;
+
+/** Strip the "Frequency once per day" line from ability descriptions when structured frequency data exists. */
+function stripFrequencyLine(text: string): string {
+	return text.replace(FREQUENCY_LINE, "").trimStart();
+}
+
+function normalizeAbility(item: RawFoundryItem): TraitBlock {
+	const sys = item.system as unknown as ActionSystem;
+	const actionType = sys.actionType?.value;
+	const actionCount = sys.actions?.value;
+	let description = stripFoundryTags(sys.description?.value ?? "");
+	const traits = sys.traits?.value ?? [];
+
+	const activity = parseActivity(actionType, actionCount);
+
+	const frequency =
+		sys.frequency?.max != null && sys.frequency.per
+			? `${sys.frequency.max}/${sys.frequency.per}`
+			: undefined;
+
+	if (frequency) {
+		description = stripFrequencyLine(description);
+	}
+
+	const traitStr =
+		traits.length > 0
+			? `(${traits.map((t) => capitalize(formatTrait(t))).join(", ")}) `
+			: "";
+
+	const text = traitStr ? `${traitStr}${description}` : description;
+	const segments: { type: "text"; value: string }[] = text
+		? [{ type: "text", value: text }]
+		: [];
+
+	return { name: item.name, activity, frequency, segments };
+}
+
+// -- Spellcasting normalization --
+
+function formatRange(range: { value: string } | undefined): string | undefined {
+	if (!range?.value) return undefined;
+	return range.value;
+}
+
+function formatArea(
+	area: { type?: string; value?: number; details?: string } | undefined,
+): string | undefined {
+	if (!area) return undefined;
+	if (area.value && area.type) return `${area.value}-foot ${area.type}`;
+	return area.details ?? undefined;
+}
+
+function formatDefense(defense: SpellSystem["defense"]): string | undefined {
+	if (!defense) return undefined;
+	if (defense.save) {
+		const stat = capitalize(defense.save.statistic);
+		return defense.save.basic ? `basic ${stat}` : stat;
+	}
+	if (defense.passive) return capitalize(defense.passive.statistic);
+	return undefined;
+}
+
+function formatHeightening(
+	heightening: SpellSystem["heightening"],
+): string | undefined {
+	if (!heightening) return undefined;
+	if (heightening.type === "fixed") {
+		const parts = Object.entries(heightening.levels)
+			.filter(([, lvl]) => lvl.text)
+			.map(
+				([rank, lvl]) =>
+					`Heightened (${rank}) ${stripFoundryTags(lvl.text as string)}`,
+			);
+		return parts.length > 0 ? parts.join("\n") : undefined;
+	}
+	if (heightening.type === "interval") {
+		const dmg = heightening.damage?.value
+			? ` damage increases by ${heightening.damage.value}`
+			: "";
+		return `Heightened (+${heightening.interval})${dmg}`;
+	}
+	return undefined;
+}
+
+function formatOverlays(overlays: SpellSystem["overlays"]): string | undefined {
+	if (!overlays) return undefined;
+	const parts: string[] = [];
+	for (const overlay of Object.values(overlays)) {
+		const desc = overlay.system?.description?.value;
+		if (!desc) continue;
+		const label = overlay.name ? `${overlay.name}: ` : "";
+		parts.push(`${label}${stripFoundryTags(desc)}`);
+	}
+	return parts.length > 0 ? parts.join("\n") : undefined;
+}
+
+/**
+ * Foundry descriptions often include heightening rules inline at the end.
+ * When we extract heightening into a structured field, strip that trailing
+ * text to avoid duplication.
+ */
+const HEIGHTENED_SUFFIX = /\s*Heightened\s*\([^)]*\)[\s\S]*$/;
+
+function normalizeSpell(
+	item: RawFoundryItem,
+	creatureLevel: number,
+): SpellReference {
+	const sys = item.system as unknown as SpellSystem;
+	const usesMax = sys.location?.uses?.max;
+	const isCantrip = sys.traits?.value?.includes("cantrip") ?? false;
+	const rank =
+		sys.location?.heightenedLevel ??
+		(isCantrip ? Math.ceil(creatureLevel / 2) : (sys.level?.value ?? 0));
+	const heightening =
+		formatHeightening(sys.heightening) ?? formatOverlays(sys.overlays);
+
+	let description: string | undefined;
+	if (sys.description?.value) {
+		let text = stripFoundryTags(sys.description.value);
+		// Resolve Foundry Roll formula references to the spell's actual rank.
+		// The parenthesized form (e.g., "(@item.level)d4") is most common.
+		text = text.replaceAll(/\(?@item\.(?:rank|level)\)?/g, String(rank));
+		if (heightening) {
+			text = text.replace(HEIGHTENED_SUFFIX, "").trim();
+		}
+		description = text || undefined;
+	}
+
+	return {
+		name: item.name,
+		slug: sys.slug,
+		rank,
+		description,
+		traits: sys.traits?.value,
+		traditions: sys.traits?.traditions,
+		range: formatRange(sys.range),
+		target: sys.target?.value || undefined,
+		area: formatArea(sys.area),
+		duration: sys.duration?.value || undefined,
+		defense: formatDefense(sys.defense),
+		actionCost: sys.time?.value || undefined,
+		heightening,
+		usesPerDay: usesMax && usesMax > 1 ? usesMax : undefined,
+	};
+}
+
+function normalizeSpellcastingEntry(
+	entry: RawFoundryItem,
+	allSpells: readonly RawFoundryItem[],
+	creatureLevel: number,
+): SpellcastingBlock {
+	const sys = entry.system as unknown as SpellcastingEntrySystem;
+	const tradition = capitalize(sys.tradition?.value ?? "");
+	const prepared = sys.prepared?.value ?? "";
+	const dc = sys.spelldc?.dc ?? 0;
+	const attack = sys.spelldc?.value ?? 0;
+
+	const name = entry.name || `${tradition} ${capitalize(prepared)} Spells`;
+	const headerText = `DC ${dc}${attack ? `, attack +${attack}` : ""}`;
+
+	const linkedSpells = allSpells.filter(
+		(s) => (s.system as unknown as SpellSystem).location?.value === entry._id,
+	);
+
+	const byRank = new Map<number, SpellReference[]>();
+	const cantrips: SpellReference[] = [];
+
+	for (const spell of linkedSpells) {
+		const ref = normalizeSpell(spell, creatureLevel);
+		const isCantrip =
+			(spell.system as unknown as SpellSystem).traits?.value?.includes(
+				"cantrip",
+			) ?? false;
+		if (isCantrip) {
+			cantrips.push(ref);
+			continue;
+		}
+		const rank = ref.rank ?? 0;
+		const existing = byRank.get(rank) ?? [];
+		existing.push(ref);
+		byRank.set(rank, existing);
+	}
+
+	const daily = [...byRank.entries()]
+		.sort(([a], [b]) => b - a)
+		.map(([rank, spells]) => ({
+			uses: rank,
+			each: true,
+			spells,
+		}));
+
+	return {
+		name,
+		headerText,
+		atWill: orUndefined(cantrips),
+		daily: orUndefined(daily),
+	};
+}
+
+function normalizeSpellcasting(
+	items: readonly RawFoundryItem[],
+	creatureLevel: number,
+): SpellcastingBlock[] {
+	const entries = items.filter((i) => i.type === "spellcastingEntry");
+	const spells = items.filter((i) => i.type === "spell");
+	return entries.map((entry) =>
+		normalizeSpellcastingEntry(entry, spells, creatureLevel),
+	);
+}
+
+// -- Main normalization --
+
+function orUndefined<T>(arr: T[]): T[] | undefined {
+	return arr.length > 0 ? arr : undefined;
+}
+
+/** Build display traits: [rarity (if not common), size, ...type traits] */
+function buildTraits(traits: {
+	rarity: string;
+	size: { value: string };
+	value: string[];
+}): string[] {
+	const result: string[] = [];
+	if (traits.rarity && traits.rarity !== "common") {
+		result.push(traits.rarity);
+	}
+	const size = SIZE_MAP[traits.size.value] ?? "medium";
+	result.push(size);
+	result.push(...traits.value);
+	return result;
+}
+
+const HEALING_GLOSSARY =
+	/^<p>@Localize\[PF2E\.NPC\.Abilities\.Glossary\.(FastHealing|Regeneration|NegativeHealing)\]/;
+
+/** Glossary-only abilities that duplicate structured data shown elsewhere. */
+const REDUNDANT_GLOSSARY =
+	/^<p>@Localize\[PF2E\.NPC\.Abilities\.Glossary\.(ConstantSpells|AtWillSpells)\]/;
+
+const STRIP_GLOSSARY_AND_P = /<p>@Localize\[[^\]]+\]<\/p>|<\/?p>/g;
+
+/** True when the description has no user-visible content beyond glossary tags. */
+function isGlossaryOnly(desc: string | undefined): boolean {
+	if (!desc) return true;
+	return desc.replace(STRIP_GLOSSARY_AND_P, "").trim() === "";
+}
+
+function isRedundantAbility(
+	item: RawFoundryItem,
+	excludeName: string | undefined,
+	hpDetails: string | undefined,
+): boolean {
+	const sys = item.system as unknown as ActionSystem;
+	const desc = sys.description?.value;
+	// Ability duplicates the allSaves line — suppress only if glossary-only
+	if (excludeName && item.name.toLowerCase() === excludeName.toLowerCase()) {
+		return isGlossaryOnly(desc);
+	}
+	if (!desc) return false;
+	// Healing/regen glossary when hp.details already shows the info
+	if (hpDetails && HEALING_GLOSSARY.test(desc)) return true;
+	// Spell mechanic glossary reminders shown in the spellcasting section
+	if (REDUNDANT_GLOSSARY.test(desc)) return true;
+	return false;
+}
+
+function actionsByCategory(
+	items: readonly RawFoundryItem[],
+	category: string,
+	excludeName?: string,
+	hpDetails?: string,
+): TraitBlock[] {
+	return items
+		.filter(
+			(a) =>
+				a.type === "action" &&
+				(a.system as unknown as ActionSystem).category === category &&
+				!isRedundantAbility(a, excludeName, hpDetails),
+		)
+		.map(normalizeAbility);
+}
+
+function extractAbilityMods(
+	mods: Record<string, { mod: number }>,
+): Pf2eCreature["abilityMods"] {
+	return {
+		str: mods.str?.mod ?? 0,
+		dex: mods.dex?.mod ?? 0,
+		con: mods.con?.mod ?? 0,
+		int: mods.int?.mod ?? 0,
+		wis: mods.wis?.mod ?? 0,
+		cha: mods.cha?.mod ?? 0,
+	};
+}
+
+export function normalizeFoundryCreature(
+	raw: unknown,
+	sourceCode?: string,
+	sourceDisplayName?: string,
+): Pf2eCreature {
+	const r = raw as RawFoundryCreature;
+	const sys = r.system;
+	const publication = sys.details?.publication;
+
+	const source = sourceCode ?? publication?.title ?? "";
+	const items = r.items ?? [];
+	const allSavesText = sys.attributes.allSaves?.value ?? "";
+
+	return {
+		system: "pf2e",
+		id: makeCreatureId(source, r.name),
+		name: r.name,
+		source,
+		sourceDisplayName: sourceDisplayName ?? publication?.title ?? "",
+		level: sys.details?.level?.value ?? 0,
+		traits: buildTraits(sys.traits),
+		perception: sys.perception?.mod ?? 0,
+		perceptionDetails: sys.perception?.details || undefined,
+		senses: formatSenses(sys.perception?.senses),
+		languages: formatLanguages(sys.details?.languages),
+		skills: formatSkills(sys.skills),
+		abilityMods: extractAbilityMods(sys.abilities ?? {}),
+		ac: sys.attributes.ac.value,
+		acConditional: sys.attributes.ac.details || undefined,
+		saveFort: sys.saves.fortitude.value,
+		saveRef: sys.saves.reflex.value,
+		saveWill: sys.saves.will.value,
+		saveConditional: allSavesText || undefined,
+		hp: sys.attributes.hp.max,
+		hpDetails: sys.attributes.hp.details || undefined,
+		immunities: formatImmunities(sys.attributes.immunities),
+		resistances: formatResistances(sys.attributes.resistances),
+		weaknesses: formatWeaknesses(sys.attributes.weaknesses),
+		speed: formatSpeed(sys.attributes.speed),
+		attacks: orUndefined(
+			items
+				.filter((i) => i.type === "melee")
+				.map((i) => normalizeAttack(i, r.name)),
+		),
+		abilitiesTop: orUndefined(actionsByCategory(items, "interaction")),
+		abilitiesMid: orUndefined(
+			actionsByCategory(
+				items,
+				"defensive",
+				allSavesText || undefined,
+				sys.attributes.hp.details || undefined,
+			),
+		),
+		abilitiesBot: orUndefined(actionsByCategory(items, "offensive")),
+		spellcasting: orUndefined(
+			normalizeSpellcasting(items, sys.details?.level?.value ?? 0),
+		),
+		items:
+			items
+				.filter(isMundaneItem)
+				.map((i) => i.name)
+				.join(", ") || undefined,
+		equipment: orUndefined(
+			items.filter(isDetailedEquipment).map(normalizeEquipmentItem),
+		),
+	};
+}
+
+export function normalizeFoundryCreatures(
+	rawCreatures: unknown[],
+	sourceCode?: string,
+	sourceDisplayName?: string,
+): Pf2eCreature[] {
+	return rawCreatures.map((raw) =>
+		normalizeFoundryCreature(raw, sourceCode, sourceDisplayName),
+	);
+}

apps/web/src/adapters/pf2e-bestiary-index-adapter.ts

@@ -0,0 +1,87 @@
+import type {
+	Pf2eBestiaryIndex,
+	Pf2eBestiaryIndexEntry,
+} from "@initiative/domain";
+
+import rawIndex from "../../../../data/bestiary/pf2e-index.json";
+
+interface CompactCreature {
+	readonly n: string;
+	readonly s: string;
+	readonly lv: number;
+	readonly ac: number;
+	readonly hp: number;
+	readonly pc: number;
+	readonly sz: string;
+	readonly tp: string;
+	readonly f: string;
+	readonly li: string;
+}
+
+interface CompactIndex {
+	readonly sources: Record<string, string>;
+	readonly creatures: readonly CompactCreature[];
+}
+
+function mapCreature(c: CompactCreature): Pf2eBestiaryIndexEntry {
+	return {
+		name: c.n,
+		source: c.s,
+		level: c.lv,
+		ac: c.ac,
+		hp: c.hp,
+		perception: c.pc,
+		size: c.sz,
+		type: c.tp,
+	};
+}
+
+let cachedIndex: Pf2eBestiaryIndex | undefined;
+
+export function loadPf2eBestiaryIndex(): Pf2eBestiaryIndex {
+	if (cachedIndex) return cachedIndex;
+
+	const compact = rawIndex as unknown as CompactIndex;
+	cachedIndex = {
+		sources: compact.sources,
+		creatures: compact.creatures.map(mapCreature),
+	};
+	return cachedIndex;
+}
+
+export function getAllPf2eSourceCodes(): string[] {
+	const index = loadPf2eBestiaryIndex();
+	return Object.keys(index.sources);
+}
+
+export function getDefaultPf2eFetchUrl(
+	_sourceCode: string,
+	baseUrl?: string,
+): string {
+	if (baseUrl !== undefined) {
+		return baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
+	}
+	return "https://raw.githubusercontent.com/foundryvtt/pf2e/v13-dev/packs/pf2e/";
+}
+
+export function getCreaturePathsForSource(sourceCode: string): string[] {
+	const compact = rawIndex as unknown as CompactIndex;
+	return compact.creatures.filter((c) => c.s === sourceCode).map((c) => c.f);
+}
+
+export function getCreatureNamesByPaths(paths: string[]): Map<string, string> {
+	const compact = rawIndex as unknown as CompactIndex;
+	const pathSet = new Set(paths);
+	const result = new Map<string, string>();
+	for (const c of compact.creatures) {
+		if (pathSet.has(c.f)) {
+			result.set(c.f, c.n);
+		}
+	}
+	return result;
+}
+
+export function getPf2eSourceDisplayName(sourceCode: string): string {
+	const index = loadPf2eBestiaryIndex();
+	return index.sources[sourceCode] ?? sourceCode;
+}

apps/web/src/adapters/ports.ts

@@ -0,0 +1,61 @@
+import type {
+	AnyCreature,
+	BestiaryIndex,
+	CreatureId,
+	Encounter,
+	Pf2eBestiaryIndex,
+	PlayerCharacter,
+	UndoRedoState,
+} from "@initiative/domain";
+
+export interface EncounterPersistence {
+	load(): Encounter | null;
+	save(encounter: Encounter): void;
+}
+
+export interface UndoRedoPersistence {
+	load(): UndoRedoState;
+	save(state: UndoRedoState): void;
+}
+
+export interface PlayerCharacterPersistence {
+	load(): PlayerCharacter[];
+	save(characters: PlayerCharacter[]): void;
+}
+
+export interface CachedSourceInfo {
+	readonly sourceCode: string;
+	readonly displayName: string;
+	readonly creatureCount: number;
+	readonly cachedAt: number;
+}
+
+export interface BestiaryCachePort {
+	cacheSource(
+		system: string,
+		sourceCode: string,
+		displayName: string,
+		creatures: AnyCreature[],
+	): Promise<void>;
+	isSourceCached(system: string, sourceCode: string): Promise<boolean>;
+	getCachedSources(system?: string): Promise<CachedSourceInfo[]>;
+	clearSource(system: string, sourceCode: string): Promise<void>;
+	clearAll(): Promise<void>;
+	loadAllCachedCreatures(): Promise<Map<CreatureId, AnyCreature>>;
+}
+
+export interface BestiaryIndexPort {
+	loadIndex(): BestiaryIndex;
+	getAllSourceCodes(): string[];
+	getDefaultFetchUrl(sourceCode: string, baseUrl?: string): string;
+	getSourceDisplayName(sourceCode: string): string;
+}
+
+export interface Pf2eBestiaryIndexPort {
+	loadIndex(): Pf2eBestiaryIndex;
+	getAllSourceCodes(): string[];
+	getDefaultFetchUrl(sourceCode: string, baseUrl?: string): string;
+	getSourceDisplayName(sourceCode: string): string;
+	getCreaturePathsForSource(sourceCode: string): string[];
+	getCreatureNamesByPaths(paths: string[]): Map<string, string>;
+}

apps/web/src/adapters/production-adapters.ts

@@ -0,0 +1,53 @@
+import type { Adapters } from "../contexts/adapter-context.js";
+import {
+	loadEncounter,
+	saveEncounter,
+} from "../persistence/encounter-storage.js";
+import {
+	loadPlayerCharacters,
+	savePlayerCharacters,
+} from "../persistence/player-character-storage.js";
+import {
+	loadUndoRedoStacks,
+	saveUndoRedoStacks,
+} from "../persistence/undo-redo-storage.js";
+import * as bestiaryCache from "./bestiary-cache.js";
+import * as bestiaryIndex from "./bestiary-index-adapter.js";
+import * as pf2eBestiaryIndex from "./pf2e-bestiary-index-adapter.js";
+
+export const productionAdapters: Adapters = {
+	encounterPersistence: {
+		load: loadEncounter,
+		save: saveEncounter,
+	},
+	undoRedoPersistence: {
+		load: loadUndoRedoStacks,
+		save: saveUndoRedoStacks,
+	},
+	playerCharacterPersistence: {
+		load: loadPlayerCharacters,
+		save: savePlayerCharacters,
+	},
+	bestiaryCache: {
+		cacheSource: bestiaryCache.cacheSource,
+		isSourceCached: bestiaryCache.isSourceCached,
+		getCachedSources: bestiaryCache.getCachedSources,
+		clearSource: bestiaryCache.clearSource,
+		clearAll: bestiaryCache.clearAll,
+		loadAllCachedCreatures: bestiaryCache.loadAllCachedCreatures,
+	},
+	bestiaryIndex: {
+		loadIndex: bestiaryIndex.loadBestiaryIndex,
+		getAllSourceCodes: bestiaryIndex.getAllSourceCodes,
+		getDefaultFetchUrl: bestiaryIndex.getDefaultFetchUrl,
+		getSourceDisplayName: bestiaryIndex.getSourceDisplayName,
+	},
+	pf2eBestiaryIndex: {
+		loadIndex: pf2eBestiaryIndex.loadPf2eBestiaryIndex,
+		getAllSourceCodes: pf2eBestiaryIndex.getAllPf2eSourceCodes,
+		getDefaultFetchUrl: pf2eBestiaryIndex.getDefaultPf2eFetchUrl,
+		getSourceDisplayName: pf2eBestiaryIndex.getPf2eSourceDisplayName,
+		getCreaturePathsForSource: pf2eBestiaryIndex.getCreaturePathsForSource,
+		getCreatureNamesByPaths: pf2eBestiaryIndex.getCreatureNamesByPaths,
+	},
+};

apps/web/src/adapters/strip-foundry-tags.ts

@@ -0,0 +1,110 @@
+/**
+ * Strips Foundry VTT HTML descriptions with enrichment syntax to plain
+ * readable text.  Handles @Damage, @Check, @UUID, @Template and generic
+ * @Tag patterns as well as common HTML elements.
+ */
+
+// -- Enrichment-param helpers --
+
+function formatDamage(params: string): string {
+	// "3d6+10[fire]" → "3d6+10 fire"
+	// "d4[persistent,fire]" → "d4 persistent fire"
+	return params
+		.replaceAll(
+			/\[([^\]]*)\]/g,
+			(_, type: string) => ` ${type.replaceAll(",", " ")}`,
+		)
+		.trim();
+}
+
+function formatCheck(params: string): string {
+	// "reflex|dc:33|basic" → "DC 33 basic Reflex"
+	const parts = params.split("|");
+	const type = parts[0] ?? "";
+	let dc = "";
+	let basic = false;
+	for (const part of parts.slice(1)) {
+		if (part.startsWith("dc:")) {
+			dc = part.slice(3);
+		} else if (part === "basic") {
+			basic = true;
+		}
+	}
+	const label = type.charAt(0).toUpperCase() + type.slice(1);
+	const dcStr = dc ? `DC ${dc} ` : "";
+	const basicStr = basic ? "basic " : "";
+	return `${dcStr}${basicStr}${label}`;
+}
+
+function formatTemplate(params: string): string {
+	// "cone|distance:40" → "40-foot cone"
+	const parts = params.split("|");
+	const shape = parts[0] ?? "";
+	let distance = "";
+	for (const part of parts.slice(1)) {
+		if (part.startsWith("distance:")) {
+			distance = part.slice(9);
+		}
+	}
+	return distance ? `${distance}-foot ${shape}` : shape;
+}
+
+export function stripFoundryTags(html: string): string {
+	if (typeof html !== "string") return String(html);
+	let result = html;
+
+	// Strip Foundry enrichment tags (with optional display text)
+	// @Tag[params]{display} → display (prefer display text)
+	// @Tag[params] → extracted content
+
+	// @Damage has nested brackets: @Damage[3d6+10[fire]]
+	result = result.replaceAll(
+		/@Damage\[((?:[^[\]]|\[[^\]]*\])*)\](?:\{([^}]+)\})?/g,
+		(_, params: string, display: string | undefined) =>
+			display ?? formatDamage(params),
+	);
+	result = result.replaceAll(
+		/@Check\[([^\]]+)\](?:\{([^}]*)\})?/g,
+		(_, params: string) => formatCheck(params),
+	);
+	result = result.replaceAll(
+		/@UUID\[[^\]]+?([^./\]]+)\](?:\{([^}]+)\})?/g,
+		(_, lastSegment: string, display: string | undefined) =>
+			display ?? lastSegment,
+	);
+	result = result.replaceAll(
+		/@Template\[([^\]]+)\](?:\{([^}]+)\})?/g,
+		(_, params: string, display: string | undefined) =>
+			display ?? formatTemplate(params),
+	);
+	// Catch-all for unknown @Tag patterns
+	result = result.replaceAll(
+		/@\w+\[[^\]]*\](?:\{([^}]+)\})?/g,
+		(_, display: string | undefined) => display ?? "",
+	);
+
+	// Strip action-glyph spans (content is a number the renderer handles)
+	result = result.replaceAll(/<span class="action-glyph">[^<]*<\/span>/gi, "");
+
+	// Strip HTML tags (preserve <strong> for UI rendering)
+	result = result.replaceAll(/<br\s*\/?>/gi, "\n");
+	result = result.replaceAll(/<hr\s*\/?>/gi, "\n");
+	result = result.replaceAll(/<\/p>\s*<p[^>]*>/gi, "\n");
+	result = result.replaceAll(/<(?!\/?(?:strong|em|ul|ol|li)\b)[^>]+>/g, "");
+
+	// Decode common HTML entities
+	result = result.replaceAll("&amp;", "&");
+	result = result.replaceAll("&lt;", "<");
+	result = result.replaceAll("&gt;", ">");
+	result = result.replaceAll("&quot;", '"');
+
+	// Collapse whitespace around list tags so they don't create extra
+	// line breaks when rendered with whitespace-pre-line
+	result = result.replaceAll(/\s*(<\/?(?:ul|ol)>)\s*/g, "$1");
+	result = result.replaceAll(/\s*(<\/?li>)\s*/g, "$1");
+
+	// Collapse whitespace
+	result = result.replaceAll(/[ \t]+/g, " ");
+	result = result.replaceAll(/\n\s*\n/g, "\n");
+	return result.trim();
+}

apps/web/src/adapters/strip-tags.ts

@@ -98,20 +98,26 @@ export function stripTags(text: string): string {
 	// Generic tags: {@tag Display|Source|...} → Display (first segment before |)
 	// Covers: spell, condition, damage, dice, variantrule, action, skill,
 	//         creature, hazard, status, plus any unknown tags
-	result = result.replaceAll(
+	// Run in a loop to resolve nested tags (e.g. {@b ... {@spell fireball} ...})
-		/\{@(\w+)\s+([^}]+)\}/g,
+	// from innermost to outermost.
-		(_, tag: string, content: string) => {
+	const tagPattern = /\{@(\w+)\s+([^}]+)\}/g;
-			// For tags with Display|Source format, extract first segment
+	while (tagPattern.test(result)) {
-			const segments = content.split("|");
+		result = result.replaceAll(
+			tagPattern,
+			(_, tag: string, content: string) => {
+				const segments = content.split("|");
 
-			// Some tags have a third segment as display text: {@variantrule Name|Source|Display}
+				if (
-			if ((tag === "variantrule" || tag === "action") && segments.length >= 3) {
+					(tag === "variantrule" || tag === "action") &&
-				return segments[2];
+					segments.length >= 3
-			}
+				) {
+					return segments[2];
+				}
 
-			return segments[0];
+				return segments[0];
-		},
+			},
-	);
+		);
+	}
 
 	return result;
 }

apps/web/src/components/__tests__/action-bar.test.tsx

@@ -1,41 +1,16 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
 
-import { cleanup, render, screen } from "@testing-library/react";
+import { playerCharacterId } from "@initiative/domain";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
 import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
 import { polyfillDialog } from "../../__tests__/polyfill-dialog.js";
 import { AllProviders } from "../../__tests__/test-providers.js";
 import { ActionBar } from "../action-bar.js";
 
-// Mock persistence — no localStorage interaction
-vi.mock("../../persistence/encounter-storage.js", () => ({
-	loadEncounter: () => null,
-	saveEncounter: () => {},
-}));
-
-vi.mock("../../persistence/player-character-storage.js", () => ({
-	loadPlayerCharacters: () => [],
-	savePlayerCharacters: () => {},
-}));
-
-// Mock bestiary — no IndexedDB or JSON index
-vi.mock("../../adapters/bestiary-cache.js", () => ({
-	loadAllCachedCreatures: () => Promise.resolve(new Map()),
-	isSourceCached: () => Promise.resolve(false),
-	cacheSource: () => Promise.resolve(),
-	getCachedSources: () => Promise.resolve([]),
-	clearSource: () => Promise.resolve(),
-	clearAll: () => Promise.resolve(),
-}));
-
-vi.mock("../../adapters/bestiary-index-adapter.js", () => ({
-	loadBestiaryIndex: () => ({ sources: {}, creatures: [] }),
-	getAllSourceCodes: () => [],
-	getDefaultFetchUrl: () => "",
-	getSourceDisplayName: (code: string) => code,
-}));
-
 // DOM API stubs — jsdom doesn't implement these
 beforeAll(() => {
 	Object.defineProperty(globalThis, "matchMedia", {
@@ -60,121 +35,341 @@ function renderBar(props: Partial<Parameters<typeof ActionBar>[0]> = {}) {
 	return render(<ActionBar {...props} />, { wrapper: AllProviders });
 }
 
+function renderBarWithBestiary(
+	props: Partial<Parameters<typeof ActionBar>[0]> = {},
+) {
+	const adapters = createTestAdapters();
+	adapters.bestiaryIndex = {
+		...adapters.bestiaryIndex,
+		loadIndex: () => ({
+			sources: { MM: "Monster Manual" },
+			creatures: [
+				{
+					name: "Goblin",
+					source: "MM",
+					ac: 15,
+					hp: 7,
+					dex: 14,
+					cr: "1/4",
+					initiativeProficiency: 0,
+					size: "Small",
+					type: "humanoid",
+				},
+				{
+					name: "Golem, Iron",
+					source: "MM",
+					ac: 20,
+					hp: 210,
+					dex: 9,
+					cr: "16",
+					initiativeProficiency: 0,
+					size: "Large",
+					type: "construct",
+				},
+			],
+		}),
+		getSourceDisplayName: (code: string) =>
+			code === "MM" ? "Monster Manual" : code,
+	};
+	return render(<ActionBar {...props} />, {
+		wrapper: ({ children }: { children: ReactNode }) => (
+			<AllProviders adapters={adapters}>{children}</AllProviders>
+		),
+	});
+}
+
+function renderBarWithPCs(
+	props: Partial<Parameters<typeof ActionBar>[0]> = {},
+) {
+	const adapters = createTestAdapters({
+		playerCharacters: [
+			{
+				id: playerCharacterId("pc-1"),
+				name: "Gandalf",
+				ac: 15,
+				maxHp: 40,
+			},
+		],
+	});
+	adapters.bestiaryIndex = {
+		...adapters.bestiaryIndex,
+		loadIndex: () => ({
+			sources: { MM: "Monster Manual" },
+			creatures: [
+				{
+					name: "Goblin",
+					source: "MM",
+					ac: 15,
+					hp: 7,
+					dex: 14,
+					cr: "1/4",
+					initiativeProficiency: 0,
+					size: "Small",
+					type: "humanoid",
+				},
+			],
+		}),
+		getSourceDisplayName: (code: string) =>
+			code === "MM" ? "Monster Manual" : code,
+	};
+	return render(<ActionBar {...props} />, {
+		wrapper: ({ children }: { children: ReactNode }) => (
+			<AllProviders adapters={adapters}>{children}</AllProviders>
+		),
+	});
+}
+
 describe("ActionBar", () => {
-	it("renders input with placeholder '+ Add combatants'", () => {
+	describe("basic rendering and custom add", () => {
-		renderBar();
+		it("renders input with placeholder '+ Add combatants'", () => {
-		expect(screen.getByPlaceholderText("+ Add combatants")).toBeInTheDocument();
+			renderBar();
+			expect(
+				screen.getByPlaceholderText("+ Add combatants"),
+			).toBeInTheDocument();
+		});
+
+		it("submitting with a name adds a combatant", async () => {
+			const user = userEvent.setup();
+			renderBar();
+			const input = screen.getByPlaceholderText("+ Add combatants");
+			await user.type(input, "Goblin");
+			const addButton = screen.getByRole("button", { name: "Add" });
+			await user.click(addButton);
+			expect(input).toHaveValue("");
+		});
+
+		it("submitting with empty name does nothing", async () => {
+			const user = userEvent.setup();
+			renderBar();
+			const input = screen.getByPlaceholderText("+ Add combatants");
+			await user.type(input, "{Enter}");
+			expect(input).toHaveValue("");
+		});
+
+		it("shows custom fields (Init, AC, MaxHP) when name >= 2 chars and no bestiary suggestions", async () => {
+			const user = userEvent.setup();
+			renderBar();
+			const input = screen.getByPlaceholderText("+ Add combatants");
+			await user.type(input, "Go");
+			expect(screen.getByPlaceholderText("Init")).toBeInTheDocument();
+			expect(screen.getByPlaceholderText("AC")).toBeInTheDocument();
+			expect(screen.getByPlaceholderText("MaxHP")).toBeInTheDocument();
+		});
+
+		it("shows Add button when name >= 2 chars and no suggestions", async () => {
+			const user = userEvent.setup();
+			renderBar();
+			const input = screen.getByPlaceholderText("+ Add combatants");
+			await user.type(input, "Go");
+			expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+		});
+
+		it("submits custom stats with combatant", async () => {
+			const user = userEvent.setup();
+			renderBar();
+			const input = screen.getByPlaceholderText("+ Add combatants");
+			await user.type(input, "Fighter");
+			await user.type(screen.getByPlaceholderText("Init"), "15");
+			await user.type(screen.getByPlaceholderText("AC"), "18");
+			await user.type(screen.getByPlaceholderText("MaxHP"), "45");
+			await user.click(screen.getByRole("button", { name: "Add" }));
+			expect(input).toHaveValue("");
+		});
 	});
 
-	it("submitting with a name adds a combatant", async () => {
+	describe("bestiary suggestions and queuing", () => {
-		const user = userEvent.setup();
+		it("shows bestiary suggestions when typing a matching name", async () => {
-		renderBar();
+			const user = userEvent.setup();
-		const input = screen.getByPlaceholderText("+ Add combatants");
+			renderBarWithBestiary();
-		await user.type(input, "Goblin");
+			const input = screen.getByPlaceholderText("+ Add combatants");
-		// The Add button appears when name >= 2 chars and no suggestions
+			await user.type(input, "Go");
-		const addButton = screen.getByRole("button", { name: "Add" });
+
-		await user.click(addButton);
+			await waitFor(() => {
-		// Input is cleared after adding (context handles the state)
+				expect(screen.getByText("Goblin")).toBeInTheDocument();
-		expect(input).toHaveValue("");
+			});
+			expect(screen.getByText("Golem, Iron")).toBeInTheDocument();
+		});
+
+		it("clicking a suggestion queues it with count badge", async () => {
+			const user = userEvent.setup();
+			renderBarWithBestiary();
+			const input = screen.getByPlaceholderText("+ Add combatants");
+			await user.type(input, "Go");
+
+			await waitFor(() => {
+				expect(screen.getByText("Goblin")).toBeInTheDocument();
+			});
+
+			// Click the Goblin suggestion
+			await user.click(screen.getByText("Goblin"));
+
+			// Should show count badge "1"
+			expect(screen.getByText("1")).toBeInTheDocument();
+		});
+
+		it("clicking same suggestion again increments count", async () => {
+			const user = userEvent.setup();
+			renderBarWithBestiary();
+			const input = screen.getByPlaceholderText("+ Add combatants");
+			await user.type(input, "Go");
+
+			await waitFor(() => {
+				expect(screen.getByText("Goblin")).toBeInTheDocument();
+			});
+
+			await user.click(screen.getByText("Goblin"));
+			await user.click(screen.getByText("Goblin"));
+
+			expect(screen.getByText("2")).toBeInTheDocument();
+		});
+
+		it("confirming queued creatures adds them to the encounter", async () => {
+			const user = userEvent.setup();
+			renderBarWithBestiary();
+			const input = screen.getByPlaceholderText("+ Add combatants");
+			await user.type(input, "Go");
+
+			await waitFor(() => {
+				expect(screen.getByText("Goblin")).toBeInTheDocument();
+			});
+
+			// Queue 1 Goblin
+			await user.click(screen.getByText("Goblin"));
+
+			// Press Enter to confirm the queued creature
+			await user.keyboard("{Enter}");
+
+			// Input should be cleared after confirming
+			expect(input).toHaveValue("");
+		});
+
+		it("clears queued when search text no longer matches", async () => {
+			const user = userEvent.setup();
+			renderBarWithBestiary();
+			const input = screen.getByPlaceholderText("+ Add combatants");
+			await user.type(input, "Go");
+
+			await waitFor(() => {
+				expect(screen.getByText("Goblin")).toBeInTheDocument();
+			});
+
+			await user.click(screen.getByText("Goblin"));
+			expect(screen.getByText("1")).toBeInTheDocument();
+
+			// Change search to something with no matches
+			await user.clear(input);
+			await user.type(input, "xyz");
+
+			// Count badge should be gone
+			expect(screen.queryByText("1")).not.toBeInTheDocument();
+		});
 	});
 
-	it("submitting with empty name does nothing", async () => {
+	describe("player character matching", () => {
-		const user = userEvent.setup();
+		it("shows matching player characters in suggestions", async () => {
-		renderBar();
+			const user = userEvent.setup();
-		// Submit the form directly (Enter on empty input)
+			renderBarWithPCs();
-		const input = screen.getByPlaceholderText("+ Add combatants");
+			const input = screen.getByPlaceholderText("+ Add combatants");
-		await user.type(input, "{Enter}");
+			await user.type(input, "Gan");
-		// Input stays empty, no error
+
-		expect(input).toHaveValue("");
+			await waitFor(() => {
+				expect(screen.getByText("Gandalf")).toBeInTheDocument();
+			});
+			expect(screen.getByText("Player")).toBeInTheDocument();
+		});
 	});
 
-	it("shows custom fields (Init, AC, MaxHP) when name >= 2 chars and no bestiary suggestions", async () => {
+	describe("browse mode", () => {
-		const user = userEvent.setup();
+		it("toggles browse mode via eye icon button", async () => {
-		renderBar();
+			const user = userEvent.setup();
-		const input = screen.getByPlaceholderText("+ Add combatants");
+			renderBarWithBestiary();
-		await user.type(input, "Go");
+
-		expect(screen.getByPlaceholderText("Init")).toBeInTheDocument();
+			const browseButton = screen.getByRole("button", {
-		expect(screen.getByPlaceholderText("AC")).toBeInTheDocument();
+				name: "Browse stat blocks",
-		expect(screen.getByPlaceholderText("MaxHP")).toBeInTheDocument();
+			});
+			await user.click(browseButton);
+
+			expect(
+				screen.getByPlaceholderText("Search stat blocks..."),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole("button", { name: "Switch to add mode" }),
+			).toBeInTheDocument();
+		});
+
+		it("browse mode shows suggestions without add UI", async () => {
+			const user = userEvent.setup();
+			renderBarWithBestiary();
+
+			await user.click(
+				screen.getByRole("button", { name: "Browse stat blocks" }),
+			);
+			const input = screen.getByPlaceholderText("Search stat blocks...");
+			await user.type(input, "Go");
+
+			await waitFor(() => {
+				expect(screen.getByText("Goblin")).toBeInTheDocument();
+			});
+			// No Add button in browse mode
+			expect(
+				screen.queryByRole("button", { name: "Add" }),
+			).not.toBeInTheDocument();
+		});
 	});
 
-	it("shows Add button when name >= 2 chars and no suggestions", async () => {
+	describe("overflow menu", () => {
-		const user = userEvent.setup();
+		it("does not show roll all initiative button when no creature combatants", () => {
-		renderBar();
+			renderBar();
-		const input = screen.getByPlaceholderText("+ Add combatants");
+			expect(
-		await user.type(input, "Go");
+				screen.queryByRole("button", { name: "Roll all initiative" }),
-		expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+			).not.toBeInTheDocument();
-	});
+		});
 
-	it("does not show roll all initiative button when no creature combatants", () => {
+		it("shows overflow menu items", () => {
-		renderBar();
+			renderBar({ onManagePlayers: vi.fn() });
-		expect(
+			expect(
-			screen.queryByRole("button", { name: "Roll all initiative" }),
+				screen.getByRole("button", { name: "More actions" }),
-		).not.toBeInTheDocument();
+			).toBeInTheDocument();
-	});
+		});
 
-	it("shows overflow menu items", () => {
+		it("opens export method dialog via overflow menu", async () => {
-		renderBar({ onManagePlayers: vi.fn() });
+			const user = userEvent.setup();
-		// The overflow menu should be present (it contains Player Characters etc.)
+			renderBar();
-		expect(
+			await user.click(screen.getByRole("button", { name: "More actions" }));
-			screen.getByRole("button", { name: "More actions" }),
+			const items = screen.getAllByText("Export Encounter");
-		).toBeInTheDocument();
+			await user.click(items[0]);
-	});
+			expect(
+				screen.getAllByText("Export Encounter").length,
+			).toBeGreaterThanOrEqual(1);
+		});
 
-	it("opens export method dialog via overflow menu", async () => {
+		it("opens import method dialog via overflow menu", async () => {
-		const user = userEvent.setup();
+			const user = userEvent.setup();
-		renderBar();
+			renderBar();
-		await user.click(screen.getByRole("button", { name: "More actions" }));
+			await user.click(screen.getByRole("button", { name: "More actions" }));
-		// Click the menu item
+			const items = screen.getAllByText("Import Encounter");
-		const items = screen.getAllByText("Export Encounter");
+			await user.click(items[0]);
-		await user.click(items[0]);
+			expect(
-		// Dialog should now be open — it renders a second "Export Encounter" as heading
+				screen.getAllByText("Import Encounter").length,
-		expect(
+			).toBeGreaterThanOrEqual(1);
-			screen.getAllByText("Export Encounter").length,
+		});
-		).toBeGreaterThanOrEqual(1);
-	});
 
-	it("opens import method dialog via overflow menu", async () => {
+		it("calls onManagePlayers from overflow menu", async () => {
-		const user = userEvent.setup();
+			const onManagePlayers = vi.fn();
-		renderBar();
+			const user = userEvent.setup();
-		await user.click(screen.getByRole("button", { name: "More actions" }));
+			renderBar({ onManagePlayers });
-		const items = screen.getAllByText("Import Encounter");
+			await user.click(screen.getByRole("button", { name: "More actions" }));
-		await user.click(items[0]);
+			await user.click(screen.getByText("Player Characters"));
-		expect(
+			expect(onManagePlayers).toHaveBeenCalledOnce();
-			screen.getAllByText("Import Encounter").length,
+		});
-		).toBeGreaterThanOrEqual(1);
-	});
 
-	it("calls onManagePlayers from overflow menu", async () => {
+		it("calls onOpenSettings from overflow menu", async () => {
-		const onManagePlayers = vi.fn();
+			const onOpenSettings = vi.fn();
-		const user = userEvent.setup();
+			const user = userEvent.setup();
-		renderBar({ onManagePlayers });
+			renderBar({ onOpenSettings });
-		await user.click(screen.getByRole("button", { name: "More actions" }));
+			await user.click(screen.getByRole("button", { name: "More actions" }));
-		await user.click(screen.getByText("Player Characters"));
+			await user.click(screen.getByText("Settings"));
-		expect(onManagePlayers).toHaveBeenCalledOnce();
+			expect(onOpenSettings).toHaveBeenCalledOnce();
-	});
+		});
-
-	it("calls onOpenSettings from overflow menu", async () => {
-		const onOpenSettings = vi.fn();
-		const user = userEvent.setup();
-		renderBar({ onOpenSettings });
-		await user.click(screen.getByRole("button", { name: "More actions" }));
-		await user.click(screen.getByText("Settings"));
-		expect(onOpenSettings).toHaveBeenCalledOnce();
-	});
-
-	it("submits custom stats with combatant", async () => {
-		const user = userEvent.setup();
-		renderBar();
-		const input = screen.getByPlaceholderText("+ Add combatants");
-		await user.type(input, "Fighter");
-		const initInput = screen.getByPlaceholderText("Init");
-		const acInput = screen.getByPlaceholderText("AC");
-		const hpInput = screen.getByPlaceholderText("MaxHP");
-		await user.type(initInput, "15");
-		await user.type(acInput, "18");
-		await user.type(hpInput, "45");
-		await user.click(screen.getByRole("button", { name: "Add" }));
-		expect(input).toHaveValue("");
 	});
 });

apps/web/src/components/__tests__/bulk-import-prompt.test.tsx

@@ -0,0 +1,166 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import { AdapterProvider } from "../../contexts/adapter-context.js";
+import { RulesEditionProvider } from "../../contexts/rules-edition-context.js";
+import { BulkImportPrompt } from "../bulk-import-prompt.js";
+
+const THREE_SOURCES_REGEX = /3 sources/;
+const GITHUB_URL_REGEX = /raw\.githubusercontent/;
+const LOADING_PROGRESS_REGEX = /Loading sources\.\.\. 4\/10/;
+const SEVEN_OF_TEN_REGEX = /7\/10 sources/;
+const THREE_FAILED_REGEX = /3 failed/;
+
+afterEach(cleanup);
+
+const mockFetchAndCacheSource = vi.fn();
+const mockIsSourceCached = vi.fn().mockResolvedValue(false);
+const mockRefreshCache = vi.fn();
+const mockStartImport = vi.fn();
+const mockReset = vi.fn();
+const mockDismissPanel = vi.fn();
+
+let mockImportState = {
+	status: "idle" as string,
+	total: 0,
+	completed: 0,
+	failed: 0,
+};
+
+// Uses context mocks because the bulk import state machine (idle → loading →
+// complete → partial-failure) is impractical to drive through user interactions
+// without real network calls. Consider migrating if adapter injection expands
+// to cover these state transitions.
+vi.mock("../../contexts/bestiary-context.js", () => ({
+	useBestiaryContext: () => ({
+		fetchAndCacheSource: mockFetchAndCacheSource,
+		isSourceCached: mockIsSourceCached,
+		refreshCache: mockRefreshCache,
+	}),
+}));
+
+vi.mock("../../contexts/bulk-import-context.js", () => ({
+	useBulkImportContext: () => ({
+		state: mockImportState,
+		startImport: mockStartImport,
+		reset: mockReset,
+	}),
+}));
+
+vi.mock("../../contexts/side-panel-context.js", () => ({
+	useSidePanelContext: () => ({
+		dismissPanel: mockDismissPanel,
+	}),
+}));
+
+function createAdaptersWithSources() {
+	const adapters = createTestAdapters();
+	adapters.bestiaryIndex = {
+		...adapters.bestiaryIndex,
+		getAllSourceCodes: () => ["MM", "VGM", "XGE"],
+	};
+	return adapters;
+}
+
+function renderWithAdapters() {
+	const adapters = createAdaptersWithSources();
+	return render(
+		<RulesEditionProvider>
+			<AdapterProvider adapters={adapters}>
+				<BulkImportPrompt />
+			</AdapterProvider>
+		</RulesEditionProvider>,
+	);
+}
+
+describe("BulkImportPrompt", () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+		mockImportState = { status: "idle", total: 0, completed: 0, failed: 0 };
+	});
+
+	it("idle: shows base URL input, source count, Load All button", () => {
+		renderWithAdapters();
+		expect(screen.getByText(THREE_SOURCES_REGEX)).toBeInTheDocument();
+		expect(screen.getByDisplayValue(GITHUB_URL_REGEX)).toBeInTheDocument();
+		expect(
+			screen.getByRole("button", { name: "Load All" }),
+		).toBeInTheDocument();
+	});
+
+	it("idle: clearing URL disables the button", async () => {
+		const user = userEvent.setup();
+		renderWithAdapters();
+
+		const input = screen.getByDisplayValue(GITHUB_URL_REGEX);
+		await user.clear(input);
+		expect(screen.getByRole("button", { name: "Load All" })).toBeDisabled();
+	});
+
+	it("idle: clicking Load All calls startImport with URL", async () => {
+		const user = userEvent.setup();
+		renderWithAdapters();
+
+		await user.click(screen.getByRole("button", { name: "Load All" }));
+		expect(mockStartImport).toHaveBeenCalledWith(
+			expect.stringContaining("raw.githubusercontent"),
+			mockFetchAndCacheSource,
+			mockIsSourceCached,
+			mockRefreshCache,
+		);
+	});
+
+	it("loading: shows progress text and progress bar", () => {
+		mockImportState = {
+			status: "loading",
+			total: 10,
+			completed: 3,
+			failed: 1,
+		};
+		renderWithAdapters();
+		expect(screen.getByText(LOADING_PROGRESS_REGEX)).toBeInTheDocument();
+	});
+
+	it("complete: shows success message and Done button", () => {
+		mockImportState = {
+			status: "complete",
+			total: 10,
+			completed: 10,
+			failed: 0,
+		};
+		renderWithAdapters();
+		expect(screen.getByText("All sources loaded")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Done" })).toBeInTheDocument();
+	});
+
+	it("complete: Done calls dismissPanel and reset", async () => {
+		mockImportState = {
+			status: "complete",
+			total: 10,
+			completed: 10,
+			failed: 0,
+		};
+		const user = userEvent.setup();
+		renderWithAdapters();
+
+		await user.click(screen.getByRole("button", { name: "Done" }));
+		expect(mockDismissPanel).toHaveBeenCalled();
+		expect(mockReset).toHaveBeenCalled();
+	});
+
+	it("partial-failure: shows loaded/failed counts", () => {
+		mockImportState = {
+			status: "partial-failure",
+			total: 10,
+			completed: 7,
+			failed: 3,
+		};
+		renderWithAdapters();
+		expect(screen.getByText(SEVEN_OF_TEN_REGEX)).toBeInTheDocument();
+		expect(screen.getByText(THREE_FAILED_REGEX)).toBeInTheDocument();
+	});
+});

apps/web/src/components/__tests__/color-palette.test.tsx

@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { VALID_PLAYER_COLORS } from "@initiative/domain";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+afterEach(cleanup);
+
+import { ColorPalette } from "../color-palette.js";
+
+describe("ColorPalette", () => {
+	it("renders a button for each valid color", () => {
+		render(<ColorPalette value="" onChange={() => {}} />);
+		const buttons = screen.getAllByRole("button");
+		expect(buttons).toHaveLength(VALID_PLAYER_COLORS.size);
+	});
+
+	it("each button has an aria-label matching the color name", () => {
+		render(<ColorPalette value="" onChange={() => {}} />);
+		for (const color of VALID_PLAYER_COLORS) {
+			expect(screen.getByRole("button", { name: color })).toBeInTheDocument();
+		}
+	});
+
+	it("clicking a color calls onChange with that color", async () => {
+		const user = userEvent.setup();
+		const onChange = vi.fn();
+		render(<ColorPalette value="" onChange={onChange} />);
+
+		await user.click(screen.getByRole("button", { name: "blue" }));
+		expect(onChange).toHaveBeenCalledWith("blue");
+	});
+
+	it("clicking the selected color deselects it", async () => {
+		const user = userEvent.setup();
+		const onChange = vi.fn();
+		render(<ColorPalette value="red" onChange={onChange} />);
+
+		await user.click(screen.getByRole("button", { name: "red" }));
+		expect(onChange).toHaveBeenCalledWith("");
+	});
+
+	it("selected color has ring styling", () => {
+		render(<ColorPalette value="green" onChange={() => {}} />);
+		const selected = screen.getByRole("button", { name: "green" });
+		expect(selected.className).toContain("ring-2");
+	});
+
+	it("non-selected colors do not have ring styling", () => {
+		render(<ColorPalette value="green" onChange={() => {}} />);
+		const other = screen.getByRole("button", { name: "blue" });
+		expect(other.className).not.toContain("ring-2");
+	});
+});

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

@@ -10,34 +10,8 @@ import { CombatantRow } from "../combatant-row.js";
 import { PLAYER_COLOR_HEX } from "../player-icon-map.js";
 
 const TEMP_HP_REGEX = /^\+\d/;
-
+const CURRENT_HP_7_REGEX = /Current HP: 7/;
-// Mock persistence — no localStorage interaction
+const CURRENT_HP_REGEX = /Current HP/;
-vi.mock("../../persistence/encounter-storage.js", () => ({
-	loadEncounter: () => null,
-	saveEncounter: () => {},
-}));
-
-vi.mock("../../persistence/player-character-storage.js", () => ({
-	loadPlayerCharacters: () => [],
-	savePlayerCharacters: () => {},
-}));
-
-// Mock bestiary — no IndexedDB or JSON index
-vi.mock("../../adapters/bestiary-cache.js", () => ({
-	loadAllCachedCreatures: () => Promise.resolve(new Map()),
-	isSourceCached: () => Promise.resolve(false),
-	cacheSource: () => Promise.resolve(),
-	getCachedSources: () => Promise.resolve([]),
-	clearSource: () => Promise.resolve(),
-	clearAll: () => Promise.resolve(),
-}));
-
-vi.mock("../../adapters/bestiary-index-adapter.js", () => ({
-	loadBestiaryIndex: () => ({ sources: {}, creatures: [] }),
-	getAllSourceCodes: () => [],
-	getDefaultFetchUrl: () => "",
-	getSourceDisplayName: (code: string) => code,
-}));
 
 // DOM API stubs
 beforeAll(() => {
@@ -257,6 +231,172 @@ describe("CombatantRow", () => {
 		});
 	});
 
+	describe("inline name editing", () => {
+		it("click rename → type new name → blur commits rename", async () => {
+			const user = userEvent.setup();
+			renderRow();
+
+			await user.click(screen.getByRole("button", { name: "Rename" }));
+			const input = screen.getByDisplayValue("Goblin");
+			await user.clear(input);
+			await user.type(input, "Hobgoblin");
+			await user.tab(); // blur
+			// The input should be gone, name committed
+			expect(screen.queryByDisplayValue("Hobgoblin")).not.toBeInTheDocument();
+		});
+
+		it("Escape cancels without renaming", async () => {
+			const user = userEvent.setup();
+			renderRow();
+
+			await user.click(screen.getByRole("button", { name: "Rename" }));
+			const input = screen.getByDisplayValue("Goblin");
+			await user.clear(input);
+			await user.type(input, "Changed");
+			await user.keyboard("{Escape}");
+			// Should revert to showing the original name
+			expect(screen.getByText("Goblin")).toBeInTheDocument();
+		});
+	});
+
+	describe("inline AC editing", () => {
+		it("click AC → type value → Enter commits", async () => {
+			const user = userEvent.setup();
+			renderRow({
+				combatant: {
+					id: combatantId("1"),
+					name: "Goblin",
+					ac: 13,
+				},
+			});
+
+			// Click the AC shield button
+			const acButton = screen.getByText("13").closest("button");
+			expect(acButton).not.toBeNull();
+			await user.click(acButton as HTMLElement);
+			const input = screen.getByDisplayValue("13");
+			await user.clear(input);
+			await user.type(input, "16");
+			await user.keyboard("{Enter}");
+			expect(screen.queryByDisplayValue("16")).not.toBeInTheDocument();
+		});
+	});
+
+	describe("inline max HP editing", () => {
+		it("click max HP → type value → blur commits", async () => {
+			const user = userEvent.setup();
+			renderRow({
+				combatant: {
+					id: combatantId("1"),
+					name: "Goblin",
+					maxHp: 10,
+					currentHp: 10,
+				},
+			});
+
+			// The max HP button shows "10" as muted text
+			const maxHpButton = screen
+				.getAllByText("10")
+				.find(
+					(el) => el.closest("button") && el.className.includes("text-muted"),
+				);
+			expect(maxHpButton).toBeDefined();
+			const maxHpBtn = (maxHpButton as HTMLElement).closest("button");
+			expect(maxHpBtn).not.toBeNull();
+			await user.click(maxHpBtn as HTMLElement);
+			const input = screen.getByDisplayValue("10");
+			await user.clear(input);
+			await user.type(input, "25");
+			await user.tab();
+			expect(screen.queryByDisplayValue("25")).not.toBeInTheDocument();
+		});
+	});
+
+	describe("inline initiative editing", () => {
+		it("click initiative → type value → Enter commits", async () => {
+			const user = userEvent.setup();
+			renderRow({
+				combatant: {
+					id: combatantId("1"),
+					name: "Goblin",
+					initiative: 15,
+				},
+			});
+
+			await user.click(screen.getByText("15"));
+			const input = screen.getByDisplayValue("15");
+			await user.clear(input);
+			await user.type(input, "20");
+			await user.keyboard("{Enter}");
+			expect(screen.queryByDisplayValue("20")).not.toBeInTheDocument();
+		});
+
+		it("clearing initiative and pressing Enter commits the edit", async () => {
+			const user = userEvent.setup();
+			renderRow({
+				combatant: {
+					id: combatantId("1"),
+					name: "Goblin",
+					initiative: 15,
+				},
+			});
+
+			await user.click(screen.getByText("15"));
+			const input = screen.getByDisplayValue("15");
+			await user.clear(input);
+			await user.keyboard("{Enter}");
+			// Input should be dismissed (editing mode exited)
+			expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+		});
+	});
+
+	describe("HP popover", () => {
+		it("clicking current HP opens the HP adjust popover", async () => {
+			const user = userEvent.setup();
+			renderRow({
+				combatant: {
+					id: combatantId("1"),
+					name: "Goblin",
+					maxHp: 10,
+					currentHp: 7,
+				},
+			});
+
+			const hpButton = screen.getByLabelText(CURRENT_HP_7_REGEX);
+			await user.click(hpButton);
+			// The popover should appear with damage/heal controls
+			expect(
+				screen.getByRole("button", { name: "Apply damage" }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole("button", { name: "Apply healing" }),
+			).toBeInTheDocument();
+		});
+
+		it("HP section is absent when maxHp is undefined", () => {
+			renderRow({
+				combatant: {
+					id: combatantId("1"),
+					name: "Goblin",
+				},
+			});
+			expect(screen.queryByLabelText(CURRENT_HP_REGEX)).not.toBeInTheDocument();
+		});
+	});
+
+	describe("condition picker", () => {
+		it("clicking Add condition button opens the picker", async () => {
+			const user = userEvent.setup();
+			renderRow();
+			const addButton = screen.getByRole("button", {
+				name: "Add condition",
+			});
+			await user.click(addButton);
+			// Condition picker should render with condition options
+			expect(screen.getByText("Blinded")).toBeInTheDocument();
+		});
+	});
+
 	describe("temp HP display", () => {
 		it("shows +N when combatant has temp HP", () => {
 			renderRow({

apps/web/src/components/__tests__/condition-picker.test.tsx

@@ -1,54 +1,92 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
 
-import { CONDITION_DEFINITIONS, type ConditionId } from "@initiative/domain";
+import {
+	type ConditionEntry,
+	type ConditionId,
+	getConditionsForEdition,
+	type PersistentDamageEntry,
+	type PersistentDamageType,
+	type RulesEdition,
+} from "@initiative/domain";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { createRef, type RefObject } from "react";
+import { createRef, type ReactNode, type RefObject, useEffect } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { RulesEditionProvider } from "../../contexts/index.js";
+import { useRulesEditionContext } from "../../contexts/rules-edition-context.js";
 import { ConditionPicker } from "../condition-picker";
 
 afterEach(cleanup);
 
+function EditionSetter({
+	edition,
+	children,
+}: {
+	edition: RulesEdition;
+	children: ReactNode;
+}) {
+	const { setEdition } = useRulesEditionContext();
+	useEffect(() => {
+		setEdition(edition);
+	}, [edition, setEdition]);
+	return <>{children}</>;
+}
+
 function renderPicker(
 	overrides: Partial<{
-		activeConditions: readonly ConditionId[];
+		activeConditions: readonly ConditionEntry[];
+		activePersistentDamage: readonly PersistentDamageEntry[];
 		onToggle: (conditionId: ConditionId) => void;
+		onSetValue: (conditionId: ConditionId, value: number) => void;
+		onAddPersistentDamage: (
+			damageType: PersistentDamageType,
+			formula: string,
+		) => void;
 		onClose: () => void;
+		edition: RulesEdition;
 	}> = {},
 ) {
 	const onToggle = overrides.onToggle ?? vi.fn();
+	const onSetValue = overrides.onSetValue ?? vi.fn();
+	const onAddPersistentDamage = overrides.onAddPersistentDamage ?? vi.fn();
 	const onClose = overrides.onClose ?? vi.fn();
+	const edition = overrides.edition ?? "5.5e";
 	const anchorRef = createRef<HTMLElement>() as RefObject<HTMLElement>;
 	const anchor = document.createElement("div");
 	document.body.appendChild(anchor);
 	(anchorRef as { current: HTMLElement }).current = anchor;
 	const result = render(
 		<RulesEditionProvider>
-			<ConditionPicker
+			<EditionSetter edition={edition}>
-				anchorRef={anchorRef}
+				<ConditionPicker
-				activeConditions={overrides.activeConditions ?? []}
+					anchorRef={anchorRef}
-				onToggle={onToggle}
+					activeConditions={overrides.activeConditions ?? []}
-				onClose={onClose}
+					activePersistentDamage={overrides.activePersistentDamage}
-			/>
+					onToggle={onToggle}
+					onSetValue={onSetValue}
+					onAddPersistentDamage={onAddPersistentDamage}
+					onClose={onClose}
+				/>
+			</EditionSetter>
 		</RulesEditionProvider>,
 	);
-	return { ...result, onToggle, onClose };
+	return { ...result, onToggle, onSetValue, onAddPersistentDamage, onClose };
 }
 
 describe("ConditionPicker", () => {
-	it("renders all condition definitions from domain", () => {
+	it("renders edition-specific conditions from domain", () => {
 		renderPicker();
-		for (const def of CONDITION_DEFINITIONS) {
+		const editionConditions = getConditionsForEdition("5.5e");
+		for (const def of editionConditions) {
 			expect(screen.getByText(def.label)).toBeInTheDocument();
 		}
 	});
 
 	it("active conditions are visually distinguished", () => {
-		renderPicker({ activeConditions: ["blinded"] });
+		renderPicker({ activeConditions: [{ id: "blinded" }] });
-		const blindedButton = screen.getByText("Blinded").closest("button");
+		const row = screen.getByText("Blinded").closest("div[class]");
-		expect(blindedButton?.className).toContain("bg-card/50");
+		expect(row?.className).toContain("bg-card/50");
 	});
 
 	it("clicking a condition calls onToggle with that condition's ID", async () => {
@@ -65,8 +103,115 @@ describe("ConditionPicker", () => {
 	});
 
 	it("active condition labels use foreground color", () => {
-		renderPicker({ activeConditions: ["charmed"] });
+		renderPicker({ activeConditions: [{ id: "charmed" }] });
 		const label = screen.getByText("Charmed");
 		expect(label.className).toContain("text-foreground");
 	});
+
+	describe("Valued conditions (PF2e)", () => {
+		it("clicking a valued condition opens the counter editor", async () => {
+			const user = userEvent.setup();
+			renderPicker({ edition: "pf2e" });
+			await user.click(screen.getByText("Frightened"));
+			// Counter editor shows value badge and [-]/[+] buttons
+			expect(screen.getByText("1")).toBeInTheDocument();
+			expect(
+				screen
+					.getAllByRole("button")
+					.some((b) => b.querySelector(".lucide-minus")),
+			).toBe(true);
+		});
+
+		it("increment and decrement adjust the counter value", async () => {
+			const user = userEvent.setup();
+			renderPicker({ edition: "pf2e" });
+			await user.click(screen.getByText("Frightened"));
+			// Value starts at 1; click [+] to go to 2
+			const plusButtons = screen.getAllByRole("button");
+			const plusButton = plusButtons.find((b) =>
+				b.querySelector(".lucide-plus"),
+			);
+			if (!plusButton) throw new Error("Plus button not found");
+			await user.click(plusButton);
+			expect(screen.getByText("2")).toBeInTheDocument();
+			// Click [-] to go back to 1
+			const minusButton = plusButtons.find((b) =>
+				b.querySelector(".lucide-minus"),
+			);
+			if (!minusButton) throw new Error("Minus button not found");
+			await user.click(minusButton);
+			expect(screen.getByText("1")).toBeInTheDocument();
+		});
+
+		it("confirm button calls onSetValue with condition and value", async () => {
+			const user = userEvent.setup();
+			const { onSetValue } = renderPicker({ edition: "pf2e" });
+			await user.click(screen.getByText("Frightened"));
+			// Increment to 2, then confirm
+			const plusButton = screen
+				.getAllByRole("button")
+				.find((b) => b.querySelector(".lucide-plus"));
+			if (!plusButton) throw new Error("Plus button not found");
+			await user.click(plusButton);
+			const checkButton = screen
+				.getAllByRole("button")
+				.find((b) => b.querySelector(".lucide-check"));
+			if (!checkButton) throw new Error("Check button not found");
+			await user.click(checkButton);
+			expect(onSetValue).toHaveBeenCalledWith("frightened", 2);
+		});
+
+		it("shows active value badge for existing valued condition", () => {
+			renderPicker({
+				edition: "pf2e",
+				activeConditions: [{ id: "frightened", value: 3 }],
+			});
+			expect(screen.getByText("3")).toBeInTheDocument();
+		});
+
+		it("pre-fills counter with existing value when editing", async () => {
+			const user = userEvent.setup();
+			renderPicker({
+				edition: "pf2e",
+				activeConditions: [{ id: "frightened", value: 3 }],
+			});
+			await user.click(screen.getByText("Frightened"));
+			expect(screen.getByText("3")).toBeInTheDocument();
+		});
+
+		it("disables increment at maxValue", async () => {
+			const user = userEvent.setup();
+			renderPicker({
+				edition: "pf2e",
+				activeConditions: [{ id: "doomed", value: 3 }],
+			});
+			// Doomed has maxValue: 3, click to edit
+			await user.click(screen.getByText("Doomed"));
+			const plusButton = screen
+				.getAllByRole("button")
+				.find((b) => b.querySelector(".lucide-plus"));
+			expect(plusButton).toBeDisabled();
+		});
+	});
+
+	describe("Persistent Damage (PF2e)", () => {
+		it("shows 'Persistent Damage' entry when edition is pf2e", () => {
+			renderPicker({ edition: "pf2e" });
+			expect(screen.getByText("Persistent Damage")).toBeInTheDocument();
+		});
+
+		it("clicking 'Persistent Damage' opens sub-picker", async () => {
+			const user = userEvent.setup();
+			renderPicker({ edition: "pf2e" });
+			await user.click(screen.getByText("Persistent Damage"));
+			expect(screen.getByPlaceholderText("2d6")).toBeInTheDocument();
+		});
+	});
+
+	describe("Persistent Damage (D&D)", () => {
+		it("hides 'Persistent Damage' entry when edition is D&D", () => {
+			renderPicker({ edition: "5.5e" });
+			expect(screen.queryByText("Persistent Damage")).not.toBeInTheDocument();
+		});
+	});
 });

apps/web/src/components/__tests__/condition-tags.test.tsx

@@ -1,38 +1,36 @@
 // @vitest-environment jsdom
-import type { ConditionId } from "@initiative/domain";
+import type { ConditionEntry } from "@initiative/domain";
 import { cleanup, render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { RulesEditionProvider } from "../../contexts/rules-edition-context.js";
 import { ConditionTags } from "../condition-tags.js";
 
-vi.mock("../../contexts/rules-edition-context.js", () => ({
-	useRulesEditionContext: () => ({ edition: "5.5e" }),
-}));
-
 afterEach(cleanup);
 
+function renderTags(props: Partial<Parameters<typeof ConditionTags>[0]> = {}) {
+	return render(
+		<RulesEditionProvider>
+			<ConditionTags
+				conditions={props.conditions}
+				onRemove={props.onRemove ?? (() => {})}
+				onDecrement={props.onDecrement ?? (() => {})}
+				onOpenPicker={props.onOpenPicker ?? (() => {})}
+			/>
+		</RulesEditionProvider>,
+	);
+}
+
 describe("ConditionTags", () => {
 	it("renders nothing when conditions is undefined", () => {
-		const { container } = render(
+		const { container } = renderTags();
-			<ConditionTags
-				conditions={undefined}
-				onRemove={() => {}}
-				onOpenPicker={() => {}}
-			/>,
-		);
 		// Only the add button should be present
 		expect(container.querySelectorAll("button")).toHaveLength(1);
 	});
 
 	it("renders a button per condition", () => {
-		const conditions: ConditionId[] = ["blinded", "prone"];
+		const conditions: ConditionEntry[] = [{ id: "blinded" }, { id: "prone" }];
-		render(
+		renderTags({ conditions });
-			<ConditionTags
-				conditions={conditions}
-				onRemove={() => {}}
-				onOpenPicker={() => {}}
-			/>,
-		);
 		expect(
 			screen.getByRole("button", { name: "Remove Blinded" }),
 		).toBeDefined();
@@ -41,13 +39,10 @@ describe("ConditionTags", () => {
 
 	it("calls onRemove with condition id when clicked", async () => {
 		const onRemove = vi.fn();
-		render(
+		renderTags({
-			<ConditionTags
+			conditions: [{ id: "blinded" }] as ConditionEntry[],
-				conditions={["blinded"] as ConditionId[]}
+			onRemove,
-				onRemove={onRemove}
+		});
-				onOpenPicker={() => {}}
-			/>,
-		);
 
 		await userEvent.click(
 			screen.getByRole("button", { name: "Remove Blinded" }),
@@ -58,13 +53,7 @@ describe("ConditionTags", () => {
 
 	it("calls onOpenPicker when add button is clicked", async () => {
 		const onOpenPicker = vi.fn();
-		render(
+		renderTags({ conditions: [], onOpenPicker });
-			<ConditionTags
-				conditions={[]}
-				onRemove={() => {}}
-				onOpenPicker={onOpenPicker}
-			/>,
-		);
 
 		await userEvent.click(
 			screen.getByRole("button", { name: "Add condition" }),
@@ -74,14 +63,41 @@ describe("ConditionTags", () => {
 	});
 
 	it("renders empty conditions array without errors", () => {
-		render(
+		renderTags({ conditions: [] });
-			<ConditionTags
-				conditions={[]}
-				onRemove={() => {}}
-				onOpenPicker={() => {}}
-			/>,
-		);
 		// Only add button
 		expect(screen.getByRole("button", { name: "Add condition" })).toBeDefined();
 	});
+
+	it("displays value badge for valued conditions", () => {
+		renderTags({ conditions: [{ id: "frightened", value: 3 }] });
+		expect(screen.getByText("3")).toBeDefined();
+	});
+
+	it("calls onDecrement for valued condition click", async () => {
+		const onDecrement = vi.fn();
+		renderTags({
+			conditions: [{ id: "frightened", value: 2 }],
+			onDecrement,
+		});
+
+		await userEvent.click(
+			screen.getByRole("button", { name: "Remove Frightened" }),
+		);
+
+		expect(onDecrement).toHaveBeenCalledWith("frightened");
+	});
+
+	it("calls onRemove for non-valued condition click", async () => {
+		const onRemove = vi.fn();
+		renderTags({
+			conditions: [{ id: "blinded" }],
+			onRemove,
+		});
+
+		await userEvent.click(
+			screen.getByRole("button", { name: "Remove Blinded" }),
+		);
+
+		expect(onRemove).toHaveBeenCalledWith("blinded");
+	});
 });

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

@@ -0,0 +1,360 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import type { Creature, CreatureId, PlayerCharacter } from "@initiative/domain";
+import { combatantId, creatureId, playerCharacterId } from "@initiative/domain";
+import {
+	cleanup,
+	render,
+	renderHook,
+	screen,
+	waitFor,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import {
+	buildCombatant,
+	buildCreature,
+	buildEncounter,
+} from "../../__tests__/factories/index.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
+import { useRulesEdition } from "../../hooks/use-rules-edition.js";
+import { DifficultyBreakdownPanel } from "../difficulty-breakdown-panel.js";
+
+beforeAll(() => {
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+afterEach(cleanup);
+
+const pcId1 = playerCharacterId("pc-1");
+const goblinCreature = buildCreature({
+	id: creatureId("srd:goblin"),
+	name: "Goblin",
+	cr: "1/4",
+	source: "srd",
+	sourceDisplayName: "SRD",
+});
+
+function renderPanel(options: {
+	encounter: ReturnType<typeof buildEncounter>;
+	playerCharacters?: PlayerCharacter[];
+	creatures?: Map<CreatureId, Creature>;
+	onClose?: () => void;
+}) {
+	const adapters = createTestAdapters({
+		encounter: options.encounter,
+		playerCharacters: options.playerCharacters ?? [],
+		creatures: options.creatures,
+	});
+	return render(
+		<AllProviders adapters={adapters}>
+			<DifficultyBreakdownPanel onClose={options.onClose ?? (() => {})} />
+		</AllProviders>,
+	);
+}
+
+function defaultEncounter() {
+	return buildEncounter({
+		combatants: [
+			buildCombatant({
+				id: combatantId("c-1"),
+				name: "Hero",
+				playerCharacterId: pcId1,
+			}),
+			buildCombatant({
+				id: combatantId("c-2"),
+				name: "Goblin",
+				creatureId: goblinCreature.id,
+			}),
+			buildCombatant({
+				id: combatantId("c-3"),
+				name: "Custom Thug",
+				cr: "2",
+			}),
+			buildCombatant({
+				id: combatantId("c-4"),
+				name: "Bandit",
+			}),
+		],
+	});
+}
+
+const defaultPCs: PlayerCharacter[] = [
+	{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+];
+
+describe("DifficultyBreakdownPanel", () => {
+	it("renders party budget section", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(
+				screen.getByText("Party Budget", { exact: false }),
+			).toBeInTheDocument();
+			expect(screen.getByText("1 PC", { exact: false })).toBeInTheDocument();
+			expect(screen.getByText("Low:", { exact: false })).toBeInTheDocument();
+		});
+	});
+
+	it("renders tier label", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(
+				screen.getByText("Encounter Difficulty:", { exact: false }),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("shows PC in party column with level", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Hero")).toBeInTheDocument();
+			expect(screen.getByText("Lv 5")).toBeInTheDocument();
+		});
+	});
+
+	it("shows monsters in enemy column", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Goblin")).toBeInTheDocument();
+			expect(screen.getAllByText("CR 1/4").length).toBeGreaterThanOrEqual(1);
+		});
+	});
+
+	it("renders explanation text", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(
+				screen.getByText(
+					"Allied NPC XP is subtracted from encounter difficulty",
+				),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("renders Net Monster XP footer", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Net Monster XP")).toBeInTheDocument();
+		});
+	});
+
+	it("renders custom combatant with CR picker in enemy column", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			const pickers = screen.getAllByLabelText("Challenge rating");
+			expect(pickers).toHaveLength(2);
+			expect(pickers[0]).toHaveValue("2");
+		});
+	});
+
+	it("selecting a CR updates the visible XP value", async () => {
+		const user = userEvent.setup();
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getAllByLabelText("Challenge rating")).toHaveLength(2);
+		});
+
+		const pickers = screen.getAllByLabelText("Challenge rating");
+		await user.selectOptions(pickers[1], "5");
+
+		await waitFor(() => {
+			expect(screen.getByText("1,800")).toBeInTheDocument();
+		});
+	});
+
+	it("non-PC combatants show toggle button", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			// Each non-PC enemy combatant has a toggle button
+			expect(
+				screen.getByLabelText("Move Goblin to party side"),
+			).toBeInTheDocument();
+			expect(
+				screen.getByLabelText("Move Custom Thug to party side"),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("PC combatants do not show side toggle", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Hero")).toBeInTheDocument();
+		});
+
+		expect(
+			screen.queryByLabelText("Move Hero to enemy side"),
+		).not.toBeInTheDocument();
+	});
+
+	it("side toggle moves combatant between sections", async () => {
+		const user = userEvent.setup();
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Goblin")).toBeInTheDocument();
+		});
+
+		// Toggle goblin to party side
+		const toggleBtn = screen.getByLabelText("Move Goblin to party side");
+		await user.click(toggleBtn);
+
+		// After toggle, the aria-label should change to "Move Goblin to enemy side"
+		await waitFor(() => {
+			expect(
+				screen.getByLabelText("Move Goblin to enemy side"),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("renders nothing when breakdown data is insufficient", () => {
+		const { container } = renderPanel({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({ id: combatantId("c-1"), name: "Custom" }),
+				],
+			}),
+		});
+
+		expect(container.innerHTML).toBe("");
+	});
+
+	it("shows 4 threshold columns for 2014 edition", async () => {
+		const { result: editionResult } = renderHook(() => useRulesEdition());
+		editionResult.current.setEdition("5e");
+
+		try {
+			renderPanel({
+				encounter: defaultEncounter(),
+				playerCharacters: defaultPCs,
+				creatures: new Map([[goblinCreature.id, goblinCreature]]),
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText("Easy:", { exact: false })).toBeInTheDocument();
+				expect(screen.getByText("Med:", { exact: false })).toBeInTheDocument();
+				expect(screen.getByText("Hard:", { exact: false })).toBeInTheDocument();
+				expect(
+					screen.getByText("Deadly:", { exact: false }),
+				).toBeInTheDocument();
+			});
+		} finally {
+			editionResult.current.setEdition("5.5e");
+		}
+	});
+
+	it("shows multiplier and adjusted XP for 2014 edition", async () => {
+		const { result: editionResult } = renderHook(() => useRulesEdition());
+		editionResult.current.setEdition("5e");
+
+		try {
+			renderPanel({
+				encounter: defaultEncounter(),
+				playerCharacters: defaultPCs,
+				creatures: new Map([[goblinCreature.id, goblinCreature]]),
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText("Monster XP")).toBeInTheDocument();
+				// 1 PC (<3) triggers party size adjustment
+				expect(screen.getByText("Adjusted for 1 PC")).toBeInTheDocument();
+			});
+		} finally {
+			editionResult.current.setEdition("5.5e");
+		}
+	});
+
+	it("shows Net Monster XP for 5.5e edition (no multiplier)", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Net Monster XP")).toBeInTheDocument();
+		});
+	});
+
+	it("calls onClose when Escape is pressed", async () => {
+		const user = userEvent.setup();
+		const onClose = vi.fn();
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+			onClose,
+		});
+
+		await user.keyboard("{Escape}");
+
+		expect(onClose).toHaveBeenCalledOnce();
+	});
+});

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

@@ -1,8 +1,13 @@
 // @vitest-environment jsdom
 import type { DifficultyResult } from "@initiative/domain";
 import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import userEvent from "@testing-library/user-event";
-import { DifficultyIndicator } from "../difficulty-indicator.js";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+	DifficultyIndicator,
+	TIER_LABELS_5_5E,
+	TIER_LABELS_2014,
+} from "../difficulty-indicator.js";
 
 afterEach(cleanup);
 
@@ -10,50 +15,114 @@ function makeResult(tier: DifficultyResult["tier"]): DifficultyResult {
 	return {
 		tier,
 		totalMonsterXp: 100,
-		partyBudget: { low: 50, moderate: 100, high: 200 },
+		thresholds: [
+			{ label: "Low", value: 50 },
+			{ label: "Moderate", value: 100 },
+			{ label: "High", value: 200 },
+		],
+		encounterMultiplier: undefined,
+		adjustedXp: undefined,
+		partySizeAdjusted: undefined,
 	};
 }
 
 describe("DifficultyIndicator", () => {
 	it("renders 3 bars", () => {
 		const { container } = render(
-			<DifficultyIndicator result={makeResult("moderate")} />,
+			<DifficultyIndicator result={makeResult(2)} labels={TIER_LABELS_5_5E} />,
 		);
 		const bars = container.querySelectorAll("[class*='rounded-sm']");
 		expect(bars).toHaveLength(3);
 	});
 
-	it("shows 'Trivial encounter difficulty' label for trivial tier", () => {
+	it("shows 'Trivial encounter difficulty' for 5.5e tier 0", () => {
-		render(<DifficultyIndicator result={makeResult("trivial")} />);
+		render(
+			<DifficultyIndicator result={makeResult(0)} labels={TIER_LABELS_5_5E} />,
+		);
 		expect(
-			screen.getByRole("img", {
+			screen.getByRole("img", { name: "Trivial encounter difficulty" }),
-				name: "Trivial encounter difficulty",
-			}),
 		).toBeDefined();
 	});
 
-	it("shows 'Low encounter difficulty' label for low tier", () => {
+	it("shows 'Low encounter difficulty' for 5.5e tier 1", () => {
-		render(<DifficultyIndicator result={makeResult("low")} />);
+		render(
+			<DifficultyIndicator result={makeResult(1)} labels={TIER_LABELS_5_5E} />,
+		);
 		expect(
 			screen.getByRole("img", { name: "Low encounter difficulty" }),
 		).toBeDefined();
 	});
 
-	it("shows 'Moderate encounter difficulty' label for moderate tier", () => {
+	it("shows 'Moderate encounter difficulty' for 5.5e tier 2", () => {
-		render(<DifficultyIndicator result={makeResult("moderate")} />);
+		render(
+			<DifficultyIndicator result={makeResult(2)} labels={TIER_LABELS_5_5E} />,
+		);
 		expect(
-			screen.getByRole("img", {
+			screen.getByRole("img", { name: "Moderate encounter difficulty" }),
-				name: "Moderate encounter difficulty",
-			}),
 		).toBeDefined();
 	});
 
-	it("shows 'High encounter difficulty' label for high tier", () => {
+	it("shows 'High encounter difficulty' for 5.5e tier 3", () => {
-		render(<DifficultyIndicator result={makeResult("high")} />);
+		render(
+			<DifficultyIndicator result={makeResult(3)} labels={TIER_LABELS_5_5E} />,
+		);
 		expect(
-			screen.getByRole("img", {
+			screen.getByRole("img", { name: "High encounter difficulty" }),
-				name: "High encounter difficulty",
-			}),
 		).toBeDefined();
 	});
+
+	it("shows 'Easy encounter difficulty' for 2014 tier 0", () => {
+		render(
+			<DifficultyIndicator result={makeResult(0)} labels={TIER_LABELS_2014} />,
+		);
+		expect(
+			screen.getByRole("img", { name: "Easy encounter difficulty" }),
+		).toBeDefined();
+	});
+
+	it("shows 'Deadly encounter difficulty' for 2014 tier 3", () => {
+		render(
+			<DifficultyIndicator result={makeResult(3)} labels={TIER_LABELS_2014} />,
+		);
+		expect(
+			screen.getByRole("img", { name: "Deadly encounter difficulty" }),
+		).toBeDefined();
+	});
+
+	it("calls onClick when clicked", async () => {
+		const user = userEvent.setup();
+		const handleClick = vi.fn();
+		render(
+			<DifficultyIndicator
+				result={makeResult(2)}
+				labels={TIER_LABELS_5_5E}
+				onClick={handleClick}
+			/>,
+		);
+
+		await user.click(
+			screen.getByRole("img", { name: "Moderate encounter difficulty" }),
+		);
+		expect(handleClick).toHaveBeenCalledOnce();
+	});
+
+	it("renders as div when onClick not provided", () => {
+		const { container } = render(
+			<DifficultyIndicator result={makeResult(2)} labels={TIER_LABELS_5_5E} />,
+		);
+		const element = container.querySelector("[role='img']");
+		expect(element?.tagName).toBe("DIV");
+	});
+
+	it("renders as button when onClick provided", () => {
+		const { container } = render(
+			<DifficultyIndicator
+				result={makeResult(2)}
+				labels={TIER_LABELS_5_5E}
+				onClick={() => {}}
+			/>,
+		);
+		const element = container.querySelector("[role='img']");
+		expect(element?.tagName).toBe("BUTTON");
+	});
 });

apps/web/src/components/__tests__/equipment-detail-popover.test.tsx

@@ -0,0 +1,107 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import type { EquipmentItem } from "@initiative/domain";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { EquipmentDetailPopover } from "../equipment-detail-popover.js";
+
+afterEach(cleanup);
+
+const POISON: EquipmentItem = {
+	name: "Giant Wasp Venom",
+	level: 7,
+	category: "poison",
+	traits: ["consumable", "poison", "injury"],
+	description: "A deadly poison extracted from giant wasps.",
+};
+
+const SCROLL: EquipmentItem = {
+	name: "Scroll of Teleport",
+	level: 11,
+	category: "scroll",
+	traits: ["consumable", "magical", "scroll"],
+	description: "A scroll containing Teleport.",
+	spellName: "Teleport",
+	spellRank: 6,
+};
+
+const ANCHOR: DOMRect = new DOMRect(100, 100, 50, 20);
+const SCROLL_SPELL_REGEX = /Teleport \(Rank 6\)/;
+const DIALOG_LABEL_REGEX = /Equipment details: Giant Wasp Venom/;
+
+beforeEach(() => {
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		configurable: true,
+		value: vi.fn().mockImplementation(() => ({
+			matches: true,
+			media: "(min-width: 1024px)",
+			onchange: null,
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+describe("EquipmentDetailPopover", () => {
+	it("renders item name, level, traits, and description", () => {
+		render(
+			<EquipmentDetailPopover
+				item={POISON}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(screen.getByText("Giant Wasp Venom")).toBeInTheDocument();
+		expect(screen.getByText("7")).toBeInTheDocument();
+		expect(screen.getByText("consumable")).toBeInTheDocument();
+		expect(screen.getByText("poison")).toBeInTheDocument();
+		expect(screen.getByText("injury")).toBeInTheDocument();
+		expect(
+			screen.getByText("A deadly poison extracted from giant wasps."),
+		).toBeInTheDocument();
+	});
+
+	it("renders scroll/wand spell info", () => {
+		render(
+			<EquipmentDetailPopover
+				item={SCROLL}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(screen.getByText(SCROLL_SPELL_REGEX)).toBeInTheDocument();
+	});
+
+	it("calls onClose when Escape is pressed", () => {
+		const onClose = vi.fn();
+		render(
+			<EquipmentDetailPopover
+				item={POISON}
+				anchorRect={ANCHOR}
+				onClose={onClose}
+			/>,
+		);
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it("uses the dialog role with the item name as label", () => {
+		render(
+			<EquipmentDetailPopover
+				item={POISON}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(
+			screen.getByRole("dialog", {
+				name: DIALOG_LABEL_REGEX,
+			}),
+		).toBeInTheDocument();
+	});
+});

apps/web/src/components/__tests__/export-method-dialog.test.tsx

@@ -0,0 +1,86 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { polyfillDialog } from "../../__tests__/polyfill-dialog.js";
+import { ExportMethodDialog } from "../export-method-dialog.js";
+
+afterEach(cleanup);
+
+beforeAll(() => {
+	polyfillDialog();
+});
+
+function renderDialog(open = true) {
+	const onDownload = vi.fn();
+	const onCopyToClipboard = vi.fn();
+	const onClose = vi.fn();
+	const result = render(
+		<ExportMethodDialog
+			open={open}
+			onDownload={onDownload}
+			onCopyToClipboard={onCopyToClipboard}
+			onClose={onClose}
+		/>,
+	);
+	return { ...result, onDownload, onCopyToClipboard, onClose };
+}
+
+describe("ExportMethodDialog", () => {
+	it("renders filename input and unchecked history checkbox", () => {
+		renderDialog();
+		expect(
+			screen.getByPlaceholderText("Filename (optional)"),
+		).toBeInTheDocument();
+		const checkbox = screen.getByRole("checkbox");
+		expect(checkbox).not.toBeChecked();
+	});
+
+	it("download button calls onDownload with defaults", async () => {
+		const user = userEvent.setup();
+		const { onDownload } = renderDialog();
+
+		await user.click(screen.getByText("Download file"));
+		expect(onDownload).toHaveBeenCalledWith(false, "");
+	});
+
+	it("download with filename and history checked", async () => {
+		const user = userEvent.setup();
+		const { onDownload } = renderDialog();
+
+		await user.type(
+			screen.getByPlaceholderText("Filename (optional)"),
+			"my-encounter",
+		);
+		await user.click(screen.getByRole("checkbox"));
+		await user.click(screen.getByText("Download file"));
+		expect(onDownload).toHaveBeenCalledWith(true, "my-encounter");
+	});
+
+	it("copy to clipboard calls onCopyToClipboard and shows Copied", async () => {
+		const user = userEvent.setup();
+		const { onCopyToClipboard } = renderDialog();
+
+		await user.click(screen.getByText("Copy to clipboard"));
+		expect(onCopyToClipboard).toHaveBeenCalledWith(false);
+		expect(screen.getByText("Copied!")).toBeInTheDocument();
+	});
+
+	it("Copied! reverts after 2 seconds", async () => {
+		const user = userEvent.setup();
+		renderDialog();
+
+		await user.click(screen.getByText("Copy to clipboard"));
+		expect(screen.getByText("Copied!")).toBeInTheDocument();
+
+		await waitFor(
+			() => {
+				expect(screen.queryByText("Copied!")).not.toBeInTheDocument();
+			},
+			{ timeout: 3000 },
+		);
+		expect(screen.getByText("Copy to clipboard")).toBeInTheDocument();
+	});
+});

apps/web/src/components/__tests__/import-method-dialog.test.tsx

@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { polyfillDialog } from "../../__tests__/polyfill-dialog.js";
+import { ImportMethodDialog } from "../import-method-dialog.js";
+
+beforeAll(() => {
+	polyfillDialog();
+});
+
+afterEach(cleanup);
+
+function renderDialog(open = true) {
+	const onSelectFile = vi.fn();
+	const onSubmitClipboard = vi.fn();
+	const onClose = vi.fn();
+	const result = render(
+		<ImportMethodDialog
+			open={open}
+			onSelectFile={onSelectFile}
+			onSubmitClipboard={onSubmitClipboard}
+			onClose={onClose}
+		/>,
+	);
+	return { ...result, onSelectFile, onSubmitClipboard, onClose };
+}
+
+describe("ImportMethodDialog", () => {
+	it("opens in pick mode with two method buttons", () => {
+		renderDialog();
+		expect(screen.getByText("From file")).toBeInTheDocument();
+		expect(screen.getByText("Paste content")).toBeInTheDocument();
+	});
+
+	it("From file button calls onSelectFile and closes", async () => {
+		const user = userEvent.setup();
+		const { onSelectFile, onClose } = renderDialog();
+
+		await user.click(screen.getByText("From file"));
+		expect(onSelectFile).toHaveBeenCalled();
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("Paste content button switches to paste mode", async () => {
+		const user = userEvent.setup();
+		renderDialog();
+
+		await user.click(screen.getByText("Paste content"));
+		expect(
+			screen.getByPlaceholderText("Paste exported JSON here..."),
+		).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Import" })).toBeDisabled();
+	});
+
+	it("typing text enables Import button", async () => {
+		const user = userEvent.setup();
+		renderDialog();
+
+		await user.click(screen.getByText("Paste content"));
+		const textarea = screen.getByPlaceholderText("Paste exported JSON here...");
+		await user.type(textarea, "test-data");
+		expect(screen.getByRole("button", { name: "Import" })).not.toBeDisabled();
+	});
+
+	it("Import calls onSubmitClipboard with text and closes", async () => {
+		const user = userEvent.setup();
+		const { onSubmitClipboard, onClose } = renderDialog();
+
+		await user.click(screen.getByText("Paste content"));
+		await user.type(
+			screen.getByPlaceholderText("Paste exported JSON here..."),
+			"some-json-content",
+		);
+		await user.click(screen.getByRole("button", { name: "Import" }));
+		expect(onSubmitClipboard).toHaveBeenCalledWith("some-json-content");
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("Back button returns to pick mode and clears text", async () => {
+		const user = userEvent.setup();
+		renderDialog();
+
+		await user.click(screen.getByText("Paste content"));
+		await user.type(
+			screen.getByPlaceholderText("Paste exported JSON here..."),
+			"some text",
+		);
+		await user.click(screen.getByRole("button", { name: "Back" }));
+
+		expect(screen.getByText("From file")).toBeInTheDocument();
+		expect(
+			screen.queryByPlaceholderText("Paste exported JSON here..."),
+		).not.toBeInTheDocument();
+	});
+});

apps/web/src/components/__tests__/persistent-damage-picker.test.tsx

@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PersistentDamagePicker } from "../persistent-damage-picker.js";
+
+afterEach(cleanup);
+
+function renderPicker(
+	overrides: Partial<{
+		activeEntries: { type: string; formula: string }[];
+		onAdd: (damageType: string, formula: string) => void;
+		onClose: () => void;
+	}> = {},
+) {
+	const onAdd = overrides.onAdd ?? vi.fn();
+	const onClose = overrides.onClose ?? vi.fn();
+	const result = render(
+		<PersistentDamagePicker
+			activeEntries={
+				(overrides.activeEntries as Parameters<
+					typeof PersistentDamagePicker
+				>[0]["activeEntries"]) ?? undefined
+			}
+			onAdd={onAdd as Parameters<typeof PersistentDamagePicker>[0]["onAdd"]}
+			onClose={onClose}
+		/>,
+	);
+	return { ...result, onAdd, onClose };
+}
+
+describe("PersistentDamagePicker", () => {
+	it("renders damage type dropdown and formula input", () => {
+		renderPicker();
+		expect(screen.getByRole("combobox")).toBeInTheDocument();
+		expect(screen.getByPlaceholderText("2d6")).toBeInTheDocument();
+	});
+
+	it("confirm button is disabled when formula is empty", () => {
+		renderPicker();
+		expect(
+			screen.getByRole("button", { name: "Add persistent damage" }),
+		).toBeDisabled();
+	});
+
+	it("submitting calls onAdd with selected type and formula", async () => {
+		const user = userEvent.setup();
+		const { onAdd } = renderPicker();
+		await user.type(screen.getByPlaceholderText("2d6"), "3d6");
+		await user.click(
+			screen.getByRole("button", { name: "Add persistent damage" }),
+		);
+		expect(onAdd).toHaveBeenCalledWith("fire", "3d6");
+	});
+
+	it("Enter in formula input confirms", async () => {
+		const user = userEvent.setup();
+		const { onAdd } = renderPicker();
+		await user.type(screen.getByPlaceholderText("2d6"), "2d6{Enter}");
+		expect(onAdd).toHaveBeenCalledWith("fire", "2d6");
+	});
+
+	it("pre-fills formula for existing active entry", async () => {
+		const user = userEvent.setup();
+		renderPicker({
+			activeEntries: [{ type: "fire", formula: "2d6" }],
+		});
+		expect(screen.getByPlaceholderText("2d6")).toHaveValue("2d6");
+
+		// Change type to one without active entry
+		await user.selectOptions(screen.getByRole("combobox"), "bleed");
+		expect(screen.getByPlaceholderText("2d6")).toHaveValue("");
+	});
+});

apps/web/src/components/__tests__/persistent-damage-tags.test.tsx

@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import type {
+	PersistentDamageEntry,
+	PersistentDamageType,
+} from "@initiative/domain";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PersistentDamageTags } from "../persistent-damage-tags.js";
+
+afterEach(cleanup);
+
+function renderTags(
+	entries: readonly PersistentDamageEntry[] | undefined,
+	onRemove = vi.fn(),
+) {
+	const result = render(
+		<PersistentDamageTags entries={entries} onRemove={onRemove} />,
+	);
+	return { ...result, onRemove };
+}
+
+describe("PersistentDamageTags", () => {
+	it("renders nothing when entries undefined", () => {
+		const { container } = renderTags(undefined);
+		expect(container.innerHTML).toBe("");
+	});
+
+	it("renders nothing when entries is empty array", () => {
+		const { container } = renderTags([]);
+		expect(container.innerHTML).toBe("");
+	});
+
+	it("renders tag per entry with icon and formula text", () => {
+		renderTags([
+			{ type: "fire", formula: "2d6" },
+			{ type: "bleed", formula: "1d4" },
+		]);
+		expect(screen.getByText("2d6")).toBeInTheDocument();
+		expect(screen.getByText("1d4")).toBeInTheDocument();
+	});
+
+	it("click calls onRemove with correct damage type", async () => {
+		const user = userEvent.setup();
+		const { onRemove } = renderTags([{ type: "fire", formula: "2d6" }]);
+		await user.click(
+			screen.getByRole("button", {
+				name: "Remove persistent Fire damage",
+			}),
+		);
+		expect(onRemove).toHaveBeenCalledWith(
+			"fire" satisfies PersistentDamageType,
+		);
+	});
+
+	it("tooltip shows full description", () => {
+		renderTags([{ type: "fire", formula: "2d6" }]);
+		expect(
+			screen.getByRole("button", {
+				name: "Remove persistent Fire damage",
+			}),
+		).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,497 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import type { Pf2eCreature } from "@initiative/domain";
+import { creatureId } from "@initiative/domain";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Pf2eStatBlock } from "../pf2e-stat-block.js";
+
+afterEach(cleanup);
+
+const USES_PER_DAY_REGEX = /×3/;
+const HEAL_DESCRIPTION_REGEX = /channel positive energy/;
+const PERCEPTION_SENSES_REGEX = /\+2.*Darkvision/;
+const SKILLS_REGEX = /Acrobatics \+5.*Stealth \+5/;
+const SAVE_CONDITIONAL_REGEX = /\+12.*\+1 status to all saves vs\. magic/;
+const SAVE_CONDITIONAL_ABSENT_REGEX = /status to all saves/;
+const HP_DETAILS_REGEX = /115.*regeneration 20/;
+const REGEN_REGEX = /regeneration/;
+const ATTACK_NAME_REGEX = /Dogslicer/;
+const ATTACK_DAMAGE_REGEX = /1d6 slashing/;
+const SPELLCASTING_ENTRY_REGEX = /Divine Innate Spells\./;
+const ABILITY_MID_NAME_REGEX = /Goblin Scuttle/;
+const ABILITY_MID_DESC_REGEX = /The goblin Steps\./;
+const CANTRIPS_REGEX = /Cantrips:/;
+const AC_REGEX = /16/;
+const RK_DC_13_REGEX = /DC 13/;
+const RK_DC_15_REGEX = /DC 15/;
+const RK_DC_25_REGEX = /DC 25/;
+const RK_HUMANOID_SOCIETY_REGEX = /Humanoid \(Society\)/;
+const RK_UNDEAD_RELIGION_REGEX = /Undead \(Religion\)/;
+const RK_BEAST_SKILLS_REGEX = /Beast \(Arcana\/Nature\)/;
+const SCROLL_NAME_REGEX = /Scroll of Teleport/;
+
+const GOBLIN_WARRIOR: Pf2eCreature = {
+	system: "pf2e",
+	id: creatureId("pathfinder-monster-core:goblin-warrior"),
+	name: "Goblin Warrior",
+	source: "pathfinder-monster-core",
+	sourceDisplayName: "Monster Core",
+	level: -1,
+	traits: ["small", "goblin", "humanoid"],
+	perception: 2,
+	senses: "Darkvision",
+	languages: "Common, Goblin",
+	skills: "Acrobatics +5, Athletics +2, Nature +1, Stealth +5",
+	abilityMods: { str: 0, dex: 3, con: 1, int: 0, wis: -1, cha: 1 },
+	ac: 16,
+	saveFort: 5,
+	saveRef: 7,
+	saveWill: 3,
+	hp: 6,
+	speed: "25 feet",
+	attacks: [
+		{
+			name: "Dogslicer",
+			activity: { number: 1, unit: "action" },
+			segments: [
+				{
+					type: "text",
+					value: "+7 (agile, backstabber, finesse), 1d6 slashing",
+				},
+			],
+		},
+	],
+	abilitiesMid: [
+		{
+			name: "Goblin Scuttle",
+			activity: { number: 1, unit: "reaction" },
+			segments: [{ type: "text", value: "The goblin Steps." }],
+		},
+	],
+};
+
+const NAUNET: Pf2eCreature = {
+	system: "pf2e",
+	id: creatureId("pathfinder-monster-core-2:naunet"),
+	name: "Naunet",
+	source: "pathfinder-monster-core-2",
+	sourceDisplayName: "Monster Core 2",
+	level: 7,
+	traits: ["large", "monitor", "protean"],
+	perception: 14,
+	senses: "Darkvision",
+	languages: "Chthonian, Empyrean, Protean",
+	skills:
+		"Acrobatics +14, Athletics +16, Intimidation +16, Stealth +14, Survival +12",
+	abilityMods: { str: 5, dex: 3, con: 5, int: 0, wis: 3, cha: 3 },
+	ac: 24,
+	saveFort: 18,
+	saveRef: 14,
+	saveWill: 12,
+	saveConditional: "+1 status to all saves vs. magic",
+	hp: 120,
+	resistances: "Precision 5, Protean anatomy 10",
+	speed: "25 feet, Fly 30 feet, Swim 25 feet (unfettered movement)",
+	spellcasting: [
+		{
+			name: "Divine Innate Spells",
+			headerText: "DC 25, attack +17",
+			daily: [
+				{
+					uses: 4,
+					each: true,
+					spells: [{ name: "Unfettered Movement (Constant)" }],
+				},
+			],
+			atWill: [{ name: "Detect Magic" }],
+		},
+	],
+};
+
+const TROLL: Pf2eCreature = {
+	system: "pf2e",
+	id: creatureId("pathfinder-monster-core:forest-troll"),
+	name: "Forest Troll",
+	source: "pathfinder-monster-core",
+	sourceDisplayName: "Monster Core",
+	level: 5,
+	traits: ["large", "giant", "troll"],
+	perception: 11,
+	senses: "Darkvision",
+	languages: "Jotun",
+	skills: "Athletics +12, Intimidation +12",
+	abilityMods: { str: 5, dex: 2, con: 6, int: -2, wis: 0, cha: -2 },
+	ac: 20,
+	saveFort: 17,
+	saveRef: 11,
+	saveWill: 7,
+	hp: 115,
+	hpDetails: "regeneration 20 (deactivated by acid or fire)",
+	weaknesses: "Fire 10",
+	speed: "30 feet",
+};
+
+function renderStatBlock(creature: Pf2eCreature) {
+	return render(<Pf2eStatBlock creature={creature} />);
+}
+
+describe("Pf2eStatBlock", () => {
+	describe("header", () => {
+		it("renders creature name and level", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(
+				screen.getByRole("heading", { name: "Goblin Warrior" }),
+			).toBeInTheDocument();
+			expect(screen.getByText("Level -1")).toBeInTheDocument();
+		});
+
+		it("renders traits as tags", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("Small")).toBeInTheDocument();
+			expect(screen.getByText("Goblin")).toBeInTheDocument();
+			expect(screen.getByText("Humanoid")).toBeInTheDocument();
+		});
+
+		it("renders source display name", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("Monster Core")).toBeInTheDocument();
+		});
+	});
+
+	describe("recall knowledge", () => {
+		it("renders Recall Knowledge line for a creature with a recognized type trait", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("Recall Knowledge")).toBeInTheDocument();
+			expect(screen.getByText(RK_DC_13_REGEX)).toBeInTheDocument();
+			expect(screen.getByText(RK_HUMANOID_SOCIETY_REGEX)).toBeInTheDocument();
+		});
+
+		it("adjusts DC for uncommon rarity", () => {
+			const uncommonCreature: Pf2eCreature = {
+				...GOBLIN_WARRIOR,
+				traits: ["uncommon", "small", "humanoid"],
+			};
+			renderStatBlock(uncommonCreature);
+			expect(screen.getByText(RK_DC_15_REGEX)).toBeInTheDocument();
+		});
+
+		it("adjusts DC for rare rarity", () => {
+			const rareCreature: Pf2eCreature = {
+				...GOBLIN_WARRIOR,
+				level: 5,
+				traits: ["rare", "medium", "undead"],
+			};
+			renderStatBlock(rareCreature);
+			expect(screen.getByText(RK_DC_25_REGEX)).toBeInTheDocument();
+			expect(screen.getByText(RK_UNDEAD_RELIGION_REGEX)).toBeInTheDocument();
+		});
+
+		it("shows multiple skills for types with dual skill mapping", () => {
+			const beastCreature: Pf2eCreature = {
+				...GOBLIN_WARRIOR,
+				traits: ["small", "beast"],
+			};
+			renderStatBlock(beastCreature);
+			expect(screen.getByText(RK_BEAST_SKILLS_REGEX)).toBeInTheDocument();
+		});
+
+		it("omits Recall Knowledge when no type trait is recognized", () => {
+			const noTypeCreature: Pf2eCreature = {
+				...GOBLIN_WARRIOR,
+				traits: ["small", "goblin"],
+			};
+			renderStatBlock(noTypeCreature);
+			expect(screen.queryByText("Recall Knowledge")).not.toBeInTheDocument();
+		});
+	});
+
+	describe("perception and senses", () => {
+		it("renders perception modifier and senses", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("Perception")).toBeInTheDocument();
+			expect(screen.getByText(PERCEPTION_SENSES_REGEX)).toBeInTheDocument();
+		});
+
+		it("renders languages", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("Languages")).toBeInTheDocument();
+			expect(screen.getByText("Common, Goblin")).toBeInTheDocument();
+		});
+
+		it("renders skills", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("Skills")).toBeInTheDocument();
+			expect(screen.getByText(SKILLS_REGEX)).toBeInTheDocument();
+		});
+	});
+
+	describe("ability modifiers", () => {
+		it("renders all six ability labels", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			for (const label of ["Str", "Dex", "Con", "Int", "Wis", "Cha"]) {
+				expect(screen.getByText(label)).toBeInTheDocument();
+			}
+		});
+
+		it("renders positive and negative modifiers", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("+3")).toBeInTheDocument();
+			expect(screen.getByText("-1")).toBeInTheDocument();
+		});
+	});
+
+	describe("defenses", () => {
+		it("renders AC and saves", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("AC")).toBeInTheDocument();
+			expect(screen.getByText(AC_REGEX)).toBeInTheDocument();
+			expect(screen.getByText("Fort")).toBeInTheDocument();
+			expect(screen.getByText("Ref")).toBeInTheDocument();
+			expect(screen.getByText("Will")).toBeInTheDocument();
+		});
+
+		it("renders HP", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("HP")).toBeInTheDocument();
+			expect(screen.getByText("6")).toBeInTheDocument();
+		});
+
+		it("renders saveConditional inline with saves", () => {
+			renderStatBlock(NAUNET);
+			expect(screen.getByText(SAVE_CONDITIONAL_REGEX)).toBeInTheDocument();
+		});
+
+		it("omits saveConditional when absent", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(
+				screen.queryByText(SAVE_CONDITIONAL_ABSENT_REGEX),
+			).not.toBeInTheDocument();
+		});
+
+		it("renders hpDetails in parentheses after HP", () => {
+			renderStatBlock(TROLL);
+			expect(screen.getByText(HP_DETAILS_REGEX)).toBeInTheDocument();
+		});
+
+		it("omits hpDetails when absent", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.queryByText(REGEN_REGEX)).not.toBeInTheDocument();
+		});
+
+		it("renders resistances and weaknesses", () => {
+			renderStatBlock(NAUNET);
+			expect(screen.getByText("Resistances")).toBeInTheDocument();
+			expect(
+				screen.getByText("Precision 5, Protean anatomy 10"),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe("abilities", () => {
+		it("renders mid (defensive) abilities", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText(ABILITY_MID_NAME_REGEX)).toBeInTheDocument();
+			expect(screen.getByText(ABILITY_MID_DESC_REGEX)).toBeInTheDocument();
+		});
+	});
+
+	describe("speed and attacks", () => {
+		it("renders speed", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText("Speed")).toBeInTheDocument();
+			expect(screen.getByText("25 feet")).toBeInTheDocument();
+		});
+
+		it("renders attacks", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.getByText(ATTACK_NAME_REGEX)).toBeInTheDocument();
+			expect(screen.getByText(ATTACK_DAMAGE_REGEX)).toBeInTheDocument();
+		});
+	});
+
+	describe("spellcasting", () => {
+		it("renders spellcasting entry with header", () => {
+			renderStatBlock(NAUNET);
+			expect(screen.getByText(SPELLCASTING_ENTRY_REGEX)).toBeInTheDocument();
+			expect(screen.getByText("DC 25, attack +17")).toBeInTheDocument();
+		});
+
+		it("renders ranked spells", () => {
+			renderStatBlock(NAUNET);
+			expect(screen.getByText("Rank 4:")).toBeInTheDocument();
+			expect(
+				screen.getByText("Unfettered Movement (Constant)"),
+			).toBeInTheDocument();
+		});
+
+		it("renders cantrips", () => {
+			renderStatBlock(NAUNET);
+			expect(screen.getByText("Cantrips:")).toBeInTheDocument();
+			expect(screen.getByText("Detect Magic")).toBeInTheDocument();
+		});
+
+		it("omits spellcasting when absent", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(screen.queryByText(CANTRIPS_REGEX)).not.toBeInTheDocument();
+		});
+	});
+
+	describe("equipment section", () => {
+		const CREATURE_WITH_EQUIPMENT: Pf2eCreature = {
+			...GOBLIN_WARRIOR,
+			id: creatureId("test:equipped"),
+			name: "Equipped NPC",
+			items: "longsword, leather armor",
+			equipment: [
+				{
+					name: "Giant Wasp Venom",
+					level: 7,
+					category: "poison",
+					traits: ["consumable", "poison"],
+					description: "A deadly poison extracted from giant wasps.",
+				},
+				{
+					name: "Scroll of Teleport",
+					level: 11,
+					category: "scroll",
+					traits: ["consumable", "magical", "scroll"],
+					description: "A scroll containing Teleport.",
+					spellName: "Teleport",
+					spellRank: 6,
+				},
+				{
+					name: "Plain Talisman",
+					level: 1,
+					traits: ["magical"],
+				},
+			],
+		};
+
+		it("renders Equipment section with item names", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(
+				screen.getByRole("heading", { name: "Equipment" }),
+			).toBeInTheDocument();
+			expect(screen.getByText("Giant Wasp Venom")).toBeInTheDocument();
+		});
+
+		it("renders scroll name as-is from Foundry data", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(screen.getByText(SCROLL_NAME_REGEX)).toBeInTheDocument();
+		});
+
+		it("does not render Equipment section when creature has no equipment", () => {
+			renderStatBlock(GOBLIN_WARRIOR);
+			expect(
+				screen.queryByRole("heading", { name: "Equipment" }),
+			).not.toBeInTheDocument();
+		});
+
+		it("renders equipment items with descriptions as clickable buttons", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(
+				screen.getByRole("button", { name: "Giant Wasp Venom" }),
+			).toBeInTheDocument();
+		});
+
+		it("renders equipment items without descriptions as plain text", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(
+				screen.queryByRole("button", { name: "Plain Talisman" }),
+			).not.toBeInTheDocument();
+			expect(screen.getByText("Plain Talisman")).toBeInTheDocument();
+		});
+
+		it("renders Items line with mundane item names", () => {
+			renderStatBlock(CREATURE_WITH_EQUIPMENT);
+			expect(screen.getByText("Items")).toBeInTheDocument();
+			expect(screen.getByText("longsword, leather armor")).toBeInTheDocument();
+		});
+	});
+
+	describe("clickable spells", () => {
+		const SPELLCASTER: Pf2eCreature = {
+			...NAUNET,
+			id: creatureId("test:spellcaster"),
+			name: "Spellcaster",
+			spellcasting: [
+				{
+					name: "Divine Innate Spells",
+					headerText: "DC 30, attack +20",
+					atWill: [{ name: "Detect Magic", rank: 1 }],
+					daily: [
+						{
+							uses: 4,
+							each: true,
+							spells: [
+								{
+									name: "Heal",
+									description: "You channel positive energy to heal.",
+									rank: 4,
+									usesPerDay: 3,
+								},
+								{ name: "Restoration", rank: 4 },
+							],
+						},
+					],
+				},
+			],
+		};
+
+		beforeEach(() => {
+			Object.defineProperty(globalThis, "matchMedia", {
+				writable: true,
+				configurable: true,
+				value: vi.fn().mockImplementation(() => ({
+					matches: true,
+					media: "(min-width: 1024px)",
+					onchange: null,
+					addEventListener: vi.fn(),
+					removeEventListener: vi.fn(),
+					addListener: vi.fn(),
+					removeListener: vi.fn(),
+					dispatchEvent: vi.fn(),
+				})),
+			});
+		});
+
+		it("renders a spell with a description as a clickable button", () => {
+			renderStatBlock(SPELLCASTER);
+			expect(screen.getByRole("button", { name: "Heal" })).toBeInTheDocument();
+		});
+
+		it("renders a spell without description as plain text (not a button)", () => {
+			renderStatBlock(SPELLCASTER);
+			expect(
+				screen.queryByRole("button", { name: "Restoration" }),
+			).not.toBeInTheDocument();
+			expect(screen.getByText("Restoration")).toBeInTheDocument();
+		});
+
+		it("renders usesPerDay as plain text alongside the spell button", () => {
+			renderStatBlock(SPELLCASTER);
+			expect(screen.getByText(USES_PER_DAY_REGEX)).toBeInTheDocument();
+		});
+
+		it("opens the spell popover when a spell button is clicked", async () => {
+			const user = userEvent.setup();
+			renderStatBlock(SPELLCASTER);
+			await user.click(screen.getByRole("button", { name: "Heal" }));
+			expect(screen.getByText(HEAL_DESCRIPTION_REGEX)).toBeInTheDocument();
+		});
+
+		it("closes the popover when Escape is pressed", async () => {
+			const user = userEvent.setup();
+			renderStatBlock(SPELLCASTER);
+			await user.click(screen.getByRole("button", { name: "Heal" }));
+			expect(screen.getByText(HEAL_DESCRIPTION_REGEX)).toBeInTheDocument();
+			await user.keyboard("{Escape}");
+			expect(
+				screen.queryByText(HEAL_DESCRIPTION_REGEX),
+			).not.toBeInTheDocument();
+		});
+	});
+});

apps/web/src/components/__tests__/player-character-section.test.tsx

@@ -0,0 +1,108 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createRef } from "react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { polyfillDialog } from "../../__tests__/polyfill-dialog.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
+import {
+	PlayerCharacterSection,
+	type PlayerCharacterSectionHandle,
+} from "../player-character-section.js";
+
+const CREATE_FIRST_PC_REGEX = /create your first player character/i;
+
+beforeAll(() => {
+	polyfillDialog();
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+afterEach(cleanup);
+
+function renderSection() {
+	const ref = createRef<PlayerCharacterSectionHandle>();
+	const result = render(<PlayerCharacterSection ref={ref} />, {
+		wrapper: AllProviders,
+	});
+	return { ...result, ref };
+}
+
+describe("PlayerCharacterSection", () => {
+	it("openManagement ref handle opens the management dialog", async () => {
+		const { ref } = renderSection();
+
+		const handle = ref.current;
+		if (!handle) throw new Error("ref not set");
+		act(() => handle.openManagement());
+
+		// Management dialog should now be open with its title visible
+		await waitFor(() => {
+			const dialogs = document.querySelectorAll("dialog");
+			const managementDialog = Array.from(dialogs).find((d) =>
+				d.textContent?.includes("Player Characters"),
+			);
+			expect(managementDialog).toHaveAttribute("open");
+		});
+	});
+
+	it("creating a character from management opens create modal", async () => {
+		const user = userEvent.setup();
+		const { ref } = renderSection();
+
+		const handle = ref.current;
+		if (!handle) throw new Error("ref not set");
+		act(() => handle.openManagement());
+
+		await user.click(
+			screen.getByRole("button", {
+				name: CREATE_FIRST_PC_REGEX,
+			}),
+		);
+
+		// Create modal should now be visible
+		await waitFor(() => {
+			expect(screen.getByPlaceholderText("Character name")).toBeInTheDocument();
+		});
+	});
+
+	it("saving a new character and returning to management", async () => {
+		const user = userEvent.setup();
+		const { ref } = renderSection();
+
+		const handle = ref.current;
+		if (!handle) throw new Error("ref not set");
+		act(() => handle.openManagement());
+
+		await user.click(
+			screen.getByRole("button", {
+				name: CREATE_FIRST_PC_REGEX,
+			}),
+		);
+
+		// Fill in the create form
+		await user.type(screen.getByPlaceholderText("Character name"), "Aria");
+		await user.type(screen.getByPlaceholderText("AC"), "16");
+		await user.type(screen.getByPlaceholderText("Max HP"), "30");
+
+		await user.click(screen.getByRole("button", { name: "Create" }));
+
+		// Should return to management dialog showing the new character
+		await waitFor(() => {
+			expect(screen.getByText("Aria")).toBeInTheDocument();
+		});
+	});
+});

apps/web/src/components/__tests__/player-management.test.tsx

@@ -0,0 +1,120 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { type PlayerCharacter, playerCharacterId } from "@initiative/domain";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { polyfillDialog } from "../../__tests__/polyfill-dialog.js";
+
+afterEach(cleanup);
+
+const CREATE_FIRST_PC_REGEX = /create your first player character/i;
+const LEVEL_REGEX = /^Lv /;
+
+import { PlayerManagement } from "../player-management.js";
+
+beforeAll(() => {
+	polyfillDialog();
+});
+
+const PC_WARRIOR: PlayerCharacter = {
+	id: playerCharacterId("pc-1"),
+	name: "Thorin",
+	ac: 18,
+	maxHp: 45,
+	color: "red",
+	icon: "sword",
+};
+
+const PC_WIZARD: PlayerCharacter = {
+	id: playerCharacterId("pc-2"),
+	name: "Gandalf",
+	ac: 12,
+	maxHp: 30,
+	color: "blue",
+	icon: "wand",
+	level: 10,
+};
+
+function renderManagement(
+	overrides: Partial<Parameters<typeof PlayerManagement>[0]> = {},
+) {
+	const props = {
+		open: true,
+		onClose: vi.fn(),
+		characters: [] as readonly PlayerCharacter[],
+		onEdit: vi.fn(),
+		onDelete: vi.fn(),
+		onCreate: vi.fn(),
+		...overrides,
+	};
+	return { ...render(<PlayerManagement {...props} />), props };
+}
+
+describe("PlayerManagement", () => {
+	it("shows empty state when no characters", () => {
+		renderManagement();
+		expect(screen.getByText("No player characters yet")).toBeInTheDocument();
+	});
+
+	it("shows create button in empty state that calls onCreate", async () => {
+		const user = userEvent.setup();
+		const { props } = renderManagement();
+
+		await user.click(
+			screen.getByRole("button", {
+				name: CREATE_FIRST_PC_REGEX,
+			}),
+		);
+		expect(props.onCreate).toHaveBeenCalled();
+	});
+
+	it("renders each character with name, AC, HP", () => {
+		renderManagement({ characters: [PC_WARRIOR, PC_WIZARD] });
+		expect(screen.getByText("Thorin")).toBeInTheDocument();
+		expect(screen.getByText("Gandalf")).toBeInTheDocument();
+		expect(screen.getByText("AC 18")).toBeInTheDocument();
+		expect(screen.getByText("HP 45")).toBeInTheDocument();
+		expect(screen.getByText("AC 12")).toBeInTheDocument();
+		expect(screen.getByText("HP 30")).toBeInTheDocument();
+	});
+
+	it("shows level when present, omits when undefined", () => {
+		renderManagement({ characters: [PC_WARRIOR, PC_WIZARD] });
+		expect(screen.getByText("Lv 10")).toBeInTheDocument();
+		// Thorin has no level — there should be only one "Lv" text
+		expect(screen.queryAllByText(LEVEL_REGEX)).toHaveLength(1);
+	});
+
+	it("edit button calls onEdit with the character", async () => {
+		const user = userEvent.setup();
+		const { props } = renderManagement({ characters: [PC_WARRIOR] });
+
+		await user.click(screen.getByRole("button", { name: "Edit" }));
+		expect(props.onEdit).toHaveBeenCalledWith(PC_WARRIOR);
+	});
+
+	it("delete button calls onDelete after confirmation", async () => {
+		const user = userEvent.setup();
+		const { props } = renderManagement({ characters: [PC_WARRIOR] });
+
+		const deleteBtn = screen.getByRole("button", {
+			name: "Delete player character",
+		});
+		await user.click(deleteBtn);
+		const confirmBtn = screen.getByRole("button", {
+			name: "Confirm delete player character",
+		});
+		await user.click(confirmBtn);
+		expect(props.onDelete).toHaveBeenCalledWith(PC_WARRIOR.id);
+	});
+
+	it("add button calls onCreate", async () => {
+		const user = userEvent.setup();
+		const { props } = renderManagement({ characters: [PC_WARRIOR] });
+
+		await user.click(screen.getByRole("button", { name: "Add" }));
+		expect(props.onCreate).toHaveBeenCalled();
+	});
+});

apps/web/src/components/__tests__/settings-modal.test.tsx

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+
+afterEach(cleanup);
+
+import { polyfillDialog } from "../../__tests__/polyfill-dialog.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
+import { SettingsModal } from "../settings-modal.js";
+
+beforeAll(() => {
+	polyfillDialog();
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+function renderModal(open = true) {
+	const onClose = vi.fn();
+	const result = render(<SettingsModal open={open} onClose={onClose} />, {
+		wrapper: AllProviders,
+	});
+	return { ...result, onClose };
+}
+
+describe("SettingsModal", () => {
+	it("renders game system section with all three options", () => {
+		renderModal();
+		expect(screen.getByText("Game System")).toBeInTheDocument();
+		expect(
+			screen.getByRole("button", { name: "5e (2014)" }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole("button", { name: "5.5e (2024)" }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole("button", { name: "Pathfinder 2e" }),
+		).toBeInTheDocument();
+	});
+
+	it("renders theme toggle buttons", () => {
+		renderModal();
+		expect(screen.getByRole("button", { name: "System" })).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Light" })).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Dark" })).toBeInTheDocument();
+	});
+
+	it("clicking an edition button switches the active edition", async () => {
+		const user = userEvent.setup();
+		renderModal();
+		const btn5e = screen.getByRole("button", { name: "5e (2014)" });
+		await user.click(btn5e);
+		// After clicking 5e, it should have the active style
+		expect(btn5e.className).toContain("bg-accent");
+	});
+
+	it("clicking a theme button switches the active theme", async () => {
+		const user = userEvent.setup();
+		renderModal();
+		const darkBtn = screen.getByRole("button", { name: "Dark" });
+		await user.click(darkBtn);
+		expect(darkBtn.className).toContain("bg-accent");
+	});
+
+	it("close button calls onClose", async () => {
+		const user = userEvent.setup();
+		const { onClose } = renderModal();
+		// DialogHeader renders an X button
+		const buttons = screen.getAllByRole("button");
+		const closeBtn = buttons.find((b) => b.querySelector(".h-4.w-4") !== null);
+		expect(closeBtn).toBeDefined();
+		await user.click(closeBtn as HTMLElement);
+		expect(onClose).toHaveBeenCalled();
+	});
+});

apps/web/src/components/__tests__/source-fetch-prompt.test.tsx

@@ -0,0 +1,133 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import { AdapterProvider } from "../../contexts/adapter-context.js";
+import { RulesEditionProvider } from "../../contexts/rules-edition-context.js";
+import { SourceFetchPrompt } from "../source-fetch-prompt.js";
+
+const MONSTER_MANUAL_REGEX = /Monster Manual/;
+
+afterEach(cleanup);
+
+const mockFetchAndCacheSource = vi.fn();
+const mockUploadAndCacheSource = vi.fn();
+
+// Uses context mock because fetchAndCacheSource/uploadAndCacheSource involve
+// real fetch() calls. The test controls success/failure to verify the
+// component's loading and error UI, not the fetching logic itself.
+vi.mock("../../contexts/bestiary-context.js", () => ({
+	useBestiaryContext: () => ({
+		fetchAndCacheSource: mockFetchAndCacheSource,
+		uploadAndCacheSource: mockUploadAndCacheSource,
+	}),
+}));
+
+function renderPrompt(sourceCode = "MM") {
+	const onSourceLoaded = vi.fn();
+	const adapters = createTestAdapters();
+	adapters.bestiaryIndex = {
+		...adapters.bestiaryIndex,
+		getDefaultFetchUrl: (code: string) =>
+			`https://example.com/bestiary/${code}.json`,
+		getSourceDisplayName: (code: string) =>
+			code === "MM" ? "Monster Manual" : code,
+	};
+	const result = render(
+		<RulesEditionProvider>
+			<AdapterProvider adapters={adapters}>
+				<SourceFetchPrompt
+					sourceCode={sourceCode}
+					onSourceLoaded={onSourceLoaded}
+				/>
+			</AdapterProvider>
+		</RulesEditionProvider>,
+	);
+	return { ...result, onSourceLoaded };
+}
+
+describe("SourceFetchPrompt", () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("renders source name, URL input, Load and Upload buttons", () => {
+		renderPrompt();
+		expect(screen.getByText(MONSTER_MANUAL_REGEX)).toBeInTheDocument();
+		expect(
+			screen.getByDisplayValue("https://example.com/bestiary/MM.json"),
+		).toBeInTheDocument();
+		expect(screen.getByText("Load")).toBeInTheDocument();
+		expect(screen.getByText("Upload file")).toBeInTheDocument();
+	});
+
+	it("Load calls fetchAndCacheSource and onSourceLoaded on success", async () => {
+		mockFetchAndCacheSource.mockResolvedValueOnce({ skippedNames: [] });
+		const user = userEvent.setup();
+		const { onSourceLoaded } = renderPrompt();
+
+		await user.click(screen.getByText("Load"));
+
+		await waitFor(() => {
+			expect(mockFetchAndCacheSource).toHaveBeenCalledWith(
+				"MM",
+				"https://example.com/bestiary/MM.json",
+			);
+			expect(onSourceLoaded).toHaveBeenCalled();
+		});
+	});
+
+	it("fetch error shows error message", async () => {
+		mockFetchAndCacheSource.mockRejectedValueOnce(new Error("Network error"));
+		const user = userEvent.setup();
+		renderPrompt();
+
+		await user.click(screen.getByText("Load"));
+
+		await waitFor(() => {
+			expect(screen.getByText("Network error")).toBeInTheDocument();
+		});
+	});
+
+	it("upload file calls uploadAndCacheSource and onSourceLoaded", async () => {
+		mockUploadAndCacheSource.mockResolvedValueOnce(undefined);
+		const user = userEvent.setup();
+		const { onSourceLoaded } = renderPrompt();
+
+		const file = new File(['{"monster":[]}'], "bestiary-mm.json", {
+			type: "application/json",
+		});
+		const fileInput = document.querySelector(
+			'input[type="file"]',
+		) as HTMLInputElement;
+		await user.upload(fileInput, file);
+
+		await waitFor(() => {
+			expect(mockUploadAndCacheSource).toHaveBeenCalledWith("MM", {
+				monster: [],
+			});
+			expect(onSourceLoaded).toHaveBeenCalled();
+		});
+	});
+
+	it("upload error shows error message", async () => {
+		mockUploadAndCacheSource.mockRejectedValueOnce(new Error("Invalid format"));
+		const user = userEvent.setup();
+		renderPrompt();
+
+		const file = new File(['{"bad": true}'], "bad.json", {
+			type: "application/json",
+		});
+		const fileInput = document.querySelector(
+			'input[type="file"]',
+		) as HTMLInputElement;
+		await user.upload(fileInput, file);
+
+		await waitFor(() => {
+			expect(screen.getByText("Invalid format")).toBeInTheDocument();
+		});
+	});
+});

apps/web/src/components/__tests__/source-manager.test.tsx

@@ -3,60 +3,68 @@ import "@testing-library/jest-dom/vitest";
 
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
-
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
-vi.mock("../../adapters/bestiary-cache.js", () => ({
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
-	getCachedSources: vi.fn(),
+import { AllProviders } from "../../__tests__/test-providers.js";
-	clearSource: vi.fn(),
+import type { CachedSourceInfo } from "../../adapters/ports.js";
-	clearAll: vi.fn(),
-}));
-
-// Mock the context module
-vi.mock("../../contexts/bestiary-context.js", () => ({
-	useBestiaryContext: vi.fn(),
-}));
-
-import * as bestiaryCache from "../../adapters/bestiary-cache.js";
-import { useBestiaryContext } from "../../contexts/bestiary-context.js";
 import { SourceManager } from "../source-manager.js";
 
-const mockGetCachedSources = vi.mocked(bestiaryCache.getCachedSources);
+beforeAll(() => {
-const mockClearSource = vi.mocked(bestiaryCache.clearSource);
+	Object.defineProperty(globalThis, "matchMedia", {
-const mockClearAll = vi.mocked(bestiaryCache.clearAll);
+		writable: true,
-const mockUseBestiaryContext = vi.mocked(useBestiaryContext);
+		value: vi.fn().mockImplementation((query: string) => ({
-
+			matches: false,
-afterEach(() => {
+			media: query,
-	cleanup();
+			onchange: null,
-	vi.clearAllMocks();
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
 });
 
-function setupMockContext() {
+afterEach(cleanup);
-	const refreshCache = vi.fn().mockResolvedValue(undefined);
+
-	mockUseBestiaryContext.mockReturnValue({
+function renderWithSources(sources: CachedSourceInfo[] = []): void {
-		refreshCache,
+	const adapters = createTestAdapters();
-		search: vi.fn().mockReturnValue([]),
+	// Wire getCachedSources to return the provided sources initially,
-		getCreature: vi.fn(),
+	// then empty after clear operations
-		isLoaded: true,
+	let currentSources = [...sources];
-		isSourceCached: vi.fn().mockResolvedValue(false),
+	adapters.bestiaryCache = {
-		fetchAndCacheSource: vi.fn(),
+		...adapters.bestiaryCache,
-		uploadAndCacheSource: vi.fn(),
+		getCachedSources: () => Promise.resolve(currentSources),
-	} as ReturnType<typeof useBestiaryContext>);
+		clearSource(_system, sourceCode) {
-	return { refreshCache };
+			currentSources = currentSources.filter(
+				(s) => s.sourceCode !== sourceCode,
+			);
+			return Promise.resolve();
+		},
+		clearAll() {
+			currentSources = [];
+			return Promise.resolve();
+		},
+	};
+
+	render(<SourceManager />, {
+		wrapper: ({ children }: { children: ReactNode }) => (
+			<AllProviders adapters={adapters}>{children}</AllProviders>
+		),
+	});
 }
 
 describe("SourceManager", () => {
 	it("shows 'No cached sources' empty state when no sources", async () => {
-		setupMockContext();
+		renderWithSources([]);
-		mockGetCachedSources.mockResolvedValue([]);
-		render(<SourceManager />);
 		await waitFor(() => {
 			expect(screen.getByText("No cached sources")).toBeInTheDocument();
 		});
 	});
 
 	it("lists cached sources with display name and creature count", async () => {
-		setupMockContext();
+		renderWithSources([
-		mockGetCachedSources.mockResolvedValue([
 			{
 				sourceCode: "mm",
 				displayName: "Monster Manual",
@@ -70,7 +78,6 @@ describe("SourceManager", () => {
 				cachedAt: Date.now(),
 			},
 		]);
-		render(<SourceManager />);
 		await waitFor(() => {
 			expect(screen.getByText("Monster Manual")).toBeInTheDocument();
 		});
@@ -79,62 +86,45 @@ describe("SourceManager", () => {
 		expect(screen.getByText("100 creatures")).toBeInTheDocument();
 	});
 
-	it("Clear All button calls cache clear and refreshCache", async () => {
+	it("Clear All button removes all sources", async () => {
 		const user = userEvent.setup();
-		const { refreshCache } = setupMockContext();
+		renderWithSources([
-		mockGetCachedSources
+			{
-			.mockResolvedValueOnce([
+				sourceCode: "mm",
-				{
+				displayName: "Monster Manual",
-					sourceCode: "mm",
+				creatureCount: 300,
-					displayName: "Monster Manual",
+				cachedAt: Date.now(),
-					creatureCount: 300,
+			},
-					cachedAt: Date.now(),
+		]);
-				},
-			])
-			.mockResolvedValue([]);
-		mockClearAll.mockResolvedValue(undefined);
-		render(<SourceManager />);
 
 		await waitFor(() => {
 			expect(screen.getByText("Monster Manual")).toBeInTheDocument();
 		});
 
 		await user.click(screen.getByRole("button", { name: "Clear All" }));
+
 		await waitFor(() => {
-			expect(mockClearAll).toHaveBeenCalled();
+			expect(screen.getByText("No cached sources")).toBeInTheDocument();
 		});
-		expect(refreshCache).toHaveBeenCalled();
 	});
 
-	it("individual source delete button calls clear for that source", async () => {
+	it("individual source delete button removes that source", async () => {
 		const user = userEvent.setup();
-		const { refreshCache } = setupMockContext();
+		renderWithSources([
-		mockGetCachedSources
+			{
-			.mockResolvedValueOnce([
+				sourceCode: "mm",
-				{
+				displayName: "Monster Manual",
-					sourceCode: "mm",
+				creatureCount: 300,
-					displayName: "Monster Manual",
+				cachedAt: Date.now(),
-					creatureCount: 300,
+			},
-					cachedAt: Date.now(),
+			{
-				},
+				sourceCode: "vgm",
-				{
+				displayName: "Volo's Guide",
-					sourceCode: "vgm",
+				creatureCount: 100,
-					displayName: "Volo's Guide",
+				cachedAt: Date.now(),
-					creatureCount: 100,
+			},
-					cachedAt: Date.now(),
+		]);
-				},
-			])
-			.mockResolvedValue([
-				{
-					sourceCode: "vgm",
-					displayName: "Volo's Guide",
-					creatureCount: 100,
-					cachedAt: Date.now(),
-				},
-			]);
-		mockClearSource.mockResolvedValue(undefined);
 
-		render(<SourceManager />);
 		await waitFor(() => {
 			expect(screen.getByText("Monster Manual")).toBeInTheDocument();
 		});
@@ -142,9 +132,10 @@ describe("SourceManager", () => {
 		await user.click(
 			screen.getByRole("button", { name: "Remove Monster Manual" }),
 		);
+
 		await waitFor(() => {
-			expect(mockClearSource).toHaveBeenCalledWith("mm");
+			expect(screen.queryByText("Monster Manual")).not.toBeInTheDocument();
 		});
-		expect(refreshCache).toHaveBeenCalled();
+		expect(screen.getByText("Volo's Guide")).toBeInTheDocument();
 	});
 });

apps/web/src/components/__tests__/spell-detail-popover.test.tsx

@@ -0,0 +1,158 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import type { SpellReference } from "@initiative/domain";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SpellDetailPopover } from "../spell-detail-popover.js";
+
+afterEach(cleanup);
+
+const FIREBALL: SpellReference = {
+	name: "Fireball",
+	slug: "fireball",
+	rank: 3,
+	description: "A spark leaps from your fingertip to the target.",
+	traits: ["fire", "manipulate"],
+	traditions: ["arcane", "primal"],
+	range: "500 feet",
+	area: "20-foot burst",
+	defense: "basic Reflex",
+	actionCost: "2",
+	heightening: "Heightened (+1) The damage increases by 2d6.",
+};
+
+const ANCHOR: DOMRect = new DOMRect(100, 100, 50, 20);
+
+const SPARK_LEAPS_REGEX = /spark leaps/;
+const HEIGHTENED_REGEX = /Heightened.*2d6/;
+const RANGE_REGEX = /500 feet/;
+const AREA_REGEX = /20-foot burst/;
+const DEFENSE_REGEX = /basic Reflex/;
+const NO_DESCRIPTION_REGEX = /No description available/;
+const DIALOG_LABEL_REGEX = /Spell details: Fireball/;
+
+beforeEach(() => {
+	// Force desktop variant in jsdom
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		configurable: true,
+		value: vi.fn().mockImplementation(() => ({
+			matches: true,
+			media: "(min-width: 1024px)",
+			onchange: null,
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+describe("SpellDetailPopover", () => {
+	it("renders spell name, rank, traits, and description", () => {
+		render(
+			<SpellDetailPopover
+				spell={FIREBALL}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(screen.getByText("Fireball")).toBeInTheDocument();
+		expect(screen.getByText("3rd")).toBeInTheDocument();
+		expect(screen.getByText("fire")).toBeInTheDocument();
+		expect(screen.getByText("manipulate")).toBeInTheDocument();
+		expect(screen.getByText(SPARK_LEAPS_REGEX)).toBeInTheDocument();
+	});
+
+	it("renders heightening rules when present", () => {
+		render(
+			<SpellDetailPopover
+				spell={FIREBALL}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(screen.getByText(HEIGHTENED_REGEX)).toBeInTheDocument();
+	});
+
+	it("renders range, area, and defense", () => {
+		render(
+			<SpellDetailPopover
+				spell={FIREBALL}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(screen.getByText(RANGE_REGEX)).toBeInTheDocument();
+		expect(screen.getByText(AREA_REGEX)).toBeInTheDocument();
+		expect(screen.getByText(DEFENSE_REGEX)).toBeInTheDocument();
+	});
+
+	it("calls onClose when Escape is pressed", () => {
+		const onClose = vi.fn();
+		render(
+			<SpellDetailPopover
+				spell={FIREBALL}
+				anchorRect={ANCHOR}
+				onClose={onClose}
+			/>,
+		);
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it("shows placeholder when description is missing", () => {
+		const spell: SpellReference = { name: "Mystery", rank: 1 };
+		render(
+			<SpellDetailPopover
+				spell={spell}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(screen.getByText(NO_DESCRIPTION_REGEX)).toBeInTheDocument();
+	});
+
+	it("renders the action cost as an icon when it is a numeric action count", () => {
+		render(
+			<SpellDetailPopover
+				spell={FIREBALL}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		// Action cost "2" renders as an SVG ActivityIcon (portaled to body)
+		const dialog = screen.getByRole("dialog");
+		expect(dialog.querySelector("svg")).toBeInTheDocument();
+	});
+
+	it("renders non-numeric action cost as text", () => {
+		const spell: SpellReference = {
+			...FIREBALL,
+			actionCost: "1 minute",
+		};
+		render(
+			<SpellDetailPopover
+				spell={spell}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(screen.getByText("1 minute")).toBeInTheDocument();
+	});
+
+	it("uses the dialog role with the spell name as label", () => {
+		render(
+			<SpellDetailPopover
+				spell={FIREBALL}
+				anchorRect={ANCHOR}
+				onClose={() => {}}
+			/>,
+		);
+		expect(
+			screen.getByRole("dialog", { name: DIALOG_LABEL_REGEX }),
+		).toBeInTheDocument();
+	});
+});

apps/web/src/components/__tests__/stat-block.test.tsx

@@ -0,0 +1,307 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import type { Creature } from "@initiative/domain";
+import { creatureId } from "@initiative/domain";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { DndStatBlock as StatBlock } from "../dnd-stat-block.js";
+
+afterEach(cleanup);
+
+const ARMOR_CLASS_REGEX = /Armor Class/;
+const DEX_PLUS_4_REGEX = /Dex \+4/;
+const CR_QUARTER_REGEX = /1\/4/;
+const PROF_BONUS_2_REGEX = /Proficiency Bonus \+2/;
+const NIMBLE_ESCAPE_REGEX = /Nimble Escape\./;
+const SCIMITAR_REGEX = /Scimitar\./;
+const DETECT_REGEX = /Detect\./;
+const TAIL_ATTACK_REGEX = /Tail Attack\./;
+const INNATE_SPELLCASTING_REGEX = /Innate Spellcasting\./;
+const AT_WILL_REGEX = /At Will:/;
+const DETECT_MAGIC_REGEX = /detect magic, suggestion/;
+const DAILY_REGEX = /3\/day each:/;
+const FIREBALL_REGEX = /fireball, wall of fire/;
+const LONG_REST_REGEX = /1\/long rest:/;
+const WISH_REGEX = /wish/;
+
+const GOBLIN: Creature = {
+	id: creatureId("srd:goblin"),
+	name: "Goblin",
+	source: "MM",
+	sourceDisplayName: "Monster Manual",
+	size: "Small",
+	type: "humanoid",
+	alignment: "neutral evil",
+	ac: 15,
+	acSource: "leather armor, shield",
+	hp: { average: 7, formula: "2d6" },
+	speed: "30 ft.",
+	abilities: { str: 8, dex: 14, con: 10, int: 10, wis: 8, cha: 8 },
+	cr: "1/4",
+	initiativeProficiency: 0,
+	proficiencyBonus: 2,
+	passive: 9,
+	savingThrows: "Dex +4",
+	skills: "Stealth +6",
+	senses: "darkvision 60 ft., passive Perception 9",
+	languages: "Common, Goblin",
+	traits: [
+		{
+			name: "Nimble Escape",
+			segments: [{ type: "text", value: "Disengage or Hide as bonus." }],
+		},
+	],
+	actions: [
+		{
+			name: "Scimitar",
+			segments: [{ type: "text", value: "Melee: +4 to hit, 5 slashing." }],
+		},
+	],
+	bonusActions: [
+		{
+			name: "Nimble",
+			segments: [{ type: "text", value: "Disengage or Hide." }],
+		},
+	],
+	reactions: [
+		{
+			name: "Redirect",
+			segments: [{ type: "text", value: "Redirect attack to ally." }],
+		},
+	],
+};
+
+const DRAGON: Creature = {
+	id: creatureId("srd:dragon"),
+	name: "Ancient Red Dragon",
+	source: "MM",
+	sourceDisplayName: "Monster Manual",
+	size: "Gargantuan",
+	type: "dragon",
+	alignment: "chaotic evil",
+	ac: 22,
+	hp: { average: 546, formula: "28d20 + 252" },
+	speed: "40 ft., climb 40 ft., fly 80 ft.",
+	abilities: { str: 30, dex: 10, con: 29, int: 18, wis: 15, cha: 23 },
+	cr: "24",
+	initiativeProficiency: 0,
+	proficiencyBonus: 7,
+	passive: 26,
+	resist: "fire",
+	immune: "fire",
+	vulnerable: "cold",
+	conditionImmune: "frightened",
+	legendaryActions: {
+		preamble: "The dragon can take 3 legendary actions.",
+		entries: [
+			{
+				name: "Detect",
+				segments: [
+					{ type: "text" as const, value: "Wisdom (Perception) check." },
+				],
+			},
+			{
+				name: "Tail Attack",
+				segments: [{ type: "text" as const, value: "Tail attack." }],
+			},
+		],
+	},
+	spellcasting: [
+		{
+			name: "Innate Spellcasting",
+			headerText: "The dragon's spellcasting ability is Charisma.",
+			atWill: [{ name: "detect magic" }, { name: "suggestion" }],
+			daily: [
+				{
+					uses: 3,
+					each: true,
+					spells: [{ name: "fireball" }, { name: "wall of fire" }],
+				},
+			],
+			restLong: [{ uses: 1, each: false, spells: [{ name: "wish" }] }],
+		},
+	],
+};
+
+function renderStatBlock(creature: Creature) {
+	return render(<StatBlock creature={creature} />);
+}
+
+describe("StatBlock", () => {
+	describe("header", () => {
+		it("renders creature name", () => {
+			renderStatBlock(GOBLIN);
+			expect(
+				screen.getByRole("heading", { name: "Goblin" }),
+			).toBeInTheDocument();
+		});
+
+		it("renders size, type, alignment", () => {
+			renderStatBlock(GOBLIN);
+			expect(
+				screen.getByText("Small humanoid, neutral evil"),
+			).toBeInTheDocument();
+		});
+
+		it("renders source display name", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.getByText("Monster Manual")).toBeInTheDocument();
+		});
+	});
+
+	describe("stats bar", () => {
+		it("renders AC with source", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.getByText(ARMOR_CLASS_REGEX)).toBeInTheDocument();
+			expect(screen.getByText("15")).toBeInTheDocument();
+			expect(screen.getByText("(leather armor, shield)")).toBeInTheDocument();
+		});
+
+		it("renders AC without source when acSource is undefined", () => {
+			renderStatBlock(DRAGON);
+			expect(screen.getByText("22")).toBeInTheDocument();
+		});
+
+		it("renders HP average and formula", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.getByText("7")).toBeInTheDocument();
+			expect(screen.getByText("(2d6)")).toBeInTheDocument();
+		});
+
+		it("renders speed", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.getByText("30 ft.")).toBeInTheDocument();
+		});
+	});
+
+	describe("ability scores", () => {
+		it("renders all 6 ability labels", () => {
+			renderStatBlock(GOBLIN);
+			for (const label of ["STR", "DEX", "CON", "INT", "WIS", "CHA"]) {
+				expect(screen.getByText(label)).toBeInTheDocument();
+			}
+		});
+
+		it("renders ability scores with modifier notation", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.getByText("(+2)")).toBeInTheDocument();
+		});
+	});
+
+	describe("properties", () => {
+		it("renders saving throws when present", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.getByText("Saving Throws")).toBeInTheDocument();
+			expect(screen.getByText(DEX_PLUS_4_REGEX)).toBeInTheDocument();
+		});
+
+		it("renders skills when present", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.getByText("Skills")).toBeInTheDocument();
+		});
+
+		it("renders damage resistances, immunities, vulnerabilities", () => {
+			renderStatBlock(DRAGON);
+			expect(screen.getByText("Damage Resistances")).toBeInTheDocument();
+			expect(screen.getByText("Damage Immunities")).toBeInTheDocument();
+			expect(screen.getByText("Damage Vulnerabilities")).toBeInTheDocument();
+			expect(screen.getByText("Condition Immunities")).toBeInTheDocument();
+		});
+
+		it("omits properties when undefined", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.queryByText("Damage Resistances")).not.toBeInTheDocument();
+			expect(screen.queryByText("Damage Immunities")).not.toBeInTheDocument();
+		});
+
+		it("renders CR and proficiency bonus", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.getByText("Challenge")).toBeInTheDocument();
+			expect(screen.getByText(CR_QUARTER_REGEX)).toBeInTheDocument();
+			expect(screen.getByText(PROF_BONUS_2_REGEX)).toBeInTheDocument();
+		});
+	});
+
+	describe("traits", () => {
+		it("renders trait entries", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.getByText(NIMBLE_ESCAPE_REGEX)).toBeInTheDocument();
+		});
+	});
+
+	describe("actions / bonus actions / reactions", () => {
+		it("renders actions heading and entries", () => {
+			renderStatBlock(GOBLIN);
+			expect(
+				screen.getByRole("heading", { name: "Actions" }),
+			).toBeInTheDocument();
+			expect(screen.getByText(SCIMITAR_REGEX)).toBeInTheDocument();
+		});
+
+		it("renders bonus actions heading and entries", () => {
+			renderStatBlock(GOBLIN);
+			expect(
+				screen.getByRole("heading", { name: "Bonus Actions" }),
+			).toBeInTheDocument();
+		});
+
+		it("renders reactions heading and entries", () => {
+			renderStatBlock(GOBLIN);
+			expect(
+				screen.getByRole("heading", { name: "Reactions" }),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe("legendary actions", () => {
+		it("renders legendary actions with preamble", () => {
+			renderStatBlock(DRAGON);
+			expect(
+				screen.getByRole("heading", { name: "Legendary Actions" }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByText("The dragon can take 3 legendary actions."),
+			).toBeInTheDocument();
+			expect(screen.getByText(DETECT_REGEX)).toBeInTheDocument();
+			expect(screen.getByText(TAIL_ATTACK_REGEX)).toBeInTheDocument();
+		});
+
+		it("omits legendary actions when undefined", () => {
+			renderStatBlock(GOBLIN);
+			expect(
+				screen.queryByRole("heading", { name: "Legendary Actions" }),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe("spellcasting", () => {
+		it("renders spellcasting block with header", () => {
+			renderStatBlock(DRAGON);
+			expect(screen.getByText(INNATE_SPELLCASTING_REGEX)).toBeInTheDocument();
+		});
+
+		it("renders at-will spells", () => {
+			renderStatBlock(DRAGON);
+			expect(screen.getByText(AT_WILL_REGEX)).toBeInTheDocument();
+			expect(screen.getByText(DETECT_MAGIC_REGEX)).toBeInTheDocument();
+		});
+
+		it("renders daily spells", () => {
+			renderStatBlock(DRAGON);
+			expect(screen.getByText(DAILY_REGEX)).toBeInTheDocument();
+			expect(screen.getByText(FIREBALL_REGEX)).toBeInTheDocument();
+		});
+
+		it("renders long rest spells", () => {
+			renderStatBlock(DRAGON);
+			expect(screen.getByText(LONG_REST_REGEX)).toBeInTheDocument();
+			expect(screen.getByText(WISH_REGEX)).toBeInTheDocument();
+		});
+
+		it("omits spellcasting when undefined", () => {
+			renderStatBlock(GOBLIN);
+			expect(screen.queryByText(AT_WILL_REGEX)).not.toBeInTheDocument();
+		});
+	});
+});

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

@@ -1,100 +1,68 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
 
-import type { Encounter } from "@initiative/domain";
 import { combatantId } from "@initiative/domain";
 import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
-
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
-// Mock the context modules
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
-vi.mock("../../contexts/encounter-context.js", () => ({
+import {
-	useEncounterContext: vi.fn(),
+	buildCombatant,
-}));
+	buildEncounter,
-
+} from "../../__tests__/factories/index.js";
-vi.mock("../../contexts/player-characters-context.js", () => ({
+import { AllProviders } from "../../__tests__/test-providers.js";
-	usePlayerCharactersContext: vi.fn().mockReturnValue({ characters: [] }),
-}));
-
-vi.mock("../../contexts/bestiary-context.js", () => ({
-	useBestiaryContext: vi.fn().mockReturnValue({ getCreature: () => undefined }),
-}));
-
-import { useEncounterContext } from "../../contexts/encounter-context.js";
 import { TurnNavigation } from "../turn-navigation.js";
 
-const mockUseEncounterContext = vi.mocked(useEncounterContext);
+beforeAll(() => {
-
+	Object.defineProperty(globalThis, "matchMedia", {
-afterEach(() => {
+		writable: true,
-	cleanup();
+		value: vi.fn().mockImplementation((query: string) => ({
-	vi.clearAllMocks();
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
 });
 
-function mockContext(overrides: Partial<Encounter> = {}) {
+afterEach(cleanup);
-	const encounter: Encounter = {
-		combatants: [
-			{ id: combatantId("1"), name: "Goblin" },
-			{ id: combatantId("2"), name: "Conjurer" },
-		],
-		activeIndex: 0,
-		roundNumber: 1,
-		...overrides,
-	};
 
-	const value = {
+function renderNav(encounter = buildEncounter()) {
-		encounter,
+	const adapters = createTestAdapters({ encounter });
-		advanceTurn: vi.fn(),
+	return render(<TurnNavigation />, {
-		retreatTurn: vi.fn(),
+		wrapper: ({ children }: { children: ReactNode }) => (
-		clearEncounter: vi.fn(),
+			<AllProviders adapters={adapters}>{children}</AllProviders>
-		isEmpty: encounter.combatants.length === 0,
+		),
-		hasCreatureCombatants: false,
+	});
-		canRollAllInitiative: false,
-		addCombatant: vi.fn(),
-		removeCombatant: vi.fn(),
-		editCombatant: vi.fn(),
-		setInitiative: vi.fn(),
-		setHp: vi.fn(),
-		adjustHp: vi.fn(),
-		setTempHp: vi.fn(),
-		hasTempHp: false,
-		setAc: vi.fn(),
-		toggleCondition: vi.fn(),
-		toggleConcentration: vi.fn(),
-		addFromBestiary: vi.fn(),
-		addMultipleFromBestiary: vi.fn(),
-		addFromPlayerCharacter: vi.fn(),
-		makeStore: vi.fn(),
-		withUndo: vi.fn((action: () => unknown) => action()),
-		undo: vi.fn(),
-		redo: vi.fn(),
-		canUndo: false,
-		canRedo: false,
-		undoRedoState: { undoStack: [], redoStack: [] },
-		setEncounter: vi.fn(),
-		setUndoRedoState: vi.fn(),
-		events: [],
-		lastCreatureId: null,
-	};
-
-	mockUseEncounterContext.mockReturnValue(
-		value as ReturnType<typeof useEncounterContext>,
-	);
-	return value;
-}
-
-function renderNav(overrides: Partial<Encounter> = {}) {
-	mockContext(overrides);
-	return render(<TurnNavigation />);
 }
 
 describe("TurnNavigation", () => {
 	describe("US1: Round badge and combatant name", () => {
 		it("renders the round badge with correct round number", () => {
-			renderNav({ roundNumber: 3 });
+			renderNav(
+				buildEncounter({
+					combatants: [buildCombatant({ name: "Goblin" })],
+					roundNumber: 3,
+				}),
+			);
 			expect(screen.getByText("R3")).toBeInTheDocument();
 		});
 
 		it("renders the combatant name separately from the round badge", () => {
-			renderNav();
+			renderNav(
+				buildEncounter({
+					combatants: [
+						buildCombatant({ id: combatantId("c-1"), name: "Goblin" }),
+						buildCombatant({ id: combatantId("c-2"), name: "Conjurer" }),
+					],
+					activeIndex: 0,
+					roundNumber: 1,
+				}),
+			);
 			const badge = screen.getByText("R1");
 			const name = screen.getByText("Goblin");
 			expect(badge).toBeInTheDocument();
@@ -104,41 +72,24 @@ describe("TurnNavigation", () => {
 		});
 
 		it("does not render an em dash between round and name", () => {
-			const { container } = renderNav();
+			const { container } = renderNav(
+				buildEncounter({
+					combatants: [buildCombatant({ name: "Goblin" })],
+				}),
+			);
 			expect(container.textContent).not.toContain("\u2014");
 		});
 
-		it("round badge and combatant name are siblings in the center area", () => {
+		it("round badge is in the left zone and name is in the center zone", () => {
-			renderNav();
+			renderNav(
+				buildEncounter({
+					combatants: [buildCombatant({ name: "Goblin" })],
+				}),
+			);
 			const badge = screen.getByText("R1");
 			const name = screen.getByText("Goblin");
-			// badge text is inside inner span > outer span, name is a direct child
+			// Badge and name are in separate grid cells to prevent layout shifts
-			expect(badge.closest(".flex")).toBe(name.parentElement);
+			expect(badge.parentElement).not.toBe(name.parentElement);
-		});
-
-		it("updates the round badge when round changes", () => {
-			mockContext({ roundNumber: 2 });
-			const { rerender } = render(<TurnNavigation />);
-			expect(screen.getByText("R2")).toBeInTheDocument();
-
-			mockContext({ roundNumber: 3 });
-			rerender(<TurnNavigation />);
-			expect(screen.getByText("R3")).toBeInTheDocument();
-			expect(screen.queryByText("R2")).not.toBeInTheDocument();
-		});
-
-		it("renders the next combatant name when turn advances", () => {
-			const combatants = [
-				{ id: combatantId("1"), name: "Goblin" },
-				{ id: combatantId("2"), name: "Conjurer" },
-			];
-			mockContext({ combatants, activeIndex: 0 });
-			const { rerender } = render(<TurnNavigation />);
-			expect(screen.getByText("Goblin")).toBeInTheDocument();
-
-			mockContext({ combatants, activeIndex: 1 });
-			rerender(<TurnNavigation />);
-			expect(screen.getByText("Conjurer")).toBeInTheDocument();
 		});
 	});
 
@@ -146,17 +97,21 @@ describe("TurnNavigation", () => {
 		it("applies truncation styles to long combatant names", () => {
 			const longName =
 				"Ancient Red Dragon Wyrm of the Northern Wastes and Beyond";
-			renderNav({
+			renderNav(
-				combatants: [{ id: combatantId("1"), name: longName }],
+				buildEncounter({
-			});
+					combatants: [buildCombatant({ name: longName })],
+				}),
+			);
 			const nameEl = screen.getByText(longName);
 			expect(nameEl.className).toContain("truncate");
 		});
 
 		it("renders three-zone layout with a single-character name", () => {
-			renderNav({
+			renderNav(
-				combatants: [{ id: combatantId("1"), name: "O" }],
+				buildEncounter({
-			});
+					combatants: [buildCombatant({ name: "O" })],
+				}),
+			);
 			expect(screen.getByText("R1")).toBeInTheDocument();
 			expect(screen.getByText("O")).toBeInTheDocument();
 			expect(
@@ -169,9 +124,11 @@ describe("TurnNavigation", () => {
 
 		it("keeps all action buttons accessible regardless of name length", () => {
 			const longName = "A".repeat(60);
-			renderNav({
+			renderNav(
-				combatants: [{ id: combatantId("1"), name: longName }],
+				buildEncounter({
-			});
+					combatants: [buildCombatant({ name: longName })],
+				}),
+			);
 			expect(
 				screen.getByRole("button", { name: "Previous turn" }),
 			).toBeInTheDocument();
@@ -182,29 +139,30 @@ describe("TurnNavigation", () => {
 
 		it("renders a 40-character name without truncation class issues", () => {
 			const name40 = "A".repeat(40);
-			renderNav({
+			renderNav(
-				combatants: [{ id: combatantId("1"), name: name40 }],
+				buildEncounter({
-			});
+					combatants: [buildCombatant({ name: name40 })],
+				}),
+			);
 			const nameEl = screen.getByText(name40);
 			expect(nameEl).toBeInTheDocument();
-			// The truncate class is applied but CSS only visually truncates if content overflows
 			expect(nameEl.className).toContain("truncate");
 		});
 	});
 
 	describe("US3: No combatants state", () => {
 		it("shows the round badge when there are no combatants", () => {
-			renderNav({ combatants: [], roundNumber: 1 });
+			renderNav(buildEncounter({ combatants: [], roundNumber: 1 }));
 			expect(screen.getByText("R1")).toBeInTheDocument();
 		});
 
 		it("shows 'No combatants' placeholder text", () => {
-			renderNav({ combatants: [] });
+			renderNav(buildEncounter({ combatants: [] }));
 			expect(screen.getByText("No combatants")).toBeInTheDocument();
 		});
 
 		it("disables navigation buttons when there are no combatants", () => {
-			renderNav({ combatants: [] });
+			renderNav(buildEncounter({ combatants: [] }));
 			expect(
 				screen.getByRole("button", { name: "Previous turn" }),
 			).toBeDisabled();

apps/web/src/components/action-bar.tsx

@@ -12,27 +12,20 @@ import {
 	Upload,
 	Users,
 } from "lucide-react";
-import React, { type RefObject, useCallback, useRef, useState } from "react";
+import React, { type RefObject, useCallback, useState } from "react";
 import type { SearchResult } from "../contexts/bestiary-context.js";
 import { useBulkImportContext } from "../contexts/bulk-import-context.js";
 import { useEncounterContext } from "../contexts/encounter-context.js";
 import { useInitiativeRollsContext } from "../contexts/initiative-rolls-context.js";
-import { usePlayerCharactersContext } from "../contexts/player-characters-context.js";
 import {
 	creatureKey,
 	type QueuedCreature,
 	type SuggestionActions,
 	useActionBarState,
 } from "../hooks/use-action-bar-state.js";
+import { useEncounterExportImport } from "../hooks/use-encounter-export-import.js";
 import { useLongPress } from "../hooks/use-long-press.js";
 import { cn } from "../lib/utils.js";
-import {
-	assembleExportBundle,
-	bundleToJson,
-	readImportFile,
-	triggerDownload,
-	validateImportBundle,
-} from "../persistence/export-import.js";
 import { D20Icon } from "./d20-icon.js";
 import { ExportMethodDialog } from "./export-method-dialog.js";
 import { ImportConfirmDialog } from "./import-confirm-prompt.js";
@@ -439,116 +432,23 @@ export function ActionBar({
 	} = useActionBarState();
 
 	const { state: bulkImportState } = useBulkImportContext();
+
 	const {
-		encounter,
+		importError,
-		undoRedoState,
+		showExportMethod,
-		isEmpty: encounterIsEmpty,
+		showImportMethod,
-		setEncounter,
+		showImportConfirm,
-		setUndoRedoState,
+		importFileRef,
-	} = useEncounterContext();
+		setImportError,
-	const { characters: playerCharacters, replacePlayerCharacters } =
+		setShowExportMethod,
-		usePlayerCharactersContext();
+		setShowImportMethod,
-
+		handleExportDownload,
-	const importFileRef = useRef<HTMLInputElement>(null);
+		handleExportClipboard,
-	const [importError, setImportError] = useState<string | null>(null);
+		handleImportFile,
-	const [showExportMethod, setShowExportMethod] = useState(false);
+		handleImportClipboard,
-	const [showImportMethod, setShowImportMethod] = useState(false);
+		handleImportConfirm,
-	const [showImportConfirm, setShowImportConfirm] = useState(false);
+		handleImportCancel,
-	const pendingBundleRef = useRef<
+	} = useEncounterExportImport();
-		import("@initiative/domain").ExportBundle | null
-	>(null);
-
-	const handleExportDownload = useCallback(
-		(includeHistory: boolean, filename: string) => {
-			const bundle = assembleExportBundle(
-				encounter,
-				undoRedoState,
-				playerCharacters,
-				includeHistory,
-			);
-			triggerDownload(bundle, filename);
-		},
-		[encounter, undoRedoState, playerCharacters],
-	);
-
-	const handleExportClipboard = useCallback(
-		(includeHistory: boolean) => {
-			const bundle = assembleExportBundle(
-				encounter,
-				undoRedoState,
-				playerCharacters,
-				includeHistory,
-			);
-			void navigator.clipboard.writeText(bundleToJson(bundle));
-		},
-		[encounter, undoRedoState, playerCharacters],
-	);
-
-	const applyImport = useCallback(
-		(bundle: import("@initiative/domain").ExportBundle) => {
-			setEncounter(bundle.encounter);
-			setUndoRedoState({
-				undoStack: bundle.undoStack,
-				redoStack: bundle.redoStack,
-			});
-			replacePlayerCharacters([...bundle.playerCharacters]);
-		},
-		[setEncounter, setUndoRedoState, replacePlayerCharacters],
-	);
-
-	const handleValidatedBundle = useCallback(
-		(result: import("@initiative/domain").ExportBundle | string) => {
-			if (typeof result === "string") {
-				setImportError(result);
-				return;
-			}
-			if (encounterIsEmpty) {
-				applyImport(result);
-			} else {
-				pendingBundleRef.current = result;
-				setShowImportConfirm(true);
-			}
-		},
-		[encounterIsEmpty, applyImport],
-	);
-
-	const handleImportFile = useCallback(
-		async (e: React.ChangeEvent<HTMLInputElement>) => {
-			const file = e.target.files?.[0];
-			if (!file) return;
-			if (importFileRef.current) importFileRef.current.value = "";
-
-			setImportError(null);
-			handleValidatedBundle(await readImportFile(file));
-		},
-		[handleValidatedBundle],
-	);
-
-	const handleImportClipboard = useCallback(
-		(text: string) => {
-			setImportError(null);
-			try {
-				const parsed: unknown = JSON.parse(text);
-				handleValidatedBundle(validateImportBundle(parsed));
-			} catch {
-				setImportError("Invalid file format");
-			}
-		},
-		[handleValidatedBundle],
-	);
-
-	const handleImportConfirm = useCallback(() => {
-		if (pendingBundleRef.current) {
-			applyImport(pendingBundleRef.current);
-			pendingBundleRef.current = null;
-		}
-		setShowImportConfirm(false);
-	}, [applyImport]);
-
-	const handleImportCancel = useCallback(() => {
-		pendingBundleRef.current = null;
-		setShowImportConfirm(false);
-	}, []);
 
 	const overflowItems = buildOverflowItems({
 		onManagePlayers,

apps/web/src/components/bulk-import-prompt.tsx

@@ -1,24 +1,32 @@
 import { Loader2 } from "lucide-react";
 import { useId, useState } from "react";
-import { getAllSourceCodes } from "../adapters/bestiary-index-adapter.js";
+import { useAdapters } from "../contexts/adapter-context.js";
 import { useBestiaryContext } from "../contexts/bestiary-context.js";
 import { useBulkImportContext } from "../contexts/bulk-import-context.js";
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 import { useSidePanelContext } from "../contexts/side-panel-context.js";
 import { Button } from "./ui/button.js";
 import { Input } from "./ui/input.js";
 
-const DEFAULT_BASE_URL =
+const DND_BASE_URL =
 	"https://raw.githubusercontent.com/5etools-mirror-3/5etools-src/main/data/bestiary/";
 
+const PF2E_BASE_URL =
+	"https://raw.githubusercontent.com/foundryvtt/pf2e/v13-dev/packs/pf2e/";
+
 export function BulkImportPrompt() {
+	const { bestiaryIndex, pf2eBestiaryIndex } = useAdapters();
 	const { fetchAndCacheSource, isSourceCached, refreshCache } =
 		useBestiaryContext();
 	const { state: importState, startImport, reset } = useBulkImportContext();
 	const { dismissPanel } = useSidePanelContext();
+	const { edition } = useRulesEditionContext();
 
-	const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
+	const indexPort = edition === "pf2e" ? pf2eBestiaryIndex : bestiaryIndex;
+	const defaultUrl = edition === "pf2e" ? PF2E_BASE_URL : DND_BASE_URL;
+	const [baseUrl, setBaseUrl] = useState(defaultUrl);
 	const baseUrlId = useId();
-	const totalSources = getAllSourceCodes().length;
+	const totalSources = indexPort.getAllSourceCodes().length;
 
 	const handleStart = (url: string) => {
 		startImport(url, fetchAndCacheSource, isSourceCached, refreshCache);

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

@@ -1,8 +1,9 @@
 import {
 	type CombatantId,
-	type ConditionId,
+	type ConditionEntry,
 	type CreatureId,
 	deriveHpStatus,
+	type PersistentDamageEntry,
 	type PlayerIcon,
 	type RollMode,
 } from "@initiative/domain";
@@ -10,6 +11,7 @@ import { Brain, Pencil, X } from "lucide-react";
 import { type Ref, useCallback, useEffect, useRef, useState } from "react";
 import { useEncounterContext } from "../contexts/encounter-context.js";
 import { useInitiativeRollsContext } from "../contexts/initiative-rolls-context.js";
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 import { useSidePanelContext } from "../contexts/side-panel-context.js";
 import { useLongPress } from "../hooks/use-long-press.js";
 import { cn } from "../lib/utils.js";
@@ -18,6 +20,7 @@ import { ConditionPicker } from "./condition-picker.js";
 import { ConditionTags } from "./condition-tags.js";
 import { D20Icon } from "./d20-icon.js";
 import { HpAdjustPopover } from "./hp-adjust-popover.js";
+import { PersistentDamageTags } from "./persistent-damage-tags.js";
 import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map.js";
 import { RollModeMenu } from "./roll-mode-menu.js";
 import { ConfirmButton } from "./ui/confirm-button.js";
@@ -31,7 +34,8 @@ interface Combatant {
 	readonly currentHp?: number;
 	readonly tempHp?: number;
 	readonly ac?: number;
-	readonly conditions?: readonly ConditionId[];
+	readonly conditions?: readonly ConditionEntry[];
+	readonly persistentDamage?: readonly PersistentDamageEntry[];
 	readonly isConcentrating?: boolean;
 	readonly color?: string;
 	readonly icon?: string;
@@ -415,12 +419,14 @@ function InitiativeDisplay({
 function rowBorderClass(
 	isActive: boolean,
 	isConcentrating: boolean | undefined,
+	isPf2e: boolean,
 ): string {
-	if (isActive && isConcentrating)
+	const showConcentration = isConcentrating && !isPf2e;
+	if (isActive && showConcentration)
 		return "border border-l-2 border-active-row-border border-l-purple-400 bg-active-row-bg card-glow";
 	if (isActive)
 		return "border border-l-2 border-active-row-border bg-active-row-bg card-glow";
-	if (isConcentrating)
+	if (showConcentration)
 		return "border border-l-2 border-transparent border-l-purple-400";
 	return "border border-l-2 border-transparent";
 }
@@ -430,7 +436,7 @@ function concentrationIconClass(
 	dimmed: boolean,
 ): string {
 	if (!isConcentrating)
-		return "opacity-0 group-hover:opacity-50 text-muted-foreground";
+		return "opacity-0 pointer-coarse:opacity-50 group-hover:opacity-50 text-muted-foreground";
 	return dimmed ? "opacity-50 text-purple-400" : "opacity-100 text-purple-400";
 }
 
@@ -448,14 +454,26 @@ export function CombatantRow({
 		setTempHp,
 		setAc,
 		toggleCondition,
+		setConditionValue,
+		decrementCondition,
 		toggleConcentration,
+		addPersistentDamage,
+		removePersistentDamage,
 	} = useEncounterContext();
-	const { selectedCreatureId, showCreature, toggleCollapse } =
+	const {
-		useSidePanelContext();
+		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
@@ -463,7 +481,7 @@ export function CombatantRow({
 				if (isStatBlockOpen) {
 					toggleCollapse();
 				} else {
-					showCreature(creatureId);
+					showCreature(creatureId, combatant.id);
 				}
 			}
 		: undefined;
@@ -493,12 +511,16 @@ export function CombatantRow({
 		const tempHpDropped =
 			prevTempHp !== undefined && (combatant.tempHp ?? 0) < prevTempHp;
 
-		if ((realHpDropped || tempHpDropped) && combatant.isConcentrating) {
+		if (
+			(realHpDropped || tempHpDropped) &&
+			combatant.isConcentrating &&
+			!isPf2e
+		) {
 			setIsPulsing(true);
 			clearTimeout(pulseTimerRef.current);
 			pulseTimerRef.current = setTimeout(() => setIsPulsing(false), 1200);
 		}
-	}, [currentHp, combatant.tempHp, combatant.isConcentrating]);
+	}, [currentHp, combatant.tempHp, combatant.isConcentrating, isPf2e]);
 
 	useEffect(() => {
 		if (!combatant.isConcentrating) {
@@ -516,24 +538,33 @@ export function CombatantRow({
 			ref={ref}
 			className={cn(
 				"group rounded-lg pr-3 transition-colors",
-				rowBorderClass(isActive, combatant.isConcentrating),
+				rowBorderClass(isActive, combatant.isConcentrating, isPf2e),
 				isPulsing && "animate-concentration-pulse",
 			)}
 		>
-			<div className="grid grid-cols-[2rem_3rem_auto_1fr_auto_2rem] items-center gap-1.5 py-3 sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] sm:gap-3 sm:py-2">
+			<div
-				{/* Concentration */}
+				className={cn(
-				<button
+					"grid items-center gap-1.5 py-3 sm:gap-3 sm:py-2",
-					type="button"
+					isPf2e
-					onClick={() => toggleConcentration(id)}
+						? "grid-cols-[3rem_auto_1fr_auto_2rem] pl-3 sm:grid-cols-[3.5rem_auto_1fr_auto_2rem]"
-					title="Concentrating"
+						: "grid-cols-[2rem_3rem_auto_1fr_auto_2rem] sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem]",
-					aria-label="Toggle concentration"
+				)}
-					className={cn(
+			>
-						"-my-2 -ml-[2px] flex w-full items-center justify-center self-stretch pl-[14px] transition-opacity hover:text-hover-neutral hover:opacity-100",
+				{/* Concentration — hidden in PF2e mode */}
-						concentrationIconClass(combatant.isConcentrating, dimmed),
+				{!isPf2e && (
-					)}
+					<button
-				>
+						type="button"
-					<Brain size={16} />
+						onClick={() => toggleConcentration(id)}
-				</button>
+						title="Concentrating"
+						aria-label="Toggle concentration"
+						className={cn(
+							"-my-2 -ml-[2px] flex w-full items-center justify-center self-stretch pl-[14px] transition-opacity hover:text-hover-neutral hover:opacity-100",
+							concentrationIconClass(combatant.isConcentrating, dimmed),
+						)}
+					>
+						<Brain size={16} />
+					</button>
+				)}
 
 				{/* Initiative */}
 				<div className="rounded-md bg-muted/30 px-1">
@@ -585,14 +616,28 @@ export function CombatantRow({
 						<ConditionTags
 							conditions={combatant.conditions}
 							onRemove={(conditionId) => toggleCondition(id, conditionId)}
+							onDecrement={(conditionId) => decrementCondition(id, conditionId)}
 							onOpenPicker={() => setPickerOpen((prev) => !prev)}
 						/>
 					</div>
+					{isPf2e && (
+						<PersistentDamageTags
+							entries={combatant.persistentDamage}
+							onRemove={(damageType) => removePersistentDamage(id, damageType)}
+						/>
+					)}
 					{!!pickerOpen && (
 						<ConditionPicker
 							anchorRef={conditionAnchorRef}
 							activeConditions={combatant.conditions}
+							activePersistentDamage={combatant.persistentDamage}
 							onToggle={(conditionId) => toggleCondition(id, conditionId)}
+							onSetValue={(conditionId, value) =>
+								setConditionValue(id, conditionId, value)
+							}
+							onAddPersistentDamage={(damageType, formula) =>
+								addPersistentDamage(id, damageType, formula)
+							}
 							onClose={() => setPickerOpen(false)}
 						/>
 					)}

apps/web/src/components/condition-picker.tsx

@@ -1,9 +1,13 @@
 import {
+	type ConditionEntry,
 	type ConditionId,
 	getConditionDescription,
 	getConditionsForEdition,
+	type PersistentDamageEntry,
+	type PersistentDamageType,
 } from "@initiative/domain";
-import { useLayoutEffect, useRef, useState } from "react";
+import { Check, Flame, Minus, Plus } from "lucide-react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 import { useClickOutside } from "../hooks/use-click-outside.js";
@@ -12,19 +16,29 @@ import {
 	CONDITION_COLOR_CLASSES,
 	CONDITION_ICON_MAP,
 } from "./condition-styles.js";
+import { PersistentDamagePicker } from "./persistent-damage-picker.js";
 import { Tooltip } from "./ui/tooltip.js";
 
 interface ConditionPickerProps {
 	anchorRef: React.RefObject<HTMLElement | null>;
-	activeConditions: readonly ConditionId[] | undefined;
+	activeConditions: readonly ConditionEntry[] | undefined;
+	activePersistentDamage?: readonly PersistentDamageEntry[];
 	onToggle: (conditionId: ConditionId) => void;
+	onSetValue: (conditionId: ConditionId, value: number) => void;
+	onAddPersistentDamage?: (
+		damageType: PersistentDamageType,
+		formula: string,
+	) => void;
 	onClose: () => void;
 }
 
 export function ConditionPicker({
 	anchorRef,
 	activeConditions,
+	activePersistentDamage,
 	onToggle,
+	onSetValue,
+	onAddPersistentDamage,
 	onClose,
 }: Readonly<ConditionPickerProps>) {
 	const ref = useRef<HTMLDivElement>(null);
@@ -34,6 +48,12 @@ export function ConditionPicker({
 		maxHeight: number;
 	} | null>(null);
 
+	const [editing, setEditing] = useState<{
+		id: ConditionId;
+		value: number;
+	} | null>(null);
+	const [showPersistentDamage, setShowPersistentDamage] = useState(false);
+
 	useLayoutEffect(() => {
 		const anchor = anchorRef.current;
 		const el = ref.current;
@@ -59,7 +79,54 @@ export function ConditionPicker({
 
 	const { edition } = useRulesEditionContext();
 	const conditions = getConditionsForEdition(edition);
-	const active = new Set(activeConditions ?? []);
+	const activeMap = new Map(
+		(activeConditions ?? []).map((e) => [e.id, e.value]),
+	);
+	const showPersistentDamageEntry =
+		edition === "pf2e" && !!onAddPersistentDamage;
+	const persistentDamageInsertIndex = showPersistentDamageEntry
+		? conditions.findIndex(
+				(d) => d.label.localeCompare("Persistent Damage") > 0,
+			)
+		: -1;
+
+	const persistentDamageEntry = showPersistentDamageEntry ? (
+		<React.Fragment key="persistent-damage">
+			<div
+				className={cn(
+					"flex w-full items-center gap-2 rounded px-2 py-1 text-sm transition-colors",
+					showPersistentDamage && "bg-card/50",
+				)}
+			>
+				<button
+					type="button"
+					className="flex flex-1 items-center gap-2"
+					onClick={() => setShowPersistentDamage((prev) => !prev)}
+				>
+					<Flame
+						size={14}
+						className={
+							showPersistentDamage ? "text-orange-400" : "text-muted-foreground"
+						}
+					/>
+					<span
+						className={
+							showPersistentDamage ? "text-foreground" : "text-muted-foreground"
+						}
+					>
+						Persistent Damage
+					</span>
+				</button>
+			</div>
+			{!!showPersistentDamage && (
+				<PersistentDamagePicker
+					activeEntries={activePersistentDamage}
+					onAdd={onAddPersistentDamage}
+					onClose={() => setShowPersistentDamage(false)}
+				/>
+			)}
+		</React.Fragment>
+	) : null;
 
 	return createPortal(
 		<div
@@ -71,41 +138,138 @@ export function ConditionPicker({
 					: { visibility: "hidden" as const }
 			}
 		>
-			{conditions.map((def) => {
+			{conditions.map((def, index) => {
 				const Icon = CONDITION_ICON_MAP[def.iconName];
 				if (!Icon) return null;
-				const isActive = active.has(def.id);
+				const isActive = activeMap.has(def.id);
+				const activeValue = activeMap.get(def.id);
+				const isEditing = editing?.id === def.id;
 				const colorClass =
 					CONDITION_COLOR_CLASSES[def.color] ?? "text-muted-foreground";
+
+				const handleClick = () => {
+					if (def.valued && edition === "pf2e") {
+						const current = activeMap.get(def.id);
+						setEditing({
+							id: def.id,
+							value: current ?? 1,
+						});
+					} else {
+						onToggle(def.id);
+					}
+				};
+
 				return (
-					<Tooltip
+					<React.Fragment key={def.id}>
-						key={def.id}
+						{index === persistentDamageInsertIndex && persistentDamageEntry}
-						content={getConditionDescription(def, edition)}
+						<Tooltip
-						className="block"
+							content={getConditionDescription(def, edition)}
-					>
+							className="block"
-						<button
-							type="button"
-							className={cn(
-								"flex w-full items-center gap-2 rounded px-2 py-1 text-sm transition-colors hover:bg-hover-neutral-bg",
-								isActive && "bg-card/50",
-							)}
-							onClick={() => onToggle(def.id)}
 						>
-							<Icon
+							<div
-								size={14}
+								className={cn(
-								className={isActive ? colorClass : "text-muted-foreground"}
+									"flex w-full items-center gap-2 rounded px-2 py-1 text-sm transition-colors",
-							/>
+									(isActive || isEditing) && "bg-card/50",
-							<span
+								)}
-								className={
-									isActive ? "text-foreground" : "text-muted-foreground"
-								}
 							>
-								{def.label}
+								<button
-							</span>
+									type="button"
-						</button>
+									className="flex flex-1 items-center gap-2"
-					</Tooltip>
+									onClick={handleClick}
+								>
+									<Icon
+										size={14}
+										className={
+											isActive || isEditing
+												? colorClass
+												: "text-muted-foreground"
+										}
+									/>
+									<span
+										className={
+											isActive || isEditing
+												? "text-foreground"
+												: "text-muted-foreground"
+										}
+									>
+										{def.label}
+									</span>
+								</button>
+								{isActive && def.valued && edition === "pf2e" && !isEditing && (
+									<span className="min-w-5 rounded-full bg-accent px-1.5 py-0.5 text-center font-medium text-primary-foreground text-xs">
+										{activeValue}
+									</span>
+								)}
+								{isEditing && (
+									<div className="flex items-center gap-0.5">
+										<button
+											type="button"
+											className="rounded p-0.5 text-foreground hover:bg-accent/40"
+											onMouseDown={(e) => e.preventDefault()}
+											onClick={(e) => {
+												e.stopPropagation();
+												if (editing.value > 1) {
+													setEditing({
+														...editing,
+														value: editing.value - 1,
+													});
+												}
+											}}
+										>
+											<Minus className="h-3 w-3" />
+										</button>
+										<span className="min-w-5 rounded-full bg-accent px-1.5 py-0.5 text-center font-medium text-primary-foreground text-xs">
+											{editing.value}
+										</span>
+										{(() => {
+											const atMax =
+												def.maxValue !== undefined &&
+												editing.value >= def.maxValue;
+											return (
+												<button
+													type="button"
+													className={cn(
+														"rounded p-0.5",
+														atMax
+															? "cursor-not-allowed text-muted-foreground opacity-50"
+															: "text-foreground hover:bg-accent/40",
+													)}
+													disabled={atMax}
+													onMouseDown={(e) => e.preventDefault()}
+													onClick={(e) => {
+														e.stopPropagation();
+														if (!atMax) {
+															setEditing({
+																...editing,
+																value: editing.value + 1,
+															});
+														}
+													}}
+												>
+													<Plus className="h-3 w-3" />
+												</button>
+											);
+										})()}
+										<button
+											type="button"
+											className="ml-0.5 rounded p-0.5 text-foreground hover:bg-accent/40"
+											onMouseDown={(e) => e.preventDefault()}
+											onClick={(e) => {
+												e.stopPropagation();
+												onSetValue(editing.id, editing.value);
+												setEditing(null);
+											}}
+										>
+											<Check className="h-3.5 w-3.5" />
+										</button>
+									</div>
+								)}
+							</div>
+						</Tooltip>
+					</React.Fragment>
 				);
 			})}
+			{persistentDamageInsertIndex === -1 && persistentDamageEntry}
 		</div>,
 		document.body,
 	);

apps/web/src/components/condition-styles.ts

@@ -1,42 +1,90 @@
 import type { LucideIcon } from "lucide-react";
 import {
+	Anchor,
 	ArrowDown,
 	Ban,
 	BatteryLow,
+	BrainCog,
+	CircleHelp,
+	CloudFog,
+	Drama,
 	Droplet,
+	Droplets,
 	EarOff,
+	Eclipse,
+	Eye,
 	EyeOff,
+	Flame,
+	FlaskConical,
+	Footprints,
 	Gem,
 	Ghost,
 	Hand,
 	Heart,
+	HeartCrack,
+	HeartPulse,
 	Link,
 	Moon,
+	Orbit,
+	PersonStanding,
 	ShieldMinus,
+	ShieldOff,
 	Siren,
+	Skull,
 	Snail,
+	Snowflake,
+	Sparkle,
 	Sparkles,
+	Sun,
+	Sword,
+	TrendingDown,
+	Wind,
+	Zap,
 	ZapOff,
 } from "lucide-react";
 
 export const CONDITION_ICON_MAP: Record<string, LucideIcon> = {
-	EyeOff,
+	Anchor,
-	Heart,
-	EarOff,
-	BatteryLow,
-	Siren,
-	Hand,
-	Ban,
-	Ghost,
-	ZapOff,
-	Gem,
-	Droplet,
 	ArrowDown,
+	Ban,
+	BatteryLow,
+	BrainCog,
+	CircleHelp,
+	CloudFog,
+	Drama,
+	Droplet,
+	Droplets,
+	EarOff,
+	Eclipse,
+	Eye,
+	EyeOff,
+	Flame,
+	FlaskConical,
+	Footprints,
+	Gem,
+	Ghost,
+	Hand,
+	Heart,
+	HeartCrack,
+	HeartPulse,
 	Link,
-	ShieldMinus,
-	Snail,
-	Sparkles,
 	Moon,
+	Orbit,
+	PersonStanding,
+	ShieldMinus,
+	ShieldOff,
+	Siren,
+	Skull,
+	Snail,
+	Snowflake,
+	Sparkle,
+	Sparkles,
+	Sun,
+	Sword,
+	TrendingDown,
+	Wind,
+	Zap,
+	ZapOff,
 };
 
 export const CONDITION_COLOR_CLASSES: Record<string, string> = {
@@ -49,6 +97,8 @@ export const CONDITION_COLOR_CLASSES: Record<string, string> = {
 	yellow: "text-yellow-400",
 	slate: "text-slate-400",
 	green: "text-green-400",
+	lime: "text-lime-400",
 	indigo: "text-indigo-400",
 	sky: "text-sky-400",
+	red: "text-red-400",
 };

apps/web/src/components/condition-tags.tsx

@@ -1,5 +1,6 @@
 import {
 	CONDITION_DEFINITIONS,
+	type ConditionEntry,
 	type ConditionId,
 	getConditionDescription,
 } from "@initiative/domain";
@@ -13,44 +14,57 @@ import {
 import { Tooltip } from "./ui/tooltip.js";
 
 interface ConditionTagsProps {
-	conditions: readonly ConditionId[] | undefined;
+	conditions: readonly ConditionEntry[] | undefined;
 	onRemove: (conditionId: ConditionId) => void;
+	onDecrement: (conditionId: ConditionId) => void;
 	onOpenPicker: () => void;
 }
 
 export function ConditionTags({
 	conditions,
 	onRemove,
+	onDecrement,
 	onOpenPicker,
 }: Readonly<ConditionTagsProps>) {
 	const { edition } = useRulesEditionContext();
 	return (
 		<div className="flex flex-wrap items-center gap-0.5">
-			{conditions?.map((condId) => {
+			{conditions?.map((entry) => {
-				const def = CONDITION_DEFINITIONS.find((d) => d.id === condId);
+				const def = CONDITION_DEFINITIONS.find((d) => d.id === entry.id);
 				if (!def) return null;
 				const Icon = CONDITION_ICON_MAP[def.iconName];
 				if (!Icon) return null;
 				const colorClass =
 					CONDITION_COLOR_CLASSES[def.color] ?? "text-muted-foreground";
+				const tooltipLabel =
+					entry.value === undefined ? def.label : `${def.label} ${entry.value}`;
 				return (
 					<Tooltip
-						key={condId}
+						key={entry.id}
-						content={`${def.label}:\n${getConditionDescription(def, edition)}`}
+						content={`${tooltipLabel}:\n${getConditionDescription(def, edition)}`}
 					>
 						<button
 							type="button"
 							aria-label={`Remove ${def.label}`}
 							className={cn(
-								"inline-flex items-center rounded p-0.5 transition-colors hover:bg-hover-neutral-bg",
+								"inline-flex items-center gap-0.5 rounded p-0.5 transition-colors hover:bg-hover-neutral-bg",
 								colorClass,
 							)}
 							onClick={(e) => {
 								e.stopPropagation();
-								onRemove(condId);
+								if (entry.value === undefined) {
+									onRemove(entry.id);
+								} else {
+									onDecrement(entry.id);
+								}
 							}}
 						>
 							<Icon size={14} />
+							{entry.value !== undefined && (
+								<span className="font-medium text-xs leading-none">
+									{entry.value}
+								</span>
+							)}
 						</button>
 					</Tooltip>
 				);

apps/web/src/components/cr-picker.tsx

@@ -0,0 +1,36 @@
+import { VALID_CR_VALUES } from "@initiative/domain";
+
+const CR_LABELS: Record<string, string> = {
+	"0": "CR 0",
+	"1/8": "CR 1/8",
+	"1/4": "CR 1/4",
+	"1/2": "CR 1/2",
+};
+
+function formatCr(cr: string): string {
+	return CR_LABELS[cr] ?? `CR ${cr}`;
+}
+
+export function CrPicker({
+	value,
+	onChange,
+}: {
+	value: string | null;
+	onChange: (cr: string | undefined) => void;
+}) {
+	return (
+		<select
+			className="rounded border border-border bg-card px-1.5 py-0.5 text-xs"
+			value={value ?? ""}
+			onChange={(e) => onChange(e.target.value || undefined)}
+			aria-label="Challenge rating"
+		>
+			<option value="">Assign</option>
+			{VALID_CR_VALUES.map((cr) => (
+				<option key={cr} value={cr}>
+					{formatCr(cr)}
+				</option>
+			))}
+		</select>
+	);
+}

apps/web/src/components/detail-popover.tsx

@@ -0,0 +1,141 @@
+import type { ReactNode } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useClickOutside } from "../hooks/use-click-outside.js";
+import { useSwipeToDismissDown } from "../hooks/use-swipe-to-dismiss.js";
+import { cn } from "../lib/utils.js";
+
+interface DetailPopoverProps {
+	readonly anchorRect: DOMRect;
+	readonly onClose: () => void;
+	readonly ariaLabel: string;
+	readonly children: ReactNode;
+}
+
+function DesktopPanel({
+	anchorRect,
+	onClose,
+	ariaLabel,
+	children,
+}: Readonly<DetailPopoverProps>) {
+	const ref = useRef<HTMLDivElement>(null);
+	const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const popover = el.getBoundingClientRect();
+		const vw = document.documentElement.clientWidth;
+		const vh = document.documentElement.clientHeight;
+		// Prefer placement to the LEFT of the anchor (panel is on the right edge)
+		let left = anchorRect.left - popover.width - 8;
+		if (left < 8) {
+			left = anchorRect.right + 8;
+		}
+		if (left + popover.width > vw - 8) {
+			left = vw - popover.width - 8;
+		}
+		let top = anchorRect.top;
+		if (top + popover.height > vh - 8) {
+			top = vh - popover.height - 8;
+		}
+		if (top < 8) top = 8;
+		setPos({ top, left });
+	}, [anchorRect]);
+
+	useClickOutside(ref, onClose);
+
+	return (
+		<div
+			ref={ref}
+			className="card-glow fixed z-50 max-h-[calc(100vh-16px)] w-80 max-w-[calc(100vw-16px)] overflow-y-auto rounded-lg border border-border bg-card p-4 shadow-lg"
+			style={pos ? { top: pos.top, left: pos.left } : { visibility: "hidden" }}
+			role="dialog"
+			aria-label={ariaLabel}
+		>
+			{children}
+		</div>
+	);
+}
+
+function MobileSheet({
+	onClose,
+	ariaLabel,
+	children,
+}: Readonly<Omit<DetailPopoverProps, "anchorRect">>) {
+	const { offsetY, isSwiping, handlers } = useSwipeToDismissDown(onClose);
+
+	useEffect(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [onClose]);
+
+	return (
+		<div className="fixed inset-0 z-50">
+			<button
+				type="button"
+				className="fade-in absolute inset-0 animate-in bg-black/50"
+				onClick={onClose}
+				aria-label="Close details"
+			/>
+			<div
+				className={cn(
+					"panel-glow absolute right-0 bottom-0 left-0 max-h-[80vh] rounded-t-2xl border-border border-t bg-card",
+					!isSwiping && "animate-slide-in-bottom",
+				)}
+				style={
+					isSwiping ? { transform: `translateY(${offsetY}px)` } : undefined
+				}
+				{...handlers}
+				role="dialog"
+				aria-label={ariaLabel}
+			>
+				<div className="flex justify-center pt-2 pb-1">
+					<div className="h-1 w-10 rounded-full bg-muted-foreground/40" />
+				</div>
+				<div className="max-h-[calc(80vh-24px)] overflow-y-auto p-4">
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function DetailPopover({
+	anchorRect,
+	onClose,
+	ariaLabel,
+	children,
+}: Readonly<DetailPopoverProps>) {
+	const [isDesktop, setIsDesktop] = useState(
+		() => globalThis.matchMedia("(min-width: 1024px)").matches,
+	);
+
+	useEffect(() => {
+		const mq = globalThis.matchMedia("(min-width: 1024px)");
+		const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	// Portal to document.body to escape any CSS transforms on ancestors
+	// (the side panel uses translate-x for collapse animation, which would
+	// otherwise become the containing block for fixed-positioned children).
+	const content = isDesktop ? (
+		<DesktopPanel
+			anchorRect={anchorRect}
+			onClose={onClose}
+			ariaLabel={ariaLabel}
+		>
+			{children}
+		</DesktopPanel>
+	) : (
+		<MobileSheet onClose={onClose} ariaLabel={ariaLabel}>
+			{children}
+		</MobileSheet>
+	);
+	return createPortal(content, document.body);
+}

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

@@ -0,0 +1,229 @@
+import type { DifficultyTier, RulesEdition } from "@initiative/domain";
+import { ArrowLeftRight } from "lucide-react";
+import { useRef } from "react";
+import { useEncounterContext } from "../contexts/encounter-context.js";
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
+import { useClickOutside } from "../hooks/use-click-outside.js";
+import {
+	type BreakdownCombatant,
+	useDifficultyBreakdown,
+} from "../hooks/use-difficulty-breakdown.js";
+import { CrPicker } from "./cr-picker.js";
+import { Button } from "./ui/button.js";
+
+const TIER_LABEL_MAP: Partial<
+	Record<RulesEdition, Record<DifficultyTier, { label: string; color: string }>>
+> = {
+	"5.5e": {
+		0: { label: "Trivial", color: "text-muted-foreground" },
+		1: { label: "Low", color: "text-green-500" },
+		2: { label: "Moderate", color: "text-yellow-500" },
+		3: { 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" },
+	},
+};
+
+/** Short labels for threshold display where horizontal space is limited. */
+const SHORT_LABELS: Readonly<Record<string, string>> = {
+	Moderate: "Mod",
+	Medium: "Med",
+};
+
+function shortLabel(label: string): string {
+	return SHORT_LABELS[label] ?? label;
+}
+
+function formatXp(xp: number): string {
+	return xp.toLocaleString();
+}
+
+function PcRow({ entry }: { entry: BreakdownCombatant }) {
+	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>
+			<span />
+			<span className="text-muted-foreground">
+				{entry.level === undefined ? "\u2014" : `Lv ${entry.level}`}
+			</span>
+			<span className="text-right tabular-nums">{"\u2014"}</span>
+		</div>
+	);
+}
+
+function NpcRow({
+	entry,
+	onToggleSide,
+}: {
+	entry: BreakdownCombatant;
+	onToggleSide: () => void;
+}) {
+	const { setCr } = useEncounterContext();
+	const isParty = entry.side === "party";
+	const targetSide = isParty ? "enemy" : "party";
+
+	let xpDisplay: string;
+	if (entry.xp == null) {
+		xpDisplay = "\u2014";
+	} else if (isParty && entry.cr) {
+		xpDisplay = `\u2212${formatXp(entry.xp)}`;
+	} else {
+		xpDisplay = formatXp(entry.xp);
+	}
+
+	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>
+				{entry.editable ? (
+					<CrPicker
+						value={entry.cr}
+						onChange={(cr) => setCr(entry.combatant.id, cr)}
+					/>
+				) : (
+					<span className="text-muted-foreground">
+						{entry.cr ? `CR ${entry.cr}` : "\u2014"}
+					</span>
+				)}
+			</span>
+			<span className="text-right tabular-nums">{xpDisplay}</span>
+		</div>
+	);
+}
+
+export function DifficultyBreakdownPanel({ onClose }: { onClose: () => void }) {
+	const ref = useRef<HTMLDivElement>(null);
+	useClickOutside(ref, onClose);
+	const { setSide } = useEncounterContext();
+	const { edition } = useRulesEditionContext();
+
+	const breakdown = useDifficultyBreakdown();
+	if (!breakdown) return null;
+
+	const tierLabels = TIER_LABEL_MAP[edition];
+	if (!tierLabels) return null;
+	const tierConfig = tierLabels[breakdown.tier];
+
+	const handleToggle = (entry: BreakdownCombatant) => {
+		const newSide = entry.side === "party" ? "enemy" : "party";
+		setSide(entry.combatant.id, newSide);
+	};
+
+	const isPC = (entry: BreakdownCombatant) =>
+		entry.combatant.playerCharacterId != null;
+
+	return (
+		<div
+			ref={ref}
+			className="absolute top-full right-0 z-50 mt-1 w-80 rounded-lg border border-border bg-card p-3 shadow-lg max-sm:fixed max-sm:top-12 max-sm:right-3 max-sm:left-3 max-sm:w-auto"
+		>
+			<div className="mb-2 font-medium text-sm">
+				Encounter Difficulty:{" "}
+				<span className={tierConfig.color}>{tierConfig.label}</span>
+			</div>
+
+			<div className="mb-2 border-border border-t pt-2">
+				<div className="mb-1 text-muted-foreground text-xs">
+					Party Budget ({breakdown.pcCount}{" "}
+					{breakdown.pcCount === 1 ? "PC" : "PCs"})
+				</div>
+				<div className="flex gap-3 text-xs">
+					{breakdown.thresholds.map((t) => (
+						<span key={t.label}>
+							{shortLabel(t.label)}: <strong>{formatXp(t.value)}</strong>
+						</span>
+					))}
+				</div>
+			</div>
+
+			<div className="border-border border-t pt-2 pb-2 text-muted-foreground text-xs italic">
+				Allied NPC XP is subtracted from encounter difficulty
+			</div>
+
+			<div className="border-border border-t pt-2">
+				<div className="mb-1 flex justify-between text-muted-foreground text-xs">
+					<span>Party</span>
+					<span>XP</span>
+				</div>
+				<div className="grid grid-cols-[1fr_auto_auto_3.5rem] gap-x-2 gap-y-1">
+					{breakdown.partyCombatants.map((entry) =>
+						isPC(entry) ? (
+							<PcRow key={entry.combatant.id} entry={entry} />
+						) : (
+							<NpcRow
+								key={entry.combatant.id}
+								entry={entry}
+								onToggleSide={() => handleToggle(entry)}
+							/>
+						),
+					)}
+				</div>
+			</div>
+
+			<div className="mt-2 border-border border-t pt-2">
+				<div className="mb-1 flex justify-between text-muted-foreground text-xs">
+					<span>Enemy</span>
+					<span>XP</span>
+				</div>
+				<div className="grid grid-cols-[1fr_auto_auto_3.5rem] gap-x-2 gap-y-1">
+					{breakdown.enemyCombatants.map((entry) =>
+						isPC(entry) ? (
+							<PcRow key={entry.combatant.id} entry={entry} />
+						) : (
+							<NpcRow
+								key={entry.combatant.id}
+								entry={entry}
+								onToggleSide={() => handleToggle(entry)}
+							/>
+						),
+					)}
+				</div>
+			</div>
+
+			{breakdown.encounterMultiplier !== undefined &&
+			breakdown.adjustedXp !== undefined ? (
+				<div className="mt-2 border-border border-t pt-2">
+					<div className="flex justify-between font-medium text-xs">
+						<span>Monster XP</span>
+						<span className="tabular-nums">
+							{formatXp(breakdown.totalMonsterXp)}{" "}
+							<span className="text-muted-foreground">
+								&times;{breakdown.encounterMultiplier}
+							</span>{" "}
+							= {formatXp(breakdown.adjustedXp)}
+						</span>
+					</div>
+					{breakdown.partySizeAdjusted === true ? (
+						<div className="mt-0.5 text-muted-foreground text-xs italic">
+							Adjusted for {breakdown.pcCount}{" "}
+							{breakdown.pcCount === 1 ? "PC" : "PCs"}
+						</div>
+					) : null}
+				</div>
+			) : (
+				<div className="mt-2 flex justify-between border-border border-t pt-2 font-medium text-xs">
+					<span>Net Monster XP</span>
+					<span className="tabular-nums">
+						{formatXp(breakdown.totalMonsterXp)}
+					</span>
+				</div>
+			)}
+		</div>
+	);
+}

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

@@ -1,28 +1,58 @@
 import type { DifficultyResult, DifficultyTier } from "@initiative/domain";
 import { cn } from "../lib/utils.js";
 
-const TIER_CONFIG: Record<
+export const TIER_LABELS_5_5E: Record<DifficultyTier, string> = {
+	0: "Trivial",
+	1: "Low",
+	2: "Moderate",
+	3: "High",
+};
+
+export const TIER_LABELS_2014: Record<DifficultyTier, string> = {
+	0: "Easy",
+	1: "Medium",
+	2: "Hard",
+	3: "Deadly",
+};
+
+const TIER_COLORS: Record<
 	DifficultyTier,
-	{ filledBars: number; color: string; label: string }
+	{ filledBars: number; color: string }
 > = {
-	trivial: { filledBars: 0, color: "", label: "Trivial" },
+	0: { filledBars: 0, color: "" },
-	low: { filledBars: 1, color: "bg-green-500", label: "Low" },
+	1: { filledBars: 1, color: "bg-green-500" },
-	moderate: { filledBars: 2, color: "bg-yellow-500", label: "Moderate" },
+	2: { filledBars: 2, color: "bg-yellow-500" },
-	high: { filledBars: 3, color: "bg-red-500", label: "High" },
+	3: { filledBars: 3, color: "bg-red-500" },
 };
 
 const BAR_HEIGHTS = ["h-2", "h-3", "h-4"] as const;
 
-export function DifficultyIndicator({ result }: { result: DifficultyResult }) {
+export function DifficultyIndicator({
-	const config = TIER_CONFIG[result.tier];
+	result,
-	const tooltip = `${config.label} encounter difficulty`;
+	labels,
+	onClick,
+}: {
+	result: DifficultyResult;
+	labels: Record<DifficultyTier, string>;
+	onClick?: () => void;
+}) {
+	const config = TIER_COLORS[result.tier];
+	const label = labels[result.tier];
+	const tooltip = `${label} encounter difficulty`;
+
+	const Element = onClick ? "button" : "div";
 
 	return (
-		<div
+		<Element
-			className="flex items-end gap-0.5"
+			className={cn(
+				"flex items-end gap-0.5",
+				onClick && "cursor-pointer rounded p-1 hover:bg-muted/50",
+			)}
 			title={tooltip}
 			role="img"
 			aria-label={tooltip}
+			onClick={onClick}
+			type={onClick ? "button" : undefined}
 		>
 			{BAR_HEIGHTS.map((height, i) => (
 				<div
@@ -34,6 +64,6 @@ export function DifficultyIndicator({ result }: { result: DifficultyResult }) {
 					)}
 				/>
 			))}
-		</div>
+		</Element>
 	);
 }

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

@@ -1,10 +1,16 @@
+import type { Creature } from "@initiative/domain";
 import {
-	type Creature,
 	calculateInitiative,
 	formatInitiativeModifier,
 } from "@initiative/domain";
+import {
+	PropertyLine,
+	SectionDivider,
+	TraitEntry,
+	TraitSection,
+} from "./stat-block-parts.js";
 
-interface StatBlockProps {
+interface DndStatBlockProps {
 	creature: Creature;
 }
 
@@ -13,53 +19,7 @@ function abilityMod(score: number): string {
 	return mod >= 0 ? `+${mod}` : `${mod}`;
 }
 
-function PropertyLine({
+export function DndStatBlock({ creature }: Readonly<DndStatBlockProps>) {
-	label,
-	value,
-}: Readonly<{
-	label: string;
-	value: string | undefined;
-}>) {
-	if (!value) return null;
-	return (
-		<div className="text-sm">
-			<span className="font-semibold">{label}</span> {value}
-		</div>
-	);
-}
-
-function SectionDivider() {
-	return (
-		<div className="my-2 h-px bg-gradient-to-r from-stat-divider-from via-stat-divider-via to-transparent" />
-	);
-}
-
-function TraitSection({
-	entries,
-	heading,
-}: Readonly<{
-	entries: readonly { name: string; text: string }[] | undefined;
-	heading?: string;
-}>) {
-	if (!entries || entries.length === 0) return null;
-	return (
-		<>
-			<SectionDivider />
-			{heading ? (
-				<h3 className="font-bold text-base text-stat-heading">{heading}</h3>
-			) : null}
-			<div className="space-y-2">
-				{entries.map((e) => (
-					<div key={e.name} className="text-sm">
-						<span className="font-semibold italic">{e.name}.</span> {e.text}
-					</div>
-				))}
-			</div>
-		</>
-	);
-}
-
-export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 	const abilities = [
 		{ label: "STR", score: creature.abilities.str },
 		{ label: "DEX", score: creature.abilities.dex },
@@ -174,7 +134,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 							{sc.atWill && sc.atWill.length > 0 && (
 								<div className="pl-2">
 									<span className="font-semibold">At Will:</span>{" "}
-									{sc.atWill.join(", ")}
+									{sc.atWill.map((s) => s.name).join(", ")}
 								</div>
 							)}
 							{sc.daily?.map((d) => (
@@ -183,7 +143,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 										{d.uses}/day
 										{d.each ? " each" : ""}:
 									</span>{" "}
-									{d.spells.join(", ")}
+									{d.spells.map((s) => s.name).join(", ")}
 								</div>
 							))}
 							{sc.restLong?.map((d) => (
@@ -195,7 +155,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 										{d.uses}/long rest
 										{d.each ? " each" : ""}:
 									</span>{" "}
-									{d.spells.join(", ")}
+									{d.spells.map((s) => s.name).join(", ")}
 								</div>
 							))}
 						</div>
@@ -219,9 +179,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 					</p>
 					<div className="space-y-2">
 						{creature.legendaryActions.entries.map((a) => (
-							<div key={a.name} className="text-sm">
+							<TraitEntry key={a.name} trait={a} />
-								<span className="font-semibold italic">{a.name}.</span> {a.text}
-							</div>
 						))}
 					</div>
 				</>

apps/web/src/components/equipment-detail-popover.tsx

@@ -0,0 +1,72 @@
+import type { EquipmentItem } from "@initiative/domain";
+import { DetailPopover } from "./detail-popover.js";
+import { RichDescription } from "./rich-description.js";
+
+interface EquipmentDetailPopoverProps {
+	readonly item: EquipmentItem;
+	readonly anchorRect: DOMRect;
+	readonly onClose: () => void;
+}
+
+function EquipmentDetailContent({ item }: Readonly<{ item: EquipmentItem }>) {
+	return (
+		<div className="space-y-2 text-sm">
+			<h3 className="font-bold text-lg text-stat-heading">{item.name}</h3>
+			{item.traits && item.traits.length > 0 && (
+				<div className="flex flex-wrap gap-1">
+					{item.traits.map((t) => (
+						<span
+							key={t}
+							className="rounded border border-border bg-card px-1.5 py-0.5 text-foreground text-xs"
+						>
+							{t}
+						</span>
+					))}
+				</div>
+			)}
+			<div className="space-y-0.5 text-xs">
+				<div>
+					<span className="font-semibold">Level</span> {item.level}
+				</div>
+				{item.category ? (
+					<div>
+						<span className="font-semibold">Category</span>{" "}
+						{item.category.charAt(0).toUpperCase() + item.category.slice(1)}
+					</div>
+				) : null}
+				{item.spellName ? (
+					<div>
+						<span className="font-semibold">Spell</span> {item.spellName}
+						{item.spellRank === undefined ? "" : ` (Rank ${item.spellRank})`}
+					</div>
+				) : null}
+			</div>
+			{item.description ? (
+				<RichDescription
+					text={item.description}
+					className="whitespace-pre-line text-foreground"
+				/>
+			) : (
+				<p className="text-muted-foreground italic">
+					No description available.
+				</p>
+			)}
+		</div>
+	);
+}
+
+export function EquipmentDetailPopover({
+	item,
+	anchorRect,
+	onClose,
+}: Readonly<EquipmentDetailPopoverProps>) {
+	return (
+		<DetailPopover
+			anchorRect={anchorRect}
+			onClose={onClose}
+			ariaLabel={`Equipment details: ${item.name}`}
+		>
+			<EquipmentDetailContent item={item} />
+		</DetailPopover>
+	);
+}

apps/web/src/components/persistent-damage-picker.tsx

@@ -0,0 +1,97 @@
+import {
+	PERSISTENT_DAMAGE_DEFINITIONS,
+	type PersistentDamageEntry,
+	type PersistentDamageType,
+} from "@initiative/domain";
+import { Check } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+interface PersistentDamagePickerProps {
+	activeEntries: readonly PersistentDamageEntry[] | undefined;
+	onAdd: (damageType: PersistentDamageType, formula: string) => void;
+	onClose: () => void;
+}
+
+export function PersistentDamagePicker({
+	activeEntries,
+	onAdd,
+	onClose,
+}: Readonly<PersistentDamagePickerProps>) {
+	const [selectedType, setSelectedType] = useState<PersistentDamageType>(
+		PERSISTENT_DAMAGE_DEFINITIONS[0].type,
+	);
+	const activeFormula =
+		activeEntries?.find((e) => e.type === selectedType)?.formula ?? "";
+	const [formula, setFormula] = useState(activeFormula);
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		inputRef.current?.focus();
+	}, []);
+
+	useEffect(() => {
+		const existing = activeEntries?.find(
+			(e) => e.type === selectedType,
+		)?.formula;
+		setFormula(existing ?? "");
+	}, [selectedType, activeEntries]);
+
+	const canSubmit = formula.trim().length > 0;
+
+	function handleSubmit() {
+		if (canSubmit) {
+			onAdd(selectedType, formula);
+			onClose();
+		}
+	}
+
+	function handleEscape(e: React.KeyboardEvent) {
+		if (e.key === "Escape") {
+			e.stopPropagation();
+			onClose();
+		}
+	}
+
+	return (
+		<div className="flex items-center gap-1.5 py-1 pr-2 pl-6">
+			<select
+				value={selectedType}
+				onChange={(e) =>
+					setSelectedType(e.target.value as PersistentDamageType)
+				}
+				onKeyDown={handleEscape}
+				className="h-7 rounded border border-border bg-background px-1 text-foreground text-xs"
+			>
+				{PERSISTENT_DAMAGE_DEFINITIONS.map((def) => (
+					<option key={def.type} value={def.type}>
+						{def.label}
+					</option>
+				))}
+			</select>
+			<input
+				ref={inputRef}
+				type="text"
+				value={formula}
+				placeholder="2d6"
+				className="h-7 w-16 rounded border border-border bg-background px-1.5 text-foreground text-xs"
+				onChange={(e) => setFormula(e.target.value)}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						handleSubmit();
+					}
+					handleEscape(e);
+				}}
+			/>
+			<button
+				type="button"
+				disabled={!canSubmit}
+				onClick={handleSubmit}
+				className="rounded p-0.5 text-foreground hover:bg-accent/40 disabled:cursor-not-allowed disabled:opacity-50"
+				aria-label="Add persistent damage"
+			>
+				<Check className="h-3.5 w-3.5" />
+			</button>
+		</div>
+	);
+}

apps/web/src/components/persistent-damage-tags.tsx

@@ -0,0 +1,63 @@
+import {
+	PERSISTENT_DAMAGE_DEFINITIONS,
+	type PersistentDamageEntry,
+	type PersistentDamageType,
+} from "@initiative/domain";
+import { cn } from "../lib/utils.js";
+import {
+	CONDITION_COLOR_CLASSES,
+	CONDITION_ICON_MAP,
+} from "./condition-styles.js";
+import { Tooltip } from "./ui/tooltip.js";
+
+interface PersistentDamageTagsProps {
+	entries: readonly PersistentDamageEntry[] | undefined;
+	onRemove: (damageType: PersistentDamageType) => void;
+}
+
+export function PersistentDamageTags({
+	entries,
+	onRemove,
+}: Readonly<PersistentDamageTagsProps>) {
+	if (!entries || entries.length === 0) return null;
+
+	return (
+		<>
+			{entries.map((entry) => {
+				const def = PERSISTENT_DAMAGE_DEFINITIONS.find(
+					(d) => d.type === entry.type,
+				);
+				if (!def) return null;
+				const Icon = CONDITION_ICON_MAP[def.iconName];
+				if (!Icon) return null;
+				const colorClass =
+					CONDITION_COLOR_CLASSES[def.color] ?? "text-muted-foreground";
+
+				return (
+					<Tooltip
+						key={entry.type}
+						content={`Persistent ${def.label} ${entry.formula}\nTake damage at end of turn. DC 15 flat check to end.`}
+					>
+						<button
+							type="button"
+							aria-label={`Remove persistent ${def.label} damage`}
+							className={cn(
+								"inline-flex items-center gap-0.5 rounded p-0.5 transition-colors hover:bg-hover-neutral-bg",
+								colorClass,
+							)}
+							onClick={(e) => {
+								e.stopPropagation();
+								onRemove(entry.type);
+							}}
+						>
+							<Icon size={14} />
+							<span className="font-medium text-xs leading-none">
+								{entry.formula}
+							</span>
+						</button>
+					</Tooltip>
+				);
+			})}
+		</>
+	);
+}

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

@@ -0,0 +1,391 @@
+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 {
+	PropertyLine,
+	SectionDivider,
+	TraitSection,
+} from "./stat-block-parts.js";
+
+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([
+	"lg",
+	"ng",
+	"cg",
+	"ln",
+	"n",
+	"cn",
+	"le",
+	"ne",
+	"ce",
+]);
+
+function capitalize(s: string): string {
+	return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+function displayTraits(traits: readonly string[]): string[] {
+	return traits.filter((t) => !ALIGNMENTS.has(t)).map(capitalize);
+}
+
+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;
+}
+
+function UsesPerDay({ count }: Readonly<{ count: number | undefined }>) {
+	if (count === undefined || count <= 1) return null;
+	return <span> (×{count})</span>;
+}
+
+function SpellLink({ spell, onOpen }: Readonly<SpellLinkProps>) {
+	const ref = useRef<HTMLButtonElement>(null);
+	const handleClick = useCallback(() => {
+		if (!spell.description) return;
+		const rect = ref.current?.getBoundingClientRect();
+		if (rect) onOpen(spell, rect);
+	}, [spell, onOpen]);
+
+	if (!spell.description) {
+		return (
+			<span>
+				{spell.name}
+				<UsesPerDay count={spell.usesPerDay} />
+			</span>
+		);
+	}
+
+	return (
+		<>
+			<button
+				ref={ref}
+				type="button"
+				onClick={handleClick}
+				className="cursor-pointer text-foreground underline decoration-dotted underline-offset-2 hover:text-hover-neutral"
+			>
+				{spell.name}
+			</button>
+			<UsesPerDay count={spell.usesPerDay} />
+		</>
+	);
+}
+
+interface SpellListLineProps {
+	readonly label: string;
+	readonly spells: readonly SpellReference[];
+	readonly onOpen: (spell: SpellReference, rect: DOMRect) => void;
+}
+
+function SpellListLine({
+	label,
+	spells,
+	onOpen,
+}: Readonly<SpellListLineProps>) {
+	return (
+		<div className="pl-2">
+			<span className="font-semibold">{label}:</span>{" "}
+			{spells.map((spell, i) => (
+				<span key={spell.slug ?? spell.name}>
+					{i > 0 ? ", " : ""}
+					<SpellLink spell={spell} onOpen={onOpen} />
+				</span>
+			))}
+		</div>
+	);
+}
+
+interface EquipmentLinkProps {
+	readonly item: EquipmentItem;
+	readonly onOpen: (item: EquipmentItem, rect: DOMRect) => void;
+}
+
+function EquipmentLink({ item, onOpen }: Readonly<EquipmentLinkProps>) {
+	const ref = useRef<HTMLButtonElement>(null);
+	const handleClick = useCallback(() => {
+		if (!item.description) return;
+		const rect = ref.current?.getBoundingClientRect();
+		if (rect) onOpen(item, rect);
+	}, [item, onOpen]);
+
+	if (!item.description) {
+		return <span>{item.name}</span>;
+	}
+
+	return (
+		<button
+			ref={ref}
+			type="button"
+			onClick={handleClick}
+			className="cursor-pointer text-foreground underline decoration-dotted underline-offset-2 hover:text-hover-neutral"
+		>
+			{item.name}
+		</button>
+	);
+}
+
+export function Pf2eStatBlock({
+	creature,
+	adjustment,
+	combatantId,
+	baseCreature,
+	onSetAdjustment,
+}: Readonly<Pf2eStatBlockProps>) {
+	const [openSpell, setOpenSpell] = useState<{
+		spell: SpellReference;
+		rect: DOMRect;
+	} | null>(null);
+	const handleOpenSpell = useCallback(
+		(spell: SpellReference, rect: DOMRect) => setOpenSpell({ spell, rect }),
+		[],
+	);
+	const handleCloseSpell = useCallback(() => setOpenSpell(null), []);
+	const [openEquipment, setOpenEquipment] = useState<{
+		item: EquipmentItem;
+		rect: DOMRect;
+	} | null>(null);
+	const handleOpenEquipment = useCallback(
+		(item: EquipmentItem, rect: DOMRect) => setOpenEquipment({ item, rect }),
+		[],
+	);
+	const handleCloseEquipment = useCallback(() => setOpenEquipment(null), []);
+
+	const rk = recallKnowledge(creature.level, creature.traits);
+	const adjColor = adjustmentColor(adjustment);
+
+	const abilityEntries = [
+		{ label: "Str", mod: creature.abilityMods.str },
+		{ label: "Dex", mod: creature.abilityMods.dex },
+		{ label: "Con", mod: creature.abilityMods.con },
+		{ label: "Int", mod: creature.abilityMods.int },
+		{ label: "Wis", mod: creature.abilityMods.wis },
+		{ label: "Cha", mod: creature.abilityMods.cha },
+	];
+
+	return (
+		<div className="space-y-1 text-foreground">
+			{/* Header */}
+			<div>
+				<div className="flex items-baseline justify-between gap-2">
+					<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={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
+							key={trait}
+							className="rounded border border-border bg-card px-1.5 py-0.5 text-foreground text-xs"
+						>
+							{trait}
+						</span>
+					))}
+				</div>
+				<p className="mt-1 text-muted-foreground text-xs">
+					{creature.sourceDisplayName}
+				</p>
+				{rk && (
+					<p className="mt-1 text-sm">
+						<span className="font-semibold">Recall Knowledge</span> DC {rk.dc}{" "}
+						&bull; {capitalize(rk.type)} ({rk.skills.join("/")})
+					</p>
+				)}
+			</div>
+
+			<SectionDivider />
+
+			{/* Perception, Languages, Skills */}
+			<div className="space-y-0.5 text-sm">
+				<div className={adjColor}>
+					<span className="font-semibold">Perception</span>{" "}
+					{formatInitiativeModifier(creature.perception)}
+					{creature.senses || creature.perceptionDetails
+						? `; ${[creature.senses, creature.perceptionDetails].filter(Boolean).join(", ")}`
+						: ""}
+				</div>
+				<PropertyLine label="Languages" value={creature.languages} />
+				<PropertyLine label="Skills" value={creature.skills} />
+			</div>
+
+			{/* Ability Modifiers */}
+			<div className="grid grid-cols-6 gap-1 text-center text-sm">
+				{abilityEntries.map((a) => (
+					<div key={a.label}>
+						<div className="font-semibold text-muted-foreground text-xs">
+							{a.label}
+						</div>
+						<div>{formatMod(a.mod)}</div>
+					</div>
+				))}
+			</div>
+
+			<PropertyLine label="Items" value={creature.items} />
+
+			{/* Top abilities (before defenses) */}
+			<TraitSection entries={creature.abilitiesTop} />
+
+			<SectionDivider />
+
+			{/* Defenses */}
+			<div className="space-y-0.5 text-sm">
+				<div className={adjColor}>
+					<span className="font-semibold">AC</span> {creature.ac}
+					{creature.acConditional ? ` (${creature.acConditional})` : ""};{" "}
+					<span className="font-semibold">Fort</span>{" "}
+					{formatMod(creature.saveFort)},{" "}
+					<span className="font-semibold">Ref</span>{" "}
+					{formatMod(creature.saveRef)},{" "}
+					<span className="font-semibold">Will</span>{" "}
+					{formatMod(creature.saveWill)}
+					{creature.saveConditional ? `; ${creature.saveConditional}` : ""}
+				</div>
+				<div className={adjColor}>
+					<span className="font-semibold">HP</span> {creature.hp}
+					{creature.hpDetails ? ` (${creature.hpDetails})` : ""}
+				</div>
+				<PropertyLine label="Immunities" value={creature.immunities} />
+				<PropertyLine label="Resistances" value={creature.resistances} />
+				<PropertyLine label="Weaknesses" value={creature.weaknesses} />
+			</div>
+
+			{/* Mid abilities (reactions, auras) */}
+			<TraitSection entries={creature.abilitiesMid} />
+
+			<SectionDivider />
+
+			{/* Speed */}
+			<div className="text-sm">
+				<span className="font-semibold">Speed</span> {creature.speed}
+			</div>
+
+			{/* Attacks */}
+			<TraitSection entries={creature.attacks} />
+
+			{/* Bottom abilities (active abilities) */}
+			<TraitSection entries={creature.abilitiesBot} />
+
+			{/* Spellcasting */}
+			{creature.spellcasting && creature.spellcasting.length > 0 && (
+				<>
+					<SectionDivider />
+					{creature.spellcasting.map((sc) => (
+						<div key={sc.name} className="space-y-1 text-sm">
+							<div>
+								<span className="font-semibold italic">{sc.name}.</span>{" "}
+								{sc.headerText}
+							</div>
+							{sc.daily?.map((d) => (
+								<SpellListLine
+									key={d.uses}
+									label={d.uses === 0 ? "Cantrips" : `Rank ${d.uses}`}
+									spells={d.spells}
+									onOpen={handleOpenSpell}
+								/>
+							))}
+							{sc.atWill && sc.atWill.length > 0 && (
+								<SpellListLine
+									label="Cantrips"
+									spells={sc.atWill}
+									onOpen={handleOpenSpell}
+								/>
+							)}
+						</div>
+					))}
+				</>
+			)}
+			{creature.equipment && creature.equipment.length > 0 && (
+				<>
+					<SectionDivider />
+					<h3 className="font-bold text-base text-stat-heading">Equipment</h3>
+					<div className="space-y-1 text-sm">
+						{creature.equipment.map((item) => (
+							<div key={item.name}>
+								<EquipmentLink item={item} onOpen={handleOpenEquipment} />
+							</div>
+						))}
+					</div>
+				</>
+			)}
+			{openSpell ? (
+				<SpellDetailPopover
+					spell={openSpell.spell}
+					anchorRect={openSpell.rect}
+					onClose={handleCloseSpell}
+				/>
+			) : null}
+			{openEquipment ? (
+				<EquipmentDetailPopover
+					item={openEquipment.item}
+					anchorRect={openEquipment.rect}
+					onClose={handleCloseEquipment}
+				/>
+			) : null}
+		</div>
+	);
+}

apps/web/src/components/rich-description.tsx

@@ -0,0 +1,20 @@
+import { cn } from "../lib/utils.js";
+
+/**
+ * Renders text containing safe HTML formatting tags (strong, em, ul, ol, li)
+ * preserved by the stripFoundryTags pipeline. All other HTML is already
+ * stripped before reaching this component.
+ */
+export function RichDescription({
+	text,
+	className,
+}: Readonly<{ text: string; className?: string }>) {
+	const props = {
+		className: cn(
+			"[&_ol]:list-decimal [&_ol]:pl-4 [&_ul]:list-disc [&_ul]:pl-4",
+			className,
+		),
+		dangerouslySetInnerHTML: { __html: text },
+	};
+	return <div {...props} />;
+}

apps/web/src/components/settings-modal.tsx

@@ -13,6 +13,7 @@ interface SettingsModalProps {
 const EDITION_OPTIONS: { value: RulesEdition; label: string }[] = [
 	{ value: "5e", label: "5e (2014)" },
 	{ value: "5.5e", label: "5.5e (2024)" },
+	{ value: "pf2e", label: "Pathfinder 2e" },
 ];
 
 const THEME_OPTIONS: {
@@ -36,7 +37,7 @@ export function SettingsModal({ open, onClose }: Readonly<SettingsModalProps>) {
 			<div className="flex flex-col gap-5">
 				<div>
 					<span className="mb-2 block font-medium text-muted-foreground text-sm">
-						Conditions
+						Game System
 					</span>
 					<div className="flex gap-1">
 						{EDITION_OPTIONS.map((opt) => (

apps/web/src/components/source-fetch-prompt.tsx

@@ -1,25 +1,28 @@
 import { Download, Loader2, Upload } from "lucide-react";
 import { useId, useRef, useState } from "react";
-import {
+import { useAdapters } from "../contexts/adapter-context.js";
-	getDefaultFetchUrl,
-	getSourceDisplayName,
-} from "../adapters/bestiary-index-adapter.js";
 import { useBestiaryContext } from "../contexts/bestiary-context.js";
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 import { Button } from "./ui/button.js";
 import { Input } from "./ui/input.js";
 
 interface SourceFetchPromptProps {
 	sourceCode: string;
-	onSourceLoaded: () => void;
+	onSourceLoaded: (skippedNames: string[]) => void;
 }
 
 export function SourceFetchPrompt({
 	sourceCode,
 	onSourceLoaded,
 }: Readonly<SourceFetchPromptProps>) {
+	const { bestiaryIndex, pf2eBestiaryIndex } = useAdapters();
 	const { fetchAndCacheSource, uploadAndCacheSource } = useBestiaryContext();
-	const sourceDisplayName = getSourceDisplayName(sourceCode);
+	const { edition } = useRulesEditionContext();
-	const [url, setUrl] = useState(() => getDefaultFetchUrl(sourceCode));
+	const indexPort = edition === "pf2e" ? pf2eBestiaryIndex : bestiaryIndex;
+	const sourceDisplayName = indexPort.getSourceDisplayName(sourceCode);
+	const [url, setUrl] = useState(() =>
+		indexPort.getDefaultFetchUrl(sourceCode),
+	);
 	const [status, setStatus] = useState<"idle" | "fetching" | "error">("idle");
 	const [error, setError] = useState<string>("");
 	const fileInputRef = useRef<HTMLInputElement>(null);
@@ -29,8 +32,9 @@ export function SourceFetchPrompt({
 		setStatus("fetching");
 		setError("");
 		try {
-			await fetchAndCacheSource(sourceCode, url);
+			const { skippedNames } = await fetchAndCacheSource(sourceCode, url);
-			onSourceLoaded();
+			setStatus("idle");
+			onSourceLoaded(skippedNames);
 		} catch (e) {
 			setStatus("error");
 			setError(e instanceof Error ? e.message : "Failed to fetch source data");
@@ -48,7 +52,7 @@ export function SourceFetchPrompt({
 			const text = await file.text();
 			const json = JSON.parse(text);
 			await uploadAndCacheSource(sourceCode, json);
-			onSourceLoaded();
+			onSourceLoaded([]);
 		} catch (err) {
 			setStatus("error");
 			setError(

apps/web/src/components/source-manager.tsx

@@ -6,14 +6,18 @@ import {
 	useOptimistic,
 	useState,
 } from "react";
-import type { CachedSourceInfo } from "../adapters/bestiary-cache.js";
+import type { CachedSourceInfo } from "../adapters/ports.js";
-import * as bestiaryCache from "../adapters/bestiary-cache.js";
+import { useAdapters } from "../contexts/adapter-context.js";
 import { useBestiaryContext } from "../contexts/bestiary-context.js";
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 import { Button } from "./ui/button.js";
 import { Input } from "./ui/input.js";
 
 export function SourceManager() {
+	const { bestiaryCache } = useAdapters();
 	const { refreshCache } = useBestiaryContext();
+	const { edition } = useRulesEditionContext();
+	const system = edition === "pf2e" ? "pf2e" : "dnd";
 	const [sources, setSources] = useState<CachedSourceInfo[]>([]);
 	const [filter, setFilter] = useState("");
 	const [optimisticSources, applyOptimistic] = useOptimistic(
@@ -28,9 +32,9 @@ export function SourceManager() {
 	);
 
 	const loadSources = useCallback(async () => {
-		const cached = await bestiaryCache.getCachedSources();
+		const cached = await bestiaryCache.getCachedSources(system);
 		setSources(cached);
-	}, []);
+	}, [bestiaryCache, system]);
 
 	useEffect(() => {
 		void loadSources();
@@ -38,7 +42,7 @@ export function SourceManager() {
 
 	const handleClearSource = async (sourceCode: string) => {
 		applyOptimistic({ type: "remove", sourceCode });
-		await bestiaryCache.clearSource(sourceCode);
+		await bestiaryCache.clearSource(system, sourceCode);
 		await loadSources();
 		void refreshCache();
 	};

apps/web/src/components/spell-detail-popover.tsx

@@ -0,0 +1,178 @@
+import type { ActivityCost, SpellReference } from "@initiative/domain";
+import { DetailPopover } from "./detail-popover.js";
+import { RichDescription } from "./rich-description.js";
+import { ActivityIcon } from "./stat-block-parts.js";
+
+interface SpellDetailPopoverProps {
+	readonly spell: SpellReference;
+	readonly anchorRect: DOMRect;
+	readonly onClose: () => void;
+}
+
+const RANK_LABELS = [
+	"Cantrip",
+	"1st",
+	"2nd",
+	"3rd",
+	"4th",
+	"5th",
+	"6th",
+	"7th",
+	"8th",
+	"9th",
+	"10th",
+];
+
+function formatRank(rank: number | undefined): string {
+	if (rank === undefined) return "";
+	return RANK_LABELS[rank] ?? `Rank ${rank}`;
+}
+
+function parseActionCost(cost: string): ActivityCost | null {
+	if (cost === "free") return { number: 1, unit: "free" };
+	if (cost === "reaction") return { number: 1, unit: "reaction" };
+	const n = Number(cost);
+	if (n >= 1 && n <= 3) return { number: n, unit: "action" };
+	return null;
+}
+
+function SpellActionCost({ cost }: Readonly<{ cost: string | undefined }>) {
+	if (!cost) return null;
+	const activity = parseActionCost(cost);
+	if (activity) {
+		return (
+			<span className="shrink-0 text-lg">
+				<ActivityIcon activity={activity} />
+			</span>
+		);
+	}
+	return <span className="shrink-0 text-muted-foreground text-xs">{cost}</span>;
+}
+
+function SpellHeader({ spell }: Readonly<{ spell: SpellReference }>) {
+	return (
+		<div className="flex items-center justify-between gap-2">
+			<h3 className="font-bold text-lg text-stat-heading">{spell.name}</h3>
+			<SpellActionCost cost={spell.actionCost} />
+		</div>
+	);
+}
+
+function SpellTraits({ traits }: Readonly<{ traits: readonly string[] }>) {
+	if (traits.length === 0) return null;
+	return (
+		<div className="flex flex-wrap gap-1">
+			{traits.map((t) => (
+				<span
+					key={t}
+					className="rounded border border-border bg-card px-1.5 py-0.5 text-foreground text-xs"
+				>
+					{t}
+				</span>
+			))}
+		</div>
+	);
+}
+
+function LabeledValue({
+	label,
+	value,
+}: Readonly<{ label: string; value: string }>) {
+	return (
+		<>
+			<span className="font-semibold">{label}</span> {value}
+		</>
+	);
+}
+
+function SpellRangeLine({ spell }: Readonly<{ spell: SpellReference }>) {
+	const items: { label: string; value: string }[] = [];
+	if (spell.range) items.push({ label: "Range", value: spell.range });
+	if (spell.target) items.push({ label: "Target", value: spell.target });
+	if (spell.area) items.push({ label: "Area", value: spell.area });
+
+	if (items.length === 0) return null;
+	return (
+		<div>
+			{items.map((item, i) => (
+				<span key={item.label}>
+					{i > 0 ? "; " : ""}
+					<LabeledValue label={item.label} value={item.value} />
+				</span>
+			))}
+		</div>
+	);
+}
+
+function SpellMeta({ spell }: Readonly<{ spell: SpellReference }>) {
+	const hasTraditions =
+		spell.traditions !== undefined && spell.traditions.length > 0;
+	return (
+		<div className="space-y-0.5 text-xs">
+			{spell.rank === undefined ? null : (
+				<div>
+					<span className="font-semibold">{formatRank(spell.rank)}</span>
+					{hasTraditions ? (
+						<span className="text-muted-foreground">
+							{" "}
+							({spell.traditions?.join(", ")})
+						</span>
+					) : null}
+				</div>
+			)}
+			<SpellRangeLine spell={spell} />
+			{spell.duration ? (
+				<div>
+					<LabeledValue label="Duration" value={spell.duration} />
+				</div>
+			) : null}
+			{spell.defense ? (
+				<div>
+					<LabeledValue label="Defense" value={spell.defense} />
+				</div>
+			) : null}
+		</div>
+	);
+}
+
+function SpellDetailContent({ spell }: Readonly<{ spell: SpellReference }>) {
+	return (
+		<div className="space-y-2 text-sm">
+			<SpellHeader spell={spell} />
+			<SpellTraits traits={spell.traits ?? []} />
+			<SpellMeta spell={spell} />
+			{spell.description ? (
+				<RichDescription
+					text={spell.description}
+					className="whitespace-pre-line text-foreground"
+				/>
+			) : (
+				<p className="text-muted-foreground italic">
+					No description available.
+				</p>
+			)}
+			{spell.heightening ? (
+				<RichDescription
+					text={spell.heightening}
+					className="whitespace-pre-line text-foreground text-xs"
+				/>
+			) : null}
+		</div>
+	);
+}
+
+export function SpellDetailPopover({
+	spell,
+	anchorRect,
+	onClose,
+}: Readonly<SpellDetailPopoverProps>) {
+	return (
+		<DetailPopover
+			anchorRect={anchorRect}
+			onClose={onClose}
+			ariaLabel={`Spell details: ${spell.name}`}
+		>
+			<SpellDetailContent spell={spell} />
+		</DetailPopover>
+	);
+}

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

@@ -1,15 +1,26 @@
-import type { 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";
 import { BulkImportPrompt } from "./bulk-import-prompt.js";
+import { DndStatBlock } from "./dnd-stat-block.js";
+import { Pf2eStatBlock } from "./pf2e-stat-block.js";
 import { SourceFetchPrompt } from "./source-fetch-prompt.js";
 import { SourceManager } from "./source-manager.js";
-import { StatBlock } from "./stat-block.js";
+import { Toast } from "./toast.js";
 import { Button } from "./ui/button.js";
 
 interface StatBlockPanelProps {
@@ -20,7 +31,10 @@ interface StatBlockPanelProps {
 function extractSourceCode(cId: CreatureId): string {
 	const colonIndex = cId.indexOf(":");
 	if (colonIndex === -1) return "";
-	return cId.slice(0, colonIndex).toUpperCase();
+	const prefix = cId.slice(0, colonIndex);
+	// D&D source codes are short uppercase (e.g. "mm" from "MM").
+	// PF2e source codes use hyphens (e.g. "pathfinder-monster-core").
+	return prefix.includes("-") ? prefix : prefix.toUpperCase();
 }
 
 function CollapsedTab({
@@ -211,6 +225,7 @@ function MobileDrawer({
 function usePanelRole(panelRole: "browse" | "pinned") {
 	const sidePanel = useSidePanelContext();
 	const { getCreature } = useBestiaryContext();
+	const { encounter, setCreatureAdjustment } = useEncounterContext();
 
 	const creatureId =
 		panelRole === "browse"
@@ -218,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 : () => {},
@@ -233,14 +256,42 @@ 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,
 }: Readonly<StatBlockPanelProps>) {
-	const { isSourceCached } = useBestiaryContext();
 	const {
 		creatureId,
 		creature,
+		combatant,
+		setCreatureAdjustment,
 		isCollapsed,
 		onToggleCollapse,
 		onDismiss,
@@ -256,6 +307,7 @@ export function StatBlockPanel({
 	);
 	const [needsFetch, setNeedsFetch] = useState(false);
 	const [checkingCache, setCheckingCache] = useState(false);
+	const [skippedToast, setSkippedToast] = useState<string | null>(null);
 
 	useEffect(() => {
 		const mq = globalThis.matchMedia("(min-width: 1024px)");
@@ -276,19 +328,23 @@ export function StatBlockPanel({
 			return;
 		}
 
-		setCheckingCache(true);
+		// Show fetch prompt both when source is uncached AND when the source is
-		void isSourceCached(sourceCode).then((cached) => {
+		// cached but this specific creature is missing (e.g. skipped by ad blocker).
-			setNeedsFetch(!cached);
+		setNeedsFetch(true);
-			setCheckingCache(false);
+		setCheckingCache(false);
-		});
+	}, [creatureId, creature]);
-	}, [creatureId, creature, isSourceCached]);
 
 	if (!creatureId && !bulkImportMode && !sourceManagerMode) return null;
 
 	const sourceCode = creatureId ? extractSourceCode(creatureId) : "";
 
-	const handleSourceLoaded = () => {
+	const handleSourceLoaded = (skippedNames: string[]) => {
-		setNeedsFetch(false);
+		if (skippedNames.length > 0) {
+			const names = skippedNames.join(", ");
+			setSkippedToast(
+				`${skippedNames.length} creature(s) skipped (ad blocker?): ${names}`,
+			);
+		}
 	};
 
 	const renderContent = () => {
@@ -307,7 +363,7 @@ export function StatBlockPanel({
 		}
 
 		if (creature) {
-			return <StatBlock creature={creature} />;
+			return renderStatBlock(creature, combatant, setCreatureAdjustment);
 		}
 
 		if (needsFetch && sourceCode) {
@@ -331,24 +387,36 @@ export function StatBlockPanel({
 	else if (bulkImportMode) fallbackName = "Import All Sources";
 	const creatureName = creature?.name ?? fallbackName;
 
+	const toast = skippedToast ? (
+		<Toast message={skippedToast} onDismiss={() => setSkippedToast(null)} />
+	) : null;
+
 	if (isDesktop) {
 		return (
-			<DesktopPanel
+			<>
-				isCollapsed={isCollapsed}
+				<DesktopPanel
-				side={side}
+					isCollapsed={isCollapsed}
-				creatureName={creatureName}
+					side={side}
-				panelRole={panelRole}
+					creatureName={creatureName}
-				showPinButton={showPinButton}
+					panelRole={panelRole}
-				onToggleCollapse={onToggleCollapse}
+					showPinButton={showPinButton}
-				onPin={onPin}
+					onToggleCollapse={onToggleCollapse}
-				onUnpin={onUnpin}
+					onPin={onPin}
-			>
+					onUnpin={onUnpin}
-				{renderContent()}
+				>
-			</DesktopPanel>
+					{renderContent()}
+				</DesktopPanel>
+				{toast}
+			</>
 		);
 	}
 
 	if (panelRole === "pinned" || isCollapsed) return null;
 
-	return <MobileDrawer onDismiss={onDismiss}>{renderContent()}</MobileDrawer>;
+	return (
+		<>
+			<MobileDrawer onDismiss={onDismiss}>{renderContent()}</MobileDrawer>
+			{toast}
+		</>
+	);
 }

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

@@ -0,0 +1,183 @@
+import type {
+	ActivityCost,
+	TraitBlock,
+	TraitSegment,
+} from "@initiative/domain";
+import { RichDescription } from "./rich-description.js";
+
+export function PropertyLine({
+	label,
+	value,
+}: Readonly<{
+	label: string;
+	value: string | undefined;
+}>) {
+	if (!value) return null;
+	return (
+		<div className="text-sm">
+			<span className="font-semibold">{label}</span> {value}
+		</div>
+	);
+}
+
+export function SectionDivider() {
+	return (
+		<div className="my-2 h-px bg-gradient-to-r from-stat-divider-from via-stat-divider-via to-transparent" />
+	);
+}
+
+function segmentKey(seg: TraitSegment): string {
+	return seg.type === "text"
+		? seg.value.slice(0, 40)
+		: seg.items.map((i) => i.label ?? i.text.slice(0, 20)).join(",");
+}
+
+function TraitSegments({
+	segments,
+}: Readonly<{ segments: readonly TraitSegment[] }>) {
+	return (
+		<>
+			{segments.map((seg, i) => {
+				if (seg.type === "text") {
+					return (
+						<RichDescription
+							key={segmentKey(seg)}
+							text={i === 0 ? ` ${seg.value}` : seg.value}
+							className="inline whitespace-pre-line"
+						/>
+					);
+				}
+				return (
+					<div key={segmentKey(seg)} className="mt-1 space-y-0.5">
+						{seg.items.map((item) => (
+							<div key={item.label ?? item.text}>
+								{item.label != null && (
+									<span className="font-semibold">{item.label}. </span>
+								)}
+								<RichDescription text={item.text} className="inline" />
+							</div>
+						))}
+					</div>
+				);
+			})}
+		</>
+	);
+}
+
+const ACTION_DIAMOND = "M50 2 L96 50 L50 98 L4 50 Z M48 27 L71 50 L48 73 Z";
+const ACTION_DIAMOND_SOLID = "M50 2 L96 50 L50 98 L4 50 Z";
+const ACTION_DIAMOND_OUTLINE =
+	"M90 2 L136 50 L90 98 L44 50 Z M90 29 L111 50 L90 71 L69 50 Z";
+const FREE_ACTION_DIAMOND =
+	"M50 2 L96 50 L50 98 L4 50 Z M50 12 L12 50 L50 88 L88 50 Z";
+const FREE_ACTION_CHEVRON = "M48 27 L71 50 L48 73 Z";
+const REACTION_ARROW =
+	"M75 15 A42 42 0 1 0 85 55 L72 55 A30 30 0 1 1 65 25 L65 40 L92 20 L65 0 L65 15 Z";
+
+export function ActivityIcon({
+	activity,
+}: Readonly<{ activity: ActivityCost }>) {
+	const cls = "inline-block h-[1em] align-[-0.1em]";
+	if (activity.unit === "free") {
+		return (
+			<svg aria-hidden="true" className={cls} viewBox="0 0 100 100">
+				<path d={FREE_ACTION_DIAMOND} fill="currentColor" fillRule="evenodd" />
+				<path d={FREE_ACTION_CHEVRON} fill="currentColor" />
+			</svg>
+		);
+	}
+	if (activity.unit === "reaction") {
+		return (
+			<svg aria-hidden="true" className={cls} viewBox="0 0 100 100">
+				<g transform="translate(100,100) rotate(180)">
+					<path d={REACTION_ARROW} fill="currentColor" />
+				</g>
+			</svg>
+		);
+	}
+	const count = activity.number;
+	if (count === 1) {
+		return (
+			<svg aria-hidden="true" className={cls} viewBox="0 0 100 100">
+				<path d={ACTION_DIAMOND} fill="currentColor" fillRule="evenodd" />
+			</svg>
+		);
+	}
+	if (count === 2) {
+		return (
+			<svg aria-hidden="true" className={cls} viewBox="0 0 140 100">
+				<path d={ACTION_DIAMOND_SOLID} fill="currentColor" />
+				<path
+					d={ACTION_DIAMOND_OUTLINE}
+					fill="currentColor"
+					fillRule="evenodd"
+				/>
+			</svg>
+		);
+	}
+	return (
+		<svg aria-hidden="true" className={cls} viewBox="0 0 180 100">
+			<path d={ACTION_DIAMOND_SOLID} fill="currentColor" />
+			<path d="M90 2 L136 50 L90 98 L44 50 Z" fill="currentColor" />
+			<path
+				d="M130 2 L176 50 L130 98 L84 50 Z M130 29 L151 50 L130 71 L109 50 Z"
+				fill="currentColor"
+				fillRule="evenodd"
+			/>
+		</svg>
+	);
+}
+
+export function TraitEntry({ trait }: Readonly<{ trait: TraitBlock }>) {
+	return (
+		<div className="text-sm">
+			<span className="font-semibold italic">
+				{trait.name}
+				{trait.activity ? null : "."}
+				{trait.activity ? (
+					<>
+						{" "}
+						<ActivityIcon activity={trait.activity} />
+					</>
+				) : null}
+			</span>
+			{trait.frequency ? ` (${trait.frequency})` : null}
+			{trait.trigger ? (
+				<>
+					{" "}
+					<span className="font-semibold">Trigger</span> {trait.trigger}
+					{trait.segments.length > 0 ? (
+						<>
+							{" "}
+							<span className="font-semibold">Effect</span>
+						</>
+					) : null}
+				</>
+			) : null}
+			<TraitSegments segments={trait.segments} />
+		</div>
+	);
+}
+
+export function TraitSection({
+	entries,
+	heading,
+}: Readonly<{
+	entries: readonly TraitBlock[] | undefined;
+	heading?: string;
+}>) {
+	if (!entries || entries.length === 0) return null;
+	return (
+		<>
+			<SectionDivider />
+			{heading ? (
+				<h3 className="font-bold text-base text-stat-heading">{heading}</h3>
+			) : null}
+			<div className="space-y-2">
+				{entries.map((e) => (
+					<TraitEntry key={e.name} trait={e} />
+				))}
+			</div>
+		</>
+	);
+}

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

@@ -1,7 +1,14 @@
 import { Redo2, StepBack, StepForward, Trash2, Undo2 } from "lucide-react";
+import { useState } from "react";
 import { useEncounterContext } from "../contexts/encounter-context.js";
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 import { useDifficulty } from "../hooks/use-difficulty.js";
-import { DifficultyIndicator } from "./difficulty-indicator.js";
+import { DifficultyBreakdownPanel } from "./difficulty-breakdown-panel.js";
+import {
+	DifficultyIndicator,
+	TIER_LABELS_5_5E,
+	TIER_LABELS_2014,
+} from "./difficulty-indicator.js";
 import { Button } from "./ui/button.js";
 import { ConfirmButton } from "./ui/confirm-button.js";
 
@@ -18,24 +25,27 @@ export function TurnNavigation() {
 	} = useEncounterContext();
 
 	const difficulty = useDifficulty();
+	const { edition } = useRulesEditionContext();
+	const tierLabels = edition === "5e" ? TIER_LABELS_2014 : TIER_LABELS_5_5E;
+	const [showBreakdown, setShowBreakdown] = useState(false);
 	const hasCombatants = encounter.combatants.length > 0;
 	const isAtStart = encounter.roundNumber === 1 && encounter.activeIndex === 0;
 	const activeCombatant = encounter.combatants[encounter.activeIndex];
 
 	return (
-		<div className="card-glow flex items-center gap-3 border-border border-b bg-card px-4 py-3 sm:rounded-lg sm:border">
+		<div className="card-glow grid grid-cols-[1fr_minmax(0,auto)_1fr] items-center border-border border-b bg-card px-2 py-3 sm:rounded-lg sm:border sm:px-4">
-			<Button
+			{/* Left zone: navigation + history + round */}
-				variant="ghost"
-				size="icon"
-				onClick={retreatTurn}
-				disabled={!hasCombatants || isAtStart}
-				title="Previous turn"
-				aria-label="Previous turn"
-			>
-				<StepBack className="h-5 w-5" />
-			</Button>
-
 			<div className="flex items-center gap-1">
+				<Button
+					variant="ghost"
+					size="icon"
+					onClick={retreatTurn}
+					disabled={!hasCombatants || isAtStart}
+					title="Previous turn"
+					aria-label="Previous turn"
+				>
+					<StepBack className="h-5 w-5" />
+				</Button>
 				<Button
 					variant="ghost"
 					size="icon"
@@ -56,23 +66,36 @@ export function TurnNavigation() {
 				>
 					<Redo2 className="h-4 w-4" />
 				</Button>
+				<span className="ml-1 rounded-md bg-muted px-2 py-0.5 font-semibold text-foreground text-sm tabular-nums">
+					R{encounter.roundNumber}
+				</span>
 			</div>
 
-			<div className="flex min-w-0 flex-1 items-center justify-center gap-2 text-sm">
+			{/* Center zone: active combatant name */}
-				<span className="shrink-0 rounded-md bg-muted px-2 py-0.5 font-semibold text-foreground text-sm">
+			<div className="min-w-0 px-2 text-center text-sm">
-					<span className="-mt-[3px] inline-block">
-						R{encounter.roundNumber}
-					</span>
-				</span>
 				{activeCombatant ? (
 					<span className="truncate font-medium">{activeCombatant.name}</span>
 				) : (
 					<span className="text-muted-foreground">No combatants</span>
 				)}
-				{difficulty && <DifficultyIndicator result={difficulty} />}
 			</div>
 
-			<div className="flex flex-shrink-0 items-center gap-3">
+			{/* Right zone: difficulty + destructive + forward */}
+			<div className="flex items-center justify-end gap-1">
+				{difficulty && (
+					<div className="relative mr-1">
+						<DifficultyIndicator
+							result={difficulty}
+							labels={tierLabels}
+							onClick={() => setShowBreakdown((prev) => !prev)}
+						/>
+						{showBreakdown ? (
+							<DifficultyBreakdownPanel
+								onClose={() => setShowBreakdown(false)}
+							/>
+						) : null}
+					</div>
+				)}
 				<ConfirmButton
 					icon={<Trash2 className="h-5 w-5" />}
 					label="Clear encounter"

apps/web/src/contexts/adapter-context.tsx

@@ -0,0 +1,40 @@
+import { createContext, type ReactNode, useContext } from "react";
+import type {
+	BestiaryCachePort,
+	BestiaryIndexPort,
+	EncounterPersistence,
+	Pf2eBestiaryIndexPort,
+	PlayerCharacterPersistence,
+	UndoRedoPersistence,
+} from "../adapters/ports.js";
+
+export interface Adapters {
+	encounterPersistence: EncounterPersistence;
+	undoRedoPersistence: UndoRedoPersistence;
+	playerCharacterPersistence: PlayerCharacterPersistence;
+	bestiaryCache: BestiaryCachePort;
+	bestiaryIndex: BestiaryIndexPort;
+	pf2eBestiaryIndex: Pf2eBestiaryIndexPort;
+}
+
+const AdapterContext = createContext<Adapters | null>(null);
+
+export function AdapterProvider({
+	adapters,
+	children,
+}: {
+	adapters: Adapters;
+	children: ReactNode;
+}) {
+	return (
+		<AdapterContext.Provider value={adapters}>
+			{children}
+		</AdapterContext.Provider>
+	);
+}
+
+export function useAdapters(): Adapters {
+	const ctx = useContext(AdapterContext);
+	if (!ctx) throw new Error("useAdapters requires AdapterProvider");
+	return ctx;
+}

apps/web/src/hooks/__tests__/encounter-reducer.test.ts

@@ -1,8 +1,4 @@
-import type {
+import type { ConditionId, PlayerCharacter } from "@initiative/domain";
-	BestiaryIndexEntry,
-	ConditionId,
-	PlayerCharacter,
-} from "@initiative/domain";
 import {
 	combatantId,
 	createEncounter,
@@ -10,19 +6,10 @@ import {
 	isDomainError,
 	playerCharacterId,
 } from "@initiative/domain";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
+import type { SearchResult } from "../use-bestiary.js";
 import { type EncounterState, encounterReducer } from "../use-encounter.js";
 
-vi.mock("../../persistence/encounter-storage.js", () => ({
-	loadEncounter: vi.fn().mockReturnValue(null),
-	saveEncounter: vi.fn(),
-}));
-
-vi.mock("../../persistence/undo-redo-storage.js", () => ({
-	loadUndoRedoStacks: vi.fn().mockReturnValue(EMPTY_UNDO_REDO_STATE),
-	saveUndoRedoStacks: vi.fn(),
-}));
-
 function emptyState(): EncounterState {
 	return {
 		encounter: {
@@ -55,9 +42,11 @@ function stateWithHp(name: string, maxHp: number): EncounterState {
 	});
 }
 
-const BESTIARY_ENTRY: BestiaryIndexEntry = {
+const BESTIARY_ENTRY: SearchResult = {
+	system: "dnd",
 	name: "Goblin",
 	source: "MM",
+	sourceDisplayName: "Monster Manual",
 	ac: 15,
 	hp: 7,
 	dex: 14,
@@ -67,6 +56,19 @@ const BESTIARY_ENTRY: BestiaryIndexEntry = {
 	type: "humanoid",
 };
 
+const PF2E_BESTIARY_ENTRY: SearchResult = {
+	system: "pf2e",
+	name: "Goblin Warrior",
+	source: "B1",
+	sourceDisplayName: "Bestiary",
+	level: -1,
+	ac: 16,
+	hp: 6,
+	perception: 5,
+	size: "small",
+	type: "humanoid",
+};
+
 describe("encounterReducer", () => {
 	describe("add-combatant", () => {
 		it("adds a combatant and pushes undo", () => {
@@ -246,7 +248,9 @@ describe("encounterReducer", () => {
 				conditionId: "blinded" as ConditionId,
 			});
 
-			expect(next.encounter.combatants[0].conditions).toContain("blinded");
+			expect(next.encounter.combatants[0].conditions).toContainEqual({
+				id: "blinded",
+			});
 		});
 
 		it("toggles concentration", () => {
@@ -337,6 +341,19 @@ describe("encounterReducer", () => {
 			expect(names).toContain("Goblin 1");
 			expect(names).toContain("Goblin 2");
 		});
+
+		it("adds PF2e creature with HP, AC, and creatureId", () => {
+			const next = encounterReducer(emptyState(), {
+				type: "add-from-bestiary",
+				entry: PF2E_BESTIARY_ENTRY,
+			});
+
+			const c = next.encounter.combatants[0];
+			expect(c.name).toBe("Goblin Warrior");
+			expect(c.maxHp).toBe(6);
+			expect(c.ac).toBe(16);
+			expect(c.creatureId).toBe("b1:goblin-warrior");
+		});
 	});
 
 	describe("add-multiple-from-bestiary", () => {

apps/web/src/hooks/__tests__/use-action-bar-state.test.ts

@@ -1,328 +0,0 @@
-// @vitest-environment jsdom
-import type { PlayerCharacter } from "@initiative/domain";
-import { playerCharacterId } from "@initiative/domain";
-import { act, renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import type { SearchResult } from "../../contexts/bestiary-context.js";
-import { useActionBarState } from "../use-action-bar-state.js";
-
-const mockAddCombatant = vi.fn();
-const mockAddFromBestiary = vi.fn();
-const mockAddMultipleFromBestiary = vi.fn();
-const mockAddFromPlayerCharacter = vi.fn();
-const mockBestiarySearch = vi.fn<(q: string) => SearchResult[]>();
-const mockShowCreature = vi.fn();
-const mockShowBulkImport = vi.fn();
-const mockShowSourceManager = vi.fn();
-
-vi.mock("../../contexts/encounter-context.js", () => ({
-	useEncounterContext: () => ({
-		addCombatant: mockAddCombatant,
-		addFromBestiary: mockAddFromBestiary,
-		addMultipleFromBestiary: mockAddMultipleFromBestiary,
-		addFromPlayerCharacter: mockAddFromPlayerCharacter,
-		lastCreatureId: null,
-	}),
-}));
-
-vi.mock("../../contexts/bestiary-context.js", () => ({
-	useBestiaryContext: () => ({
-		search: mockBestiarySearch,
-		isLoaded: true,
-	}),
-}));
-
-vi.mock("../../contexts/player-characters-context.js", () => ({
-	usePlayerCharactersContext: () => ({
-		characters: mockPlayerCharacters,
-	}),
-}));
-
-vi.mock("../../contexts/side-panel-context.js", () => ({
-	useSidePanelContext: () => ({
-		showCreature: mockShowCreature,
-		showBulkImport: mockShowBulkImport,
-		showSourceManager: mockShowSourceManager,
-		panelView: { mode: "closed" },
-	}),
-}));
-
-let mockPlayerCharacters: PlayerCharacter[] = [];
-
-const GOBLIN: SearchResult = {
-	name: "Goblin",
-	source: "MM",
-	sourceDisplayName: "Monster Manual",
-	ac: 15,
-	hp: 7,
-	dex: 14,
-	cr: "1/4",
-	initiativeProficiency: 0,
-	size: "Small",
-	type: "humanoid",
-};
-
-const ORC: SearchResult = {
-	name: "Orc",
-	source: "MM",
-	sourceDisplayName: "Monster Manual",
-	ac: 13,
-	hp: 15,
-	dex: 12,
-	cr: "1/2",
-	initiativeProficiency: 0,
-	size: "Medium",
-	type: "humanoid",
-};
-
-function renderActionBar() {
-	return renderHook(() => useActionBarState());
-}
-
-describe("useActionBarState", () => {
-	beforeEach(() => {
-		vi.clearAllMocks();
-		mockBestiarySearch.mockReturnValue([]);
-		mockPlayerCharacters = [];
-	});
-
-	describe("search and suggestions", () => {
-		it("starts with empty state", () => {
-			const { result } = renderActionBar();
-
-			expect(result.current.nameInput).toBe("");
-			expect(result.current.suggestions).toEqual([]);
-			expect(result.current.queued).toBeNull();
-			expect(result.current.browseMode).toBe(false);
-		});
-
-		it("searches bestiary when input >= 2 chars", () => {
-			mockBestiarySearch.mockReturnValue([GOBLIN]);
-			const { result } = renderActionBar();
-
-			act(() => result.current.handleNameChange("go"));
-
-			expect(mockBestiarySearch).toHaveBeenCalledWith("go");
-			expect(result.current.nameInput).toBe("go");
-		});
-
-		it("does not search when input < 2 chars", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.handleNameChange("g"));
-
-			expect(mockBestiarySearch).not.toHaveBeenCalled();
-		});
-
-		it("matches player characters by name", () => {
-			mockPlayerCharacters = [
-				{
-					id: playerCharacterId("pc-1"),
-					name: "Gandalf",
-					ac: 15,
-					maxHp: 40,
-				},
-			];
-			mockBestiarySearch.mockReturnValue([]);
-			const { result } = renderActionBar();
-
-			act(() => result.current.handleNameChange("gan"));
-
-			expect(result.current.pcMatches).toHaveLength(1);
-		});
-	});
-
-	describe("queued creatures", () => {
-		it("queues a creature on click", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-
-			expect(result.current.queued).toEqual({
-				result: GOBLIN,
-				count: 1,
-			});
-		});
-
-		it("increments count when same creature clicked again", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-
-			expect(result.current.queued?.count).toBe(2);
-		});
-
-		it("resets queue when different creature clicked", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-			act(() => result.current.suggestionActions.clickSuggestion(ORC));
-
-			expect(result.current.queued).toEqual({
-				result: ORC,
-				count: 1,
-			});
-		});
-
-		it("confirmQueued calls addFromBestiary for count=1", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-			act(() => result.current.suggestionActions.confirmQueued());
-
-			expect(mockAddFromBestiary).toHaveBeenCalledWith(GOBLIN);
-			expect(result.current.queued).toBeNull();
-		});
-
-		it("confirmQueued calls addMultipleFromBestiary for count>1", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-			act(() => result.current.suggestionActions.confirmQueued());
-
-			expect(mockAddMultipleFromBestiary).toHaveBeenCalledWith(GOBLIN, 3);
-		});
-
-		it("clears queued when search text changes and creature no longer visible", () => {
-			mockBestiarySearch.mockReturnValue([GOBLIN]);
-			const { result } = renderActionBar();
-
-			act(() => result.current.handleNameChange("go"));
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-
-			// Change search to something that won't match
-			mockBestiarySearch.mockReturnValue([]);
-			act(() => result.current.handleNameChange("xyz"));
-
-			expect(result.current.queued).toBeNull();
-		});
-	});
-
-	describe("form submission", () => {
-		it("adds custom combatant on submit", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.handleNameChange("Fighter"));
-
-			const event = {
-				preventDefault: vi.fn(),
-			} as unknown as React.SubmitEvent<HTMLFormElement>;
-			act(() => result.current.handleAdd(event));
-
-			expect(mockAddCombatant).toHaveBeenCalledWith("Fighter", undefined);
-			expect(result.current.nameInput).toBe("");
-		});
-
-		it("does not add when name is empty", () => {
-			const { result } = renderActionBar();
-
-			const event = {
-				preventDefault: vi.fn(),
-			} as unknown as React.SubmitEvent<HTMLFormElement>;
-			act(() => result.current.handleAdd(event));
-
-			expect(mockAddCombatant).not.toHaveBeenCalled();
-		});
-
-		it("passes custom init/ac/maxHp when set", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.handleNameChange("Fighter"));
-			act(() => result.current.setCustomInit("15"));
-			act(() => result.current.setCustomAc("18"));
-			act(() => result.current.setCustomMaxHp("45"));
-
-			const event = {
-				preventDefault: vi.fn(),
-			} as unknown as React.SubmitEvent<HTMLFormElement>;
-			act(() => result.current.handleAdd(event));
-
-			expect(mockAddCombatant).toHaveBeenCalledWith("Fighter", {
-				initiative: 15,
-				ac: 18,
-				maxHp: 45,
-			});
-		});
-
-		it("does not submit in browse mode", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.toggleBrowseMode());
-			act(() => result.current.handleNameChange("Fighter"));
-
-			const event = {
-				preventDefault: vi.fn(),
-			} as unknown as React.SubmitEvent<HTMLFormElement>;
-			act(() => result.current.handleAdd(event));
-
-			expect(mockAddCombatant).not.toHaveBeenCalled();
-		});
-
-		it("confirms queued on submit instead of adding by name", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-
-			const event = {
-				preventDefault: vi.fn(),
-			} as unknown as React.SubmitEvent<HTMLFormElement>;
-			act(() => result.current.handleAdd(event));
-
-			expect(mockAddFromBestiary).toHaveBeenCalledWith(GOBLIN);
-			expect(mockAddCombatant).not.toHaveBeenCalled();
-		});
-	});
-
-	describe("browse mode", () => {
-		it("toggles browse mode", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.toggleBrowseMode());
-			expect(result.current.browseMode).toBe(true);
-
-			act(() => result.current.toggleBrowseMode());
-			expect(result.current.browseMode).toBe(false);
-		});
-
-		it("handleBrowseSelect shows creature and exits browse mode", () => {
-			const { result } = renderActionBar();
-
-			act(() => result.current.toggleBrowseMode());
-			act(() => result.current.handleBrowseSelect(GOBLIN));
-
-			expect(mockShowCreature).toHaveBeenCalledWith("mm:goblin");
-			expect(result.current.browseMode).toBe(false);
-			expect(result.current.nameInput).toBe("");
-		});
-	});
-
-	describe("dismiss and clear", () => {
-		it("dismissSuggestions clears suggestions and queued", () => {
-			mockBestiarySearch.mockReturnValue([GOBLIN]);
-			const { result } = renderActionBar();
-
-			act(() => result.current.handleNameChange("go"));
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-			act(() => result.current.suggestionActions.dismiss());
-
-			expect(result.current.queued).toBeNull();
-			expect(result.current.suggestionIndex).toBe(-1);
-		});
-
-		it("clear resets everything", () => {
-			mockBestiarySearch.mockReturnValue([GOBLIN]);
-			const { result } = renderActionBar();
-
-			act(() => result.current.handleNameChange("go"));
-			act(() => result.current.suggestionActions.clickSuggestion(GOBLIN));
-			act(() => result.current.suggestionActions.clear());
-
-			expect(result.current.nameInput).toBe("");
-			expect(result.current.queued).toBeNull();
-			expect(result.current.suggestionIndex).toBe(-1);
-		});
-	});
-});

apps/web/src/hooks/__tests__/use-bulk-import.test.tsx

@@ -0,0 +1,168 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
+import { useBulkImport } from "../use-bulk-import.js";
+
+beforeAll(() => {
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+const adapters = createTestAdapters();
+adapters.bestiaryIndex = {
+	...adapters.bestiaryIndex,
+	getAllSourceCodes: () => ["MM", "VGM", "XGE"],
+	getDefaultFetchUrl: (code: string, baseUrl?: string) =>
+		`${baseUrl}${code}.json`,
+};
+
+function wrapper({ children }: { children: ReactNode }) {
+	return <AllProviders adapters={adapters}>{children}</AllProviders>;
+}
+
+/** Flush microtasks so the internal async IIFE inside startImport settles. */
+function flushMicrotasks(): Promise<void> {
+	return new Promise((resolve) => {
+		setTimeout(resolve, 0);
+	});
+}
+
+describe("useBulkImport", () => {
+	it("starts in idle state with all counters at 0", () => {
+		const { result } = renderHook(() => useBulkImport(), { wrapper });
+		expect(result.current.state).toEqual({
+			status: "idle",
+			total: 0,
+			completed: 0,
+			failed: 0,
+		});
+	});
+
+	it("reset returns to idle state", async () => {
+		const { result } = renderHook(() => useBulkImport(), { wrapper });
+
+		const isSourceCached = vi.fn().mockResolvedValue(true);
+		const fetchAndCacheSource = vi.fn();
+		const refreshCache = vi.fn();
+
+		await act(async () => {
+			result.current.startImport(
+				"https://example.com/",
+				fetchAndCacheSource,
+				isSourceCached,
+				refreshCache,
+			);
+			await flushMicrotasks();
+		});
+
+		act(() => result.current.reset());
+		expect(result.current.state.status).toBe("idle");
+	});
+
+	it("goes straight to complete when all sources are cached", async () => {
+		const { result } = renderHook(() => useBulkImport(), { wrapper });
+
+		const isSourceCached = vi.fn().mockResolvedValue(true);
+		const fetchAndCacheSource = vi.fn();
+		const refreshCache = vi.fn();
+
+		await act(async () => {
+			result.current.startImport(
+				"https://example.com/",
+				fetchAndCacheSource,
+				isSourceCached,
+				refreshCache,
+			);
+			await flushMicrotasks();
+		});
+
+		expect(result.current.state.status).toBe("complete");
+		expect(result.current.state.completed).toBe(3);
+		expect(fetchAndCacheSource).not.toHaveBeenCalled();
+	});
+
+	it("fetches uncached sources and completes", async () => {
+		const { result } = renderHook(() => useBulkImport(), { wrapper });
+
+		const isSourceCached = vi.fn().mockResolvedValue(false);
+		const fetchAndCacheSource = vi.fn().mockResolvedValue(undefined);
+		const refreshCache = vi.fn().mockResolvedValue(undefined);
+
+		await act(async () => {
+			result.current.startImport(
+				"https://example.com/",
+				fetchAndCacheSource,
+				isSourceCached,
+				refreshCache,
+			);
+			await flushMicrotasks();
+		});
+
+		expect(result.current.state.status).toBe("complete");
+		expect(result.current.state.completed).toBe(3);
+		expect(result.current.state.failed).toBe(0);
+		expect(fetchAndCacheSource).toHaveBeenCalledTimes(3);
+		expect(refreshCache).toHaveBeenCalled();
+	});
+
+	it("reports partial-failure when some sources fail", async () => {
+		const { result } = renderHook(() => useBulkImport(), { wrapper });
+
+		const isSourceCached = vi.fn().mockResolvedValue(false);
+		const fetchAndCacheSource = vi
+			.fn()
+			.mockResolvedValueOnce(undefined)
+			.mockRejectedValueOnce(new Error("fail"))
+			.mockResolvedValueOnce(undefined);
+		const refreshCache = vi.fn().mockResolvedValue(undefined);
+
+		await act(async () => {
+			result.current.startImport(
+				"https://example.com/",
+				fetchAndCacheSource,
+				isSourceCached,
+				refreshCache,
+			);
+			await flushMicrotasks();
+		});
+
+		expect(result.current.state.status).toBe("partial-failure");
+		expect(result.current.state.completed).toBe(2);
+		expect(result.current.state.failed).toBe(1);
+		expect(refreshCache).toHaveBeenCalled();
+	});
+
+	it("calls refreshCache after all batches complete", async () => {
+		const { result } = renderHook(() => useBulkImport(), { wrapper });
+
+		const isSourceCached = vi.fn().mockResolvedValue(false);
+		const fetchAndCacheSource = vi.fn().mockResolvedValue(undefined);
+		const refreshCache = vi.fn().mockResolvedValue(undefined);
+
+		await act(async () => {
+			result.current.startImport(
+				"https://example.com/",
+				fetchAndCacheSource,
+				isSourceCached,
+				refreshCache,
+			);
+			await flushMicrotasks();
+		});
+
+		expect(refreshCache).toHaveBeenCalledOnce();
+	});
+});

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

@@ -0,0 +1,348 @@
+// @vitest-environment jsdom
+import type { Creature, CreatureId, PlayerCharacter } from "@initiative/domain";
+import { combatantId, creatureId, playerCharacterId } from "@initiative/domain";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import {
+	buildCombatant,
+	buildCreature,
+	buildEncounter,
+} from "../../__tests__/factories/index.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
+import { useDifficultyBreakdown } from "../use-difficulty-breakdown.js";
+import { useRulesEdition } from "../use-rules-edition.js";
+
+beforeAll(() => {
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+const pcId1 = playerCharacterId("pc-1");
+const goblinCreature = buildCreature({
+	id: creatureId("srd:goblin"),
+	name: "Goblin",
+	cr: "1/4",
+	source: "srd",
+	sourceDisplayName: "SRD",
+});
+
+function makeWrapper(options: {
+	encounter: ReturnType<typeof buildEncounter>;
+	playerCharacters?: PlayerCharacter[];
+	creatures?: Map<CreatureId, Creature>;
+}) {
+	const adapters = createTestAdapters({
+		encounter: options.encounter,
+		playerCharacters: options.playerCharacters ?? [],
+		creatures: options.creatures,
+	});
+	return ({ children }: { children: ReactNode }) => (
+		<AllProviders adapters={adapters}>{children}</AllProviders>
+	);
+}
+
+describe("useDifficultyBreakdown", () => {
+	it("returns null when no leveled PCs", () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Goblin",
+						creatureId: goblinCreature.id,
+					}),
+				],
+			}),
+			playerCharacters: [{ id: pcId1, name: "Hero", ac: 15, maxHp: 30 }],
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficultyBreakdown(), {
+			wrapper,
+		});
+		expect(result.current).toBeNull();
+	});
+
+	it("returns null when no monsters with CR", () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Custom",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+			],
+		});
+
+		const { result } = renderHook(() => useDifficultyBreakdown(), {
+			wrapper,
+		});
+		expect(result.current).toBeNull();
+	});
+
+	it("returns per-combatant entries split by side", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Goblin",
+						creatureId: goblinCreature.id,
+					}),
+					buildCombatant({
+						id: combatantId("c-3"),
+						name: "Custom Thug",
+						cr: "2",
+					}),
+					buildCombatant({
+						id: combatantId("c-4"),
+						name: "Bandit",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+			],
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficultyBreakdown(), {
+			wrapper,
+		});
+
+		await waitFor(() => {
+			const breakdown = result.current;
+			expect(breakdown).not.toBeNull();
+			expect(breakdown?.pcCount).toBe(1);
+			// CR 1/4 = 50 + CR 2 = 450 -> total 500
+			expect(breakdown?.totalMonsterXp).toBe(500);
+
+			// PC in party column
+			expect(breakdown?.partyCombatants).toHaveLength(1);
+			expect(breakdown?.partyCombatants[0].combatant.name).toBe("Hero");
+			expect(breakdown?.partyCombatants[0].side).toBe("party");
+			expect(breakdown?.partyCombatants[0].level).toBe(5);
+
+			// Enemies: goblin, thug, bandit
+			expect(breakdown?.enemyCombatants).toHaveLength(3);
+
+			const goblin = breakdown?.enemyCombatants[0];
+			expect(goblin?.cr).toBe("1/4");
+			expect(goblin?.xp).toBe(50);
+			expect(goblin?.source).toBe("SRD");
+			expect(goblin?.editable).toBe(false);
+			expect(goblin?.side).toBe("enemy");
+
+			const thug = breakdown?.enemyCombatants[1];
+			expect(thug?.cr).toBe("2");
+			expect(thug?.xp).toBe(450);
+			expect(thug?.source).toBeNull();
+			expect(thug?.editable).toBe(true);
+
+			const bandit = breakdown?.enemyCombatants[2];
+			expect(bandit?.cr).toBeNull();
+			expect(bandit?.xp).toBeNull();
+			expect(bandit?.editable).toBe(true);
+		});
+	});
+
+	it("bestiary combatant with missing creature is non-editable with null CR", () => {
+		const missingCreatureId = creatureId("creature-missing");
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Ghost",
+						creatureId: missingCreatureId,
+					}),
+					buildCombatant({
+						id: combatantId("c-3"),
+						name: "Thug",
+						cr: "1",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+			],
+		});
+
+		const { result } = renderHook(() => useDifficultyBreakdown(), {
+			wrapper,
+		});
+
+		const breakdown = result.current;
+		expect(breakdown).not.toBeNull();
+		const ghost = breakdown?.enemyCombatants[0];
+		expect(ghost?.cr).toBeNull();
+		expect(ghost?.xp).toBeNull();
+		expect(ghost?.editable).toBe(false);
+	});
+
+	it("PC combatants appear in partyCombatants with level", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Goblin",
+						creatureId: goblinCreature.id,
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 },
+			],
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficultyBreakdown(), {
+			wrapper,
+		});
+
+		await waitFor(() => {
+			expect(result.current?.partyCombatants).toHaveLength(1);
+			expect(result.current?.partyCombatants[0].combatant.name).toBe("Hero");
+			expect(result.current?.partyCombatants[0].level).toBe(1);
+			expect(result.current?.partyCombatants[0].side).toBe("party");
+		});
+	});
+
+	it("combatant with explicit side override is placed correctly", () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Allied Guard",
+						creatureId: goblinCreature.id,
+						side: "party",
+					}),
+					buildCombatant({
+						id: combatantId("c-3"),
+						name: "Thug",
+						cr: "1",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+			],
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficultyBreakdown(), {
+			wrapper,
+		});
+
+		const breakdown = result.current;
+		expect(breakdown).not.toBeNull();
+		// Allied Guard should be in party column
+		expect(breakdown?.partyCombatants).toHaveLength(2);
+		expect(breakdown?.partyCombatants[1].combatant.name).toBe("Allied Guard");
+		expect(breakdown?.partyCombatants[1].side).toBe("party");
+		// Thug in enemy column
+		expect(breakdown?.enemyCombatants).toHaveLength(1);
+		expect(breakdown?.enemyCombatants[0].combatant.name).toBe("Thug");
+	});
+
+	it("exposes encounterMultiplier and adjustedXp for 5e edition", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Goblin",
+						creatureId: goblinCreature.id,
+					}),
+					buildCombatant({
+						id: combatantId("c-3"),
+						name: "Thug",
+						cr: "1",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 },
+			],
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		const { result: editionResult } = renderHook(() => useRulesEdition(), {
+			wrapper,
+		});
+		editionResult.current.setEdition("5e");
+
+		try {
+			const { result } = renderHook(() => useDifficultyBreakdown(), {
+				wrapper,
+			});
+
+			await waitFor(() => {
+				const breakdown = result.current;
+				expect(breakdown).not.toBeNull();
+				// 2 enemy monsters, 1 PC (<3) → base x1.5, shift up → x2
+				expect(breakdown?.encounterMultiplier).toBe(2);
+				// CR 1/4 (50) + CR 1 (200) = 250, x2 = 500
+				expect(breakdown?.totalMonsterXp).toBe(250);
+				expect(breakdown?.adjustedXp).toBe(500);
+				expect(breakdown?.thresholds).toHaveLength(4);
+			});
+		} finally {
+			editionResult.current.setEdition("5.5e");
+		}
+	});
+});

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

@@ -0,0 +1,173 @@
+// @vitest-environment jsdom
+import type { Creature, CreatureId, PlayerCharacter } from "@initiative/domain";
+import { combatantId, creatureId, playerCharacterId } from "@initiative/domain";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import {
+	buildCombatant,
+	buildCreature,
+	buildEncounter,
+} from "../../__tests__/factories/index.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
+import { useDifficulty } from "../use-difficulty.js";
+
+beforeAll(() => {
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+const pcId1 = playerCharacterId("pc-1");
+const goblinCreature = buildCreature({
+	id: creatureId("srd:goblin"),
+	name: "Goblin",
+	cr: "1/4",
+});
+
+function makeWrapper(options: {
+	encounter: ReturnType<typeof buildEncounter>;
+	playerCharacters?: PlayerCharacter[];
+	creatures?: Map<CreatureId, Creature>;
+}) {
+	const adapters = createTestAdapters({
+		encounter: options.encounter,
+		playerCharacters: options.playerCharacters ?? [],
+		creatures: options.creatures,
+	});
+	return ({ children }: { children: ReactNode }) => (
+		<AllProviders adapters={adapters}>{children}</AllProviders>
+	);
+}
+
+describe("useDifficulty with custom combatant CRs", () => {
+	it("includes custom combatant with cr field in monster XP", () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Custom Thug",
+						cr: "2",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 },
+			],
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+		expect(result.current).not.toBeNull();
+		expect(result.current?.totalMonsterXp).toBe(450);
+	});
+
+	it("uses bestiary CR when combatant has both creatureId and cr", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Goblin",
+						creatureId: goblinCreature.id,
+						cr: "5",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 },
+			],
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current).not.toBeNull();
+			// Should use bestiary CR 1/4 (50 XP), not the manual cr "5" (1800 XP)
+			expect(result.current?.totalMonsterXp).toBe(50);
+		});
+	});
+
+	it("mixes bestiary and custom-with-CR combatants correctly", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Goblin",
+						creatureId: goblinCreature.id,
+					}),
+					buildCombatant({
+						id: combatantId("c-3"),
+						name: "Custom",
+						cr: "1",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+			],
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current).not.toBeNull();
+			// CR 1/4 = 50 XP, CR 1 = 200 XP → total 250
+			expect(result.current?.totalMonsterXp).toBe(250);
+		});
+	});
+
+	it("custom combatant without CR is still excluded", () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c-1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c-2"),
+						name: "Custom Monster",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 },
+			],
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+		expect(result.current).toBeNull();
+	});
+});

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

@@ -1,220 +0,0 @@
-// @vitest-environment jsdom
-import type {
-	Combatant,
-	CreatureId,
-	Encounter,
-	PlayerCharacter,
-} from "@initiative/domain";
-import { combatantId, creatureId, playerCharacterId } from "@initiative/domain";
-import { renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-vi.mock("../../contexts/encounter-context.js", () => ({
-	useEncounterContext: vi.fn(),
-}));
-
-vi.mock("../../contexts/player-characters-context.js", () => ({
-	usePlayerCharactersContext: vi.fn(),
-}));
-
-vi.mock("../../contexts/bestiary-context.js", () => ({
-	useBestiaryContext: vi.fn(),
-}));
-
-import { useBestiaryContext } from "../../contexts/bestiary-context.js";
-import { useEncounterContext } from "../../contexts/encounter-context.js";
-import { usePlayerCharactersContext } from "../../contexts/player-characters-context.js";
-import { useDifficulty } from "../use-difficulty.js";
-
-const mockEncounterContext = vi.mocked(useEncounterContext);
-const mockPlayerCharactersContext = vi.mocked(usePlayerCharactersContext);
-const mockBestiaryContext = vi.mocked(useBestiaryContext);
-
-const pcId1 = playerCharacterId("pc-1");
-const pcId2 = playerCharacterId("pc-2");
-const crId1 = creatureId("creature-1");
-const _crId2 = creatureId("creature-2");
-
-function setup(options: {
-	combatants: Combatant[];
-	characters: PlayerCharacter[];
-	creatures: Map<CreatureId, { cr: string }>;
-}) {
-	const encounter = {
-		combatants: options.combatants,
-		activeIndex: 0,
-		roundNumber: 1,
-	} as Encounter;
-
-	mockEncounterContext.mockReturnValue({
-		encounter,
-	} as ReturnType<typeof useEncounterContext>);
-
-	mockPlayerCharactersContext.mockReturnValue({
-		characters: options.characters,
-	} as ReturnType<typeof usePlayerCharactersContext>);
-
-	mockBestiaryContext.mockReturnValue({
-		getCreature: (id: CreatureId) => options.creatures.get(id),
-	} as ReturnType<typeof useBestiaryContext>);
-}
-
-beforeEach(() => {
-	vi.clearAllMocks();
-});
-
-describe("useDifficulty", () => {
-	it("returns difficulty result for leveled PCs and bestiary monsters", () => {
-		setup({
-			combatants: [
-				{ id: combatantId("c1"), name: "Hero", playerCharacterId: pcId1 },
-				{ id: combatantId("c2"), name: "Goblin", creatureId: crId1 },
-			],
-			characters: [{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 }],
-			creatures: new Map([[crId1, { cr: "1/4" }]]),
-		});
-
-		const { result } = renderHook(() => useDifficulty());
-
-		expect(result.current).not.toBeNull();
-		expect(result.current?.tier).toBe("low");
-		expect(result.current?.totalMonsterXp).toBe(50);
-	});
-
-	describe("returns null when data is insufficient (ED-2)", () => {
-		it("returns null when encounter has no combatants", () => {
-			setup({ combatants: [], characters: [], creatures: new Map() });
-
-			const { result } = renderHook(() => useDifficulty());
-			expect(result.current).toBeNull();
-		});
-
-		it("returns null when only custom combatants (no creatureId)", () => {
-			setup({
-				combatants: [
-					{
-						id: combatantId("c1"),
-						name: "Custom",
-						playerCharacterId: pcId1,
-					},
-				],
-				characters: [{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 }],
-				creatures: new Map(),
-			});
-
-			const { result } = renderHook(() => useDifficulty());
-			expect(result.current).toBeNull();
-		});
-
-		it("returns null when bestiary monsters present but no PC combatants", () => {
-			setup({
-				combatants: [
-					{ id: combatantId("c1"), name: "Goblin", creatureId: crId1 },
-				],
-				characters: [],
-				creatures: new Map([[crId1, { cr: "1" }]]),
-			});
-
-			const { result } = renderHook(() => useDifficulty());
-			expect(result.current).toBeNull();
-		});
-
-		it("returns null when PC combatants have no level", () => {
-			setup({
-				combatants: [
-					{
-						id: combatantId("c1"),
-						name: "Hero",
-						playerCharacterId: pcId1,
-					},
-					{ id: combatantId("c2"), name: "Goblin", creatureId: crId1 },
-				],
-				characters: [{ id: pcId1, name: "Hero", ac: 15, maxHp: 30 }],
-				creatures: new Map([[crId1, { cr: "1" }]]),
-			});
-
-			const { result } = renderHook(() => useDifficulty());
-			expect(result.current).toBeNull();
-		});
-
-		it("returns null when PC combatant references unknown player character", () => {
-			setup({
-				combatants: [
-					{
-						id: combatantId("c1"),
-						name: "Hero",
-						playerCharacterId: pcId2,
-					},
-					{ id: combatantId("c2"), name: "Goblin", creatureId: crId1 },
-				],
-				characters: [{ id: pcId1, name: "Other", ac: 15, maxHp: 30, level: 5 }],
-				creatures: new Map([[crId1, { cr: "1" }]]),
-			});
-
-			const { result } = renderHook(() => useDifficulty());
-			expect(result.current).toBeNull();
-		});
-	});
-
-	it("handles mixed combatants: only leveled PCs and bestiary monsters contribute", () => {
-		// Party: one leveled PC, one without level (excluded)
-		// Monsters: one bestiary creature, one custom (excluded)
-		setup({
-			combatants: [
-				{
-					id: combatantId("c1"),
-					name: "Leveled",
-					playerCharacterId: pcId1,
-				},
-				{
-					id: combatantId("c2"),
-					name: "No Level",
-					playerCharacterId: pcId2,
-				},
-				{ id: combatantId("c3"), name: "Goblin", creatureId: crId1 },
-				{ id: combatantId("c4"), name: "Custom Monster" },
-			],
-			characters: [
-				{ id: pcId1, name: "Leveled", ac: 15, maxHp: 30, level: 1 },
-				{ id: pcId2, name: "No Level", ac: 12, maxHp: 20 },
-			],
-			creatures: new Map([[crId1, { cr: "1" }]]),
-		});
-
-		const { result } = renderHook(() => useDifficulty());
-
-		expect(result.current).not.toBeNull();
-		// 1 level-1 PC: budget low=50, mod=75, high=100
-		// 1 CR 1 monster: 200 XP → high (200 >= 100)
-		expect(result.current?.tier).toBe("high");
-		expect(result.current?.totalMonsterXp).toBe(200);
-		expect(result.current?.partyBudget.low).toBe(50);
-	});
-
-	it("includes duplicate PC combatants in budget", () => {
-		// Same PC added twice → counts twice
-		setup({
-			combatants: [
-				{
-					id: combatantId("c1"),
-					name: "Hero 1",
-					playerCharacterId: pcId1,
-				},
-				{
-					id: combatantId("c2"),
-					name: "Hero 2",
-					playerCharacterId: pcId1,
-				},
-				{ id: combatantId("c3"), name: "Goblin", creatureId: crId1 },
-			],
-			characters: [{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 }],
-			creatures: new Map([[crId1, { cr: "1/4" }]]),
-		});
-
-		const { result } = renderHook(() => useDifficulty());
-
-		expect(result.current).not.toBeNull();
-		// 2x level 1: budget low=100
-		expect(result.current?.partyBudget.low).toBe(100);
-	});
-});

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

@@ -0,0 +1,427 @@
+// @vitest-environment jsdom
+import type { Creature, CreatureId, PlayerCharacter } from "@initiative/domain";
+import { combatantId, creatureId, playerCharacterId } from "@initiative/domain";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import {
+	buildCombatant,
+	buildCreature,
+	buildEncounter,
+} from "../../__tests__/factories/index.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
+import { useDifficulty } from "../use-difficulty.js";
+import { useRulesEdition } from "../use-rules-edition.js";
+
+beforeAll(() => {
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+const pcId1 = playerCharacterId("pc-1");
+const pcId2 = playerCharacterId("pc-2");
+const crId1 = creatureId("srd:goblin");
+
+const goblinCreature = buildCreature({
+	id: crId1,
+	name: "Goblin",
+	cr: "1/4",
+});
+
+function makeWrapper(options: {
+	encounter: ReturnType<typeof buildEncounter>;
+	playerCharacters?: PlayerCharacter[];
+	creatures?: Map<CreatureId, Creature>;
+}) {
+	const adapters = createTestAdapters({
+		encounter: options.encounter,
+		playerCharacters: options.playerCharacters ?? [],
+		creatures: options.creatures,
+	});
+	return ({ children }: { children: ReactNode }) => (
+		<AllProviders adapters={adapters}>{children}</AllProviders>
+	);
+}
+
+describe("useDifficulty", () => {
+	it("returns difficulty result for leveled PCs and bestiary monsters", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c2"),
+						name: "Goblin",
+						creatureId: crId1,
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 },
+			],
+			creatures: new Map([[crId1, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current).not.toBeNull();
+			expect(result.current?.tier).toBe(1);
+			expect(result.current?.totalMonsterXp).toBe(50);
+		});
+	});
+
+	describe("returns null when data is insufficient (ED-2)", () => {
+		it("returns null when encounter has no combatants", () => {
+			const wrapper = makeWrapper({
+				encounter: buildEncounter({ combatants: [] }),
+			});
+
+			const { result } = renderHook(() => useDifficulty(), { wrapper });
+			expect(result.current).toBeNull();
+		});
+
+		it("returns null when only custom combatants (no creatureId)", () => {
+			const wrapper = makeWrapper({
+				encounter: buildEncounter({
+					combatants: [
+						buildCombatant({
+							id: combatantId("c1"),
+							name: "Custom",
+							playerCharacterId: pcId1,
+						}),
+					],
+				}),
+				playerCharacters: [
+					{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+				],
+			});
+
+			const { result } = renderHook(() => useDifficulty(), { wrapper });
+			expect(result.current).toBeNull();
+		});
+
+		it("returns null when bestiary monsters present but no PC combatants", () => {
+			const wrapper = makeWrapper({
+				encounter: buildEncounter({
+					combatants: [
+						buildCombatant({
+							id: combatantId("c1"),
+							name: "Goblin",
+							creatureId: crId1,
+						}),
+					],
+				}),
+				creatures: new Map([[crId1, goblinCreature]]),
+			});
+
+			const { result } = renderHook(() => useDifficulty(), { wrapper });
+			expect(result.current).toBeNull();
+		});
+
+		it("returns null when PC combatants have no level", () => {
+			const wrapper = makeWrapper({
+				encounter: buildEncounter({
+					combatants: [
+						buildCombatant({
+							id: combatantId("c1"),
+							name: "Hero",
+							playerCharacterId: pcId1,
+						}),
+						buildCombatant({
+							id: combatantId("c2"),
+							name: "Goblin",
+							creatureId: crId1,
+						}),
+					],
+				}),
+				playerCharacters: [{ id: pcId1, name: "Hero", ac: 15, maxHp: 30 }],
+				creatures: new Map([[crId1, goblinCreature]]),
+			});
+
+			const { result } = renderHook(() => useDifficulty(), { wrapper });
+			expect(result.current).toBeNull();
+		});
+
+		it("returns null when PC combatant references unknown player character", () => {
+			const wrapper = makeWrapper({
+				encounter: buildEncounter({
+					combatants: [
+						buildCombatant({
+							id: combatantId("c1"),
+							name: "Hero",
+							playerCharacterId: pcId2,
+						}),
+						buildCombatant({
+							id: combatantId("c2"),
+							name: "Goblin",
+							creatureId: crId1,
+						}),
+					],
+				}),
+				playerCharacters: [
+					{ id: pcId1, name: "Other", ac: 15, maxHp: 30, level: 5 },
+				],
+				creatures: new Map([[crId1, goblinCreature]]),
+			});
+
+			const { result } = renderHook(() => useDifficulty(), { wrapper });
+			expect(result.current).toBeNull();
+		});
+	});
+
+	it("handles mixed combatants: only leveled PCs and CR-bearing monsters contribute", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c1"),
+						name: "Leveled",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c2"),
+						name: "No Level",
+						playerCharacterId: pcId2,
+					}),
+					buildCombatant({
+						id: combatantId("c3"),
+						name: "Goblin",
+						creatureId: crId1,
+					}),
+					buildCombatant({
+						id: combatantId("c4"),
+						name: "Custom Monster",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Leveled", ac: 15, maxHp: 30, level: 1 },
+				{ id: pcId2, name: "No Level", ac: 12, maxHp: 20 },
+			],
+			creatures: new Map([[crId1, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current).not.toBeNull();
+			// 1 level-1 PC: budget low=50, mod=75, high=100
+			// CR 1/4 = 50 XP -> low (50 >= 50)
+			expect(result.current?.tier).toBe(1);
+			expect(result.current?.totalMonsterXp).toBe(50);
+			expect(result.current?.thresholds[0].value).toBe(50);
+		});
+	});
+
+	it("includes duplicate PC combatants in budget", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c1"),
+						name: "Hero 1",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c2"),
+						name: "Hero 2",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c3"),
+						name: "Goblin",
+						creatureId: crId1,
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 },
+			],
+			creatures: new Map([[crId1, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current).not.toBeNull();
+			// 2x level 1: budget low=100
+			expect(result.current?.thresholds[0].value).toBe(100);
+		});
+	});
+
+	it("combatant toggled to party side subtracts XP", async () => {
+		const bugbear = buildCreature({
+			id: creatureId("srd:bugbear"),
+			name: "Bugbear",
+			cr: "1",
+		});
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c2"),
+						name: "Allied Guard",
+						creatureId: bugbear.id,
+						side: "party",
+					}),
+					buildCombatant({
+						id: combatantId("c3"),
+						name: "Thug",
+						cr: "1",
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 },
+			],
+			creatures: new Map([[bugbear.id, bugbear]]),
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current).not.toBeNull();
+			// Thug CR 1 = 200 XP, Allied Guard CR 1 = 200 XP subtracted, net = 0
+			expect(result.current?.totalMonsterXp).toBe(0);
+			expect(result.current?.tier).toBe(0);
+		});
+	});
+
+	it("default side resolution: PC -> party, non-PC -> enemy", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c2"),
+						name: "Goblin",
+						creatureId: crId1,
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 3 },
+			],
+			creatures: new Map([[crId1, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current).not.toBeNull();
+			// Level 3 budget: low=150, mod=225, high=400
+			// CR 1/4 = 50 XP -> trivial
+			expect(result.current?.thresholds[0].value).toBe(150);
+			expect(result.current?.totalMonsterXp).toBe(50);
+			expect(result.current?.tier).toBe(0);
+		});
+	});
+
+	it("returns 2014 difficulty when edition is 5e", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c2"),
+						name: "Goblin",
+						creatureId: crId1,
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 1 },
+			],
+			creatures: new Map([[crId1, goblinCreature]]),
+		});
+
+		// Set edition via the hook's external store
+		const { result: editionResult } = renderHook(() => useRulesEdition(), {
+			wrapper,
+		});
+		editionResult.current.setEdition("5e");
+
+		try {
+			const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+			await waitFor(() => {
+				expect(result.current).not.toBeNull();
+				// 2014: 4 thresholds with Easy/Medium/Hard/Deadly labels
+				expect(result.current?.thresholds).toHaveLength(4);
+				expect(result.current?.thresholds[0].label).toBe("Easy");
+				// CR 1/4 = 50 XP, 1 PC (<3) shifts x1 → x1.5, adjusted = 75
+				expect(result.current?.encounterMultiplier).toBe(1.5);
+				expect(result.current?.adjustedXp).toBe(75);
+			});
+		} finally {
+			editionResult.current.setEdition("5.5e");
+		}
+	});
+
+	it("custom combatant with CR on party side subtracts XP", async () => {
+		const wrapper = makeWrapper({
+			encounter: buildEncounter({
+				combatants: [
+					buildCombatant({
+						id: combatantId("c1"),
+						name: "Hero",
+						playerCharacterId: pcId1,
+					}),
+					buildCombatant({
+						id: combatantId("c2"),
+						name: "Ally",
+						cr: "2",
+						side: "party",
+					}),
+					buildCombatant({
+						id: combatantId("c3"),
+						name: "Goblin",
+						creatureId: crId1,
+					}),
+				],
+			}),
+			playerCharacters: [
+				{ id: pcId1, name: "Hero", ac: 15, maxHp: 30, level: 5 },
+			],
+			creatures: new Map([[crId1, goblinCreature]]),
+		});
+
+		const { result } = renderHook(() => useDifficulty(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current).not.toBeNull();
+			// CR 1/4 = 50 XP enemy, CR 2 = 450 XP ally subtracted, net = 0 (floored)
+			expect(result.current?.totalMonsterXp).toBe(0);
+		});
+	});
+});

apps/web/src/hooks/__tests__/use-encounter-adjustment.test.ts

@@ -0,0 +1,238 @@
+import type { Pf2eCreature } from "@initiative/domain";
+import {
+	combatantId,
+	creatureId,
+	EMPTY_UNDO_REDO_STATE,
+} from "@initiative/domain";
+import { describe, expect, it } from "vitest";
+import { type EncounterState, encounterReducer } from "../use-encounter.js";
+
+const BASE_CREATURE: Pf2eCreature = {
+	system: "pf2e",
+	id: creatureId("b1:goblin-warrior"),
+	name: "Goblin Warrior",
+	source: "B1",
+	sourceDisplayName: "Bestiary",
+	level: 5,
+	traits: ["humanoid"],
+	perception: 12,
+	abilityMods: { str: 4, dex: 2, con: 3, int: 0, wis: 1, cha: -1 },
+	ac: 22,
+	saveFort: 14,
+	saveRef: 11,
+	saveWill: 9,
+	hp: 75,
+	speed: "25 feet",
+};
+
+function stateWithCreature(
+	name: string,
+	hp: number,
+	ac: number,
+	adj?: "weak" | "elite",
+): EncounterState {
+	return {
+		encounter: {
+			combatants: [
+				{
+					id: combatantId("c-1"),
+					name,
+					maxHp: hp,
+					currentHp: hp,
+					ac,
+					creatureId: creatureId("b1:goblin-warrior"),
+					...(adj !== undefined && { creatureAdjustment: adj }),
+				},
+			],
+			activeIndex: 0,
+			roundNumber: 1,
+		},
+		undoRedoState: EMPTY_UNDO_REDO_STATE,
+		events: [],
+		nextId: 1,
+		lastCreatureId: null,
+	};
+}
+
+describe("set-creature-adjustment", () => {
+	it("Normal → Elite: HP increases, AC +2, name prefixed, adjustment stored", () => {
+		const state = stateWithCreature("Goblin Warrior", 75, 22);
+		const next = encounterReducer(state, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: "elite",
+			baseCreature: BASE_CREATURE,
+		});
+
+		const c = next.encounter.combatants[0];
+		expect(c.maxHp).toBe(95); // 75 + 20 (level 5 bracket)
+		expect(c.currentHp).toBe(95);
+		expect(c.ac).toBe(24);
+		expect(c.name).toBe("Elite Goblin Warrior");
+		expect(c.creatureAdjustment).toBe("elite");
+	});
+
+	it("Normal → Weak: HP decreases, AC −2, name prefixed", () => {
+		const state = stateWithCreature("Goblin Warrior", 75, 22);
+		const next = encounterReducer(state, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: "weak",
+			baseCreature: BASE_CREATURE,
+		});
+
+		const c = next.encounter.combatants[0];
+		expect(c.maxHp).toBe(55); // 75 - 20
+		expect(c.currentHp).toBe(55);
+		expect(c.ac).toBe(20);
+		expect(c.name).toBe("Weak Goblin Warrior");
+		expect(c.creatureAdjustment).toBe("weak");
+	});
+
+	it("Elite → Normal: HP/AC/name revert", () => {
+		const state = stateWithCreature("Elite Goblin Warrior", 95, 24, "elite");
+		const next = encounterReducer(state, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: undefined,
+			baseCreature: BASE_CREATURE,
+		});
+
+		const c = next.encounter.combatants[0];
+		expect(c.maxHp).toBe(75);
+		expect(c.currentHp).toBe(75);
+		expect(c.ac).toBe(22);
+		expect(c.name).toBe("Goblin Warrior");
+		expect(c.creatureAdjustment).toBeUndefined();
+	});
+
+	it("Elite → Weak: full swing applied in one step", () => {
+		const state = stateWithCreature("Elite Goblin Warrior", 95, 24, "elite");
+		const next = encounterReducer(state, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: "weak",
+			baseCreature: BASE_CREATURE,
+		});
+
+		const c = next.encounter.combatants[0];
+		expect(c.maxHp).toBe(55); // 95 - 40 (revert +20, apply -20)
+		expect(c.currentHp).toBe(55);
+		expect(c.ac).toBe(20); // 24 - 4
+		expect(c.name).toBe("Weak Goblin Warrior");
+		expect(c.creatureAdjustment).toBe("weak");
+	});
+
+	it("toggle with damage taken: currentHp shifted by delta, clamped to 0", () => {
+		const state: EncounterState = {
+			...stateWithCreature("Goblin Warrior", 75, 22),
+		};
+		// Simulate damage: currentHp = 10
+		const damaged: EncounterState = {
+			...state,
+			encounter: {
+				...state.encounter,
+				combatants: [{ ...state.encounter.combatants[0], currentHp: 10 }],
+			},
+		};
+
+		const next = encounterReducer(damaged, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: "weak",
+			baseCreature: BASE_CREATURE,
+		});
+
+		const c = next.encounter.combatants[0];
+		expect(c.maxHp).toBe(55);
+		// currentHp = 10 - 20 = -10, clamped to 0
+		expect(c.currentHp).toBe(0);
+	});
+
+	it("toggle with temp HP: temp HP unchanged", () => {
+		const state = stateWithCreature("Goblin Warrior", 75, 22);
+		const withTemp: EncounterState = {
+			...state,
+			encounter: {
+				...state.encounter,
+				combatants: [{ ...state.encounter.combatants[0], tempHp: 10 }],
+			},
+		};
+
+		const next = encounterReducer(withTemp, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: "elite",
+			baseCreature: BASE_CREATURE,
+		});
+
+		expect(next.encounter.combatants[0].tempHp).toBe(10);
+	});
+
+	it("name with auto-number suffix: 'Goblin 2' → 'Elite Goblin 2'", () => {
+		const state = stateWithCreature("Goblin 2", 75, 22);
+		const next = encounterReducer(state, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: "elite",
+			baseCreature: BASE_CREATURE,
+		});
+
+		expect(next.encounter.combatants[0].name).toBe("Elite Goblin 2");
+	});
+
+	it("manually renamed combatant: prefix not found, name unchanged", () => {
+		// Combatant was elite but manually renamed to "Big Boss"
+		const state = stateWithCreature("Big Boss", 95, 24, "elite");
+		const next = encounterReducer(state, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: undefined,
+			baseCreature: BASE_CREATURE,
+		});
+
+		// No "Elite " prefix found, so name stays as is
+		expect(next.encounter.combatants[0].name).toBe("Big Boss");
+	});
+
+	it("emits CreatureAdjustmentSet event", () => {
+		const state = stateWithCreature("Goblin Warrior", 75, 22);
+		const next = encounterReducer(state, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: "elite",
+			baseCreature: BASE_CREATURE,
+		});
+
+		const event = next.events.find((e) => e.type === "CreatureAdjustmentSet");
+		expect(event).toEqual({
+			type: "CreatureAdjustmentSet",
+			combatantId: "c-1",
+			adjustment: "elite",
+		});
+	});
+
+	it("returns unchanged state when adjustment is the same", () => {
+		const state = stateWithCreature("Elite Goblin Warrior", 95, 24, "elite");
+		const next = encounterReducer(state, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-1"),
+			adjustment: "elite",
+			baseCreature: BASE_CREATURE,
+		});
+
+		expect(next).toBe(state);
+	});
+
+	it("returns unchanged state for unknown combatant", () => {
+		const state = stateWithCreature("Goblin Warrior", 75, 22);
+		const next = encounterReducer(state, {
+			type: "set-creature-adjustment",
+			id: combatantId("c-99"),
+			adjustment: "elite",
+			baseCreature: BASE_CREATURE,
+		});
+
+		expect(next).toBe(state);
+	});
+});

apps/web/src/hooks/__tests__/use-encounter-export-import.test.tsx

@@ -0,0 +1,234 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import type { ExportBundle } from "@initiative/domain";
+import { combatantId, playerCharacterId } from "@initiative/domain";
+import { act, renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import {
+	buildCombatant,
+	buildEncounter,
+} from "../../__tests__/factories/index.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
+import { useEncounterContext } from "../../contexts/encounter-context.js";
+import { useEncounterExportImport } from "../use-encounter-export-import.js";
+
+beforeAll(() => {
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
+
+function wrapper({ children }: { children: ReactNode }) {
+	return <AllProviders>{children}</AllProviders>;
+}
+
+function wrapperWithEncounter(encounter: ReturnType<typeof buildEncounter>) {
+	const adapters = createTestAdapters({ encounter });
+	return function Wrapper({ children }: { children: ReactNode }) {
+		return <AllProviders adapters={adapters}>{children}</AllProviders>;
+	};
+}
+
+const VALID_BUNDLE: ExportBundle = {
+	version: 1,
+	exportedAt: "2026-01-01T00:00:00.000Z",
+	encounter: buildEncounter({
+		combatants: [buildCombatant({ id: combatantId("c-1"), name: "Imported" })],
+	}),
+	undoStack: [],
+	redoStack: [],
+	playerCharacters: [
+		{
+			id: playerCharacterId("pc-1"),
+			name: "Hero",
+			ac: 16,
+			maxHp: 30,
+		},
+	],
+};
+
+describe("useEncounterExportImport", () => {
+	describe("import via clipboard", () => {
+		it("imports valid JSON into empty encounter without error", () => {
+			const { result } = renderHook(() => useEncounterExportImport(), {
+				wrapper,
+			});
+
+			act(() => {
+				result.current.handleImportClipboard(JSON.stringify(VALID_BUNDLE));
+			});
+
+			// Import should succeed without error and not show confirm
+			expect(result.current.importError).toBeNull();
+			expect(result.current.showImportConfirm).toBe(false);
+		});
+
+		it("sets error for invalid JSON", () => {
+			const { result } = renderHook(() => useEncounterExportImport(), {
+				wrapper,
+			});
+
+			act(() => {
+				result.current.handleImportClipboard("not json{{{");
+			});
+
+			expect(result.current.importError).toBe("Invalid file format");
+		});
+
+		it("sets error for valid JSON that fails validation", () => {
+			const { result } = renderHook(() => useEncounterExportImport(), {
+				wrapper,
+			});
+
+			act(() => {
+				result.current.handleImportClipboard(JSON.stringify({ version: 999 }));
+			});
+
+			expect(result.current.importError).toBe("Invalid file format");
+		});
+
+		it("shows confirm dialog when encounter is not empty", () => {
+			const encounter = buildEncounter({
+				combatants: [
+					buildCombatant({ id: combatantId("c-1"), name: "Existing" }),
+				],
+			});
+
+			const { result } = renderHook(() => useEncounterExportImport(), {
+				wrapper: wrapperWithEncounter(encounter),
+			});
+
+			act(() => {
+				result.current.handleImportClipboard(JSON.stringify(VALID_BUNDLE));
+			});
+
+			expect(result.current.showImportConfirm).toBe(true);
+			expect(result.current.importError).toBeNull();
+		});
+
+		it("handleImportConfirm clears confirm dialog", () => {
+			const encounter = buildEncounter({
+				combatants: [
+					buildCombatant({ id: combatantId("c-1"), name: "Existing" }),
+				],
+			});
+
+			const { result } = renderHook(() => useEncounterExportImport(), {
+				wrapper: wrapperWithEncounter(encounter),
+			});
+
+			act(() => {
+				result.current.handleImportClipboard(JSON.stringify(VALID_BUNDLE));
+			});
+
+			expect(result.current.showImportConfirm).toBe(true);
+
+			act(() => {
+				result.current.handleImportConfirm();
+			});
+
+			expect(result.current.showImportConfirm).toBe(false);
+		});
+
+		it("handleImportCancel clears pending without applying", () => {
+			const encounter = buildEncounter({
+				combatants: [
+					buildCombatant({ id: combatantId("c-1"), name: "Existing" }),
+				],
+			});
+
+			const { result } = renderHook(
+				() => ({
+					exportImport: useEncounterExportImport(),
+					encounter: useEncounterContext(),
+				}),
+				{ wrapper: wrapperWithEncounter(encounter) },
+			);
+
+			act(() => {
+				result.current.exportImport.handleImportClipboard(
+					JSON.stringify(VALID_BUNDLE),
+				);
+			});
+
+			act(() => {
+				result.current.exportImport.handleImportCancel();
+			});
+
+			expect(result.current.exportImport.showImportConfirm).toBe(false);
+			expect(result.current.encounter.encounter.combatants[0].name).toBe(
+				"Existing",
+			);
+		});
+	});
+
+	describe("export", () => {
+		it("handleExportDownload calls triggerDownload", () => {
+			const encounter = buildEncounter({
+				combatants: [
+					buildCombatant({ id: combatantId("c-1"), name: "Fighter" }),
+				],
+			});
+
+			const { result } = renderHook(() => useEncounterExportImport(), {
+				wrapper: wrapperWithEncounter(encounter),
+			});
+
+			// triggerDownload creates a blob URL and clicks an anchor — just verify it doesn't throw
+			expect(() => {
+				act(() => {
+					result.current.handleExportDownload(false, "test-export.json");
+				});
+			}).not.toThrow();
+		});
+	});
+
+	describe("dialog state", () => {
+		it("toggles export method dialog", () => {
+			const { result } = renderHook(() => useEncounterExportImport(), {
+				wrapper,
+			});
+
+			expect(result.current.showExportMethod).toBe(false);
+			act(() => result.current.setShowExportMethod(true));
+			expect(result.current.showExportMethod).toBe(true);
+		});
+
+		it("toggles import method dialog", () => {
+			const { result } = renderHook(() => useEncounterExportImport(), {
+				wrapper,
+			});
+
+			expect(result.current.showImportMethod).toBe(false);
+			act(() => result.current.setShowImportMethod(true));
+			expect(result.current.showImportMethod).toBe(true);
+		});
+
+		it("clears import error", () => {
+			const { result } = renderHook(() => useEncounterExportImport(), {
+				wrapper,
+			});
+
+			act(() => {
+				result.current.handleImportClipboard("bad json");
+			});
+			expect(result.current.importError).toBe("Invalid file format");
+
+			act(() => result.current.setImportError(null));
+			expect(result.current.importError).toBeNull();
+		});
+	});
+});

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

@@ -1,28 +1,37 @@
 // @vitest-environment jsdom
-import type { BestiaryIndexEntry, PlayerCharacter } from "@initiative/domain";
+import type { PlayerCharacter } from "@initiative/domain";
 import { combatantId, creatureId, playerCharacterId } from "@initiative/domain";
 import { act, renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
+import type { SearchResult } from "../use-bestiary.js";
 import { useEncounter } from "../use-encounter.js";
 
-vi.mock("../../persistence/encounter-storage.js", () => ({
+beforeAll(() => {
-	loadEncounter: vi.fn().mockReturnValue(null),
+	Object.defineProperty(globalThis, "matchMedia", {
-	saveEncounter: vi.fn(),
+		writable: true,
-}));
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
 
-const { loadEncounter: mockLoad, saveEncounter: mockSave } =
+function wrapper({ children }: { children: ReactNode }) {
-	await vi.importMock<typeof import("../../persistence/encounter-storage.js")>(
+	return <AllProviders>{children}</AllProviders>;
-		"../../persistence/encounter-storage.js",
+}
-	);
 
 describe("useEncounter", () => {
-	beforeEach(() => {
-		vi.clearAllMocks();
-		mockLoad.mockReturnValue(null);
-	});
-
 	it("initializes with empty encounter when persistence returns null", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
 		expect(result.current.encounter.combatants).toEqual([]);
 		expect(result.current.encounter.activeIndex).toBe(0);
@@ -32,13 +41,33 @@ describe("useEncounter", () => {
 
 	it("initializes from stored encounter", () => {
 		const stored = {
-			combatants: [{ id: combatantId("c-1"), name: "Goblin" }],
+			combatants: [
+				{
+					id: combatantId("c-1"),
+					name: "Goblin",
+					initiative: undefined,
+					maxHp: undefined,
+					currentHp: undefined,
+					tempHp: undefined,
+					ac: undefined,
+					conditions: [],
+					concentrating: false,
+					creatureId: undefined,
+					playerCharacterId: undefined,
+					color: undefined,
+					icon: undefined,
+				},
+			],
 			activeIndex: 0,
 			roundNumber: 2,
 		};
-		mockLoad.mockReturnValue(stored);
+		const adapters = createTestAdapters({ encounter: stored });
 
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), {
+			wrapper: ({ children }: { children: ReactNode }) => (
+				<AllProviders adapters={adapters}>{children}</AllProviders>
+			),
+		});
 
 		expect(result.current.encounter.combatants).toHaveLength(1);
 		expect(result.current.encounter.roundNumber).toBe(2);
@@ -46,7 +75,7 @@ describe("useEncounter", () => {
 	});
 
 	it("addCombatant adds a combatant with incremental IDs and persists", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
 		act(() => result.current.addCombatant("Goblin"));
 		act(() => result.current.addCombatant("Orc"));
@@ -55,11 +84,10 @@ describe("useEncounter", () => {
 		expect(result.current.encounter.combatants[0].name).toBe("Goblin");
 		expect(result.current.encounter.combatants[1].name).toBe("Orc");
 		expect(result.current.isEmpty).toBe(false);
-		expect(mockSave).toHaveBeenCalled();
 	});
 
 	it("removeCombatant removes a combatant and persists", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
 		act(() => result.current.addCombatant("Goblin"));
 		const id = result.current.encounter.combatants[0].id;
@@ -71,7 +99,7 @@ describe("useEncounter", () => {
 	});
 
 	it("advanceTurn and retreatTurn update encounter state", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
 		act(() => result.current.addCombatant("Goblin"));
 		act(() => result.current.addCombatant("Orc"));
@@ -86,7 +114,7 @@ describe("useEncounter", () => {
 	});
 
 	it("clearEncounter resets to empty and resets ID counter", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
 		act(() => result.current.addCombatant("Goblin"));
 		act(() => result.current.clearEncounter());
@@ -100,7 +128,7 @@ describe("useEncounter", () => {
 	});
 
 	it("addCombatant with opts applies initiative, ac, maxHp", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
 		act(() =>
 			result.current.addCombatant("Goblin", {
@@ -118,16 +146,18 @@ describe("useEncounter", () => {
 	});
 
 	it("derived flags: hasCreatureCombatants and canRollAllInitiative", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
 		// No creatures yet
 		expect(result.current.hasCreatureCombatants).toBe(false);
 		expect(result.current.canRollAllInitiative).toBe(false);
 
 		// Add from bestiary to get a creature combatant
-		const entry: BestiaryIndexEntry = {
+		const entry: SearchResult = {
+			system: "dnd",
 			name: "Goblin",
 			source: "MM",
+			sourceDisplayName: "Monster Manual",
 			ac: 15,
 			hp: 7,
 			dex: 14,
@@ -146,11 +176,13 @@ describe("useEncounter", () => {
 	});
 
 	it("addFromBestiary adds combatant with HP, AC, creatureId", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
-		const entry: BestiaryIndexEntry = {
+		const entry: SearchResult = {
+			system: "dnd",
 			name: "Goblin",
 			source: "MM",
+			sourceDisplayName: "Monster Manual",
 			ac: 15,
 			hp: 7,
 			dex: 14,
@@ -173,11 +205,13 @@ describe("useEncounter", () => {
 	});
 
 	it("addFromBestiary auto-numbers duplicate names", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
-		const entry: BestiaryIndexEntry = {
+		const entry: SearchResult = {
+			system: "dnd",
 			name: "Goblin",
 			source: "MM",
+			sourceDisplayName: "Monster Manual",
 			ac: 15,
 			hp: 7,
 			dex: 14,
@@ -200,7 +234,7 @@ describe("useEncounter", () => {
 	});
 
 	it("addFromPlayerCharacter adds combatant with HP, AC, color, icon", () => {
-		const { result } = renderHook(() => useEncounter());
+		const { result } = renderHook(() => useEncounter(), { wrapper });
 
 		const pc: PlayerCharacter = {
 			id: playerCharacterId("pc-1"),

apps/web/src/hooks/__tests__/use-initiative-rolls.test.ts

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { type CreatureId, combatantId } from "@initiative/domain";
+import { act, renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useInitiativeRolls } from "../use-initiative-rolls.js";
+
+const mockMakeStore = vi.fn(() => ({}));
+const mockWithUndo = vi.fn((fn: () => unknown) => fn());
+const mockGetCreature = vi.fn();
+const mockShowCreature = vi.fn();
+
+vi.mock("../../contexts/encounter-context.js", () => ({
+	useEncounterContext: () => ({
+		encounter: {
+			combatants: [
+				{
+					id: combatantId("c1"),
+					name: "Goblin",
+					creatureId: "srd:goblin" as CreatureId,
+				},
+			],
+			activeIndex: 0,
+			roundNumber: 1,
+		},
+		makeStore: mockMakeStore,
+		withUndo: mockWithUndo,
+	}),
+}));
+
+vi.mock("../../contexts/bestiary-context.js", () => ({
+	useBestiaryContext: () => ({
+		getCreature: mockGetCreature,
+	}),
+}));
+
+vi.mock("../../contexts/side-panel-context.js", () => ({
+	useSidePanelContext: () => ({
+		showCreature: mockShowCreature,
+	}),
+}));
+
+const mockRollInitiativeUseCase = vi.fn();
+const mockRollAllInitiativeUseCase = vi.fn();
+
+vi.mock("@initiative/application", () => ({
+	rollInitiativeUseCase: (...args: unknown[]) =>
+		mockRollInitiativeUseCase(...args),
+	rollAllInitiativeUseCase: (...args: unknown[]) =>
+		mockRollAllInitiativeUseCase(...args),
+}));
+
+function wrapper({ children }: { children: ReactNode }) {
+	return children;
+}
+
+describe("useInitiativeRolls", () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("handleRollInitiative calls rollInitiativeUseCase via withUndo", () => {
+		mockRollInitiativeUseCase.mockReturnValue({ initiative: 15 });
+		const { result } = renderHook(() => useInitiativeRolls(), { wrapper });
+
+		act(() => result.current.handleRollInitiative(combatantId("c1")));
+
+		expect(mockWithUndo).toHaveBeenCalled();
+		expect(mockRollInitiativeUseCase).toHaveBeenCalled();
+	});
+
+	it("sets rollSingleSkipped on domain error", () => {
+		mockRollInitiativeUseCase.mockReturnValue({
+			kind: "domain-error",
+			code: "missing-source",
+			message: "no source",
+		});
+		const { result } = renderHook(() => useInitiativeRolls(), { wrapper });
+
+		act(() => result.current.handleRollInitiative(combatantId("c1")));
+		expect(result.current.rollSingleSkipped).toBe(true);
+		expect(mockShowCreature).toHaveBeenCalledWith("srd:goblin");
+	});
+
+	it("dismissRollSingleSkipped resets the flag", () => {
+		mockRollInitiativeUseCase.mockReturnValue({
+			kind: "domain-error",
+			code: "missing-source",
+			message: "no source",
+		});
+		const { result } = renderHook(() => useInitiativeRolls(), { wrapper });
+
+		act(() => result.current.handleRollInitiative(combatantId("c1")));
+		expect(result.current.rollSingleSkipped).toBe(true);
+
+		act(() => result.current.dismissRollSingleSkipped());
+		expect(result.current.rollSingleSkipped).toBe(false);
+	});
+
+	it("handleRollAllInitiative sets rollSkippedCount when sources missing", () => {
+		mockRollAllInitiativeUseCase.mockReturnValue({ skippedNoSource: 3 });
+		const { result } = renderHook(() => useInitiativeRolls(), { wrapper });
+
+		act(() => result.current.handleRollAllInitiative());
+		expect(result.current.rollSkippedCount).toBe(3);
+	});
+
+	it("dismissRollSkipped resets the count", () => {
+		mockRollAllInitiativeUseCase.mockReturnValue({ skippedNoSource: 2 });
+		const { result } = renderHook(() => useInitiativeRolls(), { wrapper });
+
+		act(() => result.current.handleRollAllInitiative());
+		act(() => result.current.dismissRollSkipped());
+		expect(result.current.rollSkippedCount).toBe(0);
+	});
+});

apps/web/src/hooks/__tests__/use-long-press.test.ts

@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useLongPress } from "../use-long-press.js";
+
+function touchEvent(overrides?: Partial<React.TouchEvent>): React.TouchEvent {
+	return {
+		preventDefault: vi.fn(),
+		...overrides,
+	} as unknown as React.TouchEvent;
+}
+
+describe("useLongPress", () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	it("returns onTouchStart, onTouchEnd, onTouchMove handlers", () => {
+		const { result } = renderHook(() => useLongPress(vi.fn()));
+		expect(result.current.onTouchStart).toBeInstanceOf(Function);
+		expect(result.current.onTouchEnd).toBeInstanceOf(Function);
+		expect(result.current.onTouchMove).toBeInstanceOf(Function);
+	});
+
+	it("fires onLongPress after 500ms hold", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() => useLongPress(onLongPress));
+
+		const e = touchEvent();
+		act(() => result.current.onTouchStart(e));
+		expect(onLongPress).not.toHaveBeenCalled();
+
+		act(() => {
+			vi.advanceTimersByTime(500);
+		});
+		expect(onLongPress).toHaveBeenCalledOnce();
+	});
+
+	it("does not fire if released before 500ms", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() => useLongPress(onLongPress));
+
+		act(() => result.current.onTouchStart(touchEvent()));
+		act(() => {
+			vi.advanceTimersByTime(300);
+		});
+		act(() => result.current.onTouchEnd(touchEvent()));
+		act(() => {
+			vi.advanceTimersByTime(500);
+		});
+
+		expect(onLongPress).not.toHaveBeenCalled();
+	});
+
+	it("cancels on touch move", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() => useLongPress(onLongPress));
+
+		act(() => result.current.onTouchStart(touchEvent()));
+		act(() => {
+			vi.advanceTimersByTime(200);
+		});
+		act(() => result.current.onTouchMove());
+		act(() => {
+			vi.advanceTimersByTime(500);
+		});
+
+		expect(onLongPress).not.toHaveBeenCalled();
+	});
+
+	it("onTouchEnd calls preventDefault after long press fires", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() => useLongPress(onLongPress));
+
+		act(() => result.current.onTouchStart(touchEvent()));
+		act(() => {
+			vi.advanceTimersByTime(500);
+		});
+
+		const preventDefaultSpy = vi.fn();
+		const endEvent = touchEvent({ preventDefault: preventDefaultSpy });
+		act(() => result.current.onTouchEnd(endEvent));
+		expect(preventDefaultSpy).toHaveBeenCalled();
+	});
+
+	it("onTouchEnd does not preventDefault when long press did not fire", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() => useLongPress(onLongPress));
+
+		act(() => result.current.onTouchStart(touchEvent()));
+		act(() => {
+			vi.advanceTimersByTime(100);
+		});
+
+		const preventDefaultSpy = vi.fn();
+		const endEvent = touchEvent({ preventDefault: preventDefaultSpy });
+		act(() => result.current.onTouchEnd(endEvent));
+		expect(preventDefaultSpy).not.toHaveBeenCalled();
+	});
+});

apps/web/src/hooks/__tests__/use-player-characters.test.tsx

@@ -1,25 +1,33 @@
 // @vitest-environment jsdom
 import { playerCharacterId } from "@initiative/domain";
 import { act, renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { createTestAdapters } from "../../__tests__/adapters/in-memory-adapters.js";
+import { AllProviders } from "../../__tests__/test-providers.js";
 import { usePlayerCharacters } from "../use-player-characters.js";
 
-vi.mock("../../persistence/player-character-storage.js", () => ({
+beforeAll(() => {
-	loadPlayerCharacters: vi.fn().mockReturnValue([]),
+	Object.defineProperty(globalThis, "matchMedia", {
-	savePlayerCharacters: vi.fn(),
+		writable: true,
-}));
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+});
 
-const { loadPlayerCharacters: mockLoad, savePlayerCharacters: mockSave } =
+function wrapper({ children }: { children: ReactNode }) {
-	await vi.importMock<
+	return <AllProviders>{children}</AllProviders>;
-		typeof import("../../persistence/player-character-storage.js")
+}
-	>("../../persistence/player-character-storage.js");
 
 describe("usePlayerCharacters", () => {
-	beforeEach(() => {
-		vi.clearAllMocks();
-		mockLoad.mockReturnValue([]);
-	});
-
 	it("initializes with characters from persistence", () => {
 		const stored = [
 			{
@@ -31,15 +39,19 @@ describe("usePlayerCharacters", () => {
 				icon: undefined,
 			},
 		];
-		mockLoad.mockReturnValue(stored);
+		const adapters = createTestAdapters({ playerCharacters: stored });
 
-		const { result } = renderHook(() => usePlayerCharacters());
+		const { result } = renderHook(() => usePlayerCharacters(), {
+			wrapper: ({ children }: { children: ReactNode }) => (
+				<AllProviders adapters={adapters}>{children}</AllProviders>
+			),
+		});
 
 		expect(result.current.characters).toEqual(stored);
 	});
 
 	it("createCharacter adds a character and persists", () => {
-		const { result } = renderHook(() => usePlayerCharacters());
+		const { result } = renderHook(() => usePlayerCharacters(), { wrapper });
 
 		act(() => {
 			result.current.createCharacter(
@@ -56,11 +68,10 @@ describe("usePlayerCharacters", () => {
 		expect(result.current.characters[0].name).toBe("Vex");
 		expect(result.current.characters[0].ac).toBe(15);
 		expect(result.current.characters[0].maxHp).toBe(28);
-		expect(mockSave).toHaveBeenCalled();
 	});
 
 	it("createCharacter returns domain error for empty name", () => {
-		const { result } = renderHook(() => usePlayerCharacters());
+		const { result } = renderHook(() => usePlayerCharacters(), { wrapper });
 
 		let error: unknown;
 		act(() => {
@@ -79,7 +90,7 @@ describe("usePlayerCharacters", () => {
 	});
 
 	it("editCharacter updates character and persists", () => {
-		const { result } = renderHook(() => usePlayerCharacters());
+		const { result } = renderHook(() => usePlayerCharacters(), { wrapper });
 
 		act(() => {
 			result.current.createCharacter(
@@ -99,11 +110,10 @@ describe("usePlayerCharacters", () => {
 		});
 
 		expect(result.current.characters[0].name).toBe("Vex'ahlia");
-		expect(mockSave).toHaveBeenCalled();
 	});
 
 	it("deleteCharacter removes character and persists", () => {
-		const { result } = renderHook(() => usePlayerCharacters());
+		const { result } = renderHook(() => usePlayerCharacters(), { wrapper });
 
 		act(() => {
 			result.current.createCharacter(
@@ -123,6 +133,5 @@ describe("usePlayerCharacters", () => {
 		});
 
 		expect(result.current.characters).toHaveLength(0);
-		expect(mockSave).toHaveBeenCalled();
 	});
 });

apps/web/src/hooks/__tests__/use-rules-edition.test.ts

@@ -1,9 +1,10 @@
 // @vitest-environment jsdom
 import { act, renderHook } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { useRulesEdition } from "../use-rules-edition.js";
 
-const STORAGE_KEY = "initiative:rules-edition";
+const STORAGE_KEY = "initiative:game-system";
+const OLD_STORAGE_KEY = "initiative:rules-edition";
 
 describe("useRulesEdition", () => {
 	afterEach(() => {
@@ -11,6 +12,7 @@ describe("useRulesEdition", () => {
 		const { result } = renderHook(() => useRulesEdition());
 		act(() => result.current.setEdition("5.5e"));
 		localStorage.removeItem(STORAGE_KEY);
+		localStorage.removeItem(OLD_STORAGE_KEY);
 	});
 
 	it("defaults to 5.5e", () => {
@@ -42,4 +44,31 @@ describe("useRulesEdition", () => {
 
 		expect(r2.current.edition).toBe("5e");
 	});
+
+	it("accepts pf2e as a valid game system", () => {
+		const { result } = renderHook(() => useRulesEdition());
+
+		act(() => result.current.setEdition("pf2e"));
+
+		expect(result.current.edition).toBe("pf2e");
+		expect(localStorage.getItem(STORAGE_KEY)).toBe("pf2e");
+	});
+
+	it("migrates from old storage key on fresh module load", async () => {
+		// Set up old key before re-importing the module
+		localStorage.setItem(OLD_STORAGE_KEY, "5e");
+		localStorage.removeItem(STORAGE_KEY);
+
+		// Force a fresh module so loadEdition() re-runs at init time
+		vi.resetModules();
+		const { useRulesEdition: freshHook } = await import(
+			"../use-rules-edition.js"
+		);
+
+		const { result } = renderHook(() => freshHook());
+
+		expect(result.current.edition).toBe("5e");
+		expect(localStorage.getItem(STORAGE_KEY)).toBe("5e");
+		expect(localStorage.getItem(OLD_STORAGE_KEY)).toBeNull();
+	});
 });

apps/web/src/hooks/__tests__/use-swipe-to-dismiss.test.ts

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useSwipeToDismiss } from "../use-swipe-to-dismiss.js";
+
+const PANEL_WIDTH = 300;
+
+function makeTouchEvent(clientX: number, clientY = 0): React.TouchEvent {
+	return {
+		touches: [{ clientX, clientY }],
+		currentTarget: {
+			getBoundingClientRect: () => ({ width: PANEL_WIDTH }),
+		},
+	} as unknown as React.TouchEvent;
+}
+
+describe("useSwipeToDismiss", () => {
+	beforeEach(() => {
+		vi.spyOn(Date, "now").mockReturnValue(0);
+	});
+
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("starts with offsetX 0 and isSwiping false", () => {
+		const { result } = renderHook(() => useSwipeToDismiss(vi.fn()));
+		expect(result.current.offsetX).toBe(0);
+		expect(result.current.isSwiping).toBe(false);
+	});
+
+	it("horizontal drag updates offsetX and sets isSwiping", () => {
+		const { result } = renderHook(() => useSwipeToDismiss(vi.fn()));
+
+		act(() => result.current.handlers.onTouchStart(makeTouchEvent(0)));
+		act(() => result.current.handlers.onTouchMove(makeTouchEvent(50)));
+
+		expect(result.current.offsetX).toBe(50);
+		expect(result.current.isSwiping).toBe(true);
+	});
+
+	it("vertical drag is ignored after direction lock", () => {
+		const { result } = renderHook(() => useSwipeToDismiss(vi.fn()));
+
+		act(() => result.current.handlers.onTouchStart(makeTouchEvent(0, 0)));
+		// Move vertically > 10px to lock vertical
+		act(() => result.current.handlers.onTouchMove(makeTouchEvent(0, 20)));
+
+		expect(result.current.offsetX).toBe(0);
+	});
+
+	it("small movement does not lock direction", () => {
+		const { result } = renderHook(() => useSwipeToDismiss(vi.fn()));
+
+		act(() => result.current.handlers.onTouchStart(makeTouchEvent(0)));
+		act(() => result.current.handlers.onTouchMove(makeTouchEvent(5)));
+
+		// No direction locked yet, no update
+		expect(result.current.offsetX).toBe(0);
+		expect(result.current.isSwiping).toBe(false);
+	});
+
+	it("leftward drag is clamped to 0", () => {
+		const { result } = renderHook(() => useSwipeToDismiss(vi.fn()));
+
+		act(() => result.current.handlers.onTouchStart(makeTouchEvent(100)));
+		act(() => result.current.handlers.onTouchMove(makeTouchEvent(50)));
+
+		expect(result.current.offsetX).toBe(0);
+	});
+
+	it("calls onDismiss when ratio exceeds threshold", () => {
+		const onDismiss = vi.fn();
+		const { result } = renderHook(() => useSwipeToDismiss(onDismiss));
+
+		act(() => result.current.handlers.onTouchStart(makeTouchEvent(0)));
+		// Move > 35% of panel width (300 * 0.35 = 105)
+		act(() => result.current.handlers.onTouchMove(makeTouchEvent(120)));
+
+		vi.spyOn(Date, "now").mockReturnValue(5000); // slow swipe
+		act(() => result.current.handlers.onTouchEnd());
+
+		expect(onDismiss).toHaveBeenCalled();
+	});
+
+	it("calls onDismiss with fast velocity", () => {
+		const onDismiss = vi.fn();
+		const { result } = renderHook(() => useSwipeToDismiss(onDismiss));
+
+		act(() => result.current.handlers.onTouchStart(makeTouchEvent(0)));
+		// Small distance but fast
+		act(() => result.current.handlers.onTouchMove(makeTouchEvent(30)));
+
+		// Very fast: 30px in 0.1s = 300px/s, velocity = 300/300 = 1.0 > 0.5
+		vi.spyOn(Date, "now").mockReturnValue(100);
+		act(() => result.current.handlers.onTouchEnd());
+
+		expect(onDismiss).toHaveBeenCalled();
+	});
+
+	it("does not dismiss when below thresholds", () => {
+		const onDismiss = vi.fn();
+		const { result } = renderHook(() => useSwipeToDismiss(onDismiss));
+
+		act(() => result.current.handlers.onTouchStart(makeTouchEvent(0)));
+		// Small distance, slow speed
+		act(() => result.current.handlers.onTouchMove(makeTouchEvent(20)));
+
+		vi.spyOn(Date, "now").mockReturnValue(5000);
+		act(() => result.current.handlers.onTouchEnd());
+
+		expect(onDismiss).not.toHaveBeenCalled();
+		expect(result.current.offsetX).toBe(0);
+		expect(result.current.isSwiping).toBe(false);
+	});
+});

apps/web/src/hooks/use-auto-stat-block.ts

@@ -6,8 +6,8 @@ export function useAutoStatBlock(): void {
 	const { encounter } = useEncounterContext();
 	const { panelView, updateCreature } = useSidePanelContext();
 
-	const activeCreatureId =
+	const activeCombatant = encounter.combatants[encounter.activeIndex];
-		encounter.combatants[encounter.activeIndex]?.creatureId;
+	const activeCreatureId = activeCombatant?.creatureId;
 	const prevActiveIndexRef = useRef(encounter.activeIndex);
 
 	useEffect(() => {
@@ -21,7 +21,13 @@ export function useAutoStatBlock(): void {
 			activeCreatureId &&
 			panelView.mode === "creature"
 		) {
-			updateCreature(activeCreatureId);
+			updateCreature(activeCreatureId, activeCombatant.id);
 		}
-	}, [encounter.activeIndex, activeCreatureId, panelView.mode, updateCreature]);
+	}, [
+		encounter.activeIndex,
+		activeCreatureId,
+		activeCombatant?.id,
+		panelView.mode,
+		updateCreature,
+	]);
 }

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

@@ -1,29 +1,37 @@
 import type {
+	AnyCreature,
 	BestiaryIndexEntry,
-	Creature,
 	CreatureId,
+	Pf2eBestiaryIndexEntry,
 } from "@initiative/domain";
 import { useCallback, useEffect, useState } from "react";
 import {
 	normalizeBestiary,
 	setSourceDisplayNames,
 } from "../adapters/bestiary-adapter.js";
-import * as bestiaryCache from "../adapters/bestiary-cache.js";
+import { normalizeFoundryCreatures } from "../adapters/pf2e-bestiary-adapter.js";
-import {
+import { useAdapters } from "../contexts/adapter-context.js";
-	getSourceDisplayName,
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
-	loadBestiaryIndex,
-} from "../adapters/bestiary-index-adapter.js";
 
-export interface SearchResult extends BestiaryIndexEntry {
+export type SearchResult =
-	readonly sourceDisplayName: string;
+	| (BestiaryIndexEntry & {
-}
+			readonly system: "dnd";
+			readonly sourceDisplayName: string;
+	  })
+	| (Pf2eBestiaryIndexEntry & {
+			readonly system: "pf2e";
+			readonly sourceDisplayName: string;
+	  });
 
 interface BestiaryHook {
 	search: (query: string) => SearchResult[];
-	getCreature: (id: CreatureId) => Creature | undefined;
+	getCreature: (id: CreatureId) => AnyCreature | undefined;
 	isLoaded: boolean;
 	isSourceCached: (sourceCode: string) => Promise<boolean>;
-	fetchAndCacheSource: (sourceCode: string, url: string) => Promise<void>;
+	fetchAndCacheSource: (
+		sourceCode: string,
+		url: string,
+	) => Promise<{ skippedNames: string[] }>;
 	uploadAndCacheSource: (
 		sourceCode: string,
 		jsonData: unknown,
@@ -31,64 +39,220 @@ interface BestiaryHook {
 	refreshCache: () => Promise<void>;
 }
 
+interface BatchResult {
+	readonly responses: unknown[];
+	readonly failed: string[];
+}
+
+async function fetchJson(url: string, path: string): Promise<unknown> {
+	const response = await fetch(url);
+	if (!response.ok) {
+		throw new Error(
+			`Failed to fetch ${path}: ${response.status} ${response.statusText}`,
+		);
+	}
+	return response.json();
+}
+
+async function fetchWithRetry(
+	url: string,
+	path: string,
+	retries = 2,
+): Promise<unknown> {
+	try {
+		return await fetchJson(url, path);
+	} catch (error) {
+		if (retries <= 0) throw error;
+		await new Promise<void>((r) => setTimeout(r, 500));
+		return fetchWithRetry(url, path, retries - 1);
+	}
+}
+
+async function fetchBatch(
+	baseUrl: string,
+	paths: string[],
+): Promise<BatchResult> {
+	const settled = await Promise.allSettled(
+		paths.map((path) => fetchWithRetry(`${baseUrl}${path}`, path)),
+	);
+	const responses: unknown[] = [];
+	const failed: string[] = [];
+	for (let i = 0; i < settled.length; i++) {
+		const result = settled[i];
+		if (result.status === "fulfilled") {
+			responses.push(result.value);
+		} else {
+			failed.push(paths[i]);
+		}
+	}
+	return { responses, failed };
+}
+
+async function fetchInBatches(
+	paths: string[],
+	baseUrl: string,
+	concurrency: number,
+): Promise<BatchResult> {
+	const batches: string[][] = [];
+	for (let i = 0; i < paths.length; i += concurrency) {
+		batches.push(paths.slice(i, i + concurrency));
+	}
+	const accumulated = await batches.reduce<Promise<BatchResult>>(
+		async (prev, batch) => {
+			const acc = await prev;
+			const result = await fetchBatch(baseUrl, batch);
+			return {
+				responses: [...acc.responses, ...result.responses],
+				failed: [...acc.failed, ...result.failed],
+			};
+		},
+		Promise.resolve({ responses: [], failed: [] }),
+	);
+	return accumulated;
+}
+
+interface Pf2eFetchResult {
+	creatures: AnyCreature[];
+	skippedNames: string[];
+}
+
+async function fetchPf2eSource(
+	paths: string[],
+	url: string,
+	sourceCode: string,
+	displayName: string,
+	resolveNames: (failedPaths: string[]) => Map<string, string>,
+): Promise<Pf2eFetchResult> {
+	const baseUrl = url.endsWith("/") ? url : `${url}/`;
+	const { responses, failed } = await fetchInBatches(paths, baseUrl, 6);
+	if (responses.length === 0) {
+		throw new Error(
+			`Failed to fetch any creatures (${failed.length} failed). This may be caused by an ad blocker — try disabling it for this site or use file upload instead.`,
+		);
+	}
+	const nameMap = failed.length > 0 ? resolveNames(failed) : new Map();
+	const skippedNames = failed.map((p) => nameMap.get(p) ?? p);
+	if (skippedNames.length > 0) {
+		console.warn("Skipped creatures (ad blocker?):", skippedNames);
+	}
+	return {
+		creatures: normalizeFoundryCreatures(responses, sourceCode, displayName),
+		skippedNames,
+	};
+}
+
 export function useBestiary(): BestiaryHook {
+	const { bestiaryCache, bestiaryIndex, pf2eBestiaryIndex } = useAdapters();
+	const { edition } = useRulesEditionContext();
 	const [isLoaded, setIsLoaded] = useState(false);
 	const [creatureMap, setCreatureMap] = useState(
-		() => new Map<CreatureId, Creature>(),
+		() => new Map<CreatureId, AnyCreature>(),
 	);
 
 	useEffect(() => {
-		const index = loadBestiaryIndex();
+		const index = bestiaryIndex.loadIndex();
 		setSourceDisplayNames(index.sources as Record<string, string>);
-		if (index.creatures.length > 0) {
+
+		const pf2eIndex = pf2eBestiaryIndex.loadIndex();
+
+		if (index.creatures.length > 0 || pf2eIndex.creatures.length > 0) {
 			setIsLoaded(true);
 		}
 
 		void bestiaryCache.loadAllCachedCreatures().then((map) => {
 			setCreatureMap(map);
 		});
-	}, []);
+	}, [bestiaryCache, bestiaryIndex, pf2eBestiaryIndex]);
 
-	const search = useCallback((query: string): SearchResult[] => {
+	const search = useCallback(
-		if (query.length < 2) return [];
+		(query: string): SearchResult[] => {
-		const lower = query.toLowerCase();
+			if (query.length < 2) return [];
-		const index = loadBestiaryIndex();
+			const lower = query.toLowerCase();
-		return index.creatures
+
-			.filter((c) => c.name.toLowerCase().includes(lower))
+			if (edition === "pf2e") {
-			.sort((a, b) => a.name.localeCompare(b.name))
+				const index = pf2eBestiaryIndex.loadIndex();
-			.slice(0, 10)
+				return index.creatures
-			.map((c) => ({
+					.filter((c) => c.name.toLowerCase().includes(lower))
-				...c,
+					.sort((a, b) => a.name.localeCompare(b.name))
-				sourceDisplayName: getSourceDisplayName(c.source),
+					.slice(0, 10)
-			}));
+					.map((c) => ({
-	}, []);
+						...c,
+						system: "pf2e" as const,
+						sourceDisplayName: pf2eBestiaryIndex.getSourceDisplayName(c.source),
+					}));
+			}
+
+			const index = bestiaryIndex.loadIndex();
+			return index.creatures
+				.filter((c) => c.name.toLowerCase().includes(lower))
+				.sort((a, b) => a.name.localeCompare(b.name))
+				.slice(0, 10)
+				.map((c) => ({
+					...c,
+					system: "dnd" as const,
+					sourceDisplayName: bestiaryIndex.getSourceDisplayName(c.source),
+				}));
+		},
+		[bestiaryIndex, pf2eBestiaryIndex, edition],
+	);
 
 	const getCreature = useCallback(
-		(id: CreatureId): Creature | undefined => {
+		(id: CreatureId): AnyCreature | undefined => {
 			return creatureMap.get(id);
 		},
 		[creatureMap],
 	);
 
+	const system = edition === "pf2e" ? "pf2e" : "dnd";
+
 	const isSourceCachedFn = useCallback(
 		(sourceCode: string): Promise<boolean> => {
-			return bestiaryCache.isSourceCached(sourceCode);
+			return bestiaryCache.isSourceCached(system, sourceCode);
 		},
-		[],
+		[bestiaryCache, system],
 	);
 
 	const fetchAndCacheSource = useCallback(
-		async (sourceCode: string, url: string): Promise<void> => {
+		async (
-			const response = await fetch(url);
+			sourceCode: string,
-			if (!response.ok) {
+			url: string,
-				throw new Error(
+		): Promise<{ skippedNames: string[] }> => {
-					`Failed to fetch: ${response.status} ${response.statusText}`,
+			let creatures: AnyCreature[];
+			let skippedNames: string[] = [];
+
+			if (edition === "pf2e") {
+				const paths = pf2eBestiaryIndex.getCreaturePathsForSource(sourceCode);
+				const displayName = pf2eBestiaryIndex.getSourceDisplayName(sourceCode);
+				const result = await fetchPf2eSource(
+					paths,
+					url,
+					sourceCode,
+					displayName,
+					pf2eBestiaryIndex.getCreatureNamesByPaths,
 				);
+				creatures = result.creatures;
+				skippedNames = result.skippedNames;
+			} else {
+				const response = await fetch(url);
+				if (!response.ok) {
+					throw new Error(
+						`Failed to fetch: ${response.status} ${response.statusText}`,
+					);
+				}
+				const json = await response.json();
+				creatures = normalizeBestiary(json);
 			}
-			const json = await response.json();
+
-			const creatures = normalizeBestiary(json);
+			const displayName =
-			const displayName = getSourceDisplayName(sourceCode);
+				edition === "pf2e"
-			await bestiaryCache.cacheSource(sourceCode, displayName, creatures);
+					? pf2eBestiaryIndex.getSourceDisplayName(sourceCode)
+					: bestiaryIndex.getSourceDisplayName(sourceCode);
+			await bestiaryCache.cacheSource(
+				system,
+				sourceCode,
+				displayName,
+				creatures,
+			);
 			setCreatureMap((prev) => {
 				const next = new Map(prev);
 				for (const c of creatures) {
@@ -96,16 +260,33 @@ export function useBestiary(): BestiaryHook {
 				}
 				return next;
 			});
+			return { skippedNames };
 		},
-		[],
+		[bestiaryCache, bestiaryIndex, pf2eBestiaryIndex, edition, system],
 	);
 
 	const uploadAndCacheSource = useCallback(
 		async (sourceCode: string, jsonData: unknown): Promise<void> => {
-			// biome-ignore lint/suspicious/noExplicitAny: raw JSON shape varies
+			const creatures =
-			const creatures = normalizeBestiary(jsonData as any);
+				edition === "pf2e"
-			const displayName = getSourceDisplayName(sourceCode);
+					? normalizeFoundryCreatures(
-			await bestiaryCache.cacheSource(sourceCode, displayName, creatures);
+							Array.isArray(jsonData) ? jsonData : [jsonData],
+							sourceCode,
+							pf2eBestiaryIndex.getSourceDisplayName(sourceCode),
+						)
+					: normalizeBestiary(
+							jsonData as Parameters<typeof normalizeBestiary>[0],
+						);
+			const displayName =
+				edition === "pf2e"
+					? pf2eBestiaryIndex.getSourceDisplayName(sourceCode)
+					: bestiaryIndex.getSourceDisplayName(sourceCode);
+			await bestiaryCache.cacheSource(
+				system,
+				sourceCode,
+				displayName,
+				creatures,
+			);
 			setCreatureMap((prev) => {
 				const next = new Map(prev);
 				for (const c of creatures) {
@@ -114,13 +295,13 @@ export function useBestiary(): BestiaryHook {
 				return next;
 			});
 		},
-		[],
+		[bestiaryCache, bestiaryIndex, pf2eBestiaryIndex, edition, system],
 	);
 
 	const refreshCache = useCallback(async (): Promise<void> => {
 		const map = await bestiaryCache.loadAllCachedCreatures();
 		setCreatureMap(map);
-	}, []);
+	}, [bestiaryCache]);
 
 	return {
 		search,

apps/web/src/hooks/use-bulk-import.ts

@@ -1,8 +1,6 @@
 import { useCallback, useRef, useState } from "react";
-import {
+import { useAdapters } from "../contexts/adapter-context.js";
-	getAllSourceCodes,
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
-	getDefaultFetchUrl,
-} from "../adapters/bestiary-index-adapter.js";
 
 const BATCH_SIZE = 6;
 
@@ -24,7 +22,10 @@ interface BulkImportHook {
 	state: BulkImportState;
 	startImport: (
 		baseUrl: string,
-		fetchAndCacheSource: (sourceCode: string, url: string) => Promise<void>,
+		fetchAndCacheSource: (
+			sourceCode: string,
+			url: string,
+		) => Promise<{ skippedNames: string[] }>,
 		isSourceCached: (sourceCode: string) => Promise<boolean>,
 		refreshCache: () => Promise<void>,
 	) => void;
@@ -32,17 +33,23 @@ interface BulkImportHook {
 }
 
 export function useBulkImport(): BulkImportHook {
+	const { bestiaryIndex, pf2eBestiaryIndex } = useAdapters();
+	const { edition } = useRulesEditionContext();
+	const indexPort = edition === "pf2e" ? pf2eBestiaryIndex : bestiaryIndex;
 	const [state, setState] = useState<BulkImportState>(IDLE_STATE);
 	const countersRef = useRef({ completed: 0, failed: 0 });
 
 	const startImport = useCallback(
 		(
 			baseUrl: string,
-			fetchAndCacheSource: (sourceCode: string, url: string) => Promise<void>,
+			fetchAndCacheSource: (
+				sourceCode: string,
+				url: string,
+			) => Promise<{ skippedNames: string[] }>,
 			isSourceCached: (sourceCode: string) => Promise<boolean>,
 			refreshCache: () => Promise<void>,
 		) => {
-			const allCodes = getAllSourceCodes();
+			const allCodes = indexPort.getAllSourceCodes();
 			const total = allCodes.length;
 
 			countersRef.current = { completed: 0, failed: 0 };
@@ -83,7 +90,7 @@ export function useBulkImport(): BulkImportHook {
 						chain.then(() =>
 							Promise.allSettled(
 								batch.map(async ({ code }) => {
-									const url = getDefaultFetchUrl(code, baseUrl);
+									const url = indexPort.getDefaultFetchUrl(code, baseUrl);
 									try {
 										await fetchAndCacheSource(code, url);
 										countersRef.current.completed++;
@@ -117,7 +124,7 @@ export function useBulkImport(): BulkImportHook {
 				});
 			})();
 		},
-		[],
+		[indexPort],
 	);
 
 	const reset = useCallback(() => {

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

@@ -0,0 +1,171 @@
+import type {
+	Combatant,
+	CreatureId,
+	DifficultyThreshold,
+	DifficultyTier,
+	PlayerCharacter,
+} from "@initiative/domain";
+import { calculateEncounterDifficulty, crToXp } from "@initiative/domain";
+import { useMemo } from "react";
+import { useBestiaryContext } from "../contexts/bestiary-context.js";
+import { useEncounterContext } from "../contexts/encounter-context.js";
+import { usePlayerCharactersContext } from "../contexts/player-characters-context.js";
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
+import { resolveSide } from "./use-difficulty.js";
+
+export interface BreakdownCombatant {
+	readonly combatant: Combatant;
+	readonly cr: string | null;
+	readonly xp: number | null;
+	readonly source: string | null;
+	readonly editable: boolean;
+	readonly side: "party" | "enemy";
+	readonly level: number | undefined;
+}
+
+interface DifficultyBreakdown {
+	readonly tier: DifficultyTier;
+	readonly totalMonsterXp: number;
+	readonly thresholds: readonly DifficultyThreshold[];
+	readonly encounterMultiplier: number | undefined;
+	readonly adjustedXp: number | undefined;
+	readonly partySizeAdjusted: boolean | undefined;
+	readonly pcCount: number;
+	readonly partyCombatants: readonly BreakdownCombatant[];
+	readonly enemyCombatants: readonly BreakdownCombatant[];
+}
+
+export function useDifficultyBreakdown(): DifficultyBreakdown | null {
+	const { encounter } = useEncounterContext();
+	const { characters } = usePlayerCharactersContext();
+	const { getCreature } = useBestiaryContext();
+	const { edition } = useRulesEditionContext();
+
+	return useMemo(() => {
+		const { partyCombatants, enemyCombatants, descriptors, pcCount } =
+			classifyCombatants(encounter.combatants, characters, getCreature);
+
+		const hasPartyLevel = descriptors.some(
+			(d) => d.side === "party" && d.level !== undefined,
+		);
+		const hasCr = descriptors.some((d) => d.cr !== undefined);
+
+		if (!hasPartyLevel || !hasCr) return null;
+
+		const result = calculateEncounterDifficulty(descriptors, edition);
+
+		return {
+			...result,
+			pcCount,
+			partyCombatants,
+			enemyCombatants,
+		};
+	}, [encounter.combatants, characters, getCreature, edition]);
+}
+
+type CreatureInfo = {
+	cr?: string;
+	source: string;
+	sourceDisplayName: string;
+};
+
+function buildBreakdownEntry(
+	c: Combatant,
+	side: "party" | "enemy",
+	level: number | undefined,
+	creature: CreatureInfo | undefined,
+): BreakdownCombatant {
+	if (c.playerCharacterId) {
+		return {
+			combatant: c,
+			cr: null,
+			xp: null,
+			source: null,
+			editable: false,
+			side,
+			level,
+		};
+	}
+	if (creature) {
+		const cr = creature.cr ?? null;
+		return {
+			combatant: c,
+			cr,
+			xp: cr ? crToXp(cr) : null,
+			source: creature.sourceDisplayName ?? creature.source,
+			editable: false,
+			side,
+			level: undefined,
+		};
+	}
+	if (c.cr) {
+		return {
+			combatant: c,
+			cr: c.cr,
+			xp: crToXp(c.cr),
+			source: null,
+			editable: true,
+			side,
+			level: undefined,
+		};
+	}
+	return {
+		combatant: c,
+		cr: null,
+		xp: null,
+		source: null,
+		editable: !c.creatureId,
+		side,
+		level: undefined,
+	};
+}
+
+function resolveLevel(
+	c: Combatant,
+	characters: readonly PlayerCharacter[],
+): number | undefined {
+	if (!c.playerCharacterId) return undefined;
+	return characters.find((p) => p.id === c.playerCharacterId)?.level;
+}
+
+function resolveCr(
+	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 };
+}
+
+function classifyCombatants(
+	combatants: readonly Combatant[],
+	characters: readonly PlayerCharacter[],
+	getCreature: (id: CreatureId) => CreatureInfo | undefined,
+) {
+	const partyCombatants: BreakdownCombatant[] = [];
+	const enemyCombatants: BreakdownCombatant[] = [];
+	const descriptors: {
+		level?: number;
+		cr?: string;
+		side: "party" | "enemy";
+	}[] = [];
+	let pcCount = 0;
+
+	for (const c of combatants) {
+		const side = resolveSide(c);
+		const level = resolveLevel(c, characters);
+		if (level !== undefined) pcCount++;
+
+		const { cr, creature } = resolveCr(c, getCreature);
+
+		if (level !== undefined || cr != null) {
+			descriptors.push({ level, cr: cr ?? undefined, side });
+		}
+
+		const entry = buildBreakdownEntry(c, side, level, creature);
+		const target = side === "party" ? partyCombatants : enemyCombatants;
+		target.push(entry);
+	}
+
+	return { partyCombatants, enemyCombatants, descriptors, pcCount };
+}

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

@@ -1,5 +1,7 @@
 import type {
+	AnyCreature,
 	Combatant,
+	CombatantDescriptor,
 	CreatureId,
 	DifficultyResult,
 	PlayerCharacter,
@@ -9,46 +11,58 @@ import { useMemo } from "react";
 import { useBestiaryContext } from "../contexts/bestiary-context.js";
 import { useEncounterContext } from "../contexts/encounter-context.js";
 import { usePlayerCharactersContext } from "../contexts/player-characters-context.js";
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 
-function derivePartyLevels(
+export function resolveSide(c: Combatant): "party" | "enemy" {
-	combatants: readonly Combatant[],
+	if (c.side) return c.side;
-	characters: readonly PlayerCharacter[],
+	return c.playerCharacterId ? "party" : "enemy";
-): number[] {
-	const levels: number[] = [];
-	for (const c of combatants) {
-		if (!c.playerCharacterId) continue;
-		const pc = characters.find((p) => p.id === c.playerCharacterId);
-		if (pc?.level !== undefined) levels.push(pc.level);
-	}
-	return levels;
 }
 
-function deriveMonsterCrs(
+function buildDescriptors(
 	combatants: readonly Combatant[],
-	getCreature: (id: CreatureId) => { cr: string } | undefined,
+	characters: readonly PlayerCharacter[],
-): string[] {
+	getCreature: (id: CreatureId) => AnyCreature | undefined,
-	const crs: string[] = [];
+): CombatantDescriptor[] {
+	const descriptors: CombatantDescriptor[] = [];
 	for (const c of combatants) {
-		if (!c.creatureId) continue;
+		const side = resolveSide(c);
-		const creature = getCreature(c.creatureId);
+		const level = c.playerCharacterId
-		if (creature) crs.push(creature.cr);
+			? characters.find((p) => p.id === c.playerCharacterId)?.level
+			: undefined;
+		const creature = c.creatureId ? getCreature(c.creatureId) : undefined;
+		const creatureCr =
+			creature && !("system" in creature) ? creature.cr : undefined;
+		const cr = creatureCr ?? c.cr ?? undefined;
+
+		if (level !== undefined || cr !== undefined) {
+			descriptors.push({ level, cr, side });
+		}
 	}
-	return crs;
+	return descriptors;
 }
 
 export function useDifficulty(): DifficultyResult | null {
 	const { encounter } = useEncounterContext();
 	const { characters } = usePlayerCharactersContext();
 	const { getCreature } = useBestiaryContext();
+	const { edition } = useRulesEditionContext();
 
 	return useMemo(() => {
-		const partyLevels = derivePartyLevels(encounter.combatants, characters);
+		if (edition === "pf2e") return null;
-		const monsterCrs = deriveMonsterCrs(encounter.combatants, getCreature);
 
-		if (partyLevels.length === 0 || monsterCrs.length === 0) {
+		const descriptors = buildDescriptors(
-			return null;
+			encounter.combatants,
-		}
+			characters,
+			getCreature,
+		);
 
-		return calculateEncounterDifficulty(partyLevels, monsterCrs);
+		const hasPartyLevel = descriptors.some(
-	}, [encounter.combatants, characters, getCreature]);
+			(d) => d.side === "party" && d.level !== undefined,
+		);
+		const hasCr = descriptors.some((d) => d.cr !== undefined);
+
+		if (!hasPartyLevel || !hasCr) return null;
+
+		return calculateEncounterDifficulty(descriptors, edition);
+	}, [encounter.combatants, characters, getCreature, edition]);
 }

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

@@ -0,0 +1,139 @@
+import type { ExportBundle } from "@initiative/domain";
+import { useCallback, useRef, useState } from "react";
+import { useEncounterContext } from "../contexts/encounter-context.js";
+import { usePlayerCharactersContext } from "../contexts/player-characters-context.js";
+import {
+	assembleExportBundle,
+	bundleToJson,
+	readImportFile,
+	triggerDownload,
+	validateImportBundle,
+} from "../persistence/export-import.js";
+
+export function useEncounterExportImport() {
+	const {
+		encounter,
+		undoRedoState,
+		isEmpty: encounterIsEmpty,
+		setEncounter,
+		setUndoRedoState,
+	} = useEncounterContext();
+	const { characters: playerCharacters, replacePlayerCharacters } =
+		usePlayerCharactersContext();
+
+	const [importError, setImportError] = useState<string | null>(null);
+	const [showExportMethod, setShowExportMethod] = useState(false);
+	const [showImportMethod, setShowImportMethod] = useState(false);
+	const [showImportConfirm, setShowImportConfirm] = useState(false);
+	const pendingBundleRef = useRef<ExportBundle | null>(null);
+	const importFileRef = useRef<HTMLInputElement>(null);
+
+	const handleExportDownload = useCallback(
+		(includeHistory: boolean, filename: string) => {
+			const bundle = assembleExportBundle(
+				encounter,
+				undoRedoState,
+				playerCharacters,
+				includeHistory,
+			);
+			triggerDownload(bundle, filename);
+		},
+		[encounter, undoRedoState, playerCharacters],
+	);
+
+	const handleExportClipboard = useCallback(
+		(includeHistory: boolean) => {
+			const bundle = assembleExportBundle(
+				encounter,
+				undoRedoState,
+				playerCharacters,
+				includeHistory,
+			);
+			void navigator.clipboard.writeText(bundleToJson(bundle));
+		},
+		[encounter, undoRedoState, playerCharacters],
+	);
+
+	const applyImport = useCallback(
+		(bundle: ExportBundle) => {
+			setEncounter(bundle.encounter);
+			setUndoRedoState({
+				undoStack: bundle.undoStack,
+				redoStack: bundle.redoStack,
+			});
+			replacePlayerCharacters([...bundle.playerCharacters]);
+		},
+		[setEncounter, setUndoRedoState, replacePlayerCharacters],
+	);
+
+	const handleValidatedBundle = useCallback(
+		(result: ExportBundle | string) => {
+			if (typeof result === "string") {
+				setImportError(result);
+				return;
+			}
+			if (encounterIsEmpty) {
+				applyImport(result);
+			} else {
+				pendingBundleRef.current = result;
+				setShowImportConfirm(true);
+			}
+		},
+		[encounterIsEmpty, applyImport],
+	);
+
+	const handleImportFile = useCallback(
+		async (e: React.ChangeEvent<HTMLInputElement>) => {
+			const file = e.target.files?.[0];
+			if (!file) return;
+			if (importFileRef.current) importFileRef.current.value = "";
+
+			setImportError(null);
+			handleValidatedBundle(await readImportFile(file));
+		},
+		[handleValidatedBundle],
+	);
+
+	const handleImportClipboard = useCallback(
+		(text: string) => {
+			setImportError(null);
+			try {
+				const parsed: unknown = JSON.parse(text);
+				handleValidatedBundle(validateImportBundle(parsed));
+			} catch {
+				setImportError("Invalid file format");
+			}
+		},
+		[handleValidatedBundle],
+	);
+
+	const handleImportConfirm = useCallback(() => {
+		if (pendingBundleRef.current) {
+			applyImport(pendingBundleRef.current);
+			pendingBundleRef.current = null;
+		}
+		setShowImportConfirm(false);
+	}, [applyImport]);
+
+	const handleImportCancel = useCallback(() => {
+		pendingBundleRef.current = null;
+		setShowImportConfirm(false);
+	}, []);
+
+	return {
+		importError,
+		showExportMethod,
+		showImportMethod,
+		showImportConfirm,
+		importFileRef,
+		setImportError,
+		setShowExportMethod,
+		setShowImportMethod,
+		handleExportDownload,
+		handleExportClipboard,
+		handleImportFile,
+		handleImportClipboard,
+		handleImportConfirm,
+		handleImportCancel,
+	} as const;
+}