# **Mission Debrief Specification: After Action Report**

This document defines the UI for the **Mission Results Screen**. It appears after a mission concludes (Victory or Defeat) but before returning to the Hub.

## **1. Visual Design**

Style: A clipboard or field report overlay.  
Context: It overlays the frozen 3D scene of the final moment of the battle.

### **Layout**

- **Header:** "MISSION ACCOMPLISHED" (Gold) or "MISSION FAILED" (Red).
- **Primary Stats (Top Row):**
  - **XP Gained:** Numeric tally with a filling bar animation.
  - **Turns Taken:** Compare against "Par" or limits.
- **Rewards (Middle Panel):**
  - **Currency:** Aether Shards & Cores gained.
  - **Loot Grid:** A grid of items found. Hovering shows tooltips.
  - **Reputation:** A bar showing the Faction Standing change (e.g., "Iron Legion +15").
- **Roster Status (Bottom Row):**
  - Portraits of the squad.
  - Status: "OK", "Injured", "Dead" (Greyed out).
  - Level Up: If a unit leveled up, show a "Level Up!" badge.
- **Footer:** "RETURN TO BASE" button.

## **2. TypeScript Interface**

```ts
// src/types/Debrief.ts

import { ItemInstance } from "./Inventory";

export interface MissionResult {
  outcome: "VICTORY" | "DEFEAT";
  missionTitle: string;

  // Rewards
  xpEarned: number;
  currency: { shards: number; cores: number };
  loot: ItemInstance[];
  reputationChanges: { factionId: string; amount: number }[];

  // Squad State Changes
  squadUpdates: {
    unitId: string;
    isDead: boolean;
    leveledUp: boolean;
    damageTaken: number;
  }[];
}
```

---

## **3. Logic & Integration**

- **Trigger:** `GameLoop` finishes `RESOLUTION` phase -> calculates `MissionResult` object -> Dispatches `show-debrief`.
- **Flow:** 1. `MissionDebrief` component mounts. 2. Animations play (XP bars fill, Loot pops in). 3. Player reviews. 4. Player clicks "Return". 5. Component dispatches `debrief-closed`. 6. `GameStateManager` transitions to `STATE_META_HUB`.