Add advantage/disadvantage rolling for initiative

Right-click or long-press the d20 button (per-combatant or Roll All)
to open a context menu with Advantage and Disadvantage options.
Normal left-click behavior is unchanged.

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

apps/web/src/App.tsx

@@ -7,6 +7,7 @@ import {
 	type Creature,
 	type CreatureId,
 	isDomainError,
+	type RollMode,
 } from "@initiative/domain";
 import {
 	useCallback,
@@ -30,6 +31,8 @@ import { useBulkImport } from "./hooks/use-bulk-import";
 import { useEncounter } from "./hooks/use-encounter";
 import { usePlayerCharacters } from "./hooks/use-player-characters";
 import { useSidePanelState } from "./hooks/use-side-panel-state";
+import { useTheme } from "./hooks/use-theme";
+import { cn } from "./lib/utils";
 
 function rollDice(): number {
 	return Math.floor(Math.random() * 20) + 1;
@@ -53,12 +56,12 @@ function useActionBarAnimation(combatantCount: number) {
 	}, [combatantCount]);
 
 	const empty = combatantCount === 0;
-	const risingClass = rising ? " animate-rise-to-center" : "";
+	const risingClass = rising ? "animate-rise-to-center" : "";
-	const settlingClass = settling ? " animate-settle-to-bottom" : "";
+	const settlingClass = settling ? "animate-settle-to-bottom" : "";
 	const exitingClass = topBarExiting
-		? " absolute inset-x-0 top-0 z-10 px-4 animate-slide-up-out"
+		? "absolute inset-x-0 top-0 z-10 px-4 animate-slide-up-out"
 		: "";
-	const topBarClass = settling ? " animate-slide-down-in" : exitingClass;
+	const topBarClass = settling ? "animate-slide-down-in" : exitingClass;
 	const showTopBar = !empty || topBarExiting;
 
 	return {
@@ -114,8 +117,10 @@ export function App() {
 
 	const bulkImport = useBulkImport();
 	const sidePanel = useSidePanelState();
+	const { preference: themePreference, cycleTheme } = useTheme();
 
 	const [rollSkippedCount, setRollSkippedCount] = useState(0);
+	const [rollSingleSkipped, setRollSingleSkipped] = useState(false);
 
 	const selectedCreature: Creature | null = sidePanel.selectedCreatureId
 		? (getCreature(sidePanel.selectedCreatureId) ?? null)
@@ -127,9 +132,12 @@ export function App() {
 
 	const handleAddFromBestiary = useCallback(
 		(result: SearchResult) => {
-			addFromBestiary(result);
+			const creatureId = addFromBestiary(result);
+			if (creatureId && sidePanel.panelView.mode === "closed") {
+				sidePanel.showCreature(creatureId);
+			}
 		},
-		[addFromBestiary],
+		[addFromBestiary, sidePanel.panelView.mode, sidePanel.showCreature],
 	);
 
 	const handleCombatantStatBlock = useCallback(
@@ -140,19 +148,42 @@ export function App() {
 	);
 
 	const handleRollInitiative = useCallback(
-		(id: CombatantId) => {
+		(id: CombatantId, mode: RollMode = "normal") => {
-			rollInitiativeUseCase(makeStore(), id, rollDice(), getCreature);
+			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) {
+					sidePanel.showCreature(combatant.creatureId);
+				}
+			}
+		},
+		[makeStore, getCreature, encounter.combatants, sidePanel.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],
 	);
 
-	const handleRollAllInitiative = useCallback(() => {
-		const result = rollAllInitiativeUseCase(makeStore(), rollDice, getCreature);
-		if (!isDomainError(result) && result.skippedNoSource > 0) {
-			setRollSkippedCount(result.skippedNoSource);
-		}
-	}, [makeStore, getCreature]);
-
 	const handleViewStatBlock = useCallback(
 		(result: SearchResult) => {
 			const slug = result.name
@@ -186,6 +217,15 @@ export function App() {
 	const playerCharacterRef = useRef<PlayerCharacterSectionHandle>(null);
 	const actionBarAnim = useActionBarAnimation(encounter.combatants.length);
 
+	// Auto-update stat block panel when the active combatant changes
+	const activeCreatureId =
+		encounter.combatants[encounter.activeIndex]?.creatureId;
+	useEffect(() => {
+		if (activeCreatureId && sidePanel.panelView.mode === "creature") {
+			sidePanel.updateCreature(activeCreatureId);
+		}
+	}, [activeCreatureId, sidePanel.panelView.mode, sidePanel.updateCreature]);
+
 	// Auto-scroll to the active combatant when the turn changes
 	const activeRowRef = useRef<HTMLDivElement>(null);
 	useEffect(() => {
@@ -195,30 +235,12 @@ export function App() {
 		});
 	}, []);
 
-	// 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 (!globalThis.matchMedia("(min-width: 1024px)").matches) return;
-		const active = encounter.combatants[encounter.activeIndex];
-		if (!active?.creatureId || !isLoaded) return;
-		sidePanel.showCreature(active.creatureId);
-	}, [
-		encounter.activeIndex,
-		encounter.combatants,
-		isLoaded,
-		sidePanel.showCreature,
-	]);
-
 	return (
-		<div className="flex h-screen flex-col">
+		<div className="flex h-dvh flex-col">
 			<div className="relative mx-auto flex min-h-0 w-full max-w-2xl flex-1 flex-col gap-3 px-4">
 				{!!actionBarAnim.showTopBar && (
 					<div
-						className={`shrink-0 pt-8${actionBarAnim.topBarClass}`}
+						className={cn("shrink-0 pt-8", actionBarAnim.topBarClass)}
 						onAnimationEnd={actionBarAnim.onTopBarExitEnd}
 					>
 						<TurnNavigation
@@ -234,7 +256,7 @@ export function App() {
 					/* Empty state — ActionBar centered */
 					<div className="flex min-h-0 flex-1 items-center justify-center pt-8 pb-[15%]">
 						<div
-							className={`w-full${actionBarAnim.risingClass}`}
+							className={cn("w-full", actionBarAnim.risingClass)}
 							onAnimationEnd={actionBarAnim.onRiseEnd}
 						>
 							<ActionBar
@@ -255,6 +277,8 @@ export function App() {
 								showRollAllInitiative={hasCreatureCombatants}
 								rollAllInitiativeDisabled={!canRollAllInitiative}
 								onOpenSourceManager={sidePanel.showSourceManager}
+								themePreference={themePreference}
+								onCycleTheme={cycleTheme}
 								autoFocus
 							/>
 						</div>
@@ -283,6 +307,9 @@ export function App() {
 												? () => handleCombatantStatBlock(c.creatureId as string)
 												: undefined
 										}
+										isStatBlockOpen={
+											c.creatureId === sidePanel.selectedCreatureId
+										}
 										onRollInitiative={
 											c.creatureId ? handleRollInitiative : undefined
 										}
@@ -293,7 +320,7 @@ export function App() {
 
 						{/* 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
@@ -314,6 +341,8 @@ export function App() {
 								showRollAllInitiative={hasCreatureCombatants}
 								rollAllInitiativeDisabled={!canRollAllInitiative}
 								onOpenSourceManager={sidePanel.showSourceManager}
+								themePreference={themePreference}
+								onCycleTheme={cycleTheme}
 							/>
 						</div>
 					</>
@@ -377,6 +406,14 @@ export function App() {
 				/>
 			)}
 
+			{!!rollSingleSkipped && (
+				<Toast
+					message="Can't roll — bestiary source not loaded"
+					onDismiss={() => setRollSingleSkipped(false)}
+					autoDismissMs={4000}
+				/>
+			)}
+
 			<PlayerCharacterSection
 				ref={playerCharacterRef}
 				characters={playerCharacters}

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

@@ -0,0 +1,163 @@
+// @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";
+
+// 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 />);
+
+		// 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 />);
+
+		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 />);
+
+		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/adapters/bestiary-adapter.ts

@@ -51,6 +51,7 @@ interface RawMonster {
 	legendaryHeader?: string[];
 	spellcasting?: RawSpellcasting[];
 	initiative?: { proficiency?: number };
+	_copy?: unknown;
 }
 
 interface RawEntry {
@@ -385,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/components/__tests__/combatant-row.test.tsx

@@ -75,7 +75,7 @@ describe("CombatantRow", () => {
 	it("active combatant gets active border styling", () => {
 		const { container } = renderRow({ isActive: true });
 		const row = container.firstElementChild;
-		expect(row?.className).toContain("border-l-accent");
+		expect(row?.className).toContain("border-active-row-border");
 	});
 
 	it("unconscious combatant (currentHp === 0) gets dimmed styling", () => {

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

@@ -1,4 +1,4 @@
-import type { PlayerCharacter } from "@initiative/domain";
+import type { PlayerCharacter, RollMode } from "@initiative/domain";
 import {
 	Check,
 	Eye,
@@ -6,14 +6,24 @@ import {
 	Import,
 	Library,
 	Minus,
+	Monitor,
+	Moon,
 	Plus,
+	Sun,
 	Users,
 } from "lucide-react";
-import React, { type RefObject, useDeferredValue, useState } from "react";
+import React, {
+	type RefObject,
+	useCallback,
+	useDeferredValue,
+	useState,
+} from "react";
 import type { SearchResult } from "../hooks/use-bestiary.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 { 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";
@@ -38,11 +48,13 @@ interface ActionBarProps {
 	playerCharacters?: readonly PlayerCharacter[];
 	onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
 	onManagePlayers?: () => void;
-	onRollAllInitiative?: () => void;
+	onRollAllInitiative?: (mode?: RollMode) => void;
 	showRollAllInitiative?: boolean;
 	rollAllInitiativeDisabled?: boolean;
 	onOpenSourceManager?: () => void;
 	autoFocus?: boolean;
+	themePreference?: "system" | "light" | "dark";
+	onCycleTheme?: () => void;
 }
 
 function creatureKey(r: SearchResult): string {
@@ -77,7 +89,7 @@ function AddModeSuggestions({
 	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-border border-b px-3 py-2 text-left text-accent text-sm hover:bg-accent/20"
@@ -137,12 +149,14 @@ 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(
-											if (isQueued) return "bg-accent/30 text-foreground";
+											"flex w-full items-center justify-between px-3 py-1.5 text-left text-foreground text-sm",
-											if (i === suggestionIndex)
+											isQueued && "bg-accent/30",
-												return "bg-accent/20 text-foreground";
+											!isQueued && i === suggestionIndex && "bg-accent/20",
-											return "text-foreground hover:bg-hover-neutral-bg";
+											!isQueued &&
-										})()}`}
+												i !== suggestionIndex &&
+												"hover:bg-hover-neutral-bg",
+										)}
 										onMouseDown={(e) => e.preventDefault()}
 										onClick={() => onClickSuggestion(result)}
 										onMouseEnter={() => onSetSuggestionIndex(i)}
@@ -169,7 +183,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
@@ -213,12 +227,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) {
@@ -243,6 +271,16 @@ function buildOverflowItems(opts: {
 			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;
 }
 
@@ -263,6 +301,8 @@ export function ActionBar({
 	rollAllInitiativeDisabled,
 	onOpenSourceManager,
 	autoFocus,
+	themePreference,
+	onCycleTheme,
 }: Readonly<ActionBarProps>) {
 	const [nameInput, setNameInput] = useState("");
 	const [suggestions, setSuggestions] = useState<SearchResult[]>([]);
@@ -446,16 +486,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,
 		bestiaryLoaded,
 		onBulkImport,
 		bulkImportDisabled,
+		themePreference,
+		onCycleTheme,
 	});
 
 	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"
@@ -496,17 +557,18 @@ export function ActionBar({
 							</button>
 						)}
 						{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">
 									{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)}
@@ -571,18 +633,32 @@ export function ActionBar({
 					<Button type="submit">Add</Button>
 				)}
 				{showRollAllInitiative && !!onRollAllInitiative && (
-					<Button
+					<>
-						type="button"
+						<Button
-						size="icon"
+							type="button"
-						variant="ghost"
+							size="icon"
-						className="text-muted-foreground hover:text-hover-action"
+							variant="ghost"
-						onClick={onRollAllInitiative}
+							className="text-muted-foreground hover:text-hover-action"
-						disabled={rollAllInitiativeDisabled}
+							onClick={() => onRollAllInitiative()}
-						title="Roll all initiative"
+							onContextMenu={(e) => {
-						aria-label="Roll all initiative"
+								e.preventDefault();
-					>
+								openRollAllMenu(e.clientX, e.clientY);
-						<D20Icon className="h-6 w-6" />
+							}}
-					</Button>
+							{...rollAllLongPress}
+							disabled={rollAllInitiativeDisabled}
+							title="Roll all initiative"
+							aria-label="Roll all initiative"
+						>
+							<D20Icon className="h-6 w-6" />
+						</Button>
+						{!!rollAllMenuPos && (
+							<RollModeMenu
+								position={rollAllMenuPos}
+								onSelect={(mode) => onRollAllInitiative(mode)}
+								onClose={() => setRollAllMenuPos(null)}
+							/>
+						)}
+					</>
 				)}
 				{overflowItems.length > 0 && <OverflowMenu items={overflowItems} />}
 			</form>

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

@@ -3,9 +3,11 @@ import {
 	type ConditionId,
 	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 { useLongPress } from "../hooks/use-long-press";
 import { cn } from "../lib/utils";
 import { AcShield } from "./ac-shield";
 import { ConditionPicker } from "./condition-picker";
@@ -13,6 +15,7 @@ import { ConditionTags } from "./condition-tags";
 import { D20Icon } from "./d20-icon";
 import { HpAdjustPopover } from "./hp-adjust-popover";
 import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
+import { RollModeMenu } from "./roll-mode-menu";
 import { ConfirmButton } from "./ui/confirm-button";
 import { Input } from "./ui/input";
 
@@ -41,28 +44,24 @@ interface CombatantRowProps {
 	onToggleCondition: (id: CombatantId, conditionId: ConditionId) => void;
 	onToggleConcentration: (id: CombatantId) => void;
 	onShowStatBlock?: () => void;
-	onRollInitiative?: (id: CombatantId) => void;
+	isStatBlockOpen?: boolean;
+	onRollInitiative?: (id: CombatantId, mode?: RollMode) => 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 +77,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) => {
@@ -138,11 +97,7 @@ function EditableName({
 	return (
 		<button
 			type="button"
-			onClick={handleClick}
+			onClick={startEditing}
-			onTouchStart={handleTouchStart}
-			onTouchEnd={cancelLongPress}
-			onTouchCancel={cancelLongPress}
-			onTouchMove={cancelLongPress}
 			className="cursor-text truncate text-left text-foreground text-sm transition-colors hover:text-hover-neutral"
 			style={color ? { color } : undefined}
 		>
@@ -244,6 +199,7 @@ 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 font-medium text-sm tabular-nums leading-7 transition-colors hover:text-hover-neutral",
 					status === "bloodied" && "text-amber-400",
@@ -326,11 +282,29 @@ function InitiativeDisplay({
 	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 === "") {
@@ -375,18 +349,32 @@ function InitiativeDisplay({
 	// Empty + bestiary creature → d20 roll button
 	if (initiative === undefined && onRollInitiative) {
 		return (
-			<button
+			<>
-				type="button"
+				<button
-				onClick={() => onRollInitiative(combatantId)}
+					type="button"
-				className={cn(
+					onClick={() => onRollInitiative(combatantId)}
-					"flex h-7 w-full items-center justify-center text-muted-foreground transition-colors hover:text-hover-neutral",
+					onContextMenu={(e) => {
-					dimmed && "opacity-50",
+						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",
+					)}
+					title="Roll initiative"
+					aria-label="Roll initiative"
+				>
+					<D20Icon className="h-7 w-7" />
+				</button>
+				{!!menuPos && (
+					<RollModeMenu
+						position={menuPos}
+						onSelect={(mode) => onRollInitiative(combatantId, mode)}
+						onClose={() => setMenuPos(null)}
+					/>
 				)}
-				title="Roll initiative"
+			</>
-				aria-label="Roll initiative"
-			>
-				<D20Icon className="h-7 w-7" />
-			</button>
 		);
 	}
 
@@ -413,9 +401,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,17 +419,6 @@ 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,
@@ -451,6 +432,7 @@ export function CombatantRow({
 	onToggleCondition,
 	onToggleConcentration,
 	onShowStatBlock,
+	isStatBlockOpen,
 	onRollInitiative,
 }: CombatantRowProps & { ref?: Ref<HTMLDivElement> }) {
 	const { id, name, initiative, maxHp, currentHp } = combatant;
@@ -490,31 +472,19 @@ export function CombatantRow({
 		: undefined;
 
 	return (
-		/* biome-ignore lint/a11y/noStaticElementInteractions: role="button" is set conditionally when onShowStatBlock exists */
-		/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: 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={() => onToggleConcentration(id)}
-						e.stopPropagation();
-						onToggleConcentration(id);
-					}}
 					title="Concentrating"
 					aria-label="Toggle concentration"
 					className={cn(
@@ -526,20 +496,13 @@ export function CombatantRow({
 				</button>
 
 				{/* Initiative */}
-				{/* biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation wrapper for interactive children */}
+				<InitiativeDisplay
-				{/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: stopPropagation wrapper for interactive children */}
+					initiative={initiative}
-				<div
+					combatantId={id}
-					onClick={(e) => e.stopPropagation()}
+					dimmed={dimmed}
-					onKeyDown={(e) => e.stopPropagation()}
+					onSetInitiative={onSetInitiative}
-				>
+					onRollInitiative={onRollInitiative}
-					<InitiativeDisplay
+				/>
-						initiative={initiative}
-						combatantId={id}
-						dimmed={dimmed}
-						onSetInitiative={onSetInitiative}
-						onRollInitiative={onRollInitiative}
-					/>
-				</div>
 
 				{/* Name + Conditions */}
 				<div
@@ -548,6 +511,17 @@ export function CombatantRow({
 						dimmed && "opacity-50",
 					)}
 				>
+					{!!onShowStatBlock && (
+						<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 &&
 						(() => {
@@ -558,7 +532,7 @@ export function CombatantRow({
 								];
 							return PcIcon ? (
 								<PcIcon
-									size={14}
+									size={16}
 									style={{ color: iconColor }}
 									className="shrink-0"
 								/>
@@ -568,7 +542,6 @@ export function CombatantRow({
 						name={name}
 						combatantId={id}
 						onRename={onRename}
-						onShowStatBlock={onShowStatBlock}
 						color={pcColor}
 					/>
 					<ConditionTags
@@ -586,24 +559,12 @@ export function CombatantRow({
 				</div>
 
 				{/* AC */}
-				{/* biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation wrapper for interactive children */}
+				<div className={cn(dimmed && "opacity-50")}>
-				{/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: stopPropagation wrapper for interactive children */}
-				<div
-					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">
-				{/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: stopPropagation wrapper for interactive children */}
-				<div
-					className="flex items-center gap-1"
-					onClick={(e) => e.stopPropagation()}
-					onKeyDown={(e) => e.stopPropagation()}
-				>
 					<ClickableHp
 						currentHp={currentHp}
 						maxHp={maxHp}

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

@@ -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,
@@ -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 transition-colors hover:bg-hover-neutral-bg ${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);

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

@@ -1,6 +1,6 @@
 import type { PlayerCharacter } from "@initiative/domain";
 import { X } from "lucide-react";
-import { 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";
@@ -25,6 +25,7 @@ export function CreatePlayerModal({
 	onSave,
 	playerCharacter,
 }: Readonly<CreatePlayerModalProps>) {
+	const dialogRef = useRef<HTMLDialogElement>(null);
 	const [name, setName] = useState("");
 	const [ac, setAc] = useState("10");
 	const [maxHp, setMaxHp] = useState("10");
@@ -54,15 +55,32 @@ export function CreatePlayerModal({
 	}, [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: React.SubmitEvent<HTMLFormElement>) => {
 		e.preventDefault();
@@ -86,106 +104,89 @@ export function CreatePlayerModal({
 	};
 
 	return (
-		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop click to close
+		<dialog
-		// biome-ignore lint/a11y/noNoninteractiveElementInteractions: backdrop click to close
+			ref={dialogRef}
-		<div
+			className="card-glow m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 backdrop:bg-black/50"
-			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-			onMouseDown={onClose}
 		>
-			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
+			<div className="mb-4 flex items-center justify-between">
-			{/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: prevent close when clicking modal content */}
+				<h2 className="font-semibold text-foreground text-lg">
-			<div
+					{isEdit ? "Edit Player" : "Create Player"}
-				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+				</h2>
-				onMouseDown={(e) => e.stopPropagation()}
+				<Button
-			>
+					variant="ghost"
-				<div className="mb-4 flex items-center justify-between">
+					size="icon"
-					<h2 className="font-semibold text-foreground text-lg">
+					onClick={onClose}
-						{isEdit ? "Edit Player" : "Create Player"}
+					className="text-muted-foreground"
-					</h2>
+				>
-					<Button
+					<X size={20} />
-						variant="ghost"
+				</Button>
-						size="icon"
+			</div>
-						onClick={onClose}
+
-						className="text-muted-foreground"
+			<form onSubmit={handleSubmit} className="flex flex-col gap-4">
-					>
+				<div>
-						<X size={20} />
+					<span className="mb-1 block text-muted-foreground text-sm">Name</span>
-					</Button>
+					<Input
+						type="text"
+						value={name}
+						onChange={(e) => {
+							setName(e.target.value);
+							setError("");
+						}}
+						placeholder="Character name"
+						aria-label="Name"
+						autoFocus
+					/>
+					{!!error && <p className="mt-1 text-destructive text-sm">{error}</p>}
 				</div>
 
-				<form onSubmit={handleSubmit} className="flex flex-col gap-4">
+				<div className="flex gap-3">
-					<div>
+					<div className="flex-1">
+						<span className="mb-1 block text-muted-foreground text-sm">AC</span>
+						<Input
+							type="text"
+							inputMode="numeric"
+							value={ac}
+							onChange={(e) => setAc(e.target.value)}
+							placeholder="AC"
+							aria-label="AC"
+							className="text-center"
+						/>
+					</div>
+					<div className="flex-1">
 						<span className="mb-1 block text-muted-foreground text-sm">
-							Name
+							Max HP
 						</span>
 						<Input
 							type="text"
-							value={name}
+							inputMode="numeric"
-							onChange={(e) => {
+							value={maxHp}
-								setName(e.target.value);
+							onChange={(e) => setMaxHp(e.target.value)}
-								setError("");
+							placeholder="Max HP"
-							}}
+							aria-label="Max HP"
-							placeholder="Character name"
+							className="text-center"
-							aria-label="Name"
-							autoFocus
 						/>
-						{!!error && (
-							<p className="mt-1 text-destructive text-sm">{error}</p>
-						)}
 					</div>
+				</div>
 
-					<div className="flex gap-3">
+				<div>
-						<div className="flex-1">
+					<span className="mb-2 block text-muted-foreground text-sm">
-							<span className="mb-1 block text-muted-foreground text-sm">
+						Color
-								AC
+					</span>
-							</span>
+					<ColorPalette value={color} onChange={setColor} />
-							<Input
+				</div>
-								type="text"
-								inputMode="numeric"
-								value={ac}
-								onChange={(e) => setAc(e.target.value)}
-								placeholder="AC"
-								aria-label="AC"
-								className="text-center"
-							/>
-						</div>
-						<div className="flex-1">
-							<span className="mb-1 block text-muted-foreground text-sm">
-								Max HP
-							</span>
-							<Input
-								type="text"
-								inputMode="numeric"
-								value={maxHp}
-								onChange={(e) => setMaxHp(e.target.value)}
-								placeholder="Max HP"
-								aria-label="Max HP"
-								className="text-center"
-							/>
-						</div>
-					</div>
 
-					<div>
+				<div>
-						<span className="mb-2 block text-muted-foreground text-sm">
+					<span className="mb-2 block text-muted-foreground text-sm">Icon</span>
-							Color
+					<IconGrid value={icon} onChange={setIcon} />
-						</span>
+				</div>
-						<ColorPalette value={color} onChange={setColor} />
-					</div>
 
-					<div>
+				<div className="flex justify-end gap-2 pt-2">
-						<span className="mb-2 block text-muted-foreground text-sm">
+					<Button type="button" variant="ghost" onClick={onClose}>
-							Icon
+						Cancel
-						</span>
+					</Button>
-						<IconGrid value={icon} onChange={setIcon} />
+					<Button type="submit">{isEdit ? "Save" : "Create"}</Button>
-					</div>
+				</div>
-
+			</form>
-					<div className="flex justify-end gap-2 pt-2">
+		</dialog>
-						<Button type="button" variant="ghost" onClick={onClose}>
-							Cancel
-						</Button>
-						<Button type="submit">{isEdit ? "Save" : "Create"}</Button>
-					</div>
-				</form>
-			</div>
-		</div>
 	);
 }

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

@@ -87,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 }
@@ -113,7 +113,7 @@ export function HpAdjustPopover({ onAdjust, onClose }: HpAdjustPopoverProps) {
 				<button
 					type="button"
 					disabled={!isValid}
-					className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-red-400 transition-colors hover:bg-red-950 hover:text-red-300 disabled:pointer-events-none disabled:opacity-50"
+					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"
@@ -123,7 +123,7 @@ export function HpAdjustPopover({ onAdjust, onClose }: HpAdjustPopoverProps) {
 				<button
 					type="button"
 					disabled={!isValid}
-					className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-emerald-400 transition-colors hover:bg-emerald-950 hover:text-emerald-300 disabled:pointer-events-none disabled:opacity-50"
+					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"

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

@@ -1,6 +1,6 @@
 import type { PlayerCharacter, PlayerCharacterId } 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";
@@ -22,102 +22,112 @@ export function PlayerManagement({
 	onDelete,
 	onCreate,
 }: 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
-		// biome-ignore lint/a11y/noNoninteractiveElementInteractions: backdrop click to close
+			ref={dialogRef}
-		<div
+			className="card-glow m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 backdrop:bg-black/50"
-			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-			onMouseDown={onClose}
 		>
-			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
+			<div className="mb-4 flex items-center justify-between">
-			{/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: prevent close when clicking modal content */}
+				<h2 className="font-semibold text-foreground text-lg">
-			<div
+					Player Characters
-				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+				</h2>
-				onMouseDown={(e) => e.stopPropagation()}
+				<Button
-			>
+					variant="ghost"
-				<div className="mb-4 flex items-center justify-between">
+					size="icon"
-					<h2 className="font-semibold text-foreground text-lg">
+					onClick={onClose}
-						Player Characters
+					className="text-muted-foreground"
-					</h2>
+				>
-					<Button
+					<X size={20} />
-						variant="ghost"
+				</Button>
-						size="icon"
+			</div>
-						onClick={onClose}
+
-						className="text-muted-foreground"
+			{characters.length === 0 ? (
-					>
+				<div className="flex flex-col items-center gap-3 py-8 text-center">
-						<X size={20} />
+					<p className="text-muted-foreground">No player characters yet</p>
+					<Button onClick={onCreate}>
+						<Plus size={16} />
+						Create your first player character
 					</Button>
 				</div>
-
+			) : (
-				{characters.length === 0 ? (
+				<div className="flex flex-col gap-1">
-					<div className="flex flex-col items-center gap-3 py-8 text-center">
+					{characters.map((pc) => {
-						<p className="text-muted-foreground">No player characters yet</p>
+						const Icon = pc.icon ? PLAYER_ICON_MAP[pc.icon] : undefined;
-						<Button onClick={onCreate}>
+						const color = pc.color ? PLAYER_COLOR_HEX[pc.color] : undefined;
+						return (
+							<div
+								key={pc.id}
+								className="group flex items-center gap-3 rounded-md px-3 py-2 hover:bg-hover-neutral-bg"
+							>
+								{!!Icon && (
+									<Icon size={18} style={{ color }} className="shrink-0" />
+								)}
+								<span className="flex-1 truncate text-foreground text-sm">
+									{pc.name}
+								</span>
+								<span className="text-muted-foreground text-xs tabular-nums">
+									AC {pc.ac}
+								</span>
+								<span className="text-muted-foreground text-xs tabular-nums">
+									HP {pc.maxHp}
+								</span>
+								<Button
+									variant="ghost"
+									size="icon-sm"
+									onClick={() => onEdit(pc)}
+									className="text-muted-foreground"
+									title="Edit"
+								>
+									<Pencil size={14} />
+								</Button>
+								<ConfirmButton
+									icon={<Trash2 size={14} />}
+									label="Delete player character"
+									onConfirm={() => onDelete(pc.id)}
+									size="icon-sm"
+									className="text-muted-foreground"
+								/>
+							</div>
+						);
+					})}
+					<div className="mt-2 flex justify-end">
+						<Button onClick={onCreate} variant="ghost">
 							<Plus size={16} />
-							Create your first player character
+							Add
 						</Button>
 					</div>
-				) : (
+				</div>
-					<div className="flex flex-col gap-1">
+			)}
-						{characters.map((pc) => {
+		</dialog>
-							const Icon = pc.icon ? PLAYER_ICON_MAP[pc.icon] : undefined;
-							const color = pc.color ? PLAYER_COLOR_HEX[pc.color] : undefined;
-							return (
-								<div
-									key={pc.id}
-									className="group flex items-center gap-3 rounded-md px-3 py-2 hover:bg-hover-neutral-bg"
-								>
-									{!!Icon && (
-										<Icon size={18} style={{ color }} className="shrink-0" />
-									)}
-									<span className="flex-1 truncate text-foreground text-sm">
-										{pc.name}
-									</span>
-									<span className="text-muted-foreground text-xs tabular-nums">
-										AC {pc.ac}
-									</span>
-									<span className="text-muted-foreground text-xs tabular-nums">
-										HP {pc.maxHp}
-									</span>
-									<Button
-										variant="ghost"
-										size="icon-sm"
-										onClick={() => onEdit(pc)}
-										className="text-muted-foreground"
-										title="Edit"
-									>
-										<Pencil size={14} />
-									</Button>
-									<ConfirmButton
-										icon={<Trash2 size={14} />}
-										label="Delete player character"
-										onConfirm={() => onDelete(pc.id)}
-										size="icon-sm"
-										className="text-muted-foreground"
-									/>
-								</div>
-							);
-						})}
-						<div className="mt-2 flex justify-end">
-							<Button onClick={onCreate} variant="ghost">
-								<Plus size={16} />
-								Add
-							</Button>
-						</div>
-					</div>
-				)}
-			</div>
-		</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-manager.tsx

@@ -1,8 +1,15 @@
-import { Database, Trash2 } from "lucide-react";
+import { Database, Search, Trash2 } from "lucide-react";
-import { useCallback, useEffect, useOptimistic, 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 { Button } from "./ui/button.js";
+import { Input } from "./ui/input.js";
 
 interface SourceManagerProps {
 	onCacheCleared: () => void;
@@ -12,6 +19,7 @@ export function SourceManager({
 	onCacheCleared,
 }: Readonly<SourceManagerProps>) {
 	const [sources, setSources] = useState<CachedSourceInfo[]>([]);
+	const [filter, setFilter] = useState("");
 	const [optimisticSources, applyOptimistic] = useOptimistic(
 		sources,
 		(
@@ -46,6 +54,15 @@ export function SourceManager({
 		onCacheCleared();
 	};
 
+	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">
@@ -70,8 +87,17 @@ export function SourceManager({
 					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">
-				{optimisticSources.map((source) => (
+				{filteredSources.map((source) => (
 					<li
 						key={source.sourceCode}
 						className="flex items-center justify-between rounded-md border border-border px-3 py-2"

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

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { getSourceDisplayName } from "../adapters/bestiary-index-adapter.js";
 import type { BulkImportState } from "../hooks/use-bulk-import.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";
@@ -55,9 +56,10 @@ function CollapsedTab({
 		<button
 			type="button"
 			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="Expand stat block panel"
 		>
 			<span className="writing-vertical-rl font-medium text-sm">
@@ -152,7 +154,11 @@ function DesktopPanel({
 
 	return (
 		<div
-			className={`fixed top-0 bottom-0 flex w-[400px] flex-col border-border bg-card transition-slide-panel ${sideClasses} ${isCollapsed ? collapsedTranslate : "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",
+			)}
 		>
 			{isCollapsed ? (
 				<CollapsedTab
@@ -194,7 +200,10 @@ function MobileDrawer({
 				aria-label="Close stat block"
 			/>
 			<div
-				className={`absolute top-0 right-0 bottom-0 w-[85%] max-w-md border-border border-l 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
 				}
@@ -352,7 +361,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

@@ -30,7 +30,7 @@ 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" />
 	);
 }
 
@@ -54,7 +54,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 		<div className="space-y-1 text-foreground">
 			{/* Header */}
 			<div>
-				<h2 className="font-bold text-amber-400 text-xl">{creature.name}</h2>
+				<h2 className="font-bold text-stat-heading text-xl">{creature.name}</h2>
 				<p className="text-muted-foreground text-sm italic">
 					{creature.size} {creature.type}, {creature.alignment}
 				</p>
@@ -194,7 +194,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 			{creature.actions && creature.actions.length > 0 && (
 				<>
 					<SectionDivider />
-					<h3 className="font-bold text-amber-400 text-base">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 }: Readonly<StatBlockProps>) {
 			{creature.bonusActions && creature.bonusActions.length > 0 && (
 				<>
 					<SectionDivider />
-					<h3 className="font-bold text-amber-400 text-base">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 }: Readonly<StatBlockProps>) {
 			{creature.reactions && creature.reactions.length > 0 && (
 				<>
 					<SectionDivider />
-					<h3 className="font-bold text-amber-400 text-base">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">
@@ -239,7 +241,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 			{!!creature.legendaryActions && (
 				<>
 					<SectionDivider />
-					<h3 className="font-bold text-amber-400 text-base">
+					<h3 className="font-bold text-base text-stat-heading">
 						Legendary Actions
 					</h3>
 					<p className="text-muted-foreground text-sm italic">

apps/web/src/components/toast.tsx

@@ -24,7 +24,7 @@ export function Toast({
 
 	return createPortal(
 		<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-foreground text-sm">{message}</span>
 				{progress !== undefined && (
 					<div className="h-2 w-24 overflow-hidden rounded-full bg-muted">

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

@@ -21,9 +21,9 @@ export function TurnNavigation({
 	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="outline"
+				variant="ghost"
 				size="icon"
 				onClick={onRetreatTurn}
 				disabled={!hasCombatants || isAtStart}
@@ -53,7 +53,7 @@ export function TurnNavigation({
 					className="text-muted-foreground"
 				/>
 				<Button
-					variant="outline"
+					variant="ghost"
 					size="icon"
 					onClick={onAdvanceTurn}
 					disabled={!hasCombatants}

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

@@ -9,8 +9,9 @@ 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-8 px-3 text-xs",

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 {
@@ -49,7 +50,7 @@ export function OverflowMenu({ items }: OverflowMenuProps) {
 				<EllipsisVertical className="h-5 w-5" />
 			</Button>
 			{!!open && (
-				<div className="absolute right-0 bottom-full 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}
@@ -58,7 +59,7 @@ export function OverflowMenu({ items }: OverflowMenuProps) {
 							disabled={item.disabled}
 							onClick={() => {
 								item.onClick();
-								setOpen(false);
+								if (!item.keepOpen) setOpen(false);
 							}}
 						>
 							{item.icon}

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

@@ -137,7 +137,9 @@ describe("useEncounter", () => {
 			type: "humanoid",
 		};
 
-		act(() => result.current.addFromBestiary(entry));
+		act(() => {
+			result.current.addFromBestiary(entry);
+		});
 
 		expect(result.current.hasCreatureCombatants).toBe(true);
 		expect(result.current.canRollAllInitiative).toBe(true);
@@ -158,7 +160,9 @@ describe("useEncounter", () => {
 			type: "humanoid",
 		};
 
-		act(() => result.current.addFromBestiary(entry));
+		act(() => {
+			result.current.addFromBestiary(entry);
+		});
 
 		const combatant = result.current.encounter.combatants[0];
 		expect(combatant.name).toBe("Goblin");
@@ -183,8 +187,12 @@ describe("useEncounter", () => {
 			type: "humanoid",
 		};
 
-		act(() => result.current.addFromBestiary(entry));
+		act(() => {
-		act(() => result.current.addFromBestiary(entry));
+			result.current.addFromBestiary(entry);
+		});
+		act(() => {
+			result.current.addFromBestiary(entry);
+		});
 
 		const names = result.current.encounter.combatants.map((c) => c.name);
 		expect(names).toContain("Goblin 1");

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

@@ -73,32 +73,39 @@ 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));
-					// biome-ignore lint/performance/noAwaitInLoops: sequential batching is intentional to avoid overwhelming the server with too many concurrent requests
-					await Promise.allSettled(
-						batch.map(async ({ code }) => {
-							const url = getDefaultFetchUrl(code, baseUrl);
-							try {
-								await fetchAndCacheSource(code, url);
-								countersRef.current.completed++;
-							} catch (err) {
-								countersRef.current.failed++;
-								console.warn(
-									`[bulk-import] FAILED ${code} (${url}):`,
-									err instanceof Error ? err.message : err,
-								);
-							}
-							setState({
-								status: "loading",
-								total,
-								completed: countersRef.current.completed,
-								failed: countersRef.current.failed,
-							});
-						}),
-					);
 				}
 
+				await batches.reduce(
+					(chain, batch) =>
+						chain.then(() =>
+							Promise.allSettled(
+								batch.map(async ({ code }) => {
+									const url = getDefaultFetchUrl(code, baseUrl);
+									try {
+										await fetchAndCacheSource(code, url);
+										countersRef.current.completed++;
+									} catch (err) {
+										countersRef.current.failed++;
+										console.warn(
+											`[bulk-import] FAILED ${code} (${url}):`,
+											err instanceof Error ? err.message : err,
+										);
+									}
+									setState({
+										status: "loading",
+										total,
+										completed: countersRef.current.completed,
+										failed: countersRef.current.failed,
+									});
+								}),
+							),
+						),
+					Promise.resolve() as Promise<unknown>,
+				);
+
 				await refreshCache();
 
 				const { completed, failed } = countersRef.current;

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

@@ -17,6 +17,7 @@ import type {
 	BestiaryIndexEntry,
 	CombatantId,
 	ConditionId,
+	CreatureId,
 	DomainEvent,
 	Encounter,
 	PlayerCharacter,
@@ -265,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(
@@ -284,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);
@@ -317,6 +318,8 @@ export function useEncounter() {
 			});
 
 			setEvents((prev) => [...prev, ...addResult]);
+
+			return cId;
 		},
 		[makeStore],
 	);

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-side-panel-state.ts

@@ -19,6 +19,7 @@ interface SidePanelState {
 
 interface SidePanelActions {
 	showCreature: (creatureId: CreatureId) => void;
+	updateCreature: (creatureId: CreatureId) => void;
 	showBulkImport: () => void;
 	showSourceManager: () => void;
 	dismissPanel: () => void;
@@ -52,6 +53,10 @@ export function useSidePanelState(): SidePanelState & SidePanelActions {
 		setIsRightPanelCollapsed(false);
 	}, []);
 
+	const updateCreature = useCallback((creatureId: CreatureId) => {
+		setPanelView({ mode: "creature", creatureId });
+	}, []);
+
 	const showBulkImport = useCallback(() => {
 		setPanelView({ mode: "bulk-import" });
 		setIsRightPanelCollapsed(false);
@@ -91,6 +96,7 @@ export function useSidePanelState(): SidePanelState & SidePanelActions {
 		pinnedCreatureId,
 		isWideDesktop,
 		showCreature,
+		updateCreature,
 		showBulkImport,
 		showSourceManager,
 		dismissPanel,

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;
@@ -19,12 +19,47 @@
 	--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;
+}

package.json

@@ -29,6 +29,8 @@
 		"knip": "knip",
 		"jscpd": "jscpd",
 		"oxlint": "oxlint --tsconfig apps/web/tsconfig.json --type-aware",
-		"check": "pnpm audit --audit-level=high && knip && biome check . && oxlint --tsconfig apps/web/tsconfig.json --type-aware && tsc --build && vitest run && jscpd"
+		"check:ignores": "node scripts/check-lint-ignores.mjs",
+		"check:classnames": "node scripts/check-cn-classnames.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 && tsc --build && vitest run && jscpd"
 	}
 }

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

@@ -161,6 +161,48 @@ describe("rollAllInitiativeUseCase", () => {
 		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" },

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

@@ -61,7 +61,7 @@ describe("rollInitiativeUseCase", () => {
 		const result = rollInitiativeUseCase(
 			store,
 			combatantId("unknown"),
-			10,
+			[10],
 			() => undefined,
 		);
 
@@ -80,7 +80,7 @@ describe("rollInitiativeUseCase", () => {
 		const result = rollInitiativeUseCase(
 			store,
 			combatantId("Fighter"),
-			10,
+			[10],
 			() => undefined,
 		);
 
@@ -96,7 +96,7 @@ describe("rollInitiativeUseCase", () => {
 		const result = rollInitiativeUseCase(
 			store,
 			combatantId("Goblin"),
-			10,
+			[10],
 			() => undefined,
 		);
 
@@ -116,7 +116,7 @@ describe("rollInitiativeUseCase", () => {
 		const result = rollInitiativeUseCase(
 			store,
 			combatantId("Goblin"),
-			10,
+			[10],
 			(id) => (id === GOBLIN_ID ? creature : undefined),
 		);
 
@@ -124,6 +124,42 @@ describe("rollInitiativeUseCase", () => {
 		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
@@ -145,7 +181,7 @@ describe("rollInitiativeUseCase", () => {
 		const result = rollInitiativeUseCase(
 			store,
 			combatantId("Monster"),
-			8,
+			[8],
 			(id) => (id === GOBLIN_ID ? creature : undefined),
 		);
 

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

@@ -5,7 +5,9 @@ import {
 	type DomainError,
 	type DomainEvent,
 	isDomainError,
+	type RollMode,
 	rollInitiative,
+	selectRoll,
 	setInitiative,
 } from "@initiative/domain";
 import type { EncounterStore } from "./ports.js";
@@ -19,6 +21,7 @@ export function rollAllInitiativeUseCase(
 	store: EncounterStore,
 	rollDice: () => number,
 	getCreature: (id: CreatureId) => Creature | undefined,
+	mode: RollMode = "normal",
 ): RollAllResult | DomainError {
 	let encounter = store.get();
 	const allEvents: DomainEvent[] = [];
@@ -39,7 +42,10 @@ export function rollAllInitiativeUseCase(
 			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;

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__/roll-initiative.test.ts

@@ -1,5 +1,5 @@
 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";
 
@@ -63,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/index.ts

@@ -84,7 +84,11 @@ export {
 	removeCombatant,
 } from "./remove-combatant.js";
 export { retreatTurn } from "./retreat-turn.js";
-export { rollInitiative } from "./roll-initiative.js";
+export {
+	type RollMode,
+	rollInitiative,
+	selectRoll,
+} from "./roll-initiative.js";
 export { type SetAcSuccess, setAc } from "./set-ac.js";
 export { type SetHpSuccess, setHp } from "./set-hp.js";
 export {

packages/domain/src/roll-initiative.ts

@@ -1,5 +1,21 @@
 import type { DomainError } from "./types.js";
 
+export type RollMode = "normal" | "advantage" | "disadvantage";
+
+/**
+ * Selects the effective roll from two dice values based on the roll mode.
+ * Advantage takes the higher, disadvantage takes the lower.
+ */
+export function selectRoll(
+	roll1: number,
+	roll2: number,
+	mode: RollMode,
+): number {
+	if (mode === "advantage") return Math.max(roll1, roll2);
+	if (mode === "disadvantage") return Math.min(roll1, roll2);
+	return roll1;
+}
+
 /**
  * Pure function that computes initiative from a resolved dice roll and modifier.
  * The dice roll must be an integer in [1, 20].

scripts/check-cn-classnames.mjs

@@ -0,0 +1,47 @@
+/**
+ * Ban template-literal classNames in TSX files.
+ *
+ * Tailwind v4's production content extractor does static analysis on source
+ * files to discover utility classes. Template literals like
+ *   className={`foo ${bar}`}
+ * can cause the extractor to miss classes adjacent to `${`, leading to
+ * styles that work in dev (JIT) but break in production.
+ *
+ * Rule: always use cn() for dynamic class composition instead.
+ */
+
+import { execSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+
+const PATTERN = /className\s*=\s*\{`/;
+
+function findFiles() {
+	return execSync("git ls-files -- '*.tsx'", { encoding: "utf-8" })
+		.trim()
+		.split("\n")
+		.filter(Boolean);
+}
+
+let errors = 0;
+
+for (const file of findFiles()) {
+	const lines = readFileSync(file, "utf-8").split("\n");
+
+	for (let i = 0; i < lines.length; i++) {
+		if (PATTERN.test(lines[i])) {
+			console.error(
+				`${file}:${i + 1}: className uses template literal — use cn() instead`,
+			);
+			errors++;
+		}
+	}
+}
+
+if (errors > 0) {
+	console.error(
+		`\n${errors} template-literal className(s) found. Use cn() for dynamic classes.`,
+	);
+	process.exit(1);
+} else {
+	console.log("No template-literal classNames found.");
+}

scripts/check-lint-ignores.mjs

@@ -0,0 +1,108 @@
+/**
+ * Backpressure check for biome-ignore comments.
+ *
+ * 1. Ratcheting cap — source and test files have separate max counts.
+ *    Lower these numbers as you fix ignores; they can never go up silently.
+ * 2. Banned rules — ignoring certain rule categories is never allowed.
+ * 3. Justification — every ignore must have a non-empty explanation after
+ *    the rule name.
+ */
+
+import { execSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+
+// ── Configuration ──────────────────────────────────────────────────────
+const MAX_SOURCE_IGNORES = 2;
+const MAX_TEST_IGNORES = 3;
+
+/** Rule prefixes that must never be suppressed. */
+const BANNED_PREFIXES = [
+	"lint/security/",
+	"lint/correctness/noGlobalObjectCalls",
+	"lint/correctness/noUnsafeFinally",
+];
+// ───────────────────────────────────────────────────────────────────────
+
+const IGNORE_PATTERN = /biome-ignore\s+([\w/]+)(?::\s*(.*))?/;
+
+function findFiles() {
+	return execSync("git ls-files -- '*.ts' '*.tsx'", { encoding: "utf-8" })
+		.trim()
+		.split("\n")
+		.filter(Boolean);
+}
+
+function isTestFile(path) {
+	return (
+		path.includes("__tests__/") ||
+		path.endsWith(".test.ts") ||
+		path.endsWith(".test.tsx")
+	);
+}
+
+let errors = 0;
+let sourceCount = 0;
+let testCount = 0;
+
+for (const file of findFiles()) {
+	const lines = readFileSync(file, "utf-8").split("\n");
+
+	for (let i = 0; i < lines.length; i++) {
+		const match = lines[i].match(IGNORE_PATTERN);
+		if (!match) continue;
+
+		const rule = match[1];
+		const justification = (match[2] ?? "").trim();
+		const loc = `${file}:${i + 1}`;
+
+		// Count by category
+		if (isTestFile(file)) {
+			testCount++;
+		} else {
+			sourceCount++;
+		}
+
+		// Banned rules
+		for (const prefix of BANNED_PREFIXES) {
+			if (rule.startsWith(prefix)) {
+				console.error(`BANNED: ${loc} — ${rule} must not be suppressed`);
+				errors++;
+			}
+		}
+
+		// Justification required
+		if (!justification) {
+			console.error(
+				`MISSING JUSTIFICATION: ${loc} — biome-ignore ${rule} needs an explanation after the colon`,
+			);
+			errors++;
+		}
+	}
+}
+
+// Ratcheting caps
+if (sourceCount > MAX_SOURCE_IGNORES) {
+	console.error(
+		`SOURCE CAP EXCEEDED: ${sourceCount} biome-ignore comments in source (max ${MAX_SOURCE_IGNORES}). Fix issues and lower the cap.`,
+	);
+	errors++;
+}
+
+if (testCount > MAX_TEST_IGNORES) {
+	console.error(
+		`TEST CAP EXCEEDED: ${testCount} biome-ignore comments in tests (max ${MAX_TEST_IGNORES}). Fix issues and lower the cap.`,
+	);
+	errors++;
+}
+
+// Summary
+console.log(
+	`biome-ignore: ${sourceCount} source (max ${MAX_SOURCE_IGNORES}), ${testCount} test (max ${MAX_TEST_IGNORES})`,
+);
+
+if (errors > 0) {
+	console.error(`\n${errors} problem(s) found.`);
+	process.exit(1);
+} else {
+	console.log("All checks passed.");
+}

specs/001-combatant-management/spec.md

@@ -116,19 +116,17 @@ A user attempts to edit a combatant that no longer exists or provides an invalid
 
 **Story C3 — Rename trigger UX (Priority: P1)**
 
-A user wants to rename a combatant. Single-clicking the name opens the stat block panel instead of entering edit mode. To rename, the user double-clicks the name or long-presses on touch devices. A `cursor-text` cursor on hover signals that the name is editable.
+A user wants to rename a combatant. Clicking the combatant's name immediately enters inline edit mode — no delay, no timer, consistent for all combatant types. A `cursor-text` cursor on hover signals that the name is editable. Stat block access is handled separately via a dedicated book icon (see `specs/004-bestiary/spec.md`, FR-062).
 
 **Acceptance Scenarios**:
 
-1. **Given** a combatant row is visible, **When** the user single-clicks the combatant name, **Then** the stat block panel opens or toggles — inline edit mode is NOT entered.
+1. **Given** a combatant row is visible, **When** the user clicks the combatant name, **Then** inline edit mode is entered immediately for that combatant's name — no delay or timer.
 
-2. **Given** a combatant row is visible, **When** the user double-clicks the combatant name, **Then** inline edit mode is entered for that combatant's name.
+2. **Given** a combatant row is visible on a pointer device, **When** the user hovers over the combatant name, **Then** the cursor changes to a text cursor (`cursor-text`) to signal editability.
 
-3. **Given** a combatant row is visible on a pointer device, **When** the user hovers over the combatant name, **Then** the cursor changes to a text cursor (`cursor-text`) to signal editability.
+3. **Given** inline edit mode has been entered, **When** the user types a new name and presses Enter or blurs the field, **Then** the name is committed. **When** the user presses Escape, **Then** the edit is cancelled and the original name is restored.
 
-4. **Given** a combatant row is visible on a touch device, **When** the user long-presses the combatant name, **Then** inline edit mode is entered for that combatant's name.
+4. **Given** a bestiary combatant row and a custom combatant row, **When** the user clicks either combatant's name, **Then** the behavior is identical — inline edit mode is entered immediately in both cases.
-
-7. **Given** inline edit mode has been entered (via any trigger), **When** the user types a new name and presses Enter or blurs the field, **Then** the name is committed. **When** the user presses Escape, **Then** the edit is cancelled and the original name is restored.
 
 ---
 
@@ -291,7 +289,7 @@ EditCombatant MUST return an `"invalid-name"` error when the new name is empty o
 EditCombatant MUST preserve the combatant's position in the list, `activeIndex`, and `roundNumber`. Setting a name to the same value it already has is treated as a valid update; a `CombatantUpdated` event is still emitted.
 
 #### FR-024 — Edit: UI
-The UI MUST provide an inline name-edit mechanism for each combatant, activated by double-clicking the name or long-pressing on touch devices. The name MUST display a `cursor-text` cursor on hover to signal editability. Single-clicking the name MUST open/toggle the stat block panel, not enter edit mode. The updated name MUST be immediately visible after submission.
+The UI MUST provide an inline name-edit mechanism for each combatant, activated by a single click on the name. Clicking the name MUST enter inline edit mode immediately — no delay, no timer, consistent for all combatant types. The name MUST display a `cursor-text` cursor on hover to signal editability. The updated name MUST be immediately visible after submission. The 250ms click timer and double-click detection logic MUST be removed entirely.
 
 #### FR-025 — ConfirmButton: Reusable component
 The system MUST provide a reusable `ConfirmButton` component that wraps any icon button to add a two-step confirmation flow.
@@ -364,9 +362,7 @@ All domain events MUST be returned as plain data values from operations, not dis
 - **ConfirmButton: component unmounts in confirm state**: The auto-revert timer MUST be cleaned up to prevent memory leaks or stale state updates.
 - **ConfirmButton: two instances in confirm state simultaneously**: Each manages its own state independently.
 - **ConfirmButton: combatant row re-renders while in confirm state**: Confirm state persists through re-renders as long as combatant identity is stable.
-- **Name single-click vs double-click**: A single click on the combatant name opens the stat block panel; only a completed double-click enters inline edit mode. The system must disambiguate between the two gestures.
+- **Name click behavior is uniform**: A single click on any combatant's name enters inline edit mode immediately. There is no gesture disambiguation (no timer, no double-click detection). Stat block access is handled via the dedicated book icon on bestiary rows (see `specs/004-bestiary/spec.md`, FR-062).
-- **Touch edit affordance**: No hover-dependent affordance is shown on touch devices. Long-press is the touch equivalent for entering edit mode.
-- **Long-press threshold**: The long-press duration should follow platform conventions (typically ~500ms). A short tap must not trigger edit mode.
 
 ---
 
@@ -401,4 +397,4 @@ All domain events MUST be returned as plain data values from operations, not dis
 - Cross-tab synchronization is not required for the MVP baseline.
 - The `ConfirmButton` 5-second timeout is a fixed value and is not configurable in the MVP baseline.
 - The `Check` icon from the Lucide icon library is used for the `ConfirmButton` confirm state.
-- The inline name-edit mechanism is activated by double-click or long-press (touch). A `cursor-text` cursor on hover signals editability. Single-clicking the name opens the stat block panel.
+- The inline name-edit mechanism is activated by a single click on the name. A `cursor-text` cursor on hover signals editability. There is no double-click or long-press gesture; stat block access uses a dedicated book icon on bestiary rows.

specs/003-combatant-state/spec.md

@@ -419,16 +419,15 @@ Acceptance scenarios:
 3. **Given** any combatant row, **When** hovered and concentration is inactive, **Then** the Brain icon becomes visible.
 4. **Given** the remove button appears on hover, **Then** no layout shift occurs — space is reserved.
 
-**Story ROW-3 — Row Click Opens Stat Block (P1)**
+**Story ROW-3 — Book Icon Opens Stat Block (P1)**
-As a DM, I want to click anywhere on a bestiary combatant row to open its stat block so I have a large click target and a cleaner row without a dedicated book icon.
+As a DM, I want a dedicated book icon on bestiary combatant rows so I can open the stat block with an explicit, discoverable control — while clicking the name always starts a rename.
 
 Acceptance scenarios:
-1. **Given** a combatant has a linked bestiary creature, **When** the user clicks the name text or empty row space, **Then** the stat block panel opens.
+1. **Given** a combatant has a linked bestiary creature, **When** the user views the row, **Then** a small BookOpen icon is visible next to the name.
-2. **Given** the user clicks an interactive element (initiative, HP, AC, condition icon, "+", "x", concentration), **Then** the stat block does NOT open — the element's own action fires.
+2. **Given** a combatant does NOT have a linked creature, **When** the user views the row, **Then** no BookOpen icon is displayed.
-3. **Given** a combatant does NOT have a linked creature, **When** the row is clicked, **Then** nothing happens.
+3. **Given** a bestiary combatant row, **When** the user clicks the BookOpen icon, **Then** the stat block panel opens for that creature.
-4. **Given** viewing any bestiary combatant row, **Then** no BookOpen icon is visible.
+4. **Given** the user clicks the combatant's name, **Then** inline rename mode is entered — the stat block does NOT open.
-5. **Given** a bestiary combatant row, **When** the user hovers over non-interactive areas, **Then** the cursor indicates clickability.
+5. **Given** the stat block is already open for a creature, **When** the user clicks its BookOpen icon again, **Then** the panel closes (toggle behavior).
-6. **Given** the stat block is already open for a creature, **When** the same row is clicked, **Then** the panel closes (toggle behavior).
 
 ### Requirements
 
@@ -436,10 +435,10 @@ Acceptance scenarios:
 - **FR-081**: The "+" condition button MUST be hidden at rest and appear on row hover (or touch/focus on touch devices).
 - **FR-082**: The remove (x) button MUST be hidden at rest and appear on row hover (or touch/focus on touch devices).
 - **FR-083**: Layout space for the remove button MUST be reserved so appearing/disappearing does not cause layout shifts.
-- **FR-084**: Clicking non-interactive areas of a bestiary combatant row MUST open the stat block panel.
+- **FR-084**: Bestiary-linked combatant rows MUST display a BookOpen icon as the dedicated stat block trigger (see also `specs/004-bestiary/spec.md`, FR-062).
-- **FR-085**: Clicking interactive elements (initiative, HP, AC, conditions, "+", "x", concentration) MUST NOT trigger the stat block — only the element's own action.
+- **FR-085**: Clicking the combatant name MUST enter inline rename mode, not open the stat block.
-- **FR-086**: The BookOpen icon MUST be removed from the combatant row.
+- **FR-086**: Non-bestiary combatant rows MUST NOT display the BookOpen icon.
-- **FR-087**: Bestiary combatant rows MUST show a pointer cursor on hover over non-interactive areas.
+- **FR-087**: The BookOpen icon MUST have a tooltip ("View stat block") and `aria-label="View stat block"` for accessibility.
 - **FR-088**: All existing interactions (condition add/remove, HP adjustment, AC editing, initiative editing/rolling, concentration toggle, combatant removal) MUST continue to work.
 - **FR-089**: Browser scrollbars MUST be styled to match the dark UI theme (thin, dark-colored scrollbar thumbs).
 - **FR-090**: Turn navigation (Previous/Next) MUST use StepBack/StepForward icons in outline button style with foreground-colored borders. Utility actions (d20/trash) MUST use ghost button style to create clear visual hierarchy.
@@ -452,8 +451,8 @@ Acceptance scenarios:
 
 - When a combatant has so many conditions that they exceed the available inline space, they wrap within the name column; row height increases but width does not.
 - The condition picker dropdown positions relative to the "+" button, flipping vertically if near the viewport edge.
-- When the stat block panel is already open and the user clicks the same row again, the panel closes.
+- When the stat block panel is already open and the user clicks the same BookOpen icon again, the panel closes.
-- Clicking the initiative area starts editing; it does not open the stat block.
+- Clicking the combatant name starts inline rename; it does not open the stat block.
 - Tablet-width screens (>= 768 px / Tailwind `md`): popovers and inline edits MUST remain accessible and not overflow or clip.
 
 ---

specs/004-bestiary/spec.md

@@ -8,7 +8,7 @@
 
 ## Overview
 
-The Bestiary feature provides creature search across a pre-indexed library of 3,312+ creatures from 102+ D&D sources, stat block display for full creature reference during combat, source data management via on-demand fetch or file upload, and a dual-panel UX with fold/unfold and pin capabilities. Creatures can be added individually or in batch from a search dropdown, with stats pre-filled from the index.
+The Bestiary feature provides creature search across a pre-indexed library of 3,312+ creatures from 102+ D&D sources, stat block display for full creature reference during combat, source data management via on-demand fetch or file upload, and a dual-panel UX with collapse/expand and pin capabilities. Creatures can be added individually or in batch from a search dropdown, with stats pre-filled from the index.
 
 The architecture uses a two-tier design: a lightweight search index (`data/bestiary/index.json`) shipped with the app containing mechanical facts for all creatures, and full stat block data loaded on-demand at the source level, normalized, and cached in IndexedDB.
 
@@ -84,7 +84,7 @@ When the search input has no bestiary matches (or fewer than 2 characters typed)
 **US-D1 — View Full Stat Block in Side Panel (P2)**
 As a DM, I want to see the full stat block of a creature displayed in a side panel so that I can reference its abilities, actions, and traits during combat without switching to another tool.
 
-When a creature is selected from search results or when clicking a bestiary-linked combatant in the tracker, a stat block panel appears showing the creature's full information in the classic D&D stat block layout. Clicking a different combatant updates the panel to that creature's data.
+When a creature is selected from search results or when clicking the book icon on a bestiary-linked combatant row, a stat block panel appears showing the creature's full information in the classic D&D stat block layout. Clicking the book icon on a different combatant updates the panel to that creature's data. The book icon is the only way to manually open a stat block from the tracker — clicking the combatant's name always enters inline rename mode (see `specs/001-combatant-management/spec.md`, FR-024).
 
 **US-D2 — Preview Stat Block from Search Dropdown (P3)**
 As a DM, I want to preview a creature's stat block directly from the search dropdown so I can review creature details before deciding to add them to the encounter.
@@ -103,18 +103,22 @@ As a DM using the app on different devices, I want the layout to adapt between s
 - **FR-020**: On wide viewports (desktop), the layout MUST be side-by-side with the encounter tracker on the left and stat block on the right.
 - **FR-021**: On narrow viewports (mobile), the stat block MUST appear as a dismissible drawer or slide-over.
 - **FR-022**: The stat block panel MUST scroll independently of the encounter tracker.
-- **FR-023**: When the user clicks a different bestiary-linked combatant in the tracker, the stat block panel MUST update to show that creature's data.
+- **FR-023**: When the user clicks the book icon on a different bestiary-linked combatant row, the stat block panel MUST update to show that creature's data.
 - **FR-024**: The existing search/view button MUST be repurposed to open the stat block for the currently focused/selected creature in the dropdown.
+- **FR-062**: Bestiary-linked combatant rows MUST display a small book icon (Lucide `BookOpen`) as the dedicated stat block trigger. The icon MUST have a tooltip ("View stat block") and an `aria-label="View stat block"` for accessibility. The book icon is the only way to manually open a stat block from the tracker — clicking the combatant name always enters inline rename mode. Non-bestiary combatant rows MUST NOT display the book icon.
 
 ### Acceptance Scenarios
 
 1. **Given** a creature is selected from the bestiary search, **When** the stat block panel opens, **Then** it displays: name, size, type, alignment, AC, HP (average and formula), speed, ability scores with modifiers, saving throws, skills, damage resistances/immunities, condition immunities, senses, languages, challenge rating, traits, actions, and legendary actions (if applicable).
 2. **Given** the stat block panel is open on desktop (wide viewport), **Then** the layout is side-by-side: encounter tracker on the left, stat block panel on the right.
 3. **Given** the stat block panel is open on mobile (narrow viewport), **Then** the stat block appears as a slide-over drawer that can be dismissed.
-4. **Given** a stat block is displayed, **When** the user clicks a different bestiary-linked combatant in the tracker, **Then** the stat block panel updates to show that creature's data.
+4. **Given** a stat block is displayed, **When** the user clicks the book icon on a different bestiary-linked combatant row, **Then** the stat block panel updates to show that creature's data.
 5. **Given** a creature entry contains markup tags (e.g., spell references, dice notation), **Then** they render as plain text.
 6. **Given** the dropdown is showing bestiary results, **When** the user clicks the stat block view button, **Then** the stat block panel opens for the currently focused/highlighted creature in the dropdown.
 7. **Given** no creature is focused in the dropdown, **When** the user clicks the stat block view button, **Then** nothing happens (button is disabled or no-op).
+8. **Given** a bestiary-linked combatant row is visible, **When** the user looks at the row, **Then** a small book icon is visible as the stat block trigger with a tooltip "View stat block".
+9. **Given** a custom (non-bestiary) combatant row is visible, **When** the user looks at the row, **Then** no book icon is displayed.
+10. **Given** a bestiary-linked combatant row is visible, **When** the user clicks the combatant's name, **Then** inline rename mode is entered — the stat block does NOT open.
 
 ### Edge Cases
 
@@ -144,7 +148,7 @@ While the bulk import is in progress, the user sees a text counter ("Loading sou
 If the user closes the side panel while a bulk import is still in progress, a persistent toast notification appears at the bottom-center of the screen showing the same progress text and progress bar.
 
 **US-M6 — Manage Cached Sources (P4)**
-A DM wants to see which sources are cached, clear a specific source's cache, or clear all cached data. A management UI provides this visibility and control.
+A DM wants to see which sources are cached, find a specific source, clear a specific source's cache, or clear all cached data. A management UI provides this visibility and control, including a filter input to quickly locate sources by name when many are cached.
 
 ### Requirements
 
@@ -170,7 +174,7 @@ A DM wants to see which sources are cached, clear a specific source's cache, or
 - **FR-044**: The bulk import MUST run asynchronously and not block the rest of the app.
 - **FR-045**: The user MUST explicitly provide/confirm the URL before any fetches occur — the app never auto-fetches content.
 - **FR-046**: The "Load All" button MUST be disabled when the URL field is empty or while a bulk import is already in progress.
-- **FR-047**: The app MUST provide a management UI showing cached sources with options to clear individual sources or all cached data.
+- **FR-047**: The app MUST provide a management UI showing cached sources with a filter input for searching by display name and options to clear individual sources or all cached data.
 - **FR-048**: The normalization adapter and tag-stripping utility MUST remain the canonical pipeline for all fetched and uploaded data.
 - **FR-049**: The distributed app bundle MUST contain zero copyrighted prose content — only mechanical facts and creature names in the search index.
 
@@ -194,6 +198,7 @@ A DM wants to see which sources are cached, clear a specific source's cache, or
 16. **Given** two sources have been cached, **When** the DM opens the source management UI, **Then** both sources are listed with their display names.
 17. **Given** the source management UI is open, **When** the DM clears a single source, **Then** that source's data is removed; stat blocks for its creatures require re-fetching, while other cached sources remain.
 18. **Given** the source management UI is open, **When** the DM clears all cached data, **Then** all source data is removed and all stat blocks require re-fetching.
+19. **Given** many sources are cached, **When** the DM types a partial name in the filter input, **Then** only sources whose display name matches (case-insensitive) are shown.
 
 ### Edge Cases
 
@@ -210,58 +215,58 @@ A DM wants to see which sources are cached, clear a specific source's cache, or
 
 ---
 
-## Panel UX (Fold, Pin, Second Panel)
+## Panel UX (Collapse, Pin, Second Panel)
 
 ### User Stories
 
-**US-P1 — Fold and Unfold Stat Block Panel (P1)**
+**US-P1 — Collapse and Expand Stat Block Panel (P1)**
 As a DM running an encounter, I want to collapse the stat block panel to a slim tab so I can temporarily reclaim screen space without losing my place, then quickly expand it again to reference creature stats.
 
-The close button is replaced with a fold/unfold toggle. Folding slides the panel out to the right edge, leaving a slim vertical tab displaying the creature's name. Clicking the tab unfolds the panel, showing the same creature that was displayed before folding. No "Stat Block" heading text is shown in the panel header.
+The close button is replaced with a collapse/expand toggle. Collapsing slides the panel out to the right edge, leaving a slim vertical tab displaying the creature's name. Clicking the tab expands the panel, showing the same creature that was displayed before collapsing. No "Stat Block" heading text is shown in the panel header.
 
 **US-P2 — Pin Creature to Second Panel (P2)**
 As a DM comparing creatures or referencing one creature while browsing others, I want to pin the current creature to a secondary panel on the left side of the screen so I can keep it visible while browsing different creatures in the right panel.
 
 Clicking the pin button copies the current creature to a new left panel. The right panel remains active for browsing different creatures independently. The left panel has an unpin button that removes it.
 
-**US-P3 — Fold Behavior with Pinned Panel (P3)**
+**US-P3 — Collapse Behavior with Pinned Panel (P3)**
-As a DM with a creature pinned, I want to fold the right (browse) panel independently so I can focus on just the pinned creature, or fold both panels to see the full encounter list.
+As a DM with a creature pinned, I want to collapse the right (browse) panel independently so I can focus on just the pinned creature, or collapse both panels to see the full encounter list.
 
 ### Requirements
 
-- **FR-050**: The system MUST replace the close button on the stat block panel with a fold/unfold toggle control.
+- **FR-050**: The system MUST replace the close button on the stat block panel with a collapse/expand toggle control.
 - **FR-051**: The system MUST remove the "Stat Block" heading text from the panel header.
-- **FR-052**: When folded, the panel MUST collapse to a slim vertical tab anchored to the right edge of the screen displaying the creature's name.
+- **FR-052**: When collapsed, the panel MUST reduce to a slim vertical tab anchored to the right edge of the screen displaying the creature's name.
-- **FR-053**: Folding and unfolding MUST use a smooth CSS slide animation (~200ms ease-out).
+- **FR-053**: Collapsing and expanding MUST use a smooth CSS slide animation (~200ms ease-out).
-- **FR-054**: The fold/unfold toggle MUST preserve the currently displayed creature — unfolding shows the same creature that was visible when folded.
+- **FR-054**: The collapse/expand toggle MUST preserve the currently displayed creature — expanding shows the same creature that was visible when collapsed.
 - **FR-055**: The panel MUST include a pin button that copies the current creature to a new panel on the left side of the screen.
 - **FR-056**: After pinning, the right panel MUST remain active for browsing different creatures independently.
 - **FR-057**: The pinned (left) panel MUST include an unpin button that removes it when clicked.
 - **FR-058**: The pin button MUST be hidden on viewports where dual panels would not fit (small screens / mobile).
 - **FR-059**: The pin button MUST be hidden when the panel is showing a source fetch prompt (no creature data displayed yet).
-- **FR-060**: On mobile viewports, the existing drawer/backdrop behavior MUST be preserved — fold/unfold replaces only the close button behavior for the desktop layout; the backdrop click still dismisses the panel.
+- **FR-060**: On mobile viewports, the existing drawer/backdrop behavior MUST be preserved — collapse/expand replaces only the close button behavior for the desktop layout; the backdrop click still dismisses the panel.
-- **FR-061**: Both the browse (right) and pinned (left) panels MUST have independent fold states.
+- **FR-061**: Both the browse (right) and pinned (left) panels MUST have independent collapsed states.
 
 ### Acceptance Scenarios
 
-1. **Given** the stat block panel is open showing a creature, **When** the user clicks the fold button, **Then** the panel slides out to the right edge and a slim vertical tab appears showing the creature's name.
+1. **Given** the stat block panel is open showing a creature, **When** the user clicks the collapse button, **Then** the panel slides out to the right edge and a slim vertical tab appears showing the creature's name.
-2. **Given** the stat block panel is folded to a tab, **When** the user clicks the tab, **Then** the panel slides back in showing the same creature that was displayed before folding.
+2. **Given** the stat block panel is collapsed to a tab, **When** the user clicks the tab, **Then** the panel slides back in showing the same creature that was displayed before collapsing.
-3. **Given** the stat block panel is open, **When** the user looks for a close button, **Then** no close button is present — only a fold toggle.
+3. **Given** the stat block panel is open, **When** the user looks for a close button, **Then** no close button is present — only a collapse toggle.
 4. **Given** the stat block panel is open, **When** the user looks at the panel header, **Then** no "Stat Block" heading text is visible.
-5. **Given** the panel is folding or unfolding, **When** the animation plays, **Then** it completes with a smooth slide transition (~200ms ease-out).
+5. **Given** the panel is collapsing or expanding, **When** the animation plays, **Then** it completes with a smooth slide transition (~200ms ease-out).
 6. **Given** the stat block panel is showing a creature on a wide screen, **When** the user clicks the pin button, **Then** the current creature appears in a new panel on the left side of the screen.
-7. **Given** a creature is pinned to the left panel, **When** the user clicks a different combatant in the encounter list, **Then** the right panel updates to show the new creature while the left panel continues showing the pinned creature.
+7. **Given** a creature is pinned to the left panel, **When** the user clicks the book icon on a different bestiary combatant, **Then** the right panel updates to show the new creature while the left panel continues showing the pinned creature.
 8. **Given** a creature is pinned to the left panel, **When** the user clicks the unpin button on the left panel, **Then** the left panel is removed and only the right panel remains.
 9. **Given** the user is on a small screen or mobile viewport, **When** the stat block panel is displayed, **Then** the pin button is not visible.
-10. **Given** both pinned (left) and browse (right) panels are open, **When** the user folds the right panel, **Then** the left pinned panel remains visible and the right panel collapses to a tab.
+10. **Given** both pinned (left) and browse (right) panels are open, **When** the user collapses the right panel, **Then** the left pinned panel remains visible and the right panel reduces to a tab.
-11. **Given** the right panel is folded and the left panel is pinned, **When** the user unfolds the right panel, **Then** it slides back showing the last browsed creature.
+11. **Given** the right panel is collapsed and the left panel is pinned, **When** the user expands the right panel, **Then** it slides back showing the last browsed creature.
 
 ### Edge Cases
 
 - User pins a creature and then that creature is removed from the encounter: the pinned panel continues displaying the creature's stat block (data is already loaded).
-- User folds the panel and then the active combatant changes (auto-show logic on desktop): the panel stays folded but updates the selected creature internally; unfolding shows the current active combatant's stat block. The fold state is respected — advancing turns does not override a user-chosen fold.
+- Active combatant changes while panel is open: if the new active combatant has a creature, the panel auto-updates to show that creature's stat block. If the new active combatant has no creature, the panel remains on the previous creature. If the panel is collapsed, it stays collapsed. If the panel is closed, it stays closed.
 - Viewport resized from wide to narrow while a creature is pinned: the pinned (left) panel is hidden and the pin button disappears; resizing back to wide restores the pinned panel.
-- User is in bulk import mode and tries to fold: the fold/unfold behavior applies to the bulk import panel identically.
+- User is in bulk import mode and tries to collapse: the collapse/expand behavior applies to the bulk import panel identically.
 - Panel showing a source fetch prompt: the pin button is hidden.
 
 ---
@@ -276,7 +281,7 @@ As a DM with a creature pinned, I want to fold the right (browse) panel independ
 - **Queued Creature**: Transient UI-only state representing a bestiary creature selected for batch-add, containing the creature reference and a count (1+). Not persisted.
 - **Bulk Import Operation**: Tracks total sources, completed count, failed count, and current status (idle / loading / complete / partial-failure).
 - **Toast Notification**: Lightweight custom UI element at bottom-center of screen with text, optional progress bar, and optional dismiss button.
-- **Panel State**: Represents whether a stat block panel is expanded, folded, or absent. The browse (right) and pinned (left) panels each have independent state.
+- **Panel State**: Represents whether a stat block panel is expanded, collapsed, or absent. The browse (right) and pinned (left) panels each have independent state.
 
 ---
 
@@ -295,7 +300,7 @@ As a DM with a creature pinned, I want to fold the right (browse) panel independ
 - **SC-011**: Users can load all bestiary sources with a single confirmation action; real-time progress is visible during the operation.
 - **SC-012**: Already-cached sources are skipped during bulk import, reducing redundant data transfer on repeat imports.
 - **SC-013**: The rest of the app remains fully interactive during the bulk import operation.
-- **SC-014**: Users can fold the stat block panel in a single click and unfold it in a single click, with the transition completing in under 300ms.
+- **SC-014**: Users can collapse the stat block panel in a single click and expand it in a single click, with the transition completing in under 300ms.
 - **SC-015**: Users can pin a creature and browse a different creature's stat block simultaneously, without any additional navigation steps.
 - **SC-016**: The pinned panel is never visible on screens narrower than the dual-panel breakpoint, ensuring mobile usability is not degraded.
-- **SC-017**: All fold/unfold and pin/unpin interactions are discoverable through visible button controls without requiring documentation or tooltips.
+- **SC-017**: All collapse/expand and pin/unpin interactions are discoverable through visible button controls without requiring documentation or tooltips.