Implement the 017-combat-conditions feature that adds D&D 5e status conditions to combatants with icon tags, color coding, and a compact toggle picker in the encounter tracker

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

apps/web/src/App.tsx

@@ -15,6 +15,7 @@ export function App() {
 		setHp,
 		adjustHp,
 		setAc,
+		toggleCondition,
 	} = useEncounter();
 
 	return (
@@ -34,7 +35,7 @@ export function App() {
 			/>
 
 			{/* Combatant List */}
-			<div className="flex flex-1 flex-col gap-1 overflow-y-auto">
+			<div className="flex flex-1 flex-col gap-1">
 				{encounter.combatants.length === 0 ? (
 					<p className="py-12 text-center text-sm text-muted-foreground">
 						No combatants yet — add one to get started
@@ -51,6 +52,7 @@ export function App() {
 							onSetHp={setHp}
 							onAdjustHp={adjustHp}
 							onSetAc={setAc}
+							onToggleCondition={toggleCondition}
 						/>
 					))
 				)}

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

@@ -1,7 +1,13 @@
-import { type CombatantId, deriveHpStatus } from "@initiative/domain";
+import {
+	type CombatantId,
+	type ConditionId,
+	deriveHpStatus,
+} from "@initiative/domain";
 import { Shield, X } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { cn } from "../lib/utils";
+import { ConditionPicker } from "./condition-picker";
+import { ConditionTags } from "./condition-tags";
 import { QuickHpInput } from "./quick-hp-input";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
@@ -13,6 +19,7 @@ interface Combatant {
 	readonly maxHp?: number;
 	readonly currentHp?: number;
 	readonly ac?: number;
+	readonly conditions?: readonly ConditionId[];
 }
 
 interface CombatantRowProps {
@@ -24,6 +31,7 @@ interface CombatantRowProps {
 	onSetHp: (id: CombatantId, maxHp: number | undefined) => void;
 	onAdjustHp: (id: CombatantId, delta: number) => void;
 	onSetAc: (id: CombatantId, value: number | undefined) => void;
+	onToggleCondition: (id: CombatantId, conditionId: ConditionId) => void;
 }
 
 function EditableName({
@@ -231,81 +239,103 @@ export function CombatantRow({
 	onSetHp,
 	onAdjustHp,
 	onSetAc,
+	onToggleCondition,
 }: CombatantRowProps) {
 	const { id, name, initiative, maxHp, currentHp } = combatant;
 	const status = deriveHpStatus(currentHp, maxHp);
+	const [pickerOpen, setPickerOpen] = useState(false);
 
 	return (
 		<div
 			className={cn(
-				"grid grid-cols-[3rem_1fr_auto_auto_2rem] items-center gap-3 rounded-md px-3 py-2 transition-colors",
+				"rounded-md px-3 py-2 transition-colors",
 				isActive
 					? "border-l-2 border-l-accent bg-accent/10"
 					: "border-l-2 border-l-transparent",
 				status === "unconscious" && "opacity-50",
 			)}
 		>
-			{/* Initiative */}
-			<Input
-				type="text"
-				inputMode="numeric"
-				value={initiative ?? ""}
-				placeholder="--"
-				className="h-7 w-[6ch] text-center text-sm tabular-nums"
-				onChange={(e) => {
-					const raw = e.target.value;
-					if (raw === "") {
-						onSetInitiative(id, undefined);
-					} else {
-						const n = Number.parseInt(raw, 10);
-						if (!Number.isNaN(n)) {
-							onSetInitiative(id, n);
+			<div className="grid grid-cols-[3rem_1fr_auto_auto_2rem] items-center gap-3">
+				{/* Initiative */}
+				<Input
+					type="text"
+					inputMode="numeric"
+					value={initiative ?? ""}
+					placeholder="--"
+					className="h-7 w-[6ch] text-center text-sm tabular-nums"
+					onChange={(e) => {
+						const raw = e.target.value;
+						if (raw === "") {
+							onSetInitiative(id, undefined);
+						} else {
+							const n = Number.parseInt(raw, 10);
+							if (!Number.isNaN(n)) {
+								onSetInitiative(id, n);
+							}
 						}
-					}
-				}}
-			/>
-
-			{/* Name */}
-			<EditableName name={name} combatantId={id} onRename={onRename} />
-
-			{/* AC */}
-			<AcInput ac={combatant.ac} onCommit={(v) => onSetAc(id, v)} />
-
-			{/* HP */}
-			<div className="flex items-center gap-1">
-				<CurrentHpInput
-					currentHp={currentHp}
-					maxHp={maxHp}
-					className={cn(
-						status === "bloodied" && "text-amber-400",
-						status === "unconscious" && "text-red-400",
-					)}
-					onCommit={(value) => {
-						if (currentHp === undefined) return;
-						const delta = value - currentHp;
-						if (delta !== 0) onAdjustHp(id, delta);
 					}}
 				/>
-				{maxHp !== undefined && (
-					<span className="text-sm tabular-nums text-muted-foreground">/</span>
-				)}
-				<MaxHpInput maxHp={maxHp} onCommit={(v) => onSetHp(id, v)} />
-				{maxHp !== undefined && (
-					<QuickHpInput combatantId={id} onAdjustHp={onAdjustHp} />
-				)}
+
+				{/* Name */}
+				<EditableName name={name} combatantId={id} onRename={onRename} />
+
+				{/* AC */}
+				<AcInput ac={combatant.ac} onCommit={(v) => onSetAc(id, v)} />
+
+				{/* HP */}
+				<div className="flex items-center gap-1">
+					<CurrentHpInput
+						currentHp={currentHp}
+						maxHp={maxHp}
+						className={cn(
+							status === "bloodied" && "text-amber-400",
+							status === "unconscious" && "text-red-400",
+						)}
+						onCommit={(value) => {
+							if (currentHp === undefined) return;
+							const delta = value - currentHp;
+							if (delta !== 0) onAdjustHp(id, delta);
+						}}
+					/>
+					{maxHp !== undefined && (
+						<span className="text-sm tabular-nums text-muted-foreground">
+							/
+						</span>
+					)}
+					<MaxHpInput maxHp={maxHp} onCommit={(v) => onSetHp(id, v)} />
+					{maxHp !== undefined && (
+						<QuickHpInput combatantId={id} onAdjustHp={onAdjustHp} />
+					)}
+				</div>
+
+				{/* Actions */}
+				<Button
+					variant="ghost"
+					size="icon"
+					className="h-7 w-7 text-muted-foreground hover:text-destructive"
+					onClick={() => onRemove(id)}
+					title="Remove combatant"
+					aria-label="Remove combatant"
+				>
+					<X size={16} />
+				</Button>
 			</div>
 
-			{/* Actions */}
-			<Button
-				variant="ghost"
-				size="icon"
-				className="h-7 w-7 text-muted-foreground hover:text-destructive"
-				onClick={() => onRemove(id)}
-				title="Remove combatant"
-				aria-label="Remove combatant"
-			>
-				<X size={16} />
-			</Button>
+			{/* Conditions */}
+			<div className="relative ml-[calc(3rem+0.75rem)]">
+				<ConditionTags
+					conditions={combatant.conditions}
+					onRemove={(conditionId) => onToggleCondition(id, conditionId)}
+					onOpenPicker={() => setPickerOpen((prev) => !prev)}
+				/>
+				{pickerOpen && (
+					<ConditionPicker
+						activeConditions={combatant.conditions}
+						onToggle={(conditionId) => onToggleCondition(id, conditionId)}
+						onClose={() => setPickerOpen(false)}
+					/>
+				)}
+			</div>
 		</div>
 	);
 }

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

@@ -0,0 +1,124 @@
+import { CONDITION_DEFINITIONS, type ConditionId } from "@initiative/domain";
+import type { LucideIcon } from "lucide-react";
+import {
+	ArrowDown,
+	Ban,
+	BatteryLow,
+	Droplet,
+	EarOff,
+	EyeOff,
+	Gem,
+	Ghost,
+	Hand,
+	Heart,
+	Link,
+	Moon,
+	Siren,
+	Sparkles,
+	ZapOff,
+} from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../lib/utils";
+
+const ICON_MAP: Record<string, LucideIcon> = {
+	EyeOff,
+	Heart,
+	EarOff,
+	BatteryLow,
+	Siren,
+	Hand,
+	Ban,
+	Ghost,
+	ZapOff,
+	Gem,
+	Droplet,
+	ArrowDown,
+	Link,
+	Sparkles,
+	Moon,
+};
+
+const COLOR_CLASSES: Record<string, string> = {
+	neutral: "text-muted-foreground",
+	pink: "text-pink-400",
+	amber: "text-amber-400",
+	orange: "text-orange-400",
+	gray: "text-gray-400",
+	violet: "text-violet-400",
+	yellow: "text-yellow-400",
+	slate: "text-slate-400",
+	green: "text-green-400",
+	indigo: "text-indigo-400",
+};
+
+interface ConditionPickerProps {
+	activeConditions: readonly ConditionId[] | undefined;
+	onToggle: (conditionId: ConditionId) => void;
+	onClose: () => void;
+}
+
+export function ConditionPicker({
+	activeConditions,
+	onToggle,
+	onClose,
+}: ConditionPickerProps) {
+	const ref = useRef<HTMLDivElement>(null);
+	const [flipped, setFlipped] = useState(false);
+
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		setFlipped(rect.bottom > window.innerHeight);
+	}, []);
+
+	useEffect(() => {
+		function handleClickOutside(e: MouseEvent) {
+			if (ref.current && !ref.current.contains(e.target as Node)) {
+				onClose();
+			}
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [onClose]);
+
+	const active = new Set(activeConditions ?? []);
+
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				"absolute z-10 w-fit rounded-md border border-border bg-background p-1 shadow-lg",
+				flipped ? "bottom-full mb-1" : "mt-1",
+			)}
+		>
+			{CONDITION_DEFINITIONS.map((def) => {
+				const Icon = ICON_MAP[def.iconName];
+				if (!Icon) return null;
+				const isActive = active.has(def.id);
+				const colorClass = COLOR_CLASSES[def.color] ?? "text-muted-foreground";
+				return (
+					<button
+						key={def.id}
+						type="button"
+						className={cn(
+							"flex w-full items-center gap-2 rounded px-2 py-1 text-sm transition-colors hover:bg-card",
+							isActive && "bg-card/50",
+						)}
+						onClick={() => onToggle(def.id)}
+					>
+						<Icon
+							size={14}
+							className={isActive ? colorClass : "text-muted-foreground"}
+						/>
+						<span
+							className={isActive ? "text-foreground" : "text-muted-foreground"}
+						>
+							{def.label}
+						</span>
+					</button>
+				);
+			})}
+		</div>
+	);
+}

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

@@ -0,0 +1,96 @@
+import { CONDITION_DEFINITIONS, type ConditionId } from "@initiative/domain";
+import type { LucideIcon } from "lucide-react";
+import {
+	ArrowDown,
+	Ban,
+	BatteryLow,
+	Droplet,
+	EarOff,
+	EyeOff,
+	Gem,
+	Ghost,
+	Hand,
+	Heart,
+	Link,
+	Moon,
+	Plus,
+	Siren,
+	Sparkles,
+	ZapOff,
+} from "lucide-react";
+
+const ICON_MAP: Record<string, LucideIcon> = {
+	EyeOff,
+	Heart,
+	EarOff,
+	BatteryLow,
+	Siren,
+	Hand,
+	Ban,
+	Ghost,
+	ZapOff,
+	Gem,
+	Droplet,
+	ArrowDown,
+	Link,
+	Sparkles,
+	Moon,
+};
+
+const COLOR_CLASSES: Record<string, string> = {
+	neutral: "text-muted-foreground",
+	pink: "text-pink-400",
+	amber: "text-amber-400",
+	orange: "text-orange-400",
+	gray: "text-gray-400",
+	violet: "text-violet-400",
+	yellow: "text-yellow-400",
+	slate: "text-slate-400",
+	green: "text-green-400",
+	indigo: "text-indigo-400",
+};
+
+interface ConditionTagsProps {
+	conditions: readonly ConditionId[] | undefined;
+	onRemove: (conditionId: ConditionId) => void;
+	onOpenPicker: () => void;
+}
+
+export function ConditionTags({
+	conditions,
+	onRemove,
+	onOpenPicker,
+}: ConditionTagsProps) {
+	return (
+		<div className="flex flex-wrap items-center gap-0.5">
+			{conditions?.map((condId) => {
+				const def = CONDITION_DEFINITIONS.find((d) => d.id === condId);
+				if (!def) return null;
+				const Icon = ICON_MAP[def.iconName];
+				if (!Icon) return null;
+				const colorClass = COLOR_CLASSES[def.color] ?? "text-muted-foreground";
+				return (
+					<button
+						key={condId}
+						type="button"
+						title={def.label}
+						aria-label={`Remove ${def.label}`}
+						className={`inline-flex items-center rounded p-0.5 hover:bg-card transition-colors ${colorClass}`}
+						onClick={() => onRemove(condId)}
+					>
+						<Icon size={14} />
+					</button>
+				);
+			})}
+			<button
+				type="button"
+				title="Add condition"
+				aria-label="Add condition"
+				className="inline-flex items-center rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-card transition-colors"
+				onClick={onOpenPicker}
+			>
+				<Plus size={14} />
+			</button>
+		</div>
+	);
+}

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

@@ -9,8 +9,14 @@ import {
 	setAcUseCase,
 	setHpUseCase,
 	setInitiativeUseCase,
+	toggleConditionUseCase,
 } from "@initiative/application";
-import type { CombatantId, DomainEvent, Encounter } from "@initiative/domain";
+import type {
+	CombatantId,
+	ConditionId,
+	DomainEvent,
+	Encounter,
+} from "@initiative/domain";
 import {
 	combatantId,
 	createEncounter,
@@ -185,6 +191,19 @@ export function useEncounter() {
 		[makeStore],
 	);
 
+	const toggleCondition = useCallback(
+		(id: CombatantId, conditionId: ConditionId) => {
+			const result = toggleConditionUseCase(makeStore(), id, conditionId);
+
+			if (isDomainError(result)) {
+				return;
+			}
+
+			setEvents((prev) => [...prev, ...result]);
+		},
+		[makeStore],
+	);
+
 	return {
 		encounter,
 		events,
@@ -197,5 +216,6 @@ export function useEncounter() {
 		setHp,
 		adjustHp,
 		setAc,
+		toggleCondition,
 	} as const;
 }

apps/web/src/persistence/encounter-storage.ts

@@ -1,8 +1,10 @@
 import {
+	type ConditionId,
 	combatantId,
 	createEncounter,
 	type Encounter,
 	isDomainError,
+	VALID_CONDITION_IDS,
 } from "@initiative/domain";
 
 const STORAGE_KEY = "initiative:encounter";
@@ -55,6 +57,21 @@ export function loadEncounter(): Encounter | null {
 					? ac
 					: undefined;
 
+			// Validate conditions field
+			const rawConditions = entry.conditions;
+			const validConditions: ConditionId[] | undefined = Array.isArray(
+				rawConditions,
+			)
+				? (rawConditions.filter(
+						(v): v is ConditionId =>
+							typeof v === "string" && VALID_CONDITION_IDS.has(v),
+					) as ConditionId[])
+				: undefined;
+			const conditions =
+				validConditions && validConditions.length > 0
+					? validConditions
+					: undefined;
+
 			// Validate and attach HP fields if valid
 			const maxHp = entry.maxHp;
 			const currentHp = entry.currentHp;
@@ -67,12 +84,13 @@ export function loadEncounter(): Encounter | null {
 				return {
 					...base,
 					ac: validAc,
+					conditions,
 					maxHp,
 					currentHp: validCurrentHp ? currentHp : maxHp,
 				};
 			}
 
-			return { ...base, ac: validAc };
+			return { ...base, ac: validAc, conditions };
 		});
 
 		const result = createEncounter(