Refactor App.tsx from god component to context-based architecture

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

.gitignore

@@ -11,3 +11,4 @@ Thumbs.db
 .idea/
 coverage/
 *.tsbuildinfo
+docs/agents/plans/

.oxlintrc.json

@@ -0,0 +1,27 @@
+{
+	"$schema": "https://raw.githubusercontent.com/nicolo-ribaudo/tc39-proposal-type-annotations/refs/heads/main/packages/oxlint/configuration_file_schema.json",
+	"plugins": ["typescript", "unicorn", "jest"],
+	"categories": {},
+	"rules": {
+		"typescript/no-unnecessary-type-assertion": "error",
+		"typescript/no-deprecated": "warn",
+		"typescript/prefer-regexp-exec": "error",
+		"unicorn/prefer-string-replace-all": "error",
+		"unicorn/prefer-string-raw": "error",
+		"jest/expect-expect": [
+			"error",
+			{
+				"assertFunctionNames": ["expect", "expectDomainError"]
+			}
+		]
+	},
+	"ignorePatterns": [
+		"dist",
+		"coverage",
+		".claude",
+		".specify",
+		"specs",
+		".pnpm-store",
+		"scripts"
+	]
+}

.specify/memory/constitution.md

@@ -1,9 +1,9 @@
 <!--
   Sync Impact Report
   ───────────────────
-  Version change: 2.2.1 → 3.0.0 (MAJOR — specs describe features not changes, proportional workflow)
+  Version change: 3.0.0 → 3.1.0 (MINOR — new principle II-A: context-based state flow)
   Modified sections:
-    - Development Workflow: specs are living feature documents; full pipeline for new features only
+    - Core Principles: added II-A. Context-Based State Flow (max 8 props, context over prop drilling)
   Templates requiring updates: none
 -->
 # Encounter Console Constitution
@@ -38,6 +38,22 @@ dependency direction:
 
 A module in an inner layer MUST NOT import from an outer layer.
 
+### II-A. Context-Based State Flow
+
+UI components MUST consume shared application state via React context
+providers, not prop drilling. Props are reserved for per-instance
+configuration (e.g., a specific data item, a layout variant, a ref).
+
+- Components MUST NOT declare more than 8 explicit props in their
+  own interface. This is enforced by `scripts/check-component-props.mjs`
+  at pre-commit.
+- Generic UI primitives (`components/ui/`) that extend HTML element
+  attributes are exempt — only explicitly declared props count, not
+  inherited HTML attributes.
+- Coordinating hooks that consume multiple contexts (e.g.,
+  `useInitiativeRolls`) are preferred over wiring callbacks through
+  a parent component.
+
 ### III. Clarification-First
 
 Before making any non-trivial assumption during specification,
@@ -140,4 +156,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.0.0 | **Ratified**: 2026-03-03 | **Last Amended**: 2026-03-11
+**Version**: 3.1.0 | **Ratified**: 2026-03-03 | **Last Amended**: 2026-03-19

CLAUDE.md

@@ -5,13 +5,15 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Commands
 
 ```bash
-pnpm check              # Merge gate — must pass before every commit (audit + knip + biome + typecheck + test/coverage + jscpd)
+pnpm check              # Merge gate — must pass before every commit (audit + knip + biome + oxlint + typecheck + test/coverage + jscpd)
+pnpm oxlint             # Type-aware linting (oxlint — complements Biome)
 pnpm knip               # Unused code detection (Knip)
 pnpm test               # Run all tests (Vitest)
 pnpm test:watch         # Tests in watch mode
 pnpm typecheck          # tsc --build (project references)
 pnpm lint               # Biome lint
 pnpm format             # Biome format (writes)
+pnpm check:props        # Component prop count enforcement (max 8)
 pnpm --filter web dev   # Vite dev server (localhost:5173)
 pnpm --filter web build # Production build
 ```
@@ -58,19 +60,29 @@ docs/agents/               RPI skill artifacts (research reports, plans)
 - React 19, Vite 6, Tailwind CSS v4
 - Lucide React (icons)
 - `idb` (IndexedDB wrapper for bestiary cache)
-- Biome 2.0 (formatting + linting), Knip (unused code), jscpd (copy-paste detection)
+- Biome 2.4 (formatting + linting), oxlint (type-aware linting), Knip (unused code), jscpd (copy-paste detection)
 - Vitest (testing, v8 coverage), Lefthook (pre-commit hooks)
 
 ## Conventions
 
-- **Biome 2.0** for formatting and linting (no Prettier, no ESLint). Tab indentation, 80-char lines. Imports are auto-organized alphabetically.
+- **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`.
 - **TypeScript strict mode** with `verbatimModuleSyntax`. Use `.js` extensions in relative imports when required by the repo's ESM settings (e.g., `./types.js`).
 - **Branded types** for identity values (e.g., `CombatantId`). Prefer immutability/`readonly` where practical.
 - **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.
 - **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`). Use React context for shared state; reserve props for per-instance config (data items, layout variants, refs).
 - **Quality gates** are enforced at pre-commit via Lefthook's `pnpm check` — the project's single earliest enforcement point. No gate may exist only as a CI step or manual process.
 
