Implement the 012-turn-navigation feature that adds a RetreatTurn domain operation and relocates turn controls to a navigation bar at the top of the encounter tracker

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

apps/web/src/App.tsx

@@ -1,11 +1,13 @@
 import { ActionBar } from "./components/action-bar";
 import { CombatantRow } from "./components/combatant-row";
+import { TurnNavigation } from "./components/turn-navigation";
 import { useEncounter } from "./hooks/use-encounter";
 
 export function App() {
 	const {
 		encounter,
 		advanceTurn,
+		retreatTurn,
 		addCombatant,
 		removeCombatant,
 		editCombatant,
@@ -13,7 +15,6 @@ export function App() {
 		setHp,
 		adjustHp,
 	} = useEncounter();
-	const activeCombatant = encounter.combatants[encounter.activeIndex];
 
 	return (
 		<div className="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 px-4 py-8">
@@ -22,13 +23,15 @@ export function App() {
 				<h1 className="text-2xl font-bold tracking-tight">
 					Initiative Tracker
 				</h1>
-				{activeCombatant && (
-					<p className="text-sm text-muted-foreground">
-						Round {encounter.roundNumber} — Current: {activeCombatant.name}
-					</p>
-				)}
 			</header>
 
+			{/* Turn Navigation */}
+			<TurnNavigation
+				encounter={encounter}
+				onAdvanceTurn={advanceTurn}
+				onRetreatTurn={retreatTurn}
+			/>
+
 			{/* Combatant List */}
 			<div className="flex flex-1 flex-col gap-1 overflow-y-auto">
 				{encounter.combatants.length === 0 ? (
@@ -52,7 +55,7 @@ export function App() {
 			</div>
 
 			{/* Action Bar */}
-			<ActionBar onAddCombatant={addCombatant} onAdvanceTurn={advanceTurn} />
+			<ActionBar onAddCombatant={addCombatant} />
 		</div>
 	);
 }

apps/web/src/components/action-bar.tsx

@@ -4,10 +4,9 @@ import { Input } from "./ui/input";
 
 interface ActionBarProps {
 	onAddCombatant: (name: string) => void;
-	onAdvanceTurn: () => void;
 }
 
-export function ActionBar({ onAddCombatant, onAdvanceTurn }: ActionBarProps) {
+export function ActionBar({ onAddCombatant }: ActionBarProps) {
 	const [nameInput, setNameInput] = useState("");
 
 	const handleAdd = (e: FormEvent) => {
@@ -31,9 +30,6 @@ export function ActionBar({ onAddCombatant, onAdvanceTurn }: ActionBarProps) {
 					Add
 				</Button>
 			</form>
-			<Button variant="outline" size="sm" onClick={onAdvanceTurn}>
-				Next Turn
-			</Button>
 		</div>
 	);
 }

apps/web/src/components/turn-navigation.tsx

@@ -0,0 +1,59 @@
+import type { Encounter } from "@initiative/domain";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "./ui/button";
+
+interface TurnNavigationProps {
+	encounter: Encounter;
+	onAdvanceTurn: () => void;
+	onRetreatTurn: () => void;
+}
+
+export function TurnNavigation({
+	encounter,
+	onAdvanceTurn,
+	onRetreatTurn,
+}: TurnNavigationProps) {
+	const hasCombatants = encounter.combatants.length > 0;
+	const isAtStart = encounter.roundNumber === 1 && encounter.activeIndex === 0;
+	const activeCombatant = encounter.combatants[encounter.activeIndex];
+
+	return (
+		<div className="flex items-center justify-between rounded-md border border-border bg-card px-4 py-3">
+			<Button
+				variant="outline"
+				size="sm"
+				className="hover:bg-muted"
+				onClick={onRetreatTurn}
+				disabled={!hasCombatants || isAtStart}
+			>
+				<ChevronLeft className="h-4 w-4" />
+				Previous
+			</Button>
+
+			<div className="text-center text-sm">
+				{activeCombatant ? (
+					<>
+						<span className="font-medium">Round {encounter.roundNumber}</span>
+						<span className="text-muted-foreground">
+							{" "}
+							— {activeCombatant.name}
+						</span>
+					</>
+				) : (
+					<span className="text-muted-foreground">No combatants</span>
+				)}
+			</div>
+
+			<Button
+				variant="outline"
+				size="sm"
+				className="hover:bg-muted"
+				onClick={onAdvanceTurn}
+				disabled={!hasCombatants}
+			>
+				Next
+				<ChevronRight className="h-4 w-4" />
+			</Button>
+		</div>
+	);
+}

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

@@ -5,6 +5,7 @@ import {
 	advanceTurnUseCase,
 	editCombatantUseCase,
 	removeCombatantUseCase,
+	retreatTurnUseCase,
 	setHpUseCase,
 	setInitiativeUseCase,
 } from "@initiative/application";
@@ -79,6 +80,16 @@ export function useEncounter() {
 		setEvents((prev) => [...prev, ...result]);
 	}, [makeStore]);
 
+	const retreatTurn = useCallback(() => {
+		const result = retreatTurnUseCase(makeStore());
+
+		if (isDomainError(result)) {
+			return;
+		}
+
+		setEvents((prev) => [...prev, ...result]);
+	}, [makeStore]);
+
 	const nextId = useRef(deriveNextId(encounter));
 
 	const addCombatant = useCallback(
@@ -164,6 +175,7 @@ export function useEncounter() {
 		encounter,
 		events,
 		advanceTurn,
+		retreatTurn,
 		addCombatant,
 		removeCombatant,
 		editCombatant,