ashen-realms/.superpowers/sdd/2026-08-18-first-visible-vertical-slice/task-9-report.md

Task 9 Report: World UI

Reference inventory

• world-travel-screen.png: persistent top bar and left navigation, a dominant central map, labelled current/reachable nodes with a dotted path, dense right context, and a bottom-centred travel decision panel.
• hunting-screen.png: confirms the shared dark iron/bronze material treatment, restrained gold highlights, readable serif display hierarchy, and dense information without white cards or modern pills.
• combat-screen.png: confirms the same persistent shell, dark desaturated palette, thin ornate borders, and blue only as a controlled active-state accent.

The reference screenshots were inspected but are not shipped or referenced by the application.

Artwork and layout decision

• No ImageGen was used: the controller ruling makes the delivered user artwork final.
• /images/backgrounds/map_ashen_realm.png is the dominant WorldPage scene. Its wide path, city, watchtower, and ash-field composition provides a clearer interactive map than either location image.
• The server-delivered location paths are /images/backgrounds/Suedtor.png and /images/backgrounds/Aschestrasse.png; the ContextPanel renders the authoritative current-location image, so it changes only after server-confirmed arrival.
• This deliberately supersedes the older brief wording that asked for generated assets and API artwork as the main scene background. It preserves the binding controller ruling while retaining the server-provided artwork as context.

Delivered behavior

• WorldPageComponent loads WorldStore on init, renders a code-native SVG connection and two code-native location buttons, shows loading/error/retry states, and never advances location locally.
• LocationNodeComponent exposes current, selected, reachable, disabled, hover, and focus states with textual labels.
• TravelPanelComponent presents no-selection guidance, selected target/travel-time/danger with Reise beginnen, and an arrivesAt-derived travelling countdown with disabled action.
• ContextPanelComponent renders the current/selected location, description, recommended level, safe status, hunting status, and server artwork.
• Seed paths now match the delivered assets and are covered by the API seed test.

Verification

• RED confirmed: four new WorldPage contracts failed against the empty placeholder; seed artwork-path assertion failed against the former WebP paths.
• Focused WorldPage test: 4/4 pass.
• Full web tests: 18/18 pass.
• Affected API seed tests: 2/2 pass.
• npm run build:web and npm run build:api pass.

Remaining concern

Rendered browser fidelity QA is intentionally deferred to Task 11, as instructed. The Browser plugin is unavailable and no Playwright fallback was started for this task.