+## Self-Review Checklist
+
+Before finishing a change, consider:
+- Is this the simplest approach that solves the current problem?
+- Is there duplication that hurts readability? (But don't abstract prematurely.)
+- Are errors handled correctly and communicated sensibly to the user?
+- Does the UI follow modern patterns and feel intuitive to interact with?
+
 ## Speckit Workflow
 
 Speckit (`/speckit.*` skills) manages the spec-driven development pipeline. Specs are **living documents** that describe features, not individual changes.

apps/web/package.json

@@ -23,6 +23,7 @@
 		"@tailwindcss/vite": "^4.2.1",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/react": "^19.0.0",
 		"@types/react-dom": "^19.0.0",
 		"@vitejs/plugin-react": "^4.3.0",

apps/web/src/App.tsx

@@ -1,301 +1,74 @@
+import { useEffect, useRef } from "react";
+import { ActionBar } from "./components/action-bar.js";
+import { BulkImportToasts } from "./components/bulk-import-toasts.js";
+import { CombatantRow } from "./components/combatant-row.js";
 import {
-	rollAllInitiativeUseCase,
+	PlayerCharacterSection,
-	rollInitiativeUseCase,
+	type PlayerCharacterSectionHandle,
-} from "@initiative/application";
+} from "./components/player-character-section.js";
-import type { CombatantId, Creature, CreatureId } from "@initiative/domain";
+import { StatBlockPanel } from "./components/stat-block-panel.js";
-import {
+import { Toast } from "./components/toast.js";
-	useCallback,
+import { TurnNavigation } from "./components/turn-navigation.js";
-	useEffect,
+import { useEncounterContext } from "./contexts/encounter-context.js";
-	useLayoutEffect,
+import { useInitiativeRollsContext } from "./contexts/initiative-rolls-context.js";
-	useRef,
+import { useSidePanelContext } from "./contexts/side-panel-context.js";
-	useState,
+import { useActionBarAnimation } from "./hooks/use-action-bar-animation.js";
-} from "react";
+import { useAutoStatBlock } from "./hooks/use-auto-stat-block.js";
-import { ActionBar } from "./components/action-bar";
+import { cn } from "./lib/utils.js";
-import { CombatantRow } from "./components/combatant-row";
-import { CreatePlayerModal } from "./components/create-player-modal";
-import { PlayerManagement } from "./components/player-management";
-import { SourceManager } from "./components/source-manager";
-import { StatBlockPanel } from "./components/stat-block-panel";
-import { Toast } from "./components/toast";
-import { TurnNavigation } from "./components/turn-navigation";
-import { type SearchResult, useBestiary } from "./hooks/use-bestiary";
-import { useBulkImport } from "./hooks/use-bulk-import";
-import { useEncounter } from "./hooks/use-encounter";
-import { usePlayerCharacters } from "./hooks/use-player-characters";
-
-function rollDice(): number {
-	return Math.floor(Math.random() * 20) + 1;
-}
-
-function useActionBarAnimation(combatantCount: number) {
-	const wasEmptyRef = useRef(combatantCount === 0);
-	const [settling, setSettling] = useState(false);
-	const [rising, setRising] = useState(false);
-	const [topBarExiting, setTopBarExiting] = useState(false);
-
-	useLayoutEffect(() => {
-		const nowEmpty = combatantCount === 0;
-		if (wasEmptyRef.current && !nowEmpty) {
-			setSettling(true);
-		} else if (!wasEmptyRef.current && nowEmpty) {
-			setRising(true);
-			setTopBarExiting(true);
-		}
-		wasEmptyRef.current = nowEmpty;
-	}, [combatantCount]);
-
-	const empty = combatantCount === 0;
-	const risingClass = rising ? " animate-rise-to-center" : "";
-	const settlingClass = settling ? " animate-settle-to-bottom" : "";
-	const topBarClass = settling
-		? " animate-slide-down-in"
-		: topBarExiting
-			? " absolute inset-x-0 top-0 z-10 px-4 animate-slide-up-out"
-			: "";
-	const showTopBar = !empty || topBarExiting;
-
-	return {
-		risingClass,
-		settlingClass,
-		topBarClass,
-		showTopBar,
-		onSettleEnd: () => setSettling(false),
-		onRiseEnd: () => setRising(false),
-		onTopBarExitEnd: () => setTopBarExiting(false),
-	};
-}
 
 export function App() {
-	const {
+	const { encounter, isEmpty } = useEncounterContext();
-		encounter,
+	const sidePanel = useSidePanelContext();
-		advanceTurn,
+	const rolls = useInitiativeRollsContext();
-		retreatTurn,
-		addCombatant,
-		clearEncounter,
-		removeCombatant,
-		editCombatant,
-		setInitiative,
-		setHp,
-		adjustHp,
-		setAc,
-		toggleCondition,
-		toggleConcentration,
-		addFromBestiary,
-		addFromPlayerCharacter,
-		makeStore,
-	} = useEncounter();
 
-	const {
+	useAutoStatBlock();
-		characters: playerCharacters,
-		createCharacter: createPlayerCharacter,
-		editCharacter: editPlayerCharacter,
-		deleteCharacter: deletePlayerCharacter,
-	} = usePlayerCharacters();
-
-	const [createPlayerOpen, setCreatePlayerOpen] = useState(false);
-	const [managementOpen, setManagementOpen] = useState(false);
-	const [editingPlayer, setEditingPlayer] = useState<
-		(typeof playerCharacters)[number] | undefined
-	>(undefined);
-
-	const {
-		search,
-		getCreature,
-		isLoaded,
-		isSourceCached,
-		fetchAndCacheSource,
-		uploadAndCacheSource,
-		refreshCache,
-	} = useBestiary();
-
-	const bulkImport = useBulkImport();
-
-	const [selectedCreatureId, setSelectedCreatureId] =
-		useState<CreatureId | null>(null);
-	const [bulkImportMode, setBulkImportMode] = useState(false);
-	const [sourceManagerOpen, setSourceManagerOpen] = useState(false);
-	const [isRightPanelFolded, setIsRightPanelFolded] = useState(false);
-	const [pinnedCreatureId, setPinnedCreatureId] = useState<CreatureId | null>(
-		null,
-	);
-	const [isWideDesktop, setIsWideDesktop] = useState(
-		() => window.matchMedia("(min-width: 1280px)").matches,
-	);
-
-	useEffect(() => {
-		const mq = window.matchMedia("(min-width: 1280px)");
-		const handler = (e: MediaQueryListEvent) => setIsWideDesktop(e.matches);
-		mq.addEventListener("change", handler);
-		return () => mq.removeEventListener("change", handler);
-	}, []);
-
-	const selectedCreature: Creature | null = selectedCreatureId
-		? (getCreature(selectedCreatureId) ?? null)
-		: null;
-
-	const pinnedCreature: Creature | null = pinnedCreatureId
-		? (getCreature(pinnedCreatureId) ?? null)
-		: null;
-
-	const handleAddFromBestiary = useCallback(
-		(result: SearchResult) => {
-			addFromBestiary(result);
-		},
-		[addFromBestiary],
-	);
-
-	const handleCombatantStatBlock = useCallback((creatureId: string) => {
-		setSelectedCreatureId(creatureId as CreatureId);
-		setIsRightPanelFolded(false);
-	}, []);
-
-	const handleRollInitiative = useCallback(
-		(id: CombatantId) => {
-			rollInitiativeUseCase(makeStore(), id, rollDice(), getCreature);
-		},
-		[makeStore, getCreature],
-	);
-
-	const handleRollAllInitiative = useCallback(() => {
-		rollAllInitiativeUseCase(makeStore(), rollDice, getCreature);
-	}, [makeStore, getCreature]);
-
-	const handleViewStatBlock = useCallback((result: SearchResult) => {
-		const slug = result.name
-			.toLowerCase()
-			.replace(/[^a-z0-9]+/g, "-")
-			.replace(/(^-|-$)/g, "");
-		const cId = `${result.source.toLowerCase()}:${slug}` as CreatureId;
-		setSelectedCreatureId(cId);
-		setIsRightPanelFolded(false);
-	}, []);
-
-	const handleBulkImport = useCallback(() => {
-		setBulkImportMode(true);
-		setSelectedCreatureId(null);
-	}, []);
-
-	const handleStartBulkImport = useCallback(
-		(baseUrl: string) => {
-			bulkImport.startImport(
-				baseUrl,
-				fetchAndCacheSource,
-				isSourceCached,
-				refreshCache,
-			);
-		},
-		[bulkImport.startImport, fetchAndCacheSource, isSourceCached, refreshCache],
-	);
-
-	const handleBulkImportDone = useCallback(() => {
-		setBulkImportMode(false);
-		bulkImport.reset();
-	}, [bulkImport.reset]);
-
-	const handleDismissBrowsePanel = useCallback(() => {
-		setSelectedCreatureId(null);
-		setBulkImportMode(false);
-	}, []);
-
-	const handleToggleFold = useCallback(() => {
-		setIsRightPanelFolded((f) => !f);
-	}, []);
-
-	const handlePin = useCallback(() => {
-		if (selectedCreatureId) {
-			setPinnedCreatureId((prev) =>
-				prev === selectedCreatureId ? null : selectedCreatureId,
-			);
-		}
-	}, [selectedCreatureId]);
-
-	const handleUnpin = useCallback(() => {
-		setPinnedCreatureId(null);
-	}, []);
 
+	const playerCharacterRef = useRef<PlayerCharacterSectionHandle>(null);
 	const actionBarInputRef = useRef<HTMLInputElement>(null);
+	const activeRowRef = useRef<HTMLDivElement>(null);
 	const actionBarAnim = useActionBarAnimation(encounter.combatants.length);
 
-	// Auto-scroll to the active combatant when the turn changes
+	// Auto-scroll to active combatant when turn changes
-	const activeRowRef = useRef<HTMLDivElement>(null);
+	const activeIndex = encounter.activeIndex;
 	useEffect(() => {
+		if (activeIndex >= 0) {
 			activeRowRef.current?.scrollIntoView({
 				block: "nearest",
 				behavior: "smooth",
 			});
-	}, [encounter.activeIndex]);
+		}
-
+	}, [activeIndex]);
-	// Auto-show stat block for the active combatant when turn changes,
-	// but only when the viewport is wide enough to show it alongside the tracker.
-	// Only react to activeIndex changes — not combatant reordering (e.g. Roll All).
-	const prevActiveIndexRef = useRef(encounter.activeIndex);
-	useEffect(() => {
-		if (prevActiveIndexRef.current === encounter.activeIndex) return;
-		prevActiveIndexRef.current = encounter.activeIndex;
-		if (!window.matchMedia("(min-width: 1024px)").matches) return;
-		const active = encounter.combatants[encounter.activeIndex];
-		if (!active?.creatureId || !isLoaded) return;
-		setSelectedCreatureId(active.creatureId as CreatureId);
-	}, [encounter.activeIndex, encounter.combatants, isLoaded]);
-
-	const isEmpty = encounter.combatants.length === 0;
-	const showRollAllInitiative = encounter.combatants.some(
-		(c) => c.creatureId != null && c.initiative == null,
-	);
 
 	return (
-		<div className="flex h-screen flex-col">
+		<div className="flex h-dvh flex-col">
-			<div className="relative mx-auto flex w-full max-w-2xl flex-1 flex-col gap-3 px-4 min-h-0">
+			<div className="relative mx-auto flex min-h-0 w-full max-w-2xl flex-1 flex-col gap-3 px-4">
-				{actionBarAnim.showTopBar && (
+				{!!actionBarAnim.showTopBar && (
 					<div
-						className={`shrink-0 pt-8${actionBarAnim.topBarClass}`}
+						className={cn("shrink-0 pt-8", actionBarAnim.topBarClass)}
 						onAnimationEnd={actionBarAnim.onTopBarExitEnd}
 					>
-						<TurnNavigation
+						<TurnNavigation />
-							encounter={encounter}
-							onAdvanceTurn={advanceTurn}
-							onRetreatTurn={retreatTurn}
-							onClearEncounter={clearEncounter}
-						/>
 					</div>
 				)}
 
 				{isEmpty ? (
-					/* Empty state — ActionBar centered */
+					<div className="flex min-h-0 flex-1 items-center justify-center pt-8 pb-[15%]">
-					<div className="flex flex-1 items-center justify-center min-h-0 pb-[15%] pt-8">
 						<div
-							className={`w-full${actionBarAnim.risingClass}`}
+							className={cn("w-full", actionBarAnim.risingClass)}
 							onAnimationEnd={actionBarAnim.onRiseEnd}
 						>
 							<ActionBar
-								onAddCombatant={addCombatant}
-								onAddFromBestiary={handleAddFromBestiary}
-								bestiarySearch={search}
-								bestiaryLoaded={isLoaded}
-								onViewStatBlock={handleViewStatBlock}
-								onBulkImport={handleBulkImport}
-								bulkImportDisabled={bulkImport.state.status === "loading"}
 								inputRef={actionBarInputRef}
-								playerCharacters={playerCharacters}
+								onManagePlayers={() =>
-								onAddFromPlayerCharacter={addFromPlayerCharacter}
+									playerCharacterRef.current?.openManagement()
-								onManagePlayers={() => setManagementOpen(true)}
+								}
-								onRollAllInitiative={handleRollAllInitiative}
-								showRollAllInitiative={showRollAllInitiative}
-								onOpenSourceManager={() => setSourceManagerOpen((o) => !o)}
 								autoFocus
 							/>
 						</div>
 					</div>
 				) : (
 					<>
-						{sourceManagerOpen && (
+						<div className="min-h-0 flex-1 overflow-y-auto">
-							<div className="shrink-0 rounded-md border border-border bg-card px-4 py-3">
-								<SourceManager onCacheCleared={refreshCache} />
-							</div>
-						)}
-
-						{/* Scrollable area — combatant list */}
-						<div className="flex-1 overflow-y-auto min-h-0">
 							<div className="flex flex-col px-2 py-2">
 								{encounter.combatants.map((c, i) => (
 									<CombatantRow
@@ -303,160 +76,51 @@ export function App() {
 										ref={i === encounter.activeIndex ? activeRowRef : null}
 										combatant={c}
 										isActive={i === encounter.activeIndex}
-										onRename={editCombatant}
-										onSetInitiative={setInitiative}
-										onRemove={removeCombatant}
-										onSetHp={setHp}
-										onAdjustHp={adjustHp}
-										onSetAc={setAc}
-										onToggleCondition={toggleCondition}
-										onToggleConcentration={toggleConcentration}
-										onShowStatBlock={
-											c.creatureId
-												? () => handleCombatantStatBlock(c.creatureId as string)
-												: undefined
-										}
-										onRollInitiative={
-											c.creatureId ? handleRollInitiative : undefined
-										}
 									/>
 								))}
 							</div>
 						</div>
 
-						{/* Action Bar — fixed at bottom */}
 						<div
-							className={`shrink-0 pb-8${actionBarAnim.settlingClass}`}
+							className={cn("shrink-0 pb-8", actionBarAnim.settlingClass)}
 							onAnimationEnd={actionBarAnim.onSettleEnd}
 						>
 							<ActionBar
-								onAddCombatant={addCombatant}
-								onAddFromBestiary={handleAddFromBestiary}
-								bestiarySearch={search}
-								bestiaryLoaded={isLoaded}
-								onViewStatBlock={handleViewStatBlock}
-								onBulkImport={handleBulkImport}
-								bulkImportDisabled={bulkImport.state.status === "loading"}
 								inputRef={actionBarInputRef}
-								playerCharacters={playerCharacters}
+								onManagePlayers={() =>
-								onAddFromPlayerCharacter={addFromPlayerCharacter}
+									playerCharacterRef.current?.openManagement()
-								onManagePlayers={() => setManagementOpen(true)}
+								}
-								onRollAllInitiative={handleRollAllInitiative}
-								showRollAllInitiative={showRollAllInitiative}
-								onOpenSourceManager={() => setSourceManagerOpen((o) => !o)}
 							/>
 						</div>
 					</>
 				)}
 			</div>
 
-			{/* Pinned Stat Block Panel (left) */}
+			{!!sidePanel.pinnedCreatureId && sidePanel.isWideDesktop && (
-			{pinnedCreatureId && isWideDesktop && (
+				<StatBlockPanel panelRole="pinned" side="left" />
-				<StatBlockPanel
-					creatureId={pinnedCreatureId}
-					creature={pinnedCreature}
-					isSourceCached={isSourceCached}
-					fetchAndCacheSource={fetchAndCacheSource}
-					uploadAndCacheSource={uploadAndCacheSource}
-					refreshCache={refreshCache}
-					panelRole="pinned"
-					isFolded={false}
-					onToggleFold={() => {}}
-					onPin={() => {}}
-					onUnpin={handleUnpin}
-					showPinButton={false}
-					side="left"
-					onDismiss={() => {}}
-				/>
 			)}
 
-			{/* Browse Stat Block Panel (right) */}
+			<StatBlockPanel panelRole="browse" side="right" />
-			<StatBlockPanel
-				creatureId={selectedCreatureId}
-				creature={selectedCreature}
-				isSourceCached={isSourceCached}
-				fetchAndCacheSource={fetchAndCacheSource}
-				uploadAndCacheSource={uploadAndCacheSource}
-				refreshCache={refreshCache}
-				panelRole="browse"
-				isFolded={isRightPanelFolded}
-				onToggleFold={handleToggleFold}
-				onPin={handlePin}
-				onUnpin={() => {}}
-				showPinButton={isWideDesktop && !!selectedCreature}
-				side="right"
-				onDismiss={handleDismissBrowsePanel}
-				bulkImportMode={bulkImportMode}
-				bulkImportState={bulkImport.state}
-				onStartBulkImport={handleStartBulkImport}
-				onBulkImportDone={handleBulkImportDone}
-			/>
 
-			{/* Toast for bulk import progress when panel is closed */}
+			<BulkImportToasts />
-			{bulkImport.state.status === "loading" && !bulkImportMode && (
+
+			{rolls.rollSkippedCount > 0 && (
 				<Toast
-					message={`Loading sources... ${bulkImport.state.completed + bulkImport.state.failed}/${bulkImport.state.total}`}
+					message={`${rolls.rollSkippedCount} skipped — bestiary source not loaded`}
-					progress={
+					onDismiss={rolls.dismissRollSkipped}
-						bulkImport.state.total > 0
+					autoDismissMs={4000}
-							? (bulkImport.state.completed + bulkImport.state.failed) /
-								bulkImport.state.total
-							: 0
-					}
-					onDismiss={() => {}}
-				/>
-			)}
-			{bulkImport.state.status === "complete" && !bulkImportMode && (
-				<Toast
-					message="All sources loaded"
-					onDismiss={bulkImport.reset}
-					autoDismissMs={3000}
-				/>
-			)}
-			{bulkImport.state.status === "partial-failure" && !bulkImportMode && (
-				<Toast
-					message={`Loaded ${bulkImport.state.completed}/${bulkImport.state.total} sources (${bulkImport.state.failed} failed)`}
-					onDismiss={bulkImport.reset}
 				/>
 			)}
 
-			<CreatePlayerModal
+			{!!rolls.rollSingleSkipped && (
-				open={createPlayerOpen}
+				<Toast
-				onClose={() => {
+					message="Can't roll — bestiary source not loaded"
-					setCreatePlayerOpen(false);
+					onDismiss={rolls.dismissRollSingleSkipped}
-					setEditingPlayer(undefined);
+					autoDismissMs={4000}
-				}}
-				onSave={(name, ac, maxHp, color, icon) => {
-					if (editingPlayer) {
-						editPlayerCharacter?.(editingPlayer.id, {
-							name,
-							ac,
-							maxHp,
-							color,
-							icon,
-						});
-					} else {
-						createPlayerCharacter(name, ac, maxHp, color, icon);
-					}
-				}}
-				playerCharacter={editingPlayer}
 				/>
+			)}
 
-			<PlayerManagement
+			<PlayerCharacterSection ref={playerCharacterRef} />
-				open={managementOpen}
-				onClose={() => setManagementOpen(false)}
-				characters={playerCharacters}
-				onEdit={(pc) => {
-					setEditingPlayer(pc);
-					setCreatePlayerOpen(true);
-					setManagementOpen(false);
-				}}
-				onDelete={(id) => deletePlayerCharacter?.(id)}
-				onCreate={() => {
-					setEditingPlayer(undefined);
-					setCreatePlayerOpen(true);
-					setManagementOpen(false);
-				}}
-			/>
 		</div>
 	);
 }

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

@@ -0,0 +1,164 @@
+// @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 { 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", {
+		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(),
+		})),
+	});
+	Element.prototype.scrollIntoView = vi.fn();
+});
+
+afterEach(cleanup);
+
+async function addCombatant(
+	user: ReturnType<typeof userEvent.setup>,
+	name: string,
+	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)!;
+	await user.type(input, name);
+
+	if (opts?.maxHp) {
+		const maxHpInput = screen.getByPlaceholderText("MaxHP");
+		await user.type(maxHpInput, opts.maxHp);
+	}
+
+	const addButton = screen.getByRole("button", { name: "Add" });
+	await user.click(addButton);
+}
+
+describe("App integration", () => {
+	it("adds a combatant and removes it, returning to empty state", async () => {
+		const user = userEvent.setup();
+		render(<App />, { wrapper: AllProviders });
+
+		// Empty state: centered input visible, no TurnNavigation
+		expect(screen.getByPlaceholderText("+ Add combatants")).toBeInTheDocument();
+		expect(screen.queryByText("R1")).not.toBeInTheDocument();
+
+		// Add a combatant
+		await addCombatant(user, "Goblin");
+
+		// Verify combatant appears and TurnNavigation shows
+		expect(screen.getByRole("button", { name: "Goblin" })).toBeInTheDocument();
+		expect(screen.getByText("R1")).toBeInTheDocument();
+		expect(screen.getAllByText("Goblin").length).toBeGreaterThanOrEqual(2);
+
+		// Remove combatant via ConfirmButton (two clicks)
+		const removeBtn = screen.getByRole("button", {
+			name: "Remove combatant",
+		});
+		await user.click(removeBtn);
+		const confirmBtn = screen.getByRole("button", {
+			name: "Confirm remove combatant",
+		});
+		await user.click(confirmBtn);
+
+		// Back to empty state (R1 badge may linger due to exit animation in jsdom)
+		expect(
+			screen.queryByRole("button", { name: "Goblin" }),
+		).not.toBeInTheDocument();
+		expect(screen.getByPlaceholderText("+ Add combatants")).toBeInTheDocument();
+	});
+
+	it("advances and retreats turns across two combatants", async () => {
+		const user = userEvent.setup();
+		render(<App />, { wrapper: AllProviders });
+
+		await addCombatant(user, "Fighter");
+		await addCombatant(user, "Wizard");
+
+		// Initial state — R1, Fighter active (Previous turn disabled)
+		expect(screen.getByText("R1")).toBeInTheDocument();
+		expect(
+			screen.getByRole("button", { name: "Previous turn" }),
+		).toBeDisabled();
+
+		// Advance turn — Wizard becomes active
+		await user.click(screen.getByRole("button", { name: "Next turn" }));
+		expect(screen.getByText("R1")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Previous turn" })).toBeEnabled();
+
+		// Advance again — wraps to R2, Fighter active
+		await user.click(screen.getByRole("button", { name: "Next turn" }));
+		expect(screen.getByText("R2")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Previous turn" })).toBeEnabled();
+
+		// Retreat — back to R1, Wizard active
+		await user.click(screen.getByRole("button", { name: "Previous turn" }));
+		expect(screen.getByText("R1")).toBeInTheDocument();
+	});
+
+	it("adds a combatant with HP, applies damage, and shows unconscious state", async () => {
+		const user = userEvent.setup();
+		render(<App />, { wrapper: AllProviders });
+
+		await addCombatant(user, "Ogre", { maxHp: "59" });
+
+		// Verify HP displays — currentHp and maxHp both show "59"
+		expect(screen.getByText("/")).toBeInTheDocument();
+		const hpButton = screen.getByRole("button", {
+			name: "Current HP: 59 (healthy)",
+		});
+		expect(hpButton).toBeInTheDocument();
+
+		// Click currentHp to open HpAdjustPopover, apply full damage
+		await user.click(hpButton);
+		const hpInput = screen.getByPlaceholderText("HP");
+		expect(hpInput).toBeInTheDocument();
+		await user.type(hpInput, "59");
+		await user.click(screen.getByRole("button", { name: "Apply damage" }));
+
+		// Verify HP decreased to 0 and unconscious state
+		expect(
+			screen.getByRole("button", { name: "Current HP: 0 (unconscious)" }),
+		).toBeInTheDocument();
+	});
+});

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

@@ -200,6 +200,7 @@ describe("ConfirmButton", () => {
 		const parentHandler = vi.fn();
 		render(
 			// biome-ignore lint/a11y/noStaticElementInteractions: test wrapper
+			// biome-ignore lint/a11y/noNoninteractiveElementInteractions: test wrapper
 			<div onKeyDown={parentHandler}>
 				<ConfirmButton
 					icon={<XIcon />}

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

@@ -0,0 +1,317 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+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
+vi.mock("../contexts/side-panel-context.js", () => ({
+	useSidePanelContext: vi.fn(),
+}));
+
+vi.mock("../contexts/bestiary-context.js", () => ({
+	useBestiaryContext: vi.fn(),
+}));
+
+// Mock adapters to avoid IndexedDB
+vi.mock("../adapters/bestiary-index-adapter.js", () => ({
+	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 { useSidePanelContext } from "../contexts/side-panel-context.js";
+
+const mockUseSidePanelContext = vi.mocked(useSidePanelContext);
+const mockUseBestiaryContext = vi.mocked(useBestiaryContext);
+
+const CLOSE_REGEX = /close/i;
+const COLLAPSE_REGEX = /collapse/i;
+const CREATURE_ID = "srd:goblin" as CreatureId;
+const CREATURE: Creature = {
+	id: CREATURE_ID,
+	name: "Goblin",
+	source: "SRD",
+	sourceDisplayName: "SRD",
+	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,
+};
+
+function mockMatchMedia(matches: boolean) {
+	Object.defineProperty(globalThis, "matchMedia", {
+		writable: true,
+		value: vi.fn().mockImplementation((query: string) => ({
+			matches,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+		})),
+	});
+}
+
+interface PanelOverrides {
+	creatureId?: CreatureId | null;
+	creature?: Creature | null;
+	panelRole?: "browse" | "pinned";
+	isCollapsed?: boolean;
+	side?: "left" | "right";
+	bulkImportMode?: boolean;
+}
+
+function setupMocks(overrides: PanelOverrides = {}) {
+	const panelRole = overrides.panelRole ?? "browse";
+	const creatureId = overrides.creatureId ?? CREATURE_ID;
+	const creature = overrides.creature ?? CREATURE;
+	const isCollapsed = overrides.isCollapsed ?? false;
+
+	const onToggleCollapse = vi.fn();
+	const onPin = vi.fn();
+	const onUnpin = vi.fn();
+	const onDismiss = vi.fn();
+
+	mockUseSidePanelContext.mockReturnValue({
+		selectedCreatureId: panelRole === "browse" ? creatureId : null,
+		pinnedCreatureId: panelRole === "pinned" ? creatureId : null,
+		isRightPanelCollapsed: panelRole === "browse" ? isCollapsed : false,
+		isWideDesktop: false,
+		bulkImportMode: overrides.bulkImportMode ?? false,
+		sourceManagerMode: false,
+		panelView: creatureId
+			? { mode: "creature" as const, creatureId }
+			: { mode: "closed" as const },
+		showCreature: vi.fn(),
+		updateCreature: vi.fn(),
+		showBulkImport: vi.fn(),
+		showSourceManager: vi.fn(),
+		dismissPanel: onDismiss,
+		toggleCollapse: onToggleCollapse,
+		togglePin: onPin,
+		unpin: onUnpin,
+	} as ReturnType<typeof useSidePanelContext>);
+
+	mockUseBestiaryContext.mockReturnValue({
+		getCreature: (id: CreatureId) => (id === creatureId ? creature : undefined),
+		isSourceCached: vi.fn().mockResolvedValue(true),
+		search: vi.fn().mockReturnValue([]),
+		isLoaded: true,
+		fetchAndCacheSource: vi.fn(),
+		uploadAndCacheSource: vi.fn(),
+		refreshCache: vi.fn(),
+	} as ReturnType<typeof useBestiaryContext>);
+
+	return { onToggleCollapse, onPin, onUnpin, onDismiss };
+}
+
+function renderPanel(overrides: PanelOverrides = {}) {
+	const callbacks = setupMocks(overrides);
+	const panelRole = overrides.panelRole ?? "browse";
+	const side = overrides.side ?? (panelRole === "pinned" ? "left" : "right");
+	render(<StatBlockPanel panelRole={panelRole} side={side} />);
+	return callbacks;
+}
+
+describe("Stat Block Panel Collapse/Expand and Pin", () => {
+	beforeEach(() => {
+		mockMatchMedia(true); // desktop by default
+	});
+
+	afterEach(cleanup);
+
+	describe("US1: Collapse and Expand", () => {
+		it("shows collapse button instead of close button on desktop", () => {
+			renderPanel();
+			expect(
+				screen.getByRole("button", { name: "Collapse stat block panel" }),
+			).toBeInTheDocument();
+			expect(
+				screen.queryByRole("button", { name: CLOSE_REGEX }),
+			).not.toBeInTheDocument();
+		});
+
+		it("does not show 'Stat Block' heading", () => {
+			renderPanel();
+			expect(screen.queryByText("Stat Block")).not.toBeInTheDocument();
+		});
+
+		it("renders collapsed tab with creature name when isCollapsed is true", () => {
+			renderPanel({ isCollapsed: true });
+			expect(screen.getByText("Goblin")).toBeInTheDocument();
+			expect(
+				screen.getByRole("button", { name: "Expand stat block panel" }),
+			).toBeInTheDocument();
+		});
+
+		it("calls onToggleCollapse when collapse button is clicked", () => {
+			const callbacks = renderPanel();
+			fireEvent.click(
+				screen.getByRole("button", { name: "Collapse stat block panel" }),
+			);
+			expect(callbacks.onToggleCollapse).toHaveBeenCalledTimes(1);
+		});
+
+		it("calls onToggleCollapse when collapsed tab is clicked", () => {
+			const callbacks = renderPanel({ isCollapsed: true });
+			fireEvent.click(
+				screen.getByRole("button", { name: "Expand stat block panel" }),
+			);
+			expect(callbacks.onToggleCollapse).toHaveBeenCalledTimes(1);
+		});
+
+		it("applies translate-x class when collapsed (right side)", () => {
+			renderPanel({ isCollapsed: true, side: "right" });
+			const panel = screen
+				.getByRole("button", { name: "Expand stat block panel" })
+				.closest("div");
+			expect(panel?.className).toContain("translate-x-[calc(100%-40px)]");
+		});
+
+		it("applies translate-x-0 when expanded", () => {
+			renderPanel({ isCollapsed: false });
+			const foldBtn = screen.getByRole("button", {
+				name: "Collapse stat block panel",
+			});
+			const panel = foldBtn.closest("div.fixed") as HTMLElement;
+			expect(panel?.className).toContain("translate-x-0");
+		});
+	});
+
+	describe("US1: Mobile behavior", () => {
+		beforeEach(() => {
+			mockMatchMedia(false); // mobile
+		});
+
+		it("shows collapse button instead of X close button on mobile drawer", () => {
+			renderPanel();
+			expect(
+				screen.getByRole("button", { name: "Collapse stat block panel" }),
+			).toBeInTheDocument();
+			// No X close icon button — only backdrop dismiss and collapse toggle
+			const buttons = screen.getAllByRole("button");
+			const buttonLabels = buttons.map((b) => b.getAttribute("aria-label"));
+			expect(buttonLabels).not.toContain("Close");
+		});
+
+		it("calls onDismiss when backdrop is clicked on mobile", () => {
+			const callbacks = renderPanel();
+			fireEvent.click(screen.getByRole("button", { name: "Close stat block" }));
+			expect(callbacks.onDismiss).toHaveBeenCalledTimes(1);
+		});
+
+		it("does not render pinned panel on mobile", () => {
+			const { container } = render(
+				(() => {
+					setupMocks({ panelRole: "pinned" });
+					return <StatBlockPanel panelRole="pinned" side="left" />;
+				})(),
+			);
+			expect(container.innerHTML).toBe("");
+		});
+	});
+
+	describe("US2: Pin and Unpin", () => {
+		it("shows pin button when isWideDesktop is true on desktop", () => {
+			setupMocks();
+			// Override to set isWideDesktop
+			const ctx = mockUseSidePanelContext.mock.results[0]?.value as ReturnType<
+				typeof useSidePanelContext
+			>;
+			mockUseSidePanelContext.mockReturnValue({
+				...ctx,
+				isWideDesktop: true,
+			});
+			render(<StatBlockPanel panelRole="browse" side="right" />);
+			expect(
+				screen.getByRole("button", { name: "Pin creature" }),
+			).toBeInTheDocument();
+		});
+
+		it("hides pin button when isWideDesktop is false", () => {
+			renderPanel();
+			expect(
+				screen.queryByRole("button", { name: "Pin creature" }),
+			).not.toBeInTheDocument();
+		});
+
+		it("calls onPin when pin button is clicked", () => {
+			setupMocks();
+			const ctx = mockUseSidePanelContext.mock.results[0]?.value as ReturnType<
+				typeof useSidePanelContext
+			>;
+			mockUseSidePanelContext.mockReturnValue({
+				...ctx,
+				isWideDesktop: true,
+			});
+			render(<StatBlockPanel panelRole="browse" side="right" />);
+			fireEvent.click(screen.getByRole("button", { name: "Pin creature" }));
+			expect(ctx.togglePin).toHaveBeenCalledTimes(1);
+		});
+
+		it("shows unpin button for pinned role", () => {
+			renderPanel({ panelRole: "pinned", side: "left" });
+			expect(
+				screen.getByRole("button", { name: "Unpin creature" }),
+			).toBeInTheDocument();
+		});
+
+		it("calls onUnpin when unpin button is clicked", () => {
+			const callbacks = renderPanel({ panelRole: "pinned", side: "left" });
+			fireEvent.click(screen.getByRole("button", { name: "Unpin creature" }));
+			expect(callbacks.onUnpin).toHaveBeenCalledTimes(1);
+		});
+
+		it("positions pinned panel on the left side", () => {
+			renderPanel({ panelRole: "pinned", side: "left" });
+			const unpinBtn = screen.getByRole("button", {
+				name: "Unpin creature",
+			});
+			const panel = unpinBtn.closest("div.fixed") as HTMLElement;
+			expect(panel?.className).toContain("left-0");
+			expect(panel?.className).toContain("border-r");
+		});
+
+		it("positions browse panel on the right side", () => {
+			renderPanel({ panelRole: "browse", side: "right" });
+			const foldBtn = screen.getByRole("button", {
+				name: "Collapse stat block panel",
+			});
+			const panel = foldBtn.closest("div.fixed") as HTMLElement;
+			expect(panel?.className).toContain("right-0");
+			expect(panel?.className).toContain("border-l");
+		});
+	});
+
+	describe("US3: Collapse independence with pinned panel", () => {
+		it("pinned panel has no collapse button", () => {
+			renderPanel({ panelRole: "pinned", side: "left" });
+			expect(
+				screen.queryByRole("button", { name: COLLAPSE_REGEX }),
+			).not.toBeInTheDocument();
+		});
+
+		it("pinned panel is always expanded (no translate offset)", () => {
+			renderPanel({ panelRole: "pinned", side: "left" });
+			const unpinBtn = screen.getByRole("button", {
+				name: "Unpin creature",
+			});
+			const panel = unpinBtn.closest("div.fixed") as HTMLElement;
+			expect(panel?.className).toContain("translate-x-0");
+		});
+	});
+});

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

@@ -1,263 +0,0 @@
-// @vitest-environment jsdom
-import "@testing-library/jest-dom/vitest";
-
-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";
-import { StatBlockPanel } from "../components/stat-block-panel";
-
-const CREATURE_ID = "srd:goblin" as CreatureId;
-const CREATURE: Creature = {
-	id: CREATURE_ID,
-	name: "Goblin",
-	source: "SRD",
-	sourceDisplayName: "SRD",
-	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,
-};
-
-function mockMatchMedia(matches: boolean) {
-	Object.defineProperty(window, "matchMedia", {
-		writable: true,
-		value: vi.fn().mockImplementation((query: string) => ({
-			matches,
-			media: query,
-			onchange: null,
-			addListener: vi.fn(),
-			removeListener: vi.fn(),
-			addEventListener: vi.fn(),
-			removeEventListener: vi.fn(),
-			dispatchEvent: vi.fn(),
-		})),
-	});
-}
-
-interface PanelProps {
-	creatureId?: CreatureId | null;
-	creature?: Creature | null;
-	panelRole?: "browse" | "pinned";
-	isFolded?: boolean;
-	onToggleFold?: () => void;
-	onPin?: () => void;
-	onUnpin?: () => void;
-	showPinButton?: boolean;
-	side?: "left" | "right";
-	onDismiss?: () => void;
-	bulkImportMode?: boolean;
-}
-
-function renderPanel(overrides: PanelProps = {}) {
-	const props = {
-		creatureId: CREATURE_ID,
-		creature: CREATURE,
-		isSourceCached: vi.fn().mockResolvedValue(true),
-		fetchAndCacheSource: vi.fn(),
-		uploadAndCacheSource: vi.fn(),
-		refreshCache: vi.fn(),
-		panelRole: "browse" as const,
-		isFolded: false,
-		onToggleFold: vi.fn(),
-		onPin: vi.fn(),
-		onUnpin: vi.fn(),
-		showPinButton: false,
-		side: "right" as const,
-		onDismiss: vi.fn(),
-		...overrides,
-	};
-
-	render(<StatBlockPanel {...props} />);
-	return props;
-}
-
-describe("Stat Block Panel Fold/Unfold and Pin", () => {
-	beforeEach(() => {
-		mockMatchMedia(true); // desktop by default
-	});
-
-	afterEach(cleanup);
-
-	describe("US1: Fold and Unfold", () => {
-		it("shows fold button instead of close button on desktop", () => {
-			renderPanel();
-			expect(
-				screen.getByRole("button", { name: "Fold stat block panel" }),
-			).toBeInTheDocument();
-			expect(
-				screen.queryByRole("button", { name: /close/i }),
-			).not.toBeInTheDocument();
-		});
-
-		it("does not show 'Stat Block' heading", () => {
-			renderPanel();
-			expect(screen.queryByText("Stat Block")).not.toBeInTheDocument();
-		});
-
-		it("renders folded tab with creature name when isFolded is true", () => {
-			renderPanel({ isFolded: true });
-			expect(screen.getByText("Goblin")).toBeInTheDocument();
-			expect(
-				screen.getByRole("button", { name: "Unfold stat block panel" }),
-			).toBeInTheDocument();
-		});
-
-		it("calls onToggleFold when fold button is clicked", () => {
-			const props = renderPanel();
-			fireEvent.click(
-				screen.getByRole("button", { name: "Fold stat block panel" }),
-			);
-			expect(props.onToggleFold).toHaveBeenCalledTimes(1);
-		});
-
-		it("calls onToggleFold when folded tab is clicked", () => {
-			const props = renderPanel({ isFolded: true });
-			fireEvent.click(
-				screen.getByRole("button", { name: "Unfold stat block panel" }),
-			);
-			expect(props.onToggleFold).toHaveBeenCalledTimes(1);
-		});
-
-		it("applies translate-x class when folded (right side)", () => {
-			renderPanel({ isFolded: true, side: "right" });
-			const panel = screen
-				.getByRole("button", { name: "Unfold stat block panel" })
-				.closest("div");
-			expect(panel?.className).toContain("translate-x-[calc(100%-40px)]");
-		});
-
-		it("applies translate-x-0 when expanded", () => {
-			renderPanel({ isFolded: false });
-			const foldBtn = screen.getByRole("button", {
-				name: "Fold stat block panel",
-			});
-			const panel = foldBtn.closest("div.fixed") as HTMLElement;
-			expect(panel?.className).toContain("translate-x-0");
-		});
-	});
-
-	describe("US1: Mobile behavior", () => {
-		beforeEach(() => {
-			mockMatchMedia(false); // mobile
-		});
-
-		it("shows fold button instead of X close button on mobile drawer", () => {
-			renderPanel();
-			expect(
-				screen.getByRole("button", { name: "Fold stat block panel" }),
-			).toBeInTheDocument();
-			// No X close icon button — only backdrop dismiss and fold toggle
-			const buttons = screen.getAllByRole("button");
-			const buttonLabels = buttons.map((b) => b.getAttribute("aria-label"));
-			expect(buttonLabels).not.toContain("Close");
-		});
-
-		it("calls onDismiss when backdrop is clicked on mobile", () => {
-			const props = renderPanel();
-			fireEvent.click(screen.getByRole("button", { name: "Close stat block" }));
-			expect(props.onDismiss).toHaveBeenCalledTimes(1);
-		});
-
-		it("does not render pinned panel on mobile", () => {
-			const { container } = render(
-				<StatBlockPanel
-					creatureId={CREATURE_ID}
-					creature={CREATURE}
-					isSourceCached={vi.fn().mockResolvedValue(true)}
-					fetchAndCacheSource={vi.fn()}
-					uploadAndCacheSource={vi.fn()}
-					refreshCache={vi.fn()}
-					panelRole="pinned"
-					isFolded={false}
-					onToggleFold={vi.fn()}
-					onPin={vi.fn()}
-					onUnpin={vi.fn()}
-					showPinButton={false}
-					side="left"
-					onDismiss={vi.fn()}
-				/>,
-			);
-			expect(container.innerHTML).toBe("");
-		});
-	});
-
-	describe("US2: Pin and Unpin", () => {
-		it("shows pin button when showPinButton is true on desktop", () => {
-			renderPanel({ showPinButton: true });
-			expect(
-				screen.getByRole("button", { name: "Pin creature" }),
-			).toBeInTheDocument();
-		});
-
-		it("hides pin button when showPinButton is false", () => {
-			renderPanel({ showPinButton: false });
-			expect(
-				screen.queryByRole("button", { name: "Pin creature" }),
-			).not.toBeInTheDocument();
-		});
-
-		it("calls onPin when pin button is clicked", () => {
-			const props = renderPanel({ showPinButton: true });
-			fireEvent.click(screen.getByRole("button", { name: "Pin creature" }));
-			expect(props.onPin).toHaveBeenCalledTimes(1);
-		});
-
-		it("shows unpin button for pinned role", () => {
-			renderPanel({ panelRole: "pinned", side: "left" });
-			expect(
-				screen.getByRole("button", { name: "Unpin creature" }),
-			).toBeInTheDocument();
-		});
-
-		it("calls onUnpin when unpin button is clicked", () => {
-			const props = renderPanel({ panelRole: "pinned", side: "left" });
-			fireEvent.click(screen.getByRole("button", { name: "Unpin creature" }));
-			expect(props.onUnpin).toHaveBeenCalledTimes(1);
-		});
-
-		it("positions pinned panel on the left side", () => {
-			renderPanel({ panelRole: "pinned", side: "left" });
-			const unpinBtn = screen.getByRole("button", {
-				name: "Unpin creature",
-			});
-			const panel = unpinBtn.closest("div.fixed") as HTMLElement;
-			expect(panel?.className).toContain("left-0");
-			expect(panel?.className).toContain("border-r");
-		});
-
-		it("positions browse panel on the right side", () => {
-			renderPanel({ panelRole: "browse", side: "right" });
-			const foldBtn = screen.getByRole("button", {
-				name: "Fold stat block panel",
-			});
-			const panel = foldBtn.closest("div.fixed") as HTMLElement;
-			expect(panel?.className).toContain("right-0");
-			expect(panel?.className).toContain("border-l");
-		});
-	});
-
-	describe("US3: Fold independence with pinned panel", () => {
-		it("pinned panel has no fold button", () => {
-			renderPanel({ panelRole: "pinned", side: "left" });
-			expect(
-				screen.queryByRole("button", { name: /fold/i }),
-			).not.toBeInTheDocument();
-		});
-
-		it("pinned panel is always expanded (no translate offset)", () => {
-			renderPanel({ panelRole: "pinned", side: "left", isFolded: false });
-			const unpinBtn = screen.getByRole("button", {
-				name: "Unpin creature",
-			});
-			const panel = unpinBtn.closest("div.fixed") as HTMLElement;
-			expect(panel?.className).toContain("translate-x-0");
-		});
-	});
-});

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import {
+	BestiaryProvider,
+	BulkImportProvider,
+	EncounterProvider,
+	InitiativeRollsProvider,
+	PlayerCharactersProvider,
+	SidePanelProvider,
+	ThemeProvider,
+} from "../contexts/index.js";
+
+export function AllProviders({ children }: { children: ReactNode }) {
+	return (
+		<ThemeProvider>
+			<EncounterProvider>
+				<BestiaryProvider>
+					<PlayerCharactersProvider>
+						<BulkImportProvider>
+							<SidePanelProvider>
+								<InitiativeRollsProvider>{children}</InitiativeRollsProvider>
+							</SidePanelProvider>
+						</BulkImportProvider>
+					</PlayerCharactersProvider>
+				</BestiaryProvider>
+			</EncounterProvider>
+		</ThemeProvider>
+	);
+}

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

@@ -30,11 +30,11 @@ describe("stripTags", () => {
 		expect(stripTags("{@hit 5}")).toBe("+5");
 	});
 
-	it("strips {@h} to Hit: ", () => {
+	it("strips {@h} to Hit:", () => {
 		expect(stripTags("{@h}")).toBe("Hit: ");
 	});
 
-	it("strips {@hom} to Hit or Miss: ", () => {
+	it("strips {@hom} to Hit or Miss:", () => {
 		expect(stripTags("{@hom}")).toBe("Hit or Miss: ");
 	});
 

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

@@ -9,6 +9,8 @@ import type {
 import { creatureId, proficiencyBonus } from "@initiative/domain";
 import { stripTags } from "./strip-tags.js";
 
+const LEADING_DIGITS_REGEX = /^(\d+)/;
+
 // --- Raw 5etools types (minimal, for parsing) ---
 
 interface RawMonster {
@@ -49,6 +51,7 @@ interface RawMonster {
 	legendaryHeader?: string[];
 	spellcasting?: RawSpellcasting[];
 	initiative?: { proficiency?: number };
+	_copy?: unknown;
 }
 
 interface RawEntry {
@@ -168,7 +171,7 @@ function extractAc(ac: RawMonster["ac"]): {
 	}
 	if ("special" in first) {
 		// Variable AC (e.g. spell summons) — parse leading number if possible
-		const match = first.special.match(/^(\d+)/);
+		const match = LEADING_DIGITS_REGEX.exec(first.special);
 		return {
 			value: match ? Number(match[1]) : 0,
 			source: first.special,
@@ -371,8 +374,8 @@ function extractCr(cr: string | { cr: string } | undefined): string {
 function makeCreatureId(source: string, name: string): CreatureId {
 	const slug = name
 		.toLowerCase()
-		.replace(/[^a-z0-9]+/g, "-")
+		.replaceAll(/[^a-z0-9]+/g, "-")
-		.replace(/(^-|-$)/g, "");
+		.replaceAll(/(^-|-$)/g, "");
 	return creatureId(`${source.toLowerCase()}:${slug}`);
 }
 
@@ -383,8 +386,7 @@ export function normalizeBestiary(raw: { monster: RawMonster[] }): Creature[] {
 	// Filter out _copy entries (reference another source's monster) and
 	// monsters missing required fields (ac, hp, size, type)
 	const monsters = raw.monster.filter((m) => {
-		// biome-ignore lint/suspicious/noExplicitAny: raw JSON may have _copy field
+		if (m._copy) return false;
-		if ((m as any)._copy) return false;
 		return (
 			Array.isArray(m.ac) &&
 			m.ac.length > 0 &&

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

@@ -25,55 +25,58 @@ export function stripTags(text: string): string {
 	let result = text;
 
 	// {@h} → "Hit: "
-	result = result.replace(/\{@h\}/g, "Hit: ");
+	result = result.replaceAll("{@h}", "Hit: ");
 
 	// {@hom} → "Hit or Miss: "
-	result = result.replace(/\{@hom\}/g, "Hit or Miss: ");
+	result = result.replaceAll("{@hom}", "Hit or Miss: ");
 
 	// {@actTrigger} → "Trigger:"
-	result = result.replace(/\{@actTrigger\}/g, "Trigger:");
+	result = result.replaceAll("{@actTrigger}", "Trigger:");
 
 	// {@actResponse} → "Response:"
-	result = result.replace(/\{@actResponse\}/g, "Response:");
+	result = result.replaceAll("{@actResponse}", "Response:");
 
 	// {@actSaveSuccess} → "Success:"
-	result = result.replace(/\{@actSaveSuccess\}/g, "Success:");
+	result = result.replaceAll("{@actSaveSuccess}", "Success:");
 
 	// {@actSaveSuccessOrFail} → handled below as parameterized
 
 	// {@recharge 5} → "(Recharge 5-6)", {@recharge} → "(Recharge 6)"
-	result = result.replace(/\{@recharge\s+(\d)\}/g, "(Recharge $1-6)");
+	result = result.replaceAll(/\{@recharge\s+(\d)\}/g, "(Recharge $1-6)");
-	result = result.replace(/\{@recharge\}/g, "(Recharge 6)");
+	result = result.replaceAll("{@recharge}", "(Recharge 6)");
 
 	// {@dc N} → "DC N"
-	result = result.replace(/\{@dc\s+(\d+)\}/g, "DC $1");
+	result = result.replaceAll(/\{@dc\s+(\d+)\}/g, "DC $1");
 
 	// {@hit N} → "+N"
-	result = result.replace(/\{@hit\s+(\d+)\}/g, "+$1");
+	result = result.replaceAll(/\{@hit\s+(\d+)\}/g, "+$1");
 
 	// {@atkr type} → mapped attack roll text
-	result = result.replace(/\{@atkr\s+([^}]+)\}/g, (_, type: string) => {
+	result = result.replaceAll(/\{@atkr\s+([^}]+)\}/g, (_, type: string) => {
-		return ATKR_MAP[type.trim()] ?? `Attack Roll:`;
+		return ATKR_MAP[type.trim()] ?? "Attack Roll:";
 	});
 
 	// {@actSave ability} → "Ability saving throw"
-	result = result.replace(/\{@actSave\s+([^}]+)\}/g, (_, ability: string) => {
+	result = result.replaceAll(
+		/\{@actSave\s+([^}]+)\}/g,
+		(_, ability: string) => {
 			const name = ABILITY_MAP[ability.trim().toLowerCase()];
 			return name ? `${name} saving throw` : `${ability} saving throw`;
-	});
+		},
+	);
 
 	// {@actSaveFail} → "Failure:" or {@actSaveFail N} → "Failure by N or More:"
-	result = result.replace(
+	result = result.replaceAll(
 		/\{@actSaveFail\s+(\d+)\}/g,
 		"Failure by $1 or More:",
 	);
-	result = result.replace(/\{@actSaveFail\}/g, "Failure:");
+	result = result.replaceAll("{@actSaveFail}", "Failure:");
 
 	// {@actSaveSuccessOrFail} → keep as-is label
-	result = result.replace(/\{@actSaveSuccessOrFail\}/g, "Success or Failure:");
+	result = result.replaceAll("{@actSaveSuccessOrFail}", "Success or Failure:");
 
 	// {@actSaveFailBy N} → "Failure by N or More:"
-	result = result.replace(
+	result = result.replaceAll(
 		/\{@actSaveFailBy\s+(\d+)\}/g,
 		"Failure by $1 or More:",
 	);
@@ -81,7 +84,7 @@ 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.replace(
+	result = result.replaceAll(
 		/\{@(\w+)\s+([^}]+)\}/g,
 		(_, tag: string, content: string) => {
 			// For tags with Display|Source format, extract first segment

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

@@ -0,0 +1,121 @@
+// @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 { 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", {
+		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 renderBar(props: Partial<Parameters<typeof ActionBar>[0]> = {}) {
+	return render(<ActionBar {...props} />, { wrapper: AllProviders });
+}
+
+describe("ActionBar", () => {
+	it("renders input with placeholder '+ Add combatants'", () => {
+		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");
+		// The Add button appears when name >= 2 chars and no suggestions
+		const addButton = screen.getByRole("button", { name: "Add" });
+		await user.click(addButton);
+		// Input is cleared after adding (context handles the state)
+		expect(input).toHaveValue("");
+	});
+
+	it("submitting with empty name does nothing", async () => {
+		const user = userEvent.setup();
+		renderBar();
+		// Submit the form directly (Enter on empty input)
+		const input = screen.getByPlaceholderText("+ Add combatants");
+		await user.type(input, "{Enter}");
+		// Input stays empty, no error
+		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("does not show roll all initiative button when no creature combatants", () => {
+		renderBar();
+		expect(
+			screen.queryByRole("button", { name: "Roll all initiative" }),
+		).not.toBeInTheDocument();
+	});
+
+	it("shows overflow menu items", () => {
+		renderBar({ onManagePlayers: vi.fn() });
+		// The overflow menu should be present (it contains Player Characters etc.)
+		expect(
+			screen.getByRole("button", { name: "More actions" }),
+		).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,196 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { type CreatureId, combatantId } 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 { AllProviders } from "../../__tests__/test-providers.js";
+import { CombatantRow } from "../combatant-row.js";
+import { PLAYER_COLOR_HEX } from "../player-icon-map.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
+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);
+
+function renderRow(
+	overrides: Partial<{
+		combatant: Parameters<typeof CombatantRow>[0]["combatant"];
+		isActive: boolean;
+	}> = {},
+) {
+	const combatant = overrides.combatant ?? {
+		id: combatantId("1"),
+		name: "Goblin",
+		initiative: 15,
+		maxHp: 10,
+		currentHp: 10,
+		ac: 13,
+	};
+	return render(
+		<CombatantRow
+			combatant={combatant}
+			isActive={overrides.isActive ?? false}
+		/>,
+		{ wrapper: AllProviders },
+	);
+}
+
+describe("CombatantRow", () => {
+	it("renders combatant name", () => {
+		renderRow();
+		expect(screen.getByText("Goblin")).toBeInTheDocument();
+	});
+
+	it("renders initiative value", () => {
+		renderRow();
+		expect(screen.getByText("15")).toBeInTheDocument();
+	});
+
+	it("renders current HP", () => {
+		renderRow({
+			combatant: {
+				id: combatantId("1"),
+				name: "Goblin",
+				maxHp: 10,
+				currentHp: 7,
+			},
+		});
+		expect(screen.getByText("7")).toBeInTheDocument();
+	});
+
+	it("active combatant gets active border styling", () => {
+		const { container } = renderRow({ isActive: true });
+		const row = container.firstElementChild;
+		expect(row?.className).toContain("border-active-row-border");
+	});
+
+	it("unconscious combatant (currentHp === 0) gets dimmed styling", () => {
+		renderRow({
+			combatant: {
+				id: combatantId("1"),
+				name: "Goblin",
+				maxHp: 10,
+				currentHp: 0,
+			},
+		});
+		// The name area should have opacity-50
+		const nameEl = screen.getByText("Goblin");
+		const nameContainer = nameEl.closest(".opacity-50");
+		expect(nameContainer).not.toBeNull();
+	});
+
+	it("shows '--' for current HP when no maxHp is set", () => {
+		renderRow({
+			combatant: {
+				id: combatantId("1"),
+				name: "Goblin",
+			},
+		});
+		expect(screen.getByLabelText("No HP set")).toBeInTheDocument();
+	});
+
+	it("shows concentration icon when isConcentrating is true", () => {
+		renderRow({
+			combatant: {
+				id: combatantId("1"),
+				name: "Goblin",
+				isConcentrating: true,
+			},
+		});
+		const concButton = screen.getByRole("button", {
+			name: "Toggle concentration",
+		});
+		expect(concButton.className).toContain("text-purple-400");
+	});
+
+	it("shows player character icon and color when set", () => {
+		const { container } = renderRow({
+			combatant: {
+				id: combatantId("1"),
+				name: "Aragorn",
+				color: "red",
+				icon: "sword",
+			},
+		});
+		// The icon should be rendered with the player color
+		const svgIcon = container.querySelector("svg[style]");
+		expect(svgIcon).not.toBeNull();
+		expect(svgIcon).toHaveStyle({ color: PLAYER_COLOR_HEX.red });
+	});
+
+	it("remove button removes after confirmation", async () => {
+		const user = userEvent.setup();
+		renderRow();
+		const removeBtn = screen.getByRole("button", {
+			name: "Remove combatant",
+		});
+		// First click enters confirm state
+		await user.click(removeBtn);
+		// Second click confirms
+		const confirmBtn = screen.getByRole("button", {
+			name: "Confirm remove combatant",
+		});
+		await user.click(confirmBtn);
+		// After confirming, the button returns to its initial state
+		expect(
+			screen.queryByRole("button", { name: "Confirm remove combatant" }),
+		).not.toBeInTheDocument();
+	});
+
+	it("shows d20 roll button when initiative is undefined and combatant has creatureId", () => {
+		renderRow({
+			combatant: {
+				id: combatantId("1"),
+				name: "Goblin",
+				creatureId: "srd:goblin" as CreatureId,
+			},
+		});
+		expect(
+			screen.getByRole("button", { name: "Roll initiative" }),
+		).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+
+import { CONDITION_DEFINITIONS, type ConditionId } 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 { ConditionPicker } from "../condition-picker";
+
+afterEach(cleanup);
+
+function renderPicker(
+	overrides: Partial<{
+		activeConditions: readonly ConditionId[];
+		onToggle: (conditionId: ConditionId) => void;
+		onClose: () => void;
+	}> = {},
+) {
+	const onToggle = overrides.onToggle ?? vi.fn();
+	const onClose = overrides.onClose ?? vi.fn();
+	const result = render(
+		<ConditionPicker
+			activeConditions={overrides.activeConditions ?? []}
+			onToggle={onToggle}
+			onClose={onClose}
+		/>,
+	);
+	return { ...result, onToggle, onClose };
+}
+
+describe("ConditionPicker", () => {
+	it("renders all condition definitions from domain", () => {
+		renderPicker();
+		for (const def of CONDITION_DEFINITIONS) {
+			expect(screen.getByText(def.label)).toBeInTheDocument();
+		}
+	});
+
+	it("active conditions are visually distinguished", () => {
+		renderPicker({ activeConditions: ["blinded"] });
+		const blindedButton = screen.getByText("Blinded").closest("button");
+		expect(blindedButton?.className).toContain("bg-card/50");
+	});
+
+	it("clicking a condition calls onToggle with that condition's ID", async () => {
+		const user = userEvent.setup();
+		const { onToggle } = renderPicker();
+		await user.click(screen.getByText("Poisoned"));
+		expect(onToggle).toHaveBeenCalledWith("poisoned");
+	});
+
+	it("non-active conditions render with muted styling", () => {
+		renderPicker({ activeConditions: [] });
+		const label = screen.getByText("Charmed");
+		expect(label.className).toContain("text-muted-foreground");
+	});
+
+	it("active condition labels use foreground color", () => {
+		renderPicker({ activeConditions: ["charmed"] });
+		const label = screen.getByText("Charmed");
+		expect(label.className).toContain("text-foreground");
+	});
+});

apps/web/src/components/__tests__/hp-adjust-popover.test.tsx

@@ -0,0 +1,115 @@
+// @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 { HpAdjustPopover } from "../hp-adjust-popover";
+
+afterEach(cleanup);
+
+function renderPopover(
+	overrides: Partial<{
+		onAdjust: (delta: number) => void;
+		onClose: () => void;
+	}> = {},
+) {
+	const onAdjust = overrides.onAdjust ?? vi.fn();
+	const onClose = overrides.onClose ?? vi.fn();
+	const result = render(
+		<HpAdjustPopover onAdjust={onAdjust} onClose={onClose} />,
+	);
+	return { ...result, onAdjust, onClose };
+}
+
+describe("HpAdjustPopover", () => {
+	it("renders input with placeholder 'HP'", () => {
+		renderPopover();
+		expect(screen.getByPlaceholderText("HP")).toBeInTheDocument();
+	});
+
+	it("damage and heal buttons are disabled when input is empty", () => {
+		renderPopover();
+		expect(screen.getByRole("button", { name: "Apply damage" })).toBeDisabled();
+		expect(
+			screen.getByRole("button", { name: "Apply healing" }),
+		).toBeDisabled();
+	});
+
+	it("damage and heal buttons are disabled when input is '0'", async () => {
+		const user = userEvent.setup();
+		renderPopover();
+		await user.type(screen.getByPlaceholderText("HP"), "0");
+		expect(screen.getByRole("button", { name: "Apply damage" })).toBeDisabled();
+		expect(
+			screen.getByRole("button", { name: "Apply healing" }),
+		).toBeDisabled();
+	});
+
+	it("typing a valid number enables both buttons", async () => {
+		const user = userEvent.setup();
+		renderPopover();
+		await user.type(screen.getByPlaceholderText("HP"), "5");
+		expect(
+			screen.getByRole("button", { name: "Apply damage" }),
+		).not.toBeDisabled();
+		expect(
+			screen.getByRole("button", { name: "Apply healing" }),
+		).not.toBeDisabled();
+	});
+
+	it("clicking damage button calls onAdjust with negative value and onClose", async () => {
+		const user = userEvent.setup();
+		const { onAdjust, onClose } = renderPopover();
+		await user.type(screen.getByPlaceholderText("HP"), "7");
+		await user.click(screen.getByRole("button", { name: "Apply damage" }));
+		expect(onAdjust).toHaveBeenCalledWith(-7);
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("clicking heal button calls onAdjust with positive value and onClose", async () => {
+		const user = userEvent.setup();
+		const { onAdjust, onClose } = renderPopover();
+		await user.type(screen.getByPlaceholderText("HP"), "3");
+		await user.click(screen.getByRole("button", { name: "Apply healing" }));
+		expect(onAdjust).toHaveBeenCalledWith(3);
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("Enter key applies damage (negative)", async () => {
+		const user = userEvent.setup();
+		const { onAdjust, onClose } = renderPopover();
+		const input = screen.getByPlaceholderText("HP");
+		await user.type(input, "4");
+		await user.keyboard("{Enter}");
+		expect(onAdjust).toHaveBeenCalledWith(-4);
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("Shift+Enter applies healing (positive)", async () => {
+		const user = userEvent.setup();
+		const { onAdjust, onClose } = renderPopover();
+		const input = screen.getByPlaceholderText("HP");
+		await user.type(input, "6");
+		await user.keyboard("{Shift>}{Enter}{/Shift}");
+		expect(onAdjust).toHaveBeenCalledWith(6);
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("Escape key calls onClose", async () => {
+		const user = userEvent.setup();
+		const { onClose } = renderPopover();
+		const input = screen.getByPlaceholderText("HP");
+		await user.type(input, "2");
+		await user.keyboard("{Escape}");
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("only accepts digit characters in input", async () => {
+		const user = userEvent.setup();
+		renderPopover();
+		const input = screen.getByPlaceholderText("HP");
+		await user.type(input, "12abc34");
+		expect(input).toHaveValue("1234");
+	});
+});

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

@@ -0,0 +1,150 @@
+// @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";
+
+vi.mock("../../adapters/bestiary-cache.js", () => ({
+	getCachedSources: vi.fn(),
+	clearSource: vi.fn(),
+	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);
+const mockClearSource = vi.mocked(bestiaryCache.clearSource);
+const mockClearAll = vi.mocked(bestiaryCache.clearAll);
+const mockUseBestiaryContext = vi.mocked(useBestiaryContext);
+
+afterEach(() => {
+	cleanup();
+	vi.clearAllMocks();
+});
+
+function setupMockContext() {
+	const refreshCache = vi.fn().mockResolvedValue(undefined);
+	mockUseBestiaryContext.mockReturnValue({
+		refreshCache,
+		search: vi.fn().mockReturnValue([]),
+		getCreature: vi.fn(),
+		isLoaded: true,
+		isSourceCached: vi.fn().mockResolvedValue(false),
+		fetchAndCacheSource: vi.fn(),
+		uploadAndCacheSource: vi.fn(),
+	} as ReturnType<typeof useBestiaryContext>);
+	return { refreshCache };
+}
+
+describe("SourceManager", () => {
+	it("shows 'No cached sources' empty state when no sources", async () => {
+		setupMockContext();
+		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();
+		mockGetCachedSources.mockResolvedValue([
+			{
+				sourceCode: "mm",
+				displayName: "Monster Manual",
+				creatureCount: 300,
+				cachedAt: Date.now(),
+			},
+			{
+				sourceCode: "vgm",
+				displayName: "Volo's Guide",
+				creatureCount: 100,
+				cachedAt: Date.now(),
+			},
+		]);
+		render(<SourceManager />);
+		await waitFor(() => {
+			expect(screen.getByText("Monster Manual")).toBeInTheDocument();
+		});
+		expect(screen.getByText("300 creatures")).toBeInTheDocument();
+		expect(screen.getByText("Volo's Guide")).toBeInTheDocument();
+		expect(screen.getByText("100 creatures")).toBeInTheDocument();
+	});
+
+	it("Clear All button calls cache clear and refreshCache", async () => {
+		const user = userEvent.setup();
+		const { refreshCache } = setupMockContext();
+		mockGetCachedSources
+			.mockResolvedValueOnce([
+				{
+					sourceCode: "mm",
+					displayName: "Monster Manual",
+					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(refreshCache).toHaveBeenCalled();
+	});
+
+	it("individual source delete button calls clear for that source", async () => {
+		const user = userEvent.setup();
+		const { refreshCache } = setupMockContext();
+		mockGetCachedSources
+			.mockResolvedValueOnce([
+				{
+					sourceCode: "mm",
+					displayName: "Monster Manual",
+					creatureCount: 300,
+					cachedAt: Date.now(),
+				},
+				{
+					sourceCode: "vgm",
+					displayName: "Volo's Guide",
+					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();
+		});
+
+		await user.click(
+			screen.getByRole("button", { name: "Remove Monster Manual" }),
+		);
+		await waitFor(() => {
+			expect(mockClearSource).toHaveBeenCalledWith("mm");
+		});
+		expect(refreshCache).toHaveBeenCalled();
+	});
+});

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

@@ -5,11 +5,23 @@ 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 { TurnNavigation } from "../turn-navigation";
 
-afterEach(cleanup);
+// Mock the context module
+vi.mock("../../contexts/encounter-context.js", () => ({
+	useEncounterContext: vi.fn(),
+}));
 
-function renderNav(overrides: Partial<Encounter> = {}) {
+import { useEncounterContext } from "../../contexts/encounter-context.js";
+import { TurnNavigation } from "../turn-navigation.js";
+
+const mockUseEncounterContext = vi.mocked(useEncounterContext);
+
+afterEach(() => {
+	cleanup();
+	vi.clearAllMocks();
+});
+
+function mockContext(overrides: Partial<Encounter> = {}) {
 	const encounter: Encounter = {
 		combatants: [
 			{ id: combatantId("1"), name: "Goblin" },
@@ -20,14 +32,38 @@ function renderNav(overrides: Partial<Encounter> = {}) {
 		...overrides,
 	};
 
-	return render(
+	const value = {
-		<TurnNavigation
+		encounter,
-			encounter={encounter}
+		advanceTurn: vi.fn(),
-			onAdvanceTurn={vi.fn()}
+		retreatTurn: vi.fn(),
-			onRetreatTurn={vi.fn()}
+		clearEncounter: vi.fn(),
-			onClearEncounter={vi.fn()}
+		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(),
+		setAc: vi.fn(),
+		toggleCondition: vi.fn(),
+		toggleConcentration: vi.fn(),
+		addFromBestiary: vi.fn(),
+		addFromPlayerCharacter: vi.fn(),
+		makeStore: vi.fn(),
+		events: [],
+	};
+
+	mockUseEncounterContext.mockReturnValue(
+		value as ReturnType<typeof useEncounterContext>,
 	);
+	return value;
+}
+
+function renderNav(overrides: Partial<Encounter> = {}) {
+	mockContext(overrides);
+	return render(<TurnNavigation />);
 }
 
 describe("TurnNavigation", () => {
@@ -49,7 +85,7 @@ describe("TurnNavigation", () => {
 
 		it("does not render an em dash between round and name", () => {
 			const { container } = renderNav();
-			expect(container.textContent).not.toContain("—");
+			expect(container.textContent).not.toContain("\u2014");
 		});
 
 		it("round badge and combatant name are siblings in the center area", () => {
@@ -60,69 +96,27 @@ describe("TurnNavigation", () => {
 		});
 
 		it("updates the round badge when round changes", () => {
-			const { rerender } = render(
+			mockContext({ roundNumber: 2 });
-				<TurnNavigation
+			const { rerender } = render(<TurnNavigation />);
-					encounter={{
-						combatants: [{ id: combatantId("1"), name: "Goblin" }],
-						activeIndex: 0,
-						roundNumber: 2,
-					}}
-					onAdvanceTurn={vi.fn()}
-					onRetreatTurn={vi.fn()}
-					onClearEncounter={vi.fn()}
-				/>,
-			);
 			expect(screen.getByText("R2")).toBeInTheDocument();
 
-			rerender(
+			mockContext({ roundNumber: 3 });
-				<TurnNavigation
+			rerender(<TurnNavigation />);
-					encounter={{
-						combatants: [{ id: combatantId("1"), name: "Goblin" }],
-						activeIndex: 0,
-						roundNumber: 3,
-					}}
-					onAdvanceTurn={vi.fn()}
-					onRetreatTurn={vi.fn()}
-					onClearEncounter={vi.fn()}
-				/>,
-			);
 			expect(screen.getByText("R3")).toBeInTheDocument();
 			expect(screen.queryByText("R2")).not.toBeInTheDocument();
 		});
 
 		it("renders the next combatant name when turn advances", () => {
-			const { rerender } = render(
+			const combatants = [
-				<TurnNavigation
-					encounter={{
-						combatants: [
 				{ id: combatantId("1"), name: "Goblin" },
 				{ id: combatantId("2"), name: "Conjurer" },
-						],
+			];
-						activeIndex: 0,
+			mockContext({ combatants, activeIndex: 0 });
-						roundNumber: 1,
+			const { rerender } = render(<TurnNavigation />);
-					}}
-					onAdvanceTurn={vi.fn()}
-					onRetreatTurn={vi.fn()}
-					onClearEncounter={vi.fn()}
-				/>,
-			);
 			expect(screen.getByText("Goblin")).toBeInTheDocument();
 
-			rerender(
+			mockContext({ combatants, activeIndex: 1 });
-				<TurnNavigation
+			rerender(<TurnNavigation />);
-					encounter={{
-						combatants: [
-							{ id: combatantId("1"), name: "Goblin" },
-							{ id: combatantId("2"), name: "Conjurer" },
-						],
-						activeIndex: 1,
-						roundNumber: 1,
-					}}
-					onAdvanceTurn={vi.fn()}
-					onRetreatTurn={vi.fn()}
-					onClearEncounter={vi.fn()}
-				/>,
-			);
 			expect(screen.getByText("Conjurer")).toBeInTheDocument();
 		});
 	});

apps/web/src/components/ac-shield.tsx

@@ -12,7 +12,7 @@ export function AcShield({ value, onClick, className }: AcShieldProps) {
 			type="button"
 			onClick={onClick}
 			className={cn(
-				"relative inline-flex items-center justify-center text-sm tabular-nums text-muted-foreground transition-colors hover:text-hover-neutral",
+				"relative inline-flex items-center justify-center text-muted-foreground text-sm tabular-nums transition-colors hover:text-hover-neutral",
 				className,
 			)}
 			style={{ width: 28, height: 32 }}
@@ -29,8 +29,8 @@ export function AcShield({ value, onClick, className }: AcShieldProps) {
 			>
 				<path d="M14 1.5 L2.5 6.5 L2.5 15 Q2.5 25 14 30.5 Q25.5 25 25.5 15 L25.5 6.5 Z" />
 			</svg>
-			<span className="relative text-xs font-medium leading-none">
+			<span className="relative font-medium text-xs leading-none">
-				{value !== undefined ? value : "\u2014"}
+				{value == null ? "\u2014" : String(value)}
 			</span>
 		</button>
 	);

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

@@ -1,4 +1,4 @@
-import type { PlayerCharacter, PlayerIcon } from "@initiative/domain";
+import type { CreatureId, PlayerCharacter } from "@initiative/domain";
 import {
 	Check,
 	Eye,
@@ -6,14 +6,31 @@ import {
 	Import,
 	Library,
 	Minus,
+	Monitor,
+	Moon,
 	Plus,
+	Sun,
 	Users,
 } from "lucide-react";
-import { type FormEvent, type RefObject, useState } from "react";
+import React, {
-import type { SearchResult } from "../hooks/use-bestiary.js";
+	type RefObject,
+	useCallback,
+	useDeferredValue,
+	useState,
+} from "react";
+import type { SearchResult } from "../contexts/bestiary-context.js";
+import { useBestiaryContext } 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 { useSidePanelContext } from "../contexts/side-panel-context.js";
+import { useThemeContext } from "../contexts/theme-context.js";
+import { useLongPress } from "../hooks/use-long-press.js";
 import { cn } from "../lib/utils.js";
 import { D20Icon } from "./d20-icon.js";
-import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
+import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map.js";
+import { RollModeMenu } from "./roll-mode-menu.js";
 import { Button } from "./ui/button.js";
 import { Input } from "./ui/input.js";
 import { OverflowMenu, type OverflowMenuItem } from "./ui/overflow-menu.js";
@@ -24,24 +41,9 @@ interface QueuedCreature {
 }
 
 interface ActionBarProps {
-	onAddCombatant: (
-		name: string,
-		opts?: { initiative?: number; ac?: number; maxHp?: number },
-	) => void;
-	onAddFromBestiary: (result: SearchResult) => void;
-	bestiarySearch: (query: string) => SearchResult[];
-	bestiaryLoaded: boolean;
-	onViewStatBlock?: (result: SearchResult) => void;
-	onBulkImport?: () => void;
-	bulkImportDisabled?: boolean;
 	inputRef?: RefObject<HTMLInputElement | null>;
-	playerCharacters?: readonly PlayerCharacter[];
-	onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
-	onManagePlayers?: () => void;
-	onRollAllInitiative?: () => void;
-	showRollAllInitiative?: boolean;
-	onOpenSourceManager?: () => void;
 	autoFocus?: boolean;
+	onManagePlayers?: () => void;
 }
 
 function creatureKey(r: SearchResult): string {
@@ -60,60 +62,63 @@ function AddModeSuggestions({
 	onSetQueued,
 	onConfirmQueued,
 	onAddFromPlayerCharacter,
-}: {
+	onClear,
+}: Readonly<{
 	nameInput: string;
 	suggestions: SearchResult[];
 	pcMatches: PlayerCharacter[];
 	suggestionIndex: number;
 	queued: QueuedCreature | null;
 	onDismiss: () => void;
+	onClear: () => void;
 	onClickSuggestion: (result: SearchResult) => void;
 	onSetSuggestionIndex: (i: number) => void;
 	onSetQueued: (q: QueuedCreature | null) => void;
 	onConfirmQueued: () => void;
 	onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
-}) {
+}>) {
 	return (
-		<div className="absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-md border border-border bg-card shadow-lg">
+		<div className="card-glow absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-lg border border-border bg-card">
 			<button
 				type="button"
-				className="flex w-full items-center gap-1.5 border-b border-border px-3 py-2 text-left text-sm text-accent hover:bg-accent/20"
+				className="flex w-full items-center gap-1.5 border-border border-b px-3 py-2 text-left text-accent text-sm hover:bg-accent/20"
 				onMouseDown={(e) => e.preventDefault()}
 				onClick={onDismiss}
 			>
 				<Plus className="h-3.5 w-3.5" />
 				<span className="flex-1">Add "{nameInput}" as custom</span>
-				<kbd className="rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground">
+				<kbd className="rounded border border-border px-1.5 py-0.5 text-muted-foreground text-xs">
 					Esc
 				</kbd>
 			</button>
 			<div className="max-h-48 overflow-y-auto py-1">
 				{pcMatches.length > 0 && (
 					<>
-						<div className="px-3 py-1 text-xs font-medium text-muted-foreground">
+						<div className="px-3 py-1 font-medium text-muted-foreground text-xs">
 							Players
 						</div>
 						<ul>
 							{pcMatches.map((pc) => {
-								const PcIcon = PLAYER_ICON_MAP[pc.icon as PlayerIcon];
+								const PcIcon = pc.icon ? PLAYER_ICON_MAP[pc.icon] : undefined;
-								const pcColor =
+								const pcColor = pc.color
-									PLAYER_COLOR_HEX[pc.color as keyof typeof PLAYER_COLOR_HEX];
+									? PLAYER_COLOR_HEX[pc.color]
+									: undefined;
 								return (
 									<li key={pc.id}>
 										<button
 											type="button"
-											className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-foreground hover:bg-hover-neutral-bg"
+											className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-foreground text-sm hover:bg-hover-neutral-bg"
 											onMouseDown={(e) => e.preventDefault()}
 											onClick={() => {
 												onAddFromPlayerCharacter?.(pc);
-												onDismiss();
+												onClear();
 											}}
 										>
-											{PcIcon && (
+											{!!PcIcon && (
 												<PcIcon size={14} style={{ color: pcColor }} />
 											)}
 											<span className="flex-1 truncate">{pc.name}</span>
-											<span className="text-xs text-muted-foreground">
+											<span className="text-muted-foreground text-xs">
 												Player
 											</span>
 										</button>
@@ -133,19 +138,20 @@ function AddModeSuggestions({
 								<li key={key}>
 									<button
 										type="button"
-										className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
+										className={cn(
-											isQueued
+											"flex w-full items-center justify-between px-3 py-1.5 text-left text-foreground text-sm",
-												? "bg-accent/30 text-foreground"
+											isQueued && "bg-accent/30",
-												: i === suggestionIndex
+											!isQueued && i === suggestionIndex && "bg-accent/20",
-													? "bg-accent/20 text-foreground"
+											!isQueued &&
-													: "text-foreground hover:bg-hover-neutral-bg"
+												i !== suggestionIndex &&
-										}`}
+												"hover:bg-hover-neutral-bg",
+										)}
 										onMouseDown={(e) => e.preventDefault()}
 										onClick={() => onClickSuggestion(result)}
 										onMouseEnter={() => onSetSuggestionIndex(i)}
 									>
 										<span>{result.name}</span>
-										<span className="flex items-center gap-1 text-xs text-muted-foreground">
+										<span className="flex items-center gap-1 text-muted-foreground text-xs">
 											{isQueued ? (
 												<>
 													<button
@@ -166,7 +172,7 @@ function AddModeSuggestions({
 													>
 														<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-foreground">
+													<span className="min-w-5 rounded-full bg-accent px-1.5 py-0.5 text-center font-medium text-primary-foreground">
 														{queued.count}
 													</span>
 													<button
@@ -210,12 +216,26 @@ function AddModeSuggestions({
 	);
 }
 
+const THEME_ICONS = {
+	system: Monitor,
+	light: Sun,
+	dark: Moon,
+} as const;
+
+const THEME_LABELS = {
+	system: "Theme: System",
+	light: "Theme: Light",
+	dark: "Theme: Dark",
+} as const;
+
 function buildOverflowItems(opts: {
 	onManagePlayers?: () => void;
 	onOpenSourceManager?: () => void;
 	bestiaryLoaded: boolean;
 	onBulkImport?: () => void;
 	bulkImportDisabled?: boolean;
+	themePreference?: "system" | "light" | "dark";
+	onCycleTheme?: () => void;
 }): OverflowMenuItem[] {
 	const items: OverflowMenuItem[] = [];
 	if (opts.onManagePlayers) {
@@ -235,34 +255,72 @@ function buildOverflowItems(opts: {
 	if (opts.bestiaryLoaded && opts.onBulkImport) {
 		items.push({
 			icon: <Import className="h-4 w-4" />,
-			label: "Bulk Import",
+			label: "Import All Sources",
 			onClick: opts.onBulkImport,
 			disabled: opts.bulkImportDisabled,
 		});
 	}
+	if (opts.onCycleTheme) {
+		const pref = opts.themePreference ?? "system";
+		const ThemeIcon = THEME_ICONS[pref];
+		items.push({
+			icon: <ThemeIcon className="h-4 w-4" />,
+			label: THEME_LABELS[pref],
+			onClick: opts.onCycleTheme,
+			keepOpen: true,
+		});
+	}
 	return items;
 }
 
 export function ActionBar({
-	onAddCombatant,
-	onAddFromBestiary,
-	bestiarySearch,
-	bestiaryLoaded,
-	onViewStatBlock,
-	onBulkImport,
-	bulkImportDisabled,
 	inputRef,
-	playerCharacters,
-	onAddFromPlayerCharacter,
-	onManagePlayers,
-	onRollAllInitiative,
-	showRollAllInitiative,
-	onOpenSourceManager,
 	autoFocus,
-}: ActionBarProps) {
+	onManagePlayers,
+}: Readonly<ActionBarProps>) {
+	const {
+		addCombatant,
+		addFromBestiary,
+		addFromPlayerCharacter,
+		hasCreatureCombatants,
+		canRollAllInitiative,
+	} = useEncounterContext();
+	const { search: bestiarySearch, isLoaded: bestiaryLoaded } =
+		useBestiaryContext();
+	const { characters: playerCharacters } = usePlayerCharactersContext();
+	const { showBulkImport, showSourceManager, showCreature, panelView } =
+		useSidePanelContext();
+	const { preference: themePreference, cycleTheme } = useThemeContext();
+	const { handleRollAllInitiative } = useInitiativeRollsContext();
+	const { state: bulkImportState } = useBulkImportContext();
+
+	const handleAddFromBestiary = useCallback(
+		(result: SearchResult) => {
+			const creatureId = addFromBestiary(result);
+			if (creatureId && panelView.mode === "closed") {
+				showCreature(creatureId);
+			}
+		},
+		[addFromBestiary, panelView.mode, showCreature],
+	);
+
+	const handleViewStatBlock = useCallback(
+		(result: SearchResult) => {
+			const slug = result.name
+				.toLowerCase()
+				.replaceAll(/[^a-z0-9]+/g, "-")
+				.replaceAll(/(^-|-$)/g, "");
+			const cId = `${result.source.toLowerCase()}:${slug}` as CreatureId;
+			showCreature(cId);
+		},
+		[showCreature],
+	);
+
 	const [nameInput, setNameInput] = useState("");
 	const [suggestions, setSuggestions] = useState<SearchResult[]>([]);
 	const [pcMatches, setPcMatches] = useState<PlayerCharacter[]>([]);
+	const deferredSuggestions = useDeferredValue(suggestions);
+	const deferredPcMatches = useDeferredValue(pcMatches);
 	const [suggestionIndex, setSuggestionIndex] = useState(-1);
 	const [queued, setQueued] = useState<QueuedCreature | null>(null);
 	const [customInit, setCustomInit] = useState("");
@@ -284,10 +342,17 @@ export function ActionBar({
 		setSuggestionIndex(-1);
 	};
 
+	const dismissSuggestions = () => {
+		setSuggestions([]);
+		setPcMatches([]);
+		setQueued(null);
+		setSuggestionIndex(-1);
+	};
+
 	const confirmQueued = () => {
 		if (!queued) return;
 		for (let i = 0; i < queued.count; i++) {
-			onAddFromBestiary(queued.result);
+			handleAddFromBestiary(queued.result);
 		}
 		clearInput();
 	};
@@ -298,7 +363,7 @@ export function ActionBar({
 		return Number.isNaN(n) ? undefined : n;
 	};
 
-	const handleAdd = (e: FormEvent) => {
+	const handleAdd = (e: React.SubmitEvent<HTMLFormElement>) => {
 		e.preventDefault();
 		if (browseMode) return;
 		if (queued) {
@@ -313,7 +378,7 @@ export function ActionBar({
 		if (init !== undefined) opts.initiative = init;
 		if (ac !== undefined) opts.ac = ac;
 		if (maxHp !== undefined) opts.maxHp = maxHp;
-		onAddCombatant(nameInput, Object.keys(opts).length > 0 ? opts : undefined);
+		addCombatant(nameInput, Object.keys(opts).length > 0 ? opts : undefined);
 		setNameInput("");
 		setSuggestions([]);
 		setPcMatches([]);
@@ -380,7 +445,8 @@ export function ActionBar({
 		}
 	};
 
-	const hasSuggestions = suggestions.length > 0 || pcMatches.length > 0;
+	const hasSuggestions =
+		deferredSuggestions.length > 0 || deferredPcMatches.length > 0;
 
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		if (!hasSuggestions) return;
@@ -395,7 +461,7 @@ export function ActionBar({
 			e.preventDefault();
 			handleEnter();
 		} else if (e.key === "Escape") {
-			clearInput();
+			dismissSuggestions();
 		}
 	};
 
@@ -414,14 +480,14 @@ export function ActionBar({
 			setSuggestionIndex((i) => (i > 0 ? i - 1 : suggestions.length - 1));
 		} else if (e.key === "Enter" && suggestionIndex >= 0) {
 			e.preventDefault();
-			onViewStatBlock?.(suggestions[suggestionIndex]);
+			handleViewStatBlock(suggestions[suggestionIndex]);
 			setBrowseMode(false);
 			clearInput();
 		}
 	};
 
 	const handleBrowseSelect = (result: SearchResult) => {
-		onViewStatBlock?.(result);
+		handleViewStatBlock(result);
 		setBrowseMode(false);
 		clearInput();
 	};
@@ -432,16 +498,37 @@ export function ActionBar({
 		clearCustomFields();
 	};
 
+	const [rollAllMenuPos, setRollAllMenuPos] = useState<{
+		x: number;
+		y: number;
+	} | null>(null);
+
+	const openRollAllMenu = useCallback((x: number, y: number) => {
+		setRollAllMenuPos({ x, y });
+	}, []);
+
+	const rollAllLongPress = useLongPress(
+		useCallback(
+			(e: React.TouchEvent) => {
+				const touch = e.touches[0];
+				if (touch) openRollAllMenu(touch.clientX, touch.clientY);
+			},
+			[openRollAllMenu],
+		),
+	);
+
 	const overflowItems = buildOverflowItems({
 		onManagePlayers,
-		onOpenSourceManager,
+		onOpenSourceManager: showSourceManager,
 		bestiaryLoaded,
-		onBulkImport,
+		onBulkImport: showBulkImport,
-		bulkImportDisabled,
+		bulkImportDisabled: bulkImportState.status === "loading",
+		themePreference,
+		onCycleTheme: cycleTheme,
 	});
 
 	return (
-		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
+		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
 			<form
 				onSubmit={handleAdd}
 				className="relative flex flex-1 items-center gap-2"
@@ -460,12 +547,12 @@ export function ActionBar({
 							className="pr-8"
 							autoFocus={autoFocus}
 						/>
-						{bestiaryLoaded && onViewStatBlock && (
+						{!!bestiaryLoaded && (
 							<button
 								type="button"
 								tabIndex={-1}
 								className={cn(
-									"absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-hover-neutral",
+									"absolute top-1/2 right-2 -translate-y-1/2 text-muted-foreground hover:text-hover-neutral",
 									browseMode && "text-accent",
 								)}
 								onClick={toggleBrowseMode}
@@ -481,24 +568,25 @@ export function ActionBar({
 								)}
 							</button>
 						)}
-						{browseMode && suggestions.length > 0 && (
+						{browseMode && deferredSuggestions.length > 0 && (
-							<div className="absolute bottom-full z-50 mb-1 w-full rounded-md border border-border bg-card shadow-lg">
+							<div className="card-glow absolute bottom-full z-50 mb-1 w-full rounded-lg border border-border bg-card">
 								<ul className="max-h-48 overflow-y-auto py-1">
-									{suggestions.map((result, i) => (
+									{deferredSuggestions.map((result, i) => (
 										<li key={creatureKey(result)}>
 											<button
 												type="button"
-												className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
+												className={cn(
+													"flex w-full items-center justify-between px-3 py-1.5 text-left text-sm",
 													i === suggestionIndex
 														? "bg-accent/20 text-foreground"
-														: "text-foreground hover:bg-hover-neutral-bg"
+														: "text-foreground hover:bg-hover-neutral-bg",
-												}`}
+												)}
 												onMouseDown={(e) => e.preventDefault()}
 												onClick={() => handleBrowseSelect(result)}
 												onMouseEnter={() => setSuggestionIndex(i)}
 											>
 												<span>{result.name}</span>
-												<span className="text-xs text-muted-foreground">
+												<span className="text-muted-foreground text-xs">
 													{result.sourceDisplayName}
 												</span>
 											</button>
@@ -510,16 +598,17 @@ export function ActionBar({
 						{!browseMode && hasSuggestions && (
 							<AddModeSuggestions
 								nameInput={nameInput}
-								suggestions={suggestions}
+								suggestions={deferredSuggestions}
-								pcMatches={pcMatches}
+								pcMatches={deferredPcMatches}
 								suggestionIndex={suggestionIndex}
 								queued={queued}
-								onDismiss={clearInput}
+								onDismiss={dismissSuggestions}
+								onClear={clearInput}
 								onClickSuggestion={handleClickSuggestion}
 								onSetSuggestionIndex={setSuggestionIndex}
 								onSetQueued={setQueued}
 								onConfirmQueued={confirmQueued}
-								onAddFromPlayerCharacter={onAddFromPlayerCharacter}
+								onAddFromPlayerCharacter={addFromPlayerCharacter}
 							/>
 						)}
 					</div>
@@ -553,22 +642,35 @@ export function ActionBar({
 					</div>
 				)}
 				{!browseMode && nameInput.length >= 2 && !hasSuggestions && (
-					<Button type="submit" size="sm">
+					<Button type="submit">Add</Button>
-						Add
-					</Button>
 				)}
-				{showRollAllInitiative && onRollAllInitiative && (
+				{!!hasCreatureCombatants && (
+					<>
 						<Button
 							type="button"
 							size="icon"
 							variant="ghost"
 							className="text-muted-foreground hover:text-hover-action"
-						onClick={onRollAllInitiative}
+							onClick={() => handleRollAllInitiative()}
+							onContextMenu={(e) => {
+								e.preventDefault();
+								openRollAllMenu(e.clientX, e.clientY);
+							}}
+							{...rollAllLongPress}
+							disabled={!canRollAllInitiative}
 							title="Roll all initiative"
 							aria-label="Roll all initiative"
 						>
 							<D20Icon className="h-6 w-6" />
 						</Button>
+						{!!rollAllMenuPos && (
+							<RollModeMenu
+								position={rollAllMenuPos}
+								onSelect={(mode) => handleRollAllInitiative(mode)}
+								onClose={() => setRollAllMenuPos(null)}
+							/>
+						)}
+					</>
 				)}
 				{overflowItems.length > 0 && <OverflowMenu items={overflowItems} />}
 			</form>

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

@@ -1,36 +1,41 @@
 import { Loader2 } from "lucide-react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { getAllSourceCodes } from "../adapters/bestiary-index-adapter.js";
-import type { BulkImportState } from "../hooks/use-bulk-import.js";
+import { useBestiaryContext } from "../contexts/bestiary-context.js";
+import { useBulkImportContext } from "../contexts/bulk-import-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 =
 	"https://raw.githubusercontent.com/5etools-mirror-3/5etools-src/main/data/bestiary/";
 
-interface BulkImportPromptProps {
+export function BulkImportPrompt() {
-	importState: BulkImportState;
+	const { fetchAndCacheSource, isSourceCached, refreshCache } =
-	onStartImport: (baseUrl: string) => void;
+		useBestiaryContext();
-	onDone: () => void;
+	const { state: importState, startImport, reset } = useBulkImportContext();
-}
+	const { dismissPanel } = useSidePanelContext();
 
-export function BulkImportPrompt({
-	importState,
-	onStartImport,
-	onDone,
-}: BulkImportPromptProps) {
 	const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
+	const baseUrlId = useId();
 	const totalSources = getAllSourceCodes().length;
 
+	const handleStart = (url: string) => {
+		startImport(url, fetchAndCacheSource, isSourceCached, refreshCache);
+	};
+
+	const handleDone = () => {
+		dismissPanel();
+		reset();
+	};
+
 	if (importState.status === "complete") {
 		return (
 			<div className="flex flex-col gap-4">
-				<div className="rounded-md border border-green-500/50 bg-green-500/10 px-3 py-2 text-sm text-green-400">
+				<div className="rounded-md border border-green-500/50 bg-green-500/10 px-3 py-2 text-green-400 text-sm">
 					All sources loaded
 				</div>
-				<Button size="sm" onClick={onDone}>
+				<Button onClick={handleDone}>Done</Button>
-					Done
-				</Button>
 			</div>
 		);
 	}
@@ -42,9 +47,7 @@ export function BulkImportPrompt({
 					Loaded {importState.completed}/{importState.total} sources (
 					{importState.failed} failed)
 				</div>
-				<Button size="sm" onClick={onDone}>
+				<Button onClick={handleDone}>Done</Button>
-					Done
-				</Button>
 			</div>
 		);
 	}
@@ -58,7 +61,7 @@ export function BulkImportPrompt({
 
 		return (
 			<div className="flex flex-col gap-4">
-				<div className="flex items-center gap-2 text-sm text-muted-foreground">
+				<div className="flex items-center gap-2 text-muted-foreground text-sm">
 					<Loader2 className="h-4 w-4 animate-spin" />
 					Loading sources... {processed}/{importState.total}
 				</div>
@@ -78,24 +81,20 @@ export function BulkImportPrompt({
 	return (
 		<div className="flex flex-col gap-4">
 			<div>
-				<h3 className="text-sm font-semibold text-foreground">
+				<h3 className="font-semibold text-foreground text-sm">
-					Bulk Import Sources
+					Import All Sources
 				</h3>
-				<p className="mt-1 text-xs text-muted-foreground">
+				<p className="mt-1 text-muted-foreground text-xs">
-					Load stat block data for all {totalSources} sources at once. This will
+					Load stat block data for all {totalSources} sources at once.
-					download approximately 12.5 MB of data.
 				</p>
 			</div>
 
 			<div className="flex flex-col gap-2">
-				<label
+				<label htmlFor={baseUrlId} className="text-muted-foreground text-xs">
-					htmlFor="bulk-base-url"
-					className="text-xs text-muted-foreground"
-				>
 					Base URL
 				</label>
 				<Input
-					id="bulk-base-url"
+					id={baseUrlId}
 					type="url"
 					value={baseUrl}
 					onChange={(e) => setBaseUrl(e.target.value)}
@@ -103,11 +102,7 @@ export function BulkImportPrompt({
 				/>
 			</div>
 
-			<Button
+			<Button onClick={() => handleStart(baseUrl)} disabled={isDisabled}>
-				size="sm"
-				onClick={() => onStartImport(baseUrl)}
-				disabled={isDisabled}
-			>
 				Load All
 			</Button>
 		</div>

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

@@ -0,0 +1,44 @@
+import { useBulkImportContext } from "../contexts/bulk-import-context.js";
+import { useSidePanelContext } from "../contexts/side-panel-context.js";
+import { Toast } from "./toast.js";
+
+export function BulkImportToasts() {
+	const { state, reset } = useBulkImportContext();
+	const { bulkImportMode, isRightPanelCollapsed } = useSidePanelContext();
+	const visible = !bulkImportMode || isRightPanelCollapsed;
+
+	if (!visible) return null;
+
+	if (state.status === "loading") {
+		return (
+			<Toast
+				message={`Loading sources... ${state.completed + state.failed}/${state.total}`}
+				progress={
+					state.total > 0 ? (state.completed + state.failed) / state.total : 0
+				}
+				onDismiss={() => {}}
+			/>
+		);
+	}
+
+	if (state.status === "complete") {
+		return (
+			<Toast
+				message="All sources loaded"
+				onDismiss={reset}
+				autoDismissMs={3000}
+			/>
+		);
+	}
+
+	if (state.status === "partial-failure") {
+		return (
+			<Toast
+				message={`Loaded ${state.completed}/${state.total} sources (${state.failed} failed)`}
+				onDismiss={reset}
+			/>
+		);
+	}
+
+	return null;
+}

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

@@ -9,18 +9,18 @@ interface ColorPaletteProps {
 
 const COLORS = [...VALID_PLAYER_COLORS] as string[];
 
-export function ColorPalette({ value, onChange }: ColorPaletteProps) {
+export function ColorPalette({ value, onChange }: Readonly<ColorPaletteProps>) {
 	return (
 		<div className="flex flex-wrap gap-2">
 			{COLORS.map((color) => (
 				<button
 					key={color}
 					type="button"
-					onClick={() => onChange(color)}
+					onClick={() => onChange(value === color ? "" : color)}
 					className={cn(
 						"h-8 w-8 rounded-full transition-all",
 						value === color
-							? "ring-2 ring-foreground ring-offset-2 ring-offset-background scale-110"
+							? "scale-110 ring-2 ring-foreground ring-offset-2 ring-offset-background"
 							: "hover:scale-110",
 					)}
 					style={{

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

@@ -1,20 +1,27 @@
 import {
 	type CombatantId,
 	type ConditionId,
+	type CreatureId,
 	deriveHpStatus,
 	type PlayerIcon,
+	type RollMode,
 } from "@initiative/domain";
-import { Brain, X } from "lucide-react";
+import { Book, BookOpen, Brain, X } from "lucide-react";
 import { type Ref, useCallback, useEffect, useRef, useState } from "react";
-import { cn } from "../lib/utils";
+import { useEncounterContext } from "../contexts/encounter-context.js";
-import { AcShield } from "./ac-shield";
+import { useInitiativeRollsContext } from "../contexts/initiative-rolls-context.js";
-import { ConditionPicker } from "./condition-picker";
+import { useSidePanelContext } from "../contexts/side-panel-context.js";
-import { ConditionTags } from "./condition-tags";
+import { useLongPress } from "../hooks/use-long-press.js";
-import { D20Icon } from "./d20-icon";
+import { cn } from "../lib/utils.js";
-import { HpAdjustPopover } from "./hp-adjust-popover";
+import { AcShield } from "./ac-shield.js";
-import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
+import { ConditionPicker } from "./condition-picker.js";
-import { ConfirmButton } from "./ui/confirm-button";
+import { ConditionTags } from "./condition-tags.js";
-import { Input } from "./ui/input";
+import { D20Icon } from "./d20-icon.js";
+import { HpAdjustPopover } from "./hp-adjust-popover.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";
+import { Input } from "./ui/input.js";
 
 interface Combatant {
 	readonly id: CombatantId;
@@ -27,42 +34,28 @@ interface Combatant {
 	readonly isConcentrating?: boolean;
 	readonly color?: string;
 	readonly icon?: string;
+	readonly creatureId?: CreatureId;
 }
 
 interface CombatantRowProps {
 	combatant: Combatant;
 	isActive: boolean;
-	onRename: (id: CombatantId, newName: string) => void;
-	onSetInitiative: (id: CombatantId, value: number | undefined) => void;
-	onRemove: (id: CombatantId) => void;
-	onSetHp: (id: CombatantId, maxHp: number | undefined) => void;
-	onAdjustHp: (id: CombatantId, delta: number) => void;
-	onSetAc: (id: CombatantId, value: number | undefined) => void;
-	onToggleCondition: (id: CombatantId, conditionId: ConditionId) => void;
-	onToggleConcentration: (id: CombatantId) => void;
-	onShowStatBlock?: () => void;
-	onRollInitiative?: (id: CombatantId) => void;
 }
 
 function EditableName({
 	name,
 	combatantId,
 	onRename,
-	onShowStatBlock,
 	color,
-}: {
+}: Readonly<{
 	name: string;
 	combatantId: CombatantId;
 	onRename: (id: CombatantId, newName: string) => void;
-	onShowStatBlock?: () => void;
 	color?: string;
-}) {
+}>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(name);
 	const inputRef = useRef<HTMLInputElement>(null);
-	const clickTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-	const longPressTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-	const longPressTriggeredRef = useRef(false);
 
 	const commit = useCallback(() => {
 		const trimmed = draft.trim();
@@ -78,53 +71,13 @@ function EditableName({
 		requestAnimationFrame(() => inputRef.current?.select());
 	}, [name]);
 
-	useEffect(() => {
-		return () => {
-			clearTimeout(clickTimerRef.current);
-			clearTimeout(longPressTimerRef.current);
-		};
-	}, []);
-
-	const handleClick = useCallback(
-		(e: React.MouseEvent) => {
-			e.stopPropagation();
-			if (longPressTriggeredRef.current) {
-				longPressTriggeredRef.current = false;
-				return;
-			}
-			if (clickTimerRef.current) {
-				clearTimeout(clickTimerRef.current);
-				clickTimerRef.current = undefined;
-				startEditing();
-			} else {
-				clickTimerRef.current = setTimeout(() => {
-					clickTimerRef.current = undefined;
-					onShowStatBlock?.();
-				}, 250);
-			}
-		},
-		[startEditing, onShowStatBlock],
-	);
-
-	const handleTouchStart = useCallback(() => {
-		longPressTriggeredRef.current = false;
-		longPressTimerRef.current = setTimeout(() => {
-			longPressTriggeredRef.current = true;
-			startEditing();
-		}, 500);
-	}, [startEditing]);
-
-	const cancelLongPress = useCallback(() => {
-		clearTimeout(longPressTimerRef.current);
-	}, []);
-
 	if (editing) {
 		return (
 			<Input
 				ref={inputRef}
 				type="text"
 				value={draft}
-				className="h-7 text-sm"
+				className="h-7 max-w-48 text-sm"
 				onChange={(e) => setDraft(e.target.value)}
 				onBlur={commit}
 				onKeyDown={(e) => {
@@ -136,30 +89,24 @@ function EditableName({
 	}
 
 	return (
-		<>
 		<button
 			type="button"
-				onClick={handleClick}
+			onClick={startEditing}
-				onTouchStart={handleTouchStart}
+			className="cursor-text truncate text-left text-foreground text-sm transition-colors hover:text-hover-neutral"
-				onTouchEnd={cancelLongPress}
-				onTouchCancel={cancelLongPress}
-				onTouchMove={cancelLongPress}
-				className="truncate text-left text-sm text-foreground cursor-text hover:text-hover-neutral transition-colors"
 			style={color ? { color } : undefined}
 		>
 			{name}
 		</button>
-		</>
 	);
 }
 
 function MaxHpDisplay({
 	maxHp,
 	onCommit,
-}: {
+}: Readonly<{
 	maxHp: number | undefined;
 	onCommit: (value: number | undefined) => void;
-}) {
+}>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(maxHp?.toString() ?? "");
 	const inputRef = useRef<HTMLInputElement>(null);
@@ -205,7 +152,7 @@ function MaxHpDisplay({
 		<button
 			type="button"
 			onClick={startEditing}
-			className="inline-block h-7 min-w-[3ch] text-center text-sm leading-7 tabular-nums text-muted-foreground transition-colors hover:text-hover-neutral"
+			className="inline-block h-7 min-w-[3ch] text-center text-muted-foreground text-sm tabular-nums leading-7 transition-colors hover:text-hover-neutral"
 		>
 			{maxHp ?? "Max"}
 		</button>
@@ -217,12 +164,12 @@ function ClickableHp({
 	maxHp,
 	onAdjust,
 	dimmed,
-}: {
+}: Readonly<{
 	currentHp: number | undefined;
 	maxHp: number | undefined;
 	onAdjust: (delta: number) => void;
 	dimmed?: boolean;
-}) {
+}>) {
 	const [popoverOpen, setPopoverOpen] = useState(false);
 	const status = deriveHpStatus(currentHp, maxHp);
 
@@ -230,9 +177,11 @@ function ClickableHp({
 		return (
 			<span
 				className={cn(
-					"inline-block h-7 w-[4ch] text-center text-sm leading-7 tabular-nums text-muted-foreground",
+					"inline-block h-7 w-[4ch] text-center text-muted-foreground text-sm tabular-nums leading-7",
 					dimmed && "opacity-50",
 				)}
+				role="status"
+				aria-label="No HP set"
 			>
 				--
 			</span>
@@ -244,8 +193,9 @@ function ClickableHp({
 			<button
 				type="button"
 				onClick={() => setPopoverOpen(true)}
+				aria-label={`Current HP: ${currentHp} (${status})`}
 				className={cn(
-					"inline-block h-7 min-w-[3ch] text-center text-sm font-medium leading-7 tabular-nums transition-colors hover:text-hover-neutral",
+					"inline-block h-7 min-w-[3ch] text-center font-medium text-sm tabular-nums leading-7 transition-colors hover:text-hover-neutral",
 					status === "bloodied" && "text-amber-400",
 					status === "unconscious" && "text-red-400",
 					status === "healthy" && "text-foreground",
@@ -254,7 +204,7 @@ function ClickableHp({
 			>
 				{currentHp}
 			</button>
-			{popoverOpen && (
+			{!!popoverOpen && (
 				<HpAdjustPopover
 					onAdjust={onAdjust}
 					onClose={() => setPopoverOpen(false)}
@@ -267,10 +217,10 @@ function ClickableHp({
 function AcDisplay({
 	ac,
 	onCommit,
-}: {
+}: Readonly<{
 	ac: number | undefined;
 	onCommit: (value: number | undefined) => void;
-}) {
+}>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(ac?.toString() ?? "");
 	const inputRef = useRef<HTMLInputElement>(null);
@@ -321,16 +271,34 @@ function InitiativeDisplay({
 	dimmed,
 	onSetInitiative,
 	onRollInitiative,
-}: {
+}: Readonly<{
 	initiative: number | undefined;
 	combatantId: CombatantId;
 	dimmed: boolean;
 	onSetInitiative: (id: CombatantId, value: number | undefined) => void;
-	onRollInitiative?: (id: CombatantId) => void;
+	onRollInitiative?: (id: CombatantId, mode?: RollMode) => void;
-}) {
+}>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(initiative?.toString() ?? "");
 	const inputRef = useRef<HTMLInputElement>(null);
+	const [menuPos, setMenuPos] = useState<{
+		x: number;
+		y: number;
+	} | null>(null);
+
+	const openMenu = useCallback((x: number, y: number) => {
+		setMenuPos({ x, y });
+	}, []);
+
+	const longPress = useLongPress(
+		useCallback(
+			(e: React.TouchEvent) => {
+				const touch = e.touches[0];
+				if (touch) openMenu(touch.clientX, touch.clientY);
+			},
+			[openMenu],
+		),
+	);
 
 	const commit = useCallback(() => {
 		if (draft === "") {
@@ -372,12 +340,18 @@ function InitiativeDisplay({
 		);
 	}
 
-	// Empty + bestiary creature → d20 roll button
+	// Empty + bestiary creature -> d20 roll button
 	if (initiative === undefined && onRollInitiative) {
 		return (
+			<>
 				<button
 					type="button"
 					onClick={() => onRollInitiative(combatantId)}
+					onContextMenu={(e) => {
+						e.preventDefault();
+						openMenu(e.clientX, e.clientY);
+					}}
+					{...longPress}
 					className={cn(
 						"flex h-7 w-full items-center justify-center text-muted-foreground transition-colors hover:text-hover-neutral",
 						dimmed && "opacity-50",
@@ -387,20 +361,28 @@ function InitiativeDisplay({
 				>
 					<D20Icon className="h-7 w-7" />
 				</button>
+				{!!menuPos && (
+					<RollModeMenu
+						position={menuPos}
+						onSelect={(mode) => onRollInitiative(combatantId, mode)}
+						onClose={() => setMenuPos(null)}
+					/>
+				)}
+			</>
 		);
 	}
 
-	// Has value → bold number, click to edit
+	// Has value -> bold number, click to edit
-	// Empty + manual → "--" placeholder, click to edit
+	// Empty + manual -> "--" placeholder, click to edit
 	return (
 		<button
 			type="button"
 			onClick={startEditing}
 			className={cn(
-				"h-7 w-full text-center text-sm leading-7 tabular-nums transition-colors",
+				"h-7 w-full text-center text-sm tabular-nums leading-7 transition-colors",
-				initiative !== undefined
+				initiative === undefined
-					? "font-medium text-foreground hover:text-hover-neutral"
+					? "text-muted-foreground hover:text-hover-neutral"
-					: "text-muted-foreground hover:text-hover-neutral",
+					: "font-medium text-foreground hover:text-hover-neutral",
 				dimmed && "opacity-50",
 			)}
 		>
@@ -413,9 +395,13 @@ function rowBorderClass(
 	isActive: boolean,
 	isConcentrating: boolean | undefined,
 ): string {
-	if (isActive) return "border-l-2 border-l-accent bg-accent/10";
+	if (isActive && isConcentrating)
-	if (isConcentrating) return "border-l-2 border-l-purple-400";
+		return "border border-l-2 border-active-row-border border-l-purple-400 bg-active-row-bg card-glow";
-	return "border-l-2 border-l-transparent";
+	if (isActive)
+		return "border border-l-2 border-active-row-border bg-active-row-bg card-glow";
+	if (isConcentrating)
+		return "border border-l-2 border-transparent border-l-purple-400";
+	return "border border-l-2 border-transparent";
 }
 
 function concentrationIconClass(
@@ -427,32 +413,34 @@ function concentrationIconClass(
 	return dimmed ? "opacity-50 text-purple-400" : "opacity-100 text-purple-400";
 }
 
-function activateOnKeyDown(
-	handler: () => void,
-): (e: { key: string; preventDefault: () => void }) => void {
-	return (e) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			handler();
-		}
-	};
-}
-
 export function CombatantRow({
 	ref,
 	combatant,
 	isActive,
-	onRename,
-	onSetInitiative,
-	onRemove,
-	onSetHp,
-	onAdjustHp,
-	onSetAc,
-	onToggleCondition,
-	onToggleConcentration,
-	onShowStatBlock,
-	onRollInitiative,
 }: CombatantRowProps & { ref?: Ref<HTMLDivElement> }) {
+	const {
+		editCombatant,
+		setInitiative,
+		removeCombatant,
+		setHp,
+		adjustHp,
+		setAc,
+		toggleCondition,
+		toggleConcentration,
+	} = useEncounterContext();
+	const { selectedCreatureId, showCreature } = useSidePanelContext();
+	const { handleRollInitiative } = useInitiativeRollsContext();
+
+	// Derive what was previously conditional props
+	const isStatBlockOpen = combatant.creatureId === selectedCreatureId;
+	const { creatureId } = combatant;
+	const onShowStatBlock = creatureId
+		? () => showCreature(creatureId)
+		: undefined;
+	const onRollInitiative = combatant.creatureId
+		? handleRollInitiative
+		: undefined;
+
 	const { id, name, initiative, maxHp, currentHp } = combatant;
 	const status = deriveHpStatus(currentHp, maxHp);
 	const dimmed = status === "unconscious";
@@ -490,34 +478,23 @@ export function CombatantRow({
 		: undefined;
 
 	return (
-		/* biome-ignore lint/a11y/noStaticElementInteractions: role="button" is set conditionally when onShowStatBlock exists */
 		<div
 			ref={ref}
-			role={onShowStatBlock ? "button" : undefined}
-			tabIndex={onShowStatBlock ? 0 : undefined}
 			className={cn(
-				"group rounded-md pr-3 transition-colors",
+				"group rounded-lg pr-3 transition-colors",
 				rowBorderClass(isActive, combatant.isConcentrating),
 				isPulsing && "animate-concentration-pulse",
-				onShowStatBlock && "cursor-pointer",
 			)}
-			onClick={onShowStatBlock}
-			onKeyDown={
-				onShowStatBlock ? activateOnKeyDown(onShowStatBlock) : undefined
-			}
 		>
 			<div className="grid grid-cols-[2rem_3rem_1fr_auto_auto_2rem] items-center gap-3 py-2">
 				{/* Concentration */}
 				<button
 					type="button"
-					onClick={(e) => {
+					onClick={() => toggleConcentration(id)}
-						e.stopPropagation();
-						onToggleConcentration(id);
-					}}
 					title="Concentrating"
 					aria-label="Toggle concentration"
 					className={cn(
-						"flex w-full items-center justify-center self-stretch -my-2 -ml-[2px] pl-[14px] transition-opacity hover:text-hover-neutral hover:opacity-100",
+						"-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),
 					)}
 				>
@@ -525,39 +502,44 @@ export function CombatantRow({
 				</button>
 
 				{/* Initiative */}
-				{/* biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation wrapper for interactive children */}
-				<div
-					onClick={(e) => e.stopPropagation()}
-					onKeyDown={(e) => e.stopPropagation()}
-				>
 				<InitiativeDisplay
 					initiative={initiative}
 					combatantId={id}
 					dimmed={dimmed}
-						onSetInitiative={onSetInitiative}
+					onSetInitiative={setInitiative}
 					onRollInitiative={onRollInitiative}
 				/>
-				</div>
 
 				{/* Name + Conditions */}
 				<div
 					className={cn(
-						"relative flex flex-wrap items-center gap-1 min-w-0",
+						"relative flex min-w-0 flex-wrap items-center gap-1",
 						dimmed && "opacity-50",
 					)}
 				>
-					{combatant.icon &&
+					{!!onShowStatBlock && (
-						combatant.color &&
+						<button
+							type="button"
+							onClick={onShowStatBlock}
+							title="View stat block"
+							aria-label="View stat block"
+							className="shrink-0 text-foreground transition-colors hover:text-hover-neutral"
+						>
+							{isStatBlockOpen ? <BookOpen size={16} /> : <Book size={16} />}
+						</button>
+					)}
+					{!!combatant.icon &&
+						!!combatant.color &&
 						(() => {
 							const PcIcon = PLAYER_ICON_MAP[combatant.icon as PlayerIcon];
-							const pcColor =
+							const iconColor =
 								PLAYER_COLOR_HEX[
 									combatant.color as keyof typeof PLAYER_COLOR_HEX
 								];
 							return PcIcon ? (
 								<PcIcon
-									size={14}
+									size={16}
-									style={{ color: pcColor }}
+									style={{ color: iconColor }}
 									className="shrink-0"
 								/>
 							) : null;
@@ -565,51 +547,40 @@ export function CombatantRow({
 					<EditableName
 						name={name}
 						combatantId={id}
-						onRename={onRename}
+						onRename={editCombatant}
-						onShowStatBlock={onShowStatBlock}
 						color={pcColor}
 					/>
 					<ConditionTags
 						conditions={combatant.conditions}
-						onRemove={(conditionId) => onToggleCondition(id, conditionId)}
+						onRemove={(conditionId) => toggleCondition(id, conditionId)}
 						onOpenPicker={() => setPickerOpen((prev) => !prev)}
 					/>
-					{pickerOpen && (
+					{!!pickerOpen && (
 						<ConditionPicker
 							activeConditions={combatant.conditions}
-							onToggle={(conditionId) => onToggleCondition(id, conditionId)}
+							onToggle={(conditionId) => toggleCondition(id, conditionId)}
 							onClose={() => setPickerOpen(false)}
 						/>
 					)}
 				</div>
 
 				{/* AC */}
-				{/* biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation wrapper for interactive children */}
+				<div className={cn(dimmed && "opacity-50")}>
-				<div
+					<AcDisplay ac={combatant.ac} onCommit={(v) => setAc(id, v)} />
-					className={cn(dimmed && "opacity-50")}
-					onClick={(e) => e.stopPropagation()}
-					onKeyDown={(e) => e.stopPropagation()}
-				>
-					<AcDisplay ac={combatant.ac} onCommit={(v) => onSetAc(id, v)} />
 				</div>
 
 				{/* HP */}
-				{/* biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation wrapper for interactive children */}
+				<div className="flex items-center gap-1">
-				<div
-					className="flex items-center gap-1"
-					onClick={(e) => e.stopPropagation()}
-					onKeyDown={(e) => e.stopPropagation()}
-				>
 					<ClickableHp
 						currentHp={currentHp}
 						maxHp={maxHp}
-						onAdjust={(delta) => onAdjustHp(id, delta)}
+						onAdjust={(delta) => adjustHp(id, delta)}
 						dimmed={dimmed}
 					/>
 					{maxHp !== undefined && (
 						<span
 							className={cn(
-								"text-sm tabular-nums text-muted-foreground",
+								"text-muted-foreground text-sm tabular-nums",
 								dimmed && "opacity-50",
 							)}
 						>
@@ -617,7 +588,7 @@ export function CombatantRow({
 						</span>
 					)}
 					<div className={cn(dimmed && "opacity-50")}>
-						<MaxHpDisplay maxHp={maxHp} onCommit={(v) => onSetHp(id, v)} />
+						<MaxHpDisplay maxHp={maxHp} onCommit={(v) => setHp(id, v)} />
 					</div>
 				</div>
 
@@ -625,8 +596,8 @@ export function CombatantRow({
 				<ConfirmButton
 					icon={<X size={16} />}
 					label="Remove combatant"
-					onConfirm={() => onRemove(id)}
+					onConfirm={() => removeCombatant(id)}
-					className="h-7 w-7 text-muted-foreground opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus:opacity-100 focus:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:pointer-events-auto transition-opacity"
+					className="pointer-events-none pointer-coarse:pointer-events-auto h-7 w-7 text-muted-foreground opacity-0 pointer-coarse:opacity-100 transition-opacity focus:pointer-events-auto focus:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100"
 				/>
 			</div>
 		</div>

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

@@ -61,7 +61,7 @@ export function ConditionPicker({
 	activeConditions,
 	onToggle,
 	onClose,
-}: ConditionPickerProps) {
+}: Readonly<ConditionPickerProps>) {
 	const ref = useRef<HTMLDivElement>(null);
 	const [flipped, setFlipped] = useState(false);
 	const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined);
@@ -97,7 +97,7 @@ export function ConditionPicker({
 		<div
 			ref={ref}
 			className={cn(
-				"absolute left-0 z-10 w-fit overflow-y-auto rounded-md border border-border bg-background p-1 shadow-lg",
+				"card-glow absolute left-0 z-10 w-fit overflow-y-auto rounded-lg border border-border bg-background p-1",
 				flipped ? "bottom-full mb-1" : "top-full mt-1",
 			)}
 			style={maxHeight ? { maxHeight } : undefined}

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

@@ -18,6 +18,7 @@ import {
 	Sparkles,
 	ZapOff,
 } from "lucide-react";
+import { cn } from "../lib/utils.js";
 
 const ICON_MAP: Record<string, LucideIcon> = {
 	EyeOff,
@@ -60,7 +61,7 @@ export function ConditionTags({
 	conditions,
 	onRemove,
 	onOpenPicker,
-}: ConditionTagsProps) {
+}: Readonly<ConditionTagsProps>) {
 	return (
 		<div className="flex flex-wrap items-center gap-0.5">
 			{conditions?.map((condId) => {
@@ -75,7 +76,10 @@ export function ConditionTags({
 						type="button"
 						title={def.label}
 						aria-label={`Remove ${def.label}`}
-						className={`inline-flex items-center rounded p-0.5 hover:bg-hover-neutral-bg transition-colors ${colorClass}`}
+						className={cn(
+							"inline-flex items-center rounded p-0.5 transition-colors hover:bg-hover-neutral-bg",
+							colorClass,
+						)}
 						onClick={(e) => {
 							e.stopPropagation();
 							onRemove(condId);
@@ -89,7 +93,7 @@ export function ConditionTags({
 				type="button"
 				title="Add condition"
 				aria-label="Add condition"
-				className="inline-flex items-center rounded p-0.5 text-muted-foreground hover:text-hover-neutral hover:bg-hover-neutral-bg transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 pointer-coarse:opacity-100 transition-opacity"
+				className="inline-flex items-center rounded p-0.5 text-muted-foreground opacity-0 pointer-coarse:opacity-100 transition-colors transition-opacity hover:bg-hover-neutral-bg hover:text-hover-neutral focus:opacity-100 group-hover:opacity-100"
 				onClick={(e) => {
 					e.stopPropagation();
 					onOpenPicker();

apps/web/src/components/create-player-modal.tsx

@@ -1,6 +1,6 @@
 import type { PlayerCharacter } from "@initiative/domain";
 import { X } from "lucide-react";
-import { type FormEvent, useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ColorPalette } from "./color-palette";
 import { IconGrid } from "./icon-grid";
 import { Button } from "./ui/button";
@@ -13,8 +13,8 @@ interface CreatePlayerModalProps {
 		name: string,
 		ac: number,
 		maxHp: number,
-		color: string,
+		color: string | undefined,
-		icon: string,
+		icon: string | undefined,
 	) => void;
 	playerCharacter?: PlayerCharacter;
 }
@@ -24,7 +24,8 @@ export function CreatePlayerModal({
 	onClose,
 	onSave,
 	playerCharacter,
-}: CreatePlayerModalProps) {
+}: Readonly<CreatePlayerModalProps>) {
+	const dialogRef = useRef<HTMLDialogElement>(null);
 	const [name, setName] = useState("");
 	const [ac, setAc] = useState("10");
 	const [maxHp, setMaxHp] = useState("10");
@@ -40,31 +41,48 @@ export function CreatePlayerModal({
 				setName(playerCharacter.name);
 				setAc(String(playerCharacter.ac));
 				setMaxHp(String(playerCharacter.maxHp));
-				setColor(playerCharacter.color);
+				setColor(playerCharacter.color ?? "");
-				setIcon(playerCharacter.icon);
+				setIcon(playerCharacter.icon ?? "");
 			} else {
 				setName("");
 				setAc("10");
 				setMaxHp("10");
-				setColor("blue");
+				setColor("");
-				setIcon("sword");
+				setIcon("");
 			}
 			setError("");
 		}
 	}, [open, playerCharacter]);
 
 	useEffect(() => {
-		if (!open) return;
+		const dialog = dialogRef.current;
-		function handleKeyDown(e: KeyboardEvent) {
+		if (!dialog) return;
-			if (e.key === "Escape") onClose();
+		if (open && !dialog.open) {
+			dialog.showModal();
+		} else if (!open && dialog.open) {
+			dialog.close();
 		}
-		document.addEventListener("keydown", handleKeyDown);
+	}, [open]);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [open, onClose]);
 
-	if (!open) return null;
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		function handleCancel(e: Event) {
+			e.preventDefault();
+			onClose();
+		}
+		function handleBackdropClick(e: MouseEvent) {
+			if (e.target === dialog) onClose();
+		}
+		dialog.addEventListener("cancel", handleCancel);
+		dialog.addEventListener("mousedown", handleBackdropClick);
+		return () => {
+			dialog.removeEventListener("cancel", handleCancel);
+			dialog.removeEventListener("mousedown", handleBackdropClick);
+		};
+	}, [onClose]);
 
-	const handleSubmit = (e: FormEvent) => {
+	const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
 		e.preventDefault();
 		const trimmed = name.trim();
 		if (trimmed === "") {
@@ -81,39 +99,32 @@ export function CreatePlayerModal({
 			setError("Max HP must be at least 1");
 			return;
 		}
-		onSave(trimmed, acNum, hpNum, color, icon);
+		onSave(trimmed, acNum, hpNum, color || undefined, icon || undefined);
 		onClose();
 	};
 
 	return (
-		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop click to close
+		<dialog
-		<div
+			ref={dialogRef}
-			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+			className="card-glow m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 backdrop:bg-black/50"
-			onMouseDown={onClose}
-		>
-			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
-			<div
-				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
-				onMouseDown={(e) => e.stopPropagation()}
 		>
 			<div className="mb-4 flex items-center justify-between">
-					<h2 className="text-lg font-semibold text-foreground">
+				<h2 className="font-semibold text-foreground text-lg">
 					{isEdit ? "Edit Player" : "Create Player"}
 				</h2>
-					<button
+				<Button
-						type="button"
+					variant="ghost"
+					size="icon"
 					onClick={onClose}
-						className="text-muted-foreground hover:text-foreground transition-colors"
+					className="text-muted-foreground"
 				>
 					<X size={20} />
-					</button>
+				</Button>
 			</div>
 
 			<form onSubmit={handleSubmit} className="flex flex-col gap-4">
 				<div>
-						<span className="mb-1 block text-sm text-muted-foreground">
+					<span className="mb-1 block text-muted-foreground text-sm">Name</span>
-							Name
-						</span>
 					<Input
 						type="text"
 						value={name}
@@ -125,14 +136,12 @@ export function CreatePlayerModal({
 						aria-label="Name"
 						autoFocus
 					/>
-						{error && <p className="mt-1 text-sm text-destructive">{error}</p>}
+					{!!error && <p className="mt-1 text-destructive text-sm">{error}</p>}
 				</div>
 
 				<div className="flex gap-3">
 					<div className="flex-1">
-							<span className="mb-1 block text-sm text-muted-foreground">
+						<span className="mb-1 block text-muted-foreground text-sm">AC</span>
-								AC
-							</span>
 						<Input
 							type="text"
 							inputMode="numeric"
@@ -144,7 +153,7 @@ export function CreatePlayerModal({
 						/>
 					</div>
 					<div className="flex-1">
-							<span className="mb-1 block text-sm text-muted-foreground">
+						<span className="mb-1 block text-muted-foreground text-sm">
 							Max HP
 						</span>
 						<Input
@@ -160,16 +169,14 @@ export function CreatePlayerModal({
 				</div>
 
 				<div>
-						<span className="mb-2 block text-sm text-muted-foreground">
+					<span className="mb-2 block text-muted-foreground text-sm">
 						Color
 					</span>
 					<ColorPalette value={color} onChange={setColor} />
 				</div>
 
 				<div>
-						<span className="mb-2 block text-sm text-muted-foreground">
+					<span className="mb-2 block text-muted-foreground text-sm">Icon</span>
-							Icon
-						</span>
 					<IconGrid value={icon} onChange={setIcon} />
 				</div>
 
@@ -180,7 +187,6 @@ export function CreatePlayerModal({
 					<Button type="submit">{isEdit ? "Save" : "Create"}</Button>
 				</div>
 			</form>
-			</div>
+		</dialog>
-		</div>
 	);
 }

apps/web/src/components/hp-adjust-popover.tsx

@@ -6,9 +6,10 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 
+const DIGITS_ONLY_REGEX = /^\d+$/;
+
 interface HpAdjustPopoverProps {
 	readonly onAdjust: (delta: number) => void;
 	readonly onClose: () => void;
@@ -86,7 +87,7 @@ export function HpAdjustPopover({ onAdjust, onClose }: HpAdjustPopoverProps) {
 	return (
 		<div
 			ref={ref}
-			className="fixed z-10 rounded-md border border-border bg-background p-2 shadow-lg"
+			className="card-glow fixed z-10 rounded-lg border border-border bg-background p-2"
 			style={
 				pos
 					? { top: pos.top, left: pos.left }
@@ -103,36 +104,32 @@ export function HpAdjustPopover({ onAdjust, onClose }: HpAdjustPopoverProps) {
 					className="h-7 w-[7ch] text-center text-sm tabular-nums"
 					onChange={(e) => {
 						const v = e.target.value;
-						if (v === "" || /^\d+$/.test(v)) {
+						if (v === "" || DIGITS_ONLY_REGEX.test(v)) {
 							setInputValue(v);
 						}
 					}}
 					onKeyDown={handleKeyDown}
 				/>
-				<Button
+				<button
 					type="button"
-					variant="ghost"
-					size="icon"
 					disabled={!isValid}
-					className="h-7 w-7 shrink-0 text-red-400 hover:bg-red-950 hover:text-red-300"
+					className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-red-400 transition-colors hover:bg-hp-damage-hover-bg hover:text-red-300 disabled:pointer-events-none disabled:opacity-50"
 					onClick={() => applyDelta(-1)}
 					title="Apply damage"
 					aria-label="Apply damage"
 				>
 					<Sword size={14} />
-				</Button>
+				</button>
-				<Button
+				<button
 					type="button"
-					variant="ghost"
-					size="icon"
 					disabled={!isValid}
-					className="h-7 w-7 shrink-0 text-emerald-400 hover:bg-emerald-950 hover:text-emerald-300"
+					className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-emerald-400 transition-colors hover:bg-hp-heal-hover-bg hover:text-emerald-300 disabled:pointer-events-none disabled:opacity-50"
 					onClick={() => applyDelta(1)}
 					title="Apply healing"
 					aria-label="Apply healing"
 				>
 					<Heart size={14} />
-				</Button>
+				</button>
 			</div>
 		</div>
 	);

apps/web/src/components/icon-grid.tsx

@@ -10,7 +10,7 @@ interface IconGridProps {
 
 const ICONS = [...VALID_PLAYER_ICONS] as PlayerIcon[];
 
-export function IconGrid({ value, onChange }: IconGridProps) {
+export function IconGrid({ value, onChange }: Readonly<IconGridProps>) {
 	return (
 		<div className="flex flex-wrap gap-2">
 			{ICONS.map((iconId) => {
@@ -19,11 +19,11 @@ export function IconGrid({ value, onChange }: IconGridProps) {
 					<button
 						key={iconId}
 						type="button"
-						onClick={() => onChange(iconId)}
+						onClick={() => onChange(value === iconId ? "" : iconId)}
 						className={cn(
 							"flex h-9 w-9 items-center justify-center rounded-md transition-all",
 							value === iconId
-								? "bg-primary/20 ring-2 ring-primary text-foreground"
+								? "bg-primary/20 text-foreground ring-2 ring-primary"
 								: "text-muted-foreground hover:bg-card hover:text-foreground",
 						)}
 						aria-label={iconId}

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

@@ -0,0 +1,71 @@
+import type { PlayerCharacter } from "@initiative/domain";
+import { type RefObject, useImperativeHandle, useState } from "react";
+import { usePlayerCharactersContext } from "../contexts/player-characters-context.js";
+import { CreatePlayerModal } from "./create-player-modal.js";
+import { PlayerManagement } from "./player-management.js";
+
+export interface PlayerCharacterSectionHandle {
+	openManagement: () => void;
+}
+
+export const PlayerCharacterSection = function PlayerCharacterSectionInner({
+	ref,
+}: {
+	ref?: RefObject<PlayerCharacterSectionHandle | null>;
+}) {
+	const { characters, createCharacter, editCharacter, deleteCharacter } =
+		usePlayerCharactersContext();
+
+	const [managementOpen, setManagementOpen] = useState(false);
+	const [createOpen, setCreateOpen] = useState(false);
+	const [editingPlayer, setEditingPlayer] = useState<
+		PlayerCharacter | undefined
+	>();
+
+	useImperativeHandle(ref, () => ({
+		openManagement: () => setManagementOpen(true),
+	}));
+
+	return (
+		<>
+			<CreatePlayerModal
+				open={createOpen}
+				onClose={() => {
+					setCreateOpen(false);
+					setEditingPlayer(undefined);
+					setManagementOpen(true);
+				}}
+				onSave={(name, ac, maxHp, color, icon) => {
+					if (editingPlayer) {
+						editCharacter(editingPlayer.id, {
+							name,
+							ac,
+							maxHp,
+							color: color ?? null,
+							icon: icon ?? null,
+						});
+					} else {
+						createCharacter(name, ac, maxHp, color, icon);
+					}
+				}}
+				playerCharacter={editingPlayer}
+			/>
+			<PlayerManagement
+				open={managementOpen}
+				onClose={() => setManagementOpen(false)}
+				characters={characters}
+				onEdit={(pc) => {
+					setEditingPlayer(pc);
+					setCreateOpen(true);
+					setManagementOpen(false);
+				}}
+				onDelete={(id) => deleteCharacter(id)}
+				onCreate={() => {
+					setEditingPlayer(undefined);
+					setCreateOpen(true);
+					setManagementOpen(false);
+				}}
+			/>
+		</>
+	);
+};

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

@@ -1,10 +1,6 @@
-import type {
+import type { PlayerCharacter, PlayerCharacterId } from "@initiative/domain";
-	PlayerCharacter,
-	PlayerCharacterId,
-	PlayerIcon,
-} from "@initiative/domain";
 import { Pencil, Plus, Trash2, X } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
 import { Button } from "./ui/button";
 import { ConfirmButton } from "./ui/confirm-button";
@@ -25,46 +21,60 @@ export function PlayerManagement({
 	onEdit,
 	onDelete,
 	onCreate,
-}: PlayerManagementProps) {
+}: Readonly<PlayerManagementProps>) {
-	useEffect(() => {
+	const dialogRef = useRef<HTMLDialogElement>(null);
-		if (!open) return;
-		function handleKeyDown(e: KeyboardEvent) {
-			if (e.key === "Escape") onClose();
-		}
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [open, onClose]);
 
-	if (!open) return null;
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (open && !dialog.open) {
+			dialog.showModal();
+		} else if (!open && dialog.open) {
+			dialog.close();
+		}
+	}, [open]);
+
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		function handleCancel(e: Event) {
+			e.preventDefault();
+			onClose();
+		}
+		function handleBackdropClick(e: MouseEvent) {
+			if (e.target === dialog) onClose();
+		}
+		dialog.addEventListener("cancel", handleCancel);
+		dialog.addEventListener("mousedown", handleBackdropClick);
+		return () => {
+			dialog.removeEventListener("cancel", handleCancel);
+			dialog.removeEventListener("mousedown", handleBackdropClick);
+		};
+	}, [onClose]);
 
 	return (
-		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop click to close
+		<dialog
-		<div
+			ref={dialogRef}
-			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+			className="card-glow m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 backdrop:bg-black/50"
-			onMouseDown={onClose}
-		>
-			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
-			<div
-				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
-				onMouseDown={(e) => e.stopPropagation()}
 		>
 			<div className="mb-4 flex items-center justify-between">
-					<h2 className="text-lg font-semibold text-foreground">
+				<h2 className="font-semibold text-foreground text-lg">
 					Player Characters
 				</h2>
-					<button
+				<Button
-						type="button"
+					variant="ghost"
+					size="icon"
 					onClick={onClose}
-						className="text-muted-foreground hover:text-foreground transition-colors"
+					className="text-muted-foreground"
 				>
 					<X size={20} />
-					</button>
+				</Button>
 			</div>
 
 			{characters.length === 0 ? (
 				<div className="flex flex-col items-center gap-3 py-8 text-center">
 					<p className="text-muted-foreground">No player characters yet</p>
-						<Button onClick={onCreate} size="sm">
+					<Button onClick={onCreate}>
 						<Plus size={16} />
 						Create your first player character
 					</Button>
@@ -72,52 +82,52 @@ export function PlayerManagement({
 			) : (
 				<div className="flex flex-col gap-1">
 					{characters.map((pc) => {
-							const Icon = PLAYER_ICON_MAP[pc.icon as PlayerIcon];
+						const Icon = pc.icon ? PLAYER_ICON_MAP[pc.icon] : undefined;
-							const color =
+						const color = pc.color ? PLAYER_COLOR_HEX[pc.color] : undefined;
-								PLAYER_COLOR_HEX[pc.color as keyof typeof PLAYER_COLOR_HEX];
 						return (
 							<div
 								key={pc.id}
-									className="group flex items-center gap-3 rounded-md px-3 py-2 hover:bg-background/50"
+								className="group flex items-center gap-3 rounded-md px-3 py-2 hover:bg-hover-neutral-bg"
 							>
-									{Icon && (
+								{!!Icon && (
 									<Icon size={18} style={{ color }} className="shrink-0" />
 								)}
-									<span className="flex-1 truncate text-sm text-foreground">
+								<span className="flex-1 truncate text-foreground text-sm">
 									{pc.name}
 								</span>
-									<span className="text-xs tabular-nums text-muted-foreground">
+								<span className="text-muted-foreground text-xs tabular-nums">
 									AC {pc.ac}
 								</span>
-									<span className="text-xs tabular-nums text-muted-foreground">
+								<span className="text-muted-foreground text-xs tabular-nums">
 									HP {pc.maxHp}
 								</span>
-									<button
+								<Button
-										type="button"
+									variant="ghost"
+									size="icon-sm"
 									onClick={() => onEdit(pc)}
-										className="text-muted-foreground hover:text-foreground transition-colors"
+									className="text-muted-foreground"
 									title="Edit"
 								>
 									<Pencil size={14} />
-									</button>
+								</Button>
 								<ConfirmButton
 									icon={<Trash2 size={14} />}
 									label="Delete player character"
 									onConfirm={() => onDelete(pc.id)}
-										className="h-6 w-6 text-muted-foreground"
+									size="icon-sm"
+									className="text-muted-foreground"
 								/>
 							</div>
 						);
 					})}
 					<div className="mt-2 flex justify-end">
-							<Button onClick={onCreate} size="sm" variant="ghost">
+						<Button onClick={onCreate} variant="ghost">
 							<Plus size={16} />
 							Add
 						</Button>
 					</div>
 				</div>
 			)}
-			</div>
+		</dialog>
-		</div>
 	);
 }

apps/web/src/components/roll-mode-menu.tsx

@@ -0,0 +1,88 @@
+import type { RollMode } from "@initiative/domain";
+import { ChevronsDown, ChevronsUp } from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+interface RollModeMenuProps {
+	readonly position: { x: number; y: number };
+	readonly onSelect: (mode: RollMode) => void;
+	readonly onClose: () => void;
+}
+
+export function RollModeMenu({
+	position,
+	onSelect,
+	onClose,
+}: RollModeMenuProps) {
+	const ref = useRef<HTMLDivElement>(null);
+	const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		const vw = document.documentElement.clientWidth;
+		const vh = document.documentElement.clientHeight;
+
+		let left = position.x;
+		let top = position.y;
+
+		if (left + rect.width > vw) left = vw - rect.width - 8;
+		if (left < 8) left = 8;
+		if (top + rect.height > vh) top = position.y - rect.height;
+		if (top < 8) top = 8;
+
+		setPos({ top, left });
+	}, [position.x, position.y]);
+
+	useEffect(() => {
+		function handleMouseDown(e: MouseEvent) {
+			if (ref.current && !ref.current.contains(e.target as Node)) {
+				onClose();
+			}
+		}
+		function handleKeyDown(e: KeyboardEvent) {
+			if (e.key === "Escape") onClose();
+		}
+		document.addEventListener("mousedown", handleMouseDown);
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", handleMouseDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [onClose]);
+
+	return (
+		<div
+			ref={ref}
+			className="card-glow fixed z-50 min-w-40 rounded-lg border border-border bg-card py-1"
+			style={
+				pos
+					? { top: pos.top, left: pos.left }
+					: { visibility: "hidden" as const }
+			}
+		>
+			<button
+				type="button"
+				className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-emerald-400 text-sm hover:bg-hover-neutral-bg"
+				onClick={() => {
+					onSelect("advantage");
+					onClose();
+				}}
+			>
+				<ChevronsUp className="h-4 w-4" />
+				Advantage
+			</button>
+			<button
+				type="button"
+				className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-red-400 text-sm hover:bg-hover-neutral-bg"
+				onClick={() => {
+					onSelect("disadvantage");
+					onClose();
+				}}
+			>
+				<ChevronsDown className="h-4 w-4" />
+				Disadvantage
+			</button>
+		</div>
+	);
+}

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

@@ -1,28 +1,29 @@
 import { Download, Loader2, Upload } from "lucide-react";
-import { useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
-import { getDefaultFetchUrl } from "../adapters/bestiary-index-adapter.js";
+import {
+	getDefaultFetchUrl,
+	getSourceDisplayName,
+} from "../adapters/bestiary-index-adapter.js";
+import { useBestiaryContext } from "../contexts/bestiary-context.js";
 import { Button } from "./ui/button.js";
 import { Input } from "./ui/input.js";
 
 interface SourceFetchPromptProps {
 	sourceCode: string;
-	sourceDisplayName: string;
-	fetchAndCacheSource: (sourceCode: string, url: string) => Promise<void>;
 	onSourceLoaded: () => void;
-	onUploadSource: (sourceCode: string, jsonData: unknown) => Promise<void>;
 }
 
 export function SourceFetchPrompt({
 	sourceCode,
-	sourceDisplayName,
-	fetchAndCacheSource,
 	onSourceLoaded,
-	onUploadSource,
+}: Readonly<SourceFetchPromptProps>) {
-}: SourceFetchPromptProps) {
+	const { fetchAndCacheSource, uploadAndCacheSource } = useBestiaryContext();
+	const sourceDisplayName = getSourceDisplayName(sourceCode);
 	const [url, setUrl] = useState(() => getDefaultFetchUrl(sourceCode));
 	const [status, setStatus] = useState<"idle" | "fetching" | "error">("idle");
 	const [error, setError] = useState<string>("");
 	const fileInputRef = useRef<HTMLInputElement>(null);
+	const sourceUrlId = useId();
 
 	const handleFetch = async () => {
 		setStatus("fetching");
@@ -46,7 +47,7 @@ export function SourceFetchPrompt({
 		try {
 			const text = await file.text();
 			const json = JSON.parse(text);
-			await onUploadSource(sourceCode, json);
+			await uploadAndCacheSource(sourceCode, json);
 			onSourceLoaded();
 		} catch (err) {
 			setStatus("error");
@@ -64,21 +65,21 @@ export function SourceFetchPrompt({
 	return (
 		<div className="flex flex-col gap-4">
 			<div>
-				<h3 className="text-sm font-semibold text-foreground">
+				<h3 className="font-semibold text-foreground text-sm">
 					Load {sourceDisplayName}
 				</h3>
-				<p className="mt-1 text-xs text-muted-foreground">
+				<p className="mt-1 text-muted-foreground text-xs">
 					Stat block data for this source needs to be loaded. Enter a URL or
 					upload a JSON file.
 				</p>
 			</div>
 
 			<div className="flex flex-col gap-2">
-				<label htmlFor="source-url" className="text-xs text-muted-foreground">
+				<label htmlFor={sourceUrlId} className="text-muted-foreground text-xs">
 					Source URL
 				</label>
 				<Input
-					id="source-url"
+					id={sourceUrlId}
 					type="url"
 					value={url}
 					onChange={(e) => setUrl(e.target.value)}
@@ -88,11 +89,7 @@ export function SourceFetchPrompt({
 			</div>
 
 			<div className="flex items-center gap-2">
-				<Button
+				<Button onClick={handleFetch} disabled={status === "fetching" || !url}>
-					size="sm"
-					onClick={handleFetch}
-					disabled={status === "fetching" || !url}
-				>
 					{status === "fetching" ? (
 						<Loader2 className="mr-1 h-3 w-3 animate-spin" />
 					) : (
@@ -101,10 +98,9 @@ export function SourceFetchPrompt({
 					{status === "fetching" ? "Loading..." : "Load"}
 				</Button>
 
-				<span className="text-xs text-muted-foreground">or</span>
+				<span className="text-muted-foreground text-xs">or</span>
 
 				<Button
-					size="sm"
 					variant="outline"
 					onClick={() => fileInputRef.current?.click()}
 					disabled={status === "fetching"}
@@ -122,7 +118,7 @@ export function SourceFetchPrompt({
 			</div>
 
 			{status === "error" && (
-				<div className="rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+				<div className="rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-destructive text-xs">
 					{error}
 				</div>
 			)}

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

@@ -1,15 +1,31 @@
-import { Database, Trash2 } from "lucide-react";
+import { Database, Search, Trash2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useOptimistic,
+	useState,
+} from "react";
 import type { CachedSourceInfo } from "../adapters/bestiary-cache.js";
 import * as bestiaryCache from "../adapters/bestiary-cache.js";
+import { useBestiaryContext } from "../contexts/bestiary-context.js";
 import { Button } from "./ui/button.js";
+import { Input } from "./ui/input.js";
 
-interface SourceManagerProps {
+export function SourceManager() {
-	onCacheCleared: () => void;
+	const { refreshCache } = useBestiaryContext();
-}
-
-export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 	const [sources, setSources] = useState<CachedSourceInfo[]>([]);
+	const [filter, setFilter] = useState("");
+	const [optimisticSources, applyOptimistic] = useOptimistic(
+		sources,
+		(
+			state,
+			action: { type: "remove"; sourceCode: string } | { type: "clear" },
+		) =>
+			action.type === "clear"
+				? []
+				: state.filter((s) => s.sourceCode !== action.sourceCode),
+	);
 
 	const loadSources = useCallback(async () => {
 		const cached = await bestiaryCache.getCachedSources();
@@ -17,26 +33,37 @@ export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 	}, []);
 
 	useEffect(() => {
-		loadSources();
+		void loadSources();
 	}, [loadSources]);
 
 	const handleClearSource = async (sourceCode: string) => {
+		applyOptimistic({ type: "remove", sourceCode });
 		await bestiaryCache.clearSource(sourceCode);
 		await loadSources();
-		onCacheCleared();
+		void refreshCache();
 	};
 
 	const handleClearAll = async () => {
+		applyOptimistic({ type: "clear" });
 		await bestiaryCache.clearAll();
 		await loadSources();
-		onCacheCleared();
+		void refreshCache();
 	};
 
-	if (sources.length === 0) {
+	const filteredSources = useMemo(() => {
+		const term = filter.toLowerCase();
+		return term
+			? optimisticSources.filter((s) =>
+					s.displayName.toLowerCase().includes(term),
+				)
+			: optimisticSources;
+	}, [optimisticSources, filter]);
+
+	if (optimisticSources.length === 0) {
 		return (
 			<div className="flex flex-col items-center gap-2 py-8 text-center">
 				<Database className="h-8 w-8 text-muted-foreground" />
-				<p className="text-sm text-muted-foreground">No cached sources</p>
+				<p className="text-muted-foreground text-sm">No cached sources</p>
 			</div>
 		);
 	}
@@ -44,30 +71,38 @@ export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 	return (
 		<div className="flex flex-col gap-3">
 			<div className="flex items-center justify-between">
-				<span className="text-sm font-semibold text-foreground">
+				<span className="font-semibold text-foreground text-sm">
 					Cached Sources
 				</span>
 				<Button
-					size="sm"
 					variant="outline"
-					className="hover:text-hover-destructive hover:border-hover-destructive"
+					className="hover:border-hover-destructive hover:text-hover-destructive"
 					onClick={handleClearAll}
 				>
 					<Trash2 className="mr-1 h-3 w-3" />
 					Clear All
 				</Button>
 			</div>
+			<div className="relative">
+				<Search className="pointer-events-none absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+				<Input
+					placeholder="Filter sources…"
+					value={filter}
+					onChange={(e) => setFilter(e.target.value)}
+					className="pl-8"
+				/>
+			</div>
 			<ul className="flex flex-col gap-1">
-				{sources.map((source) => (
+				{filteredSources.map((source) => (
 					<li
 						key={source.sourceCode}
 						className="flex items-center justify-between rounded-md border border-border px-3 py-2"
 					>
 						<div>
-							<span className="text-sm text-foreground">
+							<span className="text-foreground text-sm">
 								{source.displayName}
 							</span>
-							<span className="ml-2 text-xs text-muted-foreground">
+							<span className="ml-2 text-muted-foreground text-xs">
 								{source.creatureCount} creatures
 							</span>
 						</div>
@@ -75,6 +110,7 @@ export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 							type="button"
 							onClick={() => handleClearSource(source.sourceCode)}
 							className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-hover-destructive-bg hover:text-hover-destructive"
+							aria-label={`Remove ${source.displayName}`}
 						>
 							<Trash2 className="h-3.5 w-3.5" />
 						</button>

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

@@ -1,36 +1,20 @@
-import type { Creature, CreatureId } from "@initiative/domain";
+import type { CreatureId } from "@initiative/domain";
 import { PanelRightClose, Pin, PinOff } from "lucide-react";
 import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
-import { getSourceDisplayName } from "../adapters/bestiary-index-adapter.js";
+import { useBestiaryContext } from "../contexts/bestiary-context.js";
-import type { BulkImportState } from "../hooks/use-bulk-import.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 { SourceFetchPrompt } from "./source-fetch-prompt.js";
+import { SourceManager } from "./source-manager.js";
 import { StatBlock } from "./stat-block.js";
+import { Button } from "./ui/button.js";
 
 interface StatBlockPanelProps {
-	creatureId: CreatureId | null;
-	creature: Creature | null;
-	isSourceCached: (sourceCode: string) => Promise<boolean>;
-	fetchAndCacheSource: (sourceCode: string, url: string) => Promise<void>;
-	uploadAndCacheSource: (
-		sourceCode: string,
-		jsonData: unknown,
-	) => Promise<void>;
-	refreshCache: () => Promise<void>;
 	panelRole: "browse" | "pinned";
-	isFolded: boolean;
-	onToggleFold: () => void;
-	onPin: () => void;
-	onUnpin: () => void;
-	showPinButton: boolean;
 	side: "left" | "right";
-	onDismiss: () => void;
-	bulkImportMode?: boolean;
-	bulkImportState?: BulkImportState;
-	onStartBulkImport?: (baseUrl: string) => void;
-	onBulkImportDone?: () => void;
 }
 
 function extractSourceCode(cId: CreatureId): string {
@@ -39,25 +23,26 @@ function extractSourceCode(cId: CreatureId): string {
 	return cId.slice(0, colonIndex).toUpperCase();
 }
 
-function FoldedTab({
+function CollapsedTab({
 	creatureName,
 	side,
-	onToggleFold,
+	onToggleCollapse,
-}: {
+}: Readonly<{
 	creatureName: string;
 	side: "left" | "right";
-	onToggleFold: () => void;
+	onToggleCollapse: () => void;
-}) {
+}>) {
 	return (
 		<button
 			type="button"
-			onClick={onToggleFold}
+			onClick={onToggleCollapse}
-			className={`flex h-full w-[40px] cursor-pointer items-center justify-center text-muted-foreground hover:text-hover-neutral ${
+			className={cn(
-				side === "right" ? "self-start" : "self-end"
+				"flex h-full w-[40px] cursor-pointer items-center justify-center text-muted-foreground hover:text-hover-neutral",
-			}`}
+				side === "right" ? "self-start" : "self-end",
-			aria-label="Unfold stat block panel"
+			)}
+			aria-label="Expand stat block panel"
 		>
-			<span className="writing-vertical-rl text-sm font-medium">
+			<span className="writing-vertical-rl font-medium text-sm">
 				{creatureName}
 			</span>
 		</button>
@@ -67,50 +52,53 @@ function FoldedTab({
 function PanelHeader({
 	panelRole,
 	showPinButton,
-	onToggleFold,
+	onToggleCollapse,
 	onPin,
 	onUnpin,
-}: {
+}: Readonly<{
 	panelRole: "browse" | "pinned";
 	showPinButton: boolean;
-	onToggleFold: () => void;
+	onToggleCollapse: () => void;
 	onPin: () => void;
 	onUnpin: () => void;
-}) {
+}>) {
 	return (
-		<div className="flex items-center justify-between border-b border-border px-4 py-2">
+		<div className="flex items-center justify-between border-border border-b px-4 py-2">
 			<div className="flex items-center gap-1">
 				{panelRole === "browse" && (
-					<button
+					<Button
-						type="button"
+						variant="ghost"
-						onClick={onToggleFold}
+						size="icon-sm"
-						className="text-muted-foreground hover:text-hover-neutral"
+						onClick={onToggleCollapse}
-						aria-label="Fold stat block panel"
+						className="text-muted-foreground"
+						aria-label="Collapse stat block panel"
 					>
 						<PanelRightClose className="h-4 w-4" />
-					</button>
+					</Button>
 				)}
 			</div>
 			<div className="flex items-center gap-1">
 				{panelRole === "browse" && showPinButton && (
-					<button
+					<Button
-						type="button"
+						variant="ghost"
+						size="icon-sm"
 						onClick={onPin}
-						className="text-muted-foreground hover:text-hover-neutral"
+						className="text-muted-foreground"
 						aria-label="Pin creature"
 					>
 						<Pin className="h-4 w-4" />
-					</button>
+					</Button>
 				)}
 				{panelRole === "pinned" && (
-					<button
+					<Button
-						type="button"
+						variant="ghost"
+						size="icon-sm"
 						onClick={onUnpin}
-						className="text-muted-foreground hover:text-hover-neutral"
+						className="text-muted-foreground"
 						aria-label="Unpin creature"
 					>
 						<PinOff className="h-4 w-4" />
-					</button>
+					</Button>
 				)}
 			</div>
 		</div>
@@ -118,48 +106,52 @@ function PanelHeader({
 }
 
 function DesktopPanel({
-	isFolded,
+	isCollapsed,
 	side,
 	creatureName,
 	panelRole,
 	showPinButton,
-	onToggleFold,
+	onToggleCollapse,
 	onPin,
 	onUnpin,
 	children,
-}: {
+}: Readonly<{
-	isFolded: boolean;
+	isCollapsed: boolean;
 	side: "left" | "right";
 	creatureName: string;
 	panelRole: "browse" | "pinned";
 	showPinButton: boolean;
-	onToggleFold: () => void;
+	onToggleCollapse: () => void;
 	onPin: () => void;
 	onUnpin: () => void;
 	children: ReactNode;
-}) {
+}>) {
 	const sideClasses = side === "left" ? "left-0 border-r" : "right-0 border-l";
-	const foldedTranslate =
+	const collapsedTranslate =
 		side === "right"
 			? "translate-x-[calc(100%-40px)]"
 			: "translate-x-[calc(-100%+40px)]";
 
 	return (
 		<div
-			className={`fixed top-0 bottom-0 flex w-[400px] flex-col border-border bg-card transition-slide-panel ${sideClasses} ${isFolded ? foldedTranslate : "translate-x-0"}`}
+			className={cn(
+				"panel-glow fixed top-0 bottom-0 flex w-[400px] flex-col border-border bg-card transition-slide-panel",
+				sideClasses,
+				isCollapsed ? collapsedTranslate : "translate-x-0",
+			)}
 		>
-			{isFolded ? (
+			{isCollapsed ? (
-				<FoldedTab
+				<CollapsedTab
 					creatureName={creatureName}
 					side={side}
-					onToggleFold={onToggleFold}
+					onToggleCollapse={onToggleCollapse}
 				/>
 			) : (
 				<>
 					<PanelHeader
 						panelRole={panelRole}
 						showPinButton={showPinButton}
-						onToggleFold={onToggleFold}
+						onToggleCollapse={onToggleCollapse}
 						onPin={onPin}
 						onUnpin={onUnpin}
 					/>
@@ -173,36 +165,40 @@ function DesktopPanel({
 function MobileDrawer({
 	onDismiss,
 	children,
-}: {
+}: Readonly<{
 	onDismiss: () => void;
 	children: ReactNode;
-}) {
+}>) {
 	const { offsetX, isSwiping, handlers } = useSwipeToDismiss(onDismiss);
 
 	return (
 		<div className="fixed inset-0 z-50">
 			<button
 				type="button"
-				className="absolute inset-0 bg-black/50 animate-in fade-in"
+				className="fade-in absolute inset-0 animate-in bg-black/50"
 				onClick={onDismiss}
 				aria-label="Close stat block"
 			/>
 			<div
-				className={`absolute top-0 right-0 bottom-0 w-[85%] max-w-md border-l border-border bg-card shadow-xl ${isSwiping ? "" : "animate-slide-in-right"}`}
+				className={cn(
+					"panel-glow absolute top-0 right-0 bottom-0 w-[85%] max-w-md border-border border-l bg-card",
+					!isSwiping && "animate-slide-in-right",
+				)}
 				style={
 					isSwiping ? { transform: `translateX(${offsetX}px)` } : undefined
 				}
 				{...handlers}
 			>
-				<div className="flex items-center justify-between border-b border-border px-4 py-2">
+				<div className="flex items-center justify-between border-border border-b px-4 py-2">
-					<button
+					<Button
-						type="button"
+						variant="ghost"
+						size="icon-sm"
 						onClick={onDismiss}
-						className="text-muted-foreground hover:text-hover-neutral"
+						className="text-muted-foreground"
-						aria-label="Fold stat block panel"
+						aria-label="Collapse stat block panel"
 					>
 						<PanelRightClose className="h-4 w-4" />
-					</button>
+					</Button>
 				</div>
 				<div className="h-[calc(100%-41px)] overflow-y-auto p-4">
 					{children}
@@ -212,34 +208,57 @@ function MobileDrawer({
 	);
 }
 
-export function StatBlockPanel({
+function usePanelRole(panelRole: "browse" | "pinned") {
+	const sidePanel = useSidePanelContext();
+	const { getCreature } = useBestiaryContext();
+
+	const creatureId =
+		panelRole === "browse"
+			? sidePanel.selectedCreatureId
+			: sidePanel.pinnedCreatureId;
+	const creature = creatureId ? (getCreature(creatureId) ?? null) : null;
+
+	const isBrowse = panelRole === "browse";
+	return {
 		creatureId,
 		creature,
-	isSourceCached,
+		isCollapsed: isBrowse ? sidePanel.isRightPanelCollapsed : false,
-	fetchAndCacheSource,
+		onToggleCollapse: isBrowse ? sidePanel.toggleCollapse : () => {},
-	uploadAndCacheSource,
+		onDismiss: isBrowse ? sidePanel.dismissPanel : () => {},
-	refreshCache,
+		onPin: isBrowse ? sidePanel.togglePin : () => {},
+		onUnpin: panelRole === "pinned" ? sidePanel.unpin : () => {},
+		showPinButton: isBrowse && sidePanel.isWideDesktop && !!creature,
+		bulkImportMode: isBrowse && sidePanel.bulkImportMode,
+		sourceManagerMode: isBrowse && sidePanel.sourceManagerMode,
+	};
+}
+
+export function StatBlockPanel({
 	panelRole,
-	isFolded,
+	side,
-	onToggleFold,
+}: Readonly<StatBlockPanelProps>) {
+	const { isSourceCached } = useBestiaryContext();
+	const {
+		creatureId,
+		creature,
+		isCollapsed,
+		onToggleCollapse,
+		onDismiss,
 		onPin,
 		onUnpin,
 		showPinButton,
-	side,
-	onDismiss,
 		bulkImportMode,
-	bulkImportState,
+		sourceManagerMode,
-	onStartBulkImport,
+	} = usePanelRole(panelRole);
-	onBulkImportDone,
+
-}: StatBlockPanelProps) {
 	const [isDesktop, setIsDesktop] = useState(
-		() => window.matchMedia("(min-width: 1024px)").matches,
+		() => globalThis.matchMedia("(min-width: 1024px)").matches,
 	);
 	const [needsFetch, setNeedsFetch] = useState(false);
 	const [checkingCache, setCheckingCache] = useState(false);
 
 	useEffect(() => {
-		const mq = window.matchMedia("(min-width: 1024px)");
+		const mq = globalThis.matchMedia("(min-width: 1024px)");
 		const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
 		mq.addEventListener("change", handler);
 		return () => mq.removeEventListener("change", handler);
@@ -258,40 +277,32 @@ export function StatBlockPanel({
 		}
 
 		setCheckingCache(true);
-		isSourceCached(sourceCode).then((cached) => {
+		void isSourceCached(sourceCode).then((cached) => {
 			setNeedsFetch(!cached);
 			setCheckingCache(false);
 		});
 	}, [creatureId, creature, isSourceCached]);
 
-	if (!creatureId && !bulkImportMode) return null;
+	if (!creatureId && !bulkImportMode && !sourceManagerMode) return null;
 
 	const sourceCode = creatureId ? extractSourceCode(creatureId) : "";
 
-	const handleSourceLoaded = async () => {
+	const handleSourceLoaded = () => {
-		await refreshCache();
 		setNeedsFetch(false);
 	};
 
 	const renderContent = () => {
-		if (
+		if (sourceManagerMode) {
-			bulkImportMode &&
+			return <SourceManager />;
-			bulkImportState &&
+		}
-			onStartBulkImport &&
+
-			onBulkImportDone
+		if (bulkImportMode) {
-		) {
+			return <BulkImportPrompt />;
-			return (
-				<BulkImportPrompt
-					importState={bulkImportState}
-					onStartImport={onStartBulkImport}
-					onDone={onBulkImportDone}
-				/>
-			);
 		}
 
 		if (checkingCache) {
 			return (
-				<div className="p-4 text-sm text-muted-foreground">Loading...</div>
+				<div className="p-4 text-muted-foreground text-sm">Loading...</div>
 			);
 		}
 
@@ -303,33 +314,32 @@ export function StatBlockPanel({
 			return (
 				<SourceFetchPrompt
 					sourceCode={sourceCode}
-					sourceDisplayName={getSourceDisplayName(sourceCode)}
-					fetchAndCacheSource={fetchAndCacheSource}
 					onSourceLoaded={handleSourceLoaded}
-					onUploadSource={uploadAndCacheSource}
 				/>
 			);
 		}
 
 		return (
-			<div className="p-4 text-sm text-muted-foreground">
+			<div className="p-4 text-muted-foreground text-sm">
 				No stat block available
 			</div>
 		);
 	};
 
-	const creatureName =
+	let fallbackName = "Creature";
-		creature?.name ?? (bulkImportMode ? "Bulk Import" : "Creature");
+	if (sourceManagerMode) fallbackName = "Sources";
+	else if (bulkImportMode) fallbackName = "Import All Sources";
+	const creatureName = creature?.name ?? fallbackName;
 
 	if (isDesktop) {
 		return (
 			<DesktopPanel
-				isFolded={isFolded}
+				isCollapsed={isCollapsed}
 				side={side}
 				creatureName={creatureName}
 				panelRole={panelRole}
 				showPinButton={showPinButton}
-				onToggleFold={onToggleFold}
+				onToggleCollapse={onToggleCollapse}
 				onPin={onPin}
 				onUnpin={onUnpin}
 			>
@@ -338,7 +348,7 @@ export function StatBlockPanel({
 		);
 	}
 
-	if (panelRole === "pinned") return null;
+	if (panelRole === "pinned" || isCollapsed) return null;
 
 	return <MobileDrawer onDismiss={onDismiss}>{renderContent()}</MobileDrawer>;
 }

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

@@ -16,10 +16,10 @@ function abilityMod(score: number): string {
 function PropertyLine({
 	label,
 	value,
-}: {
+}: Readonly<{
 	label: string;
 	value: string | undefined;
-}) {
+}>) {
 	if (!value) return null;
 	return (
 		<div className="text-sm">
@@ -30,11 +30,11 @@ function PropertyLine({
 
 function SectionDivider() {
 	return (
-		<div className="my-2 h-px bg-gradient-to-r from-amber-800/60 via-amber-700/40 to-transparent" />
+		<div className="my-2 h-px bg-gradient-to-r from-stat-divider-from via-stat-divider-via to-transparent" />
 	);
 }
 
-export function StatBlock({ creature }: StatBlockProps) {
+export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 	const abilities = [
 		{ label: "STR", score: creature.abilities.str },
 		{ label: "DEX", score: creature.abilities.dex },
@@ -54,11 +54,11 @@ export function StatBlock({ creature }: StatBlockProps) {
 		<div className="space-y-1 text-foreground">
 			{/* Header */}
 			<div>
-				<h2 className="text-xl font-bold text-amber-400">{creature.name}</h2>
+				<h2 className="font-bold text-stat-heading text-xl">{creature.name}</h2>
-				<p className="text-sm italic text-muted-foreground">
+				<p className="text-muted-foreground text-sm italic">
 					{creature.size} {creature.type}, {creature.alignment}
 				</p>
-				<p className="text-xs text-muted-foreground">
+				<p className="text-muted-foreground text-xs">
 					{creature.sourceDisplayName}
 				</p>
 			</div>
@@ -69,7 +69,7 @@ export function StatBlock({ creature }: StatBlockProps) {
 			<div className="space-y-0.5 text-sm">
 				<div>
 					<span className="font-semibold">Armor Class</span> {creature.ac}
-					{creature.acSource && (
+					{!!creature.acSource && (
 						<span className="text-muted-foreground">
 							{" "}
 							({creature.acSource})
@@ -194,7 +194,7 @@ export function StatBlock({ creature }: StatBlockProps) {
 			{creature.actions && creature.actions.length > 0 && (
 				<>
 					<SectionDivider />
-					<h3 className="text-base font-bold text-amber-400">Actions</h3>
+					<h3 className="font-bold text-base text-stat-heading">Actions</h3>
 					<div className="space-y-2">
 						{creature.actions.map((a) => (
 							<div key={a.name} className="text-sm">
@@ -209,7 +209,9 @@ export function StatBlock({ creature }: StatBlockProps) {
 			{creature.bonusActions && creature.bonusActions.length > 0 && (
 				<>
 					<SectionDivider />
-					<h3 className="text-base font-bold text-amber-400">Bonus Actions</h3>
+					<h3 className="font-bold text-base text-stat-heading">
+						Bonus Actions
+					</h3>
 					<div className="space-y-2">
 						{creature.bonusActions.map((a) => (
 							<div key={a.name} className="text-sm">
@@ -224,7 +226,7 @@ export function StatBlock({ creature }: StatBlockProps) {
 			{creature.reactions && creature.reactions.length > 0 && (
 				<>
 					<SectionDivider />
-					<h3 className="text-base font-bold text-amber-400">Reactions</h3>
+					<h3 className="font-bold text-base text-stat-heading">Reactions</h3>
 					<div className="space-y-2">
 						{creature.reactions.map((a) => (
 							<div key={a.name} className="text-sm">
@@ -236,13 +238,13 @@ export function StatBlock({ creature }: StatBlockProps) {
 			)}
 
 			{/* Legendary Actions */}
-			{creature.legendaryActions && (
+			{!!creature.legendaryActions && (
 				<>
 					<SectionDivider />
-					<h3 className="text-base font-bold text-amber-400">
+					<h3 className="font-bold text-base text-stat-heading">
 						Legendary Actions
 					</h3>
-					<p className="text-sm italic text-muted-foreground">
+					<p className="text-muted-foreground text-sm italic">
 						{creature.legendaryActions.preamble}
 					</p>
 					<div className="space-y-2">

apps/web/src/components/toast.tsx

@@ -1,6 +1,7 @@
 import { X } from "lucide-react";
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
+import { Button } from "./ui/button.js";
 
 interface ToastProps {
 	message: string;
@@ -22,9 +23,9 @@ export function Toast({
 	}, [autoDismissMs, onDismiss]);
 
 	return createPortal(
-		<div className="fixed bottom-4 left-1/2 z-50 -translate-x-1/2">
+		<div className="fixed bottom-4 left-4 z-50">
-			<div className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 shadow-lg">
+			<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
-				<span className="text-sm text-foreground">{message}</span>
+				<span className="text-foreground text-sm">{message}</span>
 				{progress !== undefined && (
 					<div className="h-2 w-24 overflow-hidden rounded-full bg-muted">
 						<div
@@ -33,13 +34,14 @@ export function Toast({
 						/>
 					</div>
 				)}
-				<button
+				<Button
-					type="button"
+					variant="ghost"
+					size="icon-sm"
 					onClick={onDismiss}
-					className="text-muted-foreground hover:text-hover-neutral"
+					className="text-muted-foreground"
 				>
 					<X className="h-3 w-3" />
-				</button>
+				</Button>
 			</div>
 		</div>,
 		document.body,

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

@@ -1,30 +1,22 @@
-import type { Encounter } from "@initiative/domain";
 import { StepBack, StepForward, Trash2 } from "lucide-react";
-import { Button } from "./ui/button";
+import { useEncounterContext } from "../contexts/encounter-context.js";
-import { ConfirmButton } from "./ui/confirm-button";
+import { Button } from "./ui/button.js";
+import { ConfirmButton } from "./ui/confirm-button.js";
 
-interface TurnNavigationProps {
+export function TurnNavigation() {
-	encounter: Encounter;
+	const { encounter, advanceTurn, retreatTurn, clearEncounter } =
-	onAdvanceTurn: () => void;
+		useEncounterContext();
-	onRetreatTurn: () => void;
-	onClearEncounter: () => void;
-}
 
-export function TurnNavigation({
-	encounter,
-	onAdvanceTurn,
-	onRetreatTurn,
-	onClearEncounter,
-}: TurnNavigationProps) {
 	const hasCombatants = encounter.combatants.length > 0;
 	const isAtStart = encounter.roundNumber === 1 && encounter.activeIndex === 0;
 	const activeCombatant = encounter.combatants[encounter.activeIndex];
 
 	return (
-		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
+		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
 			<Button
+				variant="ghost"
 				size="icon"
-				onClick={onRetreatTurn}
+				onClick={retreatTurn}
 				disabled={!hasCombatants || isAtStart}
 				title="Previous turn"
 				aria-label="Previous turn"
@@ -32,8 +24,8 @@ export function TurnNavigation({
 				<StepBack className="h-5 w-5" />
 			</Button>
 
-			<div className="min-w-0 flex-1 flex items-center justify-center gap-2 text-sm">
+			<div className="flex min-w-0 flex-1 items-center justify-center gap-2 text-sm">
-				<span className="rounded-full bg-muted text-foreground text-sm px-2 py-0.5 font-semibold shrink-0">
+				<span className="shrink-0 rounded-full bg-muted px-2 py-0.5 font-semibold text-foreground text-sm">
 					R{encounter.roundNumber}
 				</span>
 				{activeCombatant ? (
@@ -47,13 +39,14 @@ export function TurnNavigation({
 				<ConfirmButton
 					icon={<Trash2 className="h-5 w-5" />}
 					label="Clear encounter"
-					onConfirm={onClearEncounter}
+					onConfirm={clearEncounter}
 					disabled={!hasCombatants}
 					className="text-muted-foreground"
 				/>
 				<Button
+					variant="ghost"
 					size="icon"
-					onClick={onAdvanceTurn}
+					onClick={advanceTurn}
 					disabled={!hasCombatants}
 					title="Next turn"
 					aria-label="Next turn"

apps/web/src/components/ui/button.tsx

@@ -9,13 +9,14 @@ const buttonVariants = cva(
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
 				outline:
-					"border border-border bg-transparent hover:bg-hover-neutral-bg hover:text-hover-neutral",
+					"border border-border bg-background/50 text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
-				ghost: "hover:bg-hover-neutral-bg hover:text-hover-neutral",
+				ghost:
+					"text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
 			},
 			size: {
-				default: "h-9 px-4 py-2",
+				default: "h-8 px-3 text-xs",
-				sm: "h-8 px-3 text-xs",
 				icon: "h-8 w-8",
+				"icon-sm": "h-6 w-6",
 			},
 		},
 		defaultVariants: {

apps/web/src/components/ui/confirm-button.tsx

@@ -13,6 +13,7 @@ interface ConfirmButtonProps {
 	readonly onConfirm: () => void;
 	readonly icon: ReactElement;
 	readonly label: string;
+	readonly size?: "icon" | "icon-sm";
 	readonly className?: string;
 	readonly disabled?: boolean;
 }
@@ -23,6 +24,7 @@ export function ConfirmButton({
 	onConfirm,
 	icon,
 	label,
+	size = "icon",
 	className,
 	disabled,
 }: ConfirmButtonProps) {
@@ -53,17 +55,17 @@ export function ConfirmButton({
 			}
 		}
 
-		function handleKeyDown(e: KeyboardEvent) {
+		function handleEscapeKey(e: KeyboardEvent) {
 			if (e.key === "Escape") {
 				revert();
 			}
 		}
 
 		document.addEventListener("mousedown", handleMouseDown);
-		document.addEventListener("keydown", handleKeyDown);
+		document.addEventListener("keydown", handleEscapeKey);
 		return () => {
 			document.removeEventListener("mousedown", handleMouseDown);
-			document.removeEventListener("keydown", handleKeyDown);
+			document.removeEventListener("keydown", handleEscapeKey);
 		};
 	}, [isConfirming, revert]);
 
@@ -94,11 +96,11 @@ export function ConfirmButton({
 		<div ref={wrapperRef} className="inline-flex">
 			<Button
 				variant="ghost"
-				size="icon"
+				size={size}
 				className={cn(
 					className,
 					isConfirming
-						? "bg-destructive text-primary-foreground rounded-md animate-confirm-pulse hover:bg-destructive hover:text-primary-foreground"
+						? "animate-confirm-pulse rounded-md bg-destructive text-primary-foreground hover:bg-destructive hover:text-primary-foreground"
 						: "hover:text-hover-destructive",
 				)}
 				onClick={handleClick}
@@ -108,7 +110,8 @@ export function ConfirmButton({
 				aria-label={isConfirming ? `Confirm ${label.toLowerCase()}` : label}
 				title={isConfirming ? `Confirm ${label.toLowerCase()}` : label}
 			>
-				{isConfirming ? <Check size={16} /> : icon}
+				{isConfirming ? <Check size={16} /> : null}
+				{!isConfirming && icon}
 			</Button>
 		</div>
 	);

apps/web/src/components/ui/input.tsx

@@ -1,19 +1,21 @@
-import { forwardRef, type InputHTMLAttributes } from "react";
+import type { InputHTMLAttributes, RefObject } from "react";
 import { cn } from "../../lib/utils";
 
 type InputProps = InputHTMLAttributes<HTMLInputElement>;
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(
+export const Input = ({
-	({ className, ...props }, ref) => {
+	className,
+	ref,
+	...props
+}: InputProps & { ref?: RefObject<HTMLInputElement | null> }) => {
 	return (
 		<input
 			ref={ref}
 			className={cn(
-					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-foreground text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
 		/>
 	);
-	},
+};
-);

apps/web/src/components/ui/overflow-menu.tsx

@@ -7,6 +7,7 @@ export interface OverflowMenuItem {
 	readonly label: string;
 	readonly onClick: () => void;
 	readonly disabled?: boolean;
+	readonly keepOpen?: boolean;
 }
 
 interface OverflowMenuProps {
@@ -48,17 +49,17 @@ export function OverflowMenu({ items }: OverflowMenuProps) {
 			>
 				<EllipsisVertical className="h-5 w-5" />
 			</Button>
-			{open && (
+			{!!open && (
-				<div className="absolute bottom-full right-0 z-50 mb-1 min-w-48 rounded-md border border-border bg-card py-1 shadow-lg">
+				<div className="card-glow absolute right-0 bottom-full z-50 mb-1 min-w-48 rounded-lg border border-border bg-card py-1">
 					{items.map((item) => (
 						<button
 							key={item.label}
 							type="button"
-							className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-foreground hover:bg-muted/20 disabled:pointer-events-none disabled:opacity-50"
+							className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-foreground text-sm hover:bg-hover-neutral-bg disabled:pointer-events-none disabled:opacity-50"
 							disabled={item.disabled}
 							onClick={() => {
 								item.onClick();
-								setOpen(false);
+								if (!item.keepOpen) setOpen(false);
 							}}
 						>
 							{item.icon}

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

@@ -0,0 +1,23 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { useBestiary } from "../hooks/use-bestiary.js";
+
+export type { SearchResult } from "../hooks/use-bestiary.js";
+
+type BestiaryContextValue = ReturnType<typeof useBestiary>;
+
+const BestiaryContext = createContext<BestiaryContextValue | null>(null);
+
+export function BestiaryProvider({ children }: { children: ReactNode }) {
+	const value = useBestiary();
+	return (
+		<BestiaryContext.Provider value={value}>
+			{children}
+		</BestiaryContext.Provider>
+	);
+}
+
+export function useBestiaryContext(): BestiaryContextValue {
+	const ctx = useContext(BestiaryContext);
+	if (!ctx) throw new Error("useBestiaryContext requires BestiaryProvider");
+	return ctx;
+}

apps/web/src/contexts/bulk-import-context.tsx

@@ -0,0 +1,21 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { useBulkImport } from "../hooks/use-bulk-import.js";
+
+type BulkImportContextValue = ReturnType<typeof useBulkImport>;
+
+const BulkImportContext = createContext<BulkImportContextValue | null>(null);
+
+export function BulkImportProvider({ children }: { children: ReactNode }) {
+	const value = useBulkImport();
+	return (
+		<BulkImportContext.Provider value={value}>
+			{children}
+		</BulkImportContext.Provider>
+	);
+}
+
+export function useBulkImportContext(): BulkImportContextValue {
+	const ctx = useContext(BulkImportContext);
+	if (!ctx) throw new Error("useBulkImportContext requires BulkImportProvider");
+	return ctx;
+}

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

@@ -0,0 +1,21 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { useEncounter } from "../hooks/use-encounter.js";
+
+type EncounterContextValue = ReturnType<typeof useEncounter>;
+
+const EncounterContext = createContext<EncounterContextValue | null>(null);
+
+export function EncounterProvider({ children }: { children: ReactNode }) {
+	const value = useEncounter();
+	return (
+		<EncounterContext.Provider value={value}>
+			{children}
+		</EncounterContext.Provider>
+	);
+}
+
+export function useEncounterContext(): EncounterContextValue {
+	const ctx = useContext(EncounterContext);
+	if (!ctx) throw new Error("useEncounterContext requires EncounterProvider");
+	return ctx;
+}

apps/web/src/contexts/index.ts

@@ -0,0 +1,7 @@
+export { BestiaryProvider } from "./bestiary-context.js";
+export { BulkImportProvider } from "./bulk-import-context.js";
+export { EncounterProvider } from "./encounter-context.js";
+export { InitiativeRollsProvider } from "./initiative-rolls-context.js";
+export { PlayerCharactersProvider } from "./player-characters-context.js";
+export { SidePanelProvider } from "./side-panel-context.js";
+export { ThemeProvider } from "./theme-context.js";

apps/web/src/contexts/initiative-rolls-context.tsx

@@ -0,0 +1,25 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { useInitiativeRolls } from "../hooks/use-initiative-rolls.js";
+
+type InitiativeRollsContextValue = ReturnType<typeof useInitiativeRolls>;
+
+const InitiativeRollsContext =
+	createContext<InitiativeRollsContextValue | null>(null);
+
+export function InitiativeRollsProvider({ children }: { children: ReactNode }) {
+	const value = useInitiativeRolls();
+	return (
+		<InitiativeRollsContext.Provider value={value}>
+			{children}
+		</InitiativeRollsContext.Provider>
+	);
+}
+
+export function useInitiativeRollsContext(): InitiativeRollsContextValue {
+	const ctx = useContext(InitiativeRollsContext);
+	if (!ctx)
+		throw new Error(
+			"useInitiativeRollsContext requires InitiativeRollsProvider",
+		);
+	return ctx;
+}

apps/web/src/contexts/player-characters-context.tsx

@@ -0,0 +1,29 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { usePlayerCharacters } from "../hooks/use-player-characters.js";
+
+type PlayerCharactersContextValue = ReturnType<typeof usePlayerCharacters>;
+
+const PlayerCharactersContext =
+	createContext<PlayerCharactersContextValue | null>(null);
+
+export function PlayerCharactersProvider({
+	children,
+}: {
+	children: ReactNode;
+}) {
+	const value = usePlayerCharacters();
+	return (
+		<PlayerCharactersContext.Provider value={value}>
+			{children}
+		</PlayerCharactersContext.Provider>
+	);
+}
+
+export function usePlayerCharactersContext(): PlayerCharactersContextValue {
+	const ctx = useContext(PlayerCharactersContext);
+	if (!ctx)
+		throw new Error(
+			"usePlayerCharactersContext requires PlayerCharactersProvider",
+		);
+	return ctx;
+}

apps/web/src/contexts/side-panel-context.tsx

@@ -0,0 +1,21 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { useSidePanelState } from "../hooks/use-side-panel-state.js";
+
+type SidePanelContextValue = ReturnType<typeof useSidePanelState>;
+
+const SidePanelContext = createContext<SidePanelContextValue | null>(null);
+
+export function SidePanelProvider({ children }: { children: ReactNode }) {
+	const value = useSidePanelState();
+	return (
+		<SidePanelContext.Provider value={value}>
+			{children}
+		</SidePanelContext.Provider>
+	);
+}
+
+export function useSidePanelContext(): SidePanelContextValue {
+	const ctx = useContext(SidePanelContext);
+	if (!ctx) throw new Error("useSidePanelContext requires SidePanelProvider");
+	return ctx;
+}

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

@@ -0,0 +1,19 @@
+import { createContext, type ReactNode, useContext } from "react";
+import { useTheme } from "../hooks/use-theme.js";
+
+type ThemeContextValue = ReturnType<typeof useTheme>;
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+	const value = useTheme();
+	return (
+		<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+	);
+}
+
+export function useThemeContext(): ThemeContextValue {
+	const ctx = useContext(ThemeContext);
+	if (!ctx) throw new Error("useThemeContext requires ThemeProvider");
+	return ctx;
+}

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

@@ -0,0 +1,225 @@
+// @vitest-environment jsdom
+import type { BestiaryIndexEntry, 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 { useEncounter } from "../use-encounter.js";
+
+vi.mock("../../persistence/encounter-storage.js", () => ({
+	loadEncounter: vi.fn().mockReturnValue(null),
+	saveEncounter: vi.fn(),
+}));
+
+const { loadEncounter: mockLoad, saveEncounter: mockSave } =
+	await vi.importMock<typeof import("../../persistence/encounter-storage.js")>(
+		"../../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());
+
+		expect(result.current.encounter.combatants).toEqual([]);
+		expect(result.current.encounter.activeIndex).toBe(0);
+		expect(result.current.encounter.roundNumber).toBe(1);
+		expect(result.current.isEmpty).toBe(true);
+	});
+
+	it("initializes from stored encounter", () => {
+		const stored = {
+			combatants: [{ id: combatantId("c-1"), name: "Goblin" }],
+			activeIndex: 0,
+			roundNumber: 2,
+		};
+		mockLoad.mockReturnValue(stored);
+
+		const { result } = renderHook(() => useEncounter());
+
+		expect(result.current.encounter.combatants).toHaveLength(1);
+		expect(result.current.encounter.roundNumber).toBe(2);
+		expect(result.current.isEmpty).toBe(false);
+	});
+
+	it("addCombatant adds a combatant with incremental IDs and persists", () => {
+		const { result } = renderHook(() => useEncounter());
+
+		act(() => result.current.addCombatant("Goblin"));
+		act(() => result.current.addCombatant("Orc"));
+
+		expect(result.current.encounter.combatants).toHaveLength(2);
+		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());
+
+		act(() => result.current.addCombatant("Goblin"));
+		const id = result.current.encounter.combatants[0].id;
+
+		act(() => result.current.removeCombatant(id));
+
+		expect(result.current.encounter.combatants).toHaveLength(0);
+		expect(result.current.isEmpty).toBe(true);
+	});
+
+	it("advanceTurn and retreatTurn update encounter state", () => {
+		const { result } = renderHook(() => useEncounter());
+
+		act(() => result.current.addCombatant("Goblin"));
+		act(() => result.current.addCombatant("Orc"));
+
+		const initialActive = result.current.encounter.activeIndex;
+
+		act(() => result.current.advanceTurn());
+		expect(result.current.encounter.activeIndex).not.toBe(initialActive);
+
+		act(() => result.current.retreatTurn());
+		expect(result.current.encounter.activeIndex).toBe(initialActive);
+	});
+
+	it("clearEncounter resets to empty and resets ID counter", () => {
+		const { result } = renderHook(() => useEncounter());
+
+		act(() => result.current.addCombatant("Goblin"));
+		act(() => result.current.clearEncounter());
+
+		expect(result.current.encounter.combatants).toHaveLength(0);
+		expect(result.current.isEmpty).toBe(true);
+
+		// After clear, IDs restart from c-1
+		act(() => result.current.addCombatant("Orc"));
+		expect(result.current.encounter.combatants[0].id).toBe("c-1");
+	});
+
+	it("addCombatant with opts applies initiative, ac, maxHp", () => {
+		const { result } = renderHook(() => useEncounter());
+
+		act(() =>
+			result.current.addCombatant("Goblin", {
+				initiative: 15,
+				ac: 13,
+				maxHp: 7,
+			}),
+		);
+
+		const goblin = result.current.encounter.combatants[0];
+		expect(goblin.initiative).toBe(15);
+		expect(goblin.ac).toBe(13);
+		expect(goblin.maxHp).toBe(7);
+		expect(goblin.currentHp).toBe(7);
+	});
+
+	it("derived flags: hasCreatureCombatants and canRollAllInitiative", () => {
+		const { result } = renderHook(() => useEncounter());
+
+		// 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 = {
+			name: "Goblin",
+			source: "MM",
+			ac: 15,
+			hp: 7,
+			dex: 14,
+			cr: "1/4",
+			initiativeProficiency: 0,
+			size: "Small",
+			type: "humanoid",
+		};
+
+		act(() => {
+			result.current.addFromBestiary(entry);
+		});
+
+		expect(result.current.hasCreatureCombatants).toBe(true);
+		expect(result.current.canRollAllInitiative).toBe(true);
+	});
+
+	it("addFromBestiary adds combatant with HP, AC, creatureId", () => {
+		const { result } = renderHook(() => useEncounter());
+
+		const entry: BestiaryIndexEntry = {
+			name: "Goblin",
+			source: "MM",
+			ac: 15,
+			hp: 7,
+			dex: 14,
+			cr: "1/4",
+			initiativeProficiency: 0,
+			size: "Small",
+			type: "humanoid",
+		};
+
+		act(() => {
+			result.current.addFromBestiary(entry);
+		});
+
+		const combatant = result.current.encounter.combatants[0];
+		expect(combatant.name).toBe("Goblin");
+		expect(combatant.maxHp).toBe(7);
+		expect(combatant.currentHp).toBe(7);
+		expect(combatant.ac).toBe(15);
+		expect(combatant.creatureId).toBe(creatureId("mm:goblin"));
+	});
+
+	it("addFromBestiary auto-numbers duplicate names", () => {
+		const { result } = renderHook(() => useEncounter());
+
+		const entry: BestiaryIndexEntry = {
+			name: "Goblin",
+			source: "MM",
+			ac: 15,
+			hp: 7,
+			dex: 14,
+			cr: "1/4",
+			initiativeProficiency: 0,
+			size: "Small",
+			type: "humanoid",
+		};
+
+		act(() => {
+			result.current.addFromBestiary(entry);
+		});
+		act(() => {
+			result.current.addFromBestiary(entry);
+		});
+
+		const names = result.current.encounter.combatants.map((c) => c.name);
+		expect(names).toContain("Goblin 1");
+		expect(names).toContain("Goblin 2");
+	});
+
+	it("addFromPlayerCharacter adds combatant with HP, AC, color, icon", () => {
+		const { result } = renderHook(() => useEncounter());
+
+		const pc: PlayerCharacter = {
+			id: playerCharacterId("pc-1"),
+			name: "Aria",
+			ac: 16,
+			maxHp: 30,
+			color: "blue",
+			icon: "sword",
+		};
+
+		act(() => result.current.addFromPlayerCharacter(pc));
+
+		const combatant = result.current.encounter.combatants[0];
+		expect(combatant.name).toBe("Aria");
+		expect(combatant.maxHp).toBe(30);
+		expect(combatant.currentHp).toBe(30);
+		expect(combatant.ac).toBe(16);
+		expect(combatant.color).toBe("blue");
+		expect(combatant.icon).toBe("sword");
+		expect(combatant.playerCharacterId).toBe(playerCharacterId("pc-1"));
+	});
+});

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

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+import { playerCharacterId } from "@initiative/domain";
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { usePlayerCharacters } from "../use-player-characters.js";
+
+vi.mock("../../persistence/player-character-storage.js", () => ({
+	loadPlayerCharacters: vi.fn().mockReturnValue([]),
+	savePlayerCharacters: vi.fn(),
+}));
+
+const { loadPlayerCharacters: mockLoad, savePlayerCharacters: mockSave } =
+	await vi.importMock<
+		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 = [
+			{
+				id: playerCharacterId("pc-1"),
+				name: "Aria",
+				ac: 16,
+				maxHp: 30,
+				color: undefined,
+				icon: undefined,
+			},
+		];
+		mockLoad.mockReturnValue(stored);
+
+		const { result } = renderHook(() => usePlayerCharacters());
+
+		expect(result.current.characters).toEqual(stored);
+	});
+
+	it("createCharacter adds a character and persists", () => {
+		const { result } = renderHook(() => usePlayerCharacters());
+
+		act(() => {
+			result.current.createCharacter("Vex", 15, 28, undefined, undefined);
+		});
+
+		expect(result.current.characters).toHaveLength(1);
+		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());
+
+		let error: unknown;
+		act(() => {
+			error = result.current.createCharacter("", 15, 28, undefined, undefined);
+		});
+
+		expect(error).toMatchObject({ kind: "domain-error" });
+		expect(result.current.characters).toHaveLength(0);
+	});
+
+	it("editCharacter updates character and persists", () => {
+		const { result } = renderHook(() => usePlayerCharacters());
+
+		act(() => {
+			result.current.createCharacter("Vex", 15, 28, undefined, undefined);
+		});
+
+		const id = result.current.characters[0].id;
+
+		act(() => {
+			result.current.editCharacter(id, { name: "Vex'ahlia" });
+		});
+
+		expect(result.current.characters[0].name).toBe("Vex'ahlia");
+		expect(mockSave).toHaveBeenCalled();
+	});
+
+	it("deleteCharacter removes character and persists", () => {
+		const { result } = renderHook(() => usePlayerCharacters());
+
+		act(() => {
+			result.current.createCharacter("Vex", 15, 28, undefined, undefined);
+		});
+
+		const id = result.current.characters[0].id;
+
+		act(() => {
+			result.current.deleteCharacter(id);
+		});
+
+		expect(result.current.characters).toHaveLength(0);
+		expect(mockSave).toHaveBeenCalled();
+	});
+});

apps/web/src/hooks/__tests__/use-side-panel-state.test.ts

@@ -0,0 +1,159 @@
+// @vitest-environment jsdom
+import { creatureId } from "@initiative/domain";
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useSidePanelState } from "../use-side-panel-state.js";
+
+function mockMatchMedia(matches: boolean) {
+	const listeners: Array<(e: MediaQueryListEvent) => void> = [];
+	const mql = {
+		matches,
+		addEventListener: vi.fn(
+			(_event: string, handler: (e: MediaQueryListEvent) => void) => {
+				listeners.push(handler);
+			},
+		),
+		removeEventListener: vi.fn(),
+	};
+	globalThis.matchMedia = vi.fn().mockReturnValue(mql) as typeof matchMedia;
+	return { mql, listeners };
+}
+
+const CREATURE_A = creatureId("creature-a");
+
+describe("useSidePanelState", () => {
+	it("starts with closed panel, no selection, not collapsed", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		expect(result.current.panelView).toEqual({ mode: "closed" });
+		expect(result.current.selectedCreatureId).toBeNull();
+		expect(result.current.isRightPanelCollapsed).toBe(false);
+		expect(result.current.bulkImportMode).toBe(false);
+		expect(result.current.sourceManagerMode).toBe(false);
+		expect(result.current.pinnedCreatureId).toBeNull();
+	});
+
+	it("showCreature sets creature mode and selectedCreatureId", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		act(() => result.current.showCreature(CREATURE_A));
+
+		expect(result.current.panelView).toEqual({
+			mode: "creature",
+			creatureId: CREATURE_A,
+		});
+		expect(result.current.selectedCreatureId).toBe(CREATURE_A);
+	});
+
+	it("showBulkImport sets bulk-import mode, selectedCreatureId null", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		act(() => result.current.showBulkImport());
+
+		expect(result.current.panelView).toEqual({ mode: "bulk-import" });
+		expect(result.current.selectedCreatureId).toBeNull();
+		expect(result.current.bulkImportMode).toBe(true);
+	});
+
+	it("showSourceManager sets source-manager mode", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		act(() => result.current.showSourceManager());
+
+		expect(result.current.panelView).toEqual({ mode: "source-manager" });
+		expect(result.current.sourceManagerMode).toBe(true);
+	});
+
+	it("dismissPanel sets mode to closed", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		act(() => result.current.showCreature(CREATURE_A));
+		act(() => result.current.dismissPanel());
+
+		expect(result.current.panelView).toEqual({ mode: "closed" });
+	});
+
+	it("toggleCollapse flips isRightPanelCollapsed", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		expect(result.current.isRightPanelCollapsed).toBe(false);
+
+		act(() => result.current.toggleCollapse());
+		expect(result.current.isRightPanelCollapsed).toBe(true);
+
+		act(() => result.current.toggleCollapse());
+		expect(result.current.isRightPanelCollapsed).toBe(false);
+	});
+
+	it("showCreature resets collapse state", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		act(() => result.current.toggleCollapse());
+		expect(result.current.isRightPanelCollapsed).toBe(true);
+
+		act(() => result.current.showCreature(CREATURE_A));
+		expect(result.current.isRightPanelCollapsed).toBe(false);
+	});
+
+	it("togglePin pins the selected creature", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		act(() => result.current.showCreature(CREATURE_A));
+		act(() => result.current.togglePin());
+
+		expect(result.current.pinnedCreatureId).toBe(CREATURE_A);
+	});
+
+	it("togglePin unpins when already pinned to same creature", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		act(() => result.current.showCreature(CREATURE_A));
+		act(() => result.current.togglePin());
+		act(() => result.current.togglePin());
+
+		expect(result.current.pinnedCreatureId).toBeNull();
+	});
+
+	it("togglePin does nothing when no creature is selected", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		act(() => result.current.togglePin());
+
+		expect(result.current.pinnedCreatureId).toBeNull();
+	});
+
+	it("unpin clears pinned creature", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		act(() => result.current.showCreature(CREATURE_A));
+		act(() => result.current.togglePin());
+		act(() => result.current.unpin());
+
+		expect(result.current.pinnedCreatureId).toBeNull();
+	});
+
+	it("isWideDesktop reflects matchMedia result", () => {
+		mockMatchMedia(true);
+		const { result } = renderHook(() => useSidePanelState());
+
+		expect(result.current.isWideDesktop).toBe(true);
+	});
+
+	it("isWideDesktop is false on narrow viewport", () => {
+		mockMatchMedia(false);
+		const { result } = renderHook(() => useSidePanelState());
+
+		expect(result.current.isWideDesktop).toBe(false);
+	});
+});

apps/web/src/hooks/use-action-bar-animation.ts

@@ -0,0 +1,38 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+export function useActionBarAnimation(combatantCount: number) {
+	const wasEmptyRef = useRef(combatantCount === 0);
+	const [settling, setSettling] = useState(false);
+	const [rising, setRising] = useState(false);
+	const [topBarExiting, setTopBarExiting] = useState(false);
+
+	useLayoutEffect(() => {
+		const nowEmpty = combatantCount === 0;
+		if (wasEmptyRef.current && !nowEmpty) {
+			setSettling(true);
+		} else if (!wasEmptyRef.current && nowEmpty) {
+			setRising(true);
+			setTopBarExiting(true);
+		}
+		wasEmptyRef.current = nowEmpty;
+	}, [combatantCount]);
+
+	const empty = combatantCount === 0;
+	const risingClass = rising ? "animate-rise-to-center" : "";
+	const settlingClass = settling ? "animate-settle-to-bottom" : "";
+	const exitingClass = topBarExiting
+		? "absolute inset-x-0 top-0 z-10 px-4 animate-slide-up-out"
+		: "";
+	const topBarClass = settling ? "animate-slide-down-in" : exitingClass;
+	const showTopBar = !empty || topBarExiting;
+
+	return {
+		risingClass,
+		settlingClass,
+		topBarClass,
+		showTopBar,
+		onSettleEnd: () => setSettling(false),
+		onRiseEnd: () => setRising(false),
+		onTopBarExitEnd: () => setTopBarExiting(false),
+	};
+}

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

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { useEncounterContext } from "../contexts/encounter-context.js";
+import { useSidePanelContext } from "../contexts/side-panel-context.js";
+
+export function useAutoStatBlock(): void {
+	const { encounter } = useEncounterContext();
+	const { panelView, updateCreature } = useSidePanelContext();
+
+	const activeCreatureId =
+		encounter.combatants[encounter.activeIndex]?.creatureId;
+
+	useEffect(() => {
+		if (activeCreatureId && panelView.mode === "creature") {
+			updateCreature(activeCreatureId);
+		}
+	}, [activeCreatureId, panelView.mode, updateCreature]);
+}

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

@@ -3,7 +3,7 @@ import type {
 	Creature,
 	CreatureId,
 } from "@initiative/domain";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
 	normalizeBestiary,
 	setSourceDisplayNames,
@@ -33,8 +33,9 @@ interface BestiaryHook {
 
 export function useBestiary(): BestiaryHook {
 	const [isLoaded, setIsLoaded] = useState(false);
-	const creatureMapRef = useRef<Map<CreatureId, Creature>>(new Map());
+	const [creatureMap, setCreatureMap] = useState(
-	const [, setTick] = useState(0);
+		() => new Map<CreatureId, Creature>(),
+	);
 
 	useEffect(() => {
 		const index = loadBestiaryIndex();
@@ -43,9 +44,8 @@ export function useBestiary(): BestiaryHook {
 			setIsLoaded(true);
 		}
 
-		bestiaryCache.loadAllCachedCreatures().then((map) => {
+		void bestiaryCache.loadAllCachedCreatures().then((map) => {
-			creatureMapRef.current = map;
+			setCreatureMap(map);
-			setTick((t) => t + 1);
 		});
 	}, []);
 
@@ -63,9 +63,12 @@ export function useBestiary(): BestiaryHook {
 			}));
 	}, []);
 
-	const getCreature = useCallback((id: CreatureId): Creature | undefined => {
+	const getCreature = useCallback(
-		return creatureMapRef.current.get(id);
+		(id: CreatureId): Creature | undefined => {
-	}, []);
+			return creatureMap.get(id);
+		},
+		[creatureMap],
+	);
 
 	const isSourceCachedFn = useCallback(
 		(sourceCode: string): Promise<boolean> => {
@@ -86,10 +89,13 @@ export function useBestiary(): BestiaryHook {
 			const creatures = normalizeBestiary(json);
 			const displayName = getSourceDisplayName(sourceCode);
 			await bestiaryCache.cacheSource(sourceCode, displayName, creatures);
+			setCreatureMap((prev) => {
+				const next = new Map(prev);
 				for (const c of creatures) {
-				creatureMapRef.current.set(c.id, c);
+					next.set(c.id, c);
 				}
-			setTick((t) => t + 1);
+				return next;
+			});
 		},
 		[],
 	);
@@ -100,18 +106,20 @@ export function useBestiary(): BestiaryHook {
 			const creatures = normalizeBestiary(jsonData as any);
 			const displayName = getSourceDisplayName(sourceCode);
 			await bestiaryCache.cacheSource(sourceCode, displayName, creatures);
+			setCreatureMap((prev) => {
+				const next = new Map(prev);
 				for (const c of creatures) {
-				creatureMapRef.current.set(c.id, c);
+					next.set(c.id, c);
 				}
-			setTick((t) => t + 1);
+				return next;
+			});
 		},
 		[],
 	);
 
 	const refreshCache = useCallback(async (): Promise<void> => {
 		const map = await bestiaryCache.loadAllCachedCreatures();
-		creatureMapRef.current = map;
+		setCreatureMap(map);
-		setTick((t) => t + 1);
 	}, []);
 
 	return {

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

@@ -6,7 +6,7 @@ import {
 
 const BATCH_SIZE = 6;
 
-export interface BulkImportState {
+interface BulkImportState {
 	readonly status: "idle" | "loading" | "complete" | "partial-failure";
 	readonly total: number;
 	readonly completed: number;
@@ -48,7 +48,7 @@ export function useBulkImport(): BulkImportHook {
 			countersRef.current = { completed: 0, failed: 0 };
 			setState({ status: "loading", total, completed: 0, failed: 0 });
 
-			(async () => {
+			void (async () => {
 				const cacheChecks = await Promise.all(
 					allCodes.map(async (code) => ({
 						code,
@@ -73,9 +73,15 @@ export function useBulkImport(): BulkImportHook {
 
 				setState((s) => ({ ...s, completed: alreadyCached }));
 
+				const batches: { code: string }[][] = [];
 				for (let i = 0; i < uncached.length; i += BATCH_SIZE) {
-					const batch = uncached.slice(i, i + BATCH_SIZE);
+					batches.push(uncached.slice(i, i + BATCH_SIZE));
-					await Promise.allSettled(
+				}
+
+				await batches.reduce(
+					(chain, batch) =>
+						chain.then(() =>
+							Promise.allSettled(
 								batch.map(async ({ code }) => {
 									const url = getDefaultFetchUrl(code, baseUrl);
 									try {
@@ -95,8 +101,10 @@ export function useBulkImport(): BulkImportHook {
 										failed: countersRef.current.failed,
 									});
 								}),
+							),
+						),
+					Promise.resolve() as Promise<unknown>,
 				);
-				}
 
 				await refreshCache();
 

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

@@ -17,6 +17,7 @@ import type {
 	BestiaryIndexEntry,
 	CombatantId,
 	ConditionId,
+	CreatureId,
 	DomainEvent,
 	Encounter,
 	PlayerCharacter,
@@ -33,6 +34,8 @@ import {
 	saveEncounter,
 } from "../persistence/encounter-storage.js";
 
+const COMBATANT_ID_REGEX = /^c-(\d+)$/;
+
 const EMPTY_ENCOUNTER: Encounter = {
 	combatants: [],
 	activeIndex: 0,
@@ -48,7 +51,7 @@ function initializeEncounter(): Encounter {
 function deriveNextId(encounter: Encounter): number {
 	let max = 0;
 	for (const c of encounter.combatants) {
-		const match = /^c-(\d+)$/.exec(c.id);
+		const match = COMBATANT_ID_REGEX.exec(c.id);
 		if (match) {
 			const n = Number.parseInt(match[1], 10);
 			if (n > max) max = n;
@@ -263,7 +266,7 @@ export function useEncounter() {
 	}, [makeStore]);
 
 	const addFromBestiary = useCallback(
-		(entry: BestiaryIndexEntry) => {
+		(entry: BestiaryIndexEntry): CreatureId | null => {
 			const store = makeStore();
 			const existingNames = store.get().combatants.map((c) => c.name);
 			const { newName, renames } = resolveCreatureName(
@@ -282,7 +285,7 @@ export function useEncounter() {
 			// Add combatant with resolved name
 			const id = combatantId(`c-${++nextId.current}`);
 			const addResult = addCombatantUseCase(makeStore(), id, newName);
-			if (isDomainError(addResult)) return;
+			if (isDomainError(addResult)) return null;
 
 			// Set HP
 			const hpResult = setHpUseCase(makeStore(), id, entry.hp);
@@ -301,8 +304,8 @@ export function useEncounter() {
 			// Derive creatureId from source + name
 			const slug = entry.name
 				.toLowerCase()
-				.replace(/[^a-z0-9]+/g, "-")
+				.replaceAll(/[^a-z0-9]+/g, "-")
-				.replace(/(^-|-$)/g, "");
+				.replaceAll(/(^-|-$)/g, "");
 			const cId = makeCreatureId(`${entry.source.toLowerCase()}:${slug}`);
 
 			// Set creatureId on the combatant (use store.save to keep ref in sync for batch calls)
@@ -315,8 +318,10 @@ export function useEncounter() {
 			});
 
 			setEvents((prev) => [...prev, ...addResult]);
+
+			return cId;
 		},
-		[makeStore, editCombatant],
+		[makeStore],
 	);
 
 	const addFromPlayerCharacter = useCallback(
@@ -368,12 +373,23 @@ export function useEncounter() {
 
 			setEvents((prev) => [...prev, ...addResult]);
 		},
-		[makeStore, editCombatant],
+		[makeStore],
+	);
+
+	const isEmpty = encounter.combatants.length === 0;
+	const hasCreatureCombatants = encounter.combatants.some(
+		(c) => c.creatureId != null,
+	);
+	const canRollAllInitiative = encounter.combatants.some(
+		(c) => c.creatureId != null && c.initiative == null,
 	);
 
 	return {
 		encounter,
 		events,
+		isEmpty,
+		hasCreatureCombatants,
+		canRollAllInitiative,
 		advanceTurn,
 		retreatTurn,
 		addCombatant,

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

@@ -0,0 +1,75 @@
+import {
+	rollAllInitiativeUseCase,
+	rollInitiativeUseCase,
+} from "@initiative/application";
+import {
+	type CombatantId,
+	isDomainError,
+	type RollMode,
+} from "@initiative/domain";
+import { useCallback, 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";
+
+function rollDice(): number {
+	return Math.floor(Math.random() * 20) + 1;
+}
+
+export function useInitiativeRolls() {
+	const { encounter, makeStore } = useEncounterContext();
+	const { getCreature } = useBestiaryContext();
+	const { showCreature } = useSidePanelContext();
+
+	const [rollSkippedCount, setRollSkippedCount] = useState(0);
+	const [rollSingleSkipped, setRollSingleSkipped] = useState(false);
+
+	const handleRollInitiative = useCallback(
+		(id: CombatantId, mode: RollMode = "normal") => {
+			const diceRolls: [number, ...number[]] =
+				mode === "normal" ? [rollDice()] : [rollDice(), rollDice()];
+			const result = rollInitiativeUseCase(
+				makeStore(),
+				id,
+				diceRolls,
+				getCreature,
+				mode,
+			);
+			if (isDomainError(result)) {
+				setRollSingleSkipped(true);
+				const combatant = encounter.combatants.find((c) => c.id === id);
+				if (combatant?.creatureId) {
+					showCreature(combatant.creatureId);
+				}
+			}
+		},
+		[makeStore, getCreature, encounter.combatants, showCreature],
+	);
+
+	const handleRollAllInitiative = useCallback(
+		(mode: RollMode = "normal") => {
+			const result = rollAllInitiativeUseCase(
+				makeStore(),
+				rollDice,
+				getCreature,
+				mode,
+			);
+			if (!isDomainError(result) && result.skippedNoSource > 0) {
+				setRollSkippedCount(result.skippedNoSource);
+			}
+		},
+		[makeStore, getCreature],
+	);
+
+	return {
+		rollSkippedCount,
+		rollSingleSkipped,
+		dismissRollSkipped: useCallback(() => setRollSkippedCount(0), []),
+		dismissRollSingleSkipped: useCallback(
+			() => setRollSingleSkipped(false),
+			[],
+		),
+		handleRollInitiative,
+		handleRollAllInitiative,
+	} as const;
+}

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

@@ -0,0 +1,32 @@
+import { useCallback, useRef } from "react";
+
+const LONG_PRESS_MS = 500;
+
+export function useLongPress(onLongPress: (e: React.TouchEvent) => void) {
+	const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+	const firedRef = useRef(false);
+
+	const onTouchStart = useCallback(
+		(e: React.TouchEvent) => {
+			firedRef.current = false;
+			timerRef.current = setTimeout(() => {
+				firedRef.current = true;
+				onLongPress(e);
+			}, LONG_PRESS_MS);
+		},
+		[onLongPress],
+	);
+
+	const onTouchEnd = useCallback((e: React.TouchEvent) => {
+		clearTimeout(timerRef.current);
+		if (firedRef.current) {
+			e.preventDefault();
+		}
+	}, []);
+
+	const onTouchMove = useCallback(() => {
+		clearTimeout(timerRef.current);
+	}, []);
+
+	return { onTouchStart, onTouchEnd, onTouchMove };
+}

apps/web/src/hooks/use-player-characters.ts

@@ -26,8 +26,8 @@ interface EditFields {
 	readonly name?: string;
 	readonly ac?: number;
 	readonly maxHp?: number;
-	readonly color?: string;
+	readonly color?: string | null;
-	readonly icon?: string;
+	readonly icon?: string | null;
 }
 
 export function usePlayerCharacters() {
@@ -51,7 +51,13 @@ export function usePlayerCharacters() {
 	}, []);
 
 	const createCharacter = useCallback(
-		(name: string, ac: number, maxHp: number, color: string, icon: string) => {
+		(
+			name: string,
+			ac: number,
+			maxHp: number,
+			color: string | undefined,
+			icon: string | undefined,
+		) => {
 			const id = generatePcId();
 			const result = createPlayerCharacterUseCase(
 				makeStore(),

apps/web/src/hooks/use-side-panel-state.ts

@@ -0,0 +1,107 @@
+import type { CreatureId } from "@initiative/domain";
+import { useCallback, useEffect, useState } from "react";
+
+type PanelView =
+	| { mode: "closed" }
+	| { mode: "creature"; creatureId: CreatureId }
+	| { mode: "bulk-import" }
+	| { mode: "source-manager" };
+
+interface SidePanelState {
+	panelView: PanelView;
+	selectedCreatureId: CreatureId | null;
+	bulkImportMode: boolean;
+	sourceManagerMode: boolean;
+	isRightPanelCollapsed: boolean;
+	pinnedCreatureId: CreatureId | null;
+	isWideDesktop: boolean;
+}
+
+interface SidePanelActions {
+	showCreature: (creatureId: CreatureId) => void;
+	updateCreature: (creatureId: CreatureId) => void;
+	showBulkImport: () => void;
+	showSourceManager: () => void;
+	dismissPanel: () => void;
+	toggleCollapse: () => void;
+	togglePin: () => void;
+	unpin: () => void;
+}
+
+export function useSidePanelState(): SidePanelState & SidePanelActions {
+	const [panelView, setPanelView] = useState<PanelView>({ mode: "closed" });
+	const [isRightPanelCollapsed, setIsRightPanelCollapsed] = useState(false);
+	const [pinnedCreatureId, setPinnedCreatureId] = useState<CreatureId | null>(
+		null,
+	);
+	const [isWideDesktop, setIsWideDesktop] = useState(
+		() => globalThis.matchMedia("(min-width: 1280px)").matches,
+	);
+
+	useEffect(() => {
+		const mq = globalThis.matchMedia("(min-width: 1280px)");
+		const handler = (e: MediaQueryListEvent) => setIsWideDesktop(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	const selectedCreatureId =
+		panelView.mode === "creature" ? panelView.creatureId : null;
+
+	const showCreature = useCallback((creatureId: CreatureId) => {
+		setPanelView({ mode: "creature", creatureId });
+		setIsRightPanelCollapsed(false);
+	}, []);
+
+	const updateCreature = useCallback((creatureId: CreatureId) => {
+		setPanelView({ mode: "creature", creatureId });
+	}, []);
+
+	const showBulkImport = useCallback(() => {
+		setPanelView({ mode: "bulk-import" });
+		setIsRightPanelCollapsed(false);
+	}, []);
+
+	const showSourceManager = useCallback(() => {
+		setPanelView({ mode: "source-manager" });
+		setIsRightPanelCollapsed(false);
+	}, []);
+
+	const dismissPanel = useCallback(() => {
+		setPanelView({ mode: "closed" });
+	}, []);
+
+	const toggleCollapse = useCallback(() => {
+		setIsRightPanelCollapsed((f) => !f);
+	}, []);
+
+	const togglePin = useCallback(() => {
+		if (selectedCreatureId) {
+			setPinnedCreatureId((prev) =>
+				prev === selectedCreatureId ? null : selectedCreatureId,
+			);
+		}
+	}, [selectedCreatureId]);
+
+	const unpin = useCallback(() => {
+		setPinnedCreatureId(null);
+	}, []);
+
+	return {
+		panelView,
+		selectedCreatureId,
+		bulkImportMode: panelView.mode === "bulk-import",
+		sourceManagerMode: panelView.mode === "source-manager",
+		isRightPanelCollapsed,
+		pinnedCreatureId,
+		isWideDesktop,
+		showCreature,
+		updateCreature,
+		showBulkImport,
+		showSourceManager,
+		dismissPanel,
+		toggleCollapse,
+		togglePin,
+		unpin,
+	};
+}

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

@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useSyncExternalStore } from "react";
+
+type ThemePreference = "system" | "light" | "dark";
+type ResolvedTheme = "light" | "dark";
+
+const STORAGE_KEY = "initiative:theme";
+
+const listeners = new Set<() => void>();
+let currentPreference: ThemePreference = loadPreference();
+
+function loadPreference(): ThemePreference {
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (raw === "light" || raw === "dark" || raw === "system") return raw;
+	} catch {
+		// storage unavailable
+	}
+	return "system";
+}
+
+function savePreference(pref: ThemePreference): void {
+	try {
+		localStorage.setItem(STORAGE_KEY, pref);
+	} catch {
+		// quota exceeded or storage unavailable
+	}
+}
+
+function getSystemTheme(): ResolvedTheme {
+	if (typeof globalThis.matchMedia !== "function") return "dark";
+	return globalThis.matchMedia("(prefers-color-scheme: light)").matches
+		? "light"
+		: "dark";
+}
+
+function resolve(pref: ThemePreference): ResolvedTheme {
+	return pref === "system" ? getSystemTheme() : pref;
+}
+
+function applyTheme(resolved: ResolvedTheme): void {
+	document.documentElement.dataset.theme = resolved;
+}
+
+function notifyAll(): void {
+	for (const listener of listeners) {
+		listener();
+	}
+}
+
+// Apply on load
+applyTheme(resolve(currentPreference));
+
+// Listen for OS preference changes
+if (typeof globalThis.matchMedia === "function") {
+	globalThis
+		.matchMedia("(prefers-color-scheme: light)")
+		.addEventListener("change", () => {
+			if (currentPreference === "system") {
+				applyTheme(resolve("system"));
+				notifyAll();
+			}
+		});
+}
+
+function subscribe(callback: () => void): () => void {
+	listeners.add(callback);
+	return () => listeners.delete(callback);
+}
+
+function getSnapshot(): ThemePreference {
+	return currentPreference;
+}
+
+const CYCLE: ThemePreference[] = ["system", "light", "dark"];
+
+export function useTheme() {
+	const preference = useSyncExternalStore(subscribe, getSnapshot);
+	const resolved = resolve(preference);
+
+	useEffect(() => {
+		applyTheme(resolved);
+	}, [resolved]);
+
+	const setPreference = useCallback((pref: ThemePreference) => {
+		currentPreference = pref;
+		savePreference(pref);
+		applyTheme(resolve(pref));
+		notifyAll();
+	}, []);
+
+	const cycleTheme = useCallback(() => {
+		const idx = CYCLE.indexOf(currentPreference);
+		const next = CYCLE[(idx + 1) % CYCLE.length];
+		setPreference(next);
+	}, [setPreference]);
+
+	return { preference, resolved, setPreference, cycleTheme } as const;
+}

apps/web/src/index.css

@@ -1,14 +1,14 @@
 @import "tailwindcss";
 
 @theme {
-	--color-background: #0f172a;
+	--color-background: #0e1a2e;
 	--color-foreground: #e2e8f0;
-	--color-muted: #64748b;
+	--color-muted: #7a8ba4;
 	--color-muted-foreground: #94a3b8;
-	--color-card: #1e293b;
+	--color-card: #1a2e4a;
 	--color-card-foreground: #e2e8f0;
-	--color-border: #334155;
+	--color-border: #2a5088;
-	--color-input: #334155;
+	--color-input: #2a5088;
 	--color-primary: #3b82f6;
 	--color-primary-foreground: #ffffff;
 	--color-accent: #3b82f6;
@@ -16,15 +16,50 @@
 	--color-hover-neutral: var(--color-primary);
 	--color-hover-action: var(--color-primary);
 	--color-hover-destructive: var(--color-destructive);
-	--color-hover-neutral-bg: var(--color-card);
+	--color-hover-neutral-bg: oklch(0.623 0.214 259 / 0.15);
 	--color-hover-action-bg: var(--color-muted);
 	--color-hover-destructive-bg: transparent;
+	--color-stat-heading: #fbbf24;
+	--color-stat-divider-from: oklch(0.5 0.1 65 / 0.6);
+	--color-stat-divider-via: oklch(0.5 0.1 65 / 0.4);
+	--color-hp-damage-hover-bg: oklch(0.25 0.05 25);
+	--color-hp-heal-hover-bg: oklch(0.25 0.05 155);
+	--color-active-row-bg: oklch(0.623 0.214 259 / 0.1);
+	--color-active-row-border: oklch(0.623 0.214 259 / 0.4);
 	--radius-sm: 0.25rem;
-	--radius-md: 0.375rem;
+	--radius-md: 0.5rem;
-	--radius-lg: 0.5rem;
+	--radius-lg: 0.75rem;
 	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
 }
 
+[data-theme="light"] {
+	--color-background: #eeecea;
+	--color-foreground: #374151;
+	--color-muted: #e0ddd9;
+	--color-muted-foreground: #6b7280;
+	--color-card: #f7f6f4;
+	--color-card-foreground: #374151;
+	--color-border: #ddd9d5;
+	--color-input: #cdc8c3;
+	--color-primary: #2563eb;
+	--color-primary-foreground: #ffffff;
+	--color-accent: #2563eb;
+	--color-destructive: #dc2626;
+	--color-hover-neutral: var(--color-primary);
+	--color-hover-action: var(--color-primary);
+	--color-hover-destructive: var(--color-destructive);
+	--color-hover-neutral-bg: oklch(0.623 0.214 259 / 0.08);
+	--color-hover-action-bg: var(--color-muted);
+	--color-hover-destructive-bg: transparent;
+	--color-stat-heading: #92400e;
+	--color-stat-divider-from: oklch(0.55 0.1 65 / 0.5);
+	--color-stat-divider-via: oklch(0.55 0.1 65 / 0.25);
+	--color-hp-damage-hover-bg: #fef2f2;
+	--color-hp-heal-hover-bg: #ecfdf5;
+	--color-active-row-bg: oklch(0.623 0.214 259 / 0.08);
+	--color-active-row-border: oklch(0.623 0.214 259 / 0.25);
+}
+
 @keyframes concentration-shake {
 	0% {
 		translate: 0;
@@ -169,6 +204,38 @@
 		concentration-glow 1200ms ease-out;
 }
 
+@utility card-glow {
+	background-image: radial-gradient(
+		ellipse at 50% 50%,
+		oklch(0.35 0.05 250 / 0.5) 0%,
+		transparent 70%
+	);
+	box-shadow:
+		0 0 15px -2px oklch(0.623 0.214 259 / 0.2),
+		inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
+
+	[data-theme="light"] & {
+		background-image: none;
+		box-shadow: 0 1px 3px 0 oklch(0 0 0 / 0.08);
+	}
+}
+
+@utility panel-glow {
+	background-image: linear-gradient(
+		to bottom,
+		oklch(0.35 0.05 250 / 0.4) 0%,
+		transparent 40%
+	);
+	box-shadow:
+		0 0 20px -2px oklch(0.623 0.214 259 / 0.15),
+		inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
+
+	[data-theme="light"] & {
+		background-image: none;
+		box-shadow: -1px 0 6px 0 oklch(0 0 0 / 0.1);
+	}
+}
+
 * {
 	scrollbar-color: var(--color-border) transparent;
 	scrollbar-width: thin;
@@ -176,6 +243,16 @@
 
 body {
 	background-color: var(--color-background);
+	background-image: radial-gradient(
+		ellipse at 50% 40%,
+		oklch(0.26 0.055 250) 0%,
+		var(--color-background) 70%
+	);
+	background-attachment: fixed;
 	color: var(--color-foreground);
 	font-family: var(--font-sans);
 }
+
+[data-theme="light"] body {
+	background-image: none;
+}

apps/web/src/main.tsx

@@ -1,13 +1,36 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { App } from "./App";
+import { App } from "./App.js";
+import {
+	BestiaryProvider,
+	BulkImportProvider,
+	EncounterProvider,
+	InitiativeRollsProvider,
+	PlayerCharactersProvider,
+	SidePanelProvider,
+	ThemeProvider,
+} from "./contexts/index.js";
 import "./index.css";
 
 const root = document.getElementById("root");
 if (root) {
 	createRoot(root).render(
 		<StrictMode>
+			<ThemeProvider>
+				<EncounterProvider>
+					<BestiaryProvider>
+						<PlayerCharactersProvider>
+							<BulkImportProvider>
+								<SidePanelProvider>
+									<InitiativeRollsProvider>
 										<App />
+									</InitiativeRollsProvider>
+								</SidePanelProvider>
+							</BulkImportProvider>
+						</PlayerCharactersProvider>
+					</BestiaryProvider>
+				</EncounterProvider>
+			</ThemeProvider>
 		</StrictMode>,
 	);
 }

apps/web/src/persistence/player-character-storage.ts

@@ -15,6 +15,13 @@ export function savePlayerCharacters(characters: PlayerCharacter[]): void {
 	}
 }
 
+function isValidOptionalMember(
+	value: unknown,
+	valid: ReadonlySet<string>,
+): boolean {
+	return value === undefined || (typeof value === "string" && valid.has(value));
+}
+
 function rehydrateCharacter(raw: unknown): PlayerCharacter | null {
 	if (typeof raw !== "object" || raw === null || Array.isArray(raw))
 		return null;
@@ -35,10 +42,8 @@ function rehydrateCharacter(raw: unknown): PlayerCharacter | null {
 		entry.maxHp < 1
 	)
 		return null;
-	if (typeof entry.color !== "string" || !VALID_PLAYER_COLORS.has(entry.color))
+	if (!isValidOptionalMember(entry.color, VALID_PLAYER_COLORS)) return null;
-		return null;
+	if (!isValidOptionalMember(entry.icon, VALID_PLAYER_ICONS)) return null;
-	if (typeof entry.icon !== "string" || !VALID_PLAYER_ICONS.has(entry.icon))
-		return null;
 
 	return {
 		id: playerCharacterId(entry.id),

biome.json

@@ -1,14 +1,14 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
 	"files": {
 		"includes": [
 			"**",
-			"!**/dist/**",
+			"!**/dist",
-			"!.claude/**",
+			"!.claude",
-			"!.specify/**",
+			"!.specify",
-			"!specs/**",
+			"!specs",
-			"!coverage/**",
+			"!coverage",
-			"!.pnpm-store/**"
+			"!.pnpm-store"
 		]
 	},
 	"assist": {
@@ -21,6 +21,12 @@
 			}
 		}
 	},
+	"css": {
+		"parser": {
+			"cssModules": false,
+			"tailwindDirectives": true
+		}
+	},
 	"formatter": {
 		"enabled": true,
 		"indentStyle": "tab",
@@ -30,13 +36,93 @@
 		"enabled": true,
 		"rules": {
 			"recommended": true,
+			"a11y": {
+				"noNoninteractiveElementInteractions": "error"
+			},
 			"complexity": {
 				"noExcessiveCognitiveComplexity": {
 					"level": "error",
 					"options": {
 						"maxAllowedComplexity": 15
 					}
-				}
+				},
+				"noUselessStringConcat": "error"
+			},
+			"correctness": {
+				"noNestedComponentDefinitions": "error",
+				"noReactPropAssignments": "error"
+			},
+			"nursery": {
+				"noConditionalExpect": "error",
+				"noDuplicatedSpreadProps": "error",
+				"noFloatingPromises": "error",
+				"noLeakedRender": "error",
+				"noMisusedPromises": "error",
+				"noNestedPromises": "error",
+				"noReturnAssign": "error",
+				"noScriptUrl": "error",
+				"noShadow": "error",
+				"noUnnecessaryConditions": "error",
+				"noUselessReturn": "error",
+				"useArraySome": "error",
+				"useArraySortCompare": "error",
+				"useAwaitThenable": "error",
+				"useErrorCause": "error",
+				"useExhaustiveSwitchCases": "error",
+				"useFind": "error",
+				"useGlobalThis": "error",
+				"useNullishCoalescing": "error",
+				"useRegexpExec": "error",
+				"useSortedClasses": "error",
+				"useSpread": "error"
+			},
+			"performance": {
+				"noAwaitInLoops": "error",
+				"useTopLevelRegex": "error"
+			},
+			"style": {
+				"noCommonJs": "error",
+				"noDoneCallback": "error",
+				"noExportedImports": "error",
+				"noInferrableTypes": "error",
+				"noNamespace": "error",
+				"noNegationElse": "error",
+				"noNestedTernary": "error",
+				"noParameterAssign": "error",
+				"noSubstr": "error",
+				"noUnusedTemplateLiteral": "error",
+				"noUselessElse": "error",
+				"noYodaExpression": "error",
+				"useAsConstAssertion": "error",
+				"useAtIndex": "error",
+				"useCollapsedElseIf": "error",
+				"useCollapsedIf": "error",
+				"useConsistentBuiltinInstantiation": "error",
+				"useDefaultParameterLast": "error",
+				"useExplicitLengthCheck": "error",
+				"useForOf": "error",
+				"useFragmentSyntax": "error",
+				"useNumberNamespace": "error",
+				"useSelfClosingElements": "error",
+				"useShorthandAssign": "error",
+				"useThrowNewError": "error",
+				"useThrowOnlyError": "error",
+				"useTrimStartEnd": "error"
+			},
+			"suspicious": {
+				"noAlert": "error",
+				"noConstantBinaryExpressions": "error",
+				"noDeprecatedImports": "error",
+				"noEvolvingTypes": "error",
+				"noImportCycles": "error",
+				"noReactForwardRef": "error",
+				"noSkippedTests": "error",
+				"noTemplateCurlyInString": "error",
+				"noTsIgnore": "error",
+				"noUnusedExpressions": "error",
+				"noVar": "error",
+				"useAwait": "error",
+				"useErrorMessage": "error"
 			}
 		}
 	}

docs/agents/plans/2026-03-13-declutter-action-bars.md

@@ -1,536 +0,0 @@
----
-date: "2026-03-13T14:58:42.882813+00:00"
-git_commit: 75778884bd1be7d135b2f5ea9b8a8e77a0149f7b
-branch: main
-topic: "Declutter Action Bars"
-tags: [plan, turn-navigation, action-bar, overflow-menu, ux]
-status: draft
----
-
-# Declutter Action Bars — Implementation Plan
-
-## Overview
-
-Reorganize buttons across the top bar (TurnNavigation) and bottom bar (ActionBar) to reduce visual clutter and improve UX. Each bar gets a clear purpose: the top bar is for turn navigation + encounter lifecycle, the bottom bar is for adding combatants + setup actions.
-
-## Current State Analysis
-
-**Top bar** (`turn-navigation.tsx`) has 5 buttons + center info:
-```
-[ Prev ] | [ R1  Dwarf ] | [ D20  Library  Trash ] [ Next ]
-```
-The D20 (roll all initiative) and Library (manage sources) buttons are unrelated to turn navigation — they're setup/utility actions that add noise.
-
-**Bottom bar** (`action-bar.tsx`) has an input, Add button, and 3 icon buttons:
-```
-[ + Add combatants... ] [ Add ] [ Users  Eye  Import ]
-```
-The icon cluster (Users, Eye, Import) is cryptic — three ghost icon buttons with no labels, requiring hover to discover purpose. The Eye button opens a separate search dropdown for browsing stat blocks, which duplicates the existing search input.
-
-### Key Discoveries:
-- `rollAllInitiativeUseCase` (`packages/application/src/roll-all-initiative-use-case.ts`) applies to combatants with `creatureId` AND no `initiative` set — this defines the conditional visibility logic
-- `Combatant.initiative` is `number | undefined` and `Combatant.creatureId` is `CreatureId | undefined` (`packages/domain/src/types.ts`)
-- No existing dropdown/menu UI component — the overflow menu needs a new component
-- Lucide provides `EllipsisVertical` for the kebab menu trigger
-- The stat block viewer already has its own search input, results list, and keyboard navigation (`action-bar.tsx:65-236`) — in browse mode, we reuse the main input for this instead
-
-## Desired End State
-
-### UI Mockups
-
-**Top bar (after):**
-```
-[ Prev ]  [ R1  Dwarf ]  [ Trash ]  [ Next ]
-```
-4 elements. Clean, focused on turn flow + encounter lifecycle.
-
-**Bottom bar — add mode (default):**
-```
-[ + Add combatants...  👁 ]  [ Add ]  [ D20? ]  [ ⋮ ]
-```
-The Eye icon sits inside/beside the input as a toggle. D20 appears conditionally. Kebab menu holds infrequent actions.
-
-**Bottom bar — browse mode (Eye toggled on):**
-```
-[ 🔍 Search stat blocks...  👁 ]              [ ⋮ ]
-```
-The input switches purpose: placeholder changes, typing searches stat blocks instead of adding combatants. The Add button and D20 hide (irrelevant in browse mode). Eye icon stays as the toggle to switch back. Selecting a result opens the stat block panel and exits browse mode.
-
-**Overflow menu (⋮ clicked):**
-```
-┌──────────────────────┐
-│ 👥 Player Characters │
-│ 📚 Manage Sources    │
-│ 📥 Bulk Import       │
-└──────────────────────┘
-```
-Labeled items with icons — discoverable without hover.
-
-### Key Discoveries:
-- `sourceManagerOpen` state lives in App.tsx:116 — the overflow menu's "Manage Sources" item needs the same toggle callback
-- The stat block viewer state (viewerOpen, viewerQuery, viewerResults, viewerIndex) in action-bar.tsx:66-71 gets replaced by a `browseMode` boolean that repurposes the main input
-- The viewer's separate input, dropdown, and keyboard handling (action-bar.tsx:188-248) can be removed — browse mode reuses the existing input and suggestion dropdown infrastructure
-
-## What We're NOT Doing
-
-- Changing domain logic or use cases
-- Modifying ConfirmButton behavior
-- Changing the stat block panel itself
-- Altering animation logic (useActionBarAnimation)
-- Modifying combatant row buttons
-- Changing how SourceManager works (just moving where the trigger lives)
-
-## Implementation Approach
-
-Four phases, each independently testable. Phase 1 simplifies the top bar (pure removal). Phase 2 adds the overflow menu component. Phase 3 reworks the ActionBar (browse toggle + conditional D20 + overflow integration). Phase 4 wires everything together in App.tsx.
-
----
-
-## Phase 1: Simplify TurnNavigation
-
-### Overview
-Strip TurnNavigation down to just turn controls + clear encounter. Remove Roll All Initiative and Manage Sources buttons and their associated props.
-
-### Changes Required:
-
-#### [x] 1. Update TurnNavigation component
-**File**: `apps/web/src/components/turn-navigation.tsx`
-**Changes**:
-- Remove `onRollAllInitiative` and `onOpenSourceManager` from props interface
-- Remove the D20 button (lines 53-62)
-- Remove the Library button (lines 63-72)
-- Remove the inner `gap-0` div wrapper (lines 52, 80) since only the ConfirmButton remains
-- Remove unused imports: `Library` from lucide-react, `D20Icon`
-- Adjust layout: ConfirmButton + Next button grouped with `gap-3`
-
-Result:
-```tsx
-interface TurnNavigationProps {
-	encounter: Encounter;
-	onAdvanceTurn: () => void;
-	onRetreatTurn: () => void;
-	onClearEncounter: () => void;
-}
-
-// Layout becomes:
-// [ Prev ] | [ R1  Name ] | [ Trash ] [ Next ]
-```
-
-#### [x] 2. Update TurnNavigation usage in App.tsx
-**File**: `apps/web/src/App.tsx`
-**Changes**:
-- Remove `onRollAllInitiative` and `onOpenSourceManager` props from the `<TurnNavigation>` call (lines 256-257)
-
-### Success Criteria:
-
-#### Automated Verification:
-- [x] `pnpm check` passes (typecheck catches removed props, lint catches unused imports)
-
-#### Manual Verification:
-- [ ] Top bar shows only: Prev, round badge + name, trash, Next
-- [ ] Prev/Next/Clear buttons still work as before
-- [ ] Top bar animation (slide in/out) unchanged
-
-**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
-
----
-
-## Phase 2: Create Overflow Menu Component
-
-### Overview
-Build a reusable overflow menu (kebab menu) component with click-outside and Escape handling, following the same patterns as ConfirmButton and the existing viewer dropdown.
-
-### Changes Required:
-
-#### [x] 1. Create OverflowMenu component
-**File**: `apps/web/src/components/ui/overflow-menu.tsx` (new file)
-**Changes**: Create a dropdown menu triggered by an EllipsisVertical icon button. Features:
-- Toggle open/close on button click
-- Close on click outside (document mousedown listener, same pattern as confirm-button.tsx:44-67)
-- Close on Escape key
-- Renders above the trigger (bottom-full positioning, same as action-bar suggestion dropdown)
-- Each item: icon + label, full-width clickable row
-- Clicking an item calls its action and closes the menu
-
-```tsx
-import { EllipsisVertical } from "lucide-react";
-import { type ReactNode, useEffect, useRef, useState } from "react";
-import { Button } from "./button";
-
-export interface OverflowMenuItem {
-	readonly icon: ReactNode;
-	readonly label: string;
-	readonly onClick: () => void;
-	readonly disabled?: boolean;
-}
-
-interface OverflowMenuProps {
-	readonly items: readonly OverflowMenuItem[];
-}
-
-export function OverflowMenu({ items }: OverflowMenuProps) {
-	const [open, setOpen] = useState(false);
-	const ref = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		if (!open) return;
-		function handleMouseDown(e: MouseEvent) {
-			if (ref.current && !ref.current.contains(e.target as Node)) {
-				setOpen(false);
-			}
-		}
-		function handleKeyDown(e: KeyboardEvent) {
-			if (e.key === "Escape") setOpen(false);
-		}
-		document.addEventListener("mousedown", handleMouseDown);
-		document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("mousedown", handleMouseDown);
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [open]);
-
-	return (
-		<div ref={ref} className="relative">
-			<Button
-				type="button"
-				variant="ghost"
-				size="icon"
-				className="text-muted-foreground hover:text-hover-neutral"
-				onClick={() => setOpen((o) => !o)}
-				aria-label="More actions"
-				title="More actions"
-			>
-				<EllipsisVertical className="h-5 w-5" />
-			</Button>
-			{open && (
-				<div className="absolute bottom-full right-0 z-50 mb-1 min-w-48 rounded-md border border-border bg-card py-1 shadow-lg">
-					{items.map((item) => (
-						<button
-							key={item.label}
-							type="button"
-							className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-foreground hover:bg-hover-neutral-bg disabled:pointer-events-none disabled:opacity-50"
-							disabled={item.disabled}
-							onClick={() => {
-								item.onClick();
-								setOpen(false);
-							}}
-						>
-							{item.icon}
-							{item.label}
-						</button>
-					))}
-				</div>
-			)}
-		</div>
-	);
-}
-```
-
-### Success Criteria:
-
-#### Automated Verification:
-- [x] `pnpm check` passes (new file compiles, no unused exports yet — will be used in phase 3)
-
-#### Manual Verification:
-- [ ] N/A — component not yet wired into the UI
-
-**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
-
----
-
-## Phase 3: Rework ActionBar
-
-### Overview
-Replace the icon button cluster with: (1) an Eye toggle on the input that switches between add mode and browse mode, (2) a conditional Roll All Initiative button, and (3) the overflow menu for infrequent actions.
-
-### Changes Required:
-
-#### [x] 1. Update ActionBarProps
-**File**: `apps/web/src/components/action-bar.tsx`
-**Changes**: Add new props, keep existing ones needed for overflow menu items:
-```tsx
-interface ActionBarProps {
-	// ... existing props stay ...
-	onRollAllInitiative?: () => void;       // new — moved from top bar
-	showRollAllInitiative?: boolean;         // new — conditional visibility
-	onOpenSourceManager?: () => void;        // new — moved from top bar
-}
-```
-
-#### [x] 2. Add browse mode state
-**File**: `apps/web/src/components/action-bar.tsx`
-**Changes**: Replace the separate viewer state (viewerOpen, viewerQuery, viewerResults, viewerIndex, viewerRef, viewerInputRef — lines 66-71) with a single `browseMode` boolean:
-
-```tsx
-const [browseMode, setBrowseMode] = useState(false);
-```
-
-Remove all viewer-specific state variables and handlers:
-- `viewerOpen`, `viewerQuery`, `viewerResults`, `viewerIndex` (lines 66-69)
-- `viewerRef`, `viewerInputRef` (lines 70-71)
-- `openViewer`, `closeViewer` (lines 189-202)
-- `handleViewerQueryChange`, `handleViewerSelect`, `handleViewerKeyDown` (lines 204-236)
-- The viewer click-outside effect (lines 239-248)
-
-#### [x] 3. Rework the input area with Eye toggle
-**File**: `apps/web/src/components/action-bar.tsx`
-**Changes**: Add an Eye icon button inside the input wrapper that toggles browse mode. When browse mode is active:
-- Placeholder changes to "Search stat blocks..."
-- Typing calls `bestiarySearch` but selecting a result calls `onViewStatBlock` instead of queuing/adding
-- The suggestion dropdown shows results but clicking opens stat block panel instead of adding
-- Add button and custom fields (Init/AC/MaxHP) are hidden
-- D20 button is hidden
-
-When toggling browse mode off, clear the input and suggestions.
-
-The Eye icon sits to the right of the input inside the `relative flex-1` wrapper:
-```tsx
-<div className="relative flex-1">
-	<Input
-		ref={inputRef}
-		type="text"
-		value={nameInput}
-		onChange={(e) => handleNameChange(e.target.value)}
-		onKeyDown={browseMode ? handleBrowseKeyDown : handleKeyDown}
-		placeholder={browseMode ? "Search stat blocks..." : "+ Add combatants"}
-		className="max-w-xs pr-8"
-		autoFocus={autoFocus}
-	/>
-	{bestiaryLoaded && onViewStatBlock && (
-		<button
-			type="button"
-			className={cn(
-				"absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-hover-neutral",
-				browseMode && "text-accent",
-			)}
-			onClick={() => {
-				setBrowseMode((m) => !m);
-				setNameInput("");
-				setSuggestions([]);
-				setPcMatches([]);
-				setQueued(null);
-				setSuggestionIndex(-1);
-			}}
-			title={browseMode ? "Switch to add mode" : "Browse stat blocks"}
-			aria-label={browseMode ? "Switch to add mode" : "Browse stat blocks"}
-		>
-			<Eye className="h-4 w-4" />
-		</button>
-	)}
-	{/* suggestion dropdown — behavior changes based on browseMode */}
-</div>
-```
-
-Import `cn` from `../../lib/utils` (already used by other components).
-
-#### [x] 4. Update suggestion dropdown for browse mode
-**File**: `apps/web/src/components/action-bar.tsx`
-**Changes**: In browse mode, the suggestion dropdown behaves differently:
-- No "Add as custom" row at the top
-- No player character matches section
-- No queuing (plus/minus/confirm) — clicking a result calls `onViewStatBlock` and exits browse mode
-- Keyboard Enter on a highlighted result calls `onViewStatBlock` and exits browse mode
-
-Add a `handleBrowseKeyDown` handler:
-```tsx
-const handleBrowseKeyDown = (e: React.KeyboardEvent) => {
-	if (e.key === "Escape") {
-		setBrowseMode(false);
-		setNameInput("");
-		setSuggestions([]);
-		setSuggestionIndex(-1);
-		return;
-	}
-	if (suggestions.length === 0) return;
-	if (e.key === "ArrowDown") {
-		e.preventDefault();
-		setSuggestionIndex((i) => (i < suggestions.length - 1 ? i + 1 : 0));
-	} else if (e.key === "ArrowUp") {
-		e.preventDefault();
-		setSuggestionIndex((i) => (i > 0 ? i - 1 : suggestions.length - 1));
-	} else if (e.key === "Enter" && suggestionIndex >= 0) {
-		e.preventDefault();
-		onViewStatBlock?.(suggestions[suggestionIndex]);
-		setBrowseMode(false);
-		setNameInput("");
-		setSuggestions([]);
-		setSuggestionIndex(-1);
-	}
-};
-```
-
-In the suggestion dropdown JSX, conditionally render based on `browseMode`:
-- Browse mode: simple list of creature results, click → `onViewStatBlock` + exit browse mode
-- Add mode: existing behavior (custom row, PC matches, queuing)
-
-#### [x] 5. Replace icon button cluster with D20 + overflow menu
-**File**: `apps/web/src/components/action-bar.tsx`
-**Changes**: Replace the `div.flex.items-center.gap-0` block (lines 443-529) containing Users, Eye, and Import buttons with:
-
-```tsx
-{!browseMode && (
-	<>
-		<Button type="submit" size="sm">
-			Add
-		</Button>
-		{showRollAllInitiative && onRollAllInitiative && (
-			<Button
-				type="button"
-				size="icon"
-				variant="ghost"
-				className="text-muted-foreground hover:text-hover-action"
-				onClick={onRollAllInitiative}
-				title="Roll all initiative"
-				aria-label="Roll all initiative"
-			>
-				<D20Icon className="h-6 w-6" />
-			</Button>
-		)}
-	</>
-)}
-<OverflowMenu items={overflowItems} />
-```
-
-Build the `overflowItems` array from props:
-```tsx
-const overflowItems: OverflowMenuItem[] = [];
-if (onManagePlayers) {
-	overflowItems.push({
-		icon: <Users className="h-4 w-4" />,
-		label: "Player Characters",
-		onClick: onManagePlayers,
-	});
-}
-if (onOpenSourceManager) {
-	overflowItems.push({
-		icon: <Library className="h-4 w-4" />,
-		label: "Manage Sources",
-		onClick: onOpenSourceManager,
-	});
-}
-if (bestiaryLoaded && onBulkImport) {
-	overflowItems.push({
-		icon: <Import className="h-4 w-4" />,
-		label: "Bulk Import",
-		onClick: onBulkImport,
-		disabled: bulkImportDisabled,
-	});
-}
-```
-
-#### [x] 6. Clean up imports
-**File**: `apps/web/src/components/action-bar.tsx`
-**Changes**:
-- Add imports: `D20Icon`, `OverflowMenu` + `OverflowMenuItem`, `Library` from lucide-react, `cn` from utils
-- Remove imports that are no longer needed after removing the standalone viewer: check which of `Eye`, `Import`, `Users` are still used (Eye stays for the toggle, Users and Import stay for overflow item icons, Library is new)
-- The `Check`, `Minus`, `Plus` imports stay (used in queuing UI)
-
-### Success Criteria:
-
-#### Automated Verification:
-- [x] `pnpm check` passes
-
-#### Manual Verification:
-- [ ] Bottom bar shows: input with Eye toggle, Add button, (conditional D20), kebab menu
-- [ ] Eye toggle switches input between "add" and "browse" modes
-- [ ] In browse mode: typing shows bestiary results, clicking one opens stat block panel, exits browse mode
-- [ ] In browse mode: Add button and D20 are hidden, overflow menu stays visible
-- [ ] In add mode: existing behavior works (search, queue, custom fields, PC matches)
-- [ ] Overflow menu opens/closes on click, closes on Escape and click-outside
-- [ ] Overflow menu items (Player Characters, Manage Sources, Bulk Import) trigger correct actions
-- [ ] D20 button appears only when bestiary combatants lack initiative, disappears when all have values
-
-**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
-
----
-
-## Phase 4: Wire Up App.tsx
-
-### Overview
-Pass the new props to ActionBar — roll all initiative handler, conditional visibility flag, and source manager toggle. Remove the now-unused `onOpenSourceManager` callback from the TurnNavigation call (already removed in Phase 1) and ensure sourceManagerOpen toggle is routed through the overflow menu.
-
-### Changes Required:
-
-#### [x] 1. Compute showRollAllInitiative flag
-**File**: `apps/web/src/App.tsx`
-**Changes**: Add a derived boolean that checks if any combatant with a `creatureId` lacks an `initiative` value:
-
-```tsx
-const showRollAllInitiative = encounter.combatants.some(
-	(c) => c.creatureId != null && c.initiative == null,
-);
-```
-
-Place this near `const isEmpty = ...` (line 241).
-
-#### [x] 2. Pass new props to both ActionBar instances
-**File**: `apps/web/src/App.tsx`
-**Changes**: Add to both `<ActionBar>` calls (empty state at ~line 269 and populated state at ~line 328):
-
-```tsx
-<ActionBar
-	// ... existing props ...
-	onRollAllInitiative={handleRollAllInitiative}
-	showRollAllInitiative={showRollAllInitiative}
-	onOpenSourceManager={() => setSourceManagerOpen((o) => !o)}
-/>
-```
-
-#### [x] 3. Remove stale code
-**File**: `apps/web/src/App.tsx`
-**Changes**:
-- The `onRollAllInitiative` and `onOpenSourceManager` props were already removed from `<TurnNavigation>` in Phase 1 — verify no references remain
-- Verify `sourceManagerOpen` state and the `<SourceManager>` rendering block (lines 287-291) still work correctly — the SourceManager inline panel is still toggled by the same state, just from a different trigger location
-
-### Success Criteria:
-
-#### Automated Verification:
-- [x] `pnpm check` passes
-
-#### Manual Verification:
-- [ ] Top bar: only Prev, round badge + name, trash, Next — no D20 or Library buttons
-- [ ] Bottom bar: input with Eye toggle, Add, conditional D20, overflow menu
-- [ ] Roll All Initiative (D20 in bottom bar): visible when bestiary creatures lack initiative, hidden after rolling
-- [ ] Overflow → Player Characters: opens player management modal
-- [ ] Overflow → Manage Sources: toggles source manager panel (same as before, just different trigger)
-- [ ] Overflow → Bulk Import: opens bulk import mode
-- [ ] Browse mode (Eye toggle): search stat blocks without adding, selecting opens panel
-- [ ] Clear encounter (top bar trash): still works with two-click confirmation
-- [ ] All animations (bar transitions) unchanged
-- [ ] Empty state: ActionBar centered with all functionality accessible
-
-**Implementation Note**: After completing this phase and all automated verification passes, pause here for manual confirmation from the human before proceeding to the next phase.
-
----
-
-## Testing Strategy
-
-### Unit Tests:
-- No domain/application changes — existing tests should pass unchanged
-- `pnpm check` covers typecheck + lint + existing test suite
-
-### Manual Testing Steps:
-1. Start with empty encounter — verify ActionBar is centered with Eye toggle and overflow menu
-2. Add a bestiary creature — verify D20 appears in bottom bar, top bar slides in with just 4 elements
-3. Click D20 → initiative rolls → D20 disappears from bottom bar
-4. Toggle Eye → input switches to browse mode → search and select → stat block opens → exits browse mode
-5. Open overflow menu → click each item → verify correct modal/panel opens
-6. Click trash in top bar → confirm → encounter clears, back to empty state
-7. Add custom creature (no creatureId) → D20 should not appear (no bestiary creatures)
-8. Add mix of custom + bestiary creatures → D20 visible → roll all → D20 hidden
-
-## Performance Considerations
-
-None — this is a pure UI reorganization with no new data fetching, state management changes, or rendering overhead. The `showRollAllInitiative` computation is a simple `.some()` over the combatant array, which is negligible.
-
-## References
-
-- Research: `docs/agents/research/2026-03-13-action-bars-and-buttons.md`
-- Top bar: `apps/web/src/components/turn-navigation.tsx`
-- Bottom bar: `apps/web/src/components/action-bar.tsx`
-- App layout: `apps/web/src/App.tsx`
-- Button: `apps/web/src/components/ui/button.tsx`
-- ConfirmButton: `apps/web/src/components/ui/confirm-button.tsx`
-- Roll all use case: `packages/application/src/roll-all-initiative-use-case.ts`
-- Combatant type: `packages/domain/src/types.ts`

docs/agents/research/2026-03-13-css-classes-buttons-hover.md

@@ -0,0 +1,188 @@
+---
+date: "2026-03-13T15:35:07.699570+00:00"
+git_commit: bd398080008349b47726d0016f4b03587f453833
+branch: main
+topic: "CSS class usage, button categorization, and hover effects across all components"
+tags: [research, codebase, css, tailwind, buttons, hover, ui]
+status: complete
+---
+
+# Research: CSS Class Usage, Button Categorization, and Hover Effects
+
+## Research Question
+How are CSS classes used across all components? How are buttons categorized — are there primary and secondary buttons? What hover effects exist, and are they unified?
+
+## Summary
+
+The project uses **Tailwind CSS v4** with a custom dark theme defined in `index.css` via `@theme`. All class merging goes through a `cn()` utility (clsx + tailwind-merge). Buttons are built on a shared `Button` component using **class-variance-authority (CVA)** with three variants: **default** (primary), **outline**, and **ghost**. Hover effects are partially unified through semantic color tokens (`hover-neutral`, `hover-action`, `hover-destructive`) defined in the theme, but several components use **one-off hardcoded hover colors** that bypass the token system.
+
+## Detailed Findings
+
+### Theme System (`index.css`)
+
+All colors are defined as CSS custom properties via Tailwind v4's `@theme` directive (`index.css:3-26`):
+
+| Token | Value | Purpose |
+|---|---|---|
+| `--color-background` | `#0f172a` | Page background |
+| `--color-foreground` | `#e2e8f0` | Default text |
+| `--color-muted` | `#64748b` | Subdued elements |
+| `--color-muted-foreground` | `#94a3b8` | Secondary text |
+| `--color-card` | `#1e293b` | Card/panel surfaces |
+| `--color-border` | `#334155` | Borders |
+| `--color-primary` | `#3b82f6` | Primary actions (blue) |
+| `--color-accent` | `#3b82f6` | Accent (same as primary) |
+| `--color-destructive` | `#ef4444` | Destructive actions (red) |
+
+**Hover tokens** (semantic layer for hover states):
+
+| Token | Resolves to | Usage |
+|---|---|---|
+| `hover-neutral` | `primary` (blue) | Text color on neutral hover |
+| `hover-action` | `primary` (blue) | Text color on action hover |
+| `hover-destructive` | `destructive` (red) | Text color on destructive hover |
+| `hover-neutral-bg` | `card` (slate) | Background on neutral hover |
+| `hover-action-bg` | `muted` | Background on action hover |
+| `hover-destructive-bg` | `transparent` | Background on destructive hover |
+
+### Button Component (`components/ui/button.tsx`)
+
+Uses CVA with three variants and three sizes:
+
+**Variants:**
+
+| Variant | Base styles | Hover |
+|---|---|---|
+| `default` (primary) | `bg-primary text-primary-foreground` | `hover:bg-primary/90` |
+| `outline` | `border border-border bg-transparent` | `hover:bg-hover-neutral-bg hover:text-hover-neutral` |
+| `ghost` | (no background/border) | `hover:bg-hover-neutral-bg hover:text-hover-neutral` |
+
+**Sizes:**
+
+| Size | Classes |
+|---|---|
+| `default` | `h-9 px-4 py-2` |
+| `sm` | `h-8 px-3 text-xs` |
+| `icon` | `h-8 w-8` |
+
+All variants share: `rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50`.
+
+There is **no "secondary" variant** — the outline variant is the closest equivalent.
+
+### Composite Button Components
+
+**ConfirmButton** (`components/ui/confirm-button.tsx`):
+- Wraps `Button variant="ghost" size="icon"`
+- Default state: `hover:text-hover-destructive` (uses token)
+- Confirming state: `bg-destructive text-primary-foreground animate-confirm-pulse hover:bg-destructive hover:text-primary-foreground`
+
+**OverflowMenu** (`components/ui/overflow-menu.tsx`):
+- Trigger: `Button variant="ghost" size="icon"` with `text-muted-foreground hover:text-hover-neutral`
+- Menu items: raw `<button>` elements with `hover:bg-muted/20` (**not using the token system**)
+
+### Button Usage Across Components
+
+| Component | Button type | Variant/Style |
+|---|---|---|
+| `action-bar.tsx:556` | `<Button type="submit">` | default (primary) — "Add" |
+| `action-bar.tsx:561` | `<Button type="button">` | default (primary) — "Roll all" |
+| `turn-navigation.tsx:25,54` | `<Button size="icon">` | default — prev/next turn |
+| `turn-navigation.tsx:47` | `<ConfirmButton>` | ghost+destructive — clear encounter |
+| `source-fetch-prompt.tsx:91` | `<Button size="sm">` | default — "Load" |
+| `source-fetch-prompt.tsx:106` | `<Button size="sm" variant="outline">` | outline — "Upload file" |
+| `bulk-import-prompt.tsx:31,45,106` | `<Button size="sm">` | default — "Done"/"Load All" |
+| `source-manager.tsx:50` | `<Button size="sm" variant="outline">` | outline — "Clear all" |
+| `hp-adjust-popover.tsx:112` | `<Button variant="ghost" size="icon">` | ghost + custom red — damage |
+| `hp-adjust-popover.tsx:124` | `<Button variant="ghost" size="icon">` | ghost + custom green — heal |
+| `player-management.tsx:67` | `<Button>` | default — "Create first player" |
+| `player-management.tsx:113` | `<Button variant="ghost">` | ghost — "Add player" |
+| `create-player-modal.tsx:177` | `<Button variant="ghost">` | ghost — "Cancel" |
+| `create-player-modal.tsx:180` | `<Button type="submit">` | default — "Save"/"Create" |
+| `combatant-row.tsx:625` | `<ConfirmButton>` | ghost+destructive — remove combatant |
+
+**Raw `<button>` elements** (not using the Button component):
+- `action-bar.tsx` — suggestion items, count increment/decrement, browse toggle, custom add (all inline-styled)
+- `combatant-row.tsx` — editable name, HP display, AC, initiative, concentration toggle
+- `stat-block-panel.tsx` — fold/close/pin/unpin buttons
+- `condition-picker.tsx` — condition items
+- `condition-tags.tsx` — condition tags, add condition button
+- `toast.tsx` — dismiss button
+- `player-management.tsx` — close modal, edit player
+- `create-player-modal.tsx` — close modal
+- `color-palette.tsx` — color swatches
+- `icon-grid.tsx` — icon options
+
+### Hover Effects Inventory
+
+**Using semantic tokens (unified):**
+
+| Hover class | Meaning | Used in |
+|---|---|---|
+| `hover:bg-hover-neutral-bg` | Neutral background highlight | button.tsx (outline/ghost), action-bar.tsx, condition-picker.tsx, condition-tags.tsx |
+| `hover:text-hover-neutral` | Text turns primary blue | button.tsx (outline/ghost), action-bar.tsx, combatant-row.tsx, stat-block-panel.tsx, ac-shield.tsx, toast.tsx, overflow-menu.tsx, condition-tags.tsx |
+| `hover:text-hover-action` | Action text (same as neutral) | action-bar.tsx (overflow trigger) |
+| `hover:text-hover-destructive` | Destructive text turns red | confirm-button.tsx, source-manager.tsx |
+| `hover:bg-hover-destructive-bg` | Destructive background (transparent) | source-manager.tsx |
+
+**One-off / hardcoded hover colors (NOT using tokens):**
+
+| Hover class | Used in | Context |
+|---|---|---|
+| `hover:bg-primary/90` | button.tsx (default variant) | Primary button darken |
+| `hover:bg-accent/20` | action-bar.tsx | Suggestion highlight, custom add |
+| `hover:bg-accent/40` | action-bar.tsx | Count +/- buttons, confirm queued |
+| `hover:bg-muted/20` | overflow-menu.tsx | Menu item highlight |
+| `hover:bg-red-950` | hp-adjust-popover.tsx | Damage button |
+| `hover:text-red-300` | hp-adjust-popover.tsx | Damage button text |
+| `hover:bg-emerald-950` | hp-adjust-popover.tsx | Heal button |
+| `hover:text-emerald-300` | hp-adjust-popover.tsx | Heal button text |
+| `hover:text-foreground` | player-management.tsx, create-player-modal.tsx, icon-grid.tsx | Close/edit buttons |
+| `hover:bg-background/50` | player-management.tsx | Player row hover |
+| `hover:bg-card` | icon-grid.tsx | Icon option hover |
+| `hover:border-hover-destructive` | source-manager.tsx | Clear all button border |
+| `hover:scale-110` | color-palette.tsx | Color swatch enlarge |
+| `hover:bg-destructive` | confirm-button.tsx (confirming state) | Maintain red bg on hover |
+| `hover:text-primary-foreground` | confirm-button.tsx (confirming state) | Maintain white text on hover |
+
+### Hover unification assessment
+
+The hover token system (`hover-neutral`, `hover-action`, `hover-destructive`) provides a consistent pattern for the most common interactions. The `Button` component's outline and ghost variants use these tokens, and many inline buttons in action-bar, combatant-row, stat-block-panel, and condition components also use them.
+
+However, there are notable gaps:
+1. **HP adjust popover** uses hardcoded red/green colors (`red-950`, `emerald-950`) instead of tokens
+2. **Overflow menu items** use `hover:bg-muted/20` instead of `hover:bg-hover-neutral-bg`
+3. **Player management modals** use `hover:text-foreground` and `hover:bg-background/50` instead of the semantic tokens
+4. **Action-bar suggestion items** use `hover:bg-accent/20` and `hover:bg-accent/40` — accent-specific patterns not in the token system
+5. **Icon grid** and **color palette** use their own hover patterns (`hover:bg-card`, `hover:scale-110`)
+
+## Code References
+
+- `apps/web/src/index.css:3-26` — Theme color definitions including hover tokens
+- `apps/web/src/components/ui/button.tsx:1-38` — Button component with CVA variants
+- `apps/web/src/components/ui/confirm-button.tsx:93-115` — ConfirmButton with destructive hover states
+- `apps/web/src/components/ui/overflow-menu.tsx:38-72` — OverflowMenu with non-token hover
+- `apps/web/src/components/hp-adjust-popover.tsx:117-129` — Hardcoded red/green hover colors
+- `apps/web/src/components/action-bar.tsx:80-188` — Mixed token and accent-based hovers
+- `apps/web/src/components/combatant-row.tsx:147-629` — Inline buttons with token hovers
+- `apps/web/src/components/player-management.tsx:58-98` — Non-token hover patterns
+- `apps/web/src/components/stat-block-panel.tsx:55-109` — Consistent token usage
+- `apps/web/src/lib/utils.ts:1-5` — `cn()` utility (clsx + twMerge)
+
+## Architecture Documentation
+
+The styling architecture follows this pattern:
+
+1. **Theme layer**: `index.css` defines all color tokens via `@theme`, including semantic hover tokens
+2. **Component layer**: `Button` (CVA) provides the shared button abstraction with three variants
+3. **Composite layer**: `ConfirmButton` and `OverflowMenu` wrap `Button` with additional behavior
+4. **Usage layer**: Components use either `Button` component or raw `<button>` elements with inline Tailwind classes
+
+The `cn()` utility from `lib/utils.ts` is used in 9+ components for conditional class merging.
+
+Custom animations are defined in `index.css` via `@keyframes` + `@utility` pairs: slide-in-right, confirm-pulse, settle-to-bottom, rise-to-center, slide-down-in, slide-up-out, concentration-pulse.
+
+## Open Questions
+
+1. The `hover-action` and `hover-action-bg` tokens are defined but rarely used — `hover-action` appears only once in `action-bar.tsx:565`. Is this intentional or an incomplete migration?
+2. The `accent` color (`#3b82f6`) is identical to `primary` — are they intended to diverge in the future, or is this redundancy?
+3. Should the hardcoded HP adjust colors (red/emerald) be promoted to theme tokens (e.g., `hover-damage`, `hover-heal`)?

knip.json

@@ -5,6 +5,6 @@
 			"entry": ["scripts/*.mjs"]
 		},
 		"packages/*": {},
-		"apps/*": {}
+		"apps/web": {}
 	}
 }

package.json

@@ -1,12 +1,19 @@
 {
 	"private": true,
 	"packageManager": "pnpm@10.6.0",
+	"pnpm": {
+		"overrides": {
+			"undici": ">=7.24.0"
+		}
+	},
 	"devDependencies": {
-		"@biomejs/biome": "2.0.0",
+		"@biomejs/biome": "2.4.7",
 		"@vitest/coverage-v8": "^3.2.4",
 		"jscpd": "^4.0.8",
 		"knip": "^5.85.0",
 		"lefthook": "^1.11.0",
+		"oxlint": "^1.55.0",
+		"oxlint-tsgolint": "^0.16.0",
 		"typescript": "^5.8.0",
 		"vitest": "^3.0.0"
 	},
@@ -21,6 +28,10 @@
 		"test:watch": "vitest",
 		"knip": "knip",
 		"jscpd": "jscpd",
-		"check": "pnpm audit --audit-level=high && knip && biome check . && tsc --build && vitest run && jscpd"
+		"oxlint": "oxlint --tsconfig apps/web/tsconfig.json --type-aware",
+		"check:ignores": "node scripts/check-lint-ignores.mjs",
+		"check:classnames": "node scripts/check-cn-classnames.mjs",
+		"check:props": "node scripts/check-component-props.mjs",
+		"check": "pnpm audit --audit-level=high && knip && biome check . && oxlint --tsconfig apps/web/tsconfig.json --type-aware && node scripts/check-lint-ignores.mjs && node scripts/check-cn-classnames.mjs && node scripts/check-component-props.mjs && tsc --build && vitest run && jscpd"
 	}
 }

packages/application/src/__tests__/helpers.ts

@@ -0,0 +1,54 @@
+import type { Encounter, PlayerCharacter } from "@initiative/domain";
+import { isDomainError } from "@initiative/domain";
+import type { EncounterStore, PlayerCharacterStore } from "../ports.js";
+
+export function requireSaved<T>(value: T | null): T {
+	if (value === null) throw new Error("Expected store.saved to be non-null");
+	return value;
+}
+
+export function expectSuccess<T>(
+	result: T,
+): asserts result is Exclude<T, { kind: "domain-error" }> {
+	if (isDomainError(result)) {
+		throw new Error(`Expected success, got domain error: ${result.message}`);
+	}
+}
+
+export function expectError(result: unknown): asserts result is {
+	kind: "domain-error";
+	code: string;
+	message: string;
+} {
+	if (!isDomainError(result)) {
+		throw new Error("Expected domain error");
+	}
+}
+
+export function stubEncounterStore(
+	initial: Encounter,
+): EncounterStore & { saved: Encounter | null } {
+	const stub = {
+		saved: null as Encounter | null,
+		get: () => initial,
+		save: (e: Encounter) => {
+			stub.saved = e;
+			stub.get = () => e;
+		},
+	};
+	return stub;
+}
+
+export function stubPlayerCharacterStore(
+	initial: readonly PlayerCharacter[],
+): PlayerCharacterStore & { saved: readonly PlayerCharacter[] | null } {
+	const stub = {
+		saved: null as readonly PlayerCharacter[] | null,
+		getAll: () => [...initial],
+		save: (characters: PlayerCharacter[]) => {
+			stub.saved = characters;
+			stub.getAll = () => [...characters];
+		},
+	};
+	return stub;
+}

packages/application/src/__tests__/roll-all-initiative-use-case.test.ts

@@ -0,0 +1,237 @@
+import {
+	type Creature,
+	combatantId,
+	createEncounter,
+	creatureId,
+	isDomainError,
+} from "@initiative/domain";
+import { describe, expect, it } from "vitest";
+import { rollAllInitiativeUseCase } from "../roll-all-initiative-use-case.js";
+import {
+	expectError,
+	expectSuccess,
+	requireSaved,
+	stubEncounterStore,
+} from "./helpers.js";
+
+const CREATURE_A = creatureId("creature-a");
+const CREATURE_B = creatureId("creature-b");
+
+function makeCreature(id: string, dex = 14): Creature {
+	return {
+		id: creatureId(id),
+		name: `Creature ${id}`,
+		source: "mm",
+		sourceDisplayName: "Monster Manual",
+		size: "Medium",
+		type: "humanoid",
+		alignment: "neutral",
+		ac: 12,
+		hp: { average: 10, formula: "2d8+2" },
+		speed: "30 ft.",
+		abilities: { str: 10, dex, con: 10, int: 10, wis: 10, cha: 10 },
+		cr: "1",
+		initiativeProficiency: 0,
+		proficiencyBonus: 2,
+		passive: 10,
+	};
+}
+
+function encounterWithCombatants(
+	combatants: Array<{
+		name: string;
+		creatureId?: string;
+		initiative?: number;
+	}>,
+) {
+	const result = createEncounter(
+		combatants.map((c) => ({
+			id: combatantId(c.name),
+			name: c.name,
+			creatureId: c.creatureId ? creatureId(c.creatureId) : undefined,
+			initiative: c.initiative,
+		})),
+	);
+	if (isDomainError(result)) throw new Error("Setup failed");
+	return result;
+}
+
+describe("rollAllInitiativeUseCase", () => {
+	it("skips combatants without creatureId", () => {
+		const enc = encounterWithCombatants([
+			{ name: "Fighter" },
+			{ name: "Goblin", creatureId: "creature-a" },
+		]);
+		const store = stubEncounterStore(enc);
+		const creature = makeCreature("creature-a");
+
+		const result = rollAllInitiativeUseCase(
+			store,
+			() => 10,
+			(id) => (id === CREATURE_A ? creature : undefined),
+		);
+
+		expectSuccess(result);
+		expect(result.events.length).toBeGreaterThan(0);
+		const saved = requireSaved(store.saved);
+		const fighter = saved.combatants.find((c) => c.name === "Fighter");
+		const goblin = saved.combatants.find((c) => c.name === "Goblin");
+		expect(fighter?.initiative).toBeUndefined();
+		expect(goblin?.initiative).toBeDefined();
+	});
+
+	it("skips combatants that already have initiative", () => {
+		const enc = encounterWithCombatants([
+			{ name: "Goblin", creatureId: "creature-a", initiative: 15 },
+		]);
+		const store = stubEncounterStore(enc);
+
+		const result = rollAllInitiativeUseCase(
+			store,
+			() => 10,
+			() => makeCreature("creature-a"),
+		);
+
+		expectSuccess(result);
+		expect(result.events).toHaveLength(0);
+		expect(requireSaved(store.saved).combatants[0].initiative).toBe(15);
+	});
+
+	it("counts skippedNoSource when creature lookup returns undefined", () => {
+		const enc = encounterWithCombatants([
+			{ name: "Unknown", creatureId: "missing" },
+		]);
+		const store = stubEncounterStore(enc);
+
+		const result = rollAllInitiativeUseCase(
+			store,
+			() => 10,
+			() => undefined,
+		);
+
+		expectSuccess(result);
+		expect(result.skippedNoSource).toBe(1);
+		expect(result.events).toHaveLength(0);
+	});
+
+	it("accumulates events from multiple setInitiative calls", () => {
+		const enc = encounterWithCombatants([
+			{ name: "A", creatureId: "creature-a" },
+			{ name: "B", creatureId: "creature-b" },
+		]);
+		const store = stubEncounterStore(enc);
+		const creatureA = makeCreature("creature-a");
+		const creatureB = makeCreature("creature-b");
+
+		const result = rollAllInitiativeUseCase(
+			store,
+			() => 10,
+			(id) => {
+				if (id === CREATURE_A) return creatureA;
+				if (id === CREATURE_B) return creatureB;
+				return undefined;
+			},
+		);
+
+		expectSuccess(result);
+		expect(result.events).toHaveLength(2);
+	});
+
+	it("returns early with domain error on invalid dice roll", () => {
+		const enc = encounterWithCombatants([
+			{ name: "A", creatureId: "creature-a" },
+			{ name: "B", creatureId: "creature-b" },
+		]);
+		const store = stubEncounterStore(enc);
+
+		// rollDice returns 0 (invalid — must be 1–20), triggers early return
+		const result = rollAllInitiativeUseCase(
+			store,
+			() => 0,
+			(id) => {
+				if (id === CREATURE_A) return makeCreature("creature-a");
+				if (id === CREATURE_B) return makeCreature("creature-b");
+				return undefined;
+			},
+		);
+
+		expectError(result);
+		expect(result.code).toBe("invalid-dice-roll");
+		// Store should NOT have been saved since the loop aborted
+		expect(store.saved).toBeNull();
+	});
+
+	it("uses higher roll with advantage", () => {
+		const enc = encounterWithCombatants([
+			{ name: "A", creatureId: "creature-a" },
+		]);
+		const store = stubEncounterStore(enc);
+		const creature = makeCreature("creature-a");
+
+		// Alternating rolls: 5, 15 → advantage picks 15
+		// Dex 14 → modifier +2, so 15 + 2 = 17
+		let call = 0;
+		const result = rollAllInitiativeUseCase(
+			store,
+			() => (++call % 2 === 1 ? 5 : 15),
+			(id) => (id === CREATURE_A ? creature : undefined),
+			"advantage",
+		);
+
+		expectSuccess(result);
+		expect(requireSaved(store.saved).combatants[0].initiative).toBe(17);
+	});
+
+	it("uses lower roll with disadvantage", () => {
+		const enc = encounterWithCombatants([
+			{ name: "A", creatureId: "creature-a" },
+		]);
+		const store = stubEncounterStore(enc);
+		const creature = makeCreature("creature-a");
+
+		// Alternating rolls: 15, 5 → disadvantage picks 5
+		// Dex 14 → modifier +2, so 5 + 2 = 7
+		let call = 0;
+		const result = rollAllInitiativeUseCase(
+			store,
+			() => (++call % 2 === 1 ? 15 : 5),
+			(id) => (id === CREATURE_A ? creature : undefined),
+			"disadvantage",
+		);
+
+		expectSuccess(result);
+		expect(requireSaved(store.saved).combatants[0].initiative).toBe(7);
+	});
+
+	it("saves encounter once at the end", () => {
+		const enc = encounterWithCombatants([
+			{ name: "A", creatureId: "creature-a" },
+			{ name: "B", creatureId: "creature-b" },
+		]);
+		const store = stubEncounterStore(enc);
+		const creatureA = makeCreature("creature-a");
+		const creatureB = makeCreature("creature-b");
+
+		let saveCount = 0;
+		const originalSave = store.save.bind(store);
+		store.save = (e) => {
+			saveCount++;
+			originalSave(e);
+		};
+
+		rollAllInitiativeUseCase(
+			store,
+			() => 10,
+			(id) => {
+				if (id === CREATURE_A) return creatureA;
+				if (id === CREATURE_B) return creatureB;
+				return undefined;
+			},
+		);
+
+		expect(saveCount).toBe(1);
+		const saved = requireSaved(store.saved);
+		expect(saved.combatants[0].initiative).toBeDefined();
+		expect(saved.combatants[1].initiative).toBeDefined();
+	});
+});

packages/application/src/__tests__/roll-initiative-use-case.test.ts

@@ -0,0 +1,191 @@
+import {
+	type Creature,
+	type CreatureId,
+	combatantId,
+	createEncounter,
+	creatureId,
+	isDomainError,
+} from "@initiative/domain";
+import { describe, expect, it } from "vitest";
+import { addCombatantUseCase } from "../add-combatant-use-case.js";
+import { rollInitiativeUseCase } from "../roll-initiative-use-case.js";
+import { expectError, requireSaved, stubEncounterStore } from "./helpers.js";
+
+const GOBLIN_ID = creatureId("goblin");
+
+function makeCreature(overrides?: Partial<Creature>): Creature {
+	return {
+		id: GOBLIN_ID,
+		name: "Goblin",
+		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,
+		...overrides,
+	};
+}
+
+function encounterWithCreatureLink(name: string, creature: CreatureId) {
+	const enc = createEncounter([]);
+	if (isDomainError(enc)) throw new Error("Setup failed");
+	const id = combatantId(name);
+	const store = stubEncounterStore(enc);
+	addCombatantUseCase(store, id, name);
+	const saved = requireSaved(store.saved);
+	const result = createEncounter(
+		saved.combatants.map((c) =>
+			c.id === id ? { ...c, creatureId: creature } : c,
+		),
+		saved.activeIndex,
+		saved.roundNumber,
+	);
+	if (isDomainError(result)) throw new Error("Setup failed");
+	return result;
+}
+
+describe("rollInitiativeUseCase", () => {
+	it("returns domain error when combatant not found", () => {
+		const enc = createEncounter([]);
+		if (isDomainError(enc)) throw new Error("Setup failed");
+		const store = stubEncounterStore(enc);
+
+		const result = rollInitiativeUseCase(
+			store,
+			combatantId("unknown"),
+			[10],
+			() => undefined,
+		);
+
+		expectError(result);
+		expect(result.code).toBe("combatant-not-found");
+		expect(store.saved).toBeNull();
+	});
+
+	it("returns domain error when combatant has no creature link", () => {
+		const enc = createEncounter([]);
+		if (isDomainError(enc)) throw new Error("Setup failed");
+		const store1 = stubEncounterStore(enc);
+		addCombatantUseCase(store1, combatantId("Fighter"), "Fighter");
+
+		const store = stubEncounterStore(requireSaved(store1.saved));
+		const result = rollInitiativeUseCase(
+			store,
+			combatantId("Fighter"),
+			[10],
+			() => undefined,
+		);
+
+		expectError(result);
+		expect(result.code).toBe("no-creature-link");
+		expect(store.saved).toBeNull();
+	});
+
+	it("returns domain error when creature not found in getter", () => {
+		const enc = encounterWithCreatureLink("Goblin", GOBLIN_ID);
+		const store = stubEncounterStore(enc);
+
+		const result = rollInitiativeUseCase(
+			store,
+			combatantId("Goblin"),
+			[10],
+			() => undefined,
+		);
+
+		expectError(result);
+		expect(result.code).toBe("creature-not-found");
+		expect(store.saved).toBeNull();
+	});
+
+	it("calculates initiative from creature and saves", () => {
+		const creature = makeCreature();
+		const enc = encounterWithCreatureLink("Goblin", GOBLIN_ID);
+		const store = stubEncounterStore(enc);
+
+		// Dex 14 -> modifier +2, CR 1/4 -> PB 2, initiativeProficiency 0
+		// So initiative modifier = 2 + 0*2 = 2
+		// Roll 10 + modifier 2 = 12
+		const result = rollInitiativeUseCase(
+			store,
+			combatantId("Goblin"),
+			[10],
+			(id) => (id === GOBLIN_ID ? creature : undefined),
+		);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved).combatants[0].initiative).toBe(12);
+	});
+
+	it("uses higher roll with advantage", () => {
+		const creature = makeCreature();
+		const enc = encounterWithCreatureLink("Goblin", GOBLIN_ID);
+		const store = stubEncounterStore(enc);
+
+		// Dex 14 -> modifier +2, advantage picks max(5, 15) = 15, 15 + 2 = 17
+		const result = rollInitiativeUseCase(
+			store,
+			combatantId("Goblin"),
+			[5, 15],
+			(id) => (id === GOBLIN_ID ? creature : undefined),
+			"advantage",
+		);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved).combatants[0].initiative).toBe(17);
+	});
+
+	it("uses lower roll with disadvantage", () => {
+		const creature = makeCreature();
+		const enc = encounterWithCreatureLink("Goblin", GOBLIN_ID);
+		const store = stubEncounterStore(enc);
+
+		// Dex 14 -> modifier +2, disadvantage picks min(5, 15) = 5, 5 + 2 = 7
+		const result = rollInitiativeUseCase(
+			store,
+			combatantId("Goblin"),
+			[5, 15],
+			(id) => (id === GOBLIN_ID ? creature : undefined),
+			"disadvantage",
+		);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved).combatants[0].initiative).toBe(7);
+	});
+
+	it("applies initiative proficiency bonus correctly", () => {
+		// CR 5 -> PB 3, dex 16 -> mod +3, initiativeProficiency 1
+		// modifier = 3 + 1*3 = 6, roll 8 + 6 = 14
+		const creature = makeCreature({
+			abilities: {
+				str: 10,
+				dex: 16,
+				con: 10,
+				int: 10,
+				wis: 10,
+				cha: 10,
+			},
+			cr: "5",
+			initiativeProficiency: 1,
+		});
+		const enc = encounterWithCreatureLink("Monster", GOBLIN_ID);
+		const store = stubEncounterStore(enc);
+
+		const result = rollInitiativeUseCase(
+			store,
+			combatantId("Monster"),
+			[8],
+			(id) => (id === GOBLIN_ID ? creature : undefined),
+		);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved).combatants[0].initiative).toBe(14);
+	});
+});

packages/application/src/__tests__/use-cases.test.ts

@@ -0,0 +1,388 @@
+import {
+	type ConditionId,
+	combatantId,
+	createEncounter,
+	isDomainError,
+	playerCharacterId,
+} from "@initiative/domain";
+import { describe, expect, it } from "vitest";
+import { addCombatantUseCase } from "../add-combatant-use-case.js";
+import { adjustHpUseCase } from "../adjust-hp-use-case.js";
+import { advanceTurnUseCase } from "../advance-turn-use-case.js";
+import { clearEncounterUseCase } from "../clear-encounter-use-case.js";
+import { createPlayerCharacterUseCase } from "../create-player-character-use-case.js";
+import { deletePlayerCharacterUseCase } from "../delete-player-character-use-case.js";
+import { editCombatantUseCase } from "../edit-combatant-use-case.js";
+import { editPlayerCharacterUseCase } from "../edit-player-character-use-case.js";
+import { removeCombatantUseCase } from "../remove-combatant-use-case.js";
+import { retreatTurnUseCase } from "../retreat-turn-use-case.js";
+import { setAcUseCase } from "../set-ac-use-case.js";
+import { setHpUseCase } from "../set-hp-use-case.js";
+import { setInitiativeUseCase } from "../set-initiative-use-case.js";
+import { toggleConcentrationUseCase } from "../toggle-concentration-use-case.js";
+import { toggleConditionUseCase } from "../toggle-condition-use-case.js";
+import {
+	requireSaved,
+	stubEncounterStore,
+	stubPlayerCharacterStore,
+} from "./helpers.js";
+
+const ID_A = combatantId("a");
+
+function emptyEncounter() {
+	const result = createEncounter([]);
+	if (isDomainError(result)) throw new Error("Test setup failed");
+	return result;
+}
+
+function encounterWith(...names: string[]) {
+	let enc = emptyEncounter();
+	for (const name of names) {
+		const id = combatantId(name);
+		const store = stubEncounterStore(enc);
+		const result = addCombatantUseCase(store, id, name);
+		if (isDomainError(result)) throw new Error(`Setup failed: ${name}`);
+		enc = requireSaved(store.saved);
+	}
+	return enc;
+}
+
+function encounterWithHp(name: string, maxHp: number) {
+	const enc = encounterWith(name);
+	const store = stubEncounterStore(enc);
+	const id = combatantId(name);
+	setHpUseCase(store, id, maxHp);
+	return requireSaved(store.saved);
+}
+
+function createPc(name: string) {
+	const store = stubPlayerCharacterStore([]);
+	const id = playerCharacterId("pc-1");
+	createPlayerCharacterUseCase(store, id, name, 15, 40, undefined, undefined);
+	return { id, characters: requireSaved(store.saved) };
+}
+
+describe("addCombatantUseCase", () => {
+	it("adds a combatant and saves", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = addCombatantUseCase(store, ID_A, "Goblin");
+
+		expect(isDomainError(result)).toBe(false);
+		const saved = requireSaved(store.saved);
+		expect(saved.combatants).toHaveLength(1);
+		expect(saved.combatants[0].name).toBe("Goblin");
+	});
+
+	it("returns domain error for empty name", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = addCombatantUseCase(store, ID_A, "");
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("adjustHpUseCase", () => {
+	it("adjusts HP and saves", () => {
+		const enc = encounterWithHp("Goblin", 10);
+		const store = stubEncounterStore(enc);
+		const result = adjustHpUseCase(store, combatantId("Goblin"), -3);
+
+		expect(isDomainError(result)).toBe(false);
+		const saved = requireSaved(store.saved);
+		expect(saved.combatants[0].currentHp).toBe(7);
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = adjustHpUseCase(store, ID_A, -5);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("advanceTurnUseCase", () => {
+	it("advances turn and saves", () => {
+		const enc = encounterWith("A", "B");
+		const store = stubEncounterStore(enc);
+		const result = advanceTurnUseCase(store);
+
+		expect(isDomainError(result)).toBe(false);
+		const saved = requireSaved(store.saved);
+		expect(saved.activeIndex).toBe(1);
+	});
+
+	it("returns domain error on empty encounter", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = advanceTurnUseCase(store);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("clearEncounterUseCase", () => {
+	it("clears encounter and saves", () => {
+		const enc = encounterWith("Goblin");
+		const store = stubEncounterStore(enc);
+		const result = clearEncounterUseCase(store);
+
+		expect(isDomainError(result)).toBe(false);
+		const saved = requireSaved(store.saved);
+		expect(saved.combatants).toHaveLength(0);
+	});
+});
+
+describe("editCombatantUseCase", () => {
+	it("edits combatant name and saves", () => {
+		const enc = encounterWith("Goblin");
+		const store = stubEncounterStore(enc);
+		const result = editCombatantUseCase(
+			store,
+			combatantId("Goblin"),
+			"Hobgoblin",
+		);
+
+		expect(isDomainError(result)).toBe(false);
+		const saved = requireSaved(store.saved);
+		expect(saved.combatants[0].name).toBe("Hobgoblin");
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = editCombatantUseCase(store, ID_A, "X");
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("removeCombatantUseCase", () => {
+	it("removes combatant and saves", () => {
+		const enc = encounterWith("Goblin");
+		const store = stubEncounterStore(enc);
+		const result = removeCombatantUseCase(store, combatantId("Goblin"));
+
+		expect(isDomainError(result)).toBe(false);
+		const saved = requireSaved(store.saved);
+		expect(saved.combatants).toHaveLength(0);
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = removeCombatantUseCase(store, ID_A);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("retreatTurnUseCase", () => {
+	it("retreats turn and saves", () => {
+		const enc = encounterWith("A", "B");
+		const store1 = stubEncounterStore(enc);
+		advanceTurnUseCase(store1);
+		const store = stubEncounterStore(requireSaved(store1.saved));
+		const result = retreatTurnUseCase(store);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(store.saved).not.toBeNull();
+	});
+
+	it("returns domain error on empty encounter", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = retreatTurnUseCase(store);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("setAcUseCase", () => {
+	it("sets AC and saves", () => {
+		const enc = encounterWith("Goblin");
+		const store = stubEncounterStore(enc);
+		const result = setAcUseCase(store, combatantId("Goblin"), 15);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved).combatants[0].ac).toBe(15);
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = setAcUseCase(store, ID_A, 15);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("setHpUseCase", () => {
+	it("sets max HP and saves", () => {
+		const enc = encounterWith("Goblin");
+		const store = stubEncounterStore(enc);
+		const result = setHpUseCase(store, combatantId("Goblin"), 20);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved).combatants[0].maxHp).toBe(20);
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = setHpUseCase(store, ID_A, 20);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("setInitiativeUseCase", () => {
+	it("sets initiative and saves", () => {
+		const enc = encounterWith("Goblin");
+		const store = stubEncounterStore(enc);
+		const result = setInitiativeUseCase(store, combatantId("Goblin"), 15);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved).combatants[0].initiative).toBe(15);
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = setInitiativeUseCase(store, ID_A, 15);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("toggleConcentrationUseCase", () => {
+	it("toggles concentration and saves", () => {
+		const enc = encounterWith("Wizard");
+		const store = stubEncounterStore(enc);
+		const result = toggleConcentrationUseCase(store, combatantId("Wizard"));
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved).combatants[0].isConcentrating).toBe(true);
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = toggleConcentrationUseCase(store, ID_A);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("toggleConditionUseCase", () => {
+	it("toggles condition and saves", () => {
+		const enc = encounterWith("Goblin");
+		const store = stubEncounterStore(enc);
+		const result = toggleConditionUseCase(
+			store,
+			combatantId("Goblin"),
+			"blinded" as ConditionId,
+		);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved).combatants[0].conditions).toContain(
+			"blinded",
+		);
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const store = stubEncounterStore(emptyEncounter());
+		const result = toggleConditionUseCase(
+			store,
+			ID_A,
+			"blinded" as ConditionId,
+		);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("createPlayerCharacterUseCase", () => {
+	it("creates a player character and saves", () => {
+		const store = stubPlayerCharacterStore([]);
+		const id = playerCharacterId("pc-1");
+		const result = createPlayerCharacterUseCase(
+			store,
+			id,
+			"Gandalf",
+			15,
+			40,
+			undefined,
+			undefined,
+		);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved)).toHaveLength(1);
+	});
+
+	it("returns domain error for invalid input", () => {
+		const store = stubPlayerCharacterStore([]);
+		const id = playerCharacterId("pc-1");
+		const result = createPlayerCharacterUseCase(
+			store,
+			id,
+			"",
+			15,
+			40,
+			undefined,
+			undefined,
+		);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("deletePlayerCharacterUseCase", () => {
+	it("deletes a player character and saves", () => {
+		const { id, characters } = createPc("Gandalf");
+		const store = stubPlayerCharacterStore(characters);
+		const result = deletePlayerCharacterUseCase(store, id);
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved)).toHaveLength(0);
+	});
+
+	it("returns domain error for unknown character", () => {
+		const store = stubPlayerCharacterStore([]);
+		const result = deletePlayerCharacterUseCase(
+			store,
+			playerCharacterId("unknown"),
+		);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});
+
+describe("editPlayerCharacterUseCase", () => {
+	it("edits a player character and saves", () => {
+		const { id, characters } = createPc("Gandalf");
+		const store = stubPlayerCharacterStore(characters);
+		const result = editPlayerCharacterUseCase(store, id, {
+			name: "Gandalf the White",
+		});
+
+		expect(isDomainError(result)).toBe(false);
+		expect(requireSaved(store.saved)[0].name).toBe("Gandalf the White");
+	});
+
+	it("returns domain error for unknown character", () => {
+		const store = stubPlayerCharacterStore([]);
+		const result = editPlayerCharacterUseCase(
+			store,
+			playerCharacterId("unknown"),
+			{ name: "X" },
+		);
+
+		expect(isDomainError(result)).toBe(true);
+		expect(store.saved).toBeNull();
+	});
+});

packages/application/src/create-player-character-use-case.ts

@@ -13,8 +13,8 @@ export function createPlayerCharacterUseCase(
 	name: string,
 	ac: number,
 	maxHp: number,
-	color: string,
+	color: string | undefined,
-	icon: string,
+	icon: string | undefined,
 ): DomainEvent[] | DomainError {
 	const characters = store.getAll();
 	const result = createPlayerCharacter(

packages/application/src/edit-player-character-use-case.ts

@@ -11,8 +11,8 @@ interface EditFields {
 	readonly name?: string;
 	readonly ac?: number;
 	readonly maxHp?: number;
-	readonly color?: string;
+	readonly color?: string | null;
-	readonly icon?: string;
+	readonly icon?: string | null;
 }
 
 export function editPlayerCharacterUseCase(

packages/application/src/index.ts

@@ -13,7 +13,10 @@ export type {
 } from "./ports.js";
 export { removeCombatantUseCase } from "./remove-combatant-use-case.js";
 export { retreatTurnUseCase } from "./retreat-turn-use-case.js";
-export { rollAllInitiativeUseCase } from "./roll-all-initiative-use-case.js";
+export {
+	type RollAllResult,
+	rollAllInitiativeUseCase,
+} from "./roll-all-initiative-use-case.js";
 export { rollInitiativeUseCase } from "./roll-initiative-use-case.js";
 export { setAcUseCase } from "./set-ac-use-case.js";
 export { setHpUseCase } from "./set-hp-use-case.js";

packages/application/src/roll-all-initiative-use-case.ts

@@ -5,32 +5,47 @@ import {
 	type DomainError,
 	type DomainEvent,
 	isDomainError,
+	type RollMode,
 	rollInitiative,
+	selectRoll,
 	setInitiative,
 } from "@initiative/domain";
 import type { EncounterStore } from "./ports.js";
 
+export interface RollAllResult {
+	events: DomainEvent[];
+	skippedNoSource: number;
+}
+
 export function rollAllInitiativeUseCase(
 	store: EncounterStore,
 	rollDice: () => number,
 	getCreature: (id: CreatureId) => Creature | undefined,
-): DomainEvent[] | DomainError {
+	mode: RollMode = "normal",
+): RollAllResult | DomainError {
 	let encounter = store.get();
 	const allEvents: DomainEvent[] = [];
+	let skippedNoSource = 0;
 
 	for (const combatant of encounter.combatants) {
 		if (!combatant.creatureId) continue;
 		if (combatant.initiative !== undefined) continue;
 
 		const creature = getCreature(combatant.creatureId);
-		if (!creature) continue;
+		if (!creature) {
+			skippedNoSource++;
+			continue;
+		}
 
 		const { modifier } = calculateInitiative({
 			dexScore: creature.abilities.dex,
 			cr: creature.cr,
 			initiativeProficiency: creature.initiativeProficiency,
 		});
-		const value = rollInitiative(rollDice(), modifier);
+		const roll1 = rollDice();
+		const effectiveRoll =
+			mode === "normal" ? roll1 : selectRoll(roll1, rollDice(), mode);
+		const value = rollInitiative(effectiveRoll, modifier);
 
 		if (isDomainError(value)) {
 			return value;
@@ -47,5 +62,5 @@ export function rollAllInitiativeUseCase(
 	}
 
 	store.save(encounter);
-	return allEvents;
+	return { events: allEvents, skippedNoSource };
 }

packages/application/src/roll-initiative-use-case.ts

@@ -6,7 +6,9 @@ import {
 	type DomainError,
 	type DomainEvent,
 	isDomainError,
+	type RollMode,
 	rollInitiative,
+	selectRoll,
 	setInitiative,
 } from "@initiative/domain";
 import type { EncounterStore } from "./ports.js";
@@ -14,8 +16,9 @@ import type { EncounterStore } from "./ports.js";
 export function rollInitiativeUseCase(
 	store: EncounterStore,
 	combatantId: CombatantId,
-	diceRoll: number,
+	diceRolls: readonly [number, ...number[]],
 	getCreature: (id: CreatureId) => Creature | undefined,
+	mode: RollMode = "normal",
 ): DomainEvent[] | DomainError {
 	const encounter = store.get();
 	const combatant = encounter.combatants.find((c) => c.id === combatantId);
@@ -50,7 +53,11 @@ export function rollInitiativeUseCase(
 		cr: creature.cr,
 		initiativeProficiency: creature.initiativeProficiency,
 	});
-	const value = rollInitiative(diceRoll, modifier);
+	const effectiveRoll =
+		mode === "normal"
+			? diceRolls[0]
+			: selectRoll(diceRolls[0], diceRolls[1] ?? diceRolls[0], mode);
+	const value = rollInitiative(effectiveRoll, modifier);
 
 	if (isDomainError(value)) {
 		return value;

packages/domain/src/__tests__/add-combatant.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { addCombatant } from "../add-combatant.js";
 import type { Combatant, Encounter } from "../types.js";
 import { combatantId, isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 // --- Helpers ---
 
@@ -112,20 +113,14 @@ describe("addCombatant", () => {
 			const e = enc([A, B]);
 			const result = addCombatant(e, combatantId("x"), "");
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-name");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-name");
-			}
 		});
 
 		it("scenario 6: whitespace-only name returns error", () => {
 			const e = enc([A, B]);
 			const result = addCombatant(e, combatantId("x"), "   ");
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-name");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-name");
-			}
 		});
 	});
 
@@ -146,12 +141,10 @@ describe("addCombatant", () => {
 			for (const e of scenarios) {
 				const result = successResult(e, "new", "New");
 				const { combatants, activeIndex } = result.encounter;
-				if (combatants.length > 0) {
+				// After adding a combatant, list is always non-empty
+				expect(combatants.length).toBeGreaterThan(0);
 				expect(activeIndex).toBeGreaterThanOrEqual(0);
 				expect(activeIndex).toBeLessThan(combatants.length);
-				} else {
-					expect(activeIndex).toBe(0);
-				}
 			}
 		});
 
@@ -188,7 +181,7 @@ describe("addCombatant", () => {
 		it("INV-7: new combatant is always appended at the end", () => {
 			const e = enc([A, B]);
 			const { encounter } = successResult(e, "C", "C");
-			expect(encounter.combatants[encounter.combatants.length - 1]).toEqual({
+			expect(encounter.combatants.at(-1)).toEqual({
 				id: combatantId("C"),
 				name: "C",
 			});

packages/domain/src/__tests__/adjust-hp.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { adjustHp } from "../adjust-hp.js";
 import type { Combatant, Encounter } from "../types.js";
 import { combatantId, isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 function makeCombatant(
 	name: string,
@@ -101,37 +102,25 @@ describe("adjustHp", () => {
 		it("returns error for nonexistent combatant", () => {
 			const e = enc([makeCombatant("A", { maxHp: 20, currentHp: 10 })]);
 			const result = adjustHp(e, combatantId("Z"), -1);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "combatant-not-found");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("combatant-not-found");
-			}
 		});
 
 		it("returns error when combatant has no HP tracking", () => {
 			const e = enc([makeCombatant("A")]);
 			const result = adjustHp(e, combatantId("A"), -1);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "no-hp-tracking");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("no-hp-tracking");
-			}
 		});
 
 		it("returns error for zero delta", () => {
 			const e = enc([makeCombatant("A", { maxHp: 20, currentHp: 10 })]);
 			const result = adjustHp(e, combatantId("A"), 0);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "zero-delta");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("zero-delta");
-			}
 		});
 
 		it("returns error for non-integer delta", () => {
 			const e = enc([makeCombatant("A", { maxHp: 20, currentHp: 10 })]);
 			const result = adjustHp(e, combatantId("A"), 1.5);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-delta");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-delta");
-			}
 		});
 	});
 

packages/domain/src/__tests__/advance-turn.test.ts

@@ -7,6 +7,7 @@ import {
 	createEncounter,
 	type Encounter,
 } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 // --- Helpers ---
 
@@ -150,10 +151,7 @@ describe("advanceTurn", () => {
 			};
 			const result = advanceTurn(enc);
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-encounter");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-encounter");
-			}
 		});
 
 		it("scenario 8: three advances on [A,B,C] completes a full round cycle", () => {

packages/domain/src/__tests__/create-player-character.test.ts

@@ -3,6 +3,7 @@ import { createPlayerCharacter } from "../create-player-character.js";
 import type { PlayerCharacter } from "../player-character-types.js";
 import { playerCharacterId } from "../player-character-types.js";
 import { isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 const id = playerCharacterId("pc-1");
 
@@ -80,10 +81,7 @@ describe("createPlayerCharacter", () => {
 
 	it("rejects empty name", () => {
 		const result = createPlayerCharacter([], id, "", 10, 50, "blue", "sword");
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-name");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-name");
-		}
 	});
 
 	it("rejects whitespace-only name", () => {
@@ -96,10 +94,7 @@ describe("createPlayerCharacter", () => {
 			"blue",
 			"sword",
 		);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-name");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-name");
-		}
 	});
 
 	it("rejects negative AC", () => {
@@ -112,10 +107,7 @@ describe("createPlayerCharacter", () => {
 			"blue",
 			"sword",
 		);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-ac");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-ac");
-		}
 	});
 
 	it("rejects non-integer AC", () => {
@@ -128,10 +120,7 @@ describe("createPlayerCharacter", () => {
 			"blue",
 			"sword",
 		);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-ac");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-ac");
-		}
 	});
 
 	it("allows AC of 0", () => {
@@ -149,10 +138,7 @@ describe("createPlayerCharacter", () => {
 			"blue",
 			"sword",
 		);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-max-hp");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-max-hp");
-		}
 	});
 
 	it("rejects negative maxHp", () => {
@@ -165,10 +151,7 @@ describe("createPlayerCharacter", () => {
 			"blue",
 			"sword",
 		);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-max-hp");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-max-hp");
-		}
 	});
 
 	it("rejects non-integer maxHp", () => {
@@ -181,10 +164,7 @@ describe("createPlayerCharacter", () => {
 			"blue",
 			"sword",
 		);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-max-hp");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-max-hp");
-		}
 	});
 
 	it("rejects invalid color", () => {
@@ -197,10 +177,7 @@ describe("createPlayerCharacter", () => {
 			"neon",
 			"sword",
 		);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-color");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-color");
-		}
 	});
 
 	it("rejects invalid icon", () => {
@@ -213,10 +190,50 @@ describe("createPlayerCharacter", () => {
 			"blue",
 			"banana",
 		);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-icon");
-		if (isDomainError(result)) {
+	});
-			expect(result.code).toBe("invalid-icon");
+
-		}
+	it("allows undefined color", () => {
+		const result = createPlayerCharacter(
+			[],
+			id,
+			"Test",
+			10,
+			50,
+			undefined,
+			"sword",
+		);
+		if (isDomainError(result)) throw new Error(result.message);
+		expect(result.characters[0].color).toBeUndefined();
+	});
+
+	it("allows undefined icon", () => {
+		const result = createPlayerCharacter(
+			[],
+			id,
+			"Test",
+			10,
+			50,
+			"blue",
+			undefined,
+		);
+		if (isDomainError(result)) throw new Error(result.message);
+		expect(result.characters[0].icon).toBeUndefined();
+	});
+
+	it("allows both color and icon undefined", () => {
+		const result = createPlayerCharacter(
+			[],
+			id,
+			"Test",
+			10,
+			50,
+			undefined,
+			undefined,
+		);
+		if (isDomainError(result)) throw new Error(result.message);
+		expect(result.characters[0].color).toBeUndefined();
+		expect(result.characters[0].icon).toBeUndefined();
 	});
 
 	it("emits exactly one event on success", () => {

packages/domain/src/__tests__/delete-player-character.test.ts

@@ -3,6 +3,7 @@ import { deletePlayerCharacter } from "../delete-player-character.js";
 import type { PlayerCharacter } from "../player-character-types.js";
 import { playerCharacterId } from "../player-character-types.js";
 import { isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 const id1 = playerCharacterId("pc-1");
 const id2 = playerCharacterId("pc-2");
@@ -28,10 +29,7 @@ describe("deletePlayerCharacter", () => {
 
 	it("returns error for not-found id", () => {
 		const result = deletePlayerCharacter([makePC()], id2);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "player-character-not-found");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("player-character-not-found");
-		}
 	});
 
 	it("emits PlayerCharacterDeleted event", () => {

packages/domain/src/__tests__/edit-combatant.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { editCombatant } from "../edit-combatant.js";
 import type { Combatant, Encounter } from "../types.js";
 import { combatantId, isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 // --- Helpers ---
 
@@ -124,40 +125,28 @@ describe("editCombatant", () => {
 			const e = enc([Alice, Bob]);
 			const result = editCombatant(e, combatantId("nonexistent"), "NewName");
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "combatant-not-found");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("combatant-not-found");
-			}
 		});
 
 		it("empty name returns invalid-name error", () => {
 			const e = enc([Alice, Bob]);
 			const result = editCombatant(e, combatantId("Alice"), "");
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-name");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-name");
-			}
 		});
 
 		it("whitespace-only name returns invalid-name error", () => {
 			const e = enc([Alice, Bob]);
 			const result = editCombatant(e, combatantId("Alice"), "   ");
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-name");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-name");
-			}
 		});
 
 		it("empty encounter returns combatant-not-found for any id", () => {
 			const e = enc([]);
 			const result = editCombatant(e, combatantId("any"), "Name");
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "combatant-not-found");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("combatant-not-found");
-			}
 		});
 	});
 });

packages/domain/src/__tests__/edit-player-character.test.ts

@@ -3,6 +3,7 @@ import { editPlayerCharacter } from "../edit-player-character.js";
 import type { PlayerCharacter } from "../player-character-types.js";
 import { playerCharacterId } from "../player-character-types.js";
 import { isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 const id = playerCharacterId("pc-1");
 
@@ -42,50 +43,32 @@ describe("editPlayerCharacter", () => {
 			playerCharacterId("pc-999"),
 			{ name: "Nope" },
 		);
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "player-character-not-found");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("player-character-not-found");
-		}
 	});
 
 	it("rejects empty name", () => {
 		const result = editPlayerCharacter([makePC()], id, { name: "" });
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-name");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-name");
-		}
 	});
 
 	it("rejects invalid AC", () => {
 		const result = editPlayerCharacter([makePC()], id, { ac: -1 });
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-ac");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-ac");
-		}
 	});
 
 	it("rejects invalid maxHp", () => {
 		const result = editPlayerCharacter([makePC()], id, { maxHp: 0 });
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-max-hp");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-max-hp");
-		}
 	});
 
 	it("rejects invalid color", () => {
 		const result = editPlayerCharacter([makePC()], id, { color: "neon" });
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-color");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-color");
-		}
 	});
 
 	it("rejects invalid icon", () => {
 		const result = editPlayerCharacter([makePC()], id, { icon: "banana" });
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-icon");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-icon");
-		}
 	});
 
 	it("returns error when no fields changed", () => {
@@ -94,10 +77,7 @@ describe("editPlayerCharacter", () => {
 			name: pc.name,
 			ac: pc.ac,
 		});
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "no-changes");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("no-changes");
-		}
 	});
 
 	it("emits exactly one event on success", () => {
@@ -106,6 +86,22 @@ describe("editPlayerCharacter", () => {
 		expect(result.events).toHaveLength(1);
 	});
 
+	it("clears color when set to null", () => {
+		const result = editPlayerCharacter([makePC({ color: "green" })], id, {
+			color: null,
+		});
+		if (isDomainError(result)) throw new Error(result.message);
+		expect(result.characters[0].color).toBeUndefined();
+	});
+
+	it("clears icon when set to null", () => {
+		const result = editPlayerCharacter([makePC({ icon: "sword" })], id, {
+			icon: null,
+		});
+		if (isDomainError(result)) throw new Error(result.message);
+		expect(result.characters[0].icon).toBeUndefined();
+	});
+
 	it("event includes old and new name", () => {
 		const result = editPlayerCharacter([makePC()], id, { name: "Strider" });
 		if (isDomainError(result)) throw new Error(result.message);

packages/domain/src/__tests__/remove-combatant.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { removeCombatant } from "../remove-combatant.js";
 import type { Combatant, Encounter } from "../types.js";
 import { combatantId, isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 // --- Helpers ---
 
@@ -92,10 +93,7 @@ describe("removeCombatant", () => {
 			const e = enc([A, B], 0, 1);
 			const result = removeCombatant(e, combatantId("nonexistent"));
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "combatant-not-found");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("combatant-not-found");
-			}
 		});
 	});
 

packages/domain/src/__tests__/retreat-turn.test.ts

@@ -8,6 +8,7 @@ import {
 	type Encounter,
 	isDomainError,
 } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 // --- Helpers ---
 
@@ -83,10 +84,7 @@ describe("retreatTurn", () => {
 			const enc = encounter([A, B, C], 0, 1);
 			const result = retreatTurn(enc);
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "no-previous-turn");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("no-previous-turn");
-			}
 		});
 
 		it("scenario 4: single-combatant retreat — wraps to same combatant, decrements round", () => {
@@ -117,10 +115,7 @@ describe("retreatTurn", () => {
 			};
 			const result = retreatTurn(enc);
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-encounter");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-encounter");
-			}
 		});
 	});
 

packages/domain/src/__tests__/roll-initiative.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
-import { rollInitiative } from "../roll-initiative.js";
+import { rollInitiative, selectRoll } from "../roll-initiative.js";
 import { isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 describe("rollInitiative", () => {
 	describe("valid rolls", () => {
@@ -32,18 +33,12 @@ describe("rollInitiative", () => {
 	describe("invalid dice rolls", () => {
 		it("rejects 0", () => {
 			const result = rollInitiative(0, 5);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-dice-roll");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-dice-roll");
-			}
 		});
 
 		it("rejects 21", () => {
 			const result = rollInitiative(21, 5);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-dice-roll");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-dice-roll");
-			}
 		});
 
 		it("rejects non-integer (3.5)", () => {
@@ -68,3 +63,31 @@ describe("rollInitiative", () => {
 		});
 	});
 });
+
+describe("selectRoll", () => {
+	it("normal mode returns the first roll", () => {
+		expect(selectRoll(8, 15, "normal")).toBe(8);
+	});
+
+	it("advantage returns the higher roll", () => {
+		expect(selectRoll(8, 15, "advantage")).toBe(15);
+	});
+
+	it("advantage returns the higher roll (reversed)", () => {
+		expect(selectRoll(15, 8, "advantage")).toBe(15);
+	});
+
+	it("disadvantage returns the lower roll", () => {
+		expect(selectRoll(8, 15, "disadvantage")).toBe(8);
+	});
+
+	it("disadvantage returns the lower roll (reversed)", () => {
+		expect(selectRoll(15, 8, "disadvantage")).toBe(8);
+	});
+
+	it("equal rolls return the same value for all modes", () => {
+		expect(selectRoll(12, 12, "normal")).toBe(12);
+		expect(selectRoll(12, 12, "advantage")).toBe(12);
+		expect(selectRoll(12, 12, "disadvantage")).toBe(12);
+	});
+});

packages/domain/src/__tests__/set-ac.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { setAc } from "../set-ac.js";
 import type { Combatant, Encounter } from "../types.js";
 import { combatantId, isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 function makeCombatant(name: string, ac?: number): Combatant {
 	return ac === undefined
@@ -67,30 +68,21 @@ describe("setAc", () => {
 		const e = enc([makeCombatant("A")]);
 		const result = setAc(e, combatantId("nonexistent"), 10);
 
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "combatant-not-found");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("combatant-not-found");
-		}
 	});
 
 	it("returns error for negative AC", () => {
 		const e = enc([makeCombatant("A")]);
 		const result = setAc(e, combatantId("A"), -1);
 
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-ac");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-ac");
-		}
 	});
 
 	it("returns error for non-integer AC", () => {
 		const e = enc([makeCombatant("A")]);
 		const result = setAc(e, combatantId("A"), 3.5);
 
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "invalid-ac");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("invalid-ac");
-		}
 	});
 
 	it("returns error for NaN", () => {

packages/domain/src/__tests__/set-hp.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { setHp } from "../set-hp.js";
 import type { Combatant, Encounter } from "../types.js";
 import { combatantId, isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 function makeCombatant(
 	name: string,
@@ -10,9 +11,9 @@ function makeCombatant(
 	return {
 		id: combatantId(name),
 		name,
-		...(opts?.maxHp !== undefined
+		...(opts?.maxHp === undefined
-			? { maxHp: opts.maxHp, currentHp: opts.currentHp ?? opts.maxHp }
+			? {}
-			: {}),
+			: { maxHp: opts.maxHp, currentHp: opts.currentHp ?? opts.maxHp }),
 	};
 }
 
@@ -116,37 +117,25 @@ describe("setHp", () => {
 		it("returns error for nonexistent combatant", () => {
 			const e = enc([makeCombatant("A")]);
 			const result = setHp(e, combatantId("Z"), 10);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "combatant-not-found");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("combatant-not-found");
-			}
 		});
 
 		it("rejects maxHp of 0", () => {
 			const e = enc([makeCombatant("A")]);
 			const result = setHp(e, combatantId("A"), 0);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-max-hp");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-max-hp");
-			}
 		});
 
 		it("rejects negative maxHp", () => {
 			const e = enc([makeCombatant("A")]);
 			const result = setHp(e, combatantId("A"), -5);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-max-hp");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-max-hp");
-			}
 		});
 
 		it("rejects non-integer maxHp", () => {
 			const e = enc([makeCombatant("A")]);
 			const result = setHp(e, combatantId("A"), 3.5);
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-max-hp");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-max-hp");
-			}
 		});
 	});
 

packages/domain/src/__tests__/set-initiative.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { setInitiative } from "../set-initiative.js";
 import type { Combatant, Encounter } from "../types.js";
 import { combatantId, isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 // --- Helpers ---
 
@@ -73,10 +74,7 @@ describe("setInitiative", () => {
 			const e = enc([A, B], 0);
 			const result = setInitiative(e, combatantId("A"), 3.5);
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "invalid-initiative");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("invalid-initiative");
-			}
 		});
 
 		it("AS-3b: reject NaN", () => {
@@ -109,10 +107,7 @@ describe("setInitiative", () => {
 			const e = enc([A, B], 0);
 			const result = setInitiative(e, combatantId("nonexistent"), 10);
 
-			expect(isDomainError(result)).toBe(true);
+			expectDomainError(result, "combatant-not-found");
-			if (isDomainError(result)) {
-				expect(result.code).toBe("combatant-not-found");
-			}
 		});
 	});
 

packages/domain/src/__tests__/test-helpers.ts

@@ -0,0 +1,9 @@
+import { expect } from "vitest";
+import { type DomainError, isDomainError } from "../types.js";
+
+export function expectDomainError(result: unknown, code: string): DomainError {
+	expect(isDomainError(result)).toBe(true);
+	if (!isDomainError(result)) throw new Error("unreachable");
+	expect(result.code).toBe(code);
+	return result;
+}

packages/domain/src/__tests__/toggle-concentration.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { toggleConcentration } from "../toggle-concentration.js";
 import type { Combatant, Encounter } from "../types.js";
 import { combatantId, isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 function makeCombatant(name: string, isConcentrating?: boolean): Combatant {
 	return isConcentrating
@@ -46,10 +47,7 @@ describe("toggleConcentration", () => {
 		const e = enc([makeCombatant("A")]);
 		const result = toggleConcentration(e, combatantId("missing"));
 
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "combatant-not-found");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("combatant-not-found");
-		}
 	});
 
 	it("does not mutate input encounter", () => {

packages/domain/src/__tests__/toggle-condition.test.ts

@@ -4,6 +4,7 @@ import { CONDITION_DEFINITIONS } from "../conditions.js";
 import { toggleCondition } from "../toggle-condition.js";
 import type { Combatant, Encounter } from "../types.js";
 import { combatantId, isDomainError } from "../types.js";
+import { expectDomainError } from "./test-helpers.js";
 
 function makeCombatant(
 	name: string,
@@ -77,20 +78,14 @@ describe("toggleCondition", () => {
 			"flying" as ConditionId,
 		);
 
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "unknown-condition");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("unknown-condition");
-		}
 	});
 
 	it("returns error for nonexistent combatant", () => {
 		const e = enc([makeCombatant("A")]);
 		const result = toggleCondition(e, combatantId("missing"), "blinded");
 
-		expect(isDomainError(result)).toBe(true);
+		expectDomainError(result, "combatant-not-found");
-		if (isDomainError(result)) {
-			expect(result.code).toBe("combatant-not-found");
-		}
 	});
 
 	it("does not mutate input encounter", () => {

packages/domain/src/advance-turn.ts

@@ -1,6 +1,5 @@
 import type { DomainEvent } from "./events.js";
 import type { DomainError, Encounter } from "./types.js";
-import { isDomainError } from "./types.js";
 
 interface AdvanceTurnSuccess {
 	readonly encounter: Encounter;
@@ -62,4 +61,4 @@ export function advanceTurn(
 	};
 }
 
-export { isDomainError };
+export { isDomainError } from "./types.js";

packages/domain/src/auto-number.ts

@@ -23,7 +23,10 @@ export function resolveCreatureName(
 		if (name === baseName) {
 			exactMatches.push(i);
 		} else {
-			const match = new RegExp(`^${escapeRegExp(baseName)} (\\d+)$`).exec(name);
+			const match = new RegExp(
+				String.raw`^${escapeRegExp(baseName)} (\d+)$`,
+			).exec(name);
+			// biome-ignore lint/nursery/noUnnecessaryConditions: RegExp.exec() returns null on no match — false positive
 			if (match) {
 				const num = Number.parseInt(match[1], 10);
 				if (num > maxNumber) maxNumber = num;
@@ -50,5 +53,5 @@ export function resolveCreatureName(
 }
 
 function escapeRegExp(s: string): string {
-	return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	return s.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
 }