feat(studio): add team upgrade interstitial plans page (UI-only) #2535
Conversation
|
Finished running flow.
|
||||||||||||||||||
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis PR introduces a new team upgrade interstitial flow with supporting UI components. It adds page routing structure, a tabbed pricing display with Personal and Business plan options, and new reusable glass-styled button and card components. The team settings page is updated to navigate to the new upgrade flow via client-side routing instead of invoking a server action. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 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 |
PR Compliance Guide 🔍Below is a summary of compliance checks for this PR:
Compliance status legend🟢 - Fully Compliant🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label |
|||||||||||||||||||||||
There was a problem hiding this comment.
Pull request overview
This PR adds a UI-only team upgrade interstitial page at /settings/team/upgrade with a standalone layout and implements plan cards in a glass style. It refactors GlassButton and GlassCard components by moving them from the Studio app into the shared @giselle-internal/ui package, updating all imports across the codebase. Additionally, plan icons are updated to use lucide's Orbit for Free, a custom member icon for Team, and the previous Free glyph for Enterprise.
- Refactors glass components into shared UI package
- Implements upgrade interstitial with Personal/Business tabs and plan cards
- Updates plan icons with new variants
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| internal-packages/ui/package.json | Adds exports for glass-button and glass-card components |
| internal-packages/ui/components/glass-card.tsx | Creates new GlassCard component with glass morphism styling |
| internal-packages/ui/components/glass-button.tsx | Creates new GlassButton component with multiple variants (default, muted, comingSoon, currentPlan) |
| apps/studio.giselles.ai/packages/components/icons/willi-icon.tsx | Adds WilliIcon and WilliDuoIcon components |
| apps/studio.giselles.ai/packages/components/icons/ui.tsx | Adds OSS, Free, Pro, and Team plan icons |
| apps/studio.giselles.ai/packages/components/icons/member-icon.tsx | Adds MemberIcon component for Team plan |
| apps/studio.giselles.ai/components/ui/gradient-button.tsx | Creates new GradientButton component for primary/disabled states |
| apps/studio.giselles.ai/components/ui/glass-button.tsx | Removes old GlassButton implementation (moved to shared package) |
| apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsx | Implements main upgrade interstitial UI with tabs and plan cards |
| apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsx | Creates PricingCard component for displaying plan details |
| apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsx | Implements CircleIcon component for plan icons |
| apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsx | Page component for upgrade route |
| apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsx | Standalone layout without sidebar/header |
| apps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsx | Updates import to use GlassButton from shared package |
| apps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsx | Updates import to use GlassButton from shared package |
| apps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx | Updates import to use GlassButton from shared package |
| apps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsx | Updates import to use GlassButton from shared package |
| apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx | Updates import to use GlassButton from shared package |
| apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsx | Updates import to use GlassButton from shared package |
| apps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsx | Updates import to use GlassButton from shared package |
| apps/studio.giselles.ai/app/(main)/settings/account/page.tsx | Updates import to use GlassButton from shared package |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,129 @@ | |||
| import clsx from "clsx/lite"; | |||
| import { Slot } from "radix-ui"; | |||
There was a problem hiding this comment.
The import should be from '@radix-ui/react-slot' instead of from 'radix-ui'. The package name is incorrect.
| disabled, | ||
| ...props | ||
| }: GlassButtonProps) { | ||
| const Comp = asChild ? Slot.Root : "button"; |
There was a problem hiding this comment.
When using the correct import, this should be just Slot not Slot.Root. The Slot component is exported directly from '@radix-ui/react-slot'.
| const Comp = asChild ? Slot.Root : "button"; | |
| const Comp = asChild ? Slot : "button"; |
| )} | ||
|
|
||
| {/* Content */} | ||
| <Slot.Slottable> |
There was a problem hiding this comment.
When using the correct import, this should be just Slottable which needs to be imported separately from '@radix-ui/react-slot'. Slot.Slottable is not the correct API.
| isCurrentPlan?: boolean; | ||
| }) { | ||
| const cardClassName = [ | ||
| "relative flex flex-col overflow-hidden rounded-[20px] border border-white/10 pb-6 transition-all duration-300 w-full max-w-[330px] backdrop-blur-[40px] bg-white/5 shadow-[0_8px_32px_0_rgba(31,38,135,0.37),inset_0_1px_0_rgba(255,255,255,0.15)] before:content-[''] before:absolute before:inset-0 before:rounded-[20px] before:border before:border-white/15 before:bg-gradient-to-br before:from-white/10 before:to-transparent before:pointer-events-none h-[550px] sm:h-[600px] lg:h-[625px]", |
There was a problem hiding this comment.
This is an extremely long className string that is difficult to read and maintain. Consider extracting the class names into a clsx() call with logical groupings or using the cn() utility with multiple arguments.
PR Code Suggestions ✨Explore these optional code suggestions:
|
||||||||||||
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (8)
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsx (2)
13-22: Consider refactoring nested ternary for readability.The nested ternary works but could be more maintainable as an object lookup or switch statement.
🔎 Suggested refactor using object lookup
- const glyph = - variant === "enterprise" ? ( - <FreeIcon /> - ) : variant === "team" ? ( - <MemberIcon /> - ) : variant === "pro" ? ( - <ProIcon /> - ) : ( - <Orbit className="h-6 w-6" /> - ); + const glyphMap = { + enterprise: <FreeIcon />, + team: <MemberIcon />, + pro: <ProIcon />, + free: <Orbit className="h-6 w-6" />, + }; + const glyph = glyphMap[variant];
25-25: Replace hardcoded color values with design tokens.The className uses hardcoded hex colors (
#ffffff33,#dddddd99, etc.) that should be replaced with CSS variables or Tailwind design tokens for consistency and maintainability.Consider using Tailwind opacity utilities (e.g.,
bg-white/20,border-gray-200/60) or defining these colors in your design system.apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsx (2)
43-51: Move inline styles to CSS module or Tailwind classes.The inline
textShadowstyle (lines 45-48) should be extracted to a CSS class or Tailwind utility for maintainability and reusability.🔎 Suggested approaches
Option 1: Tailwind CSS custom utility (add to tailwind.config):
theme: { extend: { textShadow: { 'blue-glow': '0 0 20px rgb(0, 135, 246), 0 0 40px rgb(0, 135, 246), 0 0 60px rgb(0, 135, 246)', } } }Then use:
className="text-shadow-blue-glow"Option 2: CSS module:
.glowTitle { text-shadow: rgb(0, 135, 246) 0px 0px 20px, rgb(0, 135, 246) 0px 0px 40px, rgb(0, 135, 246) 0px 0px 60px; }
239-244: Use clsx for className composition.Array.join for className composition is less idiomatic than using the
clsxutility, which is already available in the project.🔎 Suggested refactor
+import clsx from "clsx"; <button key={option.id} type="button" onClick={() => onChange(option.id)} - className={[ - "rounded-full px-5 py-2 text-[13px] font-semibold transition-colors", - isActive - ? "bg-white/90 text-black shadow-sm" - : "text-white/70 hover:text-white", - ].join(" ")} + className={clsx( + "rounded-full px-5 py-2 text-[13px] font-semibold transition-colors", + isActive + ? "bg-white/90 text-black shadow-sm" + : "text-white/70 hover:text-white" + )} >apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsx (2)
83-93: Consider using a stable key instead of feature text.Using
featurestring directly as thekeywill cause issues if two features have identical text. Consider using the index as a fallback or ensuring feature uniqueness is enforced upstream.🔎 Safer key approach
- {features.map((feature) => ( + {features.map((feature, index) => ( <li - key={feature} + key={`feature-${index}`} className="flex items-start gap-x-2 sm:gap-x-3 text-white-100 font-sans font-normal text-xs sm:text-sm leading-3 sm:leading-4" >
49-49: Clarify the purpose of this empty div.This div renders no content and its purpose isn't clear. If it's a spacer or layout element, consider adding a brief comment explaining its role, or remove it if unnecessary.
internal-packages/ui/components/glass-button.tsx (2)
46-70: Consider refactoring nested ternaries to an object lookup.The 4-level nested ternary is difficult to read and maintain. An object lookup pattern would be cleaner and more consistent with
variantClassNameandsizeClassName.🔎 Proposed refactor using object lookup
- const styles: React.CSSProperties = - variant === "comingSoon" - ? { - boxShadow: "0 10px 30px rgba(0, 0, 0, 0.35)", - background: "rgba(255, 255, 255, 0.05)", - } - : variant === "currentPlan" - ? { - boxShadow: - "0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12)", - background: "rgba(255, 255, 255, 0.04)", - } - : variant === "muted" - ? { - boxShadow: - "0 8px 20px rgba(255, 255, 255, 0.05), 0 3px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08)", - background: - "linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.06) 50%, rgba(0,0,0,0.18) 100%)", - } - : { - boxShadow: - "0 8px 20px rgba(107, 143, 240, 0.2), 0 3px 10px rgba(107, 143, 240, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08)", - background: - "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(107,143,240,0.15) 50%, rgba(107,143,240,0.25) 100%)", - }; + const variantStyles: Record<GlassButtonVariant, React.CSSProperties> = { + comingSoon: { + boxShadow: "0 10px 30px rgba(0, 0, 0, 0.35)", + background: "rgba(255, 255, 255, 0.05)", + }, + currentPlan: { + boxShadow: + "0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12)", + background: "rgba(255, 255, 255, 0.04)", + }, + muted: { + boxShadow: + "0 8px 20px rgba(255, 255, 255, 0.05), 0 3px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08)", + background: + "linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.06) 50%, rgba(0,0,0,0.18) 100%)", + }, + default: { + boxShadow: + "0 8px 20px rgba(107, 143, 240, 0.2), 0 3px 10px rgba(107, 143, 240, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08)", + background: + "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(107,143,240,0.15) 50%, rgba(107,143,240,0.25) 100%)", + }, + }; + + const styles = variantStyles[variant];
84-103: Same refactor opportunity for glow styling.The nested ternaries for
backgroundColorandopacitycould similarly use an object lookup for consistency and readability.🔎 Proposed refactor
+ const glowConfig: Record<GlassButtonVariant, { color: string; opacity: number }> = { + comingSoon: { color: "#FFFFFF", opacity: 0.015 }, + currentPlan: { color: "#FFFFFF", opacity: 0.03 }, + muted: { color: "#FFFFFF", opacity: 0.05 }, + default: { color: "#6B8FF0", opacity: 0.08 }, + }; {/* Outer glow */} <div className="absolute inset-0 rounded-lg blur-[2px] -z-10" style={{ - backgroundColor: - variant === "comingSoon" || variant === "currentPlan" - ? "#FFFFFF" - : variant === "muted" - ? "#FFFFFF" - : "#6B8FF0", - opacity: - variant === "comingSoon" - ? 0.015 - : variant === "currentPlan" - ? 0.03 - : variant === "muted" - ? 0.05 - : 0.08, + backgroundColor: glowConfig[variant].color, + opacity: glowConfig[variant].opacity, }} />
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
apps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/components/ui/glass-button.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxinternal-packages/ui/components/glass-button.tsxinternal-packages/ui/components/glass-card.tsxinternal-packages/ui/package.json
💤 Files with no reviewable changes (1)
- apps/studio.giselles.ai/components/ui/glass-button.tsx
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Favor clear, descriptive names and type annotations over clever tricks
If you need a multi-paragraph comment, refactor until intent is obvious
**/*.{ts,tsx,js,jsx}: Use async/await and proper error handling
Variables and functions should use camelCase naming
Booleans and functions should useis,has,can,shouldprefixes
Function names should clearly indicate purpose
Files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
**/*.{ts,tsx}: MUST runpnpm biome check --write [filename]after EVERY code modification
All code changes must be formatted using Biome before being committed
Use Biome for formatting with tab indentation and double quotes
Follow organized imports pattern (enabled in biome.json)
Use TypeScript for type safety; avoidanytypes
Use Next.js patterns for web applications
Use async/await for asynchronous code rather than promises
Error handling: use try/catch blocks and propagate errors appropriately
Use kebab-case for all filenames
Use PascalCase for React components and classes
Use camelCase for variables, functions, and methods
Use prefixes likeis,has,can,shouldfor boolean variables (e.g.,isEnabled,hasPermission)
Use prefixes likeis,has,can,shouldfor boolean functions (e.g.,isTriggerRequiringCallsign(),hasActiveSubscription()) instead of imperative verbs
Use verbs or verb phrases for function naming that clearly indicate purpose (e.g.,calculateTotalPrice(), notprocess())Use PascalCase for React component and class names
Use TypeScript and avoid
any
Files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
Use functional components with React hooks
Files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
**/*.{js,ts,tsx,jsx,py,java,cs,cpp,c,go,rb,php,swift,kt,scala,rs,dart}
📄 CodeRabbit inference engine (.cursor/rules/language-support.mdc)
Write all code comments in English
Files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
**/*
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
Use kebab-case for file names (e.g.,
user-profile.ts,api-client.tsx)
Files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxinternal-packages/ui/package.jsonapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
**/*.{js,ts,jsx,tsx}: Use camelCase for variable names, functions, and methods
Use verbs or verb phrases for function names to clearly indicate what the function does (e.g.,calculateTotalPrice(),validateUserInput())
Use nouns or noun phrases for variable names to describe what the variable represents
Use boolean prefixes (is,has,can,should) for boolean variables and functions returning boolean values (e.g.,isEnabled,hasPermission,isTriggerRequiringCallsign())
**/*.{js,ts,jsx,tsx}: Runpnpm biome check --write [filename]after every code change
All code must be formatted with Biome before commit
Files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
**/{components,pages}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Components should use React hooks and Next.js patterns
Files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsx
**/*.{ts,tsx,js,jsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Files should use kebab-case naming
Files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Components should use PascalCase naming
Files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
🧠 Learnings (35)
📓 Common learnings
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/assets/** : Replace GIFs and images in the `assets/` directory and update imports and references in `workspace-tour.tsx`
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update the `TourGlobalStyles` component in `workspace-tour.tsx` for animation changes
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Lift actions into the store (e.g., `updateNode`) and call them from components needing mutations instead of passing mutation callbacks as props
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Import new images at the top of `workspace-tour.tsx` and update the `imageSrc` prop in the appropriate step component to use the new image
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/components/{callsign,labels}*.tsx : Hide the 'Back' button in `input-callsign` and `input-labels` steps during reconfiguration mode to simplify UX.
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Modify the `CARD_STYLES` constants in `workspace-tour.tsx` to change step styling
Applied to files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update the `TourGlobalStyles` component in `workspace-tour.tsx` for animation changes
Applied to files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/member-icon.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxinternal-packages/ui/package.jsonapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:07:19.740Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/components/**/*.{ts,tsx} : Wrap presentational components in `React.memo` only when their props are stable and derived via selectors
Applied to files:
internal-packages/ui/components/glass-card.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxinternal-packages/ui/components/glass-button.tsx
📚 Learning: 2025-11-25T03:07:19.740Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Replace context-wide reads from `src/editor/v2` with fine-grained selectors against the Zustand store
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/assets/** : Replace GIFs and images in the `assets/` directory and update imports and references in `workspace-tour.tsx`
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Import new images at the top of `workspace-tour.tsx` and update the `imageSrc` prop in the appropriate step component to use the new image
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/components/{callsign,labels}*.tsx : Hide the 'Back' button in `input-callsign` and `input-labels` steps during reconfiguration mode to simplify UX.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:07:19.740Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Use shallow equality for arrays and objects in selectors to avoid false-positive updates
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxinternal-packages/ui/package.jsonapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:07:19.740Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Lift actions into the store (e.g., `updateNode`) and call them from components needing mutations instead of passing mutation callbacks as props
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Wrap all state updates in `startTransition` for consistent UI behavior during configuration and reconfiguration flows.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxinternal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:07:19.740Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Keep derivations simple and stable in selectors; maintain ordering when mapping to arrays so equality checks can short-circuit
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxinternal-packages/ui/package.json
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Use `client.reconfigureGitHubTrigger()` for reconfiguration with parameters: `flowTriggerId`, `repositoryNodeId`, `installationId`, `event` (with updated callsign/labels), and `useExperimentalStorage`.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Manage setup wizard state progression through steps: `select-event` → `select-repository` → `confirm-repository` → optionally `input-callsign` → optionally `input-labels` → `configured`.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Enable runtime toggle via `useGitHubTrigger()` hook which exposes `enableFlowTrigger()` and `disableFlowTrigger()` with optimistic UI updates.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Require callsign input for these GitHub events: `github.issue_comment.created`, `github.pull_request_comment.created`, `github.pull_request_review_comment.created`, `github.discussion_comment.created`.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Require labels input for these GitHub events: `github.issue.labeled`, `github.pull_request.labeled`.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Use `createTriggerEvent()` from `./utils/trigger-configuration` to build trigger event objects with appropriate properties.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Skip `input-callsign` and `input-labels` steps for events that don't require them, progressing directly to `configured` after `confirm-repository`.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx : Use helper functions `isTriggerRequiringCallsign()` and `isTriggerRequiringLabels()` defined in the panel file to determine which additional input steps are needed.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-08-14T02:34:56.156Z
Learnt from: gentamura
Repo: giselles-ai/giselle PR: 1590
File: internal-packages/workflow-designer-ui/src/editor/hooks/use-keyboard-shortcuts.ts:79-80
Timestamp: 2025-08-14T02:34:56.156Z
Learning: In the giselle codebase, React namespace types (React.KeyboardEvent, React.MouseEvent, React.ChangeEvent, etc.) are used consistently throughout the project without importing React itself, and verbatimModuleSyntax is not enabled in TypeScript configs. This pattern should be maintained for consistency rather than suggesting isolated changes to direct type imports.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/account/page.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-06-23T12:31:58.286Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-06-23T12:31:58.286Z
Learning: The tour uses React portals to render above other UI elements, ensuring overlays and highlights are not obstructed by the main application UI.
Applied to files:
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Modify CSS positioning in step components by adjusting Tailwind classes like `mt-[140px]` (margin-top) and `mr-8` (margin-right) in `workspace-tour.tsx`
Applied to files:
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/{steps.ts,workspace-tour.tsx} : Add new tour steps to the `tourSteps` array in `steps.ts`, create corresponding components in `workspace-tour.tsx` following the pattern of existing steps, and add the new step to the switch statement in the main `WorkspaceTour` component
Applied to files:
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsx
📚 Learning: 2025-11-28T00:51:04.090Z
Learnt from: shige
Repo: giselles-ai/giselle PR: 2290
File: apps/studio.giselles.ai/db/schema.ts:109-169
Timestamp: 2025-11-28T00:51:04.090Z
Learning: The team is consciously using Stripe API version 2025-11-17.preview for Stripe v2 billing cadence (stripeBillingCadenceHistories) and pricing plan subscription (stripePricingPlanSubscriptionHistories) features in apps/studio.giselles.ai/db/schema.ts with awareness that preview APIs may not be production-safe.
Applied to files:
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsx
📚 Learning: 2025-11-25T03:07:19.740Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Avoid new object/array creation in selectors unless using an equality function that treats them as equal when unchanged
Applied to files:
apps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/steps.ts : Modify the `tourSteps` array in `steps.ts` to change text, target elements, or placement for the workspace tour
Applied to files:
apps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsx
📚 Learning: 2025-06-23T12:31:58.286Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-06-23T12:31:58.286Z
Learning: The workspace tour feature in `internal-packages/workflow-designer-ui/src/editor/workspace-tour/` is implemented using React and relies on a `TourStep` interface that defines each step's target (CSS selector), title, content, and placement.
Applied to files:
apps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsxapps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-11-25T03:06:27.023Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T03:06:27.023Z
Learning: Applies to internal-packages/ui/styles/aliases.css : Keep design token aliases minimal in `internal-packages/ui/styles/aliases.css` and submit as a separate small PR
Applied to files:
internal-packages/ui/components/glass-button.tsxapps/studio.giselles.ai/packages/components/icons/ui.tsxapps/studio.giselles.ai/packages/components/icons/willi-icon.tsxinternal-packages/ui/package.json
📚 Learning: 2025-11-25T03:05:21.219Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-11-25T03:05:21.219Z
Learning: Applies to **/*.tsx : Use functional components with React hooks
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxinternal-packages/ui/package.json
📚 Learning: 2025-11-25T03:06:27.023Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T03:06:27.023Z
Learning: Applies to **/{components,pages}/**/*.{tsx,ts} : Components should use React hooks and Next.js patterns
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsxinternal-packages/ui/package.jsonapps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx
📚 Learning: 2025-06-23T12:31:52.270Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-06-23T12:31:52.270Z
Learning: Use functional components with React hooks for building React components.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsxapps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsx
📚 Learning: 2025-12-03T05:18:36.138Z
Learnt from: shige
Repo: giselles-ai/giselle PR: 2344
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/navigation-rail-expanded.tsx:14-20
Timestamp: 2025-12-03T05:18:36.138Z
Learning: In apps/studio.giselles.ai/app/stage/ui/navigation-rail/navigation-rail-expanded.tsx, "nav-action-history" is intentionally included in stageOnlyItemIds to hide it when the stage flag is disabled because the link destination is not yet implemented, even though it appears in the "Studio - Build Apps" section of navigation-items.ts.
Applied to files:
apps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsx
📚 Learning: 2025-11-25T03:05:21.219Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-11-25T03:05:21.219Z
Learning: Applies to **/*.{ts,tsx} : Use Next.js patterns for web applications
Applied to files:
internal-packages/ui/package.json
📚 Learning: 2025-11-25T03:06:27.023Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T03:06:27.023Z
Learning: Applies to **/*.{tsx,ts} : Components should use PascalCase naming
Applied to files:
internal-packages/ui/package.json
🧬 Code graph analysis (4)
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsx (1)
apps/studio.giselles.ai/packages/components/icons/member-icon.tsx (1)
MemberIcon(1-28)
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsx (4)
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel-v2/tools/ui/tabs.tsx (1)
Tabs(4-4)apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsx (1)
PricingCard(4-100)apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/plan-icon.tsx (1)
CircleIcon(8-29)internal-packages/ui/components/glass-button.tsx (1)
GlassButton(15-129)
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsx (1)
internal-packages/ui/components/glass-card.tsx (1)
GlassCard(7-26)
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsx (1)
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsx (1)
UpgradeInterstitial(9-219)
🪛 GitHub Actions: CI
apps/studio.giselles.ai/components/ui/gradient-button.tsx
[error] 48-49: File content differs from formatting output.
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsx
[error] 5-7: File content differs from formatting output.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cursor Bugbot
🔇 Additional comments (22)
apps/studio.giselles.ai/components/ui/gradient-button.tsx (2)
1-5: LGTM!Imports are well-organized with external dependencies listed before local utilities, following standard conventions.
28-46: LGTM!The component implementation follows React best practices with proper ref forwarding, Radix UI's
asChildpattern for composition, and correct TypeScript typing. The structure is clean and extensible.apps/studio.giselles.ai/packages/components/icons/member-icon.tsx (1)
1-28: LGTM!The icon component follows established patterns with proper accessibility attributes and TypeScript typing.
apps/studio.giselles.ai/packages/components/icons/willi-icon.tsx (1)
1-39: LGTM!Both icon components follow established patterns. The
WilliDuoIconcomposite approach creates a nice layered visual effect with appropriate positioning.apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/layout.tsx (1)
1-15: LGTM!Clean layout component with proper TypeScript typing and responsive design. The centered container with constrained max-width provides a consistent shell for upgrade content.
apps/studio.giselles.ai/app/(main)/ui/sidebar/create-app-button.tsx (1)
3-3: LGTM!Import path correctly updated to use the shared internal UI package. No behavioral changes.
apps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx (1)
15-15: LGTM!Import path correctly updated to use the shared internal UI package. No behavioral changes.
apps/studio.giselles.ai/app/(main)/stage/showcase/[appId]/app-detail-client.tsx (1)
3-3: LGTM!Import path correctly updated to use the shared internal UI package. No behavioral changes.
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx (1)
15-15: LGTM!Import path correctly updated to use the shared internal UI package. No behavioral changes.
apps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsx (1)
3-3: LGTM!Import path correctly updated to use the shared internal UI package. No behavioral changes.
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/document-store-create-dialog.tsx (1)
14-14: LGTM! Import path successfully migrated to internal UI package.The GlassButton import has been correctly updated to use the internal UI library path, aligning with the PR's refactoring objective.
apps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsx (1)
15-15: LGTM! Import path successfully migrated to internal UI package.The GlassButton import has been correctly updated to use the internal UI library path, consistent with the refactoring objective.
internal-packages/ui/package.json (1)
28-29: LGTM! New exports correctly expose GlassButton and GlassCard.The package exports follow the existing naming convention and enable the internal UI library migration across the codebase.
apps/studio.giselles.ai/app/(main)/settings/account/page.tsx (1)
1-1: LGTM! Import path successfully migrated to internal UI package.Consistent with the refactoring effort to centralize UI components in the internal library.
apps/studio.giselles.ai/packages/components/icons/ui.tsx (1)
1-105: LGTM! Well-structured icon components.Good practices observed:
- Source attribution in header comment
- Accessibility via
<title>elements- Consistent structure across all icons
- Uses
currentColorfor theming flexibilityapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsx (1)
70-80: Review accessibility pattern for disabled buttons.The "Current plan" button uses
pointer-events-noneandtabIndex={-1}to disable interaction. While this achieves the visual effect, verify that this pattern meets your accessibility requirements, as it prevents keyboard navigation and may not announce the disabled state to all screen readers.Consider whether:
- The button should remain focusable but disabled (
disabled={true}withoutpointer-events-none)- Alternative UI patterns (e.g., static text instead of a button) would be more semantically appropriate
This pattern is repeated for "Coming Soon" buttons throughout the file.
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/pricing-card.tsx (2)
102-119: LGTM!Good accessibility implementation with
aria-hidden="true"and a descriptive<title>element. UsingcurrentColorfor the fill allows the icon color to be controlled by the parent's text color.
4-26: LGTM!Clean component structure with well-typed props and sensible defaults. The conditional styling for
isCurrentPlanis handled appropriately.internal-packages/ui/components/glass-card.tsx (1)
1-26: LGTM!Clean, minimal wrapper component with proper TypeScript types. The use of
clsx/liteis appropriate, and the prop spreading pattern correctly allows consumers to override or extend behavior.internal-packages/ui/components/glass-button.tsx (3)
25-28: LGTM!The
asChildpattern with Radix Slot is correctly implemented. Usingaria-disabledwhenasChildis true and nativedisabledfor the button element is the right approach for polymorphic component accessibility.
120-127: LGTM!The hover overlay is correctly disabled for
comingSoon,currentPlanvariants, and whendisableHoverFillordisabledis true. Good attention to interactive state handling.
2-2: The import statement is correct. Theradix-uipackage is a valid meta package from Radix UI that exportsSlot, makingimport { Slot } from "radix-ui"a valid and documented approach. Bothimport { Slot } from "radix-ui"andimport { Slot } from "@radix-ui/react-slot"are acceptable per Radix UI's official documentation. No changes are needed.
| } | ||
|
|
There was a problem hiding this comment.
Fix formatting to pass CI.
The pipeline reports a formatting issue. Run pnpm biome check --write on this file to fix.
🔎 Expected fix
The file likely needs a blank line at the end:
export default function TeamUpgradeInterstitialPage() {
return <UpgradeInterstitial />;
}
-Based on coding guidelines: "MUST run pnpm biome check --write [filename] after EVERY code modification."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } | |
| export default function TeamUpgradeInterstitialPage() { | |
| return <UpgradeInterstitial />; | |
| } |
🧰 Tools
🪛 GitHub Actions: CI
[error] 5-7: File content differs from formatting output.
🤖 Prompt for AI Agents
In apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsx around
lines 5-6, the file formatting is failing CI (likely missing a trailing
newline); run `pnpm biome check --write
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsx` to
auto-fix formatting and ensure the file ends with a single blank line/EOF
newline, then save and commit the change so the pipeline passes.
| <section className="flex justify-center"> | ||
| <PricingCard | ||
| icon={<CircleIcon variant="team" />} | ||
| title="Team" | ||
| subtitle="Perfect for teams collaborating on AI agents" | ||
| price={{ amount: "$100", cadence: "/month" }} | ||
| cta={ | ||
| <div className="px-1 pt-3 pb-3"> | ||
| <GlassButton | ||
| type="button" | ||
| variant="comingSoon" | ||
| disableHoverFill | ||
| aria-disabled="true" | ||
| tabIndex={-1} | ||
| className="w-full whitespace-nowrap pointer-events-none" | ||
| aria-label="Coming Soon" | ||
| > | ||
| Coming Soon | ||
| </GlassButton> | ||
| </div> | ||
| } | ||
| features={[ | ||
| "All Pro features included", | ||
| "Team collaboration and sharing", | ||
| "Up to 10 users", | ||
| "Priority email support", | ||
| ]} | ||
| /> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <div className="mt-10 flex justify-center"> | ||
| <div className="inline-grid flex-col gap-y-[23px] sm:grid sm:grid-cols-2 sm:gap-4 lg:gap-6"> | ||
| <section className="flex justify-center"> | ||
| <PricingCard | ||
| icon={<CircleIcon variant="team" />} | ||
| title="Team" | ||
| subtitle="Perfect for teams collaborating on AI agents" | ||
| price={{ amount: "$100", cadence: "/month" }} | ||
| cta={ | ||
| <div className="px-1 pt-3 pb-3"> | ||
| <GlassButton | ||
| type="button" | ||
| variant="comingSoon" | ||
| disableHoverFill | ||
| aria-disabled="true" | ||
| tabIndex={-1} | ||
| className="w-full whitespace-nowrap pointer-events-none" | ||
| aria-label="Coming Soon" | ||
| > | ||
| Coming Soon | ||
| </GlassButton> | ||
| </div> | ||
| } | ||
| features={[ | ||
| "All Pro features included", | ||
| "Team collaboration and sharing", | ||
| "Up to 10 users", | ||
| "Priority email support", | ||
| ]} | ||
| /> | ||
| </section> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Eliminate duplicate Team plan card definition.
The Team plan card is duplicated across both Personal (lines 121-149) and Business (lines 155-183) tabs with identical content. This violates DRY principles and creates maintenance burden.
🔎 Suggested refactor
Extract the Team card as a constant:
const TeamCard = (
<PricingCard
icon={<CircleIcon variant="team" />}
title="Team"
subtitle="Perfect for teams collaborating on AI agents"
price={{ amount: "$100", cadence: "/month" }}
cta={
<div className="px-1 pt-3 pb-3">
<GlassButton
type="button"
variant="comingSoon"
disableHoverFill
aria-disabled="true"
tabIndex={-1}
className="w-full whitespace-nowrap pointer-events-none"
aria-label="Coming Soon"
>
Coming Soon
</GlassButton>
</div>
}
features={[
"All Pro features included",
"Team collaboration and sharing",
"Up to 10 users",
"Priority email support",
]}
/>
);Then reference it in both tab contents.
🤖 Prompt for AI Agents
In
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsx
around lines 121–183, the Team PricingCard JSX is duplicated in both tab panels;
extract the repeated JSX into a single reusable constant or component (e.g.,
TeamCard) defined once near the top of the file and replace both inline
occurrences with that reference so maintenance is centralized and duplication
removed.
| const gradientButtonVariants = cva( | ||
| "inline-flex w-full items-center justify-center rounded-full px-6 py-3 font-sans font-medium transition-all duration-300 shadow-lg hover:shadow-xl", | ||
| { | ||
| variants: { | ||
| variant: { | ||
| primary: | ||
| "bg-gradient-to-b from-[#1663F3] to-[#4A90E2] text-white hover:from-[#0F52BA] hover:to-[#367BFD]", | ||
| disabled: | ||
| "bg-gradient-to-b from-gray-600 to-gray-700 text-white cursor-not-allowed opacity-70", | ||
| }, | ||
| size: { | ||
| default: "text-sm sm:text-base", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: "primary", | ||
| size: "default", | ||
| }, | ||
| }, | ||
| ); |
There was a problem hiding this comment.
The disabled variant only styles the button but doesn't disable interaction.
The disabled variant applies visual styling (cursor-not-allowed, opacity-70) but doesn't prevent the button from being clicked. This creates a misleading UX where the button appears disabled but remains interactive, violating user expectations and accessibility best practices.
Consider either:
- Removing the
disabledvariant and relying on the HTMLdisabledattribute with appropriate styling, or - Documenting that consumers must also pass the
disabledprop when usingvariant="disabled"
🔎 Recommended approach using the disabled attribute
const gradientButtonVariants = cva(
- "inline-flex w-full items-center justify-center rounded-full px-6 py-3 font-sans font-medium transition-all duration-300 shadow-lg hover:shadow-xl",
+ "inline-flex w-full items-center justify-center rounded-full px-6 py-3 font-sans font-medium transition-all duration-300 shadow-lg hover:shadow-xl disabled:bg-gradient-to-b disabled:from-gray-600 disabled:to-gray-700 disabled:cursor-not-allowed disabled:opacity-70",
{
variants: {
variant: {
primary:
"bg-gradient-to-b from-[#1663F3] to-[#4A90E2] text-white hover:from-[#0F52BA] hover:to-[#367BFD]",
- disabled:
- "bg-gradient-to-b from-gray-600 to-gray-700 text-white cursor-not-allowed opacity-70",
},
size: {
default: "text-sm sm:text-base",
},
},
defaultVariants: {
variant: "primary",
size: "default",
},
},
);This approach styles the button based on the actual disabled HTML attribute, ensuring visual state matches functional state.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const gradientButtonVariants = cva( | |
| "inline-flex w-full items-center justify-center rounded-full px-6 py-3 font-sans font-medium transition-all duration-300 shadow-lg hover:shadow-xl", | |
| { | |
| variants: { | |
| variant: { | |
| primary: | |
| "bg-gradient-to-b from-[#1663F3] to-[#4A90E2] text-white hover:from-[#0F52BA] hover:to-[#367BFD]", | |
| disabled: | |
| "bg-gradient-to-b from-gray-600 to-gray-700 text-white cursor-not-allowed opacity-70", | |
| }, | |
| size: { | |
| default: "text-sm sm:text-base", | |
| }, | |
| }, | |
| defaultVariants: { | |
| variant: "primary", | |
| size: "default", | |
| }, | |
| }, | |
| ); | |
| const gradientButtonVariants = cva( | |
| "inline-flex w-full items-center justify-center rounded-full px-6 py-3 font-sans font-medium transition-all duration-300 shadow-lg hover:shadow-xl disabled:bg-gradient-to-b disabled:from-gray-600 disabled:to-gray-700 disabled:cursor-not-allowed disabled:opacity-70", | |
| { | |
| variants: { | |
| variant: { | |
| primary: | |
| "bg-gradient-to-b from-[#1663F3] to-[#4A90E2] text-white hover:from-[#0F52BA] hover:to-[#367BFD]", | |
| }, | |
| size: { | |
| default: "text-sm sm:text-base", | |
| }, | |
| }, | |
| defaultVariants: { | |
| variant: "primary", | |
| size: "default", | |
| }, | |
| }, | |
| ); |
🤖 Prompt for AI Agents
In apps/studio.giselles.ai/components/ui/gradient-button.tsx around lines 7 to
26, the "disabled" cva variant only changes visuals but does not set the HTML
disabled attribute, causing a mismatched interactive state; update the component
so the functional disabled state drives the visual styling: remove or stop
relying on a separate "variant: 'disabled'" and instead accept a disabled prop,
apply the disabled attribute to the underlying button element (and aria-disabled
for non-button elements), and conditionally include the disabled classes when
disabled === true; update the component's props typing and any callsites or docs
to ensure consumers pass disabled rather than just variant="disabled".
| export { GradientButton }; | ||
|
|
There was a problem hiding this comment.
Critical: Run Biome formatter to fix pipeline failure.
The pipeline is failing because the file has not been formatted with Biome. According to the coding guidelines, you MUST run Biome formatting after every code modification.
Please run the following command to format this file:
pnpm biome check --write apps/studio.giselles.ai/components/ui/gradient-button.tsxAs per coding guidelines, all TypeScript/TSX files must be formatted with Biome before commit.
🧰 Tools
🪛 GitHub Actions: CI
[error] 48-49: File content differs from formatting output.
🤖 Prompt for AI Agents
In apps/studio.giselles.ai/components/ui/gradient-button.tsx around lines 48 to
49, the file is not formatted with Biome causing the pipeline to fail; fix it by
running the Biome formatter on this file (pnpm biome check --write
apps/studio.giselles.ai/components/ui/gradient-button.tsx) and then re-commit
the formatted file so it conforms to the project coding guidelines.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| variant === "enterprise" ? ( | ||
| <FreeIcon /> | ||
| ) : variant === "team" ? ( | ||
| <MemberIcon /> |
There was a problem hiding this comment.
Team plan icon size inconsistent with other icons
The MemberIcon used for the Team plan variant has dimensions of 22x22 (set in its SVG width and height attributes), while all other plan icons (FreeIcon, ProIcon, and Orbit) are 24x24. In CircleIcon, the Orbit icon explicitly receives className="h-6 w-6" to ensure 24x24 sizing, but MemberIcon is rendered without any size class override, causing the Team plan icon to appear visually smaller than the other plan icons in the pricing cards.
Additional Locations (1)
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| export function GlassButton({ | ||
| className, | ||
| variant = "default", | ||
| size = "default", | ||
| asChild = false, |
There was a problem hiding this comment.
GlassButton was rewritten as a plain function (no forwardRef), so it no longer forwards refs to the underlying <button>. Radix primitives composed with asChild (e.g. the DialogTrigger wrapping GlassButton in apps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsx) pass a ref for focus management; React now warns that function components cannot receive refs and focus will not be restored to the trigger on dialog close. Wrap GlassButton in forwardRef again so the ref propagates.
Useful? React with 👍 / 👎.
🔍 QA Testing Assistant by Giselle📋 Manual QA ChecklistBased on the changes in this PR, here are the key areas to test manually:
✨ Prompt for AI AgentsUse the following prompts with Cursor or Claude Code to automate E2E testing: 📝 E2E Test Generation Prompt |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx (2)
172-172: Replacevoid team;with idiomatic TypeScript pattern.Using the
voidoperator to suppress unused variable warnings is non-idiomatic. Consider these alternatives:
Remove the parameter if it's truly unused:
function UpgradeButton() {Prefix with underscore to indicate intentionally unused:
function UpgradeButton({ team: _team }: { team: CurrentTeam }) {Add a comment explaining why it's kept (e.g., for interface consistency or future use)
🔎 Proposed fix using underscore prefix
-function UpgradeButton({ team }: { team: CurrentTeam }) { - void team; +function UpgradeButton({ team: _team }: { team: CurrentTeam }) {
102-106: Consider removing unnecessary form wrapper.The
UpgradeButtonnow uses Link-based navigation instead of form submission, making the<form>wrapper (lines 102-106) unnecessary. The form pattern is correctly used inUpdateButton(lines 181-196) whereformActionis needed, but here it's redundant.🔎 Proposed cleanup
- <form> - <Suspense fallback={<Skeleton className="h-10 w-[120px] rounded-md" />}> - <UpgradeButton team={team} /> - </Suspense> - </form> + <Suspense fallback={<Skeleton className="h-10 w-[120px] rounded-md" />}> + <UpgradeButton team={team} /> + </Suspense>Note: The
asChild+Linkpattern in lines 175-177 is correctly implemented and aligns with the PR objective to navigate to the new upgrade interstitial page.Also applies to: 175-177
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsx (3)
133-136: Simplify state initialization.The lazy initializer
() => new Set()is unnecessary here sincenew Set()is already cheap to construct. You can initialize directly.🔎 Proposed simplification
- const [failedImageIds, setFailedImageIds] = useState<Set<string>>( - () => new Set(), - ); + const [failedImageIds, setFailedImageIds] = useState<Set<string>>(new Set());
168-181: Consider simplifying boolean comparisons.The explicit comparisons
shouldUseLocalPreview === true(line 178) could be more concise. While functionally correct, idiomatic TypeScript omits explicit boolean comparisons.🔎 Suggested refinements
const shouldUseLocalPreview = serverImageUrl !== null && localPreview !== undefined && failedImageIds.has(file.id); const imageUrl = - shouldUseLocalPreview === true + shouldUseLocalPreview ? localPreview : (serverImageUrl ?? localPreview ?? null);
188-220: Verifyunoptimizedis intentional for user-uploaded images.The error/load handler logic is correct: server images fall back to local previews on failure, and the parent is notified only when server images load successfully. The immutable state update pattern is appropriate.
However, the
unoptimizedprop bypasses Next.js image optimization. While this is common for user-uploaded content (especially blob: URLs and external sources), confirm this is intentional.Optional: simplify boolean comparisons
Lines 200 and 215 use explicit
=== falsechecks. Consider:if ( serverImageUrl !== null && localPreview !== undefined && - failedImageIds.has(file.id) === false + !failedImageIds.has(file.id) ) {if ( serverImageUrl !== null && onImageLoad && - shouldUseLocalPreview === false + !shouldUseLocalPreview ) {
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsxapps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsxapps/studio.giselles.ai/components/ui/gradient-button.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/studio.giselles.ai/components/ui/gradient-button.tsx
- apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/page.tsx
- apps/studio.giselles.ai/app/(upgrade)/settings/team/upgrade/upgrade-interstitial.client.tsx
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Favor clear, descriptive names and type annotations over clever tricks
If you need a multi-paragraph comment, refactor until intent is obvious
**/*.{ts,tsx,js,jsx}: Use async/await and proper error handling
Variables and functions should use camelCase naming
Booleans and functions should useis,has,can,shouldprefixes
Function names should clearly indicate purpose
Files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
**/*.{ts,tsx}: MUST runpnpm biome check --write [filename]after EVERY code modification
All code changes must be formatted using Biome before being committed
Use Biome for formatting with tab indentation and double quotes
Follow organized imports pattern (enabled in biome.json)
Use TypeScript for type safety; avoidanytypes
Use Next.js patterns for web applications
Use async/await for asynchronous code rather than promises
Error handling: use try/catch blocks and propagate errors appropriately
Use kebab-case for all filenames
Use PascalCase for React components and classes
Use camelCase for variables, functions, and methods
Use prefixes likeis,has,can,shouldfor boolean variables (e.g.,isEnabled,hasPermission)
Use prefixes likeis,has,can,shouldfor boolean functions (e.g.,isTriggerRequiringCallsign(),hasActiveSubscription()) instead of imperative verbs
Use verbs or verb phrases for function naming that clearly indicate purpose (e.g.,calculateTotalPrice(), notprocess())Use PascalCase for React component and class names
Use TypeScript and avoid
any
Files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
Use functional components with React hooks
Files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
**/*.{js,ts,tsx,jsx,py,java,cs,cpp,c,go,rb,php,swift,kt,scala,rs,dart}
📄 CodeRabbit inference engine (.cursor/rules/language-support.mdc)
Write all code comments in English
Files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
**/*
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
Use kebab-case for file names (e.g.,
user-profile.ts,api-client.tsx)
Files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
**/*.{js,ts,jsx,tsx}: Use camelCase for variable names, functions, and methods
Use verbs or verb phrases for function names to clearly indicate what the function does (e.g.,calculateTotalPrice(),validateUserInput())
Use nouns or noun phrases for variable names to describe what the variable represents
Use boolean prefixes (is,has,can,should) for boolean variables and functions returning boolean values (e.g.,isEnabled,hasPermission,isTriggerRequiringCallsign())
**/*.{js,ts,jsx,tsx}: Runpnpm biome check --write [filename]after every code change
All code must be formatted with Biome before commit
Files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
**/*.{ts,tsx,js,jsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Files should use kebab-case naming
Files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Components should use PascalCase naming
Files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
🧠 Learnings (12)
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Import new images at the top of `workspace-tour.tsx` and update the `imageSrc` prop in the appropriate step component to use the new image
Applied to files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/assets/** : Replace GIFs and images in the `assets/` directory and update imports and references in `workspace-tour.tsx`
Applied to files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsxapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-11-25T03:05:21.219Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-11-25T03:05:21.219Z
Learning: Applies to **/*.tsx : Use functional components with React hooks
Applied to files:
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update the `TourGlobalStyles` component in `workspace-tour.tsx` for animation changes
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/components/{callsign,labels}*.tsx : Hide the 'Back' button in `input-callsign` and `input-labels` steps during reconfiguration mode to simplify UX.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-11-25T03:07:19.740Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Lift actions into the store (e.g., `updateNode`) and call them from components needing mutations instead of passing mutation callbacks as props
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Wrap all state updates in `startTransition` for consistent UI behavior during configuration and reconfiguration flows.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-12-03T05:18:36.138Z
Learnt from: shige
Repo: giselles-ai/giselle PR: 2344
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/navigation-rail-expanded.tsx:14-20
Timestamp: 2025-12-03T05:18:36.138Z
Learning: In apps/studio.giselles.ai/app/stage/ui/navigation-rail/navigation-rail-expanded.tsx, "nav-action-history" is intentionally included in stageOnlyItemIds to hide it when the stage flag is disabled because the link destination is not yet implemented, even though it appears in the "Studio - Build Apps" section of navigation-items.ts.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-11-25T03:07:07.498Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Manage setup wizard state progression through steps: `select-event` → `select-repository` → `confirm-repository` → optionally `input-callsign` → optionally `input-labels` → `configured`.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-11-25T03:07:19.740Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Replace context-wide reads from `src/editor/v2` with fine-grained selectors against the Zustand store
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/{steps.ts,workspace-tour.tsx} : Add new tour steps to the `tourSteps` array in `steps.ts`, create corresponding components in `workspace-tour.tsx` following the pattern of existing steps, and add the new step to the switch statement in the main `WorkspaceTour` component
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx
📚 Learning: 2025-11-25T03:06:27.023Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T03:06:27.023Z
Learning: Applies to **/{components,pages}/**/*.{tsx,ts} : Components should use React hooks and Next.js patterns
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx
🧬 Code graph analysis (1)
apps/studio.giselles.ai/app/(main)/settings/team/page.tsx (1)
internal-packages/ui/components/button.tsx (1)
Button(23-105)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: codeql / languages (javascript) / Perform CodeQL for javascript
- GitHub Check: Cursor Bugbot
🔇 Additional comments (1)
apps/studio.giselles.ai/app/(main)/playground/file-attachments.tsx (1)
13-14: LGTM — Imports align with the new image handling.The addition of Next.js
Imageand ReactuseStateproperly supports the enhanced fallback logic for uploaded images.
| isCurrentPlan ? "ring-1 ring-[#1663F3]/25" : "", | ||
| ] | ||
| .filter(Boolean) | ||
| .join(" "); |
There was a problem hiding this comment.
PricingCard's before pseudo-element styles effectively invisible
The PricingCard component defines ::before pseudo-element styling including before:border before:border-white/15 before:bg-gradient-to-br before:from-white/10 in cardClassName. However, GlassCard sets before:opacity-[0.02] on its ::before element, and PricingCard doesn't override this opacity. Since CSS opacity affects the entire element, the border and gradient effects in PricingCard render at 2% opacity—essentially invisible. Adding before:opacity-100 to cardClassName would make these decorative effects visible as likely intended.
Additional Locations (1)
| aria-label="Get Started" | ||
| > | ||
| Get Started | ||
| </GlassButton> |
There was a problem hiding this comment.
Pro plan button is clickable but has no action
The "Get Started" GlassButton for the Pro plan has no onClick handler or form action, making it a clickable button that does nothing when pressed. Unlike the "Coming Soon" buttons which are properly disabled with aria-disabled, tabIndex={-1}, and pointer-events-none, this button appears interactive and accepts clicks but provides no feedback or functionality. Users clicking this button would expect an upgrade flow to begin but nothing happens, creating a confusing experience.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/studio.giselles.ai/packages/components/icons/ui.tsx (1)
3-57: LGTM! Clean icon components with good accessibility.Both
FreeandProcomponents are well-implemented:
- Proper functional component structure with PascalCase naming
- Accessible via
<title>elements- Use
currentColorfor flexible theming- Consistent structure and viewBox dimensions
Optional: Add explicit TypeScript return types
For stricter type safety, consider adding return type annotations:
-export function Free() { +export function Free(): React.ReactElement { return ( ... -export function Pro() { +export function Pro(): React.ReactElement { return (This makes the component contract more explicit, though TypeScript can infer these types correctly.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/studio.giselles.ai/packages/components/icons/ui.tsx
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Favor clear, descriptive names and type annotations over clever tricks
If you need a multi-paragraph comment, refactor until intent is obvious
**/*.{ts,tsx,js,jsx}: Use async/await and proper error handling
Variables and functions should use camelCase naming
Booleans and functions should useis,has,can,shouldprefixes
Function names should clearly indicate purpose
Files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
**/*.{ts,tsx}: MUST runpnpm biome check --write [filename]after EVERY code modification
All code changes must be formatted using Biome before being committed
Use Biome for formatting with tab indentation and double quotes
Follow organized imports pattern (enabled in biome.json)
Use TypeScript for type safety; avoidanytypes
Use Next.js patterns for web applications
Use async/await for asynchronous code rather than promises
Error handling: use try/catch blocks and propagate errors appropriately
Use kebab-case for all filenames
Use PascalCase for React components and classes
Use camelCase for variables, functions, and methods
Use prefixes likeis,has,can,shouldfor boolean variables (e.g.,isEnabled,hasPermission)
Use prefixes likeis,has,can,shouldfor boolean functions (e.g.,isTriggerRequiringCallsign(),hasActiveSubscription()) instead of imperative verbs
Use verbs or verb phrases for function naming that clearly indicate purpose (e.g.,calculateTotalPrice(), notprocess())Use PascalCase for React component and class names
Use TypeScript and avoid
any
Files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
Use functional components with React hooks
Files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
**/*.{js,ts,tsx,jsx,py,java,cs,cpp,c,go,rb,php,swift,kt,scala,rs,dart}
📄 CodeRabbit inference engine (.cursor/rules/language-support.mdc)
Write all code comments in English
Files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
**/*
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
Use kebab-case for file names (e.g.,
user-profile.ts,api-client.tsx)
Files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
**/*.{js,ts,jsx,tsx}: Use camelCase for variable names, functions, and methods
Use verbs or verb phrases for function names to clearly indicate what the function does (e.g.,calculateTotalPrice(),validateUserInput())
Use nouns or noun phrases for variable names to describe what the variable represents
Use boolean prefixes (is,has,can,should) for boolean variables and functions returning boolean values (e.g.,isEnabled,hasPermission,isTriggerRequiringCallsign())
**/*.{js,ts,jsx,tsx}: Runpnpm biome check --write [filename]after every code change
All code must be formatted with Biome before commit
Files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
**/{components,pages}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Components should use React hooks and Next.js patterns
Files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
**/*.{ts,tsx,js,jsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Files should use kebab-case naming
Files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Components should use PascalCase naming
Files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
🧠 Learnings (4)
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update the `TourGlobalStyles` component in `workspace-tour.tsx` for animation changes
Applied to files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Import new images at the top of `workspace-tour.tsx` and update the `imageSrc` prop in the appropriate step component to use the new image
Applied to files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
📚 Learning: 2025-11-25T03:06:27.023Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T03:06:27.023Z
Learning: Applies to internal-packages/ui/styles/aliases.css : Keep design token aliases minimal in `internal-packages/ui/styles/aliases.css` and submit as a separate small PR
Applied to files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
📚 Learning: 2025-11-25T03:05:31.051Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/assets/** : Replace GIFs and images in the `assets/` directory and update imports and references in `workspace-tour.tsx`
Applied to files:
apps/studio.giselles.ai/packages/components/icons/ui.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: codeql / languages (javascript) / Perform CodeQL for javascript
- GitHub Check: Cursor Bugbot
- GitHub Check: check
|
📝 |
User description
What
/settings/team/upgrade(standalone layout without sidebar/header via route group).OrbitRefactor
GlassButton/GlassCardinto@giselle-internal/uiand update Studio imports accordingly.Notes
PR Type
Enhancement
Description
Add team upgrade interstitial pricing page with Personal/Business plan tabs
Implement glass-styled pricing cards with plan features and CTAs
Refactor GlassButton and GlassCard into @giselle-internal/ui package
Update all Studio imports to use relocated glass components
Add plan icons (Free/Pro/Team/Enterprise) with custom member icon
Diagram Walkthrough
File Walkthrough
9 files
Create team upgrade interstitial page entry pointAdd standalone layout for upgrade page without sidebarImplement main upgrade interstitial UI with plan tabsCreate reusable pricing card component with glass stylingAdd plan variant icons for Free/Pro/Team/EnterpriseAdd new gradient button component for future useAdd custom member icon SVG for Team plan displayAdd Free/Pro/Team plan icons from website designAdd Willi mascot icon components for branding11 files
Move GlassButton to internal UI package with variantsMove GlassCard to internal UI package with glass stylingRemove glass-button from local components directoryUpdate import to use GlassButton from internal UIUpdate import to use GlassButton from internal UIUpdate import to use GlassButton from internal UIUpdate import to use GlassButton from internal UIUpdate import to use GlassButton from internal UIUpdate import to use GlassButton from internal UIUpdate import to use GlassButton from internal UIUpdate import to use GlassButton from internal UI1 files
Export glass-button and glass-card from packageSummary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.
Note
Adds a UI-only upgrade interstitial at /settings/team/upgrade with pricing cards and tabs, updates Team Settings to link to it, and moves GlassButton/GlassCard into the shared UI package.
apps/studio.giselles.ai/app/(upgrade)/settings/team/upgradewithlayout.tsxandpage.tsxrenderingUpgradeInterstitial.pricing-card.tsx, tabbed plans inupgrade-interstitial.client.tsx, and plan icon selectorplan-icon.tsx.page.tsx: replaces server upgrade action with a link-based Upgrade button to/settings/team/upgrade.@giselle-internal/ui/glass-buttonand@giselle-internal/ui/glass-cardcomponents and exports them ininternal-packages/ui/package.json.packages/components/icons/member-icon.tsxandpackages/components/icons/ui.tsxfor plan glyphs.Written by Cursor Bugbot for commit f3f8502. This will update automatically on new commits. Configure here.