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