feat(gaming_app): feedback form UI widget — themed bug/feature submission with screenshot and session log attachment

[wcmchenry3-stack]

In plain English

Add a feedback widget to gaming_app that matches the game's visual theme. Players can report bugs or request features without leaving the app, and session logs are attached automatically so developers have full context.

User story

As a gaming_app player, I want to submit a bug report or feature request from within the game so that I can give feedback without switching to a separate tool.

Context

This is the gaming_app-side UI for the feedback system. The widget POSTs to the shared Cloudflare feedback worker (#109). It must use gaming_app's design tokens and theme — it should look and feel like part of the game, not a generic form.

Part of: #46
Depends on: #109 (worker must exist before integration)

Acceptance criteria

• Feedback button/entry point accessible from the main in-game menu (exact placement TBD with design)
• Form fields: Title (required), Description (required), Type selector: Bug Report | Feature Request
• Screenshot attachment: user can capture current screen or upload from device (optional)
• Session log attachment: last N minutes of client-side logs attached automatically on submit (user-visible disclosure: "Your session logs will be included")
• Submit POSTs to worker URL configured via env var VITE_FEEDBACK_WORKER_URL (or equivalent build-time env var for gaming_app's stack)
• Success state: confirmation message with link to the created GitHub issue
• Error states handled: rate limited (friendly message + retry timer), content rejected (generic "submission couldn't be accepted" — do not expose Claude classification reason), network error (retry option)
• Widget fully keyboard-navigable (WCAG 2.1 AA — tab order, focus management on open/close)
• All UI copy goes through i18next (no hardcoded strings)
• Widget uses gaming_app design tokens for colors, typography, spacing — no hardcoded CSS values
• Widget does not render in production builds if VITE_FEEDBACK_WORKER_URL is unset (graceful no-op)

Technical notes

• Worker payload shape: { appId: "gaming_app", title, description, type: "bug"|"feature", screenshotBase64?, sessionLogs? }
• Session log capture: hook into gaming_app's existing logging utility (investigate actual logger in gaming_app repo before implementing)
• Screenshot: use html2canvas or the browser's Screen Capture API — evaluate what's already in gaming_app's dependency tree
• i18n namespace: feedback — add keys to gaming_app's locale files
• Design token contract documented in theme contract story (#TBD — see child story 6 of epic epic: in-app feedback & suggestion system #46)
• Component location: src/components/FeedbackWidget/ (follow gaming_app's existing component conventions)

Test coverage

Unit tests

• Form validation: submit blocked when title or description empty
• Type selector: correct type value sent in payload
• Session log attachment: logs present in payload on submit
• Error state: rate-limit response renders friendly message with retry timer
• Error state: content-rejected response renders generic rejection message

E2E tests

• Happy path: fill form → submit → success confirmation with issue link displayed
• Screenshot attachment: attach screenshot → submit → payload includes base64 image

Performance

• Widget JS chunk < 50 KB gzipped (avoid bloating the game bundle)

Regression

• Widget opens and closes without breaking underlying game UI (focus trap, scroll lock)

Documentation to update

• gaming_app CLAUDE.md or README: document VITE_FEEDBACK_WORKER_URL env var requirement
• Add feedback i18n namespace to gaming_app's locale inventory

Unknowns / needs investigation

• Confirm gaming_app's build tool (Vite assumed — verify) and env var naming convention
• Confirm gaming_app's existing logging utility API for session log capture
• Confirm design token naming convention in gaming_app (needed before implementing theme contract)

Out of scope

• Localization suggestion form variant (separate story #localization-story)
• Admin-side review of submitted feedback
• In-app display of previously submitted feedback history

Dependencies

• Part of: epic: in-app feedback & suggestion system #46
• Blocked by: feat: Cloudflare feedback worker — core POST endpoint, rate limiting, Claude enrichment, GitHub issue creation #109 (worker core must be deployable before UI integration)
• Blocks: none

Definition of done

• All acceptance criteria met
• Test coverage added per above
• Documentation updated
• CI green (lint, type check, tests)
• PR reviewed and merged to dev