feat(19): immersive UI shell + contextual dialogue overlay#7
Merged
Conversation
- Introduce full-viewport ImmersiveShell with world/bottomHud/overlays slots - Add --shell-* and --status-* tokens per UI-SPEC V3 - Deprecate .chat-page 720px column constraints Co-authored-by: Cursor <cursoragent@cursor.com>
- Refactor ChatPage to use ImmersiveShell slots (world/bottomHud/overlays) - Add phaser-stage-fill testid and flex-fill CSS chain - Remove 1:1 aspect-ratio and 576px viewport max-width constraints Co-authored-by: Cursor <cursoragent@cursor.com>
- Add tickViewportVisibleNpcIds with pure rect overlap helpers and vitest - Hit-test NPC sprites on pointerup before grid move; publish registry key - Bridge viewportVisibleNpcIds and onNpcSpriteClick through PhaserGame Co-authored-by: Cursor <cursoragent@cursor.com>
- Viewport-filtered horizontal avatar chips in bottom HUD with Tomodachi styling - Wire selectNpc from map clicks and strip; remove NpcTabBar from active UI Co-authored-by: Cursor <cursoragent@cursor.com>
- Move composer and speak status into bottom DialogueBar without changing useNpcChat - Add overlay drawer for history, collective browse, and memory tabs - Replace thick chat-header with corner menu; world column is canvas-only Co-authored-by: Cursor <cursoragent@cursor.com>
Register Playwright smoke for immersive-shell testids and frozen UX regression via verify:phase13; keep npc-avatar-strip testid when viewport is empty. Co-authored-by: Cursor <cursoragent@cursor.com>
Wire Engaged DialogueOverlay (Esc/end, drawer, nearby fallback), fix desktop pointer pick for map NPC clicks, and refine chat bubble plus parchment shell styling. Gate debug overlays behind ?debug=1 so normal play matches UAT 9/9. Co-authored-by: Cursor <cursoragent@cursor.com>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (8)
📝 WalkthroughWalkthroughThis PR implements Phase 19's immersive dialogue shell UI. It refactors ChatPage to use a new ImmersiveShell wrapper, adds overlay UI components (CornerMenu, DialogueBar, DialogueOverlay, ShellDrawer, NpcAvatarStrip), introduces viewport-based NPC visibility tracking and pointer hit-testing, integrates NPC selection into game input, animates chat bubbles on hover/thinking, and updates styling and E2E verification. ChangesPhase 19 Immersive Shell Implementation
Sequence Diagram(s)sequenceDiagram
participant ChatPage
participant ImmersiveShell
participant CornerMenu
participant Phaser as PhaserGame
participant RoomScene as RoomScene.update
participant Input as roomSceneInput
participant Viewport as roomSceneViewport
participant NPC as entitySprites
ChatPage->>ImmersiveShell: render world + overlays
RoomScene->>Viewport: tickViewportVisibleNpcIds
Viewport-->>RoomScene: visibleNpcIds[]
RoomScene->>Phaser: registry.set(viewportVisibleNpcIds)
Phaser-->>ChatPage: onViewportVisibleNpcIdsChange
User->>Input: pointermove on NPC
Input->>Viewport: pickNpcAtWorldPoint
Viewport-->>Input: hoveredNpcId
Input->>NPC: refreshNpcChatBubbles(hovering)
NPC-->>User: show + animate bubble
User->>CornerMenu: click NPC tab
CornerMenu->>ChatPage: onSelectNpc(npcId)
ChatPage->>ChatPage: engageNpc(npcId)
ChatPage-->>User: DialogueOverlay engaged
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/ChatPage.tsx`:
- Around line 230-233: stripNpcs is always derived from viewportVisibleNpcIds so
when PhaserGame isn’t mounted (phaserOk is false) and
onViewportVisibleNpcIdsChange never runs, stripNpcs stays empty and CornerMenu
has no chips; update the useMemo that defines stripNpcs to use
viewportVisibleNpcIds only when phaserOk is true, otherwise fall back to a
nearby NPC set (nearbyNpcIds) if that state exists, and if not available fall
back to showing npcs (i.e., use npcs.filter by nearbyNpcIds when present, else
return npcs); refer to the stripNpcs constant, useMemo, viewportVisibleNpcIds,
phaserOk, onViewportVisibleNpcIdsChange and CornerMenu when making the change.
In `@apps/web/src/components/NpcAvatarStrip.tsx`:
- Around line 55-65: The NPC tabs are only selectable via onPointerDown and
inactive chips use tabIndex={-1}, blocking keyboard users; change the button in
NpcAvatarStrip to use onClick (replace onPointerDown) so activation works with
mouse/touch and keyboard, add an onKeyDown handler that calls onSelect(npc.id)
when Enter or Space is pressed, and implement simple roving-keyboard behavior in
that onKeyDown to handle ArrowLeft/ArrowRight by moving focus to the
previous/next element with role="tab" (or wrapping) so users can navigate tabs
with arrows while preserving aria-selected and tabIndex={isActive ? 0 : -1}.
In `@apps/web/src/components/ShellDrawer.tsx`:
- Around line 69-80: The tab buttons rendered from TABS need proper ARIA wiring:
give each button a stable id (e.g. `tab-${item.id}`) and add aria-controls
pointing to the corresponding panel id (e.g. `panel-${item.id}`), keep
role="tab" and aria-selected as-is; then update the drawer panel elements (the
elements currently labeled by `npc-avatar-*`) to have role="tabpanel",
id=`panel-${id}`, and aria-labelledby=`tab-${id}` and only expose the active
panel (matching the tab state) to screen readers (hide others with aria-hidden
or display:none). Update the CSS class names
`shell-drawer__tab`/`shell-drawer__panel` use and the onTabChange/tab state
logic as needed so IDs match the active item; ensure no changes are left that
reference `npc-avatar-*` as the tab label.
In `@apps/web/src/index.css`:
- Line 186: Remove the unnecessary quotes around the custom font name "Fraunces"
in the font-family declarations (e.g., change font-family: "Fraunces", "Noto
Serif SC", serif; to font-family: Fraunces, "Noto Serif SC", serif;) so the
identifier is unquoted to satisfy Stylelint's font-family-name-quotes rule; make
the same change at each occurrence where Fraunces is currently quoted.
- Around line 835-843: The visually-hidden rule uses the deprecated clip
property; replace the line "clip: rect(0, 0, 0, 0);" with a modern clip-path and
vendor prefix for compatibility (for example, add "clip-path: inset(0 0 0 0);"
and "-webkit-clip-path: inset(0 0 0 0);"), keeping the surrounding properties
(position, width, height, padding, margin, overflow, white-space, border) intact
so the element remains visually hidden but accessible.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 3e3a19db-a1a0-4a72-93b5-26ba48e009c3
⛔ Files ignored due to path filters (1)
apps/web/public/assets/sprites/ui-speech.pngis excluded by!**/*.png
📒 Files selected for processing (18)
apps/web/src/ChatPage.tsxapps/web/src/ImmersiveShell.tsxapps/web/src/components/CollectiveBrowsePanel.tsxapps/web/src/components/CornerMenu.tsxapps/web/src/components/DialogueBar.tsxapps/web/src/components/DialogueOverlay.tsxapps/web/src/components/NpcAvatarStrip.tsxapps/web/src/components/PhaserGame.tsxapps/web/src/components/ShellDrawer.tsxapps/web/src/game/RoomScene.tsapps/web/src/game/entitySprites.tsapps/web/src/game/roomSceneInput.tsapps/web/src/game/roomSceneSync.tsapps/web/src/game/roomSceneViewport.test.tsapps/web/src/game/roomSceneViewport.tsapps/web/src/index.csspackage.jsonscripts/verify-phase19.mjs
Restore NPC chips when Phaser is unavailable, add keyboard navigation for avatar strip and shell drawer tabs, and fix ARIA/CSS review nits. Co-authored-by: Cursor <cursoragent@cursor.com>
This was referenced Jun 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ImmersiveShell, wood-frameDialogueBar,ShellDrawer,CornerMenu, andNpcAvatarStripreplacing the old tab bar layout.DialogueOverlay) with engaged-mode composer, Esc to dismiss, and lighter parchment styling (GAP-19-UI-01 polish).pointer+ camera world coords; add chat bubble bob animation andverify:phase19layout gate.Test plan
pnpm --filter @aetherlife/web test(89/89)pnpm verify:phase19pnpm agent:verify(pre-push hook)?debug=1pnpm agent:verify --e2egolden flows (GF-01–03 if touching speak/move)Made with Cursor
Summary by CodeRabbit
New Features
Style
Tests
verify:phase19).