hotfix: credit pricing page

[Siri-Ray]

Summary

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Tip

Close issue syntax: Fixes #<issue number> or Resolves #<issue number>, see documentation for more details.

Impact Areas

Please check the areas this PR affects:

• Multi-threaded Dialogues
• AI-Powered Capabilities (Web Search, Knowledge Base Search, Question Recommendations)
• Context Memory & References
• Knowledge Base Integration & RAG
• Quotes & Citations
• AI Document Editing & WYSIWYG
• Free-form Canvas Interface
• Other

Screenshots/Videos

Before	After
...	...

Checklist

Important

Please review the checklist below before submitting your pull request.

• This change requires a documentation update, included: Refly Documentation
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I've updated the documentation accordingly.
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

Summary by CodeRabbit

• New Features

  • Plans simplified to Free and Plus; Free now displays a $0/month price block; Plus supports per-feature styling and grouped tool entries.

• UI Updates

  • Pricing cards refreshed: explicit selected borders, hover gradient for paid plans, rounded yearly badge, subscription and lightning icons, upgraded button icon (size/color) and visual tweaks across cards.

• Messaging

  • Updated subscription and plan wording; "Go to Marketplace" → "Explore More Templates" (EN/ZH).

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Updated subscription pricing UI and text: simplified plans to Free/Plus, added icons and hover gradient, extended FeatureItem props for plan-aware rendering, adjusted feature rendering and styles, updated i18n strings, and changed marketplace link to /marketplace.

Changes

Cohort / File(s)	Summary
Pricing UI component packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx	Added Subscription and lightning icons; extended FeatureItemProps with planType and featureIndex; introduced isHovered hover state and gradient for paid plans; updated border/tag styles; special pointFreeTools rendering path; Free plan shows a $0/month block; upgrade button icon updated (size/color).
Internationalization (en-US) packages/i18n/src/en-US/ui.ts	Updated CTA and copy: marketplace CTA -> "Explore More Templates"; "Current Plan" -> "Your Current Plan"; modal title -> "Upgrade Your Plan to Get More Credits"; "Upgrade to {{planType}}" -> "Get {{planType}}"; adjusted Free plan wording and added memberBenefits.
Internationalization (zh-Hans) packages/i18n/src/zh-Hans/ui.ts	Commented out a PLUS feature entry and a public feature block; updated marketplace CTA to “探索更多模板”; unified current-plan wording.
Canvas template link packages/ai-workspace-common/src/components/canvas-template/template-list.tsx	Changed MARKETPLACE_LINK from ${window.location.origin} to ${window.location.origin}/marketplace.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Review priceContent.tsx for correctness of planType-driven conditional styling and featureIndex propagation.
• Verify hover state behavior and accessibility (keyboard/focus) for PlanItem.
• Confirm i18n key edits match usages and that commented translations won't break lookups.

Possibly related PRs

• fix credit and subscription ui bugs #1152 — Prior edits to the same priceContent.tsx area affecting plan rendering and tag/display logic.
• fix: credit and subscription ui problems #1167 — Overlaps on priceContent.tsx changes around PlanItem/FeatureItem and click/telemetry handling.
• style: adjust UI for subscription and credit points #1189 — Related subscribe-modal UI updates within the same directory.

Suggested reviewers

• mrcfps

Poem

🐰 I hopped in with a spark and a grin,
Cards that shimmer when the cursors spin.
Free and Plus now tidy, bright and light,
I nudged the tags and gifted lightning light.
Hop on — subscription dreams take flight! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is only the template with no actual content filled in—no summary of changes, no issue reference, no motivation provided, and no screenshots included.	Fill in the Summary section with a description of changes and issue reference (Fixes #), select relevant Impact Areas, add before/after screenshots, and explain the motivation behind the pricing updates.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title directly relates to the main changeset, which comprehensively updates the subscription/pricing modal component (priceContent.tsx), translations, and marketplace link.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch hotfix/credit-pricing

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (4)

111-112: Consider refactoring index-based styling to use feature flags.

While adding planType and featureIndex props enables planType-specific styling, using array indices (like featureIndex === 1 || featureIndex === 2 on lines 122-125) creates fragile code that breaks when features are reordered.

Consider alternatives:

• Add a highlight?: boolean flag to the Feature interface
• Use feature types or IDs instead of array indices
• Move styling logic to feature data rather than component logic

Example refactor:

 interface Feature {
   name: string;
   type?: string;
+  highlight?: boolean;
   items?: string[];
   duration?: string;
 }

Then in FeatureItem:

-const isGreenDescription =
-  planType === 'plus' &&
-  featureIndex !== undefined &&
-  (featureIndex === 1 || featureIndex === 2);
+const isGreenDescription = feature.highlight && planType === 'plus';

---

128-156: Extract pointFreeTools rendering to a separate component.

The pointFreeTools type introduces significant complexity with nested structure rendering. This makes FeatureItem harder to test and maintain.

Consider extracting:

const PointFreeToolsFeature = memo(({ name, items, duration }: {
  name: string;
  items: string[];
  duration?: string;
}) => {
  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-start gap-3">
        <div className="flex-shrink-0 mt-0.5">
          <Checked size={16} color="#0E9F77" />
        </div>
        <span className="text-sm leading-5 text-gray-900 font-semibold">{name}</span>
      </div>
      <div className="ml-7 p-3 rounded-lg bg-transparent flex flex-col gap-2">
        {items.map((item, index) => (
          <div key={index} className="flex items-center justify-between">
            {/* ... */}
          </div>
        ))}
      </div>
    </div>
  );
});

Then in FeatureItem:

if (feature.type === 'pointFreeTools' && feature.items) {
  return <PointFreeToolsFeature name={name} items={feature.items} duration={feature.duration} />;
}

---

69-70: Styling updates improve visual consistency.

The border and tag styling updates enhance the UI:

• Added solid border with hover states for better interactivity
• Changed tags to rounded-full and border-0 for a cleaner, modern appearance

Note: The !important flags (e.g., !border-solid, !border-black) suggest conflicting global styles. Consider reviewing CSS specificity to reduce reliance on !important.

Also applies to: 80-86

---

218-218: Hover effect enhances interactivity.

The hover state with gradient background provides good visual feedback. Implementation is correct with proper cleanup (onMouseLeave).

Optional: Extract gradient definitions to constants for reusability:

const PLAN_GRADIENTS = {
  default: '#ffffff',
  active: 'linear-gradient(180deg, rgba(14, 159, 119, 0.08) 0%, rgba(255, 255, 255, 0) 30%), #ffffff',
  hover: 'linear-gradient(180deg, #A4FFF6, #CFFFD3), #ffffff',
};

Also applies to: 344-349

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b57ea68 and 312537e.

📒 Files selected for processing (2)

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (11 hunks)
• packages/i18n/src/en-US/ui.ts (5 hunks)

🧰 Additional context used

📓 Path-based instructions (22)

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{js,ts,jsx,tsx}: Always use optional chaining (?.) when accessing object properties
Always use nullish coalescing (??) or default values for potentially undefined values
Always check array existence before using array methods
Always validate object properties before destructuring
Always use single quotes for string literals in JavaScript/TypeScript code

**/*.{js,ts,jsx,tsx}: Use semicolons at the end of statements
Include spaces around operators (e.g., a + b instead of a+b)
Always use curly braces for control statements
Place opening braces on the same line as their statement

**/*.{js,ts,jsx,tsx}: Group import statements in order: React/framework libraries, third-party libraries, internal modules, relative path imports, type imports, style imports
Sort imports alphabetically within each import group
Leave a blank line between import groups
Extract complex logic into custom hooks
Use functional updates for state (e.g., setCount(prev => prev + 1))
Split complex state into multiple state variables rather than single large objects
Use useReducer for complex state logic instead of multiple useState calls

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}: All code comments MUST be written in English
All variable names, function names, class names, and other identifiers MUST use English words
Comments should be concise and explain 'why' rather than 'what'
Use proper grammar and punctuation in comments
Keep comments up-to-date when code changes
Document complex logic, edge cases, and important implementation details
Use clear, descriptive names that indicate purpose
Avoid abbreviations unless they are universally understood

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

Use JSDoc style comments for functions and classes in JavaScript/TypeScript

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/{i18n,locales,translations,lang}/**/*.{json,ts,tsx,js,jsx,properties}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

Use Chinese for all user-facing communication

Files:

• packages/i18n/src/en-US/ui.ts

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{js,jsx,ts,tsx}: Use single quotes for string literals in TypeScript/JavaScript
Always use optional chaining (?.) when accessing object properties in TypeScript/JavaScript
Always use nullish coalescing (??) or default values for potentially undefined values in TypeScript/JavaScript
Always check array existence before using array methods in TypeScript/JavaScript
Validate object properties before destructuring in TypeScript/JavaScript
Use ES6+ features like arrow functions, destructuring, and spread operators in TypeScript/JavaScript
Avoid magic numbers and strings - use named constants in TypeScript/JavaScript
Use async/await instead of raw promises for asynchronous code in TypeScript/JavaScript

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/03-typescript-guidelines.mdc)

