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