# 10 — App Shell

## 1. High-Level Overview

**Purpose**: Application bootstrap. `main.tsx` mounts React + StrictMode + BrowserRouter; `App.tsx` defines the top-level routing tree and provider stack.

**Architectural Pattern**: Composition root.

**Upstream dependencies**: every other component (this is the wiring root).

**Downstream consumers**: none (top of the tree).

## 2. Internal Interfaces

### `src/main.tsx`

- Imports `./i18n/i18n` for side-effect (`00_foundation`).
- Imports `./index.css`.
- Mounts `<StrictMode><BrowserRouter><App /></BrowserRouter></StrictMode>` into `#root`.

### `src/App.tsx`

Routes:

| Route | Wrapping | Component |
|-------|----------|-----------|
| `/login` | (public) | `04_login/LoginPage` |
| `/flights` (default authenticated) | `AuthProvider → ProtectedRoute → FlightProvider → Header` | `05_flights/FlightsPage` |
| `/annotations` | same | `06_annotations/AnnotationsPage` |
| `/dataset` | same | `07_dataset/DatasetPage` |
| `/admin` | same — **no role guard** | `08_admin/AdminPage` |
| `/settings` | same | `09_settings/SettingsPage` |
| `*` | same | redirect → `/flights` |

## 5. Implementation Details

**State Management**: provider stack only (`AuthProvider`, `FlightProvider`).

**Findings (5 items from `src__App-and-main.md`):**

1. **No role-based route guards** on `/admin` (PRIORITY — security). `/settings` is more nuanced (no `SETTINGS` permission code in spec; server-enforced via 403).
2. **Mobile bottom-nav** route layout — confirmed present (Header.tsx:113–129). Earlier draft incorrectly listed this as missing; corrected per state.json 02:01Z.
3. **No `ErrorBoundary`** — any uncaught render throw crashes the whole app to a white screen.
4. **No lazy chunks / code-splitting** — every route is in the initial bundle. Compounds the `chart.js` bloat from `05_flights`.
5. **`/flights` is the default landing for everyone** — user-specific landing per role would require `00_foundation` permission types + `02_auth.permissions`.

**Key Dependencies**: `react-router-dom` 7.

## 7. Caveats & Edge Cases

- **No `ErrorBoundary`** is the highest-impact gap; even one runtime null deref in any feature kills the app.
- **`/admin` open to any authenticated user** at the UI level (PRIORITY).
- **No lazy loading** — initial bundle is ~all of the SPA.

## 8. Dependency Graph

**Must be implemented after**: every other component (composition root).

**Can be implemented in parallel with**: nothing.

**Blocks**: nothing.

## Module Inventory

| Path | Module Doc |
|------|------------|
| `src/App.tsx` | `_docs/02_document/modules/src__App-and-main.md` |
| `src/main.tsx` | `_docs/02_document/modules/src__App-and-main.md` |