test: v2.4.0 pre-release manual testing

[hessius]

Summary

Manual testing checklist for v2.4.0 features before proceeding to Capacitor (#253) and OEM integration (#326). All automated tests pass (416 frontend, 900 backend). This covers new v2.4 features plus regression of existing functionality.

Prerequisites

# Build and run Docker container with latest version/2.4.0
docker compose -f docker-compose.yml -f docker-compose.dev.yml build --no-cache
docker rm -f meticai 2>/dev/null
docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d
docker exec meticai curl -sf http://localhost:3550/health

---

Part 1: New v2.4 Features

1.1 Mobile Home Screen Layout (#287, PR #319)

• On mobile viewport (≤768px), home screen shows compact header + 2×3 button grid
• All 6 navigation buttons visible without scrolling on typical phone screen
• Profile count displays in compact header
• Buttons are tap-friendly size (≥44px touch targets)
• Layout reverts to desktop style on wider viewports
• Dark mode styling correct on mobile layout

1.2 Select Gemini Model (#180, PR #320)

• Settings → new "Gemini Model" dropdown appears when AI features enabled
• Dropdown lists available models (gemini-2.0-flash, gemini-2.5-pro, etc.)
• Selecting a model persists across page reload
• Profile generation uses the selected model (verify in network tab or server logs)
• Shot analysis uses the selected model
• Dial-in recommendations use the selected model
• Invalid/empty model selection falls back to default gracefully
• i18n: model selector label translated in all 6 locales (en, sv, de, es, fr, it)

1.3 Platform Themes (#288 + #291, PR #321 + #325)

iOS Theme

• Settings → Platform Theme → select "iOS"
• Font changes to SF Pro / system font
• Cards show glassmorphic effect (blur + transparency)
• Buttons show press-down animation (scale 0.97) on tap/click
• Switches turn Apple green (#34c759) when checked
• Borders become thinner (0.5px hairline style)
• Selection highlight uses iOS blue
• Theme persists on reload
• Dark mode: cards use dark glassmorphic background

Material You Theme

• Settings → Platform Theme → select "Material You"
• Font changes to Roboto / Google Sans
• Buttons get larger border-radius (pill-shaped, 20px)
• Buttons show ripple effect on hover/click (subtle overlay)
• Cards show elevation shadow that increases on hover
• Switches turn teal (#006b5e light / #4ddbc4 dark) when checked
• Select dropdowns get rounded corners (12px)
• Inputs/textareas get rounded corners (12px)
• Theme persists on reload
• Dark mode: shadows adjust to darker elevation style

Auto Detection

• Setting "Auto" on an iOS device/simulator → iOS theme applied
• Setting "Auto" on an Android device/emulator → Material theme applied
• Setting "Auto" on desktop → no platform theme (default styling)

None

• Setting "None" → all platform-specific styling removed, default theme restored

1.4 Import from URL (#96, PR #322)

• Profile Catalogue → Import → "From URL" option available
• Paste a valid JSON profile URL → profile preview shown
• Confirm → profile saved to catalogue
• Invalid URL → clear error message
• Non-JSON URL → appropriate error (not a profile)
• Very large file → size limit enforced with error message
• Duplicate profile name → handled gracefully (rename or skip)
• i18n: all import UI strings translated in 6 locales

1.5 CSS Cascade Fix (PR #325)

• Platform themes visually override default Tailwind styling (not just subtle)
• Material button border-radius clearly different from default
• iOS glassmorphic cards clearly different from default opaque cards
• No visual regressions on default theme (no platform theme selected)

1.6 Dependency Updates (PR #323)

• No visual regressions from package updates
• Charts (recharts) still render correctly in shot history
• Forms (react-hook-form) still validate correctly in dial-in wizard
• Framer-motion animations still smooth (page transitions, accordions)
• i18n still loads all locales correctly

---

Part 2: Regression Testing (Existing Features)

Follow the full browser testing protocol from .github/skills/browser-testing.md:

2.1 Start Screen

• Page loads without console errors
• Version banner shows correct version
• Profile count correct
• All navigation buttons visible
• Light/dark mode toggle works and persists

2.2 Profile Catalogue

• Loads profiles with correct metadata
• Download JSON works
• Delete profile works
• Filter by tags works

2.3 Profile Detail

• Profile opens with all sections (Description, Preparation, Why This Works, Special Notes)
• Edit profile (pencil icon) works
• Notes section works
• Export as Image/JSON works

2.4 Shot History & Analysis

• Shot list loads
• Shot detail: Replay tab with graph
• Shot detail: Compare tab
• Shot detail: Analyze tab with AI analysis
• Star rating and notes persist

2.5 Dial-In Guide

• All 7 steps navigate correctly
• Taste Compass drag works
• Descriptor chips selectable
• Recommendations generate (AI or rule-based fallback)
• Progress bar updates at each step

2.6 Settings

• Language selector works (all 6 locales)
• Gemini API key field works
• AI feature toggles work
• Machine IP input works

2.7 Accessibility

• Skip navigation links present
• ARIA labels on icon-only buttons
• No keyboard traps

2.8 Cross-Cutting

• No unhandled JS errors in console
• All pages load within 5 seconds
• Navigation between all views works
• Toast notifications appear for actions

---

Part 3: Multi-Mode Testing (if machine available)

3.1 Direct Mode (Machine PWA)

• App loads on machine at port 8080
• Machine telemetry (status, sensors) displays in real-time
• Profile list loads from machine
• AI features work with client-side Gemini (requires API key in settings)
• Feature flags correctly hide server-only features

3.2 Server Mode (Docker)

• App loads via MeticAI server at port 3550
• Machine connection via configured IP works
• Profile sync between server and machine works
• AI features work via server-side proxy

---

Results Template

| # | Area | Status | Notes |
|---|------|--------|-------|
| 1.1 | Mobile Layout | | |
| 1.2 | Gemini Model Select | | |
| 1.3a | iOS Theme | | |
| 1.3b | Material Theme | | |
| 1.3c | Auto Detection | | |
| 1.4 | Import from URL | | |
| 1.5 | CSS Cascade Fix | | |
| 1.6 | Dependency Updates | | |
| 2.1 | Start Screen | | |
| 2.2 | Profile Catalogue | | |
| 2.3 | Profile Detail | | |
| 2.4 | Shot History | | |
| 2.5 | Dial-In Guide | | |
| 2.6 | Settings | | |
| 2.7 | Accessibility | | |
| 2.8 | Cross-Cutting | | |

Exit Criteria

All Part 1 and Part 2 items must PASS before proceeding to:

• iOS app: native client via Capacitor + MachineDirectAdapter #253 — Capacitor app scaffolding
• feat: integrate OEM TypeScript packages into DirectAdapter #326 — OEM TypeScript package integration

Part 3 is recommended but not blocking if no machine hardware is available.

References

• Browser testing protocol: .github/skills/browser-testing.md
• Coordination: v2.4 Release Coordination — Three-Pronged Deployment #317
• PRs tested: feat: Machine-Hosted PWA — Direct Mode without MeticAI backend #316, feat: mobile home screen above-the-fold layout (#287) #319, feat: select Gemini model in settings (#180) #320, feat: iOS and Material You platform themes (#288, #291) #321, feat: import profiles from URL (#96) #322, chore(deps): update all frontend dependencies #323, fix(css): reorder platform theme imports after Tailwind #325