Add PF2e persistent damage condition tags

Persistent damage displayed as compact tags with damage type icon and
formula (e.g., Flame + "2d6"). Supports fire, bleed, acid, cold,
electricity, poison, and mental types. One instance per type, added via
sub-picker in the condition picker. PF2e only, persists across reload.

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

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

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

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

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

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

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

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

@@ -3,6 +3,7 @@ import {
 	type ConditionEntry,
 	type CreatureId,
 	deriveHpStatus,
+	type PersistentDamageEntry,
 	type PlayerIcon,
 	type RollMode,
 } from "@initiative/domain";
@@ -19,6 +20,7 @@ import { ConditionPicker } from "./condition-picker.js";
 import { ConditionTags } from "./condition-tags.js";
 import { D20Icon } from "./d20-icon.js";
 import { HpAdjustPopover } from "./hp-adjust-popover.js";
+import { PersistentDamageTags } from "./persistent-damage-tags.js";
 import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map.js";
 import { RollModeMenu } from "./roll-mode-menu.js";
 import { ConfirmButton } from "./ui/confirm-button.js";
@@ -33,6 +35,7 @@ interface Combatant {
 	readonly tempHp?: number;
 	readonly ac?: number;
 	readonly conditions?: readonly ConditionEntry[];
+	readonly persistentDamage?: readonly PersistentDamageEntry[];
 	readonly isConcentrating?: boolean;
 	readonly color?: string;
 	readonly icon?: string;
@@ -454,6 +457,8 @@ export function CombatantRow({
 		setConditionValue,
 		decrementCondition,
 		toggleConcentration,
+		addPersistentDamage,
+		removePersistentDamage,
 	} = useEncounterContext();
 	const {
 		selectedCreatureId,
@@ -615,14 +620,24 @@ export function CombatantRow({
 							onOpenPicker={() => setPickerOpen((prev) => !prev)}
 						/>
 					</div>
+					{isPf2e && (
+						<PersistentDamageTags
+							entries={combatant.persistentDamage}
+							onRemove={(damageType) => removePersistentDamage(id, damageType)}
+						/>
+					)}
 					{!!pickerOpen && (
 						<ConditionPicker
 							anchorRef={conditionAnchorRef}
 							activeConditions={combatant.conditions}
+							activePersistentDamage={combatant.persistentDamage}
 							onToggle={(conditionId) => toggleCondition(id, conditionId)}
 							onSetValue={(conditionId, value) =>
 								setConditionValue(id, conditionId, value)
 							}
+							onAddPersistentDamage={(damageType, formula) =>
+								addPersistentDamage(id, damageType, formula)
+							}
 							onClose={() => setPickerOpen(false)}
 						/>
 					)}

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

@@ -3,9 +3,11 @@ import {
 	type ConditionId,
 	getConditionDescription,
 	getConditionsForEdition,
+	type PersistentDamageEntry,
+	type PersistentDamageType,
 } from "@initiative/domain";
-import { Check, Minus, Plus } from "lucide-react";
-import { useLayoutEffect, useRef, useState } from "react";
+import { Check, Flame, Minus, Plus } from "lucide-react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 import { useClickOutside } from "../hooks/use-click-outside.js";
@@ -14,21 +16,29 @@ import {
 	CONDITION_COLOR_CLASSES,
 	CONDITION_ICON_MAP,
 } from "./condition-styles.js";
+import { PersistentDamagePicker } from "./persistent-damage-picker.js";
 import { Tooltip } from "./ui/tooltip.js";
 
 interface ConditionPickerProps {
 	anchorRef: React.RefObject<HTMLElement | null>;
 	activeConditions: readonly ConditionEntry[] | undefined;
+	activePersistentDamage?: readonly PersistentDamageEntry[];
 	onToggle: (conditionId: ConditionId) => void;
 	onSetValue: (conditionId: ConditionId, value: number) => void;
+	onAddPersistentDamage?: (
+		damageType: PersistentDamageType,
+		formula: string,
+	) => void;
 	onClose: () => void;
 }
 
 export function ConditionPicker({
 	anchorRef,
 	activeConditions,
+	activePersistentDamage,
 	onToggle,
 	onSetValue,
+	onAddPersistentDamage,
 	onClose,
 }: Readonly<ConditionPickerProps>) {
 	const ref = useRef<HTMLDivElement>(null);
@@ -42,6 +52,7 @@ export function ConditionPicker({
 		id: ConditionId;
 		value: number;
 	} | null>(null);
+	const [showPersistentDamage, setShowPersistentDamage] = useState(false);
 
 	useLayoutEffect(() => {
 		const anchor = anchorRef.current;
@@ -71,6 +82,51 @@ export function ConditionPicker({
 	const activeMap = new Map(
 		(activeConditions ?? []).map((e) => [e.id, e.value]),
 	);
+	const showPersistentDamageEntry =
+		edition === "pf2e" && !!onAddPersistentDamage;
+	const persistentDamageInsertIndex = showPersistentDamageEntry
+		? conditions.findIndex(
+				(d) => d.label.localeCompare("Persistent Damage") > 0,
+			)
+		: -1;
+
+	const persistentDamageEntry = showPersistentDamageEntry ? (
+		<React.Fragment key="persistent-damage">
+			<div
+				className={cn(
+					"flex w-full items-center gap-2 rounded px-2 py-1 text-sm transition-colors",
+					showPersistentDamage && "bg-card/50",
+				)}
+			>
+				<button
+					type="button"
+					className="flex flex-1 items-center gap-2"
+					onClick={() => setShowPersistentDamage((prev) => !prev)}
+				>
+					<Flame
+						size={14}
+						className={
+							showPersistentDamage ? "text-orange-400" : "text-muted-foreground"
+						}
+					/>
+					<span
+						className={
+							showPersistentDamage ? "text-foreground" : "text-muted-foreground"
+						}
+					>
+						Persistent Damage
+					</span>
+				</button>
+			</div>
+			{!!showPersistentDamage && (
+				<PersistentDamagePicker
+					activeEntries={activePersistentDamage}
+					onAdd={onAddPersistentDamage}
+					onClose={() => setShowPersistentDamage(false)}
+				/>
+			)}
+		</React.Fragment>
+	) : null;
 
 	return createPortal(
 		<div
@@ -82,7 +138,7 @@ export function ConditionPicker({
 					: { visibility: "hidden" as const }
 			}
 		>
-			{conditions.map((def) => {
+			{conditions.map((def, index) => {
 				const Icon = CONDITION_ICON_MAP[def.iconName];
 				if (!Icon) return null;
 				const isActive = activeMap.has(def.id);
@@ -104,8 +160,9 @@ export function ConditionPicker({
 				};
 
 				return (
+					<React.Fragment key={def.id}>
+						{index === persistentDamageInsertIndex && persistentDamageEntry}
 						<Tooltip
-						key={def.id}
 							content={getConditionDescription(def, edition)}
 							className="block"
 						>
@@ -123,7 +180,9 @@ export function ConditionPicker({
 									<Icon
 										size={14}
 										className={
-										isActive || isEditing ? colorClass : "text-muted-foreground"
+											isActive || isEditing
+												? colorClass
+												: "text-muted-foreground"
 										}
 									/>
 									<span
@@ -207,8 +266,10 @@ export function ConditionPicker({
 								)}
 							</div>
 						</Tooltip>
+					</React.Fragment>
 				);
 			})}
+			{persistentDamageInsertIndex === -1 && persistentDamageEntry}
 		</div>,
 		document.body,
 	);

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

@@ -13,6 +13,8 @@ import {
 	EarOff,
 	Eye,
 	EyeOff,
+	Flame,
+	FlaskConical,
 	Footprints,
 	Gem,
 	Ghost,
@@ -28,6 +30,7 @@ import {
 	Siren,
 	Skull,
 	Snail,
+	Snowflake,
 	Sparkles,
 	Sun,
 	TrendingDown,
@@ -49,6 +52,8 @@ export const CONDITION_ICON_MAP: Record<string, LucideIcon> = {
 	EarOff,
 	Eye,
 	EyeOff,
+	Flame,
+	FlaskConical,
 	Footprints,
 	Gem,
 	Ghost,
@@ -64,6 +69,7 @@ export const CONDITION_ICON_MAP: Record<string, LucideIcon> = {
 	Siren,
 	Skull,
 	Snail,
+	Snowflake,
 	Sparkles,
 	Sun,
 	TrendingDown,
@@ -81,6 +87,7 @@ export const CONDITION_COLOR_CLASSES: Record<string, string> = {
 	yellow: "text-yellow-400",
 	slate: "text-slate-400",
 	green: "text-green-400",
+	lime: "text-lime-400",
 	indigo: "text-indigo-400",
 	sky: "text-sky-400",
 	red: "text-red-400",

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

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

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

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

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

@@ -1,6 +1,7 @@
 import type { EncounterStore, UndoRedoStore } from "@initiative/application";
 import {
 	addCombatantUseCase,
+	addPersistentDamageUseCase,
 	adjustHpUseCase,
 	advanceTurnUseCase,
 	clearEncounterUseCase,
@@ -8,6 +9,7 @@ import {
 	editCombatantUseCase,
 	redoUseCase,
 	removeCombatantUseCase,
+	removePersistentDamageUseCase,
 	retreatTurnUseCase,
 	setAcUseCase,
 	setConditionValueUseCase,
@@ -28,6 +30,7 @@ import type {
 	DomainError,
 	DomainEvent,
 	Encounter,
+	PersistentDamageType,
 	Pf2eCreature,
 	PlayerCharacter,
 	UndoRedoState,
@@ -78,6 +81,17 @@ type EncounterAction =
 			conditionId: ConditionId;
 	  }
 	| { type: "toggle-concentration"; id: CombatantId }
+	| {
+			type: "add-persistent-damage";
+			id: CombatantId;
+			damageType: PersistentDamageType;
+			formula: string;
+	  }
+	| {
+			type: "remove-persistent-damage";
+			id: CombatantId;
+			damageType: PersistentDamageType;
+	  }
 	| { type: "clear-encounter" }
 	| { type: "undo" }
 	| { type: "redo" }
@@ -427,6 +441,8 @@ function dispatchEncounterAction(
 		| { type: "set-condition-value" }
 		| { type: "decrement-condition" }
 		| { type: "toggle-concentration" }
+		| { type: "add-persistent-damage" }
+		| { type: "remove-persistent-damage" }
 	>,
 ): EncounterState {
 	const { store, getEncounter } = makeStoreFromState(state);
@@ -488,6 +504,21 @@ function dispatchEncounterAction(
 		case "toggle-concentration":
 			result = toggleConcentrationUseCase(store, action.id);
 			break;
+		case "add-persistent-damage":
+			result = addPersistentDamageUseCase(
+				store,
+				action.id,
+				action.damageType,
+				action.formula,
+			);
+			break;
+		case "remove-persistent-damage":
+			result = removePersistentDamageUseCase(
+				store,
+				action.id,
+				action.damageType,
+			);
+			break;
 	}
 
 	if (isDomainError(result)) return state;
@@ -651,6 +682,16 @@ export function useEncounter() {
 			(id: CombatantId) => dispatch({ type: "toggle-concentration", id }),
 			[],
 		),
+		addPersistentDamage: useCallback(
+			(id: CombatantId, damageType: PersistentDamageType, formula: string) =>
+				dispatch({ type: "add-persistent-damage", id, damageType, formula }),
+			[],
+		),
+		removePersistentDamage: useCallback(
+			(id: CombatantId, damageType: PersistentDamageType) =>
+				dispatch({ type: "remove-persistent-damage", id, damageType }),
+			[],
+		),
 		setCreatureAdjustment: useCallback(
 			(
 				id: CombatantId,

packages/application/src/add-persistent-damage-use-case.ts

@@ -0,0 +1,20 @@
+import {
+	addPersistentDamage,
+	type CombatantId,
+	type DomainError,
+	type DomainEvent,
+	type PersistentDamageType,
+} from "@initiative/domain";
+import type { EncounterStore } from "./ports.js";
+import { runEncounterAction } from "./run-encounter-action.js";
+
+export function addPersistentDamageUseCase(
+	store: EncounterStore,
+	combatantId: CombatantId,
+	damageType: PersistentDamageType,
+	formula: string,
+): DomainEvent[] | DomainError {
+	return runEncounterAction(store, (encounter) =>
+		addPersistentDamage(encounter, combatantId, damageType, formula),
+	);
+}

packages/application/src/index.ts

@@ -1,4 +1,5 @@
 export { addCombatantUseCase } from "./add-combatant-use-case.js";
+export { addPersistentDamageUseCase } from "./add-persistent-damage-use-case.js";
 export { adjustHpUseCase } from "./adjust-hp-use-case.js";
 export { advanceTurnUseCase } from "./advance-turn-use-case.js";
 export { clearEncounterUseCase } from "./clear-encounter-use-case.js";
@@ -15,6 +16,7 @@ export type {
 } from "./ports.js";
 export { redoUseCase } from "./redo-use-case.js";
 export { removeCombatantUseCase } from "./remove-combatant-use-case.js";
+export { removePersistentDamageUseCase } from "./remove-persistent-damage-use-case.js";
 export { retreatTurnUseCase } from "./retreat-turn-use-case.js";
 export {
 	type RollAllResult,

packages/application/src/remove-persistent-damage-use-case.ts

@@ -0,0 +1,19 @@
+import {
+	type CombatantId,
+	type DomainError,
+	type DomainEvent,
+	type PersistentDamageType,
+	removePersistentDamage,
+} from "@initiative/domain";
+import type { EncounterStore } from "./ports.js";
+import { runEncounterAction } from "./run-encounter-action.js";
+
+export function removePersistentDamageUseCase(
+	store: EncounterStore,
+	combatantId: CombatantId,
+	damageType: PersistentDamageType,
+): DomainEvent[] | DomainError {
+	return runEncounterAction(store, (encounter) =>
+		removePersistentDamage(encounter, combatantId, damageType),
+	);
+}

packages/domain/src/__tests__/persistent-damage.test.ts

@@ -0,0 +1,237 @@
+import { describe, expect, it } from "vitest";
+import {
+	addPersistentDamage,
+	type PersistentDamageType,
+	removePersistentDamage,
+} from "../persistent-damage.js";
+import type { Encounter } from "../types.js";
+import { combatantId } from "../types.js";
+
+const goblinId = combatantId("goblin-1");
+
+function buildEncounter(overrides: Partial<Encounter> = {}): Encounter {
+	return {
+		combatants: [
+			{
+				id: goblinId,
+				name: "Goblin",
+				...overrides.combatants?.[0],
+			},
+		],
+		activeIndex: overrides.activeIndex ?? 0,
+		roundNumber: overrides.roundNumber ?? 1,
+	};
+}
+
+describe("addPersistentDamage", () => {
+	it("adds persistent fire damage to combatant", () => {
+		const encounter = buildEncounter();
+		const result = addPersistentDamage(encounter, goblinId, "fire", "2d6");
+
+		expect(result).not.toHaveProperty("kind");
+		if ("kind" in result) return;
+
+		const target = result.encounter.combatants[0];
+		expect(target.persistentDamage).toEqual([{ type: "fire", formula: "2d6" }]);
+		expect(result.events).toEqual([
+			{
+				type: "PersistentDamageAdded",
+				combatantId: goblinId,
+				damageType: "fire",
+				formula: "2d6",
+			},
+		]);
+	});
+
+	it("replaces existing entry of same type with new formula", () => {
+		const encounter = buildEncounter({
+			combatants: [
+				{
+					id: goblinId,
+					name: "Goblin",
+					persistentDamage: [{ type: "fire", formula: "2d6" }],
+				},
+			],
+		});
+		const result = addPersistentDamage(encounter, goblinId, "fire", "3d6");
+
+		expect(result).not.toHaveProperty("kind");
+		if ("kind" in result) return;
+
+		expect(result.encounter.combatants[0].persistentDamage).toEqual([
+			{ type: "fire", formula: "3d6" },
+		]);
+	});
+
+	it("allows multiple different damage types", () => {
+		const encounter = buildEncounter({
+			combatants: [
+				{
+					id: goblinId,
+					name: "Goblin",
+					persistentDamage: [{ type: "fire", formula: "2d6" }],
+				},
+			],
+		});
+		const result = addPersistentDamage(encounter, goblinId, "bleed", "1d4");
+
+		expect(result).not.toHaveProperty("kind");
+		if ("kind" in result) return;
+
+		expect(result.encounter.combatants[0].persistentDamage).toEqual([
+			{ type: "fire", formula: "2d6" },
+			{ type: "bleed", formula: "1d4" },
+		]);
+	});
+
+	it("sorts entries by definition order", () => {
+		const encounter = buildEncounter({
+			combatants: [
+				{
+					id: goblinId,
+					name: "Goblin",
+					persistentDamage: [{ type: "cold", formula: "1d6" }],
+				},
+			],
+		});
+		const result = addPersistentDamage(encounter, goblinId, "fire", "2d6");
+
+		expect(result).not.toHaveProperty("kind");
+		if ("kind" in result) return;
+
+		const types = result.encounter.combatants[0].persistentDamage?.map(
+			(e) => e.type,
+		);
+		expect(types).toEqual(["fire", "cold"]);
+	});
+
+	it("returns domain error for empty formula", () => {
+		const encounter = buildEncounter();
+		const result = addPersistentDamage(encounter, goblinId, "fire", "  ");
+
+		expect(result).toHaveProperty("kind", "domain-error");
+		if (!("kind" in result)) return;
+		expect(result.code).toBe("empty-formula");
+	});
+
+	it("returns domain error for unknown damage type", () => {
+		const encounter = buildEncounter();
+		const result = addPersistentDamage(
+			encounter,
+			goblinId,
+			"radiant" as PersistentDamageType,
+			"2d6",
+		);
+
+		expect(result).toHaveProperty("kind", "domain-error");
+		if (!("kind" in result)) return;
+		expect(result.code).toBe("unknown-damage-type");
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const encounter = buildEncounter();
+		const result = addPersistentDamage(
+			encounter,
+			combatantId("nonexistent"),
+			"fire",
+			"2d6",
+		);
+
+		expect(result).toHaveProperty("kind", "domain-error");
+		if (!("kind" in result)) return;
+		expect(result.code).toBe("combatant-not-found");
+	});
+
+	it("trims formula whitespace", () => {
+		const encounter = buildEncounter();
+		const result = addPersistentDamage(encounter, goblinId, "fire", "  2d6  ");
+
+		expect(result).not.toHaveProperty("kind");
+		if ("kind" in result) return;
+
+		expect(result.encounter.combatants[0].persistentDamage?.[0].formula).toBe(
+			"2d6",
+		);
+	});
+
+	it("does not mutate input encounter", () => {
+		const encounter = buildEncounter();
+		const originalCombatants = encounter.combatants;
+		addPersistentDamage(encounter, goblinId, "fire", "2d6");
+
+		expect(encounter.combatants).toBe(originalCombatants);
+		expect(encounter.combatants[0].persistentDamage).toBeUndefined();
+	});
+});
+
+describe("removePersistentDamage", () => {
+	it("removes existing persistent damage entry", () => {
+		const encounter = buildEncounter({
+			combatants: [
+				{
+					id: goblinId,
+					name: "Goblin",
+					persistentDamage: [
+						{ type: "fire", formula: "2d6" },
+						{ type: "bleed", formula: "1d4" },
+					],
+				},
+			],
+		});
+		const result = removePersistentDamage(encounter, goblinId, "fire");
+
+		expect(result).not.toHaveProperty("kind");
+		if ("kind" in result) return;
+
+		expect(result.encounter.combatants[0].persistentDamage).toEqual([
+			{ type: "bleed", formula: "1d4" },
+		]);
+		expect(result.events).toEqual([
+			{
+				type: "PersistentDamageRemoved",
+				combatantId: goblinId,
+				damageType: "fire",
+			},
+		]);
+	});
+
+	it("sets persistentDamage to undefined when last entry removed", () => {
+		const encounter = buildEncounter({
+			combatants: [
+				{
+					id: goblinId,
+					name: "Goblin",
+					persistentDamage: [{ type: "fire", formula: "2d6" }],
+				},
+			],
+		});
+		const result = removePersistentDamage(encounter, goblinId, "fire");
+
+		expect(result).not.toHaveProperty("kind");
+		if ("kind" in result) return;
+
+		expect(result.encounter.combatants[0].persistentDamage).toBeUndefined();
+	});
+
+	it("returns domain error when damage type not active", () => {
+		const encounter = buildEncounter();
+		const result = removePersistentDamage(encounter, goblinId, "fire");
+
+		expect(result).toHaveProperty("kind", "domain-error");
+		if (!("kind" in result)) return;
+		expect(result.code).toBe("persistent-damage-not-active");
+	});
+
+	it("returns domain error for unknown combatant", () => {
+		const encounter = buildEncounter();
+		const result = removePersistentDamage(
+			encounter,
+			combatantId("nonexistent"),
+			"fire",
+		);
+
+		expect(result).toHaveProperty("kind", "domain-error");
+		if (!("kind" in result)) return;
+		expect(result.code).toBe("combatant-not-found");
+	});
+});

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

@@ -301,6 +301,52 @@ describe("rehydrateCombatant", () => {
 			expect(result?.side).toBeUndefined();
 		});
 
+		it("preserves valid persistent damage entries", () => {
+			const result = rehydrateCombatant({
+				...minimalCombatant(),
+				persistentDamage: [
+					{ type: "fire", formula: "2d6" },
+					{ type: "bleed", formula: "1d4" },
+				],
+			});
+			expect(result?.persistentDamage).toEqual([
+				{ type: "fire", formula: "2d6" },
+				{ type: "bleed", formula: "1d4" },
+			]);
+		});
+
+		it("filters out invalid persistent damage entries", () => {
+			const result = rehydrateCombatant({
+				...minimalCombatant(),
+				persistentDamage: [
+					{ type: "fire", formula: "2d6" },
+					{ type: "radiant", formula: "1d4" },
+					{ type: "bleed", formula: "" },
+					{ type: "acid" },
+					{ formula: "1d6" },
+				],
+			});
+			expect(result?.persistentDamage).toEqual([
+				{ type: "fire", formula: "2d6" },
+			]);
+		});
+
+		it("returns undefined persistentDamage for non-array value", () => {
+			const result = rehydrateCombatant({
+				...minimalCombatant(),
+				persistentDamage: "fire",
+			});
+			expect(result?.persistentDamage).toBeUndefined();
+		});
+
+		it("returns undefined persistentDamage for empty array", () => {
+			const result = rehydrateCombatant({
+				...minimalCombatant(),
+				persistentDamage: [],
+			});
+			expect(result?.persistentDamage).toBeUndefined();
+		});
+
 		it("drops invalid tempHp — keeps combatant", () => {
 			for (const tempHp of [-1, 1.5, "3"]) {
 				const result = rehydrateCombatant({

packages/domain/src/events.ts

@@ -1,5 +1,6 @@
 import type { ConditionId } from "./conditions.js";
 import type { CreatureId } from "./creature-types.js";
+import type { PersistentDamageType } from "./persistent-damage.js";
 import type { PlayerCharacterId } from "./player-character-types.js";
 import type { CombatantId } from "./types.js";
 
@@ -132,6 +133,19 @@ export interface ConcentrationEnded {
 	readonly combatantId: CombatantId;
 }
 
+export interface PersistentDamageAdded {
+	readonly type: "PersistentDamageAdded";
+	readonly combatantId: CombatantId;
+	readonly damageType: PersistentDamageType;
+	readonly formula: string;
+}
+
+export interface PersistentDamageRemoved {
+	readonly type: "PersistentDamageRemoved";
+	readonly combatantId: CombatantId;
+	readonly damageType: PersistentDamageType;
+}
+
 export interface CreatureAdjustmentSet {
 	readonly type: "CreatureAdjustmentSet";
 	readonly combatantId: CombatantId;
@@ -181,6 +195,8 @@ export type DomainEvent =
 	| ConditionRemoved
 	| ConcentrationStarted
 	| ConcentrationEnded
+	| PersistentDamageAdded
+	| PersistentDamageRemoved
 	| CreatureAdjustmentSet
 	| EncounterCleared
 	| PlayerCharacterCreated

packages/domain/src/index.ts

@@ -82,6 +82,8 @@ export type {
 	EncounterCleared,
 	InitiativeSet,
 	MaxHpSet,
+	PersistentDamageAdded,
+	PersistentDamageRemoved,
 	PlayerCharacterCreated,
 	PlayerCharacterDeleted,
 	PlayerCharacterUpdated,
@@ -100,6 +102,17 @@ export {
 	formatInitiativeModifier,
 	type InitiativeResult,
 } from "./initiative.js";
+export {
+	addPersistentDamage,
+	PERSISTENT_DAMAGE_DEFINITIONS,
+	PERSISTENT_DAMAGE_TYPES,
+	type PersistentDamageDefinition,
+	type PersistentDamageEntry,
+	type PersistentDamageSuccess,
+	type PersistentDamageType,
+	removePersistentDamage,
+	VALID_PERSISTENT_DAMAGE_TYPES,
+} from "./persistent-damage.js";
 export {
 	acDelta,
 	adjustedLevel,

packages/domain/src/persistent-damage.ts

@@ -0,0 +1,165 @@
+import type { DomainEvent } from "./events.js";
+import {
+	type CombatantId,
+	type DomainError,
+	type Encounter,
+	findCombatant,
+	isDomainError,
+} from "./types.js";
+
+export const PERSISTENT_DAMAGE_TYPES = [
+	"fire",
+	"bleed",
+	"acid",
+	"cold",
+	"electricity",
+	"poison",
+	"mental",
+] as const;
+
+export type PersistentDamageType = (typeof PERSISTENT_DAMAGE_TYPES)[number];
+
+export const VALID_PERSISTENT_DAMAGE_TYPES: ReadonlySet<string> = new Set(
+	PERSISTENT_DAMAGE_TYPES,
+);
+
+export interface PersistentDamageEntry {
+	readonly type: PersistentDamageType;
+	readonly formula: string;
+}
+
+export interface PersistentDamageDefinition {
+	readonly type: PersistentDamageType;
+	readonly label: string;
+	readonly iconName: string;
+	readonly color: string;
+}
+
+export const PERSISTENT_DAMAGE_DEFINITIONS: readonly PersistentDamageDefinition[] =
+	[
+		{ type: "fire", label: "Fire", iconName: "Flame", color: "orange" },
+		{ type: "bleed", label: "Bleed", iconName: "Droplets", color: "red" },
+		{
+			type: "acid",
+			label: "Acid",
+			iconName: "FlaskConical",
+			color: "lime",
+		},
+		{ type: "cold", label: "Cold", iconName: "Snowflake", color: "sky" },
+		{
+			type: "electricity",
+			label: "Electricity",
+			iconName: "Zap",
+			color: "yellow",
+		},
+		{
+			type: "poison",
+			label: "Poison",
+			iconName: "Droplet",
+			color: "green",
+		},
+		{
+			type: "mental",
+			label: "Mental",
+			iconName: "BrainCog",
+			color: "pink",
+		},
+	];
+
+export interface PersistentDamageSuccess {
+	readonly encounter: Encounter;
+	readonly events: DomainEvent[];
+}
+
+function applyPersistentDamage(
+	encounter: Encounter,
+	combatantId: CombatantId,
+	newEntries: readonly PersistentDamageEntry[] | undefined,
+): Encounter {
+	return {
+		combatants: encounter.combatants.map((c) =>
+			c.id === combatantId ? { ...c, persistentDamage: newEntries } : c,
+		),
+		activeIndex: encounter.activeIndex,
+		roundNumber: encounter.roundNumber,
+	};
+}
+
+export function addPersistentDamage(
+	encounter: Encounter,
+	combatantId: CombatantId,
+	damageType: PersistentDamageType,
+	formula: string,
+): PersistentDamageSuccess | DomainError {
+	if (!VALID_PERSISTENT_DAMAGE_TYPES.has(damageType)) {
+		return {
+			kind: "domain-error",
+			code: "unknown-damage-type",
+			message: `Unknown persistent damage type "${damageType}"`,
+		};
+	}
+	if (formula.trim().length === 0) {
+		return {
+			kind: "domain-error",
+			code: "empty-formula",
+			message: "Persistent damage formula must not be empty",
+		};
+	}
+
+	const found = findCombatant(encounter, combatantId);
+	if (isDomainError(found)) return found;
+	const { combatant: target } = found;
+	const current = target.persistentDamage ?? [];
+
+	// Replace existing entry of same type, or append
+	const filtered = current.filter((e) => e.type !== damageType);
+	const newEntries = [
+		...filtered,
+		{ type: damageType, formula: formula.trim() },
+	];
+
+	// Sort by definition order
+	const order = PERSISTENT_DAMAGE_DEFINITIONS.map((d) => d.type);
+	newEntries.sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type));
+
+	return {
+		encounter: applyPersistentDamage(encounter, combatantId, newEntries),
+		events: [
+			{
+				type: "PersistentDamageAdded",
+				combatantId,
+				damageType,
+				formula: formula.trim(),
+			},
+		],
+	};
+}
+
+export function removePersistentDamage(
+	encounter: Encounter,
+	combatantId: CombatantId,
+	damageType: PersistentDamageType,
+): PersistentDamageSuccess | DomainError {
+	const found = findCombatant(encounter, combatantId);
+	if (isDomainError(found)) return found;
+	const { combatant: target } = found;
+	const current = target.persistentDamage ?? [];
+
+	if (!current.some((e) => e.type === damageType)) {
+		return {
+			kind: "domain-error",
+			code: "persistent-damage-not-active",
+			message: `Persistent ${damageType} damage is not active`,
+		};
+	}
+
+	const filtered = current.filter((e) => e.type !== damageType);
+	return {
+		encounter: applyPersistentDamage(
+			encounter,
+			combatantId,
+			filtered.length > 0 ? filtered : undefined,
+		),
+		events: [{ type: "PersistentDamageRemoved", combatantId, damageType }],
+	};
+}

packages/domain/src/rehydrate-combatant.ts

@@ -2,6 +2,8 @@ import type { ConditionEntry, ConditionId } from "./conditions.js";
 import { VALID_CONDITION_IDS } from "./conditions.js";
 import { creatureId } from "./creature-types.js";
 import { VALID_CR_VALUES } from "./encounter-difficulty.js";
+import type { PersistentDamageEntry } from "./persistent-damage.js";
+import { VALID_PERSISTENT_DAMAGE_TYPES } from "./persistent-damage.js";
 import {
 	playerCharacterId,
 	VALID_PLAYER_COLORS,
@@ -42,6 +44,32 @@ function validateConditions(value: unknown): ConditionEntry[] | undefined {
 	return entries.length > 0 ? entries : undefined;
 }
 
+function validatePersistentDamage(
+	value: unknown,
+): PersistentDamageEntry[] | undefined {
+	if (!Array.isArray(value)) return undefined;
+	const entries: PersistentDamageEntry[] = [];
+	for (const item of value) {
+		if (
+			typeof item === "object" &&
+			item !== null &&
+			typeof (item as Record<string, unknown>).type === "string" &&
+			VALID_PERSISTENT_DAMAGE_TYPES.has(
+				(item as Record<string, unknown>).type as string,
+			) &&
+			typeof (item as Record<string, unknown>).formula === "string" &&
+			((item as Record<string, unknown>).formula as string).length > 0
+		) {
+			entries.push({
+				type: (item as Record<string, unknown>)
+					.type as PersistentDamageEntry["type"],
+				formula: (item as Record<string, unknown>).formula as string,
+			});
+		}
+	}
+	return entries.length > 0 ? entries : undefined;
+}
+
 function validateHp(
 	rawMaxHp: unknown,
 	rawCurrentHp: unknown,
@@ -107,6 +135,7 @@ function parseOptionalFields(entry: Record<string, unknown>) {
 		initiative: validateInteger(entry.initiative),
 		ac: validateAc(entry.ac),
 		conditions: validateConditions(entry.conditions),
+		persistentDamage: validatePersistentDamage(entry.persistentDamage),
 		isConcentrating: entry.isConcentrating === true ? true : undefined,
 		creatureId: validateNonEmptyString(entry.creatureId)
 			? creatureId(entry.creatureId as string)

packages/domain/src/types.ts

@@ -7,6 +7,7 @@ export function combatantId(id: string): CombatantId {
 
 import type { ConditionEntry } from "./conditions.js";
 import type { CreatureId } from "./creature-types.js";
+import type { PersistentDamageEntry } from "./persistent-damage.js";
 import type { PlayerCharacterId } from "./player-character-types.js";
 
 export interface Combatant {
@@ -18,6 +19,7 @@ export interface Combatant {
 	readonly tempHp?: number;
 	readonly ac?: number;
 	readonly conditions?: readonly ConditionEntry[];
+	readonly persistentDamage?: readonly PersistentDamageEntry[];
 	readonly isConcentrating?: boolean;
 	readonly creatureId?: CreatureId;
 	readonly creatureAdjustment?: "weak" | "elite";

specs/003-combatant-state/spec.md

@@ -25,6 +25,7 @@ interface Combatant {
   readonly ac?: number;               // non-negative integer
   readonly conditions?: readonly ConditionEntry[];
   readonly isConcentrating?: boolean;
+  readonly persistentDamage?: readonly PersistentDamageEntry[];  // PF2e only
   readonly creatureId?: CreatureId;   // link to bestiary entry
 }
 
@@ -32,6 +33,11 @@ interface ConditionEntry {
   readonly id: ConditionId;
   readonly value?: number;  // PF2e valued conditions (e.g., Clumsy 2); undefined for D&D
 }
+
+interface PersistentDamageEntry {
+  readonly type: PersistentDamageType;  // "fire" | "bleed" | "acid" | "cold" | "electricity" | "poison" | "mental"
+  readonly formula: string;             // e.g., "2d6", "1d4+2"
+}
 ```
 
 ---
@@ -346,6 +352,19 @@ Acceptance scenarios:
 4. **Given** the game system is D&D (5e or 5.5e), **When** interacting with conditions, **Then** no maximum enforcement is applied.
 5. **Given** a PF2e valued condition without a defined maximum (e.g., Frightened, Clumsy), **When** incrementing, **Then** no cap is enforced — the value can increase without limit.
 
+**Story CC-11 — Persistent Damage Tags (P2)**
+As a DM running a PF2e encounter, I want to apply persistent damage to a combatant as a compact tag showing a damage type icon and formula so I can track ongoing damage effects without manual bookkeeping.
+
+Acceptance scenarios:
+1. **Given** the game system is Pathfinder 2e and the condition picker is open, **When** the user clicks "Persistent Damage", **Then** a sub-picker opens with a damage type dropdown (fire, bleed, acid, cold, electricity, poison, mental) and a formula text input.
+2. **Given** the sub-picker is open, **When** the user selects "fire" and types "2d6" and confirms, **Then** a compact tag appears on the combatant row showing a fire icon and "2d6".
+3. **Given** a combatant has persistent fire 2d6, **When** the user adds persistent bleed 1d4, **Then** both tags appear on the row simultaneously.
+4. **Given** a combatant has persistent fire 2d6, **When** the user adds persistent fire 3d6, **Then** the existing fire entry is replaced with 3d6 (one instance per type).
+5. **Given** a combatant has a persistent damage tag, **When** the user clicks the tag on the row, **Then** the persistent damage entry is removed.
+6. **Given** a combatant has a persistent damage tag, **When** the user hovers over it, **Then** a tooltip shows the full description (e.g., "Persistent Fire 2d6 — Take damage at end of turn. DC 15 flat check to end.").
+7. **Given** the game system is D&D (5e or 5.5e), **When** viewing the condition picker, **Then** no "Persistent Damage" option is available.
+8. **Given** a combatant has persistent damage entries, **When** the page is reloaded, **Then** all entries are restored exactly.
+
 ### Requirements
 
 - **FR-032**: When a D&D game system is active, the system MUST support the following 15 standard D&D 5e/5.5e conditions: blinded, charmed, deafened, exhaustion, frightened, grappled, incapacitated, invisible, paralyzed, petrified, poisoned, prone, restrained, stunned, unconscious. When Pathfinder 2e is active, the system MUST support the PF2e condition set (see FR-103).
@@ -401,6 +420,15 @@ Acceptance scenarios:
 - **FR-110**: Maximum value enforcement MUST only apply when the Pathfinder 2e game system is active. D&D conditions are unaffected.
 - **FR-111**: When Pathfinder 2e is the active game system, the concentration UI (Brain icon toggle, purple left border accent, damage pulse animation) MUST be hidden entirely. The Brain icon MUST NOT be shown on hover or at rest, and the concentration toggle MUST NOT be interactive.
 - **FR-112**: Switching the game system MUST NOT clear or modify `isConcentrating` state on any combatant. The state MUST be preserved in storage and restored to the UI when switching back to a D&D game system.
+- **FR-117**: When Pathfinder 2e is active, the condition picker MUST include a "Persistent Damage" entry that opens a sub-picker instead of toggling directly.
+- **FR-118**: The persistent damage sub-picker MUST contain a dropdown of common PF2e damage types (fire, bleed, acid, cold, electricity, poison, mental) and a text input for the damage formula (e.g., "2d6").
+- **FR-119**: Each persistent damage entry MUST be displayed as a compact tag on the combatant row showing a damage type icon and the formula text (e.g., fire icon + "2d6").
+- **FR-120**: Only one persistent damage entry per damage type is allowed per combatant. Adding the same damage type MUST replace the existing formula.
+- **FR-121**: Clicking a persistent damage tag on the combatant row MUST remove that entry.
+- **FR-122**: Hovering a persistent damage tag MUST show a tooltip with the full description: "{Type} {formula} — Take damage at end of turn. DC 15 flat check to end."
+- **FR-123**: Persistent damage MUST NOT be available when a D&D game system is active.
+- **FR-124**: Persistent damage entries MUST persist across page reloads via the existing persistence mechanism.
+- **FR-125**: Persistent damage tags MUST be displayed inline after condition icons, following the same wrapping behavior as conditions (FR-041).
 
 ### Edge Cases
 
@@ -417,7 +445,11 @@ Acceptance scenarios:
 - When the game system is switched from D&D to PF2e, existing D&D conditions on combatants are hidden (not deleted). Switching back to D&D restores them.
 - PF2e valued condition at value 0 is treated as removed — it MUST NOT appear on the row.
 - Dying, doomed, wounded, and slowed have enforced maximum values in PF2e (4, 3, 3, 3 respectively). The `[+]` button is disabled at the cap. The dynamic dying cap based on doomed value (dying max = 4 − doomed) is not enforced — only the static maximum applies.
-- Persistent damage is excluded from the PF2e MVP condition set. It can be added as a follow-up feature.
+- Persistent damage tags are separate from the `conditions` array — they use a dedicated `persistentDamage` field on `Combatant`.
+- Adding persistent damage with an empty formula is rejected; the formula field must be non-empty.
+- When the game system is switched from PF2e to D&D, existing persistent damage entries are preserved in storage but hidden from display, consistent with condition behavior (FR-107).
+- Persistent damage has no automation — the system does not auto-apply damage or prompt for flat checks. It is a visual reminder only.
+- The persistent damage sub-picker closes when the user clicks outside of it or confirms an entry.
 - When PF2e is active, concentration state (`isConcentrating`) is preserved in storage but the entire concentration UI is hidden. Switching back to D&D restores Brain icons, purple borders, and pulse behavior without data loss.
 
 ---
@@ -622,3 +654,5 @@ Acceptance scenarios:
 - **SC-035**: PF2e valued conditions display their current value and can be incremented/decremented within 1 click each.
 - **SC-036**: Switching game system immediately changes the available conditions, bestiary search results, stat block layout, and initiative calculation — no page reload required.
 - **SC-037**: The game system preference survives a full page reload.
+- **SC-038**: A persistent damage entry can be added to a combatant in 3 clicks or fewer (click "+", click "Persistent Damage", select type + enter formula + confirm).
+- **SC-039**: Persistent damage tags are visually distinguishable from conditions by their icon + formula format.