Implement the 013-hp-status-indicators feature that adds visual HP status indicators to combatant rows with a pure domain function deriving bloodied/unconscious states

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

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

@@ -1,4 +1,4 @@
-import type { CombatantId } from "@initiative/domain";
+import { type CombatantId, deriveHpStatus } from "@initiative/domain";
 import { X } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { cn } from "../lib/utils";
@@ -127,10 +127,12 @@ function CurrentHpInput({
 	currentHp,
 	maxHp,
 	onCommit,
+	className,
 }: {
 	currentHp: number | undefined;
 	maxHp: number | undefined;
 	onCommit: (value: number) => void;
+	className?: string;
 }) {
 	const [draft, setDraft] = useState(currentHp?.toString() ?? "");
 	const prev = useRef(currentHp);
@@ -161,7 +163,7 @@ function CurrentHpInput({
 			value={draft}
 			placeholder="HP"
 			disabled={maxHp === undefined}
-			className="h-7 w-[7ch] text-center text-sm tabular-nums"
+			className={cn("h-7 w-[7ch] text-center text-sm tabular-nums", className)}
 			onChange={(e) => setDraft(e.target.value)}
 			onBlur={commit}
 			onKeyDown={(e) => {
@@ -181,6 +183,7 @@ export function CombatantRow({
 	onAdjustHp,
 }: CombatantRowProps) {
 	const { id, name, initiative, maxHp, currentHp } = combatant;
+	const status = deriveHpStatus(currentHp, maxHp);
 
 	return (
 		<div
@@ -189,6 +192,7 @@ export function CombatantRow({
 				isActive
 					? "border-l-2 border-l-accent bg-accent/10"
 					: "border-l-2 border-l-transparent",
+				status === "unconscious" && "opacity-50",
 			)}
 		>
 			{/* Initiative */}
@@ -219,6 +223,10 @@ export function CombatantRow({
 				<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;