T012–T016: Phase 3 application + web shell (use case, ports, React hook, UI, README)

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

apps/web/src/App.tsx

@@ -1,3 +1,43 @@
+import { useEncounter } from "./hooks/use-encounter";
+
 export function App() {
-	return <div>Initiative Tracker</div>;
+	const { encounter, events, advanceTurn } = useEncounter();
+	const activeCombatant = encounter.combatants[encounter.activeIndex];
+
+	return (
+		<div>
+			<h1>Initiative Tracker</h1>
+
+			<p>
+				Round {encounter.roundNumber} — Current: {activeCombatant.name}
+			</p>
+
+			<ul>
+				{encounter.combatants.map((c, i) => (
+					<li key={c.id}>
+						{i === encounter.activeIndex ? `▶ ${c.name}` : c.name}
+					</li>
+				))}
+			</ul>
+
+			<button type="button" onClick={advanceTurn}>
+				Next Turn
+			</button>
+
+			{events.length > 0 && (
+				<div>
+					<h2>Events</h2>
+					<ul>
+						{events.map((e, i) => (
+							<li key={`${e.type}-${i}`}>
+								{e.type === "TurnAdvanced"
+									? `Turn: ${e.previousCombatantId} → ${e.newCombatantId} (round ${e.roundNumber})`
+									: `Round advanced to ${e.newRoundNumber}`}
+							</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</div>
+	);
 }

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

@@ -0,0 +1,47 @@
+import type { EncounterStore } from "@initiative/application";
+import { advanceTurnUseCase } from "@initiative/application";
+import type { DomainEvent, Encounter } from "@initiative/domain";
+import {
+	combatantId,
+	createEncounter,
+	isDomainError,
+} from "@initiative/domain";
+import { useCallback, useRef, useState } from "react";
+
+function createDemoEncounter(): Encounter {
+	const result = createEncounter([
+		{ id: combatantId("1"), name: "Aria" },
+		{ id: combatantId("2"), name: "Brak" },
+		{ id: combatantId("3"), name: "Cael" },
+	]);
+
+	if (isDomainError(result)) {
+		throw new Error(`Failed to create demo encounter: ${result.message}`);
+	}
+
+	return result;
+}
+
+export function useEncounter() {
+	const [encounter, setEncounter] = useState<Encounter>(createDemoEncounter);
+	const [events, setEvents] = useState<DomainEvent[]>([]);
+	const encounterRef = useRef(encounter);
+	encounterRef.current = encounter;
+
+	const advanceTurn = useCallback(() => {
+		const store: EncounterStore = {
+			get: () => encounterRef.current,
+			save: (e) => setEncounter(e),
+		};
+
+		const result = advanceTurnUseCase(store);
+
+		if (isDomainError(result)) {
+			return;
+		}
+
+		setEvents((prev) => [...prev, ...result]);
+	}, []);
+
+	return { encounter, events, advanceTurn } as const;
+}