@tpitre/story-ui 4.5.2 → 4.6.0

package/dist/templates/StoryUI/StoryUIPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,oBAAoB,CAAC;AAwwB5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CA0sCnD;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,oBAAoB,CAAC;AAwwB5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAkrCnD;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -525,92 +525,69 @@ function StoryUIPanel({ mcpPort }) {
         pollForExternalStories();
         return () => clearInterval(intervalId);
     }, []);
-    // Detect Storybook theme
+    // Detect Storybook MANAGER theme (not preview background)
+    // This ensures Story UI follows Storybook's overall theme, not the story preview background toggle
     useEffect(() => {
-        const detectTheme = () => {
-            const body = document.body;
-            const html = document.documentElement;
-            // Check URL parameters for Storybook background setting
-            const urlParams = new URLSearchParams(window.location.search);
-            const globals = urlParams.get('globals') || '';
-            const hasStorybookLightBg = globals.includes('backgrounds.value:light');
-            const hasStorybookDarkBg = globals.includes('backgrounds.value:dark') ||
-                globals.includes('backgrounds.value:%23') || // Hex colors starting with #
-                globals.includes('backgrounds.value:!hex');
-            // Check parent frame URL if we're in an iframe (Storybook 8+)
-            let parentHasDarkBg = false;
-            let parentHasLightBg = false;
-            let parentHasDarkClass = false;
+        const detectManagerTheme = () => {
+            let managerIsDark = false;
+            // Strategy 1: Check parent frame for Storybook manager theme (Storybook 8+)
+            // The manager theme is set in .storybook/manager.tsx via addons.setConfig({ theme: themes.dark })
             try {
                 if (window.parent !== window) {
-                    const parentUrl = new URL(window.parent.location.href);
-                    const parentGlobals = parentUrl.searchParams.get('globals') || '';
-                    parentHasLightBg = parentGlobals.includes('backgrounds.value:light');
-                    parentHasDarkBg = parentGlobals.includes('backgrounds.value:dark') ||
-                        parentGlobals.includes('backgrounds.value:%23');
-                    // Check parent document for Storybook dark theme classes
                     const parentBody = window.parent.document.body;
                     const parentHtml = window.parent.document.documentElement;
-                    parentHasDarkClass = parentBody.classList.contains('sb-dark') ||
-                        parentHtml.classList.contains('dark') ||
+                    // Check for Storybook's dark theme class (most reliable)
+                    if (parentBody.classList.contains('sb-dark') ||
+                        parentHtml.classList.contains('sb-dark') ||
                         parentHtml.getAttribute('data-theme') === 'dark' ||
-                        parentBody.getAttribute('data-theme') === 'dark';
-                    // Check Storybook 8+ manager theme
-                    const sbMainEl = window.parent.document.querySelector('.sb-main-padded, .sb-show-main');
-                    if (sbMainEl) {
-                        const sbBgColor = window.getComputedStyle(sbMainEl).backgroundColor;
-                        const sbRgb = sbBgColor.match(/\d+/g);
-                        if (sbRgb && sbRgb.length >= 3) {
-                            const sbLuminance = (0.299 * parseInt(sbRgb[0]) + 0.587 * parseInt(sbRgb[1]) + 0.114 * parseInt(sbRgb[2])) / 255;
-                            if (sbLuminance < 0.5)
-                                parentHasDarkClass = true;
+                        parentBody.getAttribute('data-theme') === 'dark') {
+                        managerIsDark = true;
+                    }
+                    // Check Storybook manager sidebar/header background color as fallback
+                    // The manager UI elements use the theme colors, not the preview background
+                    const managerEl = window.parent.document.querySelector('.sb-sidebar, [class*="sidebar"], .sb-bar');
+                    if (managerEl && !managerIsDark) {
+                        const bgColor = window.getComputedStyle(managerEl).backgroundColor;
+                        const rgb = bgColor.match(/\d+/g);
+                        if (rgb && rgb.length >= 3) {
+                            const luminance = (0.299 * parseInt(rgb[0]) + 0.587 * parseInt(rgb[1]) + 0.114 * parseInt(rgb[2])) / 255;
+                            managerIsDark = luminance < 0.5;
                         }
                     }
                 }
             }
             catch {
-                // Cross-origin access not allowed, ignore
+                // Cross-origin access not allowed, fall back to system preference
             }
-            // Check the actual background color of the body
-            const bgColor = window.getComputedStyle(body).backgroundColor;
-            const rgb = bgColor.match(/\d+/g);
-            let isBackgroundDark = false;
-            if (rgb && rgb.length >= 3) {
-                const luminance = (0.299 * parseInt(rgb[0]) + 0.587 * parseInt(rgb[1]) + 0.114 * parseInt(rgb[2])) / 255;
-                isBackgroundDark = luminance < 0.5;
+            // Strategy 2: If not in iframe or can't detect, use system preference
+            if (!managerIsDark) {
+                const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                managerIsDark = systemPrefersDark;
             }
-            // Check system preference as fallback
-            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            // Explicit light mode takes precedence - if user selected "light" in Storybook, respect that
-            const hasExplicitLightMode = hasStorybookLightBg || parentHasLightBg;
-            // Explicit dark mode indicators
-            const hasExplicitDarkMode = body.classList.contains('sb-dark') ||
-                html.classList.contains('dark') ||
-                html.getAttribute('data-theme') === 'dark' ||
-                body.getAttribute('data-theme') === 'dark' ||
-                hasStorybookDarkBg ||
-                parentHasDarkBg;
-            // Determine dark mode: explicit light mode forces light, otherwise check dark indicators
-            const isDark = hasExplicitLightMode
-                ? false
-                : (hasExplicitDarkMode || parentHasDarkClass || isBackgroundDark || systemPrefersDark);
-            dispatch({ type: 'SET_DARK_MODE', payload: isDark });
+            dispatch({ type: 'SET_DARK_MODE', payload: managerIsDark });
         };
-        detectTheme();
-        // Listen for URL changes (Storybook uses popstate for navigation)
-        window.addEventListener('popstate', detectTheme);
-        // Poll for changes since Storybook might change background without popstate
-        const intervalId = setInterval(detectTheme, 500);
-        const observer = new MutationObserver(detectTheme);
-        observer.observe(document.body, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
-        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+        detectManagerTheme();
+        // Poll for changes (manager theme changes are rare but possible)
+        const intervalId = setInterval(detectManagerTheme, 1000);
+        // Listen for system preference changes
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        mediaQuery.addEventListener('change', detectTheme);
+        mediaQuery.addEventListener('change', detectManagerTheme);
+        // Observe parent document for theme changes if accessible
+        let parentObserver = null;
+        try {
+            if (window.parent !== window) {
+                parentObserver = new MutationObserver(detectManagerTheme);
+                parentObserver.observe(window.parent.document.body, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+                parentObserver.observe(window.parent.document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+            }
+        }
+        catch {
+            // Cross-origin, ignore
+        }
         return () => {
-            window.removeEventListener('popstate', detectTheme);
             clearInterval(intervalId);
-            observer.disconnect();
-            mediaQuery.removeEventListener('change', detectTheme);
+            mediaQuery.removeEventListener('change', detectManagerTheme);
+            parentObserver?.disconnect();
         };
     }, []);
     // Close context menu when clicking outside

package/dist/templates/StoryUI/StoryUIPanel.mdx

@@ -0,0 +1,84 @@
+{/*
+  Story UI Panel - MDX Documentation Page
+
+  This MDX file renders the Story UI Panel as a standalone documentation page.
+  Using MDX instead of a .stories.tsx file ensures the React component renders
+  correctly across ALL framework Storybooks (React, Vue, Svelte, Angular, Web Components).
+
+  Why this works:
+  - MDX is processed by @storybook/addon-docs which always uses React
+  - Regular .stories.tsx files render in the Preview iframe using the project's framework
+  - Non-React frameworks cannot render React components in their Preview
+  - MDX pages bypass this limitation by being compiled with React directly
+
+  Port Configuration:
+  - The port is automatically read from VITE_STORY_UI_PORT environment variable
+  - This is set during `npx story-ui init` and stored in .env
+  - URL parameter override: ?mcp-port=XXXX
+
+  Reference: Steve Dodier-Lazaro (Storybook team) recommendation
+*/}
+
+import { Meta } from '@storybook/addon-docs/blocks';
+import { StoryUIPanel } from './StoryUIPanel';
+import { useEffect, useState, useRef } from 'react';
+
+<Meta title="Story UI/Story Generator" />
+
+export const StoryUIPanelWrapper = () => {
+  const [isReady, setIsReady] = useState(false);
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    // Only run once on mount
+    if (hasInitialized.current) return;
+    hasInitialized.current = true;
+
+    if (typeof window !== 'undefined') {
+      // Check for URL parameter override for MCP port
+      const urlParams = new URLSearchParams(window.location.search);
+      const mcpPortParam = urlParams.get('mcp-port');
+
+      if (mcpPortParam) {
+        // URL parameter takes highest priority
+        window.STORY_UI_MCP_PORT = mcpPortParam;
+      }
+      // Otherwise, let StoryUIPanel.tsx's getApiBaseUrl() handle port detection
+      // from VITE_STORY_UI_PORT environment variable (set during story-ui init)
+    }
+
+    setIsReady(true);
+  }, []);
+
+  // Don't render until initialized to prevent hydration issues
+  if (!isReady) {
+    return (
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+        color: '#666'
+      }}>
+        Loading Story UI...
+      </div>
+    );
+  }
+
+  return <StoryUIPanel />;
+};
+
+{/*
+  Full-screen container to match the original story layout.
+  The StoryUIPanel component handles its own internal styling.
+*/}
+<div style={{
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  overflow: 'hidden'
+}}>
+  <StoryUIPanelWrapper />
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "4.5.2",
+  "version": "4.6.0",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",
@@ -26,7 +26,8 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm run copy-templates",
+    "copy-templates": "node -e \"const fs=require('fs');const path=require('path');const src='templates/StoryUI';const dst='dist/templates/StoryUI';['.css','.mdx'].forEach(ext=>{fs.readdirSync(src).filter(f=>f.endsWith(ext)).forEach(f=>fs.copyFileSync(path.join(src,f),path.join(dst,f)))});console.log('Static template files copied to dist/')\"",
     "start": "yarn build && node dist/mcp-server/index.js",
     "mcp": "yarn build && node dist/mcp-server/mcp-stdio-server.js",
     "dev": "tsc --watch",

package/templates/StoryUI/StoryUIPanel.css

@@ -26,7 +26,7 @@
   --secondary: 240 4.8% 95.9%;
   --secondary-foreground: 240 5.9% 10%;
   --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
+  --muted-foreground: 240 5% 35%; /* Darker for WCAG AA compliance - was 46.1% */
   --accent: 240 4.8% 95.9%;
   --accent-foreground: 240 5.9% 10%;
   --destructive: 0 84.2% 60.2%;
@@ -113,15 +113,15 @@
   --input: 217 33% 22%;
   --ring: 213 94% 68%;
 
-  /* User Bubble - Light bluish-gray tint (same in dark mode for chat consistency) */
-  --user-bubble-bg: 210 35% 95%;
-  --user-bubble-fg: 240 10% 3.9%;
-  --user-bubble-border: 210 25% 88%;
+  /* User Bubble - Dark bluish tint in dark mode */
+  --user-bubble-bg: 217 33% 22%;
+  --user-bubble-fg: 210 40% 98%;
+  --user-bubble-border: 217 33% 28%;
 
-  /* AI Bubble - Pure white (same in dark mode for chat consistency) */
-  --ai-bubble-bg: 0 0% 100%;
-  --ai-bubble-fg: 240 10% 3.9%;
-  --ai-bubble-border: 0 0% 90%;
+  /* AI Bubble - Dark zinc in dark mode */
+  --ai-bubble-bg: 240 4% 16%;
+  --ai-bubble-fg: 0 0% 98%;
+  --ai-bubble-border: 240 4% 26%;
 
   --success: 142 69% 58%;
   --warning: 48 96% 53%;
@@ -151,15 +151,15 @@
     --input: 217 33% 22%;
     --ring: 213 94% 68%;
 
-    /* User Bubble - Light bluish-gray tint (same in dark mode for chat consistency) */
-    --user-bubble-bg: 210 35% 95%;
-    --user-bubble-fg: 240 10% 3.9%;
-    --user-bubble-border: 210 25% 88%;
+    /* User Bubble - Dark bluish tint in dark mode */
+    --user-bubble-bg: 217 33% 22%;
+    --user-bubble-fg: 210 40% 98%;
+    --user-bubble-border: 217 33% 28%;
 
-    /* AI Bubble - Pure white (same in dark mode for chat consistency) */
-    --ai-bubble-bg: 0 0% 100%;
-    --ai-bubble-fg: 240 10% 3.9%;
-    --ai-bubble-border: 0 0% 90%;
+    /* AI Bubble - Dark zinc in dark mode */
+    --ai-bubble-bg: 240 4% 16%;
+    --ai-bubble-fg: 0 0% 98%;
+    --ai-bubble-border: 240 4% 26%;
 
     --success: 142 69% 58%;
     --warning: 48 96% 53%;
@@ -168,18 +168,20 @@
 }
 
 /* ============================================
-   Base Reset
+   Base Reset & CSS Isolation
    ============================================ */
-.sui-root,
-.sui-root *,
-.sui-root *::before,
-.sui-root *::after {
+
+/* Isolate StoryUI from Storybook's theme CSS variables */
+.sui-root {
+  /* Reset inherited properties to prevent Storybook theme bleeding */
+  all: revert;
+
+  /* Re-apply necessary layout */
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-}
 
-.sui-root {
+  /* Typography */
   font-family: var(--font-sans);
   font-size: 14px;
   line-height: 1.5;
@@ -187,9 +189,28 @@
   background-color: hsl(var(--background));
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  /* Layout */
   height: 100%;
   width: 100%;
   display: flex;
+
+  /* Prevent inheriting Storybook's color scheme */
+  color-scheme: light;
+}
+
+.sui-root.dark {
+  color-scheme: dark;
+}
+
+.sui-root *,
+.sui-root *::before,
+.sui-root *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  /* Prevent Storybook CSS variable inheritance */
+  color: inherit;
 }
 
 /* ============================================
@@ -405,58 +426,100 @@
   opacity: 0.5;
 }
 
-/* Button Variants - Storybook-style */
+/* Button Variants - Storybook-style with explicit fallback colors */
 .sui-button-default {
-  background: hsl(var(--secondary));
-  color: hsl(var(--secondary-foreground));
-  border: 1px solid hsl(var(--border));
+  /* Explicit fallback colors to prevent Storybook bleeding */
+  background: #f4f4f5; /* hsl(240 4.8% 95.9%) */
+  color: #18181b; /* hsl(240 5.9% 10%) */
+  border: 1px solid #e4e4e7; /* hsl(240 5.9% 90%) */
   border-radius: var(--radius-md);
   height: 2rem;
   padding: 0 var(--space-3);
 }
 
 .sui-button-default:hover {
-  background: hsl(var(--accent));
-  border-color: hsl(var(--muted-foreground) / 0.3);
+  background: #e4e4e7;
+  border-color: #a1a1aa;
+}
+
+/* Dark mode button defaults */
+.sui-root.dark .sui-button-default {
+  background: #1e293b; /* hsl(217 33% 17%) */
+  color: #f8fafc; /* hsl(210 40% 98%) */
+  border-color: #334155; /* hsl(217 33% 22%) */
+}
+
+.sui-root.dark .sui-button-default:hover {
+  background: #334155;
+  border-color: #94a3b8;
 }
 
 .sui-button-secondary {
-  background: hsl(var(--secondary));
-  color: hsl(var(--secondary-foreground));
-  border: 1px solid hsl(var(--border));
+  background: #f4f4f5;
+  color: #18181b;
+  border: 1px solid #e4e4e7;
   border-radius: var(--radius-md);
   height: 2rem;
   padding: 0 var(--space-3);
 }
 
 .sui-button-secondary:hover {
-  background: hsl(var(--accent));
+  background: #e4e4e7;
+}
+
+.sui-root.dark .sui-button-secondary {
+  background: #1e293b;
+  color: #f8fafc;
+  border-color: #334155;
+}
+
+.sui-root.dark .sui-button-secondary:hover {
+  background: #334155;
 }
 
 .sui-button-ghost {
-  color: hsl(var(--foreground));
+  color: #0a0a0b;
   border-radius: var(--radius-md);
   height: 2rem;
   padding: 0 var(--space-3);
 }
 
 .sui-button-ghost:hover {
-  background: hsl(var(--accent));
-  color: hsl(var(--accent-foreground));
+  background: #f4f4f5;
+  color: #18181b;
+}
+
+.sui-root.dark .sui-button-ghost {
+  color: #f8fafc;
+}
+
+.sui-root.dark .sui-button-ghost:hover {
+  background: #1e293b;
+  color: #f8fafc;
 }
 
 .sui-button-outline {
-  border: 1px solid hsl(var(--border));
+  border: 1px solid #e4e4e7;
   background: transparent;
-  color: hsl(var(--foreground));
+  color: #0a0a0b;
   border-radius: var(--radius-md);
   height: 2rem;
   padding: 0 var(--space-3);
 }
 
 .sui-button-outline:hover {
-  background: hsl(var(--accent));
-  color: hsl(var(--accent-foreground));
+  background: #f4f4f5;
+  color: #18181b;
+}
+
+.sui-root.dark .sui-button-outline {
+  border-color: #334155;
+  color: #f8fafc;
+}
+
+.sui-root.dark .sui-button-outline:hover {
+  background: #1e293b;
+  color: #f8fafc;
 }
 
 .sui-button-destructive {
@@ -747,27 +810,29 @@
 .sui-welcome-greeting {
   font-size: 1.75rem;
   font-weight: 600;
-  color: hsl(var(--foreground));
+  /* Explicit high-contrast color - forces override of any inherited styles */
+  color: #18181b !important; /* hsl(240 6% 10%) - near black for maximum contrast */
   margin-bottom: var(--space-3);
   line-height: 1.3;
 }
 
 /* Dark mode: ensure greeting is clearly visible - WCAG AA compliant */
 .sui-root.dark .sui-welcome-greeting {
-  color: #ffffff;
+  color: #ffffff !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 .sui-welcome-subtitle {
   font-size: 1rem;
-  color: hsl(var(--muted-foreground));
+  /* Explicit high-contrast color - WCAG AA compliant */
+  color: #52525b !important; /* hsl(240 5% 35%) - ~8:1 contrast on white */
   margin-bottom: var(--space-8);
   max-width: 400px;
 }
 
 /* Dark mode: make subtitle more visible */
 .sui-root.dark .sui-welcome-subtitle {
-  color: hsl(210 25% 80%);
+  color: #cbd5e1 !important; /* hsl(213 27% 84%) - high contrast on dark bg */
 }
 
 .sui-welcome-chips {
@@ -786,26 +851,39 @@
   align-items: center;
   justify-content: center;
   padding: 0.5rem 1rem;
-  background: hsl(var(--secondary));
-  border: 1px solid hsl(var(--border));
+  /* Explicit high-contrast colors - forces override of inherited styles */
+  background: #f4f4f5 !important; /* hsl(240 4.8% 95.9%) */
+  border: 1px solid #d4d4d8 !important; /* hsl(240 5% 84%) - slightly darker border */
   border-radius: var(--radius-full);
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1;
-  color: hsl(var(--foreground));
+  color: #18181b !important; /* hsl(240 6% 10%) - near black for high contrast */
   cursor: pointer;
   transition: all var(--transition-fast);
 }
 
 .sui-chip:hover {
-  background: hsl(var(--accent));
-  border-color: hsl(var(--muted-foreground) / 0.3);
+  background: #e4e4e7; /* hsl(240 4.8% 95.9%) */
+  border-color: #a1a1aa; /* hsl(240 3.8% 46.1% / 0.3) */
 }
 
 .sui-chip:active {
   transform: scale(0.98);
 }
 
+/* Dark mode chips */
+.sui-root.dark .sui-chip {
+  background: #1e293b !important; /* hsl(217 33% 17%) */
+  border-color: #475569 !important; /* hsl(215 19% 35%) - more visible border */
+  color: #f8fafc !important; /* hsl(210 40% 98%) - near white */
+}
+
+.sui-root.dark .sui-chip:hover {
+  background: #334155;
+  border-color: #94a3b8;
+}
+
 /* ============================================
    Messages
    ============================================ */
@@ -852,14 +930,34 @@
   border-bottom-right-radius: var(--radius-sm);
 }
 
-/* AI bubble - pure white */
+/* User bubble - dark mode: dark bluish tint with light text */
+.sui-root.dark .sui-message-user .sui-message-bubble {
+  background: #2d3748 !important; /* Dark bluish - hsl(217 33% 22%) */
+  color: #f7fafc !important; /* Near white - hsl(210 40% 98%) */
+  border: 1px solid #4a5568 !important; /* Dark border - hsl(217 33% 28%) */
+}
+
+/* AI bubble - pure white with explicit high-contrast colors */
 .sui-message-ai .sui-message-bubble {
-  background: hsl(var(--ai-bubble-bg));
-  color: hsl(var(--ai-bubble-fg));
-  border-color: hsl(var(--ai-bubble-border));
+  background: #ffffff !important; /* Pure white */
+  color: #18181b !important; /* Near black - high contrast */
+  border: 1px solid #e4e4e7 !important; /* Light gray border */
   border-bottom-left-radius: var(--radius-sm);
 }
 
+/* AI bubble - dark mode: dark background with light text */
+.sui-root.dark .sui-message-ai .sui-message-bubble {
+  background: #27272a !important; /* Dark zinc - hsl(240 4% 16%) */
+  color: #fafafa !important; /* Near white - hsl(0 0% 98%) */
+  border: 1px solid #3f3f46 !important; /* Dark border - hsl(240 4% 26%) */
+}
+
+/* AI bubble code in dark mode */
+.sui-root.dark .sui-message-ai .sui-message-bubble code {
+  background: rgba(63, 63, 70, 0.5) !important; /* Semi-transparent dark */
+  color: #e4e4e7 !important; /* Light gray text */
+}
+
 /*
  * Markdown content styling
  * Using .sui-message-bubble prefix for higher specificity (0,2,x)