flowyml 1.7.1__py3-none-any.whl → 1.8.0__py3-none-any.whl

flowyml/ui/frontend/src/components/sidebar/Sidebar.jsx

@@ -15,7 +15,9 @@ import {
     ChevronLeft,
     ChevronRight,
     Menu,
-    Activity
+    Activity,
+    Rocket,
+    Microscope
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 
@@ -33,6 +35,7 @@ const NAV_GROUPS = [
             { icon: PlayCircle, label: 'Pipelines', path: '/pipelines' },
             { icon: Calendar, label: 'Schedules', path: '/schedules' },
             { icon: PlayCircle, label: 'Runs', path: '/runs' },
+            { icon: Rocket, label: 'Deployments', path: '/deployments' },
         ],
     },
     {
@@ -40,6 +43,7 @@ const NAV_GROUPS = [
         items: [
             { icon: Trophy, label: 'Leaderboard', path: '/leaderboard' },
             { icon: FlaskConical, label: 'Experiments', path: '/experiments' },
+            { icon: Microscope, label: 'Model Explorer', path: '/model-explorer' },
         ],
     },
     {
@@ -61,6 +65,8 @@ const SETTINGS_LINKS = [
 export function Sidebar({ collapsed, setCollapsed }) {
     const location = useLocation();
 
+    const [logoError, setLogoError] = useState(false);
+
     return (
         <motion.aside
             initial={false}
@@ -68,20 +74,32 @@ export function Sidebar({ collapsed, setCollapsed }) {
             className="h-screen bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col shadow-sm z-20 relative"
         >
             {/* Logo Section */}
-            <div className="p-6 border-b border-slate-100 dark:border-slate-700 flex items-center gap-3 h-[73px]">
-                <div className="w-8 h-8 min-w-[32px] bg-primary-600 rounded-lg flex items-center justify-center shadow-lg shadow-primary-500/30">
-                    <PlayCircle className="text-white w-5 h-5" />
-                </div>
+            <div className="p-4 border-b border-slate-100 dark:border-slate-700 flex items-center gap-3 h-[73px]">
+                {logoError ? (
+                    <div className="w-12 h-12 min-w-[48px] rounded-lg shadow-lg bg-gradient-to-br from-primary-500 to-indigo-600 flex items-center justify-center text-white font-bold text-xl select-none">
+                        F
+                    </div>
+                ) : (
+                    <img
+                        src="/logo.png"
+                        alt="FlowyML"
+                        className="w-12 h-12 min-w-[48px] rounded-lg shadow-lg object-contain bg-white dark:bg-slate-800"
+                        onError={() => setLogoError(true)}
+                    />
+                )}
                 <AnimatePresence>
                     {!collapsed && (
-                        <motion.h1
+                        <motion.div
                             initial={{ opacity: 0, x: -10 }}
                             animate={{ opacity: 1, x: 0 }}
                             exit={{ opacity: 0, x: -10 }}
-                            className="text-xl font-bold text-slate-900 dark:text-white tracking-tight whitespace-nowrap overflow-hidden"
+                            className="flex flex-col"
                         >
-                            flowyml
-                        </motion.h1>
+                            <h1 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight whitespace-nowrap overflow-hidden">
+                                FlowyML
+                            </h1>
+                            <span className="text-[10px] text-slate-400 dark:text-slate-500">by UnicoLab</span>
+                        </motion.div>
                     )}
                 </AnimatePresence>
             </div>
@@ -123,14 +141,19 @@ export function Sidebar({ collapsed, setCollapsed }) {
 
             {/* Footer */}
             <div className="p-4 border-t border-slate-100 dark:border-slate-700">
-                <div className={`bg-slate-50 dark:bg-slate-900 rounded-lg p-4 border border-slate-100 dark:border-slate-700 transition-all duration-200 ${collapsed ? 'p-2 flex justify-center' : ''}`}>
+                <div className={`bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 rounded-lg p-3 border border-slate-200 dark:border-slate-700 transition-all duration-200 ${collapsed ? 'p-2 flex justify-center' : ''}`}>
                     {!collapsed ? (
                         <>
-                            <p className="text-xs font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap">flowyml v1.3.0</p>
-                            <p className="text-xs text-slate-400 dark:text-slate-500 mt-1 whitespace-nowrap">Local Environment</p>
+                            <div className="flex items-center gap-2 mb-2">
+                                <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                                <p className="text-xs font-semibold text-slate-600 dark:text-slate-300 whitespace-nowrap">FlowyML v1.3.0</p>
+                            </div>
+                            <p className="text-[10px] text-slate-400 dark:text-slate-500 whitespace-nowrap">
+                                Made with ❤️ by <span className="font-medium text-primary-500">UnicoLab</span>
+                            </p>
                         </>
                     ) : (
-                        <div className="w-2 h-2 rounded-full bg-emerald-500" title="Online" />
+                        <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" title="Online" />
                     )}
                 </div>
             </div>

flowyml/ui/frontend/src/contexts/AIAssistantContext.jsx

@@ -0,0 +1,245 @@
+import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import * as webllm from '@mlc-ai/web-llm';
+
+// FlowyML System Prompt - comprehensive knowledge base for the AI assistant
+const FLOWYML_SYSTEM_PROMPT = `You are FlowyML Assistant, an expert AI advisor for the FlowyML ML pipeline framework. You help users optimize their pipelines, debug issues, and follow best practices.
+
+## About FlowyML
+FlowyML is an enterprise-grade ML pipeline framework that combines Python simplicity with powerful MLOps features:
+- Zero-boilerplate orchestration with pure Python (no YAML/DSLs)
+- Intelligent caching (code hash, input hash) to skip unchanged steps
+- First-class Assets: Dataset, Model, Metrics, FeatureSet with auto-lineage
+- Context auto-injection for parameters
+- Step grouping for efficient execution
+- Dynamic workflows with conditional logic (If/then/else)
+- Human-in-the-loop approval gates
+- Built-in experiment tracking and model leaderboard
+- LLM/GenAI observability with @trace_llm decorator
+- Data drift detection
+- Pipeline scheduling and notifications
+
+## Key Concepts
+1. **Steps**: Use @step decorator with inputs/outputs. Cache with cache="input_hash" or cache="code_hash"
+2. **Pipelines**: Create with Pipeline(name, context=ctx), add steps with .add_step()
+3. **Context**: Define params with context(lr=0.01), auto-injected to steps
+4. **Assets**: Dataset.create(), Model.create(), Metrics.create() - tracked automatically
+5. **Execution Groups**: Group steps with execution_group="name" to share resources
+
+## Best Practices
+- Use caching strategically: input_hash for data processing, code_hash for model training
+- Group related steps in execution_group for efficiency
+- Use conditional execution (If/then/else) for dynamic workflows
+- Track experiments with Experiment class
+- Monitor data drift with detect_drift()
+- Use @trace_llm for LLM observability
+
+When users share logs, metrics, or pipeline context, analyze them and provide:
+1. Specific, actionable recommendations
+2. Code examples when helpful
+3. Explanations of why certain optimizations work
+4. Links to relevant FlowyML features
+
+Be concise but thorough. Format responses with markdown for clarity.`;
+
+const AIAssistantContext = createContext(null);
+
+// Model configuration - using a smaller, faster model for WebGPU
+const MODEL_ID = "Qwen2.5-1.5B-Instruct-q4f16_1-MLC"; // Fast, lightweight model
+
+export function AIAssistantProvider({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [messages, setMessages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isModelLoading, setIsModelLoading] = useState(false);
+    const [loadProgress, setLoadProgress] = useState(0);
+    const [loadStatus, setLoadStatus] = useState('');
+    const [error, setError] = useState(null);
+    const [isWebGPUSupported, setIsWebGPUSupported] = useState(null);
+    const [pipelineContext, setPipelineContext] = useState(null);
+    const [contextEnabled, setContextEnabled] = useState(true); // User toggle for context sharing
+
+    const engineRef = useRef(null);
+    const abortControllerRef = useRef(null);
+
+    // Check WebGPU support on mount
+    useEffect(() => {
+        const checkWebGPU = async () => {
+            try {
+                if (!navigator.gpu) {
+                    setIsWebGPUSupported(false);
+                    return;
+                }
+                const adapter = await navigator.gpu.requestAdapter();
+                setIsWebGPUSupported(!!adapter);
+            } catch (e) {
+                console.warn('WebGPU check failed:', e);
+                setIsWebGPUSupported(false);
+            }
+        };
+        checkWebGPU();
+    }, []);
+
+    // Initialize WebLLM engine
+    const initEngine = useCallback(async () => {
+        if (engineRef.current || !isWebGPUSupported) return;
+
+        setIsModelLoading(true);
+        setError(null);
+        setLoadStatus('Initializing...');
+
+        try {
+            const engine = await webllm.CreateMLCEngine(MODEL_ID, {
+                initProgressCallback: (progress) => {
+                    setLoadProgress(Math.round(progress.progress * 100));
+                    setLoadStatus(progress.text || 'Loading model...');
+                }
+            });
+
+            engineRef.current = engine;
+            setLoadStatus('Model ready!');
+            setIsModelLoading(false);
+
+            // Add welcome message
+            setMessages([{
+                role: 'assistant',
+                content: `👋 Hi! I'm your FlowyML AI Assistant, running **locally** in your browser using WebGPU.
+
+I have access to your current pipeline context and can help you:
+- 🔧 **Optimize** your pipelines for better performance
+- 🐛 **Debug** failing steps and understand errors
+- 📊 **Analyze** run metrics and suggest improvements
+- 💡 **Learn** FlowyML best practices and features
+
+What would you like help with today?`
+            }]);
+
+        } catch (e) {
+            console.error('Failed to initialize WebLLM:', e);
+            setError(e.message || 'Failed to load AI model');
+            setIsModelLoading(false);
+        }
+    }, [isWebGPUSupported]);
+
+    // Send message and get streaming response
+    const sendMessage = useCallback(async (content) => {
+        if (!engineRef.current || isLoading) return;
+
+        // Add user message
+        const userMessage = { role: 'user', content };
+        setMessages(prev => [...prev, userMessage]);
+        setIsLoading(true);
+
+        // Create abort controller for cancellation
+        abortControllerRef.current = new AbortController();
+
+        try {
+            // Build context-aware prompt (only if enabled and context exists)
+            let contextInfo = '';
+            if (contextEnabled && pipelineContext) {
+                contextInfo = `\n\n## Current Page Context\nThe user is currently viewing: ${pipelineContext.pageType || 'unknown page'}\n\n### Context Data\n${JSON.stringify(pipelineContext, null, 2)}\n\nUse this context to provide specific, actionable advice about the current pipeline run.\n`;
+            }
+
+            const systemMessage = FLOWYML_SYSTEM_PROMPT + contextInfo;
+
+            // Build message history for context
+            const chatMessages = [
+                { role: 'system', content: systemMessage },
+                ...messages.slice(-6), // Keep last 6 messages for context
+                userMessage
+            ];
+
+            // Add placeholder for assistant response
+            const assistantMessage = { role: 'assistant', content: '' };
+            setMessages(prev => [...prev, assistantMessage]);
+
+            // Stream the response
+            const asyncGenerator = await engineRef.current.chat.completions.create({
+                messages: chatMessages,
+                temperature: 0.7,
+                max_tokens: 1024,
+                stream: true
+            });
+
+            let fullContent = '';
+            for await (const chunk of asyncGenerator) {
+                if (abortControllerRef.current?.signal.aborted) break;
+
+                const delta = chunk.choices[0]?.delta?.content || '';
+                fullContent += delta;
+
+                // Update the last message with streamed content
+                setMessages(prev => {
+                    const updated = [...prev];
+                    updated[updated.length - 1] = { role: 'assistant', content: fullContent };
+                    return updated;
+                });
+            }
+
+        } catch (e) {
+            if (e.name !== 'AbortError') {
+                console.error('Chat error:', e);
+                setMessages(prev => [...prev, {
+                    role: 'assistant',
+                    content: `❌ Error: ${e.message || 'Failed to generate response'}`
+                }]);
+            }
+        } finally {
+            setIsLoading(false);
+            abortControllerRef.current = null;
+        }
+    }, [messages, pipelineContext, contextEnabled, isLoading]);
+
+    // Cancel current generation
+    const cancelGeneration = useCallback(() => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
+    }, []);
+
+    // Clear chat history
+    const clearChat = useCallback(() => {
+        setMessages([{
+            role: 'assistant',
+            content: '🗑️ Chat cleared. How can I help you with FlowyML?'
+        }]);
+    }, []);
+
+    // Update pipeline context (called from other components)
+    const updateContext = useCallback((context) => {
+        setPipelineContext(context);
+    }, []);
+
+    const value = {
+        isOpen,
+        setIsOpen,
+        messages,
+        isLoading,
+        isModelLoading,
+        loadProgress,
+        loadStatus,
+        error,
+        isWebGPUSupported,
+        initEngine,
+        sendMessage,
+        cancelGeneration,
+        clearChat,
+        updateContext,
+        pipelineContext,
+        contextEnabled,
+        setContextEnabled
+    };
+
+    return (
+        <AIAssistantContext.Provider value={value}>
+            {children}
+        </AIAssistantContext.Provider>
+    );
+}
+
+export function useAIAssistant() {
+    const context = useContext(AIAssistantContext);
+    if (!context) {
+        throw new Error('useAIAssistant must be used within AIAssistantProvider');
+    }
+    return context;
+}

flowyml/ui/frontend/src/contexts/AuthContext.jsx

@@ -0,0 +1,108 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+    const [user, setUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    // On mount, check if user is already logged in via cookie
+    useEffect(() => {
+        checkAuthStatus();
+    }, []);
+
+    const checkAuthStatus = async () => {
+        try {
+            const response = await fetch('/api/auth/me');
+            if (response.ok) {
+                const userData = await response.json();
+                setUser(userData);
+            } else {
+                // If 401/403, we are not logged in.
+                // If we get here, it means backend didn't auto-redirect or we are just verifying session.
+                setUser(null);
+            }
+        } catch (error) {
+            console.error('Auth check failed:', error);
+            setUser(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const login = async (username, password) => {
+        try {
+            const response = await fetch('/api/auth/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password }),
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                await checkAuthStatus(); // Refresh user data
+
+                // Navigate to where they came from, or dashboard
+                const origin = location.state?.from?.pathname || '/';
+                navigate(origin);
+                return { success: true };
+            } else {
+                const errorData = await response.json();
+                return { success: false, error: errorData.detail || 'Login failed' };
+            }
+        } catch (error) {
+            return { success: false, error: 'Network error' };
+        }
+    };
+
+    const logout = async () => {
+        try {
+            await fetch('/api/auth/logout', { method: 'POST' });
+            setUser(null);
+            navigate('/login');
+        } catch (error) {
+            console.error('Logout failed:', error);
+        }
+    };
+
+    const value = {
+        user,
+        loading,
+        login,
+        logout,
+        checkAuthStatus
+    };
+
+    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = () => {
+    return useContext(AuthContext);
+};
+
+// Component to protect routes
+export const RequireAuth = ({ children }) => {
+    const { user, loading } = useAuth();
+    const location = useLocation();
+
+    if (loading) {
+        return (
+            <div className="flex h-screen w-screen items-center justify-center bg-gray-900 text-white">
+                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary-500"></div>
+            </div>
+        );
+    }
+
+    if (!user) {
+        // Redirect to login page, but save the current location to redirect back after login
+        return <Navigate to="/login" state={{ from: location }} replace />;
+    }
+
+    return children;
+};
+
+// Helper for redirect (imported from rrd usually, but defined here for context usage)
+import { Navigate } from 'react-router-dom';

flowyml/ui/frontend/src/hooks/useAIContext.js

@@ -0,0 +1,156 @@
+import { useEffect, useCallback, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAIAssistant } from '../contexts/AIAssistantContext';
+import { fetchApi } from '../utils/api';
+
+/**
+ * Hook to share page-specific context with the AI assistant.
+ * Fetches comprehensive context from the backend API.
+ * Automatically cleans up context when navigating away.
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.pageType - Type of page ('run', 'pipeline', 'experiment', etc.)
+ * @param {string} options.resourceId - The resource ID (run_id, pipeline_name, etc.)
+ * @param {boolean} options.includeLogs - Whether to include logs (default: true)
+ * @param {boolean} options.includeCode - Whether to include step code (default: true)
+ * @param {boolean} options.includeMetrics - Whether to include metrics (default: true)
+ */
+export function useAIContext({ pageType, resourceId, includeLogs = true, includeCode = true, includeMetrics = true } = {}) {
+    const location = useLocation();
+    const { updateContext, contextEnabled } = useAIAssistant();
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+
+    const fetchContext = useCallback(async () => {
+        if (!pageType || !resourceId || !contextEnabled) {
+            return;
+        }
+
+        setIsLoading(true);
+        setError(null);
+
+        try {
+            // Fetch comprehensive context from backend
+            const response = await fetchApi(`/api/ai/context/${pageType}/${resourceId}?include_logs=${includeLogs}&include_code=${includeCode}&include_metrics=${includeMetrics}`);
+
+            if (response.ok) {
+                const contextData = await response.json();
+
+                // Update context with backend data
+                updateContext({
+                    pageType: contextData.page_type,
+                    resourceId: contextData.resource_id,
+                    ...contextData.summary,
+                    details: contextData.details,
+                    suggestions: contextData.suggestions,
+                    timestamp: new Date().toISOString()
+                });
+            } else {
+                // Fallback: Use basic context if API fails
+                console.warn('AI context API failed, using basic context');
+                updateContext({
+                    pageType,
+                    resourceId,
+                    timestamp: new Date().toISOString()
+                });
+            }
+        } catch (err) {
+            console.error('Failed to fetch AI context:', err);
+            setError(err.message);
+
+            // Fallback to basic context
+            updateContext({
+                pageType,
+                resourceId,
+                timestamp: new Date().toISOString()
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    }, [pageType, resourceId, contextEnabled, includeLogs, includeCode, includeMetrics, updateContext]);
+
+    // Fetch context when enabled or resource changes
+    useEffect(() => {
+        if (contextEnabled && pageType && resourceId) {
+            fetchContext();
+        }
+    }, [contextEnabled, pageType, resourceId, fetchContext]);
+
+    // Cleanup when navigating away
+    useEffect(() => {
+        return () => {
+            updateContext(null);
+        };
+    }, [location.pathname, updateContext]);
+
+    return { isLoading, error, refetch: fetchContext };
+}
+
+/**
+ * Formats run data for AI context - client-side fallback.
+ * Used when backend API is not available.
+ */
+export function formatRunContext(run, metrics = [], selectedStep = null, logs = {}) {
+    if (!run) return null;
+
+    // Summarize steps
+    const stepsSummary = run.steps ? Object.entries(run.steps).map(([name, step]) => ({
+        name,
+        status: step.success ? 'success' : (step.error ? 'failed' : 'pending'),
+        duration: step.duration?.toFixed(2) + 's',
+        cached: step.cached || false,
+        error: step.error || null,
+        inputs: step.inputs?.slice(0, 3),
+        outputs: step.outputs?.slice(0, 3)
+    })) : [];
+
+    // Format metrics - take top 10 most relevant
+    const metricsSummary = metrics.slice(0, 10).map(m => ({
+        name: m.name,
+        value: typeof m.value === 'number' ? m.value.toFixed(4) : m.value,
+        step: m.step
+    }));
+
+    // Format logs - truncate to last 500 chars per step
+    const logsSummary = {};
+    if (logs && typeof logs === 'object') {
+        Object.entries(logs).forEach(([stepName, stepLogs]) => {
+            if (typeof stepLogs === 'string') {
+                logsSummary[stepName] = stepLogs.slice(-500);
+            }
+        });
+    }
+
+    // Selected step details
+    const selectedStepDetails = selectedStep && run.steps?.[selectedStep] ? {
+        name: selectedStep,
+        ...run.steps[selectedStep],
+        fullError: run.steps[selectedStep].error,
+        sourceCode: run.steps[selectedStep].source_code?.slice(0, 1000)
+    } : null;
+
+    return {
+        pageType: 'run',
+        data: {
+            runId: run.run_id,
+            pipelineName: run.pipeline_name,
+            project: run.project,
+            status: run.status,
+            duration: run.duration?.toFixed(2) + 's',
+            startTime: run.start_time,
+            endTime: run.end_time,
+            totalSteps: stepsSummary.length,
+            successfulSteps: stepsSummary.filter(s => s.status === 'success').length,
+            failedSteps: stepsSummary.filter(s => s.status === 'failed').length,
+            cachedSteps: stepsSummary.filter(s => s.cached).length,
+            steps: stepsSummary,
+            metrics: metricsSummary,
+            selectedStep: selectedStepDetails,
+            recentLogs: logsSummary,
+            environment: run.environment || {},
+            context: run.context || {}
+        }
+    };
+}
+
+export default useAIContext;

flowyml/ui/frontend/src/hooks/useWebGPU.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook to detect WebGPU support in the browser.
+ * Returns loading state while checking and final support status.
+ */
+export function useWebGPU() {
+    const [isSupported, setIsSupported] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [gpuInfo, setGpuInfo] = useState(null);
+
+    useEffect(() => {
+        const checkWebGPU = async () => {
+            try {
+                // Check if WebGPU API is available
+                if (!navigator.gpu) {
+                    setIsSupported(false);
+                    setIsLoading(false);
+                    return;
+                }
+
+                // Try to get an adapter
+                const adapter = await navigator.gpu.requestAdapter();
+                if (!adapter) {
+                    setIsSupported(false);
+                    setIsLoading(false);
+                    return;
+                }
+
+                // Get adapter info for debugging
+                const info = await adapter.requestAdapterInfo?.() || {};
+                setGpuInfo({
+                    vendor: info.vendor || 'Unknown',
+                    architecture: info.architecture || 'Unknown',
+                    device: info.device || 'Unknown',
+                    description: info.description || 'WebGPU Available'
+                });
+
+                setIsSupported(true);
+            } catch (error) {
+                console.warn('WebGPU detection error:', error);
+                setIsSupported(false);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        checkWebGPU();
+    }, []);
+
+    return { isSupported, isLoading, gpuInfo };
+}
+
+export default useWebGPU;

flowyml/ui/frontend/src/layouts/MainLayout.jsx

@@ -4,6 +4,8 @@ import { Sidebar } from '../components/sidebar/Sidebar';
 import { Header } from '../components/header/Header';
 
 import { ErrorBoundary } from '../components/ui/ErrorBoundary';
+import { AIAssistantButton } from '../components/ai/AIAssistantButton';
+import { AIAssistantPanel } from '../components/ai/AIAssistantPanel';
 
 export function MainLayout() {
     const [collapsed, setCollapsed] = useState(false);
@@ -22,6 +24,10 @@ export function MainLayout() {
                     </div>
                 </main>
             </div>
+
+            {/* AI Assistant - Floating button and slide-out panel */}
+            <AIAssistantButton />
+            <AIAssistantPanel />
         </div>
     );
 }