Add combatant side assignment for encounter difficulty

Combatants can now be assigned to party or enemy side via a toggle
in the difficulty breakdown panel. Party-side NPCs subtract their XP
from the encounter total, letting allied NPCs reduce difficulty.
PCs default to party, non-PCs to enemy — users who don't use sides
see no change. Side persists across reload and export/import.

Closes #22

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/components/__tests__/difficulty-breakdown-panel.test.tsx

@@ -121,7 +121,7 @@ describe("DifficultyBreakdownPanel", () => {
 		});
 	});
 
-	it("renders bestiary combatant as read-only with source name", async () => {
+	it("shows PC in party column with level", async () => {
 		renderPanel({
 			encounter: defaultEncounter(),
 			playerCharacters: defaultPCs,
@@ -129,12 +129,53 @@ describe("DifficultyBreakdownPanel", () => {
 		});
 
 		await waitFor(() => {
-			expect(screen.getByText("Goblin (SRD)")).toBeInTheDocument();
+			expect(screen.getByText("Hero")).toBeInTheDocument();
+			expect(screen.getByText("Lv 5")).toBeInTheDocument();
+		});
+	});
+
+	it("shows monsters in enemy column", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Goblin")).toBeInTheDocument();
 			expect(screen.getAllByText("CR 1/4").length).toBeGreaterThanOrEqual(1);
 		});
 	});
 
-	it("renders custom combatant with CR picker", async () => {
+	it("renders explanation text", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(
+				screen.getByText(
+					"Allied NPC XP is subtracted from encounter difficulty",
+				),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("renders Net Monster XP footer", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Net Monster XP")).toBeInTheDocument();
+		});
+	});
+
+	it("renders custom combatant with CR picker in enemy column", async () => {
 		renderPanel({
 			encounter: defaultEncounter(),
 			playerCharacters: defaultPCs,
@@ -144,27 +185,10 @@ describe("DifficultyBreakdownPanel", () => {
 		await waitFor(() => {
 			const pickers = screen.getAllByLabelText("Challenge rating");
 			expect(pickers).toHaveLength(2);
-			// First picker is "Custom Thug" with CR 2
 			expect(pickers[0]).toHaveValue("2");
 		});
 	});
 
-	it("renders unassigned combatant with Assign picker and dash for XP", async () => {
-		renderPanel({
-			encounter: defaultEncounter(),
-			playerCharacters: defaultPCs,
-			creatures: new Map([[goblinCreature.id, goblinCreature]]),
-		});
-
-		await waitFor(() => {
-			const pickers = screen.getAllByLabelText("Challenge rating");
-			// Second picker is "Bandit" with no CR
-			expect(pickers[1]).toHaveValue("");
-			// "—" appears for unassigned XP
-			expect(screen.getByText("—")).toBeInTheDocument();
-		});
-	});
-
 	it("selecting a CR updates the visible XP value", async () => {
 		const user = userEvent.setup();
 		renderPanel({
@@ -173,24 +197,19 @@ describe("DifficultyBreakdownPanel", () => {
 			creatures: new Map([[goblinCreature.id, goblinCreature]]),
 		});
 
-		// Wait for the panel to render with bestiary data
 		await waitFor(() => {
-			expect(screen.getByText("—")).toBeInTheDocument();
+			expect(screen.getAllByLabelText("Challenge rating")).toHaveLength(2);
 		});
 
-		// The Bandit (second picker) has no CR — shows "—" for XP
 		const pickers = screen.getAllByLabelText("Challenge rating");
-
-		// Select CR 5 (1,800 XP) on Bandit
 		await user.selectOptions(pickers[1], "5");
 
-		// XP should update — the "—" should be replaced with an XP value
 		await waitFor(() => {
 			expect(screen.getByText("1,800")).toBeInTheDocument();
 		});
 	});
 
-	it("renders total monster XP", async () => {
+	it("non-PC combatants show toggle button", async () => {
 		renderPanel({
 			encounter: defaultEncounter(),
 			playerCharacters: defaultPCs,
@@ -198,12 +217,57 @@ describe("DifficultyBreakdownPanel", () => {
 		});
 
 		await waitFor(() => {
-			expect(screen.getByText("Total Monster XP")).toBeInTheDocument();
+			// Each non-PC enemy combatant has a toggle button
+			expect(
+				screen.getByLabelText("Move Goblin to party side"),
+			).toBeInTheDocument();
+			expect(
+				screen.getByLabelText("Move Custom Thug to party side"),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("PC combatants do not show side toggle", async () => {
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Hero")).toBeInTheDocument();
+		});
+
+		expect(
+			screen.queryByLabelText("Move Hero to enemy side"),
+		).not.toBeInTheDocument();
+	});
+
+	it("side toggle moves combatant between sections", async () => {
+		const user = userEvent.setup();
+		renderPanel({
+			encounter: defaultEncounter(),
+			playerCharacters: defaultPCs,
+			creatures: new Map([[goblinCreature.id, goblinCreature]]),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Goblin")).toBeInTheDocument();
+		});
+
+		// Toggle goblin to party side
+		const toggleBtn = screen.getByLabelText("Move Goblin to party side");
+		await user.click(toggleBtn);
+
+		// After toggle, the aria-label should change to "Move Goblin to enemy side"
+		await waitFor(() => {
+			expect(
+				screen.getByLabelText("Move Goblin to enemy side"),
+			).toBeInTheDocument();
 		});
 	});
 
 	it("renders nothing when breakdown data is insufficient", () => {
-		// No PCs with level → breakdown returns null
 		const { container } = renderPanel({
 			encounter: buildEncounter({
 				combatants: [