**/*.{ts,tsx}: Avoid using any type whenever possible - use unknown type instead with proper type guards
Always define explicit return types for functions, especially for public APIs
Prefer extending existing types over creating entirely new types
Use TypeScript utility types (Partial<T>, Pick<T, K>, Omit<T, K>, Readonly<T>, Record<K, T>) to derive new types
Use union types and intersection types to combine existing types
Always import types explicitly using the import type syntax
Group type imports separately from value imports
Minimize creating local type aliases for imported types

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Maximum line length of 100 characters

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Use 2 spaces for indentation, no tabs

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json,yml,yaml,md}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

No trailing whitespace at the end of lines

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{css,scss,sass,less,js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/09-design-system.mdc)

**/*.{css,scss,sass,less,js,jsx,ts,tsx}: Primary color (#155EEF) should be used for main brand color in buttons, links, and accents
Error color (#F04438) should be used for error states and destructive actions
Success color (#12B76A) should be used for success states and confirmations
Warning color (#F79009) should be used for warnings and important notifications
Info color (#0BA5EC) should be used for informational elements

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

packages/i18n/src/{en-US,zh-Hans}/**

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Add new translation keys to both language files (en-US and zh-Hans)

Files:

• packages/i18n/src/en-US/ui.ts

packages/i18n/src/**

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

packages/i18n/src/**: Maintain consistency in translation key naming conventions
Use descriptive translation keys that reflect the content
Group related translation keys together in the translation file structure
Use namespaces for different sections of the application in translation keys
Follow a hierarchical structure for nested components in translation key organization

Files:

• packages/i18n/src/en-US/ui.ts

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

**/*.{tsx,ts}: Use the translation wrapper component and useTranslation hook in components
Ensure all user-facing text is translatable

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,json}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Support dynamic content with placeholders in translations

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,jsx,js,vue,css,scss,less}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue,css,scss,less}: Use the primary blue (#155EEF) for main UI elements, CTAs, and active states
Use red (#F04438) only for errors, warnings, and destructive actions
Use green (#12B76A) for success states and confirmations
Use orange (#F79009) for warning states and important notifications
Use blue (#0BA5EC) for informational elements
Primary buttons should be solid with the primary color
Secondary buttons should have a border with transparent or light background
Danger buttons should use the error color
Use consistent padding, border radius, and hover states for all buttons
Follow fixed button sizes based on their importance and context
Use consistent border radius (rounded-lg) for all cards
Apply light shadows (shadow-sm) for card elevation
Maintain consistent padding inside cards (p-4 or p-6)
Use subtle borders for card separation
Ensure proper spacing between card elements
Apply consistent styling to all form inputs
Use clear visual indicators for focus, hover, and error states in form elements
Apply proper spacing between elements using 8px, 16px, 24px increments
Ensure proper alignment of elements (left, center, or right)
Use responsive layouts that work across different device sizes
Maintain a minimum contrast ratio of 4.5:1 for text

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,jsx,js,vue}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue}: Include appropriate loading states for async actions in buttons
Group related form elements with appropriate spacing
Provide clear validation feedback for forms
Ensure proper labeling and accessibility for form elements
Ensure all interactive elements are keyboard accessible
Include appropriate ARIA attributes for complex components
Provide alternative text for images and icons
Support screen readers with semantic HTML elements

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

**/*.{ts,tsx,js,jsx}: Follow the TypeScript/JavaScript style guidelines
Ensure code is well-tested and documented

Files:

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{jsx,tsx}: Always use tailwind css to style the component
Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation
Always use useCallback for function props to maintain referential equality
Always specify proper dependency arrays in useEffect to prevent infinite loops
Always avoid inline object/array creation in render to prevent unnecessary re-renders
Always use proper key props when rendering lists
Always split nested components with closures into separate components to avoid performance issues and improve code maintainability

**/*.{jsx,tsx}: Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation in React
Always use useCallback for function props to maintain referential equality in React
Always specify proper dependency arrays in useEffect to prevent infinite loops in React
Always avoid inline object/array creation in render to prevent unnecessary re-renders in React
Always use proper key props when rendering lists in React (avoid using index when possible)
Always split nested components with closures into separate components in React
Use lazy loading for components that are not immediately needed in React
Debounce handlers for events that might fire rapidly (resize, scroll, input) in React
Implement fallback UI for components that might fail in React
Use error boundaries to catch and handle runtime errors in React

**/*.{jsx,tsx}: Place each attribute on a new line when a component has multiple attributes in JSX
Use self-closing tags for elements without children in JSX
Keep JSX expressions simple, extract complex logic to variables
Put closing brackets for multi-line JSX on a new line

**/*.{jsx,tsx}: Component file names should match the component name
Organize function components in order: imports, type definitions, constants, component function, hook calls, e...

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx,css}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{jsx,tsx,css}: Use Tailwind CSS for styling components
Follow the utility-first approach with Tailwind CSS
Group related utility classes together in Tailwind CSS
Prefer Tailwind utilities over custom CSS when possible

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Each component file should contain only one main component

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Explicitly type props with interfaces or types in React components

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

Use React best practices for frontend code

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

🧠 Learnings (12)

📚 Learning: 2025-11-25T03:04:41.334Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to packages/i18n/src/{en-US,zh-Hans}/** : Add new translation keys to both language files (en-US and zh-Hans)

Applied to files:

• packages/i18n/src/en-US/ui.ts

📚 Learning: 2025-11-25T03:04:41.334Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to **/*.{tsx,ts} : Ensure all user-facing text is translatable

Applied to files:

• packages/i18n/src/en-US/ui.ts

📚 Learning: 2025-11-25T03:03:19.158Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/{i18n,locales,translations,lang}/**/*.{json,ts,tsx,js,jsx,properties} : Use Chinese for all user-facing communication

Applied to files:

• packages/i18n/src/en-US/ui.ts

📚 Learning: 2025-11-25T03:04:41.334Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to packages/i18n/src/** : Use descriptive translation keys that reflect the content

Applied to files:

• packages/i18n/src/en-US/ui.ts

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue} : Include appropriate loading states for async actions in buttons

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Secondary buttons should have a border with transparent or light background

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use consistent padding, border radius, and hover states for all buttons

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Primary buttons should be solid with the primary color

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use subtle borders for card separation

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use clear visual indicators for focus, hover, and error states in form elements

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use consistent border radius (`rounded-lg`) for all cards

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Follow fixed button sizes based on their importance and context

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

🧬 Code graph analysis (1)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (1)

packages/ai-workspace-common/src/components/common/icon.tsx (1)

• IconLightning01 (197-197)

⏰ 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: build / Build

🔇 Additional comments (4)

packages/i18n/src/en-US/ui.ts (1)

2707-2707: LGTM: Translation terminology updates are clear and consistent.

The translation updates improve clarity and consistency across the subscription UI:

• "Your Current Plan" is more personal and explicit than "Current Plan"
• "Get {{planType}}" is more action-oriented than "Upgrade to {{planType}}"
• Added "memberBenefits" label for better feature organization
• Simplified "Free Plan" to "Free" for conciseness

All changes follow i18n guidelines and maintain consistency across related keys.

Also applies to: 3594-3594, 3624-3629, 3632-3633, 3829-3829, 3884-3884

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (3)

9-9: LGTM: Icon import added for plan header.

The Subscription icon is properly imported and used in the plan card header (line 353).

---

300-304: LGTM: Free plan price display improves clarity.

Explicitly showing "$0/month" for the free plan improves visual consistency with paid plans and makes the pricing structure clearer to users.

---

277-277: LGTM: Icon additions enhance visual hierarchy.

The additions improve the UI:

• Lightning icon on upgrade button creates urgency and action-oriented feel
• Subscription icon in plan header provides visual context

Also applies to: 353-353

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (2)

39-45: Critical: PlanPriorityMap references removed plans, breaking upgrade logic.

The PlanPriorityMap enum includes starter, maker, and enterprise plans that are no longer rendered (line 459 only includes ['free', 'plus']). This causes critical upgrade path failures:

1. TypeScript enum reverse mapping: When both plus and starter map to priority 1, the reverse lookup PlanPriorityMap[1] returns 'starter' (the last defined key).
2. Broken upgrade flow: If currentPlan is 'free', line 216 computes upgradePlan = PlanPriorityMap[1] = 'starter', but no PlanItem for 'starter' exists in the rendered UI.
3. Similar issue for Plus users: If currentPlan is 'plus', upgradePlan would be 'maker' (priority 2), also absent from the UI.

This breaks the upgrade button logic and user experience for plan transitions.

Apply this diff to fix the enum and ensure consistency:

 enum PlanPriorityMap {
   free = 0,
   plus = 1,
-  starter = 1,
-  maker = 2,
-  enterprise = 3,
 }

Then update line 216 to handle the simplified priority map:

   const upgradePlan =
-    PlanPriorityMap[PlanPriorityMap[currentPlan as keyof typeof PlanPriorityMap] + 1] ||
-    'enterprise';
+    PlanPriorityMap[PlanPriorityMap[currentPlan as keyof typeof PlanPriorityMap] + 1];

Also applies to: 216-216

---

88-88: Use the standard success color from design guidelines.

Multiple locations use the custom green #0E9F77 instead of the standard success color #12B76A specified in the coding guidelines. For consistency across the application, use the guideline-approved color.

As per coding guidelines for **/*.{css,scss,sass,less,js,jsx,ts,tsx}: "Success color (#12B76A) should be used for success states and confirmations."

Apply this diff to standardize the color:

-            <Checked size={12} color="#fff" />
+            <Checked size={12} color="#ffffff" />

And replace #0E9F77 with #12B76A throughout:

-          <div className="ml-auto w-5 h-5 bg-[#0E9F77] rounded-full flex items-center justify-center">
+          <div className="ml-auto w-5 h-5 bg-[#12B76A] rounded-full flex items-center justify-center">

-              <Checked size={16} color="#0E9F77" />
+              <Checked size={16} color="#12B76A" />

-                  <span className="w-1.5 h-1.5 rounded-full bg-[#0E9F77] flex-shrink-0" />
+                  <span className="w-1.5 h-1.5 rounded-full bg-[#12B76A] flex-shrink-0" />

-            <Checked size={16} color="#0E9F77" />
+            <Checked size={16} color="#12B76A" />

-        <IconLightning01 size={20} color="#0E9F77" />
+        <IconLightning01 size={20} color="#12B76A" />

Also applies to: 134-134, 143-143, 164-164, 277-277

🧹 Nitpick comments (2)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (2)

127-156: Consider extracting the pointFreeTools rendering logic into a separate component.

The nested rendering block for feature.type === 'pointFreeTools' (lines 127-156) adds significant complexity to FeatureItem. Extracting this into a dedicated component would improve readability and maintainability.

As per coding guidelines: "Always split nested components with closures into separate components in React."

Create a new component:

const PointFreeToolsFeature = memo(({ feature }: { feature: Feature }) => {
  const parts = feature.name.split('\n');
  const name = parts[0];

  return (
    <div className="flex flex-col gap-2">
      {/* Header with check icon */}
      <div className="flex items-start gap-3">
        <div className="flex-shrink-0 mt-0.5">
          <Checked size={16} color="#12B76A" />
        </div>
        <span className="text-sm leading-5 text-gray-900 font-semibold">{name}</span>
      </div>
      {/* Sub-items list */}
      <div className="ml-7 p-3 rounded-lg bg-transparent flex flex-col gap-2">
        {feature.items?.map((item, index) => (
          <div key={index} className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-[#12B76A] flex-shrink-0" />
              <span className="text-sm text-gray-700">{item}</span>
            </div>
            {feature.duration && (
              <span className="text-xs font-medium text-gray-500 bg-white px-2 py-0.5 rounded">
                {feature.duration}
              </span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
});

PointFreeToolsFeature.displayName = 'PointFreeToolsFeature';

Then simplify FeatureItem:

   if (feature.type === 'pointFreeTools' && feature.items && feature.items.length > 0) {
-    return (
-      <div className="flex flex-col gap-2">
-        ...entire block...
-      </div>
-    );
+    return <PointFreeToolsFeature feature={feature} />;
   }

---

338-349: Simplify the background gradient logic for better readability.

The nested ternary expression for the background style (lines 341-346) is difficult to parse. Extracting this into a computed variable would improve code clarity.

Apply this refactor:

+  const cardBackground = useMemo(() => {
+    if (isCurrentPlan || isUpgrade) {
+      return 'linear-gradient(180deg, rgba(14, 159, 119, 0.08) 0%, rgba(255, 255, 255, 0) 30%), #ffffff';
+    }
+    if (isHovered) {
+      return 'linear-gradient(180deg, #A4FFF6, #CFFFD3), #ffffff';
+    }
+    return '#ffffff';
+  }, [isCurrentPlan, isUpgrade, isHovered]);
+
   return (
     <div
       className="w-full max-w-[532px] p-6 box-border rounded-2xl shadow-[0px_4px_24px_rgba(0,0,0,0.08)]"
       style={{
-        background:
-          isCurrentPlan || isUpgrade
-            ? 'linear-gradient(180deg, rgba(14, 159, 119, 0.08) 0%, rgba(255, 255, 255, 0) 30%), #ffffff'
-            : isHovered
-              ? 'linear-gradient(180deg, #A4FFF6, #CFFFD3),  #ffffff'
-              : '#ffffff',
+        background: cardBackground,
       }}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 312537e and 7a7b7f6.

📒 Files selected for processing (2)

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (11 hunks)
• packages/i18n/src/en-US/ui.ts (5 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/i18n/src/en-US/ui.ts

🧰 Additional context used

📓 Path-based instructions (19)

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{jsx,tsx}: Always use tailwind css to style the component
Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation
Always use useCallback for function props to maintain referential equality
Always specify proper dependency arrays in useEffect to prevent infinite loops
Always avoid inline object/array creation in render to prevent unnecessary re-renders
Always use proper key props when rendering lists
Always split nested components with closures into separate components to avoid performance issues and improve code maintainability

**/*.{jsx,tsx}: Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation in React
Always use useCallback for function props to maintain referential equality in React
Always specify proper dependency arrays in useEffect to prevent infinite loops in React
Always avoid inline object/array creation in render to prevent unnecessary re-renders in React
Always use proper key props when rendering lists in React (avoid using index when possible)
Always split nested components with closures into separate components in React
Use lazy loading for components that are not immediately needed in React
Debounce handlers for events that might fire rapidly (resize, scroll, input) in React
Implement fallback UI for components that might fail in React
Use error boundaries to catch and handle runtime errors in React

**/*.{jsx,tsx}: Place each attribute on a new line when a component has multiple attributes in JSX
Use self-closing tags for elements without children in JSX
Keep JSX expressions simple, extract complex logic to variables
Put closing brackets for multi-line JSX on a new line

**/*.{jsx,tsx}: Component file names should match the component name
Organize function components in order: imports, type definitions, constants, component function, hook calls, e...

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{js,ts,jsx,tsx}: Always use optional chaining (?.) when accessing object properties
Always use nullish coalescing (??) or default values for potentially undefined values
Always check array existence before using array methods
Always validate object properties before destructuring
Always use single quotes for string literals in JavaScript/TypeScript code

**/*.{js,ts,jsx,tsx}: Use semicolons at the end of statements
Include spaces around operators (e.g., a + b instead of a+b)
Always use curly braces for control statements
Place opening braces on the same line as their statement

**/*.{js,ts,jsx,tsx}: Group import statements in order: React/framework libraries, third-party libraries, internal modules, relative path imports, type imports, style imports
Sort imports alphabetically within each import group
Leave a blank line between import groups
Extract complex logic into custom hooks
Use functional updates for state (e.g., setCount(prev => prev + 1))
Split complex state into multiple state variables rather than single large objects
Use useReducer for complex state logic instead of multiple useState calls

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}: All code comments MUST be written in English
All variable names, function names, class names, and other identifiers MUST use English words
Comments should be concise and explain 'why' rather than 'what'
Use proper grammar and punctuation in comments
Keep comments up-to-date when code changes
Document complex logic, edge cases, and important implementation details
Use clear, descriptive names that indicate purpose
Avoid abbreviations unless they are universally understood

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

Use JSDoc style comments for functions and classes in JavaScript/TypeScript

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{js,jsx,ts,tsx}: Use single quotes for string literals in TypeScript/JavaScript
Always use optional chaining (?.) when accessing object properties in TypeScript/JavaScript
Always use nullish coalescing (??) or default values for potentially undefined values in TypeScript/JavaScript
Always check array existence before using array methods in TypeScript/JavaScript
Validate object properties before destructuring in TypeScript/JavaScript
Use ES6+ features like arrow functions, destructuring, and spread operators in TypeScript/JavaScript
Avoid magic numbers and strings - use named constants in TypeScript/JavaScript
Use async/await instead of raw promises for asynchronous code in TypeScript/JavaScript

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx,css}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{jsx,tsx,css}: Use Tailwind CSS for styling components
Follow the utility-first approach with Tailwind CSS
Group related utility classes together in Tailwind CSS
Prefer Tailwind utilities over custom CSS when possible

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/03-typescript-guidelines.mdc)

**/*.{ts,tsx}: Avoid using any type whenever possible - use unknown type instead with proper type guards
Always define explicit return types for functions, especially for public APIs
Prefer extending existing types over creating entirely new types
Use TypeScript utility types (Partial<T>, Pick<T, K>, Omit<T, K>, Readonly<T>, Record<K, T>) to derive new types
Use union types and intersection types to combine existing types
Always import types explicitly using the import type syntax
Group type imports separately from value imports
Minimize creating local type aliases for imported types

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Maximum line length of 100 characters

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Use 2 spaces for indentation, no tabs

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json,yml,yaml,md}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

No trailing whitespace at the end of lines

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Each component file should contain only one main component

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Explicitly type props with interfaces or types in React components

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{css,scss,sass,less,js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/09-design-system.mdc)

**/*.{css,scss,sass,less,js,jsx,ts,tsx}: Primary color (#155EEF) should be used for main brand color in buttons, links, and accents
Error color (#F04438) should be used for error states and destructive actions
Success color (#12B76A) should be used for success states and confirmations
Warning color (#F79009) should be used for warnings and important notifications
Info color (#0BA5EC) should be used for informational elements

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

**/*.{tsx,ts}: Use the translation wrapper component and useTranslation hook in components
Ensure all user-facing text is translatable

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,json}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Support dynamic content with placeholders in translations

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,jsx,js,vue,css,scss,less}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue,css,scss,less}: Use the primary blue (#155EEF) for main UI elements, CTAs, and active states
Use red (#F04438) only for errors, warnings, and destructive actions
Use green (#12B76A) for success states and confirmations
Use orange (#F79009) for warning states and important notifications
Use blue (#0BA5EC) for informational elements
Primary buttons should be solid with the primary color
Secondary buttons should have a border with transparent or light background
Danger buttons should use the error color
Use consistent padding, border radius, and hover states for all buttons
Follow fixed button sizes based on their importance and context
Use consistent border radius (rounded-lg) for all cards
Apply light shadows (shadow-sm) for card elevation
Maintain consistent padding inside cards (p-4 or p-6)
Use subtle borders for card separation
Ensure proper spacing between card elements
Apply consistent styling to all form inputs
Use clear visual indicators for focus, hover, and error states in form elements
Apply proper spacing between elements using 8px, 16px, 24px increments
Ensure proper alignment of elements (left, center, or right)
Use responsive layouts that work across different device sizes
Maintain a minimum contrast ratio of 4.5:1 for text

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,jsx,js,vue}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue}: Include appropriate loading states for async actions in buttons
Group related form elements with appropriate spacing
Provide clear validation feedback for forms
Ensure proper labeling and accessibility for form elements
Ensure all interactive elements are keyboard accessible
Include appropriate ARIA attributes for complex components
Provide alternative text for images and icons
Support screen readers with semantic HTML elements

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

**/*.{ts,tsx,js,jsx}: Follow the TypeScript/JavaScript style guidelines
Ensure code is well-tested and documented

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

Use React best practices for frontend code

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

🧠 Learnings (8)

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue} : Include appropriate loading states for async actions in buttons

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Secondary buttons should have a border with transparent or light background

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use consistent padding, border radius, and hover states for all buttons

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Primary buttons should be solid with the primary color

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use subtle borders for card separation

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use clear visual indicators for focus, hover, and error states in form elements

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use consistent border radius (`rounded-lg`) for all cards

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Follow fixed button sizes based on their importance and context

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

🧬 Code graph analysis (1)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (3)

packages/ai-workspace-common/src/components/common/icon.tsx (1)

• IconLightning01 (197-197)

packages/request/src/requests/types.gen.ts (1)

• Subscription (1963-1992)

packages/openapi-schema/src/types.gen.ts (1)

• Subscription (1963-1992)

⏰ 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: build / Build
• GitHub Check: build / Build

🔇 Additional comments (1)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (1)

300-304: Good UI enhancements improve consistency and visual appeal.

The additions improve the subscription modal:

• Free plan now displays a clear $0/month price block (lines 300-304), providing visual consistency with paid plans.
• Proper planType and featureIndex props are passed to FeatureItem (line 329), enabling plan-specific styling.
• The Subscription icon (line 353) enhances the visual hierarchy of paid plan headers.

These changes align well with the PR's UI improvement objectives.

Also applies to: 329-329, 353-353

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/ai-workspace-common/src/components/canvas-template/template-list.tsx (1)

12-21: Unify marketplace URL and window.open behavior across CTAs

Right now, the end‑of‑list CTA opens ${window.location.origin}/marketplace with noopener,noreferrer, while the “not found” CTA still opens /workflow-marketplace without those options. If /marketplace is the new canonical marketplace route, it would be cleaner and less error‑prone to centralize the path and have both CTAs share it (and the same window.open options), instead of duplicating string literals and behavior.

You could refactor along these lines:

-// Marketplace link
-const MARKETPLACE_LINK = `${window.location.origin}/marketplace`;
+// Marketplace link
+const MARKETPLACE_PATH = '/marketplace';
+const MARKETPLACE_LINK =
+  typeof window !== 'undefined'
+    ? `${window.location.origin}${MARKETPLACE_PATH}`
+    : MARKETPLACE_PATH;
@@
   const handleGoToMarketplace = useCallback(() => {
-    window.open(MARKETPLACE_LINK, '_blank', 'noopener,noreferrer');
-  }, []);
+    window.open(MARKETPLACE_LINK, '_blank', 'noopener,noreferrer');
+  }, []);
@@
-  const handleGoToMarketplace = useCallback(() => {
-    window.open('/workflow-marketplace', '_blank');
-  }, []);
+  const handleGoToMarketplace = useCallback(() => {
+    window.open(MARKETPLACE_PATH, '_blank', 'noopener,noreferrer');
+  }, []);

This also removes a magic string and keeps the URL definition in one place, in line with the coding guidelines.
As per coding guidelines, please confirm that /marketplace is indeed the intended target for both CTAs before applying.

Also applies to: 153-168

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7a7b7f6 and 2c59fba.

📒 Files selected for processing (3)

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx (1 hunks)
• packages/i18n/src/en-US/ui.ts (6 hunks)
• packages/i18n/src/zh-Hans/ui.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/i18n/src/en-US/ui.ts

🧰 Additional context used

📓 Path-based instructions (22)

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{jsx,tsx}: Always use tailwind css to style the component
Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation
Always use useCallback for function props to maintain referential equality
Always specify proper dependency arrays in useEffect to prevent infinite loops
Always avoid inline object/array creation in render to prevent unnecessary re-renders
Always use proper key props when rendering lists
Always split nested components with closures into separate components to avoid performance issues and improve code maintainability

**/*.{jsx,tsx}: Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation in React
Always use useCallback for function props to maintain referential equality in React
Always specify proper dependency arrays in useEffect to prevent infinite loops in React
Always avoid inline object/array creation in render to prevent unnecessary re-renders in React
Always use proper key props when rendering lists in React (avoid using index when possible)
Always split nested components with closures into separate components in React
Use lazy loading for components that are not immediately needed in React
Debounce handlers for events that might fire rapidly (resize, scroll, input) in React
Implement fallback UI for components that might fail in React
Use error boundaries to catch and handle runtime errors in React

**/*.{jsx,tsx}: Place each attribute on a new line when a component has multiple attributes in JSX
Use self-closing tags for elements without children in JSX
Keep JSX expressions simple, extract complex logic to variables
Put closing brackets for multi-line JSX on a new line

**/*.{jsx,tsx}: Component file names should match the component name
Organize function components in order: imports, type definitions, constants, component function, hook calls, e...

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{js,ts,jsx,tsx}: Always use optional chaining (?.) when accessing object properties
Always use nullish coalescing (??) or default values for potentially undefined values
Always check array existence before using array methods
Always validate object properties before destructuring
Always use single quotes for string literals in JavaScript/TypeScript code

**/*.{js,ts,jsx,tsx}: Use semicolons at the end of statements
Include spaces around operators (e.g., a + b instead of a+b)
Always use curly braces for control statements
Place opening braces on the same line as their statement

**/*.{js,ts,jsx,tsx}: Group import statements in order: React/framework libraries, third-party libraries, internal modules, relative path imports, type imports, style imports
Sort imports alphabetically within each import group
Leave a blank line between import groups
Extract complex logic into custom hooks
Use functional updates for state (e.g., setCount(prev => prev + 1))
Split complex state into multiple state variables rather than single large objects
Use useReducer for complex state logic instead of multiple useState calls

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}: All code comments MUST be written in English
All variable names, function names, class names, and other identifiers MUST use English words
Comments should be concise and explain 'why' rather than 'what'
Use proper grammar and punctuation in comments
Keep comments up-to-date when code changes
Document complex logic, edge cases, and important implementation details
Use clear, descriptive names that indicate purpose
Avoid abbreviations unless they are universally understood

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{js,ts,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

Use JSDoc style comments for functions and classes in JavaScript/TypeScript

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{js,jsx,ts,tsx}: Use single quotes for string literals in TypeScript/JavaScript
Always use optional chaining (?.) when accessing object properties in TypeScript/JavaScript
Always use nullish coalescing (??) or default values for potentially undefined values in TypeScript/JavaScript
Always check array existence before using array methods in TypeScript/JavaScript
Validate object properties before destructuring in TypeScript/JavaScript
Use ES6+ features like arrow functions, destructuring, and spread operators in TypeScript/JavaScript
Avoid magic numbers and strings - use named constants in TypeScript/JavaScript
Use async/await instead of raw promises for asynchronous code in TypeScript/JavaScript

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{jsx,tsx,css}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{jsx,tsx,css}: Use Tailwind CSS for styling components
Follow the utility-first approach with Tailwind CSS
Group related utility classes together in Tailwind CSS
Prefer Tailwind utilities over custom CSS when possible

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/03-typescript-guidelines.mdc)

**/*.{ts,tsx}: Avoid using any type whenever possible - use unknown type instead with proper type guards
Always define explicit return types for functions, especially for public APIs
Prefer extending existing types over creating entirely new types
Use TypeScript utility types (Partial<T>, Pick<T, K>, Omit<T, K>, Readonly<T>, Record<K, T>) to derive new types
Use union types and intersection types to combine existing types
Always import types explicitly using the import type syntax
Group type imports separately from value imports
Minimize creating local type aliases for imported types

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{js,ts,jsx,tsx,css,json}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Maximum line length of 100 characters

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{js,ts,jsx,tsx,css,json,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Use 2 spaces for indentation, no tabs

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{js,ts,jsx,tsx,css,json,yml,yaml,md}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

No trailing whitespace at the end of lines

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{jsx,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Each component file should contain only one main component

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Explicitly type props with interfaces or types in React components

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx

**/*.{css,scss,sass,less,js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/09-design-system.mdc)

**/*.{css,scss,sass,less,js,jsx,ts,tsx}: Primary color (#155EEF) should be used for main brand color in buttons, links, and accents
Error color (#F04438) should be used for error states and destructive actions
Success color (#12B76A) should be used for success states and confirmations
Warning color (#F79009) should be used for warnings and important notifications
Info color (#0BA5EC) should be used for informational elements

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

**/*.{tsx,ts}: Use the translation wrapper component and useTranslation hook in components
Ensure all user-facing text is translatable

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{tsx,ts,json}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Support dynamic content with placeholders in translations

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{tsx,ts,jsx,js,vue,css,scss,less}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue,css,scss,less}: Use the primary blue (#155EEF) for main UI elements, CTAs, and active states
Use red (#F04438) only for errors, warnings, and destructive actions
Use green (#12B76A) for success states and confirmations
Use orange (#F79009) for warning states and important notifications
Use blue (#0BA5EC) for informational elements
Primary buttons should be solid with the primary color
Secondary buttons should have a border with transparent or light background
Danger buttons should use the error color
Use consistent padding, border radius, and hover states for all buttons
Follow fixed button sizes based on their importance and context
Use consistent border radius (rounded-lg) for all cards
Apply light shadows (shadow-sm) for card elevation
Maintain consistent padding inside cards (p-4 or p-6)
Use subtle borders for card separation
Ensure proper spacing between card elements
Apply consistent styling to all form inputs
Use clear visual indicators for focus, hover, and error states in form elements
Apply proper spacing between elements using 8px, 16px, 24px increments
Ensure proper alignment of elements (left, center, or right)
Use responsive layouts that work across different device sizes
Maintain a minimum contrast ratio of 4.5:1 for text

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{tsx,ts,jsx,js,vue}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue}: Include appropriate loading states for async actions in buttons
Group related form elements with appropriate spacing
Provide clear validation feedback for forms
Ensure proper labeling and accessibility for form elements
Ensure all interactive elements are keyboard accessible
Include appropriate ARIA attributes for complex components
Provide alternative text for images and icons
Support screen readers with semantic HTML elements

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

**/*.{ts,tsx,js,jsx}: Follow the TypeScript/JavaScript style guidelines
Ensure code is well-tested and documented

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx
• packages/i18n/src/zh-Hans/ui.ts

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

Use React best practices for frontend code

Files:

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx

**/{i18n,locales,translations,lang}/**/*.{json,ts,tsx,js,jsx,properties}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

Use Chinese for all user-facing communication

Files:

• packages/i18n/src/zh-Hans/ui.ts

packages/i18n/src/{en-US,zh-Hans}/**

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Add new translation keys to both language files (en-US and zh-Hans)

Files:

• packages/i18n/src/zh-Hans/ui.ts

packages/i18n/src/**

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

packages/i18n/src/**: Maintain consistency in translation key naming conventions
Use descriptive translation keys that reflect the content
Group related translation keys together in the translation file structure
Use namespaces for different sections of the application in translation keys
Follow a hierarchical structure for nested components in translation key organization

Files:

• packages/i18n/src/zh-Hans/ui.ts

🧠 Learnings (3)

📚 Learning: 2025-11-25T03:03:19.158Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/{i18n,locales,translations,lang}/**/*.{json,ts,tsx,js,jsx,properties} : Use Chinese for all user-facing communication

Applied to files:

• packages/i18n/src/zh-Hans/ui.ts

📚 Learning: 2025-11-25T03:04:41.334Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to packages/i18n/src/{en-US,zh-Hans}/** : Add new translation keys to both language files (en-US and zh-Hans)

Applied to files:

• packages/i18n/src/zh-Hans/ui.ts

📚 Learning: 2025-11-25T03:04:41.334Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to **/*.{tsx,ts} : Ensure all user-facing text is translatable

Applied to files:

• packages/i18n/src/zh-Hans/ui.ts

⏰ 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: build / Build
• GitHub Check: build / Build

🔇 Additional comments (1)

packages/i18n/src/zh-Hans/ui.ts (1)

967-972: Updated marketplace CTA text looks good

frontPage.template.endMessage.goToMarketplace now uses自然、清晰的中文“探索更多模板”，保持了含义一致且未引入新 key，符合 i18n 文件需用中文的约束。
Based on learnings, this matches the Chinese‑only requirement for user‑facing text under packages/i18n/src/zh-Hans/**.

[coderabbitai]

Actionable comments posted: 0

♻️ Duplicate comments (1)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (1)

459-459: Plan removal issue already flagged.

The reduction of planTypes to ['free', 'plus'] and its implications (broken upgrade paths, invisible current plans, type mismatches) were already comprehensively documented in the previous review.

🧹 Nitpick comments (6)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (6)

69-70: Avoid !important overrides and fix line length.

Using !important flags (!border-solid, !border-black, !border-gray-200) suggests specificity conflicts that should be resolved at the source. Additionally, line 70 exceeds the 100-character maximum.

As per coding guidelines, maximum line length is 100 characters and Tailwind utilities should not require !important overrides.

Refactor to remove !important and break long lines:

       ${
         isSelected
-            ? 'border-2 !border-solid !border-black bg-white'
-            : 'border-2 !border-solid !border-gray-200 bg-[#FAFAFA] hover:border-[#0E9F77]'
+            ? 'border-2 border-solid border-black bg-white'
+            : 'border-2 border-solid border-gray-200 bg-[#FAFAFA] ' +
+              'hover:border-[#0E9F77]'
       }

---

80-83: Remove !important overrides from Tag styling.

The Tag component uses multiple !important flags (!m-0, !px-2, !py-0.5, etc.), indicating a specificity conflict with antd's default styles.

As per coding guidelines, prefer Tailwind utilities without !important. Consider using antd's classNames prop or a wrapper component with proper CSS specificity:

-          <Tag
-            className="!m-0 !px-2 !py-0.5 !text-xs !font-medium !rounded-full !border-0"
-            color="orange"
-          >
+          <Tag
+            className="m-0 px-2 py-0.5 text-xs font-medium rounded-full border-0"
+            color="orange"
+            bordered={false}
+          >

If overrides are still needed, investigate the root cause in the component's SCSS file.

---

111-112: Consider using stricter types for planType.

The planType prop is typed as string, but based on the codebase it should be constrained to valid subscription plan values.

Use a union type or import SubscriptionPlanType for better type safety:

 interface FeatureItemProps {
   feature: Feature;
   isEnterprise?: boolean;
   isLast?: boolean;
-  planType?: string;
+  planType?: 'free' | 'plus' | 'starter' | 'maker' | 'enterprise';
   featureIndex?: number;
 }

Or import the existing type:

planType?: SubscriptionPlanType;

---

117-119: Consider safer parsing for multi-line feature names.

Splitting feature.name on \n assumes a specific format. If the data source changes or includes unexpected newlines, this could break.

Add validation or use a more explicit data structure:

-    const parts = feature.name.split('\n');
-    const name = parts[0];
-    const description = parts.length > 1 ? parts.slice(1).join('\n') : null;
+    const parts = feature.name?.split('\n') ?? [];
+    const name = parts[0] ?? feature.name;
+    const description = parts.length > 1 ? parts.slice(1).join('\n') : null;

Alternatively, update the Feature interface to include description as a separate field.

---

348-349: Consider extracting hover handlers with useCallback.

The inline event handlers are simple, but per coding guidelines, consider using useCallback to maintain referential equality.

As per coding guidelines, use useCallback for function props:

+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
   <div
     className="..."
     style={{...}}
-    onMouseEnter={() => setIsHovered(true)}
-    onMouseLeave={() => setIsHovered(false)}
+    onMouseEnter={handleMouseEnter}
+    onMouseLeave={handleMouseLeave}
   >

---

56-430: Consider splitting tightly coupled sub-components into separate files.

The file contains four components: PriceOption, FeatureItem, PlanItem, and PriceContent. While these are internal to PriceContent, the file is lengthy (~587 lines).

As per coding guidelines, "Each component file should contain only one main component." Consider extracting into separate files:

• priceContent/PriceOption.tsx
• priceContent/FeatureItem.tsx
• priceContent/PlanItem.tsx
• priceContent/index.tsx (main PriceContent)

This improves maintainability and follows the single-responsibility principle, though the current structure is acceptable for tightly coupled components.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2c59fba and 7a0b611.

📒 Files selected for processing (4)

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx (1 hunks)
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (11 hunks)
• packages/i18n/src/en-US/ui.ts (8 hunks)
• packages/i18n/src/zh-Hans/ui.ts (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

• packages/i18n/src/zh-Hans/ui.ts
• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx

🧰 Additional context used

📓 Path-based instructions (19)

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{jsx,tsx}: Always use tailwind css to style the component
Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation
Always use useCallback for function props to maintain referential equality
Always specify proper dependency arrays in useEffect to prevent infinite loops
Always avoid inline object/array creation in render to prevent unnecessary re-renders
Always use proper key props when rendering lists
Always split nested components with closures into separate components to avoid performance issues and improve code maintainability

**/*.{jsx,tsx}: Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation in React
Always use useCallback for function props to maintain referential equality in React
Always specify proper dependency arrays in useEffect to prevent infinite loops in React
Always avoid inline object/array creation in render to prevent unnecessary re-renders in React
Always use proper key props when rendering lists in React (avoid using index when possible)
Always split nested components with closures into separate components in React
Use lazy loading for components that are not immediately needed in React
Debounce handlers for events that might fire rapidly (resize, scroll, input) in React
Implement fallback UI for components that might fail in React
Use error boundaries to catch and handle runtime errors in React

**/*.{jsx,tsx}: Place each attribute on a new line when a component has multiple attributes in JSX
Use self-closing tags for elements without children in JSX
Keep JSX expressions simple, extract complex logic to variables
Put closing brackets for multi-line JSX on a new line

**/*.{jsx,tsx}: Component file names should match the component name
Organize function components in order: imports, type definitions, constants, component function, hook calls, e...

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{js,ts,jsx,tsx}: Always use optional chaining (?.) when accessing object properties
Always use nullish coalescing (??) or default values for potentially undefined values
Always check array existence before using array methods
Always validate object properties before destructuring
Always use single quotes for string literals in JavaScript/TypeScript code

**/*.{js,ts,jsx,tsx}: Use semicolons at the end of statements
Include spaces around operators (e.g., a + b instead of a+b)
Always use curly braces for control statements
Place opening braces on the same line as their statement

**/*.{js,ts,jsx,tsx}: Group import statements in order: React/framework libraries, third-party libraries, internal modules, relative path imports, type imports, style imports
Sort imports alphabetically within each import group
Leave a blank line between import groups
Extract complex logic into custom hooks
Use functional updates for state (e.g., setCount(prev => prev + 1))
Split complex state into multiple state variables rather than single large objects
Use useReducer for complex state logic instead of multiple useState calls

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}: All code comments MUST be written in English
All variable names, function names, class names, and other identifiers MUST use English words
Comments should be concise and explain 'why' rather than 'what'
Use proper grammar and punctuation in comments
Keep comments up-to-date when code changes
Document complex logic, edge cases, and important implementation details
Use clear, descriptive names that indicate purpose
Avoid abbreviations unless they are universally understood

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

Use JSDoc style comments for functions and classes in JavaScript/TypeScript

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{js,jsx,ts,tsx}: Use single quotes for string literals in TypeScript/JavaScript
Always use optional chaining (?.) when accessing object properties in TypeScript/JavaScript
Always use nullish coalescing (??) or default values for potentially undefined values in TypeScript/JavaScript
Always check array existence before using array methods in TypeScript/JavaScript
Validate object properties before destructuring in TypeScript/JavaScript
Use ES6+ features like arrow functions, destructuring, and spread operators in TypeScript/JavaScript
Avoid magic numbers and strings - use named constants in TypeScript/JavaScript
Use async/await instead of raw promises for asynchronous code in TypeScript/JavaScript

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx,css}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{jsx,tsx,css}: Use Tailwind CSS for styling components
Follow the utility-first approach with Tailwind CSS
Group related utility classes together in Tailwind CSS
Prefer Tailwind utilities over custom CSS when possible

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/03-typescript-guidelines.mdc)

**/*.{ts,tsx}: Avoid using any type whenever possible - use unknown type instead with proper type guards
Always define explicit return types for functions, especially for public APIs
Prefer extending existing types over creating entirely new types
Use TypeScript utility types (Partial<T>, Pick<T, K>, Omit<T, K>, Readonly<T>, Record<K, T>) to derive new types
Use union types and intersection types to combine existing types
Always import types explicitly using the import type syntax
Group type imports separately from value imports
Minimize creating local type aliases for imported types

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Maximum line length of 100 characters

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Use 2 spaces for indentation, no tabs

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json,yml,yaml,md}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

No trailing whitespace at the end of lines

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Each component file should contain only one main component

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Explicitly type props with interfaces or types in React components

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{css,scss,sass,less,js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/09-design-system.mdc)

**/*.{css,scss,sass,less,js,jsx,ts,tsx}: Primary color (#155EEF) should be used for main brand color in buttons, links, and accents
Error color (#F04438) should be used for error states and destructive actions
Success color (#12B76A) should be used for success states and confirmations
Warning color (#F79009) should be used for warnings and important notifications
Info color (#0BA5EC) should be used for informational elements

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

**/*.{tsx,ts}: Use the translation wrapper component and useTranslation hook in components
Ensure all user-facing text is translatable

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,json}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Support dynamic content with placeholders in translations

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,jsx,js,vue,css,scss,less}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue,css,scss,less}: Use the primary blue (#155EEF) for main UI elements, CTAs, and active states
Use red (#F04438) only for errors, warnings, and destructive actions
Use green (#12B76A) for success states and confirmations
Use orange (#F79009) for warning states and important notifications
Use blue (#0BA5EC) for informational elements
Primary buttons should be solid with the primary color
Secondary buttons should have a border with transparent or light background
Danger buttons should use the error color
Use consistent padding, border radius, and hover states for all buttons
Follow fixed button sizes based on their importance and context
Use consistent border radius (rounded-lg) for all cards
Apply light shadows (shadow-sm) for card elevation
Maintain consistent padding inside cards (p-4 or p-6)
Use subtle borders for card separation
Ensure proper spacing between card elements
Apply consistent styling to all form inputs
Use clear visual indicators for focus, hover, and error states in form elements
Apply proper spacing between elements using 8px, 16px, 24px increments
Ensure proper alignment of elements (left, center, or right)
Use responsive layouts that work across different device sizes
Maintain a minimum contrast ratio of 4.5:1 for text

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,jsx,js,vue}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue}: Include appropriate loading states for async actions in buttons
Group related form elements with appropriate spacing
Provide clear validation feedback for forms
Ensure proper labeling and accessibility for form elements
Ensure all interactive elements are keyboard accessible
Include appropriate ARIA attributes for complex components
Provide alternative text for images and icons
Support screen readers with semantic HTML elements

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

**/*.{ts,tsx,js,jsx}: Follow the TypeScript/JavaScript style guidelines
Ensure code is well-tested and documented

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

Use React best practices for frontend code

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

🧠 Learnings (8)

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue} : Include appropriate loading states for async actions in buttons

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Secondary buttons should have a border with transparent or light background

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use consistent padding, border radius, and hover states for all buttons

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Primary buttons should be solid with the primary color

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use subtle borders for card separation

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use clear visual indicators for focus, hover, and error states in form elements

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use consistent border radius (`rounded-lg`) for all cards

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Follow fixed button sizes based on their importance and context

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

🧬 Code graph analysis (1)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (3)

packages/openapi-schema/src/types.gen.ts (1)

• Subscription (1963-1992)

packages/request/src/requests/types.gen.ts (1)

• Subscription (1963-1992)

packages/ai-workspace-common/src/components/settings/subscription/index.tsx (1)

• Subscription (136-610)

⏰ 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: build / Build
• GitHub Check: build / Build

🔇 Additional comments (5)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (5)

218-218: LGTM: Hover state implementation.

The isHovered state is properly initialized and used for conditional background gradients on paid plan cards.

---

277-277: LGTM: Icon styling update.

The lightning icon color update to #0E9F77 (green) aligns with the success color palette used throughout the component.

---

300-304: LGTM: Free plan price display added.

Adding an explicit "$0/month" price block improves UI consistency between free and paid plan cards.

---

329-329: LGTM: FeatureItem prop forwarding.

The planType and featureIndex props are correctly passed to FeatureItem for conditional rendering logic.

Also applies to: 421-422

---

353-353: LGTM: Subscription icon added to plan header.

The Subscription icon enhances the visual hierarchy of paid plan cards.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/i18n/src/zh-Hans/ui.ts (1)

143-157: Remove large commented blocks from both translation files and verify pointFreeTools feature is intentionally disabled.

This commented block exists in both packages/i18n/src/zh-Hans/ui.ts (line 145) and packages/i18n/src/en-US/ui.ts (line 3652). The corresponding rendering logic for pointFreeTools remains active in priceContent.tsx (lines 128-156), creating a disconnect between disabled translations and active code. If this feature is permanently disabled, remove the commented translations from both language files and verify the rendering logic is also removed or guarded against being called.

♻️ Duplicate comments (1)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (1)

459-459: Incomplete plan removal creates critical issues (duplicate concern).

This change was previously flagged in an earlier review: reducing planTypes to ['free', 'plus'] creates critical issues:

1. Current plan display: Users with active starter/maker/enterprise subscriptions won't see pricing cards for their plans (line 549 only maps the planTypes array)
2. Type inconsistency: SubscriptionPlanType globally includes all 5 plans, but UI only renders 2
3. Orphaned data: PlanPriorityMap (lines 40-44) and price data (lines 228-231) still reference removed plans

This was addressed in commit 7a7b7f6, but if this is a new occurrence, complete the migration by:

• Updating PlanPriorityMap enum to remove starter/maker/enterprise
• Removing price data for legacy plans
• Handling legacy plan display for existing subscribers

✅ If commit 7a7b7f6 resolved this, disregard. Otherwise, this requires immediate attention before deployment.

🧹 Nitpick comments (5)

packages/i18n/src/zh-Hans/ui.ts (1)

141-141: Remove commented-out code or document temporary removal.

Commented-out translation entries create maintenance debt. If this feature is permanently removed, delete the line entirely. If temporarily disabled, add a comment explaining why and when it will be restored.

Apply this diff to remove the commented line:

         '每月积分\n2000点',
-        //'首次订阅额外赠送\n2000点',
         '访问丰富的工具库',

Or document if temporary:

         '每月积分\n2000点',
-        //'首次订阅额外赠送\n2000点',
+        // TODO(TICKET-XXX): Re-enable first subscription bonus after credit system update
+        // '首次订阅额外赠送\n2000点',
         '访问丰富的工具库',

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (4)

69-70: Avoid !important flags; investigate CSS specificity conflicts.

Lines 69-70 use multiple !important flags (!border-solid, !border-black, !border-gray-200), which suggests CSS specificity conflicts. The !border-solid is also redundant since Tailwind border utilities are solid by default.

Investigate why !important is needed and resolve the underlying specificity issue. Consider:

1. Checking if parent components have conflicting styles
2. Using more specific selectors instead of !important
3. Ensuring proper CSS cascade order

As per coding guidelines, maintain consistent styling without relying on !important flags.

---

80-85: Multiple !important flags indicate styling conflicts.

The yearly discount Tag uses several !important overrides (!m-0, !px-2, !py-0.5, !text-xs, !font-medium, !rounded-full, !border-0). This pattern suggests Ant Design's default Tag styles are conflicting with your design.

Consider creating a custom styled component or CSS class instead of multiple inline overrides:

// In a separate styles file or styled component
const StyledDiscountTag = styled(Tag)`
  margin: 0;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9999px;
  border: 0;
`;

// Usage
<StyledDiscountTag color="orange">
  {t('subscription.save20')}
</StyledDiscountTag>

---

117-126: Add validation for feature name format and extract conditional logic.

The feature name parsing (lines 117-119) assumes a newline separator exists, which is fragile. The conditional styling logic (lines 122-125) is specific to plus plan indices and could be extracted to a helper function for clarity.

// Extract to helper function
const shouldUseGreenDescription = (
  planType?: string,
  featureIndex?: number
): boolean => {
  return planType === 'plus' && 
         featureIndex !== undefined && 
         (featureIndex === 1 || featureIndex === 2);
};

// Add validation for feature name format
const parseFeatureName = (name: string): { name: string; description: string | null } => {
  const parts = name.split('\n');
  if (parts.length < 1) {
    console.warn('Feature name is empty or invalid:', name);
    return { name: '', description: null };
  }
  return {
    name: parts[0],
    description: parts.length > 1 ? parts.slice(1).join('\n') : null,
  };
};

// Usage in component
const { name, description } = parseFeatureName(feature.name);
const isGreenDescription = shouldUseGreenDescription(planType, featureIndex);

As per coding guidelines, extract complex logic into helper functions for maintainability.

---

344-350: Verify hover gradient design with stakeholders.

The hover gradient uses bright cyan-to-green colors (#A4FFF6 to #CFFFD3) that create a bold visual effect. While the implementation is correct, consider verifying with design stakeholders that this intensity aligns with your brand guidelines.

The hover state could be made configurable via CSS variables for easier theming:

style={{
  background:
    isCurrentPlan || isUpgrade
      ? 'linear-gradient(180deg, rgba(14, 159, 119, 0.08) 0%, rgba(255, 255, 255, 0) 30%), #ffffff'
      : isHovered
        ? 'var(--plan-hover-gradient, linear-gradient(180deg, #A4FFF6, #CFFFD3)), #ffffff'
        : '#ffffff',
}}

As per coding guidelines, maintain consistent hover states across all interactive elements.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7a0b611 and 71e08fd.

📒 Files selected for processing (4)

• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx (1 hunks)
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (11 hunks)
• packages/i18n/src/en-US/ui.ts (8 hunks)
• packages/i18n/src/zh-Hans/ui.ts (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• packages/i18n/src/en-US/ui.ts
• packages/ai-workspace-common/src/components/canvas-template/template-list.tsx

🧰 Additional context used

📓 Path-based instructions (22)

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{js,ts,jsx,tsx}: Always use optional chaining (?.) when accessing object properties
Always use nullish coalescing (??) or default values for potentially undefined values
Always check array existence before using array methods
Always validate object properties before destructuring
Always use single quotes for string literals in JavaScript/TypeScript code

**/*.{js,ts,jsx,tsx}: Use semicolons at the end of statements
Include spaces around operators (e.g., a + b instead of a+b)
Always use curly braces for control statements
Place opening braces on the same line as their statement

**/*.{js,ts,jsx,tsx}: Group import statements in order: React/framework libraries, third-party libraries, internal modules, relative path imports, type imports, style imports
Sort imports alphabetically within each import group
Leave a blank line between import groups
Extract complex logic into custom hooks
Use functional updates for state (e.g., setCount(prev => prev + 1))
Split complex state into multiple state variables rather than single large objects
Use useReducer for complex state logic instead of multiple useState calls

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}: All code comments MUST be written in English
All variable names, function names, class names, and other identifiers MUST use English words
Comments should be concise and explain 'why' rather than 'what'
Use proper grammar and punctuation in comments
Keep comments up-to-date when code changes
Document complex logic, edge cases, and important implementation details
Use clear, descriptive names that indicate purpose
Avoid abbreviations unless they are universally understood

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

Use JSDoc style comments for functions and classes in JavaScript/TypeScript

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/{i18n,locales,translations,lang}/**/*.{json,ts,tsx,js,jsx,properties}

📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)

Use Chinese for all user-facing communication

Files:

• packages/i18n/src/zh-Hans/ui.ts

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{js,jsx,ts,tsx}: Use single quotes for string literals in TypeScript/JavaScript
Always use optional chaining (?.) when accessing object properties in TypeScript/JavaScript
Always use nullish coalescing (??) or default values for potentially undefined values in TypeScript/JavaScript
Always check array existence before using array methods in TypeScript/JavaScript
Validate object properties before destructuring in TypeScript/JavaScript
Use ES6+ features like arrow functions, destructuring, and spread operators in TypeScript/JavaScript
Avoid magic numbers and strings - use named constants in TypeScript/JavaScript
Use async/await instead of raw promises for asynchronous code in TypeScript/JavaScript

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/03-typescript-guidelines.mdc)

**/*.{ts,tsx}: Avoid using any type whenever possible - use unknown type instead with proper type guards
Always define explicit return types for functions, especially for public APIs
Prefer extending existing types over creating entirely new types
Use TypeScript utility types (Partial<T>, Pick<T, K>, Omit<T, K>, Readonly<T>, Record<K, T>) to derive new types
Use union types and intersection types to combine existing types
Always import types explicitly using the import type syntax
Group type imports separately from value imports
Minimize creating local type aliases for imported types

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Maximum line length of 100 characters

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Use 2 spaces for indentation, no tabs

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{js,ts,jsx,tsx,css,json,yml,yaml,md}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

No trailing whitespace at the end of lines

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{css,scss,sass,less,js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/09-design-system.mdc)

**/*.{css,scss,sass,less,js,jsx,ts,tsx}: Primary color (#155EEF) should be used for main brand color in buttons, links, and accents
Error color (#F04438) should be used for error states and destructive actions
Success color (#12B76A) should be used for success states and confirmations
Warning color (#F79009) should be used for warnings and important notifications
Info color (#0BA5EC) should be used for informational elements

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

packages/i18n/src/{en-US,zh-Hans}/**

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Add new translation keys to both language files (en-US and zh-Hans)

Files:

• packages/i18n/src/zh-Hans/ui.ts

packages/i18n/src/**

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

packages/i18n/src/**: Maintain consistency in translation key naming conventions
Use descriptive translation keys that reflect the content
Group related translation keys together in the translation file structure
Use namespaces for different sections of the application in translation keys
Follow a hierarchical structure for nested components in translation key organization

Files:

• packages/i18n/src/zh-Hans/ui.ts

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

**/*.{tsx,ts}: Use the translation wrapper component and useTranslation hook in components
Ensure all user-facing text is translatable

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,json}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Support dynamic content with placeholders in translations

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,jsx,js,vue,css,scss,less}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue,css,scss,less}: Use the primary blue (#155EEF) for main UI elements, CTAs, and active states
Use red (#F04438) only for errors, warnings, and destructive actions
Use green (#12B76A) for success states and confirmations
Use orange (#F79009) for warning states and important notifications
Use blue (#0BA5EC) for informational elements
Primary buttons should be solid with the primary color
Secondary buttons should have a border with transparent or light background
Danger buttons should use the error color
Use consistent padding, border radius, and hover states for all buttons
Follow fixed button sizes based on their importance and context
Use consistent border radius (rounded-lg) for all cards
Apply light shadows (shadow-sm) for card elevation
Maintain consistent padding inside cards (p-4 or p-6)
Use subtle borders for card separation
Ensure proper spacing between card elements
Apply consistent styling to all form inputs
Use clear visual indicators for focus, hover, and error states in form elements
Apply proper spacing between elements using 8px, 16px, 24px increments
Ensure proper alignment of elements (left, center, or right)
Use responsive layouts that work across different device sizes
Maintain a minimum contrast ratio of 4.5:1 for text

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,ts,jsx,js,vue}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue}: Include appropriate loading states for async actions in buttons
Group related form elements with appropriate spacing
Provide clear validation feedback for forms
Ensure proper labeling and accessibility for form elements
Ensure all interactive elements are keyboard accessible
Include appropriate ARIA attributes for complex components
Provide alternative text for images and icons
Support screen readers with semantic HTML elements

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

**/*.{ts,tsx,js,jsx}: Follow the TypeScript/JavaScript style guidelines
Ensure code is well-tested and documented

Files:

• packages/i18n/src/zh-Hans/ui.ts
• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{jsx,tsx}: Always use tailwind css to style the component
Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation
Always use useCallback for function props to maintain referential equality
Always specify proper dependency arrays in useEffect to prevent infinite loops
Always avoid inline object/array creation in render to prevent unnecessary re-renders
Always use proper key props when rendering lists
Always split nested components with closures into separate components to avoid performance issues and improve code maintainability

**/*.{jsx,tsx}: Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation in React
Always use useCallback for function props to maintain referential equality in React
Always specify proper dependency arrays in useEffect to prevent infinite loops in React
Always avoid inline object/array creation in render to prevent unnecessary re-renders in React
Always use proper key props when rendering lists in React (avoid using index when possible)
Always split nested components with closures into separate components in React
Use lazy loading for components that are not immediately needed in React
Debounce handlers for events that might fire rapidly (resize, scroll, input) in React
Implement fallback UI for components that might fail in React
Use error boundaries to catch and handle runtime errors in React

**/*.{jsx,tsx}: Place each attribute on a new line when a component has multiple attributes in JSX
Use self-closing tags for elements without children in JSX
Keep JSX expressions simple, extract complex logic to variables
Put closing brackets for multi-line JSX on a new line

**/*.{jsx,tsx}: Component file names should match the component name
Organize function components in order: imports, type definitions, constants, component function, hook calls, e...

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx,css}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{jsx,tsx,css}: Use Tailwind CSS for styling components
Follow the utility-first approach with Tailwind CSS
Group related utility classes together in Tailwind CSS
Prefer Tailwind utilities over custom CSS when possible

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{jsx,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Each component file should contain only one main component

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Explicitly type props with interfaces or types in React components

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

Use React best practices for frontend code

Files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

🧠 Learnings (11)

📚 Learning: 2025-11-25T03:03:19.158Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/{i18n,locales,translations,lang}/**/*.{json,ts,tsx,js,jsx,properties} : Use Chinese for all user-facing communication

Applied to files:

• packages/i18n/src/zh-Hans/ui.ts

📚 Learning: 2025-11-25T03:04:41.334Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to packages/i18n/src/{en-US,zh-Hans}/** : Add new translation keys to both language files (en-US and zh-Hans)

Applied to files:

• packages/i18n/src/zh-Hans/ui.ts

📚 Learning: 2025-11-25T03:05:15.932Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/16-language-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:05:15.932Z
Learning: UI text should default to English with i18n support for Chinese

Applied to files:

• packages/i18n/src/zh-Hans/ui.ts

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue} : Include appropriate loading states for async actions in buttons

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Secondary buttons should have a border with transparent or light background

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use consistent padding, border radius, and hover states for all buttons

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Primary buttons should be solid with the primary color

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use subtle borders for card separation

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use clear visual indicators for focus, hover, and error states in form elements

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Use consistent border radius (`rounded-lg`) for all cards

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

📚 Learning: 2025-11-25T03:05:07.580Z

Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue,css,scss,less} : Follow fixed button sizes based on their importance and context

Applied to files:

• packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx

🧬 Code graph analysis (1)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (4)

packages/ai-workspace-common/src/components/common/icon.tsx (1)

• IconLightning01 (197-197)

packages/request/src/requests/types.gen.ts (1)

• Subscription (1963-1992)

packages/openapi-schema/src/types.gen.ts (1)

• Subscription (1963-1992)

packages/ai-workspace-common/src/components/settings/subscription/index.tsx (1)

• Subscription (136-610)

⏰ 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: build / Build
• GitHub Check: build / Build

🔇 Additional comments (3)

packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx (2)

111-113: Interface extension supports plan-specific feature rendering.

Adding optional planType and featureIndex props enables conditional styling for different plans. The optionality maintains backward compatibility with existing FeatureItem usage.

---

277-281: Icon size and color updates align with design refresh.

The lightning icon size (20px) and green color (#0E9F77) match the primary brand color used throughout the UI (confirmed in coding guidelines). This creates visual consistency with the upgrade action.

packages/i18n/src/zh-Hans/ui.ts (1)

971-971: Translation consistency verified for the updated key.

The Chinese translation update at line 971 (frontPage.template.endMessage.goToMarketplace: '探索更多模板') correctly corresponds to the English version ('Explore More Templates'), maintaining consistency across both language files.

However, note that there are two separate goToMarketplace keys in each file with different translations—the one at line 971 is consistent, but ensure the other instance under notFoundQuestion is intentionally different ('Go to Marketplace' in English vs. '前往市场' in Chinese).

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# Search for pointFreeTools references in i18n files
echo "=== Searching for pointFreeTools in i18n files ==="
rg "pointFreeTools" packages/i18n/src -g "*.{ts,json}" -C 2

# Search for pointFreeTools in the entire packages directory
echo -e "\n=== Searching for pointFreeTools in entire packages ==="
rg "pointFreeTools" packages -g "*.{ts,tsx,js,jsx,json}" -C 1

# Check the zh-Hans translation file specifically
echo -e "\n=== Checking zh-Hans UI file ==="
cat packages/i18n/src/zh-Hans/ui.ts | head -170 | tail -40

Repository: refly-ai/refly

Length of output: 2784

---

Remove dead code for pointFreeTools feature rendering.

The rendering logic for pointFreeTools type features (lines 128-156) is dead code. The corresponding feature data is commented out in all translation files (both en-US and zh-Hans), so this branch will never execute. Remove this unused rendering logic to reduce code complexity and maintenance burden.

🤖 Prompt for AI Agents

In
packages/ai-workspace-common/src/components/settings/subscribe-modal/priceContent.tsx
around lines 128 to 156, the JSX branch that renders features of type
'pointFreeTools' is dead code because the corresponding feature data is removed
from all translation files; delete this entire conditional block (the if
(feature.type === 'pointFreeTools' && feature.items && feature.items.length > 0)
{ ... } section) and any now-unused imports or variables that become redundant
as a result; after removal, run a build/type-check and search translation/usage
to ensure no remaining references to 'pointFreeTools' remain.