[UI Overhaul] HUD/menu refactor: inventory-triggered music popup, dedicated LLM settings menu, mini status meters

[putersdcat]

Why this issue exists

Current HUD/menu composition feels fragmented despite good progress on music controls.

Directives to preserve

• Music player should not remain permanently docked; it should appear as quick controls when opened from inventory.
• LLM settings should move into a dedicated settings menu reachable from main menu.
• When right-side menu/HUD is tucked away, status systems should still show compact mini views.
• Overall HUD style/feel needs artistic + stylistic overhaul.

Scope

• Refactor music UI into inventory-invoked popup/overlay control panel.
• Create dedicated LLM settings screen under main menu settings hierarchy.
• Implement compact/mini status meter strip for collapsed HUD mode.
• Establish updated visual style pass for HUD panels, spacing, hierarchy, contrast.
• Preserve touch friendliness and desktop parity.

Acceptance criteria

• Music controls are accessible on demand via inventory and not always docked.
• LLM options are discoverable in a dedicated main-menu settings section.
• Collapsed HUD still surfaces key survival/status signals in mini form.
• New style pass improves readability/consistency across menu states.
• npx tsc --noEmit and Playwright tests pass.

References

• src/ui.ts
• src/index.html
• src/main.ts
• src/llm.ts

[putersdcat]

🎯 #138 Implementation Complete — HUD/Menu Refactor Phase 1-3

Changes (commit 1c5a84f)

✅ Phase 1: Music Player → Flyout Popup

• Moved cassette deck from permanently-docked sidebar section to floating popup
• New 🎵 button in HUD bar toggles the popup open/close
• × close button in popup header
• Popup positioned near bottom-right, doesn't obscure gameplay

✅ Phase 2: LLM Settings → Options Overlay Only

• Removed LLM Config section from sidebar entirely
• LLM settings (Mode, URL) remain in Options overlay
• Added API Key field (password input) to Options overlay LLM section
• Added Apply button to Options LLM section
• Fixed broken LLM sync in showOptionsOverlay() (was referencing non-existent element IDs llmModeSelect/llmUrlInput)
• Now properly reads saved settings via loadLlmSettings()

✅ Phase 3: Mini Status Meters

• New mini status strip (⚡💧🧼) appears when sidebar is collapsed
• Shows energy, hydration, cleanliness values with colored bars
• Hidden when sidebar is expanded (no duplication)
• Values sync from game state via syncStatusBars()

Test Results

Suite	Result
hud-refactor-138 (NEW)	✅ 12/12 pass
cassette-ui (updated)	✅ 4/4 pass
alpha-qol	✅ 15/15 pass
fog-toggle	✅ 7/7 pass
tsc --noEmit	✅ clean

Files Modified

• src/index.html — Music popup HTML/CSS, mini status strip, sidebar cleanup, Options LLM section update
• src/ui.ts — Music popup toggle wiring, mini meter sync, LLM config panel update
• src/main.ts — Fixed showOptionsOverlay() LLM sync
• tests/audio/cassette-ui.spec.ts — Updated for popup (open popup before checking elements)
• tests/audio/music.spec.ts — Updated for popup (open before click)
• tests/ui/hud-refactor-138.spec.ts — NEW 12-test E2E suite

Branch: feature/142-cat-npc-behaviors-and-131-survival-ux (PR #146)