Implement the 016-combatant-ac feature that adds an optional Armor Class field to combatants with shield icon display and inline editing in the encounter tracker

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

apps/web/src/App.tsx

@@ -14,6 +14,7 @@ export function App() {
 		setInitiative,
 		setHp,
 		adjustHp,
+		setAc,
 	} = useEncounter();
 
 	return (
@@ -49,6 +50,7 @@ export function App() {
 							onRemove={removeCombatant}
 							onSetHp={setHp}
 							onAdjustHp={adjustHp}
+							onSetAc={setAc}
 						/>
 					))
 				)}

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

@@ -1,5 +1,5 @@
 import { type CombatantId, deriveHpStatus } from "@initiative/domain";
-import { X } from "lucide-react";
+import { Shield, X } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { cn } from "../lib/utils";
 import { QuickHpInput } from "./quick-hp-input";
@@ -12,6 +12,7 @@ interface Combatant {
 	readonly initiative?: number;
 	readonly maxHp?: number;
 	readonly currentHp?: number;
+	readonly ac?: number;
 }
 
 interface CombatantRowProps {
@@ -22,6 +23,7 @@ interface CombatantRowProps {
 	onRemove: (id: CombatantId) => void;
 	onSetHp: (id: CombatantId, maxHp: number | undefined) => void;
 	onAdjustHp: (id: CombatantId, delta: number) => void;
+	onSetAc: (id: CombatantId, value: number | undefined) => void;
 }
 
 function EditableName({
@@ -173,6 +175,53 @@ function CurrentHpInput({
 	);
 }
 
+function AcInput({
+	ac,
+	onCommit,
+}: {
+	ac: number | undefined;
+	onCommit: (value: number | undefined) => void;
+}) {
+	const [draft, setDraft] = useState(ac?.toString() ?? "");
+	const prev = useRef(ac);
+
+	if (ac !== prev.current) {
+		prev.current = ac;
+		setDraft(ac?.toString() ?? "");
+	}
+
+	const commit = useCallback(() => {
+		if (draft === "") {
+			onCommit(undefined);
+			return;
+		}
+		const n = Number.parseInt(draft, 10);
+		if (!Number.isNaN(n) && n >= 0) {
+			onCommit(n);
+		} else {
+			setDraft(ac?.toString() ?? "");
+		}
+	}, [draft, ac, onCommit]);
+
+	return (
+		<div className="flex items-center gap-1">
+			<Shield size={14} className="text-muted-foreground" />
+			<Input
+				type="text"
+				inputMode="numeric"
+				value={draft}
+				placeholder="AC"
+				className="h-7 w-[6ch] text-center text-sm tabular-nums"
+				onChange={(e) => setDraft(e.target.value)}
+				onBlur={commit}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") commit();
+				}}
+			/>
+		</div>
+	);
+}
+
 export function CombatantRow({
 	combatant,
 	isActive,
@@ -181,6 +230,7 @@ export function CombatantRow({
 	onRemove,
 	onSetHp,
 	onAdjustHp,
+	onSetAc,
 }: CombatantRowProps) {
 	const { id, name, initiative, maxHp, currentHp } = combatant;
 	const status = deriveHpStatus(currentHp, maxHp);
@@ -188,7 +238,7 @@ export function CombatantRow({
 	return (
 		<div
 			className={cn(
-				"grid grid-cols-[3rem_1fr_auto_2rem] items-center gap-3 rounded-md px-3 py-2 transition-colors",
+				"grid grid-cols-[3rem_1fr_auto_auto_2rem] items-center gap-3 rounded-md px-3 py-2 transition-colors",
 				isActive
 					? "border-l-2 border-l-accent bg-accent/10"
 					: "border-l-2 border-l-transparent",
@@ -218,6 +268,9 @@ export function CombatantRow({
 			{/* 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

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

@@ -6,6 +6,7 @@ import {
 	editCombatantUseCase,
 	removeCombatantUseCase,
 	retreatTurnUseCase,
+	setAcUseCase,
 	setHpUseCase,
 	setInitiativeUseCase,
 } from "@initiative/application";
@@ -171,6 +172,19 @@ export function useEncounter() {
 		[makeStore],
 	);
 
+	const setAc = useCallback(
+		(id: CombatantId, value: number | undefined) => {
+			const result = setAcUseCase(makeStore(), id, value);
+
+			if (isDomainError(result)) {
+				return;
+			}
+
+			setEvents((prev) => [...prev, ...result]);
+		},
+		[makeStore],
+	);
+
 	return {
 		encounter,
 		events,
@@ -182,5 +196,6 @@ export function useEncounter() {
 		setInitiative,
 		setHp,
 		adjustHp,
+		setAc,
 	} as const;
 }

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

@@ -206,6 +206,63 @@ describe("loadEncounter", () => {
 		expect(loadEncounter()).toBeNull();
 	});
 
+	it("round-trip preserves combatant AC value", () => {
+		const result = createEncounter(
+			[{ id: combatantId("1"), name: "Aria", ac: 18 }],
+			0,
+			1,
+		);
+		if (isDomainError(result)) throw new Error("unreachable");
+		saveEncounter(result);
+		const loaded = loadEncounter();
+		expect(loaded?.combatants[0].ac).toBe(18);
+	});
+
+	it("round-trip preserves combatant without AC", () => {
+		const result = createEncounter(
+			[{ id: combatantId("1"), name: "Aria" }],
+			0,
+			1,
+		);
+		if (isDomainError(result)) throw new Error("unreachable");
+		saveEncounter(result);
+		const loaded = loadEncounter();
+		expect(loaded?.combatants[0].ac).toBeUndefined();
+	});
+
+	it("discards invalid AC values during rehydration", () => {
+		localStorage.setItem(
+			STORAGE_KEY,
+			JSON.stringify({
+				combatants: [
+					{ id: "1", name: "Neg", ac: -1 },
+					{ id: "2", name: "Float", ac: 3.5 },
+					{ id: "3", name: "Str", ac: "high" },
+				],
+				activeIndex: 0,
+				roundNumber: 1,
+			}),
+		);
+		const loaded = loadEncounter();
+		expect(loaded).not.toBeNull();
+		expect(loaded?.combatants[0].ac).toBeUndefined();
+		expect(loaded?.combatants[1].ac).toBeUndefined();
+		expect(loaded?.combatants[2].ac).toBeUndefined();
+	});
+
+	it("preserves AC of 0 during rehydration", () => {
+		localStorage.setItem(
+			STORAGE_KEY,
+			JSON.stringify({
+				combatants: [{ id: "1", name: "Aria", ac: 0 }],
+				activeIndex: 0,
+				roundNumber: 1,
+			}),
+		);
+		const loaded = loadEncounter();
+		expect(loaded?.combatants[0].ac).toBe(0);
+	});
+
 	it("saving after modifications persists the latest state", () => {
 		const encounter = makeEncounter();
 		saveEncounter(encounter);

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

@@ -48,6 +48,13 @@ export function loadEncounter(): Encounter | null {
 					typeof entry.initiative === "number" ? entry.initiative : undefined,
 			};
 
+			// Validate AC field
+			const ac = entry.ac;
+			const validAc =
+				typeof ac === "number" && Number.isInteger(ac) && ac >= 0
+					? ac
+					: undefined;
+
 			// Validate and attach HP fields if valid
 			const maxHp = entry.maxHp;
 			const currentHp = entry.currentHp;
@@ -59,12 +66,13 @@ export function loadEncounter(): Encounter | null {
 					currentHp <= maxHp;
 				return {
 					...base,
+					ac: validAc,
 					maxHp,
 					currentHp: validCurrentHp ? currentHp : maxHp,
 				};
 			}
 
-			return base;
+			return { ...base, ac: validAc };
 		});
 
 		const result = createEncounter(