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/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>
+	);
+}