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/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