Refactor/aliases cleanup #2111
Refactor/aliases cleanup #2111
Conversation
…ences - Replace bg-inverse/5 → bg-[color-mix(in_srgb,var(--color-text-inverse,var(--color-white,#fff))_5%,transparent)] - Replace hover:bg-inverse/5 → hover:bg-[color-mix(...)] - Applied to settings input fields and dialog backgrounds (5 files) - Preparation for removing bg-inverse aliases from aliases.css
…erences - Replace bg-inverse/5, /10, /15, /20, /30 → bg-[color-mix(...)] - Replace bg-inverse (no opacity) → bg-[var(--color-text-inverse,var(--color-white,#fff))] - Replace hover:bg-inverse/5, /10, /20, /80 → hover:bg-[color-mix(...)] - Replace focus-visible:bg-inverse/10 → focus-visible:bg-[color-mix(...)] - Applied to all workflow designer UI components, settings pages, auth forms, and UI components - All bg-inverse usages now use direct CSS variable references - Preparation for removing bg-inverse aliases from aliases.css
- Remove all bg-inverse/* class definitions (bg-inverse, bg-inverse/5, /10, /15, /20, /30) - Remove hover:, focus:, active: variants for bg-inverse - All bg-inverse usages now use direct CSS variable references - Completes bg-inverse alias cleanup
- Replace var(--color-text-inverse,var(--color-white,#fff)) with var(--color-text-inverse, #fff) - Remove redundant --color-white fallback since --color-text-inverse is always defined - Keep #fff as final fallback for safety - Applied to all bg-inverse replacements (49 files)
- Fix in_srgb → in srgb (space required) - Fix var(...)_5% → var(...) 5% (space required between var() and percentage) - color-mix() syntax requires spaces, not underscores - This fixes the issue where backgrounds were not showing correctly
- Add bg-inverse/5 and bg-inverse/10 classes to aliases.css - Replace bg-[color-mix(...)] with bg-inverse/5 in settings components - Fix auth page input backgrounds using inline styles - Fix Toggle component checked state background color - Update Input component default to use bg-[var(--color-background)] - Add style prop support to Field component
- Replace bg-[color-mix(...)] with bg-inverse/5, bg-inverse/10 classes - Replace border-[color-mix(...)] with border-inverse/20, border-inverse/30 classes - Add bg-inverse/80 and hover:bg-inverse/80 to aliases.css - Add border-inverse/30, hover:border-inverse/30, focus:border-inverse/30 to aliases.css - Fix PromptEditor background color - Fix Properties Panel header EditableText background and width - Fix Switch component checked state background and thumb color - Fix toggle switch thumb color to use pure white (#fff) - Restore original border opacity values from main branch
Replace spaces with underscores in color-mix() arbitrary value classes to ensure proper parsing in Tailwind v4. Before: bg-[color-mix(in srgb,var(--color-text-inverse, #fff) 5%,transparent)] After: bg-[color-mix(in_srgb,var(--color-text-inverse,#fff)_5%,transparent)] 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Change background from solid white to 10% opacity white (consistent with expand button) - Change hover background from 80% to 20% opacity - Change icon color from text-background to text-inverse
- Fix toggle thumb by using proper Tailwind v4 arbitrary value syntax - Remove checked state duplicate bg class (white on blue is visible) - Remove gradient background from image generation node panel 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Replace border-inverse with border-[var(--color-text-inverse, #fff)] - Replace border-inverse/20 with border-[color-mix(in_srgb,var(--color-text-inverse,#fff)_20%,transparent)] - Remove border-inverse definitions from aliases.css - Updated files: free-tag, divider, provider-button, text-editor, select, model-picker, outputs/components
- Replace placeholder:text-inverse/30 with placeholder:text-[color-mix(in_srgb,var(--color-text-inverse,#fff)_30%,transparent)] - Replace placeholder:text-inverse/40 with placeholder:text-[color-mix(in_srgb,var(--color-text-inverse,#fff)_40%,transparent)] - Remove placeholder:text-inverse/40 definition from aliases.css - Updated files: field.tsx, anthropic-web-search.tsx, chat-panel.tsx
- Set DocsLink default tone to secondary (link-muted)\n- Replace placeholder color with var(--color-link-muted) in team creation\n- Tweak plus icon color: muted by default, dark on hover\n- Keep in line with alias cleanup efforts
- Default DocsLink tone is secondary; audit complete\n- Replace placeholder:text-text-muted -> var(--color-link-muted)\n- Replace text-bg -> text-[var(--color-background)] in apps + workflow-designer UI\n- Update checklist to mark DocsLink item done
…done and add QA steps
…remaining build/test
- border-border -> border-[var(--color-border)]\n- border-border-muted -> border-[var(--color-border-muted)]\n- outline-focused -> outline-[var(--color-focused)]\n- focus:border-border-focused -> focus:border-[var(--color-border-focused)]
…semantic vars - bg-surface -> bg-[var(--color-surface)] (targeted)\n- bg-bg -> bg-[var(--color-background)] (showcase container)\n- text-text -> text-[var(--color-text)] (limited)
…s in selected components - text-secondary -> text-[var(--color-link-muted)]\n- bg-secondary -> bg-[var(--color-text-secondary)] (selection chips)\n- Adjusted icons and labels accordingly
…lected components - text-inverse -> text-[var(--color-text-inverse)]\n- text-text -> text-[var(--color-text)]\n- Affected: showcase dialog, repo/source dialogs, toolbar, model-picker, prompt-panel
…ars in key UI - user-teams, invite-member-dialog, team-creation-form, search-header, user-button, team-selection-form\n- text-inverse -> text-[var(--color-text-inverse)]\n- text-text -> text-[var(--color-text)] (where applicable)
…/document-store-create-dialog.tsx Co-authored-by: Copilot <[email protected]>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (5)
internal-packages/ui/components/revoke-invitation-dialog.tsx (1)
103-103: Visual inconsistency: button variant should match dialog variant.The button variant is now always
primary, but when the dialogvariantisdestructive, the dialog displays red styling (title, icon, description). This creates a visual mismatch where a destructively-styled dialog has a primary-styled button.Apply the suggested fix from the previous review:
- variant="primary" + variant={variant === "destructive" ? "destructive" : "primary"}apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx (1)
350-350: Replace hardcoded checkbox color with CSS variable.The checkbox uses hardcoded color
text-[#1663F3]andfocus:ring-[#1663F3]/20instead of CSS variables, which is inconsistent with this PR's theming migration. All other colors in this file now use semantic tokens likevar(--color-text),var(--color-border), etc.Apply this diff to use a semantic color variable:
-className="mt-1 w-4 h-4 text-[#1663F3] bg-surface border-[var(--color-border)] rounded focus:ring-[#1663F3]/20" +className="mt-1 w-4 h-4 text-primary-900 bg-surface border-[var(--color-border)] rounded focus:ring-primary-900/20"Note: Use the appropriate CSS variable that matches your design system's primary/accent color for checkboxes. If a specific variable like
var(--color-primary)orvar(--color-accent)exists, use that instead.apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsx (1)
206-206: Checkbox color inconsistency already flagged.This checkbox mixes Tailwind utility classes (
text-primary-900,focus:ring-primary-900) with CSS variables (bg-[var(--color-surface)],border-[var(--color-border)]), which is inconsistent with the PR's migration goal. A previous review already identified this issue and recommended using a semantic CSS variable liketext-[var(--color-primary)]for both the text and focus ring colors.internal-packages/ui/components/toggle.tsx (1)
28-32: Consider using muted border token for unchecked state.The unchecked border uses
--color-text-inverse(white), but the PR objectives mention removing white-looking strokes in favor of muted colors. Consider using a muted semantic border token for better visual consistency.- "border border-[var(--color-text-inverse,#fff)] data-[state=checked]:border-primary-900", + "border border-[var(--color-border-muted)] data-[state=checked]:border-primary-900",This would align with the PR's goal of using more subtle, muted borders throughout the UI.
internal-packages/ui/components/model-picker.tsx (1)
169-169: Migratetext-inverseto CSS variable syntax.The
text-inverseutility should be migrated totext-[var(--color-text-inverse)]for consistency with the PR's migration approach.Apply this diff:
- ? "bg-[var(--color-text-secondary)] text-inverse" + ? "bg-[var(--color-text-secondary)] text-[var(--color-text-inverse)]"
🧹 Nitpick comments (2)
internal-packages/ui/components/model-picker.tsx (2)
75-75: Consider using a semantic token for the hover background.The border successfully uses a CSS variable with color-mix, but the hover state
hover:bg-white/5is hardcoded. For full consistency with the PR's migration to semantic tokens, consider replacing this with a semantic variable or a color-mix expression using a semantic token.
203-206: Consider migrating hardcoded hover/focus colors to semantic tokens.Lines 205 uses hardcoded
white/5values for hover and focus states. For consistency with the PR's migration to semantic tokens, consider replacing these with semantic variables or color-mix expressions.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (43)
apps/studio.giselles.ai/app/(auth)/join/success/page.tsx(1 hunks)apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsx(1 hunks)apps/studio.giselles.ai/app/(auth)/password_reset/sent/page.tsx(1 hunks)apps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsx(1 hunks)apps/studio.giselles.ai/app/(main)/nav.tsx(1 hunks)apps/studio.giselles.ai/app/(main)/settings/account/authentication/page.tsx(1 hunks)apps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsx(5 hunks)apps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsx(4 hunks)apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsx(7 hunks)apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx(9 hunks)apps/studio.giselles.ai/app/(main)/workspaces/components/agent-card.tsx(2 hunks)apps/studio.giselles.ai/app/(main)/workspaces/components/search-header.tsx(4 hunks)apps/studio.giselles.ai/app/stage/showcase/showcase-client.tsx(8 hunks)apps/studio.giselles.ai/services/accounts/components/user-button/user-button.tsx(4 hunks)apps/studio.giselles.ai/services/teams/components/team-creation-form.tsx(6 hunks)apps/studio.giselles.ai/services/teams/components/team-selection-form.tsx(3 hunks)internal-packages/ui/components/app-icon.tsx(1 hunks)internal-packages/ui/components/button.tsx(2 hunks)internal-packages/ui/components/dropdown-menu.tsx(2 hunks)internal-packages/ui/components/model-picker.tsx(6 hunks)internal-packages/ui/components/prompt-editor.tsx(2 hunks)internal-packages/ui/components/repo-action-menu.tsx(1 hunks)internal-packages/ui/components/revoke-invitation-dialog.tsx(3 hunks)internal-packages/ui/components/role-menu.tsx(3 hunks)internal-packages/ui/components/section-header.tsx(1 hunks)internal-packages/ui/components/toggle.tsx(2 hunks)internal-packages/workflow-designer-ui/src/editor/chat/chat-panel.tsx(4 hunks)internal-packages/workflow-designer-ui/src/editor/node/node.tsx(1 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx(3 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/query-panel.tsx(4 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/anthropic.tsx(3 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsx(4 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsx(3 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx(5 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/tools/tool-provider/anthropic-web-search/anthropic-web-search.tsx(3 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/tools/tool-provider/github/index.tsx(1 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/tools/tool-provider/postgres/index.tsx(1 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx(1 hunks)internal-packages/workflow-designer-ui/src/editor/tool/toolbar/toolbar.tsx(12 hunks)internal-packages/workflow-designer-ui/src/new-editor/components/node/node.tsx(1 hunks)internal-packages/workflow-designer-ui/src/ui/generation-view.tsx(4 hunks)internal-packages/workflow-designer-ui/src/ui/query-result-view.tsx(11 hunks)internal-packages/workflow-designer-ui/src/ui/slider.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (30)
- apps/studio.giselles.ai/app/(auth)/password_reset/sent/page.tsx
- internal-packages/workflow-designer-ui/src/ui/slider.tsx
- internal-packages/ui/components/repo-action-menu.tsx
- internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx
- apps/studio.giselles.ai/app/stage/showcase/showcase-client.tsx
- internal-packages/workflow-designer-ui/src/editor/tool/toolbar/toolbar.tsx
- internal-packages/ui/components/dropdown-menu.tsx
- internal-packages/workflow-designer-ui/src/editor/chat/chat-panel.tsx
- internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/query-panel.tsx
- apps/studio.giselles.ai/app/(main)/nav.tsx
- internal-packages/ui/components/section-header.tsx
- apps/studio.giselles.ai/services/teams/components/team-creation-form.tsx
- internal-packages/ui/components/role-menu.tsx
- internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/tools/tool-provider/anthropic-web-search/anthropic-web-search.tsx
- internal-packages/workflow-designer-ui/src/ui/query-result-view.tsx
- internal-packages/ui/components/prompt-editor.tsx
- internal-packages/workflow-designer-ui/src/ui/generation-view.tsx
- apps/studio.giselles.ai/app/(main)/settings/account/authentication/page.tsx
- internal-packages/ui/components/button.tsx
- internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/anthropic.tsx
- internal-packages/workflow-designer-ui/src/editor/node/node.tsx
- apps/studio.giselles.ai/services/teams/components/team-selection-form.tsx
- internal-packages/workflow-designer-ui/src/new-editor/components/node/node.tsx
- apps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsx
- internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/tools/tool-provider/github/index.tsx
- apps/studio.giselles.ai/app/(main)/workspaces/components/search-header.tsx
- apps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsx
- apps/studio.giselles.ai/services/accounts/components/user-button/user-button.tsx
- internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/tools/tool-provider/postgres/index.tsx
- apps/studio.giselles.ai/app/(main)/workspaces/components/agent-card.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
**/*.{ts,tsx}: Use Biome for formatting with tab indentation and double quotes
Follow organized imports pattern (enabled in biome.json)
Use TypeScript for type safety; avoidanytypes
Use Next.js patterns for web applications
Use async/await for asynchronous code rather than promises
Error handling: use try/catch blocks and propagate errors appropriately
Use kebab-case for all filenames (e.g.,user-profile.ts)
Use camelCase for variables, functions, and methods (e.g.,userEmail)
Use prefixes likeis,has,can,shouldfor boolean variables and functions for clarity
Use verbs or verb phrases that clearly indicate purpose for function naming (e.g.,calculateTotalPrice(), notprocess())If breaking changes are introduced in new AI SDK versions, update code to accommodate those changes
Files:
apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsxinternal-packages/ui/components/revoke-invitation-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
**/*.tsx: Use functional components with React hooks
Use PascalCase for React components and classes (e.g.,UserProfile)
Files:
apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsxinternal-packages/ui/components/revoke-invitation-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
**/*
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
All filenames should use kebab-case (lowercase with hyphens)
Files:
apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsxinternal-packages/ui/components/revoke-invitation-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
**/*.{js,jsx,ts,tsx}: React components and classes should use PascalCase
Variables, functions, and methods should use camelCase
Use verbs or verb phrases for function names; names should clearly indicate what the function does; avoid ambiguous names that could lead to misuse
Use nouns or noun phrases for variable names; names should describe what the variable represents; avoid single-letter variables except in very short scopes
Use prefixes like 'is', 'has', 'can', 'should' for both variables and functions returning boolean values; make the true/false meaning clear
Files:
apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsxinternal-packages/ui/components/revoke-invitation-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
🧠 Learnings (35)
📓 Common learnings
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/{navigation-rail-collapsed.tsx,menu-button.tsx} : Update collapsed header toggle icons or hover behavior
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update the `TourGlobalStyles` component in `workspace-tour.tsx` for animation changes
Applied to files:
apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsxinternal-packages/ui/components/revoke-invitation-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Modify the `CARD_STYLES` constants in `workspace-tour.tsx` to change step styling
Applied to files:
apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/model-picker.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsxinternal-packages/ui/components/revoke-invitation-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/{navigation-rail-collapsed.tsx,menu-button.tsx} : Update collapsed header toggle icons or hover behavior
Applied to files:
apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Adjust values like `mt-[140px]` (margin-top) and `mr-8` (margin-right) in step components in `workspace-tour.tsx` as needed for positioning
Applied to files:
apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update imports and references to images in `workspace-tour.tsx` when changing tour visuals
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Colors and spacing should be adjusted via design tokens/utilities (e.g., text-text-muted, ghost-element-hover) for consistent theming
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-items.ts : To change labels, icons, or routes, update the corresponding fields in the nav item objects
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-rail-expanded.tsx : Change expanded header branding/content (product icon and "Stage" label) here
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsxapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Keep selector derivations simple and stable; preserve ordering when mapping to arrays so equality checks can short-circuit.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxinternal-packages/ui/components/revoke-invitation-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Avoid passing large props through multiple levels; prefer local selection from the store at leaf components.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/ui/components/app-icon.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Avoid creating new arrays/objects in selectors unless using an equality function (e.g., shallow) that treats them as equal when unchanged.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-07-21T22:28:44.322Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-07-21T22:28:44.322Z
Learning: Applies to **/*.{ts,tsx} : Use prefixes like `is`, `has`, `can`, `should` for boolean variables and functions for clarity
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-10-24T01:27:17.226Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-10-24T01:27:17.226Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx : Implement setup wizard steps and transitions: select-event → select-repository → confirm-repository → conditional input-callsign/input-labels → configured; callsign/labels steps only when required
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-10-24T01:27:17.226Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-10-24T01:27:17.226Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/components/repository-display.tsx : Repository selection step must call onSelectRepository(owner, repo, installationId) and support Back to select-repository when applicable
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-10-24T01:27:17.226Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-10-24T01:27:17.226Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/components/labels-input-step.tsx : Hide Back button in labels step during reconfiguration (showBackButton=false), require at least one non-empty label, and surface validation error on empty
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-10-24T01:27:17.226Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-10-24T01:27:17.226Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/node/ui/github-trigger/status-badge.tsx : Status badge must reflect enable/disable state changes without full reload, consuming useGitHubTrigger updates
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-10-24T01:27:17.226Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-10-24T01:27:17.226Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx : During reconfiguration submission, de-duplicate labels using Set before sending event
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsx
📚 Learning: 2025-10-08T03:26:11.329Z
Learnt from: WashizuRyo
Repo: giselles-ai/giselle PR: 1903
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx:436-439
Timestamp: 2025-10-08T03:26:11.329Z
Learning: In the GitHub trigger properties panel (internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx), when node.content.state.status === "reconfiguring", the flow only allows changing the repository, not the event type. Therefore, node.name should be preserved during reconfiguration to maintain user-customized names and avoid unnecessary label updates when only switching repositories.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-06-23T12:31:52.270Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-06-23T12:31:52.270Z
Learning: Use PascalCase for React components and classes (e.g., 'UserProfile') to distinguish them from other identifiers.
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Do not subscribe to ui or nodesById wholesale; always select narrow fields by id required by the component.
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Use selective subscriptions: selectors must pick only the minimal state needed for render (e.g., s.nodesById[id], specific UI flags).
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-10-24T01:27:17.226Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-10-24T01:27:17.226Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx : Model node state as configured, reconfiguring, and implicit unconfigured; render GitHubTriggerConfiguredView for configured, GitHubTriggerReconfiguringView for reconfiguring, and integration-branching UI for unconfigured
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsx
📚 Learning: 2025-10-24T01:27:17.226Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-10-24T01:27:17.226Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx : Wrap state updates that transition between reconfiguring/configured in startTransition for consistent UI updates
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsxinternal-packages/ui/components/toggle.tsxinternal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-07-21T22:29:32.130Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-07-21T22:29:32.130Z
Learning: Applies to **/*.{ts,tsx} : If breaking changes are introduced in new AI SDK versions, update code to accommodate those changes
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/ui/components/app-icon.tsxapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.ts : Lift actions into the store (e.g., expose updateNode) and invoke them from components performing mutations.
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-rail-*-container.tsx : Adjust transition timing via container class names (e.g., transition-* utilities)
Applied to files:
internal-packages/ui/components/app-icon.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-items.ts : Import icons for navigation items from lucide-react or the internal icon set when adding/updating items
Applied to files:
internal-packages/ui/components/app-icon.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update the `imageSrc` prop in the appropriate step component in `workspace-tour.tsx` to use a new image
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Import new images at the top of `workspace-tour.tsx` when adding or changing step visuals
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-rail.tsx : Adjust the default rail state by changing useState<NavigationRailState>("expanded") to "collapsed" (or vice versa)
Applied to files:
internal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/app/(auth)/join/success/page.tsx
📚 Learning: 2025-07-21T22:28:44.322Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-07-21T22:28:44.322Z
Learning: Applies to **/*.tsx : Use functional components with React hooks
Applied to files:
internal-packages/ui/components/toggle.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/steps.ts : Update the `target` property in the relevant step in `steps.ts` to modify CSS selectors for highlighting
Applied to files:
internal-packages/ui/components/model-picker.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Modify CSS positioning in step components in `workspace-tour.tsx` to adjust step positioning
Applied to files:
apps/studio.giselles.ai/app/(auth)/join/success/page.tsx
📚 Learning: 2025-07-21T22:28:33.227Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/design-mode.mdc:0-0
Timestamp: 2025-07-21T22:28:33.227Z
Learning: Vercel CLI login must be confirmed (must show a username).
Applied to files:
apps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsx
🧬 Code graph analysis (6)
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx (1)
internal-packages/ui/components/dialog.tsx (2)
DialogTitle(92-101)DialogClose(9-9)
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsx (2)
internal-packages/ui/components/toggle.tsx (1)
Toggle(4-48)packages/language-model/src/base.ts (1)
Capability(3-14)
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsx (1)
internal-packages/ui/components/dialog.tsx (2)
DialogTitle(92-101)DialogClose(9-9)
internal-packages/ui/components/toggle.tsx (1)
internal-packages/workflow-designer-ui/src/ui/switch.tsx (1)
Switch(5-45)
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsx (1)
internal-packages/ui/components/toggle.tsx (1)
Toggle(4-48)
internal-packages/ui/components/revoke-invitation-dialog.tsx (1)
internal-packages/ui/components/dialog.tsx (1)
DialogClose(9-9)
⏰ 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: codeql / languages (javascript) / Perform CodeQL for javascript
🔇 Additional comments (32)
apps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsx (1)
10-10: Color token migration applied correctly.The replacement of
text-secondarywithtext-[var(--color-link-muted)]follows the PR's migration pattern and maintains consistent styling across auth pages.apps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsx (1)
13-13: Color token migration applied correctly.The styling change aligns with the broader token migration effort and maintains visual consistency with other auth pages.
internal-packages/ui/components/revoke-invitation-dialog.tsx (1)
71-71: LGTM! Correct migration to semantic CSS tokens.Both changes correctly migrate from deprecated alias utilities to the semantic CSS variable
--color-text-inverse, aligning with the PR's goal of removing aliases.css and consolidating on stable semantic tokens.Also applies to: 85-85
internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx (1)
185-191: Verify browser compatibility forcolor-mix()function.Both minimize buttons now use
color-mix()for semi-transparent backgrounds. Thecolor-mix()CSS function requires relatively recent browser versions (Chrome 111+, Firefox 113+, Safari 16.2+ from March-May 2023). If the browser doesn't supportcolor-mix(), the entire background declaration fails without graceful degradation—the CSS variable fallback (#fff) only applies within thevar(), not to the function itself.Please confirm that your minimum supported browser versions meet these requirements. If older browsers need support, consider adding a fallback layer:
className="... bg-white/10 bg-[color-mix(in_srgb,var(--color-text-inverse,#fff)_10%,transparent)] ..."Also applies to: 231-234
apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx (7)
177-177: LGTM: Plus icon color migrated to CSS variable.The icon color correctly uses
var(--color-link-muted), consistent with the theming migration.
190-195: LGTM: Dialog header colors migrated to CSS variables.Both the dialog title and close button correctly use
var(--color-text-inverse)for consistent theming.
216-227: LGTM: Owner selector styling migrated to CSS variables.The label and Select trigger correctly use semantic CSS variables for text and background colors.
236-253: LGTM: Repository selector styling migrated to CSS variables.The label and Select trigger correctly use semantic CSS variables, maintaining consistency with the owner selector.
261-310: LGTM: Sources section styling migrated to CSS variables.The section header and card backgrounds correctly use CSS variables. The
color-mixpattern creates appropriate semi-transparent backgrounds for the configuration cards.
330-330: LGTM: Embedding profile card styling migrated to CSS variables.The profile card border and hover background correctly use
var(--color-border-muted)andcolor-mixpattern for consistent theming.
353-353: LGTM: Profile name text color migrated to CSS variable.The text color correctly uses
var(--color-text)for consistent theming.internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx (4)
39-39: LGTM: Alias migration applied correctly.The migration from
text-inversetotext-[var(--color-text-inverse)]is consistent with the PR's objective to adopt semantic CSS variables.
111-112: LGTM: Border and text color migration applied correctly.The migration to CSS variables with a fallback value for the border hover state is appropriate.
151-151: LGTM: Text color migration applied correctly.The change is consistent with the alias cleanup strategy.
330-330: LGTM: Icon color migration applied correctly.The migration to
text-[var(--color-text-inverse)]is consistent with the alias cleanup.apps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsx (3)
108-169: Text color migrations look good.The dialog title, close button, and section headings now correctly use semantic CSS variables (
text-[var(--color-text-inverse)]andtext-[var(--color-text)]) instead of alias utilities, aligning with the PR's migration goals.
186-186: Color-mix usage is correct.The embedding profile label correctly uses
border-[var(--color-border-muted)]and a color-mix expression with CSS variables for the hover state, consistent with the PR's theming approach.
209-209: CSS variable usage is consistent.The profile name text (line 209) and ContentTypeToggle background (line 276) correctly use semantic CSS variables and color-mix expressions, aligning with the PR's theming migration.
Also applies to: 276-276
internal-packages/ui/components/app-icon.tsx (1)
20-23: Focus visual verification on app-thumbnail.tsx where the color change applies.The color change from
text-text/30totext-[var(--color-link-muted)]only affects AppIcon when used without props (defaultSize=true). This occurs inapps/studio.giselles.ai/app/(main)/workspaces/components/app-thumbnail.tsx:17. The other three usages explicitly setdefaultSize={false}with custom colors and are unaffected.Since this is a semantic color change (muted text color → muted link color), confirm the visual appearance looks correct in the app-thumbnail context, particularly in dark theme where the PR's QA was performed.
apps/studio.giselles.ai/app/(auth)/join/success/page.tsx (1)
14-14: ****The change is semantically correct. In
semantic.css,--color-link-mutedis explicitly defined as an alias to--color-text-secondary, making them equivalent. The token represents a generic secondary/muted text color, not link-exclusive styling. Using this token for descriptive paragraph text is appropriate and aligns with the PR's migration pattern from deprecated alias utilities to semantic CSS variables.Likely an incorrect or invalid review comment.
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsx (2)
3-3: LGTM! Import migration complete.The import correctly switches from the old Switch component to the new Toggle component from the shared UI package.
137-171: LGTM! Toggle migration implemented correctly.The Switch-to-Toggle migration correctly:
- Moves the label inside as children
- Preserves the checked state and change handlers
- Maintains the tool configuration logic including the default
searchContextSize: "medium"internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/google.tsx (3)
1-1: LGTM! Import updated correctly.The import correctly migrates from Switch to Toggle component.
67-80: LGTM! Search Grounding Toggle implemented correctly.The Search Grounding control correctly:
- Migrates from Switch to Toggle with inline label
- Preserves the mutual exclusion logic (prevents enabling when URL Context is active)
- Maintains proper
htmlFormatching with thenameprop
82-95: LGTM! URL Context Toggle implemented correctly.The URL Context control correctly:
- Migrates from Switch to Toggle with inline label
- Preserves the mutual exclusion logic (prevents enabling when Search Grounding is active)
- Maintains proper
htmlFormatching with thenameprop- Remains gated by the
googleUrlContextfeature flaginternal-packages/ui/components/toggle.tsx (2)
10-10: LGTM! className prop enables customization.The addition of the optional
classNameprop is a useful enhancement that allows consumers to customize the Toggle container styling while preserving the default layout behavior.Also applies to: 16-16, 19-24
38-44: LGTM! Thumb styling correctly uses inverse color.The thumb background correctly uses
--color-text-inverseto maintain high contrast against both the unchecked (transparent) and checked (blue) track states.internal-packages/ui/components/model-picker.tsx (5)
94-94: LGTM!Icon color correctly migrated to semantic CSS variable.
107-107: LGTM!Content text color correctly migrated to semantic CSS variable.
140-140: LGTM!Input and placeholder colors correctly migrated to semantic CSS variables.
185-185: LGTM!Group label color correctly migrated to semantic CSS variable.
170-170: Migratehover:bg-ghost-element-hoverto use CSS variable arbitrary value syntax.The utility class
hover:bg-ghost-element-hoveris not configured in any Tailwind config and will not generate valid CSS. The codebase consistently uses the arbitrary value pattern[var(--color-name)]for CSS variables (e.g.,bg-[var(--color-text-inverse)]). Migrate this tohover:bg-[var(--color-ghost-element-hover)]on line 170, and update all 15+ occurrences across the codebase using this utility.⛔ Skipped due to learnings
Learnt from: CR Repo: giselles-ai/giselle PR: 0 File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0 Timestamp: 2025-09-01T00:43:10.540Z Learning: Colors and spacing should be adjusted via design tokens/utilities (e.g., text-text-muted, ghost-element-hover) for consistent themingLearnt from: satococoa Repo: giselles-ai/giselle PR: 980 File: internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/generation-panel.tsx:80-83 Timestamp: 2025-05-29T03:01:59.684Z Learning: TailwindCSS v4.x introduced valid `**:` syntax for styling all descendants. The `**:utility` prefix applies styles to all nested descendant elements recursively, while `*:utility` only targets direct children. For example, `**:data-header-text:font-[700]` correctly applies font-weight 700 to all descendant elements with the data-header-text attribute.Learnt from: toyamarinyon Repo: giselles-ai/giselle PR: 1619 File: apps/studio.giselles.ai/app/stage/acts/[actId]/[stepId]/ui/step-layout.tsx:11-11 Timestamp: 2025-08-05T22:56:19.885Z Learning: The custom CSS class `bg-tab-active-background` is defined as a CSS custom property `--color-tab-active-background` in `internal-packages/ui/style.css` and is available for use across the application.
...signer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsx
Show resolved
Hide resolved
...-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
Show resolved
Hide resolved
…-button.tsx Co-authored-by: Copilot <[email protected]>
…er-muted) for unchecked border\n- Migrate remaining text-inverse usages to semantic tokens\n - profile-edit-modal input\n - web-page-node textarea\n - generation-panel maximize icon (incl. hover)\n - prompt-editor maximize icon hover\n - FreeTag text color\n - user-teams menu item text
…olor-border))\n\n- team-members-list-item: use var(--color-border) for divider\n- Select trigger: replace color-mix(white 20%) with var(--color-border)\n- minor: migrate text-inverse to semantic in item title
…g to 10% (var(--color-border))
…h.tsx\n- Add @giselle-internal/ui/glass-dialog entry file (GlassDialogContent wrapper + re-exports)
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
internal-packages/ui/components/glass-surface.tsx (1)
155-163: Consider removing unnecessaryradiusClassfrom 1px highlight element.The
radiusClassis applied to a 1px height element at Line 159, where border radius has no visible effect. While harmless, removing it would clean up the code slightly.Apply this diff:
{withTopHighlight && ( <div className={clsx( "absolute top-0 left-4 right-4 h-px z-10", - radiusClass, )} style={{ backgroundImage: "var(--glass-highlight-bg)" }} /> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
apps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsx(6 hunks)apps/studio.giselles.ai/app/(main)/settings/components/profile-edit-modal.tsx(2 hunks)apps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsx(1 hunks)apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsx(2 hunks)apps/studio.giselles.ai/components/free-tag.tsx(1 hunks)internal-packages/ui/components/glass-dialog.tsx(1 hunks)internal-packages/ui/components/glass-surface.tsx(3 hunks)internal-packages/ui/components/prompt-editor.tsx(2 hunks)internal-packages/ui/components/select.tsx(2 hunks)internal-packages/ui/components/toggle.tsx(2 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsx(2 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsx(3 hunks)internal-packages/workflow-designer-ui/src/editor/properties-panel/web-page-node-properties-panel/index.tsx(1 hunks)internal-packages/workflow-designer-ui/src/ui/switch.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- internal-packages/workflow-designer-ui/src/ui/switch.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- internal-packages/ui/components/select.tsx
- apps/studio.giselles.ai/app/(main)/settings/components/profile-edit-modal.tsx
- internal-packages/workflow-designer-ui/src/editor/properties-panel/web-page-node-properties-panel/index.tsx
- internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
**/*.{ts,tsx}: Use Biome for formatting with tab indentation and double quotes
Follow organized imports pattern (enabled in biome.json)
Use TypeScript for type safety; avoidanytypes
Use Next.js patterns for web applications
Use async/await for asynchronous code rather than promises
Error handling: use try/catch blocks and propagate errors appropriately
Use kebab-case for all filenames (e.g.,user-profile.ts)
Use camelCase for variables, functions, and methods (e.g.,userEmail)
Use prefixes likeis,has,can,shouldfor boolean variables and functions for clarity
Use verbs or verb phrases that clearly indicate purpose for function naming (e.g.,calculateTotalPrice(), notprocess())If breaking changes are introduced in new AI SDK versions, update code to accommodate those changes
Files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxinternal-packages/ui/components/prompt-editor.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/glass-dialog.tsxinternal-packages/ui/components/glass-surface.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
**/*.tsx: Use functional components with React hooks
Use PascalCase for React components and classes (e.g.,UserProfile)
Files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxinternal-packages/ui/components/prompt-editor.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/glass-dialog.tsxinternal-packages/ui/components/glass-surface.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
**/*
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
All filenames should use kebab-case (lowercase with hyphens)
Files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxinternal-packages/ui/components/prompt-editor.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/glass-dialog.tsxinternal-packages/ui/components/glass-surface.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
**/*.{js,jsx,ts,tsx}: React components and classes should use PascalCase
Variables, functions, and methods should use camelCase
Use verbs or verb phrases for function names; names should clearly indicate what the function does; avoid ambiguous names that could lead to misuse
Use nouns or noun phrases for variable names; names should describe what the variable represents; avoid single-letter variables except in very short scopes
Use prefixes like 'is', 'has', 'can', 'should' for both variables and functions returning boolean values; make the true/false meaning clear
Files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxinternal-packages/ui/components/prompt-editor.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/glass-dialog.tsxinternal-packages/ui/components/glass-surface.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
🧠 Learnings (25)
📓 Common learnings
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update the `TourGlobalStyles` component in `workspace-tour.tsx` for animation changes
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Colors and spacing should be adjusted via design tokens/utilities (e.g., text-text-muted, ghost-element-hover) for consistent theming
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Ensure Tailwind utilities w-navigation-rail-{collapsed,expanded} map to the tokens via design tokens/Tailwind config
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/{navigation-rail-collapsed.tsx,menu-button.tsx} : Update collapsed header toggle icons or hover behavior
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/{navigation-rail-collapsed.tsx,menu-button.tsx} : Update collapsed header toggle icons or hover behavior
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxinternal-packages/ui/components/prompt-editor.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/glass-surface.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update the `TourGlobalStyles` component in `workspace-tour.tsx` for animation changes
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxinternal-packages/ui/components/prompt-editor.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/glass-surface.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-items.ts : To change labels, icons, or routes, update the corresponding fields in the nav item objects
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-rail-*-container.tsx : Adjust transition timing via container class names (e.g., transition-* utilities)
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Modify the `CARD_STYLES` constants in `workspace-tour.tsx` to change step styling
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxinternal-packages/ui/components/prompt-editor.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxapps/studio.giselles.ai/components/free-tag.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-rail-expanded.tsx : Change expanded header branding/content (product icon and "Stage" label) here
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxinternal-packages/ui/components/prompt-editor.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-rail.tsx : Adjust the default rail state by changing useState<NavigationRailState>("expanded") to "collapsed" (or vice versa)
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/toggle.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/steps.ts : Update the `target` property in the relevant step in `steps.ts` to modify CSS selectors for highlighting
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsx
📚 Learning: 2025-07-21T22:29:32.130Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-07-21T22:29:32.130Z
Learning: Applies to **/*.{ts,tsx} : If breaking changes are introduced in new AI SDK versions, update code to accommodate those changes
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/components/free-tag.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Adjust values like `mt-[140px]` (margin-top) and `mr-8` (margin-right) in step components in `workspace-tour.tsx` as needed for positioning
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsxinternal-packages/ui/components/prompt-editor.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Avoid passing large props through multiple levels; prefer local selection from the store at leaf components.
Applied to files:
internal-packages/ui/components/prompt-editor.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/toggle.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Keep selector derivations simple and stable; preserve ordering when mapping to arrays so equality checks can short-circuit.
Applied to files:
internal-packages/ui/components/prompt-editor.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Colors and spacing should be adjusted via design tokens/utilities (e.g., text-text-muted, ghost-element-hover) for consistent theming
Applied to files:
internal-packages/ui/components/prompt-editor.tsxapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsxapps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsxinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Use shallow equality for arrays/objects (prefer useEditorStoreWithEqualityFn(selector, shallow)) to avoid false-positive updates.
Applied to files:
internal-packages/ui/components/prompt-editor.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-items.ts : Import icons for navigation items from lucide-react or the internal icon set when adding/updating items
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsx
📚 Learning: 2025-07-21T22:29:07.662Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-07-21T22:29:07.662Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Update imports and references to images in `workspace-tour.tsx` when changing tour visuals
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsx
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-rail.tsx : Tweak motion initial/animate/exit props for width animation of the rail
Applied to files:
apps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsx
📚 Learning: 2025-10-24T01:27:17.226Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-10-24T01:27:17.226Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx : Wrap state updates that transition between reconfiguring/configured in startTransition for consistent UI updates
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/toggle.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.ts : Lift actions into the store (e.g., expose updateNode) and invoke them from components performing mutations.
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsx
📚 Learning: 2025-10-24T01:27:17.226Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-10-24T01:27:17.226Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/github-trigger-properties-panel.tsx : Model node state as configured, reconfiguring, and implicit unconfigured; render GitHubTriggerConfiguredView for configured, GitHubTriggerReconfiguringView for reconfiguring, and integration-branching UI for unconfigured
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Avoid creating new arrays/objects in selectors unless using an equality function (e.g., shallow) that treats them as equal when unchanged.
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/toggle.tsxapps/studio.giselles.ai/components/free-tag.tsx
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Use selective subscriptions: selectors must pick only the minimal state needed for render (e.g., s.nodesById[id], specific UI flags).
Applied to files:
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsxinternal-packages/ui/components/toggle.tsx
📚 Learning: 2025-08-14T02:34:56.156Z
Learnt from: gentamura
Repo: giselles-ai/giselle PR: 1590
File: internal-packages/workflow-designer-ui/src/editor/hooks/use-keyboard-shortcuts.ts:79-80
Timestamp: 2025-08-14T02:34:56.156Z
Learning: In the giselle codebase, React namespace types (React.KeyboardEvent, React.MouseEvent, React.ChangeEvent, etc.) are used consistently throughout the project without importing React itself, and verbatimModuleSyntax is not enabled in TypeScript configs. This pattern should be maintained for consistency rather than suggesting isolated changes to direct type imports.
Applied to files:
internal-packages/ui/components/glass-dialog.tsx
📚 Learning: 2025-06-23T12:31:58.286Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-06-23T12:31:58.286Z
Learning: The tour uses React portals to render above other UI elements, ensuring overlays and highlights are not obstructed by the main application UI.
Applied to files:
internal-packages/ui/components/glass-surface.tsx
🧬 Code graph analysis (1)
internal-packages/ui/components/glass-dialog.tsx (1)
internal-packages/ui/components/dialog.tsx (1)
DialogVariant(12-12)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: codeql / languages (javascript) / Perform CodeQL for javascript
- GitHub Check: check
🔇 Additional comments (24)
apps/studio.giselles.ai/components/free-tag.tsx (1)
6-12: Migration complete and correctly implemented.The component now consistently uses semantic CSS tokens for both border and text colors, aligning with the PR's migration pattern. The past review concern about unmigrated
text-inversehas been addressed.apps/studio.giselles.ai/app/(main)/settings/team/invitation-list-item.tsx (1)
98-102: LGTM: Border color migration complete.The migration from
border-border-mutedtoborder-[var(--color-border)]aligns with the PR's systematic removal of alias utilities. Both the container border and the dashed avatar circle now use the semantic CSS variable.apps/studio.giselles.ai/app/(main)/settings/team/team-members-list-item.tsx (1)
130-142: LGTM: Color token migration complete.Both the border color (Line 130) and text color (Line 142) migrations correctly replace alias utilities with CSS variable syntax, consistent with the PR's theming refactor.
internal-packages/ui/components/prompt-editor.tsx (3)
74-74: Migration complete for editor background.The background token migration from
bg-inverse/10tocolor-mixwith CSS variable is correct and consistent with the PR objectives.
85-85: Consistent migration of button states.Both base and hover backgrounds correctly migrated to
color-mixtokens with progressive opacity (10% → 20%), providing appropriate hover feedback.
90-90: Migration complete; past review concern addressed.Both the base text color and hover state are now consistently using CSS variable-based tokens. The hover effect at 80% opacity provides appropriate visual feedback.
internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsx (4)
24-24: LGTM: Background token correctly migrated.The migration from
bg-inverse/10to the color-mix CSS variable syntax is correct and consistent with the PR's objective to use semantic CSS tokens.
35-116: LGTM: Well-structured helper functions.The helper functions are well-implemented with proper TypeScript typing, clear naming conventions, and appropriate error handling. They follow the single responsibility principle and coding guidelines.
146-146: LGTM: Container background correctly migrated.The background token migration is consistent with the rest of the file and follows the PR's migration pattern.
152-155: LGTM: Expand button styling fully migrated.The button background and icon text colors have been correctly migrated to CSS variable-based tokens. Line 155 addresses the previous review comment about migrating
text-inversetokens, using the CSS variable approach (text-[var(--color-text-inverse)]) which is consistent with this PR's migration strategy.internal-packages/ui/components/glass-surface.tsx (3)
114-114: LGTM!The comment clearly explains the architectural reasoning for moving the top highlight layer.
124-133: LGTM!The addition of
opacity-30to the solid border aligns with the theming adjustments in this PR.
144-154: LGTM!Reducing the auxiliary hairline opacity from 20% to 5% makes it more subtle as intended.
internal-packages/ui/components/glass-dialog.tsx (2)
1-14: LGTM!The imports are well-organized and follow the project's conventions.
24-35: Verify ifDialogContentshould be re-exported.Re-exporting
DialogContent(line 34) allows consumers to bypass theGlassDialogContentwrapper and use any variant. If this module is intended to exclusively provide glass-variant dialogs, consider removing theDialogContentre-export.If the intent is to provide both a convenience wrapper and full flexibility, the current approach is acceptable.
internal-packages/ui/components/toggle.tsx (3)
10-10: LGTM: className prop addition.The optional
classNameprop is properly typed and destructured, enabling external styling control as intended by the migration to CSS variables.Also applies to: 16-16
27-32: LGTM: Border color migration addresses previous feedback.The border styling correctly uses
var(--color-border-muted)for the unchecked state, which addresses the past review concern about avoiding white-looking strokes. The checked state usesborder-primary-900appropriately. The addition oftransition-colorsprovides smooth visual transitions.
38-44: LGTM: Thumb styling migrated to CSS variables.The thumb background correctly uses
var(--color-text-inverse,#fff)with an appropriate fallback, aligning with the PR's objective to migrate to semantic CSS tokens.apps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsx (6)
53-53: LGTM! Border token correctly migrated.The border color has been properly migrated from the alias utility to the CSS variable pattern.
68-68: LGTM! Input text and placeholder colors correctly migrated.Both the text and placeholder colors have been properly migrated to use CSS variables.
75-75: LGTM! Border and text color tokens correctly migrated.The border color at line 75 and team name text color at line 143 have been properly migrated to CSS variables.
Also applies to: 143-143
165-165: LGTM! Dropdown menu styling correctly migrated.Both the border and background colors have been properly migrated to CSS variable tokens.
175-175: LGTM! Button text colors consistently migrated.Both dropdown menu button text colors have been properly migrated to use CSS variables. The inconsistency mentioned in the previous review has been resolved.
Also applies to: 192-192
62-62: Verify: Migration scope for text-text-muted and text-text/60.The inconsistency is confirmed—lines 62, 148, 160 use
text-text-mutedandtext-text/60, while the file also uses migrated CSS variables liketext-[var(--color-text-inverse)]. However, the migration scope is unclear:
- If only
text-inverseis being migrated, these tokens should remain as-is (consistent with design token guidelines).- If all text color tokens should migrate, these lines need updating to CSS variables.
Please confirm the intended migration scope in the PR or design token migration guide, and update accordingly.
| export type GlassDialogContentProps = ComponentPropsWithoutRef< | ||
| typeof DialogContent | ||
| >; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Omit variant from GlassDialogContentProps.
Since GlassDialogContent hardcodes the variant to "glass", the type should exclude it to prevent consumers from passing it.
Apply this diff:
-export type GlassDialogContentProps = ComponentPropsWithoutRef<
- typeof DialogContent
->;
+export type GlassDialogContentProps = Omit<
+ ComponentPropsWithoutRef<typeof DialogContent>,
+ "variant"
+>;🤖 Prompt for AI Agents
In internal-packages/ui/components/glass-dialog.tsx around lines 16 to 18, the
GlassDialogContentProps type currently allows consumers to pass a variant even
though GlassDialogContent hardcodes variant="glass"; change the exported type to
exclude the variant prop (e.g., use Omit<ComponentPropsWithoutRef<typeof
DialogContent>, 'variant'>) so callers cannot override it, and update any
related imports/exports or usages accordingly.
| export function GlassDialogContent(props: GlassDialogContentProps) { | ||
| return <DialogContent variant={"glass" satisfies DialogVariant} {...props} />; | ||
| } |
There was a problem hiding this comment.
Fix prop spreading order to prevent variant override.
The variant prop is spread before {...props}, which means any variant passed in props will override the hardcoded "glass" value, defeating the wrapper's purpose.
Apply this diff to ensure the variant cannot be overridden:
export function GlassDialogContent(props: GlassDialogContentProps) {
- return <DialogContent variant={"glass" satisfies DialogVariant} {...props} />;
+ return <DialogContent {...props} variant={"glass" satisfies DialogVariant} />;
}Note: This fix works correctly in combination with the type refinement suggested above, which prevents variant from being passed in the first place.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export function GlassDialogContent(props: GlassDialogContentProps) { | |
| return <DialogContent variant={"glass" satisfies DialogVariant} {...props} />; | |
| } | |
| export function GlassDialogContent(props: GlassDialogContentProps) { | |
| return <DialogContent {...props} variant={"glass" satisfies DialogVariant} />; | |
| } |
🤖 Prompt for AI Agents
internal-packages/ui/components/glass-dialog.tsx around lines 20 to 22:
currently the component spreads props before the hardcoded variant which allows
callers to override "glass"; change the JSX so props are spread first and the
explicit variant is provided last (e.g. <DialogContent {...props}
variant={"glass" satisfies DialogVariant} />) so the hardcoded "glass" cannot be
overridden; keep type refinement elsewhere to prevent passing variant in props.
| <div | ||
| className={clsx( | ||
| "flex w-full items-center justify-between gap-3", | ||
| className, | ||
| )} | ||
| > |
There was a problem hiding this comment.
Restore semantic label for accessibility.
Changing the container from <label> to <div> breaks the semantic association between the label text and the switch control. This creates accessibility issues:
- Users can no longer click the label text to toggle the switch
- Screen readers won't announce the relationship between the label and control
- Keyboard navigation may be impacted
Apply this diff to restore the label while preserving the className functionality:
- <div
+ <label
+ htmlFor={name}
className={clsx(
"flex w-full items-center justify-between gap-3",
className,
)}
>
{children}
<Switch.Root
className={clsx(
"h-[15px] w-[27px] rounded-full outline-none transition-colors",
"border border-[var(--color-border-muted)] data-[state=checked]:border-primary-900",
"bg-transparent data-[state=checked]:bg-primary-900",
disabled && "opacity-50 cursor-not-allowed",
)}
id={name}
checked={checked}
onCheckedChange={onCheckedChange}
disabled={disabled}
>
<Switch.Thumb
className={clsx(
"block size-[11px] translate-x-[2px] rounded-full",
"bg-[var(--color-text-inverse,#fff)]",
"transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[13px]",
)}
/>
</Switch.Root>
- </div>
+ </label>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In internal-packages/ui/components/toggle.tsx around lines 19 to 24, the wrapper
was changed from a <label> to a <div>, breaking the semantic association between
the text and the switch; restore accessibility by using a <label> again (keeping
the clsx merge of "flex w-full items-center justify-between gap-3" and
className) and ensure the switch input is properly associated — either wrap the
input inside that label (implicit association) or set htmlFor on the label
pointing to the input's id (generate or accept an id prop/useId if none exists).
Ensure className behavior and existing structure/props are preserved.
|
@kaochannel154 Characters are becoming difficult to recognize on pages such as the 
|
|
@shige 😨😨😨😨thank you so much!! I hadn’t noticed that… |
|
@kaochannel154 👍 |
User description
Summary
Migrate UI colors from deprecated alias utilities to stable semantic tokens and remove
aliases.css. This unblocks Tailwind v4 migration and ensures consistent theming across apps.Key Changes
text-link-muted→text-[var(--color-link-muted)]text-bg→text-[var(--color-background)]border-[var(--color-border|--color-border-muted)],outline-[var(--color-focused)]text-inverse/text-text→text-[var(--color-text-inverse|--color-text)]internal-packages/ui/styles/aliases.cssand drop import fromui/style.cssbody { background-color: var(--color-background) }for consistent base layerVerification
Migration/Impact
How to Test
pnpm turbo check-typespnpm turbo build --filter "@giselles-ai/*" --filter "@giselle-internal/*"pnpm turbo test --filter "@giselles-ai/*" --filter "@giselle-internal/*"Notes
aliases.css) and consolidates color usage on semantic tokens.PR Type
Enhancement
Description
Comprehensive migration from deprecated alias utilities to stable semantic CSS tokens across the entire codebase
Removed
aliases.cssfile and its import fromui/style.css, unblocking Tailwind v4 migrationAdded new semantic tokens for chat bubble styling (
--color-chat-bubble-accent-bg,--color-chat-bubble-accent-border,--color-chat-bubble-user-bg)Set base layer styles for
bodyelement with semantic color tokens for consistent background and text colorReplaced all deprecated alias classes with semantic variables:
text-inverse→text-[var(--color-text-inverse)]text-bg→text-[var(--color-background)]ortext-[var(--color-link-muted)]text-text→text-[var(--color-text)]text-secondary→text-[var(--color-link-muted)]border-border→border-[var(--color-border)]border-inverse/20→color-mix()with--color-text-inversebg-inverse/*→color-mix()with--color-text-inverseUpdated UI components across multiple packages:
--color-text-inverseUpdated form inputs, buttons, dropdowns, dialogs, and other UI elements to use semantic color variables
All type checks, builds, and tests verified for SDK and internal packages
No breaking API changes; apps may need environment variables to build
Diagram Walkthrough
File Walkthrough
1 files
next-env.d.ts
Add Next.js route types referenceapps/playground/next-env.d.ts
70 files
semantic.css
Add semantic tokens for chat bubble colorsinternal-packages/ui/styles/semantic.css
--color-chat-bubble-accent-bg,--color-chat-bubble-accent-border, and--color-chat-bubble-user-bgstyle.css
Remove aliases import and add base body stylesinternal-packages/ui/style.css
aliases.cssfilebodyelement with semantic color tokensfor background and text color
repository-registration-dialog.tsx
Migrate repository dialog to semantic color tokensapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/repository-registration-dialog.tsx
text-bgwithtext-[var(--color-link-muted)]for Plus icontext-inversewithtext-[var(--color-text-inverse)]for dialogtitles and close buttons
text-textwithtext-[var(--color-text)]for labelsbg-surfacewithbg-[var(--color-surface)]andbg-inverse/5with CSS color-mix for backgrounds
border-border-mutedwithborder-[var(--color-border-muted)]for borders
toolbar.tsx
Replace inverse and secondary aliases in toolbarinternal-packages/workflow-designer-ui/src/editor/tool/toolbar/toolbar.tsx
text-inversewithtext-[var(--color-text-inverse)]throughout toolbar components
text-text-mutedtotext-[var(--color-link-muted)]bg-secondarywithbg-[var(--color-text-secondary)]for buttonstates
query-result-view.tsx
Replace inverse aliases in query result viewinternal-packages/workflow-designer-ui/src/ui/query-result-view.tsx
text-inversewithtext-[var(--color-text-inverse)]throughoutcomponent
metadata displays
team-creation-form.tsx
Migrate team creation form to semantic tokensapps/studio.giselles.ai/services/teams/components/team-creation-form.tsx
text-inversewithtext-[var(--color-text-inverse)]for dialogtitles and form labels
text-text-mutedtotext-[var(--color-link-muted)]showcase-client.tsx
Update showcase client with semantic color tokensapps/studio.giselles.ai/app/stage/showcase/showcase-client.tsx
bg-bgwithbg-[var(--color-background)]for main containerborder-borderwithborder-[var(--color-border)]for tab andbutton borders
text-text-mutedtotext-[var(--color-link-muted)]text-[var(--color-text-inverse)]configure-sources-dialog.tsx
Update configure sources dialog with semantic tokensapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/configure-sources-dialog.tsx
text-inversewithtext-[var(--color-text-inverse)]for dialogtitles and close buttons
text-textwithtext-[var(--color-text)]for section headerscolor-mix for opacity variants
user-teams.tsx
Migrate user teams component to semantic tokensapps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsx
text-inversewithtext-[var(--color-text-inverse)]for teamnames and labels
border-borderwithborder-[var(--color-border)]for dividerstext-[var(--color-link-muted)]tokens
invite-member-dialog.tsx
Update invite member dialog with semantic tokensapps/studio.giselles.ai/app/(main)/settings/team/invite-member-dialog.tsx
text-bgwithtext-[var(--color-background)]for Plus icontext-inversewithtext-[var(--color-text-inverse)]for dialogtitles and email tags
text-[var(--color-link-muted)]chat-panel.tsx
Replace chat bubble aliases with semantic tokensinternal-packages/workflow-designer-ui/src/editor/chat/chat-panel.tsx
--color-chat-bubble-user-bg,--color-chat-bubble-accent-bg,--color-chat-bubble-accent-borderbg-inversetobg-[var(--color-text-inverse)]text-inversewithtext-[var(--color-text-inverse)]throughoutgeneration-view.tsx
Replace inverse aliases in generation viewinternal-packages/workflow-designer-ui/src/ui/generation-view.tsx
text-inversewithtext-[var(--color-text-inverse)]for alltext elements
user-button.tsx
Update user button dropdown with semantic tokensapps/studio.giselles.ai/services/accounts/components/user-button/user-button.tsx
text-inversewithtext-[var(--color-text-inverse)]fordropdown labels and menu items
text-bgwithtext-[var(--color-background)]for Plus iconapp-icon.tsx
Update app icon color to semantic tokeninternal-packages/ui/components/app-icon.tsx
text-text/30withtext-[var(--color-link-muted)]for iconopacity styling
query-panel.tsx
Replace secondary and inverse aliases in query panelinternal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/query-panel.tsx
text-secondarywithtext-[var(--color-link-muted)]forsecondary text
text-inversewithtext-[var(--color-text-inverse)]forprimary text
button.tsx
Update button component with semantic tokensinternal-packages/ui/components/button.tsx
text-inversewithtext-[var(--color-text-inverse)]for solidbutton style
text-textwithtext-[var(--color-text)]for button text andicons
node.tsx
Replace node icon and text color aliasesinternal-packages/workflow-designer-ui/src/editor/node/node.tsx
text-bgwithtext-[var(--color-background)]for nodeicons
text-inversewithtext-[var(--color-text-inverse)]fornode metadata text
search-header.tsx
Update search header with semantic tokensapps/studio.giselles.ai/app/(main)/workspaces/components/search-header.tsx
text-textwithtext-[var(--color-text)]for default selecttext
text-inversewithtext-[var(--color-text-inverse)]for searchinput and view toggle buttons
agent-card.tsx
Soften agent card borders and reflection lineapps/studio.giselles.ai/app/(main)/workspaces/components/agent-card.tsx
/40to/20for muted effectborder-border-mutedwithborder-[var(--color-border-muted)]for inner border
model-picker.tsx
Replace inverse and secondary in model pickerinternal-packages/ui/components/model-picker.tsx
border-inverse/20with color-mix for semantic border stylingtext-inversewithtext-[var(--color-text-inverse)]throughouttext-[var(--color-link-muted)]bg-secondarywithbg-[var(--color-text-secondary)]for filterbuttons
components.tsx
Update text generation outputs with semantic tokensinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/outputs/components.tsx
text-inversewithtext-[var(--color-text-inverse)]for outputitems and triggers
text-bgwithtext-[var(--color-background)]for button textindex.tsx
Update image generation panel stylinginternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx
bg-inversewith color-mix for button backgroundstext-backgroundtotext-[var(--color-text-inverse)]team-selection-form.tsx
Update team selection form with semantic tokensapps/studio.giselles.ai/services/teams/components/team-selection-form.tsx
text-inversewithtext-[var(--color-text-inverse)]for teamnames
text-bgwithtext-[var(--color-background)]for Plus iconrole-menu.tsx
Replace inverse aliases in role menuinternal-packages/ui/components/role-menu.tsx
bg-inverse/5andbg-inverse/10with color-mix for semanticbackgrounds
text-textwithtext-[var(--color-text)]for icon colorproperties-panel.tsx
Replace aliases in properties panelinternal-packages/workflow-designer-ui/src/editor/properties-panel/ui/properties-panel.tsx
text-bgwithtext-[var(--color-background)]for nodeicons
text-inversewithtext-[var(--color-text-inverse)]fortext elements
status-cards.tsx
Update status cards with semantic tokensapps/studio.giselles.ai/app/(main)/settings/team/vector-stores/status-cards.tsx
text-secondarywithtext-[var(--color-link-muted)]forsecondary text in status cards
generation-panel.tsx
Replace inverse aliases in generation panelinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/generation-panel.tsx
bg-inverse/10andbg-inverse/20with color-mix for semanticbackgrounds
openai.tsx
Replace Switch with Toggle for web searchinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/model/openai.tsx
Switchcomponent withTogglecomponent for web search featurepage.tsx
Update team page with semantic tokensapps/studio.giselles.ai/app/(main)/settings/team/page.tsx
text-secondarywithtext-[var(--color-link-muted)]forsecondary text in billing info
generation-panel.tsx
Replace inverse aliases in image generation panelinternal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/generation-panel.tsx
bg-inverse/10andbg-inverse/20with color-mix for semanticbackgrounds
dropdown-menu.tsx
Replace text color aliases with semantic tokensinternal-packages/ui/components/dropdown-menu.tsx
text-textalias withtext-[var(--color-text)]semantic tokencolor variables
form.tsx
Migrate form input backgrounds to semantic tokensapps/studio.giselles.ai/app/(auth)/components/form.tsx
bg-inverse/10alias withcolor-mix()function using--color-text-inversesemantic tokenfields
account-display-name-form.tsx
Update button hover state with semantic color tokensapps/studio.giselles.ai/app/(main)/settings/account/account-display-name-form.tsx
hover:bg-inverse/5withcolor-mix()using--color-text-inversesemantic token
backgroundstyle to className using semantic tokenrevoke-invitation-dialog.tsx
Migrate dialog text colors to semantic tokensinternal-packages/ui/components/revoke-invitation-dialog.tsx
text-inversealias withtext-[var(--color-text-inverse)]semantic token
primaryselect.tsx
Update select component borders and icons with semantic tokensinternal-packages/ui/components/select.tsx
border-inverse/20alias withcolor-mix()using--color-text-inversesemantic tokentext-texttotext-[var(--color-text)]prompt-panel.tsx
Migrate advanced options panel to semantic color tokensinternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/prompt-panel.tsx
bg-inverse/5withcolor-mix()using--color-text-inversesemantic token
text-inversetotext-[var(--color-text-inverse)]text-secondarywithtext-[var(--color-link-muted)]for chevronicon
page.tsx
Update settings account page color referencesapps/studio.giselles.ai/app/(main)/settings/account/page.tsx
text-secondarywithtext-[var(--color-link-muted)]fordescription text
text-bgtotext-[var(--color-background)]slider.tsx
Migrate slider component to semantic color tokensinternal-packages/workflow-designer-ui/src/ui/slider.tsx
bg-inversealias withbg-[var(--color-text-inverse, #fff)]semantic token for range and thumb
team-profile-card.tsx
Update team profile card hover state stylingapps/studio.giselles.ai/app/(main)/settings/team/team-profile-card.tsx
hover:bg-inverse/5withcolor-mix()using--color-text-inversesemantic token
form.tsx
Migrate signup form inputs to semantic tokensapps/studio.giselles.ai/app/(auth)/join/[token]/signup/form.tsx
bg-inverse/10alias withcolor-mix()using--color-text-inversesemantic tokenfields
switch.tsx
Update switch component styling with semantic tokensinternal-packages/workflow-designer-ui/src/ui/switch.tsx
bg-inversewithbg-[var(--color-text-inverse,#fff)]for thumbelement
!important flag to border and background checked statestransition-colorsclass to root elementbutton.tsx
Migrate button text colors to semantic tokensapps/studio.giselles.ai/components/ui/button.tsx
text-bgalias withtext-[var(--color-background)]semantictoken in button variants
input.tsx
Update input component styling with semantic tokensapps/studio.giselles.ai/components/ui/input.tsx
bg-bgclass and replace with semantic token in focus outlineoutline-focusedtooutline-[var(--color-focused)]nav.tsx
Update navigation inactive state colorapps/studio.giselles.ai/app/(main)/nav.tsx
text-secondarywithtext-[var(--color-link-muted)]forinactive navigation items
unauthorized.tsx
Update GitHub trigger unauthorized button hover stateinternal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/components/unauthorized.tsx
hover:bg-inverse/5withcolor-mix()using--color-text-inversesemantic token
invite-member-dialog.tsx
Migrate invite dialog backgrounds to semantic tokensinternal-packages/ui/components/invite-member-dialog.tsx
bg-inverse/5andbg-inverse/10withcolor-mix()using--color-text-inversesemantic tokeninstall-application.tsx
Update GitHub install button hover state stylinginternal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/components/install-application.tsx
hover:bg-inverse/5withcolor-mix()using--color-text-inversesemantic token
provider-button.tsx
Update provider button border colorapps/studio.giselles.ai/app/(auth)/components/provider-button.tsx
border-inverse/20withcolor-mix()using--color-text-inversesemantic token
event-selection-step.tsx
Migrate GitHub event selection styling to semantic tokensinternal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/components/event-selection-step.tsx
border-inverse/20andborder-inverse/30withcolor-mix()using--color-text-inversesemantic tokenbg-inverse/10to semantic tokenequivalent
page.tsx
Update password reset sent page text colorapps/studio.giselles.ai/app/(auth)/password_reset/sent/page.tsx
text-secondarywithtext-[var(--color-link-muted)]semantictoken
dropdown-menu.tsx
Migrate dropdown menu backgrounds to semantic tokensapps/studio.giselles.ai/components/ui/dropdown-menu.tsx
bg-inverse/5withcolor-mix()using--color-text-inversesemantic token
page.tsx
Update join success page text colorapps/studio.giselles.ai/app/(auth)/join/success/page.tsx
text-secondarywithtext-[var(--color-link-muted)]semantictoken
github-action-properties-panel.tsx
Migrate GitHub action panel styling to semantic tokensinternal-packages/workflow-designer-ui/src/editor/properties-panel/action-node-properties-panel/github-action-properties-panel.tsx
border-inverse/20,border-inverse/30, andbg-inverse/10withcolor-mix()using--color-text-inversesemantic tokenpage.tsx
Update password reset complete page text colorapps/studio.giselles.ai/app/(auth)/password_reset/complete/page.tsx
text-secondarywithtext-[var(--color-link-muted)]semantictoken
icon-box.tsx
Migrate icon box backgrounds to semantic tokensinternal-packages/ui/components/icon-box.tsx
bg-inverse/10withcolor-mix()using--color-text-inversesemantic token
divider.tsx
Update divider component border colorsapps/studio.giselles.ai/app/(auth)/components/divider.tsx
border-inverse/20withcolor-mix()using--color-text-inversesemantic token
docs-link.tsx
Update DocsLink default tone and color tokensinternal-packages/ui/components/docs-link.tsx
mutedtosecondarytext-link-mutedwithtext-[var(--color-link-muted)]semantictoken
generate-cta-button.tsx
Update generate CTA button hover stateinternal-packages/workflow-designer-ui/src/editor/properties-panel/ui/generate-cta-button.tsx
hover:bg-inverse/5withcolor-mix()using--color-text-inversesemantic token
github-integration.tsx
Update GitHub integration divider stylingapps/studio.giselles.ai/app/(main)/settings/team/integrations/github-integration.tsx
bg-inverse/10withcolor-mix()using--color-text-inversesemantic token
page.tsx
Update email verification page text colorapps/studio.giselles.ai/app/(auth)/signup/verify-email/page.tsx
text-secondarywithtext-[var(--color-link-muted)]semantictoken
index.tsx
Update web page node textarea stylinginternal-packages/workflow-designer-ui/src/editor/properties-panel/web-page-node-properties-panel/index.tsx
bg-inverse/10withcolor-mix()using--color-text-inversesemantic token
index.tsx
Update text node editor stylinginternal-packages/workflow-designer-ui/src/editor/properties-panel/text-node-properties-panel/index.tsx
bg-inverse/10withcolor-mix()using--color-text-inversesemantic token
select-repository.tsx
Migrate repository selector styling to semantic tokensinternal-packages/workflow-designer-ui/src/editor/properties-panel/ui/select-repository.tsx
bg-inverse/5andbg-inverse/10withcolor-mix()using--color-text-inversesemantic tokenmanual-trigger-properties-panel.tsx
Update manual trigger parameter input stylinginternal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/manual-trigger/manual-trigger-properties-panel.tsx
bg-inverse/10withcolor-mix()using--color-text-inversesemantic token
page.tsx
Update authentication settings page text colorapps/studio.giselles.ai/app/(main)/settings/account/authentication/page.tsx
text-secondarywithtext-[var(--color-link-muted)]semantictoken
index.tsx
Update PostgreSQL tool checkbox stylinginternal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/tools/tool-provider/postgres/index.tsx
successtoprimary-900header.tsx
Update header separator colorapps/studio.giselles.ai/app/(main)/components/header.tsx
text-secondarywithtext-[var(--color-link-muted)]semantictoken
create-workspace-button.tsx
Update workspace creation button icon stylingapps/studio.giselles.ai/app/(main)/workspaces/create-workspace-button.tsx
text-bgwithtext-[var(--color-link-muted)]and add hovertransition to
text-[var(--color-background)]file-panel.tsx
Update file panel drop zone stylinginternal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx
bg-inverse/5withcolor-mix()using--color-text-inversesemantic token
field.tsx
Update field placeholder colorapps/studio.giselles.ai/app/(main)/settings/components/field.tsx
placeholder:text-inverse/30withcolor-mix()using--color-text-inversesemantic token1 files
NEXT_TASKS.md
Add comprehensive aliases migration task trackingNEXT_TASKS.md
aliases.css migration completion
verification steps
replacements
29 files
Summary by CodeRabbit
Style
Note
Replaces deprecated alias classes with semantic CSS variables across apps and UI packages, removes aliases.css, and updates components/styles (including toggles, inputs, dialogs, designer, and workspaces) for consistent theming.
text-inverse,text-bg,border-border,bg-inverse/*) with semantic tokens (text-[var(--color-*)],border-[var(--color-*)],color-mix()with--color-text-inverse).--color-chat-bubble-accent-bg,--color-chat-bubble-accent-border,--color-chat-bubble-user-bg.bodycolors via semantic tokens.internal-packages/ui/styles/aliases.cssand its import fromui/style.css.Togglein model config panels; keep white thumb, blue active state.color-mix().GlassDialogContenthelper; refine glass surface borders/highlight.Written by Cursor Bugbot for commit 261ede1. This will update automatically on new commits. Configure here.