epic: agent styling — aurora background, softer radii, popular actions carousel#256
Open
twblack88 wants to merge 10 commits into
Open
epic: agent styling — aurora background, softer radii, popular actions carousel#256twblack88 wants to merge 10 commits into
twblack88 wants to merge 10 commits into
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.
|
📝 WalkthroughWalkthroughThis PR delivers an Aurora-enhanced welcome experience for the agentic-chat app. It introduces a WebGL-based animated background with CSS fallback, a carousel of popular actions, integrates both into the empty-state chat UI, softens border radii across the app, and wires in the necessary dependencies and build configuration. ChangesAurora-enhanced empty state with action carousel
Sequence Diagram(s)sequenceDiagram
participant User
participant Chat as Chat Component
participant Aurora as AuroraBackground
participant Carousel as PopularActionsCarousel
participant Shader as Aurora Shader
User->>Chat: Open empty chat
Chat->>Aurora: Mount with mobile/WebGL check
Aurora->>Shader: Initialize shader on canvas
Shader-->>Aurora: Shader ready or init fails
alt Shader initialized
Aurora-->>Chat: Render WebGL canvas
else Init fails or no WebGL
Aurora-->>Chat: Render CSS fallback gradient
end
Chat->>Carousel: Render with POPULAR_ACTIONS
Carousel-->>Chat: Auto-advance every 5s, pause on hover/touch
User->>Carousel: Click action button
Carousel->>Chat: onActionClick callback
Chat->>User: Submit action, chat begins
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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: 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
| {isSidebarLeftEnabled && <SidebarLeft />} | ||
| <SidebarInset className="h-dvh flex flex-col"> | ||
| <header className="sticky top-0 h-12 flex-shrink-0 flex gap-2 bg-background z-10 px-2 items-center"> | ||
| <header className="sticky top-0 h-12 flex-shrink-0 flex gap-2 bg-background/80 backdrop-blur-md border-b border-border z-10 px-2 items-center"> |
There was a problem hiding this comment.
Gate glass header styles by empty-chat state.
The new glass treatment is always on. Based on the PR objective, this should only apply when the empty state is visible; otherwise the header styling will be inconsistent during active chats.
Suggested direction
-<header className="sticky top-0 h-12 flex-shrink-0 flex gap-2 bg-background/80 backdrop-blur-md border-b border-border z-10 px-2 items-center">
+<header
+ className={cn(
+ "sticky top-0 h-12 flex-shrink-0 flex gap-2 z-10 px-2 items-center",
+ isEmptyChat
+ ? "bg-background/80 backdrop-blur-md border-b border-border"
+ : "bg-background"
+ )}
+>🤖 Prompt for 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.
In `@apps/agentic-chat/src/app/dashboard/page.tsx` at 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.
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
Rolls up the
epic/agent-stylingbranch into main. Three big changes are bundled here:1. Aurora shader background on the empty chat state (#250, SS-5656)
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, SS-5650, closes #242)
--radiusbumped from0.5rem→0.75rem.rounded-lg→rounded-2xlfor a softer, more modern feel.3. Popular actions carousel (#255, SS-5653)
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
New Features
UI/Style Updates