feat: add light theme toggle#178
Conversation
Suggested PR title from PearlTitle: Body: Key Changes & Features:
Refactoring:
Benefits:
|
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive light theme toggle feature for Bubble Studio, enabling users to switch between light and dark themes with system preference detection. The implementation follows the shadcn/ui design system approach using CSS variables and Tailwind CSS, with theme state managed through Zustand and persisted to localStorage.
Key Changes
- Introduces a theme management system with support for light, dark, and system preferences using Zustand with persistence middleware
- Adds an animated theme toggle component in the sidebar using Framer Motion
- Migrates all hardcoded colors to CSS variables following shadcn/ui patterns for both light and dark themes
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds dependencies: framer-motion, clsx, tailwind-merge, class-variance-authority, @radix-ui/react-slot |
| apps/bubble-studio/package.json | Declares new dependencies for theming components and animations |
| apps/bubble-studio/tailwind.config.js | Configures Tailwind with darkMode class strategy and extensive CSS variable-based color palette |
| apps/bubble-studio/src/stores/settingsStore.ts | Implements theme state management with persistence, system theme detection, and media query listener |
| apps/bubble-studio/src/main.tsx | Wraps application with ThemeProvider to initialize theme on mount |
| apps/bubble-studio/src/lib/utils.ts | Adds cn() utility for merging Tailwind classes |
| apps/bubble-studio/src/index.css | Defines comprehensive CSS variables for light and dark themes, updates existing styles to use theme variables |
| apps/bubble-studio/src/components/button.tsx | Implements reusable Button component with variants using class-variance-authority |
| apps/bubble-studio/src/components/animated-theme-toggle.tsx | Creates animated sun/moon theme toggle with smooth transitions |
| apps/bubble-studio/src/components/ThemeProvider.tsx | Provides theme initialization on application mount |
| apps/bubble-studio/src/components/Sidebar.tsx | Updates sidebar styling to use theme CSS variables, adds theme toggle button |
| apps/bubble-studio/src/components/MonacoEditor.tsx | Updates loading indicator and adds theme integration for Monaco editor |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| @@ -0,0 +1,57 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
The file naming convention is inconsistent with the rest of the codebase. Most component files use PascalCase (e.g., MonacoEditor.tsx, Sidebar.tsx, CronToggle.tsx), but this file uses kebab-case. For consistency, this should be renamed to Button.tsx.
| @@ -0,0 +1,204 @@ | |||
| import { cn } from '../lib/utils'; | |||
There was a problem hiding this comment.
The file naming convention is inconsistent with the rest of the codebase. Most component files use PascalCase (e.g., MonacoEditor.tsx, Sidebar.tsx, CronToggle.tsx), but this file uses kebab-case. For consistency, this should be renamed to AnimatedThemeToggle.tsx.
| // Get current theme from settings store | ||
| const resolvedTheme = useSettingsStore((state) => state.resolvedTheme); | ||
| const monacoTheme = resolvedTheme === 'dark' ? 'vs-dark' : 'vs'; | ||
|
|
There was a problem hiding this comment.
The Monaco Editor theme does not update dynamically when the user changes the theme. The monacoTheme is calculated from resolvedTheme, but there's no effect to call editor.updateOptions({ theme: monacoTheme }) when resolvedTheme changes. Add a useEffect hook that watches resolvedTheme and updates the editor theme using editorRef.current?.updateOptions({ theme: monacoTheme }).
| // Update Monaco Editor theme when resolvedTheme changes | |
| useEffect(() => { | |
| if (editorRef.current) { | |
| editorRef.current.updateOptions({ theme: monacoTheme }); | |
| } | |
| }, [monacoTheme, resolvedTheme]); |
| <ClerkProvider | ||
| publishableKey={PUBLISHABLE_KEY!} | ||
| afterSignOutUrl="/" | ||
| appearance={{ | ||
| baseTheme: dark, | ||
| }} |
There was a problem hiding this comment.
The ClerkProvider is hardcoded to always use the dark theme, even when the app is in light mode. This will cause a visual inconsistency where Clerk components (sign-in modal, user button dropdown, etc.) will always appear in dark theme regardless of the user's theme preference. Consider integrating the theme from useSettingsStore with Clerk's appearance configuration, or using Clerk's light theme conditionally based on resolvedTheme.
| const scaleMoon = useMotionValue(isDark ? 1 : 0); | ||
| const scaleSun = useMotionValue(isDark ? 0 : 1); | ||
| const pathLengthMoon = useTransform(scaleMoon, [0.6, 1], [0, 1]); | ||
| const pathLengthSun = useTransform(scaleSun, [0.6, 1], [0, 1]); |
There was a problem hiding this comment.
The useMotionValue hooks are initialized with static values based on isDark, but they won't update when isDark changes. These motion values control the animation state but remain at their initial values throughout the component's lifecycle. Since the animation is controlled by the variants prop on the motion components, these motion values appear to be redundant. Consider removing scaleMoon, scaleSun, pathLengthMoon, and pathLengthSun and relying solely on the variant animations, or use useEffect to update the motion values when isDark changes.
| const getSystemTheme = (): 'light' | 'dark' => { | ||
| if (typeof window === 'undefined') return 'dark'; | ||
| return window.matchMedia('(prefers-color-scheme: dark)').matches | ||
| ? 'dark' | ||
| : 'light'; | ||
| }; | ||
|
|
||
| const resolveTheme = (theme: Theme): 'light' | 'dark' => { | ||
| if (theme === 'system') { | ||
| return getSystemTheme(); | ||
| } | ||
| return theme; | ||
| }; | ||
|
|
||
| export const useSettingsStore = create<SettingsStore>()( | ||
| persist( | ||
| (set, get) => ({ | ||
| theme: 'system', | ||
| resolvedTheme: 'dark', // Default to dark until initialized | ||
| setTheme: (theme: Theme) => { | ||
| const resolvedTheme = resolveTheme(theme); | ||
| set({ theme, resolvedTheme }); | ||
| applyTheme(resolvedTheme); | ||
| }, | ||
| initializeTheme: () => { | ||
| const { theme } = get(); | ||
| const resolvedTheme = resolveTheme(theme); | ||
| set({ resolvedTheme }); | ||
| applyTheme(resolvedTheme); | ||
| }, | ||
| }), | ||
| { | ||
| name: 'bubble-studio-settings', | ||
| partialize: (state) => ({ theme: state.theme }), | ||
| onRehydrateStorage: () => (state) => { | ||
| if (state) { | ||
| // After rehydration, resolve and apply the theme | ||
| const resolvedTheme = resolveTheme(state.theme); | ||
| state.resolvedTheme = resolvedTheme; | ||
| applyTheme(resolvedTheme); | ||
| } | ||
| }, | ||
| } | ||
| ) | ||
| ); | ||
|
|
||
| function applyTheme(theme: 'light' | 'dark') { | ||
| const root = document.documentElement; | ||
| root.classList.remove('light', 'dark'); | ||
| root.classList.add(theme); | ||
| root.style.colorScheme = theme; | ||
| } | ||
|
|
||
| // Listen for system theme changes when theme is set to 'system' | ||
| if (typeof window !== 'undefined') { | ||
| const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); | ||
| mediaQuery.addEventListener('change', () => { | ||
| const { theme, setTheme } = useSettingsStore.getState(); | ||
| if (theme === 'system') { | ||
| // Re-trigger to update resolvedTheme | ||
| setTheme('system'); | ||
| } | ||
| }); | ||
| } |
There was a problem hiding this comment.
The theme management logic, including system theme detection, theme resolution, and localStorage persistence, lacks test coverage. Given the complexity of the logic (handling 'system' theme, persistence, rehydration, and media query listeners), tests would help ensure correctness. Consider adding tests for: getSystemTheme(), resolveTheme(), theme persistence/rehydration, and the media query change listener behavior.
| useEffect(() => { | ||
| if (isStreaming) { | ||
| setSummaryComplete(false); | ||
| } else if (!isStreaming && generationResult) { |
There was a problem hiding this comment.
This negation always evaluates to true.
| } else if (!isStreaming && generationResult) { | |
| } else if (generationResult) { |
Can you make sure the dark theme stays consistent with our old version? See home page background, BubbleNode background |
zhubzy
left a comment
zhubzy
left a comment
There was a problem hiding this comment.
Homepage background and BubbleNode background not consistent with current version
|
Inside lightmode, input/cron node and bubble node should have consistent styling: white bg with black on icons and text |
Add system-default light/dark theming with CSS variables, zustand-persisted preference, sidebar toggle, and Monaco sync. Closes bubblelabai#108.
- Add opacity variants (20%, 30%, 40%, 50%, 60%, 80%, 90%) for theme colors - Replace opacity modifiers (e.g., bg-muted/50) with solid classes (bg-muted-50) - Ensures consistent rendering across all browsers - Dark theme uses rgb() format, light theme uses oklch() format
- Change foreground from #cccccc to #e5e7eb (Tailwind gray-200) - Update muted backgrounds from #252526 to #1f2937 (Tailwind gray-800) - Update muted-foreground from #7d8590 to #9ca3af (Tailwind gray-400) - Change borders from #30363d to #374151 (Tailwind gray-700) - Update all opacity variants to use Tailwind gray RGB values This ensures PearlChat Quick Actions and other components visually match the main branch dark theme appearance with subtle blue-tinted grays.
- Update MarkdownComponents.tsx: Replace gray-100/200/300/400/800/900 with theme variables - Update executionLogsFormatUtils.tsx: Replace gray-200/300/400 with theme equivalents - Update JsonRenderer.tsx: Replace gray-300 with foreground-80 for links - Update BubbleSidePanel.tsx: Replace hardcoded grays in commented code - Update InputParameters.tsx: Replace gray-700/500 with border/secondary - Update FlowVisualizer.tsx: Replace gray-500/600 with theme variables - Update BubbleNode.tsx: Replace gray-600/700 with muted/secondary - Update OAuthCallback.tsx: Replace gray-100/400/900 with theme variables - Update MonthlyUsageBar.tsx: Replace gray-200 with foreground-20 All changes use CSS variable-based theme colors for proper light/dark theme support
- Replace hardcoded neutral colors in BubbleColors.ts with semantic node variables - Refactor BubbleNode.tsx to use semantic classes and clean up legacy commented code - Update BubbleDetailsOverlay.tsx to use semantic variables for improved theming support - Update InputFieldsRenderer.tsx to use semantic variables - Update WebhookToggle.tsx, CronToggle.tsx and WebhookURLDisplay.tsx to use semantic variables
VAIBHAVSING
force-pushed
the
theme-toggle
branch
from
5c4892d to
294e020
Compare
- Update main.tsx to support dynamic Clerk theme based on user preference - Update CodeRestoreModal to use semantic colors and dynamic Monaco theme - Migrate OnboardingQuestionnaire to use semantic tokens and dark: variants - Update GeneratingOverlay and MarkdownWithBubbles for better theme support - Migrate demo pages (PDFOcr, R2Storage, DocumentGeneration) to use semantic tokens - Replace hardcoded hex values and specific gray shades with theme-aware variables
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughExtensive theming system overhaul adding light/dark/system theme support, five new UI libraries, semantic design tokens, and new theme-aware components (ThemeProvider, AnimatedThemeToggle, Button). Alongside this, significant refactoring of PearlChat message handling, GenerationOutputOverlay interactivity, FlowIDEView layout, and removal of canBeFile property from input field schemas. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Areas requiring extra attention:
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 19
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (8)
apps/bubble-studio/src/components/MonthlyUsageBar.tsx (1)
179-188: Replace hardcoded orange colors with semantic tokens.The warning message uses hardcoded orange colors instead of semantic tokens, breaking theme consistency.
🔎 Proposed fix using semantic tokens
{anyLimitExceeded && ( - <div className="mb-3 p-2 bg-orange-500/10 border border-orange-500/20 rounded-lg"> + <div className="mb-3 p-2 bg-destructive/10 border border-destructive/20 rounded-lg"> <div className="flex items-start gap-2"> - <AlertCircle className="w-4 h-4 text-orange-400 flex-shrink-0 mt-0.5" /> - <div className="text-xs text-orange-300"> + <AlertCircle className="w-4 h-4 text-destructive flex-shrink-0 mt-0.5" /> + <div className="text-xs text-destructive"> {getLimitExceededMessage()} </div> </div> </div> )}apps/bubble-studio/src/components/ai/PearlChat.tsx (1)
550-645:pearl.eventsListis undefined and will cause a runtime error.The component references
pearl.eventsListat lines 577 and 647, but theusePearlChatStorehook does not return aneventsListproperty. The store exposestimeline(TimelineItem[]) instead. Either:
- Add
eventsListas a computed property derived from timeline in the store, or- Refactor the rendering logic to iterate over the timeline directly.
The
assistantIndexcalculation logic is correct in principle, but it has nothing valid to index into.apps/bubble-studio/src/components/ai/CodeDiffView.tsx (1)
90-104: Define missing custom color and shadow tokens in Tailwind configuration.The code uses custom token variants (
bg-muted-50,bg-success,bg-success-90,shadow-success-20,shadow-success-30) that are not defined intailwind.config.js. These classes will not be generated by Tailwind and will not apply any styles. Add the missing color and shadow definitions to the theme configuration:export default { // ... existing config theme: { extend: { colors: { muted: { 50: '#your-color-value', // other muted variants }, success: '#22c55e', // or your preferred success color 'success-90': '#...', // ... other color variants }, boxShadow: { 'success-20': '0 0 0 3px rgba(34, 197, 94, 0.2)', 'success-30': '0 0 0 3px rgba(34, 197, 94, 0.3)', // ... other shadow variants }, }, }, };These tokens are used throughout the codebase in multiple components and must be properly configured to function.
apps/bubble-studio/src/components/UsageDetailsModal.tsx (1)
272-325: Define missing color variant tokens in Tailwind configuration.The code uses
bg-background-50,bg-card-40, andbg-card-60classes that are not defined in your theme. Custom color shades with numeric suffixes must be added in theme.extend.colors. Add these colors toapps/bubble-studio/tailwind.config.js:theme: { extend: { colors: { background: { 50: '#...', // Define shade value }, card: { 40: '#...', // Define shade value 60: '#...', // Define shade value }, }, }, }Without these definitions, the hover and background styling on the table headers and rows will not render.
apps/bubble-studio/src/demos/DocumentGenerationDemo.tsx (2)
88-116: Security: postMessage handler accepts messages from any origin.The message event handler doesn't validate
event.origin, which means malicious iframes from any domain could trigger downloads. Consider adding origin validation:const handleMessage = (event: MessageEvent) => { + // Validate origin - adjust to your security requirements + if (event.origin !== window.location.origin) { + console.warn('Ignoring message from untrusted origin:', event.origin); + return; + } + if (event.data?.type === 'DOWNLOAD_EXCEL') {
1127-1131: Security: postMessage in iframe uses wildcard origin.Line 1131 uses
parent.postMessage({...}, '*')which sends the message to any parent window regardless of origin. This could leak data to malicious parent frames.If the iframe is always same-origin, use
window.location.origin. If it needs cross-origin support, specify the expected parent origin explicitly.🔎 Proposed fix
// Send message to parent window to handle download parent.postMessage({ type: 'DOWNLOAD_EXCEL', url: url, filename: filename - }, '*'); + }, window.location.origin);apps/bubble-studio/src/components/execution_logs/ExecutionHistory.tsx (1)
343-360: Fix pagination button hover states to use standard Tailwind opacity syntax.The
hover:bg-muted-80class on lines 345 and 358 is not valid Tailwind syntax. Tailwind uses slash notation for opacity modifiers, such asbg-black/75, where the value after the slash sets the alpha channel.Change
hover:bg-muted-80tohover:bg-muted/80on both pagination buttons.apps/bubble-studio/src/components/flow_visualizer/nodes/CronScheduleNode.tsx (1)
156-168: Guard againstexecutionInputsbeing undefined before usingObject.keys.
executionInputscomes from the store and is treated as possibly undefined elsewhere (e.g.,filterEmptyInputs(executionInputs || {})). Here it’s passed directly toObject.keys(executionInputs), which will throw if it’sundefinedornull.Recommend guarding with a default empty object:
Proposed fix
- const hasMissingRequired = - missingRequiredFields.length > 0 && - Object.keys(executionInputs).length == 0; + const hasMissingRequired = + missingRequiredFields.length > 0 && + Object.keys(executionInputs || {}).length === 0;This keeps the intent (only show the banner when no inputs have been saved) but avoids a potential runtime error.
♻️ Duplicate comments (4)
apps/bubble-studio/src/components/GenerationOutputOverlay.tsx (1)
48-52: Redundant!isStreamingcheck in else-if branch.Since this is already in the
elsebranch ofif (isStreaming), the!isStreamingcondition is always true and can be removed.🔎 Suggested simplification
if (isStreaming) { setSummaryComplete(false); - } else if (!isStreaming && generationResult) { + } else if (generationResult) { setSummaryComplete(true); }apps/bubble-studio/src/components/MonacoEditor.tsx (1)
40-42: Add dynamic theme updates when user changes theme.The Monaco Editor theme does not update dynamically when
resolvedThemechanges. Add auseEffectto watchresolvedThemeand update the editor theme accordingly.🔎 Proposed fix
+ // Update Monaco Editor theme when resolvedTheme changes + useEffect(() => { + if (editorRef.current) { + editorRef.current.updateOptions({ theme: monacoTheme }); + } + }, [monacoTheme, resolvedTheme]); + // Connect to Zustand store const setEditorInstance = useEditorStore((state) => state.setEditorInstance);apps/bubble-studio/src/components/AnimatedThemeToggle.tsx (1)
47-50: Motion values are initialized once and won't update on theme change.The
useMotionValuehooks capture the initialisDarkvalue but won't update when the theme changes. Since the animation is driven by thevariantsprop on motion components (which does respond toisDark), these motion values applied viastyleprops will remain stale.Consider either:
- Removing these motion values entirely and relying solely on variants (simpler)
- Using
useEffectto update motion values whenisDarkchangesOption 1: Remove unused motion values (simpler)
const SolarSwitch = ({ isDark }: { isDark: boolean }) => { const duration = 0.7; const moonVariants = { checked: { scale: 1, + pathLength: 1, }, unchecked: { scale: 0, + pathLength: 0, }, }; const sunVariants = { checked: { scale: 0, + pathLength: 0, }, unchecked: { scale: 1, + pathLength: 1, }, }; - const scaleMoon = useMotionValue(isDark ? 1 : 0); - const scaleSun = useMotionValue(isDark ? 0 : 1); - const pathLengthMoon = useTransform(scaleMoon, [0.6, 1], [0, 1]); - const pathLengthSun = useTransform(scaleSun, [0.6, 1], [0, 1]);Then remove the
styleprops from motion.path elements and let variants handle all animations.apps/bubble-studio/src/stores/settingsStore.ts (1)
15-99: Test coverage for theme management logic.The theme management logic (system theme detection, resolution, persistence, and media query listeners) is complex and would benefit from unit tests.
🧹 Nitpick comments (18)
apps/bubble-studio/src/components/ai/PearlChat.tsx (2)
172-379: Consider extracting sub-functions to reduce complexity.This 200+ line function constructs contextual suggestions. While logically clear, extracting helpers for each action category (e.g.,
getMainActions(),getTransformationActions(),getStepActions(),getBubbleActions()) would improve readability and testability.Example refactor structure
const getMainActions = (triggerType: string) => { const baseSuggestions = [/* ... */]; const conversionSuggestions = getConversionSuggestions(triggerType); return [...baseSuggestions, ...conversionSuggestions]; }; const getTransformationActions = (context: string | null) => { if (!context) return []; return [/* transformation-specific actions */]; }; // Then simplify the main function: const { mainActions, transformationActions, stepActions, bubbleActions } = { mainActions: getMainActions(triggerType), transformationActions: getTransformationActions(pearl.selectedTransformationContext), // ... };
684-801: Input area properly themed with good UX.The compact input UI correctly applies theme tokens, manages disabled states, and provides a helpful Ctrl+Enter hint. The file accept attribute matches the validation error message.
Minor DRY improvement: Extract disable condition
The button disable condition is duplicated on lines 770-772 and 775-776. Consider extracting it:
+ const isDisabled = (!pearl.prompt.trim() && uploadedFiles.length === 0) || pearl.isPending; <button type="button" onClick={handleGenerate} - disabled={ - (!pearl.prompt.trim() && uploadedFiles.length === 0) || - pearl.isPending - } + disabled={isDisabled} className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200 ${ - (!pearl.prompt.trim() && uploadedFiles.length === 0) || - pearl.isPending + isDisabled ? 'bg-muted-40 border border-border cursor-not-allowed text-muted-foreground' : 'bg-foreground text-background border border-foreground/80 hover:bg-foreground/90 hover:border-foreground/60 shadow-lg hover:scale-105' }`}apps/bubble-studio/src/components/shared/MarkdownComponents.tsx (2)
45-63: Consider using semantic tokens for inline code text color.The code block backgrounds have been migrated to semantic tokens (
bg-muted-50,bg-card-50), but the inline code text still uses hardcodedtext-purple-300(line 49). This creates a theme inconsistency where the background adapts to the theme but the text color doesn't.Consider using a semantic token like
text-codeortext-accentto ensure proper contrast in both light and dark themes.🔎 Proposed refactor
- <code className="bg-muted-50 text-purple-300 px-1.5 py-0.5 rounded text-sm font-mono"> + <code className="bg-muted-50 text-accent px-1.5 py-0.5 rounded text-sm font-mono">Or define a specific
text-codetoken if code highlighting should have its own semantic color.
69-84: Migrate remaining hardcoded colors to semantic tokens.The links (lines 71-72) and blockquote border (line 81) still use hardcoded color classes:
- Links:
text-blue-400 hover:text-blue-300- Blockquote:
border-purple-500For consistency with the theme system, consider using semantic tokens that adapt to both light and dark modes.
🔎 Proposed refactor
<a href={href} - className="text-blue-400 hover:text-blue-300 underline" + className="text-link hover:text-link-hover underline" target="_blank" rel="noopener noreferrer" >- <blockquote className="border-l-4 border-purple-500 pl-4 py-2 my-2 text-muted-foreground italic"> + <blockquote className="border-l-4 border-accent pl-4 py-2 my-2 text-muted-foreground italic">Alternatively, use
border-primaryif the accent should match the primary brand color, or define specifictext-link/border-blockquotetokens in your CSS variables.apps/bubble-studio/src/components/GenerationOutputOverlay.tsx (2)
58-58: Consider simplifying the boolean expression.The ternary can be simplified to a direct negation for better readability.
🔎 Suggested simplification
- const hasError = generationResult?.success ? false : true; + const hasError = !generationResult?.success;
282-284: Simplify nullish value handling.The ternary can be replaced with nullish coalescing for brevity.
🔎 Suggested simplification
<p className="text-xl sm:text-2xl font-bold text-foreground"> - {generationResult.bubbleCount - ? generationResult.bubbleCount - : 0} + {generationResult.bubbleCount ?? 0} </p>apps/bubble-studio/src/components/OnboardingQuestionnaire.tsx (1)
193-193: Review mixed token and hard-coded color approach for theme compatibility.Line 193 (and similar patterns on lines 252, 316, 341) mixes design tokens with hard-coded colors using Tailwind's
dark:prefix:'border-border bg-slate-100/50 dark:bg-white/5 hover:border-slate-400 dark:hover:border-white/20 hover:bg-slate-200/50 dark:hover:bg-white/10'This approach may not work correctly with the new dynamic theming system. According to the PR objectives, the theme is managed via Zustand store with CSS variables, which means:
- The
dark:prefix applies based on thedarkclass on the root element- Hard-coded colors like
slate-100/50andwhite/5won't respond to theme CSS variables- This creates inconsistency where some colors use tokens (e.g.,
border-border) while others are fixedConsider refactoring to use semantic tokens exclusively for unselected states, or creating token variants that work with the theme system.
#!/bin/bash # Description: Find all instances of mixed token/hard-coded color patterns echo "=== Searching for dark: prefix with hard-coded colors ===" rg -n "dark:bg-(slate|white|gray|zinc)" apps/bubble-studio/src/components/OnboardingQuestionnaire.tsxapps/bubble-studio/src/demos/DocumentGenerationDemo.tsx (1)
581-581: Consider using SRI for CDN-loaded XLSX library.The XLSX library is loaded from a CDN without Subresource Integrity (SRI) verification. This could be a supply-chain risk if the CDN is compromised.
What is the SRI hash for https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js?Also applies to: 1024-1024
apps/bubble-studio/src/components/execution_logs/CodeRestoreModal.tsx (2)
59-65: Consider using consistent token-based theming instead ofdark:variants.The backdrop and modal container use explicit
dark:variants (e.g.,dark:bg-sidebar/50,dark:bg-sidebar) alongside token-based classes. Since the PR introduces a CSS variable-based theming system withdarkMode: 'class', these tokens should automatically adapt. Mixing both patterns can lead to maintenance overhead.If the tokens don't provide the desired values in dark mode, consider extending them rather than using
dark:overrides.
138-138: Cancel button uses hardcoded dark mode hover state.The
dark:hover:bg-gray-700is a hardcoded color that doesn't use the theme token system. Consider using a semantic token likehover:bg-muted-foreground/10or similar for consistency.apps/bubble-studio/src/stores/settingsStore.ts (1)
42-48: Critical:applyThemeis used before it's defined.
applyThemeis called on line 47, but it's defined as a function declaration on line 82. While function declarations are hoisted in JavaScript, this code executes at module load time. If there's any issue with the execution order or if this were converted to an arrow function, it would fail.The current code works because
function applyTheme()declarations are hoisted. However, for clarity and to avoid future refactoring issues, consider movingapplyThemeabove its first usage or converting the early application to use an inline implementation.🔎 Suggested reorder for clarity
+function applyTheme(theme: 'light' | 'dark') { + const root = document.documentElement; + root.classList.remove('light', 'dark'); + root.classList.add(theme); + root.style.colorScheme = theme; +} + const initialTheme = loadStoredTheme(); const initialResolvedTheme = resolveTheme(initialTheme); // Apply immediately to avoid flash during first paint if (typeof document !== 'undefined') { applyTheme(initialResolvedTheme); } export const useSettingsStore = create<SettingsStore>()( // ... rest of store ); - -function applyTheme(theme: 'light' | 'dark') { - const root = document.documentElement; - root.classList.remove('light', 'dark'); - root.classList.add(theme); - root.style.colorScheme = theme; -}apps/bubble-studio/src/components/FlowNotFoundView.tsx (1)
42-55: Consider using the new Button component for consistency.The buttons use explicit
dark:variants mixed with semantic tokens. The PR introduces a newButtoncomponent with class-variance-authority that handles theming variants consistently. Consider using it here for the "Go to My Flows" and "Retry" actions to maintain consistency with the design system.apps/bubble-studio/src/index.css.main (1)
96-104: Overriding Tailwind utility classes may cause conflicts.Redefining
.h-fulland.flex-1with!importantcould conflict with Tailwind's own definitions and lead to unexpected behavior. Consider using custom class names or the@layerdirective if you need to ensure these styles take precedence for specific use cases.🔎 Alternative approach
-/* Fix flexbox height issues */ -.h-full { - height: 100% !important; -} - -/* Ensure proper flexbox behavior */ -.flex-1 { - flex: 1 1 0% !important; - min-height: 0; -} +/* Custom utility for Monaco/flexbox height fixes */ +.monaco-flex-container { + height: 100%; + flex: 1 1 0%; + min-height: 0; +}Then apply
.monaco-flex-containerwhere needed instead of relying on overridden Tailwind utilities.apps/bubble-studio/src/components/BubbleSidePanel.tsx (1)
505-515: Credential badges use hardcoded colors.The credential tags use hardcoded
bg-yellow-900/30andtext-yellow-300while other elements migrated to semantic tokens. Consider whether these should also use a semantic token (e.g.,bg-warning,text-warning-foreground) for consistency with the theme system.apps/bubble-studio/src/pages/HomePage.tsx (1)
204-210: Loading spinner uses hardcoded brand colors.The spinner uses
border-purple-600which is kept as a brand accent. This is acceptable, but if you want full theme customization, consider using a semantic token likeborder-primaryinstead.apps/bubble-studio/src/components/Button.tsx (1)
42-53: Consider adding defaulttype="button".The Button component doesn't set a default
typeattribute. In HTML, buttons default totype="submit", which can cause unintended form submissions. Consider adding a default to prevent this common pitfall.🔎 Suggested fix
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( - ({ className, variant, size, asChild = false, ...props }, ref) => { + ({ className, variant, size, asChild = false, type = 'button', ...props }, ref) => { const Comp = asChild ? Slot : 'button'; return ( <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} + type={asChild ? undefined : type} {...props} /> ); } );Note: When
asChildis true, thetypeattribute should be omitted sinceSlotrenders a custom element.apps/bubble-studio/src/pages/DashboardPage.tsx (1)
27-35: Build‑from‑scratch flow and streaming indicator behave correctly; minor polish possible.
handleBuildFromScratchcorrectly guards on auth, clears output, starts streaming, logs progress, creates a minimal BubbleFlow, then navigates to/flow/$flowIdand stops streaming. The error path appends an error line and clearsisCreatingFromScratch, so the CTA can be retried.- The main generate button now shows
LoadingDotswhenisStreamingand is disabled viaisGenerateDisabled, which is consistent with the keyboard handler’s!isStreamingguard.Two minor polish points you could consider:
- Optionally reset
isCreatingFromScratchon the success path as well, in case this code is ever reused without navigation.- In
PLACEHOLDER_MESSAGES, “subredddits” is misspelled.Neither affects correctness; everything else here looks solid.
Also applies to: 59-67, 112-195, 505-537
apps/bubble-studio/src/components/flow_visualizer/FlowVisualizer.tsx (1)
970-970: Remove debug console.log statements.Debug
console.logstatements should be removed before merging. Found at:
- Line 970:
console.log('stepGraph', stepGraph)- Line 1514:
console.log('onTransformationClick', ...)- Line 2219:
console.log('addStepToContext', ...)- Line 2235:
console.log('addTransformationToContext', ...)🔎 Remove debug logs
- console.log('stepGraph', stepGraph);And similarly for the other locations.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (62)
apps/bubble-studio/package.json(2 hunks)apps/bubble-studio/src/App.css(6 hunks)apps/bubble-studio/src/components/AnimatedThemeToggle.tsx(1 hunks)apps/bubble-studio/src/components/AuthWrapper.tsx(1 hunks)apps/bubble-studio/src/components/BubbleSidePanel.tsx(19 hunks)apps/bubble-studio/src/components/Button.tsx(1 hunks)apps/bubble-studio/src/components/ConsolidatedSidePanel.tsx(4 hunks)apps/bubble-studio/src/components/CronToggle.tsx(6 hunks)apps/bubble-studio/src/components/ExportModal.tsx(18 hunks)apps/bubble-studio/src/components/FlowGeneration.tsx(2 hunks)apps/bubble-studio/src/components/FlowIDEView.tsx(10 hunks)apps/bubble-studio/src/components/FlowNotFoundView.tsx(2 hunks)apps/bubble-studio/src/components/GenerationOutputOverlay.tsx(2 hunks)apps/bubble-studio/src/components/InputFieldsRenderer.tsx(26 hunks)apps/bubble-studio/src/components/InputParameters.tsx(18 hunks)apps/bubble-studio/src/components/MonacoEditor.tsx(4 hunks)apps/bubble-studio/src/components/MonthlyUsageBar.tsx(13 hunks)apps/bubble-studio/src/components/OAuthCallback.tsx(1 hunks)apps/bubble-studio/src/components/OnboardingQuestionnaire.tsx(13 hunks)apps/bubble-studio/src/components/Sidebar.tsx(21 hunks)apps/bubble-studio/src/components/SignInModal.tsx(2 hunks)apps/bubble-studio/src/components/SubmitTemplateModal.tsx(6 hunks)apps/bubble-studio/src/components/ThemeProvider.tsx(1 hunks)apps/bubble-studio/src/components/UsageDetailsModal.tsx(9 hunks)apps/bubble-studio/src/components/WebViewWarning.tsx(3 hunks)apps/bubble-studio/src/components/WebhookToggle.tsx(7 hunks)apps/bubble-studio/src/components/WebhookURLDisplay.tsx(4 hunks)apps/bubble-studio/src/components/ai/CodeDiffView.tsx(2 hunks)apps/bubble-studio/src/components/ai/MarkdownWithBubbles.tsx(3 hunks)apps/bubble-studio/src/components/ai/PearlChat.tsx(20 hunks)apps/bubble-studio/src/components/execution_logs/AllEventsView.tsx(16 hunks)apps/bubble-studio/src/components/execution_logs/CodeRestoreModal.tsx(5 hunks)apps/bubble-studio/src/components/execution_logs/ExecutionHistory.tsx(10 hunks)apps/bubble-studio/src/components/execution_logs/JsonRenderer.tsx(14 hunks)apps/bubble-studio/src/components/execution_logs/LiveOutput.tsx(1 hunks)apps/bubble-studio/src/components/flow_visualizer/BubbleColors.ts(1 hunks)apps/bubble-studio/src/components/flow_visualizer/BubbleDetailsOverlay.tsx(9 hunks)apps/bubble-studio/src/components/flow_visualizer/FlowVisualizer.tsx(11 hunks)apps/bubble-studio/src/components/flow_visualizer/GeneratingOverlay.tsx(3 hunks)apps/bubble-studio/src/components/flow_visualizer/nodes/BubbleNode.tsx(10 hunks)apps/bubble-studio/src/components/flow_visualizer/nodes/CronScheduleNode.tsx(28 hunks)apps/bubble-studio/src/components/flow_visualizer/nodes/InputSchemaNode.tsx(4 hunks)apps/bubble-studio/src/components/flow_visualizer/nodes/StepContainerNode.tsx(2 hunks)apps/bubble-studio/src/components/flow_visualizer/nodes/TransformationNode.tsx(4 hunks)apps/bubble-studio/src/components/shared/MarkdownComponents.tsx(2 hunks)apps/bubble-studio/src/demos/DocumentGenerationDemo.tsx(22 hunks)apps/bubble-studio/src/demos/PDFOcrDemo.tsx(19 hunks)apps/bubble-studio/src/demos/R2StorageDemo.tsx(17 hunks)apps/bubble-studio/src/index.css.main(1 hunks)apps/bubble-studio/src/lib/utils.ts(1 hunks)apps/bubble-studio/src/main.tsx(5 hunks)apps/bubble-studio/src/pages/CredentialsPage.tsx(22 hunks)apps/bubble-studio/src/pages/DashboardPage.tsx(20 hunks)apps/bubble-studio/src/pages/HomePage.tsx(13 hunks)apps/bubble-studio/src/pages/PricingPage.tsx(1 hunks)apps/bubble-studio/src/routes/credentials.tsx(1 hunks)apps/bubble-studio/src/routes/flows.tsx(1 hunks)apps/bubble-studio/src/routes/pricing.tsx(1 hunks)apps/bubble-studio/src/stores/settingsStore.ts(1 hunks)apps/bubble-studio/src/utils/executionLogsFormatUtils.tsx(3 hunks)apps/bubble-studio/tailwind.config.js(1 hunks)apps/bubble-studio/tailwind.config.js.main(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
apps/bubble-studio/src/components/MonacoEditor.tsx
📄 CodeRabbit inference engine (.cursor/rules/bundling.mdc)
The Monaco Editor integration in
apps/bubble-studio/src/components/MonacoEditor.tsxmust fetch the bundled types from/bubble-types.txt, wrap them in a module declaration for@bubblelab/bubble-core, and add them to Monaco's TypeScript type system
Files:
apps/bubble-studio/src/components/MonacoEditor.tsx
🧠 Learnings (11)
📚 Learning: 2025-12-19T03:17:06.817Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/bundling.mdc:0-0
Timestamp: 2025-12-19T03:17:06.817Z
Learning: Applies to apps/bubble-studio/src/components/MonacoEditor.tsx : The Monaco Editor integration in `apps/bubble-studio/src/components/MonacoEditor.tsx` must fetch the bundled types from `/bubble-types.txt`, wrap them in a module declaration for `bubblelab/bubble-core`, and add them to Monaco's TypeScript type system
Applied to files:
apps/bubble-studio/src/components/ThemeProvider.tsxapps/bubble-studio/src/routes/flows.tsxapps/bubble-studio/src/App.cssapps/bubble-studio/src/stores/settingsStore.tsapps/bubble-studio/package.jsonapps/bubble-studio/src/components/ai/MarkdownWithBubbles.tsxapps/bubble-studio/src/components/BubbleSidePanel.tsxapps/bubble-studio/src/components/Button.tsxapps/bubble-studio/src/components/ConsolidatedSidePanel.tsxapps/bubble-studio/src/index.css.mainapps/bubble-studio/src/components/execution_logs/CodeRestoreModal.tsxapps/bubble-studio/tailwind.config.js.mainapps/bubble-studio/src/components/InputFieldsRenderer.tsxapps/bubble-studio/src/components/ai/PearlChat.tsxapps/bubble-studio/src/utils/executionLogsFormatUtils.tsxapps/bubble-studio/src/components/MonacoEditor.tsxapps/bubble-studio/src/components/shared/MarkdownComponents.tsxapps/bubble-studio/src/components/flow_visualizer/nodes/BubbleNode.tsxapps/bubble-studio/src/demos/DocumentGenerationDemo.tsx
📚 Learning: 2025-12-19T03:16:54.994Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/bubblelab.mdc:0-0
Timestamp: 2025-12-19T03:16:54.994Z
Learning: Generate bubble flow according to the prompts and specifications defined in packages/bubble-shared-schemas/src/bubbleflow-generation-prompts.ts
Applied to files:
apps/bubble-studio/src/routes/flows.tsxapps/bubble-studio/src/components/ExportModal.tsxapps/bubble-studio/src/components/FlowNotFoundView.tsxapps/bubble-studio/src/components/flow_visualizer/nodes/InputSchemaNode.tsxapps/bubble-studio/src/components/flow_visualizer/BubbleDetailsOverlay.tsxapps/bubble-studio/src/components/ai/PearlChat.tsxapps/bubble-studio/src/components/FlowIDEView.tsxapps/bubble-studio/src/components/FlowGeneration.tsxapps/bubble-studio/src/components/flow_visualizer/nodes/BubbleNode.tsx
📚 Learning: 2025-12-19T03:17:06.817Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/bundling.mdc:0-0
Timestamp: 2025-12-19T03:17:06.817Z
Learning: Applies to packages/bubble-core/dist/**/*.d.ts : All external imports (except relative imports) must be removed from the bundled output to prevent circular processing and external dependency issues
Applied to files:
apps/bubble-studio/src/routes/flows.tsxapps/bubble-studio/package.jsonapps/bubble-studio/src/components/flow_visualizer/nodes/InputSchemaNode.tsxapps/bubble-studio/src/index.css.mainapps/bubble-studio/tailwind.config.js.mainapps/bubble-studio/src/components/InputFieldsRenderer.tsxapps/bubble-studio/src/components/flow_visualizer/nodes/BubbleNode.tsxapps/bubble-studio/src/demos/DocumentGenerationDemo.tsx
📚 Learning: 2025-12-19T03:16:48.793Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/api.mdc:0-0
Timestamp: 2025-12-19T03:16:48.793Z
Learning: Applies to **/packages/bubble-shared-schemas/**/*.{ts,tsx} : Write shared schemas between frontend and backend in `/packages/bubble-shared-schemas` directory
Applied to files:
apps/bubble-studio/src/routes/flows.tsxapps/bubble-studio/package.jsonapps/bubble-studio/src/components/flow_visualizer/nodes/InputSchemaNode.tsxapps/bubble-studio/tailwind.config.js.mainapps/bubble-studio/src/components/InputFieldsRenderer.tsxapps/bubble-studio/src/routes/credentials.tsxapps/bubble-studio/src/components/flow_visualizer/nodes/BubbleNode.tsx
📚 Learning: 2025-12-19T03:17:06.817Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/bundling.mdc:0-0
Timestamp: 2025-12-19T03:17:06.817Z
Learning: Applies to apps/bubble-studio/public/bubble-types.txt : The bundle file at `apps/bubble-studio/public/bubble-types.txt` must be kept synchronized with `packages/bubble-core/dist/bubble-bundle.d.ts` after each build
Applied to files:
apps/bubble-studio/src/routes/flows.tsxapps/bubble-studio/src/App.cssapps/bubble-studio/package.jsonapps/bubble-studio/src/components/ai/MarkdownWithBubbles.tsxapps/bubble-studio/src/components/ConsolidatedSidePanel.tsxapps/bubble-studio/src/index.css.mainapps/bubble-studio/tailwind.config.js.mainapps/bubble-studio/src/components/InputFieldsRenderer.tsxapps/bubble-studio/src/routes/credentials.tsxapps/bubble-studio/src/components/FlowGeneration.tsxapps/bubble-studio/src/components/flow_visualizer/nodes/BubbleNode.tsxapps/bubble-studio/src/demos/DocumentGenerationDemo.tsx
📚 Learning: 2025-12-19T03:17:06.817Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/bundling.mdc:0-0
Timestamp: 2025-12-19T03:17:06.817Z
Learning: Applies to packages/bubble-core/src/index.ts : All new types and classes added to bubble-core must be exported from `packages/bubble-core/src/index.ts` to ensure they are included in the generated bundle
Applied to files:
apps/bubble-studio/src/routes/flows.tsxapps/bubble-studio/src/lib/utils.tsapps/bubble-studio/package.jsonapps/bubble-studio/src/components/ExportModal.tsxapps/bubble-studio/src/components/BubbleSidePanel.tsxapps/bubble-studio/src/components/Button.tsxapps/bubble-studio/src/index.css.mainapps/bubble-studio/tailwind.config.js.mainapps/bubble-studio/src/routes/credentials.tsxapps/bubble-studio/src/components/flow_visualizer/nodes/BubbleNode.tsx
📚 Learning: 2025-12-19T03:16:54.994Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/bubblelab.mdc:0-0
Timestamp: 2025-12-19T03:16:54.994Z
Learning: Ensure that bubbles.json in apps/bubble-studio/public/ is a condensed definition of all bubbles and requires building/bundling to be updated
Applied to files:
apps/bubble-studio/package.jsonapps/bubble-studio/src/index.css.mainapps/bubble-studio/tailwind.config.js.main
📚 Learning: 2025-12-19T03:17:06.817Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/bundling.mdc:0-0
Timestamp: 2025-12-19T03:17:06.817Z
Learning: Applies to packages/bubble-core/dist/**/*.d.ts : The type bundling system for Monaco Editor must process TypeScript declaration files (.d.ts) and inline all dependencies into a single self-contained bundle in `packages/bubble-core/dist/bubble-bundle.d.ts`
Applied to files:
apps/bubble-studio/package.jsonapps/bubble-studio/src/index.css.mainapps/bubble-studio/tailwind.config.js.mainapps/bubble-studio/src/components/MonacoEditor.tsxapps/bubble-studio/src/components/flow_visualizer/nodes/BubbleNode.tsxapps/bubble-studio/src/demos/DocumentGenerationDemo.tsx
📚 Learning: 2025-12-19T03:16:54.994Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/bubblelab.mdc:0-0
Timestamp: 2025-12-19T03:16:54.994Z
Learning: Refer to README.md for general information about bubble lab and project structure
Applied to files:
apps/bubble-studio/src/components/ExportModal.tsx
📚 Learning: 2025-12-19T03:16:48.793Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: .cursor/rules/api.mdc:0-0
Timestamp: 2025-12-19T03:16:48.793Z
Learning: Applies to **/bubblelab-api/**/*.test.{js,ts} : Reference webhook.test as the example for how backend tests should be written
Applied to files:
apps/bubble-studio/src/components/ExportModal.tsx
📚 Learning: 2025-12-19T03:16:43.898Z
Learnt from: CR
Repo: bubblelabai/BubbleLab PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T03:16:43.898Z
Learning: Applies to .cursor/rules/bubblelab.mdc : Read .cursor/rules/bubblelab.mdc to understand bubble lab before every conversation
Applied to files:
apps/bubble-studio/src/components/BubbleSidePanel.tsx
🧬 Code graph analysis (12)
apps/bubble-studio/src/components/ThemeProvider.tsx (1)
apps/bubble-studio/src/stores/settingsStore.ts (1)
useSettingsStore(50-80)
apps/bubble-studio/src/components/flow_visualizer/nodes/StepContainerNode.tsx (1)
apps/bubble-studio/src/components/flow_visualizer/BubbleColors.ts (1)
BUBBLE_COLORS(7-49)
apps/bubble-studio/src/components/AnimatedThemeToggle.tsx (2)
apps/bubble-studio/src/stores/settingsStore.ts (1)
useSettingsStore(50-80)apps/bubble-studio/src/lib/utils.ts (1)
cn(4-6)
apps/bubble-studio/src/components/flow_visualizer/nodes/InputSchemaNode.tsx (1)
apps/bubble-studio/src/components/flow_visualizer/BubbleColors.ts (1)
BUBBLE_COLORS(7-49)
apps/bubble-studio/src/components/GenerationOutputOverlay.tsx (3)
apps/bubble-studio/src/stores/outputStore.ts (1)
useOutputStore(52-71)packages/bubble-core/src/bubbles/service-bubble/agi-inc.ts (1)
navigate(868-885)apps/bubble-studio/src/components/TypewriterMarkdown.tsx (1)
TypewriterMarkdown(23-63)
apps/bubble-studio/src/components/flow_visualizer/BubbleDetailsOverlay.tsx (1)
apps/bubblelab-api/src/services/bubble-flow-parser.ts (1)
isSystemCredential(85-87)
apps/bubble-studio/src/components/execution_logs/CodeRestoreModal.tsx (1)
apps/bubble-studio/src/stores/settingsStore.ts (1)
useSettingsStore(50-80)
apps/bubble-studio/src/components/FlowIDEView.tsx (4)
apps/bubble-studio/src/stores/outputStore.ts (1)
useOutputStore(52-71)apps/bubble-studio/src/hooks/useExecutionHistory.ts (1)
useExecutionHistory(29-86)apps/bubble-studio/src/components/FlowGeneration.tsx (1)
FlowGeneration(36-246)apps/bubble-studio/src/components/ConsolidatedSidePanel.tsx (1)
ConsolidatedSidePanel(12-151)
apps/bubble-studio/src/components/MonacoEditor.tsx (1)
apps/bubble-studio/src/stores/settingsStore.ts (1)
useSettingsStore(50-80)
apps/bubble-studio/src/components/flow_visualizer/nodes/CronScheduleNode.tsx (1)
apps/bubble-studio/src/components/flow_visualizer/BubbleColors.ts (1)
BUBBLE_COLORS(7-49)
apps/bubble-studio/src/pages/DashboardPage.tsx (1)
apps/bubble-studio/src/lib/integrations.ts (3)
INTEGRATIONS(58-76)SCRAPING_SERVICES(79-85)AI_MODELS(87-92)
apps/bubble-studio/src/components/execution_logs/AllEventsView.tsx (1)
apps/bubble-studio/src/utils/executionLogsFormatUtils.tsx (3)
makeLinksClickable(86-106)formatEventMessage(394-409)formatTimestamp(68-70)
| background: var(--theme-background); | ||
| color: var(--theme-foreground); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for CSS variable definitions in the bubble-studio project
echo "=== Searching for --theme-* variable definitions ==="
rg -n "^\s*--theme-" --type=css || echo "No --theme-* variables found"
echo -e "\n=== Searching for --scrollbar-* variable definitions ==="
rg -n "^\s*--scrollbar-" --type=css || echo "No --scrollbar-* variables found"
echo -e "\n=== Checking for :root or [data-theme] declarations ==="
rg -n "(:root|\[data-theme\])" --type=css -A 3 || echo "No :root or [data-theme] found"
echo -e "\n=== Listing CSS files in the project ==="
find . -name "*.css" -type f | head -20Repository: bubblelabai/BubbleLab
Length of output: 971
🏁 Script executed:
#!/bin/bash
# Read the CSS files to verify the content
echo "=== Content of apps/bubble-studio/src/index.css ==="
cat apps/bubble-studio/src/index.css
echo -e "\n=== Content of apps/bubble-studio/src/App.css (first 50 lines) ==="
head -50 apps/bubble-studio/src/App.cssRepository: bubblelabai/BubbleLab
Length of output: 7293
CSS variables referenced in App.css are not defined in the codebase.
App.css uses --theme-background, --theme-foreground, --theme-secondary, --theme-border, and --scrollbar-* variables, but none of these are defined in index.css or any other CSS file. Define these variables in index.css within the :root selector, or the theme system will not function properly.
🤖 Prompt for AI Agents
In apps/bubble-studio/src/App.css around lines 12-13, App.css references CSS
variables (--theme-background, --theme-foreground, --theme-secondary,
--theme-border, and --scrollbar-*) that are not defined anywhere; add
definitions for all those variables inside the :root selector in
apps/bubble-studio/src/index.css (or the global CSS entry) with sensible default
color/size values, include the --scrollbar-* variables used for track/Thumb
sizing and colors, and optionally provide fallback values or theme-specific
overrides so the theme system works consistently across the app.
| </summary> | ||
| <div className="mt-2"> | ||
| <pre className="bg-gray-900/50 rounded-lg overflow-x-auto mb-2"> | ||
| <pre className="bg-slate-100 dark:bg-gray-900/50 rounded-lg overflow-x-auto mb-2"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
fd -type f -name "MarkdownWithBubbles.tsx" -o -name "MarkdownComponents.tsx"Repository: bubblelabai/BubbleLab
Length of output: 235
🏁 Script executed:
fd -name "MarkdownWithBubbles.tsx"Repository: bubblelabai/BubbleLab
Length of output: 295
🏁 Script executed:
find . -name "MarkdownWithBubbles.tsx" -o -name "MarkdownComponents.tsx"Repository: bubblelabai/BubbleLab
Length of output: 193
🏁 Script executed:
cat -n ./apps/bubble-studio/src/components/ai/MarkdownWithBubbles.tsx | sed -n '40,70p'Repository: bubblelabai/BubbleLab
Length of output: 1095
🏁 Script executed:
cat -n ./apps/bubble-studio/src/components/shared/MarkdownComponents.tsx | head -100Repository: bubblelabai/BubbleLab
Length of output: 3000
🏁 Script executed:
grep -r "bg-card-50" ./apps/bubble-studio/src --include="*.tsx" --include="*.ts" --include="*.css" --include="*.scss" | head -20Repository: bubblelabai/BubbleLab
Length of output: 392
🏁 Script executed:
grep -r "bg-card-50\|--card-50\|card-50" ./apps/bubble-studio/src --include="*.tsx" --include="*.ts" --include="*.css" --include="*.scss" -B2 -A2Repository: bubblelabai/BubbleLab
Length of output: 1058
🏁 Script executed:
find ./apps/bubble-studio -name "*.css" -o -name "*.scss" | xargs grep -l "card-50\|foreground-80\|muted-foreground" 2>/dev/nullRepository: bubblelabai/BubbleLab
Length of output: 97
🏁 Script executed:
cat ./apps/bubble-studio/src/App.cssRepository: bubblelabai/BubbleLab
Length of output: 3831
🏁 Script executed:
find ./apps/bubble-studio -name "tailwind.config.*" -o -name "tailwind.ts" -o -name "tailwind.js"Repository: bubblelabai/BubbleLab
Length of output: 149
🏁 Script executed:
cat ./apps/bubble-studio/tailwind.config.jsRepository: bubblelabai/BubbleLab
Length of output: 679
Inconsistent styling approach: MarkdownWithBubbles uses hard-coded colors while MarkdownComponents uses undefined semantic tokens.
The code block background styling at lines 49 and 59 uses bg-slate-100 dark:bg-gray-900/50, but the shared MarkdownComponents.tsx uses semantic tokens like bg-card-50, text-foreground-80, and text-muted-foreground that are not defined in tailwind.config.js. This creates a maintenance issue and styling inconsistency across markdown rendering.
Consider either:
- Adding the missing semantic tokens to tailwind.config.js and using them consistently in MarkdownWithBubbles.tsx, or
- Aligning MarkdownWithBubbles.tsx styling with the semantic token approach used in MarkdownComponents.tsx
🤖 Prompt for AI Agents
In apps/bubble-studio/src/components/ai/MarkdownWithBubbles.tsx around lines 49
and 59, the code blocks use hard-coded Tailwind classes ("bg-slate-100
dark:bg-gray-900/50") which is inconsistent with MarkdownComponents.tsx’s
semantic token approach (bg-card-50, text-foreground-80, text-muted-foreground);
fix by either (A) replacing the hard-coded classes with the same semantic token
classes used by MarkdownComponents.tsx so both components share styling, or (B)
add the missing semantic token mappings (bg-card-50, text-foreground-80,
text-muted-foreground, etc.) into tailwind.config.js and then switch this file
to use those tokens; ensure dark-mode variants are covered and test the rendered
markdown in both themes after the change.
| if (!isAllowedType(file)) { | ||
| setUploadError( | ||
| `Unsupported file type: ${file.name}. Allowed: html, csv, txt, png` | ||
| ); | ||
| continue; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find isAllowedType implementation and related code
rg -n "isAllowedType" --type typescript --type jsx -B 2 -A 10Repository: bubblelabai/BubbleLab
Length of output: 99
🏁 Script executed:
#!/bin/bash
# Find isAllowedType implementation
rg -n "isAllowedType" -A 10 -B 2Repository: bubblelabai/BubbleLab
Length of output: 6409
🏁 Script executed:
#!/bin/bash
# Get full isAllowedType implementation
sed -n '8,25p' apps/bubble-studio/src/utils/fileUtils.tsRepository: bubblelabai/BubbleLab
Length of output: 747
Update error message to list all supported file types.
The error message at line 92-93 lists only "html, csv, txt, png", but isAllowedType() actually accepts 8 file types: html, csv, txt, md, png, jpg, jpeg, gif, and webp. Update the message to reflect all supported types or use a more generic message like "Unsupported file type" to avoid misleading users.
🤖 Prompt for AI Agents
In apps/bubble-studio/src/components/ai/PearlChat.tsx around lines 90 to 95, the
upload error message only lists "html, csv, txt, png" while isAllowedType()
accepts html, csv, txt, md, png, jpg, jpeg, gif, webp; update the setUploadError
call to either list all supported types exactly ("html, csv, txt, md, png, jpg,
jpeg, gif, webp") or replace with a concise generic message like "Unsupported
file type" so the user is not misled; ensure the message includes file.name and
use the same punctuation/formatting as the existing string.
| const buttonVariants = cva( | ||
| 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', | ||
| { | ||
| variants: { | ||
| variant: { | ||
| default: 'bg-primary text-primary-foreground hover:bg-primary-90', | ||
| destructive: | ||
| 'bg-destructive text-destructive-foreground hover:bg-destructive-90', | ||
| outline: | ||
| 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', | ||
| secondary: | ||
| 'bg-secondary text-secondary-foreground hover:bg-secondary-80', | ||
| ghost: 'hover:bg-accent hover:text-accent-foreground', | ||
| link: 'text-primary underline-offset-4 hover:underline', | ||
| }, | ||
| size: { | ||
| default: 'h-10 px-4 py-2', | ||
| sm: 'h-9 rounded-md px-3', | ||
| lg: 'h-11 rounded-md px-8', | ||
| icon: 'h-10 w-10', | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: 'default', | ||
| size: 'default', | ||
| }, | ||
| } | ||
| ); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find Button component and Tailwind config
find . -name "Button.tsx" -type f | head -20
find . -name "tailwind.config.*" -type f | head -10Repository: bubblelabai/BubbleLab
Length of output: 196
🏁 Script executed:
#!/bin/bash
# Also check for Tailwind CSS file
find . -name "*.css" -type f | grep -i tailwind | head -10Repository: bubblelabai/BubbleLab
Length of output: 47
🏁 Script executed:
#!/bin/bash
# Read the Button.tsx file to verify content
cat -n ./apps/bubble-studio/src/components/Button.tsxRepository: bubblelabai/BubbleLab
Length of output: 2375
🏁 Script executed:
#!/bin/bash
# Read the tailwind config to check for token definitions
cat -n ./apps/bubble-studio/tailwind.config.jsRepository: bubblelabai/BubbleLab
Length of output: 889
🏁 Script executed:
#!/bin/bash
# Check the alternate tailwind config file
cat -n ./apps/bubble-studio/tailwind.config.js.mainRepository: bubblelabai/BubbleLab
Length of output: 861
🏁 Script executed:
#!/bin/bash
# Check for CSS files that might define color tokens
find ./apps/bubble-studio/src -name "*.css" -type fRepository: bubblelabai/BubbleLab
Length of output: 132
🏁 Script executed:
#!/bin/bash
# Search for color token definitions in the codebase
rg "primary|destructive|accent" ./apps/bubble-studio/src --type=js --type=ts --type=css -lRepository: bubblelabai/BubbleLab
Length of output: 1533
🏁 Script executed:
#!/bin/bash
# Check the index.css and App.css files for token definitions
cat -n ./apps/bubble-studio/src/index.cssRepository: bubblelabai/BubbleLab
Length of output: 7711
🏁 Script executed:
#!/bin/bash
# Check App.css
cat -n ./apps/bubble-studio/src/App.cssRepository: bubblelabai/BubbleLab
Length of output: 5210
🏁 Script executed:
#!/bin/bash
# Search for CSS variable definitions
rg "@layer|--primary|--destructive|--accent" ./apps/bubble-studio/src --type=css -A 3Repository: bubblelabai/BubbleLab
Length of output: 47
🏁 Script executed:
#!/bin/bash
# Look for any other config files or theme definitions
find ./apps/bubble-studio -name "*.config.*" -o -name "theme*" -o -name "tokens*" | grep -v node_modulesRepository: bubblelabai/BubbleLab
Length of output: 223
🏁 Script executed:
#!/bin/bash
# Check if there are any imports or references to a theme or color definitions
rg "theme:|colors:" ./apps/bubble-studio/tailwind.config.js -A 20Repository: bubblelabai/BubbleLab
Length of output: 465
🏁 Script executed:
#!/bin/bash
# Verify if these Tailwind color classes would generate without config
# Check package.json for tailwindcss preset
cat ./apps/bubble-studio/package.json | grep -A 5 -B 5 "tailwind"Repository: bubblelabai/BubbleLab
Length of output: 1316
🏁 Script executed:
#!/bin/bash
# Check if there's any runtime theme injection or environment-specific config
find ./apps/bubble-studio/src -name "*.ts" -o -name "*.tsx" | xargs grep -l "theme|colors" | head -10Repository: bubblelabai/BubbleLab
Length of output: 47
🏁 Script executed:
#!/bin/bash
# Check the complete Button.tsx usage to see if it actually works anywhere
rg "Button\>" ./apps/bubble-studio/src --type=tsx -A 2 | head -30Repository: bubblelabai/BubbleLab
Length of output: 145
🏁 Script executed:
#!/bin/bash
# Check if Button is imported or used anywhere
rg "import.*Button" ./apps/bubble-studio/src --type=tsx --type=ts | head -20Repository: bubblelabai/BubbleLab
Length of output: 92
🏁 Script executed:
#!/bin/bash
# Check vite config and any other build/theme setup
cat ./apps/bubble-studio/vite.config.tsRepository: bubblelabai/BubbleLab
Length of output: 1388
🏁 Script executed:
#!/bin/bash
# Check if there's a @theme block in any CSS file
rg "@theme" ./apps/bubble-studio/src --type=css -A 30Repository: bubblelabai/BubbleLab
Length of output: 47
🏁 Script executed:
#!/bin/bash
# Check the exact Tailwind CSS version and if there's any preset being used
cat ./apps/bubble-studio/tailwind.config.js | head -50Repository: bubblelabai/BubbleLab
Length of output: 679
Add missing Tailwind color tokens to tailwind.config.js.
The Button component references semantic color tokens (bg-primary, bg-destructive, bg-secondary, bg-accent, text-primary-foreground, text-accent-foreground, border-input, bg-background, ring-offset-background, ring-ring) and custom opacity variants (hover:bg-primary-90, hover:bg-secondary-80, hover:bg-destructive-90) that are not defined in tailwind.config.js. Without these theme color definitions, Tailwind will not generate the corresponding utility classes, leaving the Button component unstyled.
Additionally, the opacity variant syntax (-90, -80) does not match standard Tailwind CSS format (which uses /90, /80). Either define custom color scale tokens in theme.colors or migrate to standard Tailwind opacity modifiers.
🤖 Prompt for AI Agents
In apps/bubble-studio/src/components/Button.tsx lines 7-34: the component uses
custom semantic Tailwind tokens (bg-primary, bg-destructive, bg-secondary,
bg-accent, text-primary-foreground, text-accent-foreground, border-input,
bg-background, ring-offset-background, ring-ring) and nonstandard opacity
suffixes (-90, -80, -90) which Tailwind won’t generate by default; fix by
updating tailwind.config.js to add these semantic color keys under theme.colors
(or map them to CSS variables) with appropriate shades (e.g., DEFAULT and 50–900
or explicit 80/90 keys) and/or change the hover classes to standard Tailwind
opacity syntax (use /90 or configure custom color scales) so the utilities exist
and the Button styles are rendered.
| <div | ||
| className={`h-8 w-8 rounded-lg flex items-center justify-center transition-colors ${cronActive ? 'bg-green-600' : 'bg-neutral-600'}`} | ||
| className={`h-8 w-8 rounded-lg flex items-center justify-center transition-colors ${cronActive ? 'bg-success' : 'bg-muted'}`} | ||
| > | ||
| <Clock className="h-4 w-4 text-white" /> | ||
| <Clock className="h-4 w-4 text-primary-foreground" /> | ||
| </div> |
There was a problem hiding this comment.
Potential contrast issue: icon color doesn't adapt to background state.
The Clock icon uses text-primary-foreground on a background that alternates between bg-success (active) and bg-muted (inactive). Since text-primary-foreground is designed for contrast against bg-primary, it may not provide adequate contrast on bg-muted, especially in light theme where muted backgrounds are typically light gray.
Consider using conditional text colors that match the background state, or use a universally contrasting color like text-white for both states.
🔎 Suggested fix with conditional icon coloring
<div
- className={`h-8 w-8 rounded-lg flex items-center justify-center transition-colors ${cronActive ? 'bg-success' : 'bg-muted'}`}
+ className={`h-8 w-8 rounded-lg flex items-center justify-center transition-colors ${cronActive ? 'bg-success' : 'bg-muted'}`}
>
- <Clock className="h-4 w-4 text-primary-foreground" />
+ <Clock className={`h-4 w-4 ${cronActive ? 'text-white' : 'text-foreground'}`} />
</div>Alternatively, if both states should use white icons:
- <Clock className="h-4 w-4 text-primary-foreground" />
+ <Clock className="h-4 w-4 text-white" />📝 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.
| <div | |
| className={`h-8 w-8 rounded-lg flex items-center justify-center transition-colors ${cronActive ? 'bg-green-600' : 'bg-neutral-600'}`} | |
| className={`h-8 w-8 rounded-lg flex items-center justify-center transition-colors ${cronActive ? 'bg-success' : 'bg-muted'}`} | |
| > | |
| <Clock className="h-4 w-4 text-white" /> | |
| <Clock className="h-4 w-4 text-primary-foreground" /> | |
| </div> | |
| <div | |
| className={`h-8 w-8 rounded-lg flex items-center justify-center transition-colors ${cronActive ? 'bg-success' : 'bg-muted'}`} | |
| > | |
| <Clock className={`h-4 w-4 ${cronActive ? 'text-white' : 'text-foreground'}`} /> | |
| </div> |
🤖 Prompt for AI Agents
In apps/bubble-studio/src/components/CronToggle.tsx around lines 131 to 135, the
Clock icon uses a fixed text class `text-primary-foreground` which may not have
sufficient contrast against the toggled backgrounds `bg-success` (active) and
`bg-muted` (inactive); update the JSX to apply the icon color conditionally
(e.g., use `text-white` when cronActive is true and a darker color like
`text-foreground` or `text-muted-foreground` when false) or choose a single
high-contrast class for both states so the icon remains accessible across
themes.
| {/* Header with Bubble Lab branding */} | ||
| <div className="text-center mb-8"> | ||
| <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-600 rounded-full mb-4"> | ||
| <div className="inline-flex items-center justify-center w-16 h-16 bg-info rounded-full mb-4"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find the WebViewWarning.tsx file
find . -name "WebViewWarning.tsx" -o -name "tailwind.config.*" -o -name "theme.css" -o -name "*.config.ts" 2>/dev/null | head -20Repository: bubblelabai/BubbleLab
Length of output: 439
🏁 Script executed:
#!/bin/bash
# Find configuration files and the component
find . -type f \( -name "WebViewWarning.tsx" -o -name "tailwind.config.*" -o -name "*.config.ts" -o -name "theme.css" \) 2>/dev/null | grep -v node_modules | head -20Repository: bubblelabai/BubbleLab
Length of output: 439
🏁 Script executed:
#!/bin/bash
# List directory structure first
ls -la apps/ 2>/dev/null | head -20
# Find WebViewWarning.tsx
find apps -name "WebViewWarning.tsx" -type f 2>/dev/null
# Find all tailwind and theme config files
find . -type f \( -name "tailwind.config.*" -o -name "*.tailwind.*" \) 2>/dev/null | grep -v node_modules | head -10Repository: bubblelabai/BubbleLab
Length of output: 439
🏁 Script executed:
#!/bin/bash
# Read the WebViewWarning.tsx around the lines mentioned
echo "=== WebViewWarning.tsx (lines 195-220) ==="
sed -n '195,220p' ./apps/bubble-studio/src/components/WebViewWarning.tsx
echo ""
echo "=== WebViewWarning.tsx (lines 270-290) ==="
sed -n '270,290p' ./apps/bubble-studio/src/components/WebViewWarning.tsx
echo ""
echo "=== tailwind.config.js ==="
cat ./apps/bubble-studio/tailwind.config.js | head -100Repository: bubblelabai/BubbleLab
Length of output: 2798
🏁 Script executed:
#!/bin/bash
# Search for CSS files with theme or color definitions
echo "=== CSS files in bubble-studio ==="
find ./apps/bubble-studio -name "*.css" -type f 2>/dev/null | grep -v node_modules
echo ""
echo "=== Search for @theme or color definitions in CSS ==="
grep -r "@theme\|--color-" ./apps/bubble-studio --include="*.css" 2>/dev/null | head -30
echo ""
echo "=== Check for globals.css or index.css ==="
cat ./apps/bubble-studio/src/index.css 2>/dev/null || echo "No src/index.css"Repository: bubblelabai/BubbleLab
Length of output: 6177
🏁 Script executed:
#!/bin/bash
# Search for where these color tokens are actually defined
echo "=== Search for color token definitions ==="
grep -r "bg-info\|bg-warning\|text-foreground-80\|bg-card" ./apps/bubble-studio --include="*.js" --include="*.ts" --include="*.tsx" --include="*.css" 2>/dev/null | grep -v node_modules | grep -v ".tsx:" | head -20
echo ""
echo "=== Search for color palette definition in tailwind config ==="
grep -A 50 "colors:" ./apps/bubble-studio/tailwind.config.js
echo ""
echo "=== Check App.css ==="
cat ./apps/bubble-studio/src/App.cssRepository: bubblelabai/BubbleLab
Length of output: 3961
🏁 Script executed:
#!/bin/bash
# Check if there are any theme variable definitions
echo "=== Search for --color- or --theme- CSS variables ==="
grep -r "\-\-color-\|\-\-theme-" ./apps/bubble-studio/src --include="*.css" --include="*.tsx" --include="*.ts" 2>/dev/null
echo ""
echo "=== Check package.json for tailwind plugins ==="
grep -A 10 "dependencies\|devDependencies" ./apps/bubble-studio/package.json | head -40
echo ""
echo "=== Full tailwind.config.js content ==="
cat ./apps/bubble-studio/tailwind.config.jsRepository: bubblelabai/BubbleLab
Length of output: 4105
🏁 Script executed:
#!/bin/bash
# Let's see what's actually in the index.html to understand the full setup
echo "=== index.html ==="
cat ./apps/bubble-studio/index.html
echo ""
echo "=== Check for any CSS file that might have @theme ==="
find ./apps/bubble-studio -name "*.css" -exec grep -l "@theme" {} \;
echo ""
echo "=== Search for CSS files that define color variables ==="
find ./apps/bubble-studio/src -name "*.css" -exec sh -c 'echo "=== $1 ===" && head -50 "$1"' _ {} \;Repository: bubblelabai/BubbleLab
Length of output: 3502
🏁 Script executed:
#!/bin/bash
# Let's check the main.tsx to see how things are initialized
echo "=== main.tsx ==="
cat ./apps/bubble-studio/src/main.tsx
echo ""
echo "=== Check if there are any theme files in public or elsewhere ==="
find ./apps/bubble-studio -name "*theme*" -o -name "*color*" 2>/dev/null | grep -v node_modulesRepository: bubblelabai/BubbleLab
Length of output: 3602
🏁 Script executed:
#!/bin/bash
# Find and examine ThemeProvider
echo "=== ThemeProvider component ==="
cat ./apps/bubble-studio/src/components/ThemeProvider.tsx
echo ""
echo "=== Look for any CSS variables being set ==="
grep -r "setProperty\|--theme-\|--color-" ./apps/bubble-studio/src/components/ThemeProvider.tsxRepository: bubblelabai/BubbleLab
Length of output: 613
🏁 Script executed:
#!/bin/bash
# Find and examine settingsStore
echo "=== settingsStore ==="
cat ./apps/bubble-studio/src/stores/settingsStore.ts
echo ""
echo "=== Check for CSS variable setup in the entire codebase ==="
grep -r "document.documentElement.style.setProperty\|classList.add\|data-theme" ./apps/bubble-studio/src --include="*.ts" --include="*.tsx" 2>/dev/null | head -20Repository: bubblelabai/BubbleLab
Length of output: 3230
🏁 Script executed:
#!/bin/bash
# Now let's verify definitively if these color tokens are defined
echo "=== Search for color token definitions in entire project ==="
grep -r "bg-info\|bg-warning\|text-foreground-80" ./apps/bubble-studio --include="*.tsx" --include="*.ts" --include="*.js" --include="*.css" 2>/dev/null | grep -v "node_modules" | wc -l
echo ""
echo "=== Show actual usage of these tokens ==="
grep -r "bg-info\|bg-warning\|text-foreground-80" ./apps/bubble-studio/src --include="*.tsx" 2>/dev/null | head -15
echo ""
echo "=== Check if Tailwind is properly configured ==="
npm list tailwindcss 2>/dev/null | head -5 || echo "Using workspace package"
echo ""
echo "=== Verify tailwind.config.js one more time - checking for colors definition ==="
cat ./apps/bubble-studio/tailwind.config.js | grep -A 20 "theme\|colors"Repository: bubblelabai/BubbleLab
Length of output: 3161
🏁 Script executed:
#!/bin/bash
# Check tailwind.config.js.main which was mentioned in the file listing
echo "=== tailwind.config.js.main ==="
cat ./apps/bubble-studio/tailwind.config.js.main
echo ""
echo "=== Check if colors are defined anywhere else ==="
find ./apps/bubble-studio -name "*.js" -o -name "*.ts" | xargs grep -l "colors:" 2>/dev/null | grep -v node_modules | head -10Repository: bubblelabai/BubbleLab
Length of output: 741
🏁 Script executed:
#!/bin/bash
# Let's check if Tailwind is actually compiling these classes or if they're just being used without being defined
echo "=== Search for where color tokens might be injected or defined ==="
grep -r "extend.*colors\|colors.*:" ./apps/bubble-studio/src --include="*.ts" --include="*.tsx" --include="*.js" 2>/dev/null
echo ""
echo "=== Check vite.config.ts to see if there's any special Tailwind setup ==="
cat ./apps/bubble-studio/vite.config.tsRepository: bubblelabai/BubbleLab
Length of output: 6374
Define missing custom color tokens in Tailwind configuration.
The component uses custom color classes that are not defined in the Tailwind theme configuration:
- Status colors:
bg-info,bg-warning,text-warning,bg-card,text-foreground,text-muted-foreground - Opacity/shade variants:
bg-info-90,bg-info-10,bg-warning-20,border-warning-50,bg-muted-80,text-foreground-80,text-foreground-90 - Additional colors:
bg-success,shadow-success-20,shadow-success-30,text-info-foreground,bg-muted-30
These classes are referenced throughout the codebase (121+ occurrences) but are not defined in tailwind.config.js or via @theme directive in CSS. Without proper configuration, Tailwind will not generate these utilities and they will have no effect.
Add color token definitions to your index.css using the @theme directive (Tailwind v4) with a consistent naming convention for the opacity/shade scale (e.g., -10, -20, -30, -50, -80, -90).
🤖 Prompt for AI Agents
In apps/bubble-studio/src/components/WebViewWarning.tsx around line 200 the
component uses custom Tailwind color utilities (bg-info, bg-info-90, bg-info-10,
bg-warning, bg-warning-20, border-warning-50, bg-success, shadow-success-20,
shadow-success-30, bg-card, text-foreground, text-foreground-80,
text-foreground-90, text-info-foreground, bg-muted-30, bg-muted-80,
text-muted-foreground, etc.) that are not defined in the Tailwind config; add
these tokens to your Tailwind setup by defining a consistent color scale (e.g.,
base, -10, -20, -30, -50, -80, -90) either in tailwind.config.js under
theme.extend.colors or via an @theme block in index.css (Tailwind v4), ensuring
matching names for status colors (info, warning, success, muted, card,
foreground) and corresponding shadow/border tokens so utilities like bg-info-90
and shadow-success-20 generate correctly across the codebase.
| body { | ||
| margin: 0; | ||
| min-height: 100vh; | ||
| background-color: #0f0f23; | ||
| color: #cccccc; | ||
| font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif; | ||
| } |
There was a problem hiding this comment.
Hardcoded dark theme colors may conflict with light theme.
The body background (#0f0f23) and text color (#cccccc) are hardcoded for dark mode. Since this PR introduces a light/dark theme toggle, these values should use CSS variables or be overridden by theme classes to properly support light mode.
🔎 Suggested approach using theme-aware tokens
body {
margin: 0;
min-height: 100vh;
- background-color: #0f0f23;
- color: #cccccc;
+ background-color: var(--background);
+ color: var(--foreground);
font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
}This assumes CSS variables --background and --foreground are defined in your theme system (which appears to be the case based on the PR summary mentioning design tokens).
📝 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.
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| background-color: #0f0f23; | |
| color: #cccccc; | |
| font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| background-color: var(--background); | |
| color: var(--foreground); | |
| font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif; | |
| } |
🤖 Prompt for AI Agents
In apps/bubble-studio/src/index.css.main around lines 55 to 61, the body
background and text colors are hardcoded to dark-theme values which will
conflict with the new light/dark toggle; replace those literal color values with
theme-aware CSS variables (for example --background and --foreground) or make
them dependent on theme classes (e.g., .theme-dark/.theme-light) so the body
uses the appropriate token (background and color) provided by the design system;
update the CSS to reference the variables or class-based overrides and ensure
default values are provided for backward compatibility.
| /* Toast customizations for dark theme */ | ||
| .Toastify__toast-container { | ||
| font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; | ||
| } | ||
|
|
||
| .Toastify__toast { | ||
| background: #161b22 !important; | ||
| border: 1px solid #30363d !important; | ||
| color: #e6edf3 !important; | ||
| border-radius: 8px !important; | ||
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; | ||
| } | ||
|
|
||
| .Toastify__toast--success { | ||
| border-color: #238636 !important; | ||
| } | ||
|
|
||
| .Toastify__toast--error { | ||
| border-color: #da3633 !important; | ||
| } | ||
|
|
||
| .Toastify__toast--info { | ||
| border-color: #1f6feb !important; | ||
| } | ||
|
|
||
| .Toastify__toast--warning { | ||
| border-color: #fb8500 !important; | ||
| } | ||
|
|
||
| .Toastify__progress-bar { | ||
| background: linear-gradient(90deg, #1f6feb, #238636) !important; | ||
| } | ||
|
|
||
| .Toastify__close-button { | ||
| color: #7d8590 !important; | ||
| } | ||
|
|
||
| .Toastify__close-button:hover { | ||
| color: #e6edf3 !important; |
There was a problem hiding this comment.
Toast styles are hardcoded for dark theme only.
The Toastify customizations use hardcoded dark colors. With the new theme toggle, toasts will appear dark even in light mode, creating visual inconsistency. Consider using CSS variables or scoping these styles under a .dark class selector.
🔎 Suggested theme-aware approach
.Toastify__toast {
- background: #161b22 !important;
- border: 1px solid #30363d !important;
- color: #e6edf3 !important;
+ background: var(--popover) !important;
+ border: 1px solid var(--border) !important;
+ color: var(--popover-foreground) !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}Alternatively, scope these under .dark .Toastify__toast { ... } and add corresponding light theme styles.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/bubble-studio/src/index.css.main around lines 209 to 247, the Toastify
styles are hardcoded for dark-theme colors; scope these rules under a .dark
selector (e.g. .dark .Toastify__toast, .dark .Toastify__toast--success, etc.) or
replace hardcoded colors with theme CSS variables (e.g. --toast-bg,
--toast-border, --toast-color, --toast-progress) and provide corresponding
light-theme variable values; ensure all selectors in this block (container,
toast, variant borders, progress bar, close button and hover) are updated to use
the variables or be nested under .dark and add matching light-theme
styles/variables so toasts follow the theme toggle.
| return 'text-muted-foreground'; | ||
| case 'log_line': | ||
| return 'text-gray-300'; | ||
| return 'text-foreground-80'; | ||
| default: | ||
| return 'text-gray-300'; | ||
| return 'text-foreground-80'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for text-foreground-80 definition in config and CSS files
echo "=== Searching for text-foreground-80 in Tailwind config ==="
rg -n "foreground-80" --type=js --type=ts -g "**/tailwind.config.*"
echo ""
echo "=== Searching for foreground-80 in CSS files ==="
rg -n "foreground-80" --type=css
echo ""
echo "=== Searching for text-foreground in config ==="
rg -n "text-foreground" --type=js --type=ts
echo ""
echo "=== Checking Tailwind theme configuration ==="
find . -name "tailwind.config.*" -type f | head -5
echo ""
echo "=== Searching for foreground color definitions ==="
rg -n "foreground" --type=css -A 2 -B 2 | head -50Repository: bubblelabai/BubbleLab
Length of output: 50377
🏁 Script executed:
#!/bin/bash
# Find Tailwind config and main CSS files
echo "=== Finding Tailwind config file ==="
find . -name "tailwind.config.*" -type f
echo ""
echo "=== Finding CSS files ==="
find apps/bubble-studio -name "*.css" -type f | head -20
echo ""
echo "=== Checking main CSS file for color definitions ==="
if [ -f "apps/bubble-studio/src/index.css" ]; then
cat -n apps/bubble-studio/src/index.css | head -100
fiRepository: bubblelabai/BubbleLab
Length of output: 3673
🏁 Script executed:
#!/bin/bash
# Examine the Tailwind config file to check for custom opacity class definitions
echo "=== Tailwind Config Content ==="
cat -n apps/bubble-studio/tailwind.config.js | head -150Repository: bubblelabai/BubbleLab
Length of output: 921
🏁 Script executed:
#!/bin/bash
# Check if config has more content and look for extend configuration
echo "=== Full Tailwind Config ==="
wc -l apps/bubble-studio/tailwind.config.js
cat apps/bubble-studio/tailwind.config.js
echo ""
echo "=== Search for CSS custom properties or Tailwind @apply with foreground opacity ==="
rg -n "@apply|--.*foreground" apps/bubble-studio/src/
echo ""
echo "=== Check if there are preset or plugin files ==="
find apps/bubble-studio -name "*.config.*" -o -name "*theme*" | grep -E "\.(js|ts|css)$"
</parameter>Repository: bubblelabai/BubbleLab
Length of output: 1471
🏁 Script executed:
#!/bin/bash
# Check App.css for custom class definitions
echo "=== Full App.css Content ==="
cat -n apps/bubble-studio/src/App.css
echo ""
echo "=== Search for text-foreground-80 definition (could be custom class) ==="
rg -n "text-foreground-80|\.text-foreground-80" apps/bubble-studio/
echo ""
echo "=== Check PostCSS or other build config files ==="
find apps/bubble-studio -maxdepth 2 -name "postcss.config.*" -o -name "vite.config.*" | xargs cat 2>/dev/null | head -50Repository: bubblelabai/BubbleLab
Length of output: 23652
🏁 Script executed:
#!/bin/bash
# Check if there are theme presets or external theme files
echo "=== Search for theme files ==="
find apps/bubble-studio -name "*theme*" -o -name "*preset*" | grep -v node_modules
echo ""
echo "=== Check if Tailwind has any @layer or custom utilities in CSS ==="
cat apps/bubble-studio/src/index.css | grep -A 20 "@layer\|@apply" || echo "No @layer or @apply found"
echo ""
echo "=== Check the actual file in question to confirm the code ==="
sed -n '380,390p' apps/bubble-studio/src/utils/executionLogsFormatUtils.tsxRepository: bubblelabai/BubbleLab
Length of output: 456
text-foreground-80 is not defined in your Tailwind configuration.
This custom utility class is used extensively throughout the codebase (100+ instances) but has no corresponding definition in your Tailwind config or CSS files. Add the missing class definition to your apps/bubble-studio/tailwind.config.js theme configuration:
theme: {
extend: {
textColor: {
'foreground-80': 'color-mix(in srgb, currentColor 80%, transparent)',
// ... other opacity variants as needed
},
},
},Alternatively, use standard Tailwind opacity syntax: text-foreground/80 instead of text-foreground-80.
🤖 Prompt for AI Agents
In apps/bubble-studio/src/utils/executionLogsFormatUtils.tsx around lines 382 to
386, the switch returns the CSS class 'text-foreground-80' which is not defined
in your Tailwind config; update the Tailwind theme to add a matching textColor
entry (e.g., define 'foreground-80' as a color-mix variant) or replace
occurrences with the standard Tailwind opacity syntax 'text-foreground/80'
across the codebase to fix missing class errors.
| /** @type {import('tailwindcss').Config} */ | ||
| export default { | ||
| content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], | ||
| theme: { | ||
| fontFamily: { | ||
| sans: [ | ||
| 'Inter', | ||
| 'system-ui', | ||
| 'Avenir', | ||
| 'Helvetica', | ||
| 'Arial', | ||
| 'sans-serif', | ||
| ], | ||
| mono: [ | ||
| 'JetBrains Mono', | ||
| 'Fira Code', | ||
| 'Monaco', | ||
| 'Consolas', | ||
| 'ui-monospace', | ||
| 'SFMono-Regular', | ||
| 'SF Mono', | ||
| 'Liberation Mono', | ||
| 'Menlo', | ||
| 'monospace', | ||
| ], | ||
| }, | ||
| }, | ||
| plugins: [require('@tailwindcss/typography')], | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check for Tailwind config files and their content
echo "=== Finding all Tailwind config files ==="
fd -t f "tailwind.config" apps/bubble-studio/
echo -e "\n=== Checking for darkMode configuration ==="
rg -n "darkMode" apps/bubble-studio/ 2>/dev/null || echo "No darkMode config found"
echo -e "\n=== Contents of tailwind.config files ==="
fd -t f "tailwind.config" apps/bubble-studio/ | head -10 | while read file; do
echo -e "\n--- $file ---"
wc -l "$file"
doneRepository: bubblelabai/BubbleLab
Length of output: 522
🏁 Script executed:
#!/bin/bash
# Read both tailwind config files with line numbers
echo "=== tailwind.config.js (30 lines) ==="
cat -n apps/bubble-studio/tailwind.config.js
echo -e "\n=== tailwind.config.js.main (29 lines) ==="
cat -n apps/bubble-studio/tailwind.config.js.mainRepository: bubblelabai/BubbleLab
Length of output: 1768
🏁 Script executed:
#!/bin/bash
# Check which tailwind config is actually being used
echo "=== Searching for tailwind config references in build files ==="
fd -e json -e js -e ts -e mjs apps/bubble-studio/ | grep -E "(package\.json|vite|webpack|postcss|babel|next)" | head -20
echo -e "\n=== Checking package.json for tailwind config references ==="
rg -n "tailwind" apps/bubble-studio/package.json 2>/dev/null || echo "No package.json found"
echo -e "\n=== Looking for any references to .main config file ==="
rg -n "\.main" apps/bubble-studio/ 2>/dev/null || echo "No .main references found"
echo -e "\n=== Checking for PostCSS config ==="
fd -e js -e json "postcss\|tailwind" apps/bubble-studio/ 2>/dev/null | head -10Repository: bubblelabai/BubbleLab
Length of output: 984
Remove the non-standard .main config file or restore missing dark mode configuration.
The file tailwind.config.js.main uses a non-standard extension. Tailwind looks for tailwind.config.js by default, and the project's active config at apps/bubble-studio/tailwind.config.js includes darkMode: 'class' (line 3), which is essential for supporting theme toggle functionality where dark classes are applied whenever the dark class is present. The .main file lacks this configuration entirely, making it incomplete if it were to be used. Either remove this file if it's a backup, or sync the darkMode: 'class' setting from the active config.
🤖 Prompt for AI Agents
In apps/bubble-studio/tailwind.config.js.main lines 1-29: this file uses a
non-standard filename and is missing the crucial Tailwind darkMode: 'class'
setting present in apps/bubble-studio/tailwind.config.js; either delete this
.main backup file (if it's an obsolete copy) or restore/sync the missing config
by renaming it to tailwind.config.js or adding darkMode: 'class' at the
top-level of the exported config so it matches the active config and supports
the theme toggle functionality.
Closes #108
Summary
Testing
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.