> For the complete documentation index, see [llms.txt](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_37/session_05_g6_ui_cinematics.md). # Session 05: G6 UI Cinematics **Session ID**: `phase37-session05-g6-ui-cinematics` **Status**: Not Started **Estimated Tasks**: \~12-25 **Estimated Duration**: 2-4 hours *** ## Objective Add generated UI and cinematic visuals only where they improve domain-specific readability over standard controls. *** ## Scope ### In Scope (MVP) * Select G6 title-card panels, result badges, run-stat icons, class/relic/wallet upgrade icons, shard/save-slot icons, and domain-specific settings icons. * Wire appropriate icons into cinematic effects and React UI surfaces. * Keep actual text in Pixi or HTML rather than baked into images. * Update focused view tests, docs, and intentional UI snapshots. * Verify no layout shift, text overlap, or unclear control replacement appears. ### Out of Scope * Replacing clear Lucide/native controls with less familiar themed icons. * Adding baked text, letters, or readable numbers to image frames. * Broad route redesign or marketing-style UI changes. *** ## Prerequisites * [ ] Sessions 01-04 completed or their atlas/frame contracts are stable. * [ ] G6 source and alpha derivative are available under the generated visual asset directory. * [ ] Relevant AI Rogue React surfaces are passing before edits. *** ## Source Inputs | Asset | Path | | ---------------- | ------------------------------------------------------------------------------------------------------ | | Source sheet | `docs/ongoing-projects/generated/ai-rogue-visual-audio-assets/source/ai-rogue-cinematic-ui-source.png` | | Alpha derivative | `docs/ongoing-projects/generated/ai-rogue-visual-audio-assets/alpha/ai-rogue-cinematic-ui-alpha.png` | | Crop manifest | `docs/ongoing-projects/generated/ai-rogue-visual-audio-assets/crop-manifest.json` | Prefer standard UI icons for generic controls when clearer. *** ## Detailed Work Use generated UI art only where it improves domain-specific readability: * Sector title-card panels. * Result badges and run-stat icons. * Class, relic, wallet upgrade, shard claim, and save-slot state icons. * Domain-specific audio/control/settings icons where they remain clearer than standard controls. * Keep actual text in Pixi/HTML, not baked into images. * Avoid one-off themed replacements that reduce accessibility or familiarity. *** ## Likely Code Touchpoints * `src/extensions/ai-rogue/runtime/effects-cinematics.ts` * `src/extensions/ai-rogue/views/reward-icon.tsx` * `src/extensions/ai-rogue/views/play-view.tsx` * `src/extensions/ai-rogue/views/ledger-view.tsx` * `src/extensions/ai-rogue/views/loadout-view.tsx` * `src/extensions/ai-rogue/views/settings-view.tsx` *** ## Required Validation * `scripts/extensions/ai-rogue/pack-visual-assets.py` * `bun run typecheck` * `bash scripts/check-asset-sizes.sh` * Focused view tests and intentional UI snapshots for changed surfaces. * `bunx playwright test tests/e2e/ai-rogue-runtime.spec.ts` * `bunx playwright test tests/e2e/ai-rogue-mobile.spec.ts` * Browser evidence for changed UI/cinematic surfaces without layout shift, text overlap, or unclear control replacement. *** ## Deliverables 1. G6 crop manifest entries and refreshed UI/gameplay atlas outputs as needed. 2. Domain-specific visual mappings in cinematic effects and relevant views. 3. Focused UI tests and visual asset documentation updates. 4. Browser evidence for changed UI/cinematic surfaces. *** ## Success Criteria * [ ] React surfaces render the new icons without layout shift or text overlap. * [ ] No baked text appears in committed UI image frames. * [ ] Focused UI tests and visual asset validation pass. * [ ] The product outcome is proven end to end: UI/cinematic visuals are visible in real AI Rogue surfaces, improve domain readability, and preserve familiar recovery/control paths. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_37/session_05_g6_ui_cinematics.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.