epic: agent styling — aurora background, softer radii, popular actions carousel - #256
Merged
Merged
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
Uses shaders.com <Shader><Aurora> instead of react-three/fiber — no GLSL, no render loop, WebGPU-first with WebGL2 fallback built in. ShapeShift brand palette (purple-500 / green-500 / purple-300) with slow drift. Gated behind useIsMobile (768px) and a WebGL capability check; falls back to a CSS radial-gradient on mobile or when WebGL is unavailable. Shader chunk is lazy-loaded so it doesn't hit the main bundle. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ttom Animation fix: shaders.com IntersectionObserver only calls startAnimation() on a not-visible → visible transition. Mounting with display:none then flipping to block on the next animation frame forces that transition. UI: header, suggestion strip, and composer get bg/80 backdrop-blur-md so the aurora bleeds through. Header and suggestion strip get a border to ground them visually against the background. Built with Claude
The shaders/react Shader component has a StrictMode bug: cleanup doesn't reset isInitializedRef, so the second (real) mount returns early from initializeRenderer() and the animation loop never starts. Switch to createShader() from shaders/js — a plain async function we call in a useEffect with proper cancel/destroy handling. Lifecycle is now fully under our control and StrictMode-safe. Also cranked props: intensity 90, speed 3.5, waviness 70, curtainCount 4. Built with Claude
…leak, WGSL id
- Add `three` as direct dep so Vite can resolve `three/tsl` (was only in
bun's internal cache, not on the node_modules resolution path)
- Add `optimizeDeps: { include: ['three'] }` to vite config so Vite
pre-bundles it before the dynamic `import('shaders/js')` fires
- Cache `isWebGLAvailable()` at module scope and immediately release the
test context via WEBGL_lose_context — previously leaked one context per
render, exhausting the browser limit and killing the aurora's context
- Pass explicit `id: 'aurora'` on the shader component so the library
doesn't auto-generate an ID containing a dot (Math.random()), which
produced invalid WGSL struct member names and crashed the GPU pipeline
- Add `.nx/` to .gitignore
Built with Claude
Replace static welcome suggestion buttons with a horizontally scrolling popular actions carousel that auto-advances, pauses during hover/focus/touch interaction, and supports mobile swipe navigation. Co-authored-by: Cursor <cursoragent@cursor.com>
Built with Claude
Observe the canvas's parent container and call shader.resize() explicitly so the WebGL aurora re-renders to full size after layout changes (e.g. the sidebar opening/closing). The shader library pins the canvas to fixed pixels and watches the frozen canvas for resizes, so CSS-driven changes never reached it. Also make the mobile CSSFallback more vibrant with layered radial gradients matching the Aurora palette, instead of a faint two-layer wash. Built with Claude
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (1)
Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review. 📝 WalkthroughWalkthroughThis PR updates the agentic-chat empty state with an Aurora background, a responsive popular-actions carousel, conditional translucent surfaces, and improved shader fallback handling. It also adds media-query support, shader dependencies, Vite optimization, and Nx cache exclusions. ChangesAurora-enhanced empty state with action carousel
Estimated code review effort: 3 (Moderate) | ~30 minutes Merge Risk: ⚪ Minimal · up to The empty-state styling, fallback rendering, and carousel changes have no unresolved material risk identified in the reviewed scope. Sequence Diagram(s)sequenceDiagram
participant User
participant Chat
participant AuroraBackground
participant ShaderInstance
participant PopularActionsCarousel
User->>Chat: Open an empty chat
Chat->>AuroraBackground: Render background
AuroraBackground->>ShaderInstance: Initialize shader when supported
ShaderInstance-->>AuroraBackground: Report ready or fail
AuroraBackground-->>Chat: Show canvas or CSS fallback
Chat->>PopularActionsCarousel: Render popular actions
PopularActionsCarousel-->>User: Show responsive action pages
User->>PopularActionsCarousel: Select an action
PopularActionsCarousel->>Chat: Submit selected action
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches 💡 1📝 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. A rabbit reads each line, 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: 1
🤖 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/agentic-chat/src/app/dashboard/page.tsx`:
- Line 16: The header's glass styling is always applied; change the JSX in
page.tsx so the <header> element conditionally includes the glass classes
("bg-background/80 backdrop-blur-md") only when the empty-chat state is true
(e.g., use the existing emptyChat / isEmptyChat boolean or selector used to
render the empty state); when not empty, render the header with the normal
non-glass classes (keep border, sizing, and layout classes intact) so the header
appearance matches active chat screens.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3a6f2d92-89cb-42cf-9e3f-ba34542218e8
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (10)
.gitignoreapps/agentic-chat/package.jsonapps/agentic-chat/src/app/dashboard/page.tsxapps/agentic-chat/src/components/AuroraBackground.tsxapps/agentic-chat/src/components/Chat.tsxapps/agentic-chat/src/components/Composer.tsxapps/agentic-chat/src/components/PopularActionsCarousel.tsxapps/agentic-chat/src/styles.cssapps/agentic-chat/vite.config.mjsapps/agentic-chat/vite.config.mts
0xApotheosis
previously requested changes
Sep 8, 2026
0xApotheosis
left a comment
0xApotheosis
left a comment
Member
There was a problem hiding this comment.
Three reproducible UI issues below. Build, lint, type-check and all 825 tests pass locally; live chat still needs API keys.
0xApotheosis
dismissed
their stale review
September 8, 2026 00:44
Addressed in 40c4445. Build, lint, type-check, 434 tests and browser regression checks pass, including live Venice chat.
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
2 participants
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
Rolls up the
epic/agent-stylingbranch into main. Three big changes are bundled here:1. Aurora shader background on the empty chat state (#250, #246)
shaders.com) behind the empty chat state on desktop, with a CSS radial-gradient fallback on mobile/no-WebGL.bg-background/80 backdrop-blur-mdglass treatment when the empty state is visible.threedep (added to deps +optimizeDeps), a WebGL context leak fromisWebGLAvailable()running every render (cached + released viaWEBGL_lose_context), and invalid WGSL identifiers fromMath.random()-generated node IDs (fixed by passing explicitid: 'aurora').2. Softer border radii (#254, #242, closes #242)
--radiusbumped from0.5rem→0.75rem.rounded-lg→rounded-2xlfor a softer, more modern feel.3. Popular actions carousel (#255, #247)
PopularActionsCarousel.tsxon the empty-chat state with auto-advance, dot navigation, and pause-on-interaction.POPULAR_ACTIONSorder inChat.tsxreshuffled so the carousel sequence reads more clearly.Test plan
--radius-driven components look correctly rounded across viewportsbun run lint,bun run type-check,bun testall passBuilt with Claude
Summary by CodeRabbit
Summary by CodeRabbit
New Features
UI Improvements