# Task 8 report: reusable Angular application shell

## Scope delivered

- Replaced the Angular scaffold with a route-hosting root component and a reusable dark-fantasy shell.
- Added focused standalone components for the app shell, store-driven top bar, side navigation, footer, and context-panel frame.
- Added requested design tokens, spacing, motion, elevation, global reset, responsive shell grid, and reduced-motion protection.
- Configured `/` and fallback routing to `/world`; the route lazy-loads a deliberately scene-free `WorldPageComponent` placeholder so Task 9 can add the world composition without changing the route contract.
- Made Karte the only enabled active navigation entry. Jagd, Quests, Inventar, and Charakter are disabled buttons with accessible explanatory labels. Shop is not rendered.
- Top-bar character identity, level, and hit points are rendered only from `WorldStore.character`; it has no hardcoded character statistics.

## Preflight and asset evidence

- Re-read the Task 8 brief, visible-slice implementation plan, progress ledger, prior task reports, and the full user-provided visual asset style guide.
- Visually inspected `combat-screen.png`, `hunting-screen.png`, and `world-travel-screen.png` before editing.
- Visually inspected the relevant user HUD assets before use. The shell uses only:
  - `apps/web/public/images/hud/CharacterIcon.png`
  - `apps/web/public/images/hud/MapsIcon.png`
  - `apps/web/public/images/hud/HuntIcon.png`
  - `apps/web/public/images/hud/QuestsIcon.png`
  - `apps/web/public/images/hud/InventoryIcon.png`

## TDD evidence

### RED

`npm test --workspace=@ashen-realms/web -- --watch=false` failed as intended before production work: the new shell specification expected `app-top-bar`, but the scaffold only contained a router outlet. The existing two test files remained green (11 passing tests).

### GREEN

`npm test --workspace=@ashen-realms/web -- --watch=false` passed with 3 test files and 12 tests. The added shell test asserts top bar, side navigation, semantic main content, footer, enabled active Karte, disabled future destinations, and Shop absence.

## Final verification

- `npm test --workspace=@ashen-realms/web -- --watch=false`: 3 files and 12 tests passing.
- `npm run build:web`: production Angular build passed and emits a lazy `world-page-component` chunk.
- `npm exec --workspace=@ashen-realms/web -- prettier --check ...`: all Task 8 files formatted.
- `git diff --check`: no whitespace errors.

## Visual QA limitation

The Browser plugin is not available in this session. The repository has no installed Playwright package, and a non-mutating `npm exec --workspace=@ashen-realms/web -- playwright --version` check could not resolve a local runner and timed out. No browser dependency was added outside task scope. Rendered browser verification remains for Task 11, which owns final browser workflow and fidelity captures.

## Intentional limits

- The world route placeholder contains no scene, nodes, API loading, or travel panel; Task 9 owns those surfaces.
- The context panel is only a reusable framed shell until Task 9 supplies world data.