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

flowyml/ui/frontend/src/components/AssetDetailsPanel.jsx

@@ -24,14 +24,15 @@ import {
     Hash,
     Gauge,
     LineChart,
-    Eye
+    Eye,
+    Rocket
 } from 'lucide-react';
 import { Card } from './ui/Card';
 import { Badge } from './ui/Badge';
 import { Button } from './ui/Button';
 import { format } from 'date-fns';
 import { downloadArtifactById } from '../utils/downloads';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { ProjectSelector } from './ProjectSelector';
 import { fetchApi } from '../utils/api';
@@ -41,9 +42,22 @@ import { TrainingHistoryChart } from './TrainingHistoryChart';
 export function AssetDetailsPanel({ asset, onClose, hideHeader = false }) {
     const [activeTab, setActiveTab] = useState('overview');
     const [currentProject, setCurrentProject] = useState(asset?.project);
+    const navigate = useNavigate();
 
     if (!asset) return null;
 
+    // Check if this asset can be deployed (model-like)
+    const isDeployable = asset.type?.toLowerCase().includes('model') ||
+        asset.name?.toLowerCase().includes('model') ||
+        ['keras', 'pytorch', 'sklearn', 'tensorflow', 'xgboost', 'lightgbm', 'onnx']
+            .some(kw => (asset.type || '').toLowerCase().includes(kw) ||
+                (asset.name || '').toLowerCase().includes(kw));
+
+    const handleDeploy = async () => {
+        // Navigate to deployments page with pre-selected model
+        navigate(`/deployments?deploy=${encodeURIComponent(asset.artifact_id)}&name=${encodeURIComponent(asset.name)}`);
+    };
+
     const handleProjectUpdate = async (newProject) => {
         try {
             await fetchApi(`/api/assets/${asset.artifact_id}/project`, {
@@ -334,6 +348,15 @@ export function AssetDetailsPanel({ asset, onClose, hideHeader = false }) {
                             <Download size={16} className="mr-2" />
                             Download Asset
                         </Button>
+                        {isDeployable && (
+                            <Button
+                                onClick={handleDeploy}
+                                className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white"
+                            >
+                                <Rocket size={16} className="mr-2" />
+                                Deploy
+                            </Button>
+                        )}
                         {asset.run_id && (
                             <Link to={`/runs/${asset.run_id}`}>
                                 <Button variant="outline">
@@ -624,11 +647,10 @@ function DatasetOverview({ properties }) {
                         {(Array.isArray(columns) ? columns : []).slice(0, 10).map((col, i) => (
                             <span
                                 key={i}
-                                className={`text-[10px] px-2 py-0.5 rounded ${
-                                    col === labelColumn
-                                        ? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 font-medium'
-                                        : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300'
-                                }`}
+                                className={`text-[10px] px-2 py-0.5 rounded ${col === labelColumn
+                                    ? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 font-medium'
+                                    : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300'
+                                    }`}
                             >
                                 {col}{col === labelColumn && ' (target)'}
                             </span>

flowyml/ui/frontend/src/components/Layout.jsx

@@ -3,6 +3,8 @@ import { Link, useLocation } from 'react-router-dom';
 import { LayoutDashboard, PlayCircle, FolderKanban, FlaskConical, Database, Settings, Trophy, Calendar, MessageSquare, Moon, Sun, Key, Package } from 'lucide-react';
 import { useTheme } from '../contexts/ThemeContext';
 import { ProjectSelector } from './ui/ProjectSelector';
+import { AIAssistantButton } from './ai/AIAssistantButton';
+import { AIAssistantPanel } from './ai/AIAssistantPanel';
 
 function NavLink({ to, icon, label }) {
     const location = useLocation();
@@ -103,6 +105,10 @@ export function Layout({ children }) {
                     {children}
                 </div>
             </main>
+
+            {/* AI Assistant */}
+            <AIAssistantButton />
+            <AIAssistantPanel />
         </div>
     );
 }

flowyml/ui/frontend/src/components/PipelineGraph.jsx

@@ -10,7 +10,7 @@ import ReactFlow, {
     Position
 } from 'reactflow';
 import 'reactflow/dist/style.css';
-import { CheckCircle, XCircle, Clock, Loader, Database, Box, BarChart2, FileText, Layers } from 'lucide-react';
+import { CheckCircle, XCircle, Clock, Loader, Database, Box, BarChart2, FileText, Layers, GitFork, User } from 'lucide-react';
 import dagre from 'dagre';
 
 const stepNodeWidth = 240;
@@ -115,6 +115,11 @@ export function PipelineGraph({ dag, steps, selectedStep, onStepSelect, onArtifa
             const executionGroup = stepData.execution_group;
             const groupColor = executionGroup ? groupColors[executionGroup] : null;
 
+            // Detect special step types
+            const isConditional = node.name.toLowerCase().startsWith('if') || node.name.includes('condition');
+            const isHumanInLoop = node.name.toLowerCase().includes('approve') || node.name.includes('review') || node.name.includes('human');
+
+
             nodes.push({
                 id: node.id,
                 type: 'step',
@@ -125,7 +130,11 @@ export function PipelineGraph({ dag, steps, selectedStep, onStepSelect, onArtifa
                     cached: stepData.cached,
                     selected: selectedStep === node.id,
                     execution_group: executionGroup,
-                    groupColor: groupColor
+                    groupColor: groupColor,
+                    isConditional: isConditional,
+                    isHumanInLoop: isHumanInLoop,
+                    inputs: node.inputs || [],
+                    outputs: node.outputs || []
                 }
             });
 
@@ -250,7 +259,7 @@ function CustomStepNode({ data }) {
             bg: 'bg-white dark:bg-slate-800',
             border: 'border-amber-500 dark:border-amber-500',
             ring: 'ring-amber-200 dark:ring-amber-900',
-            shadow: 'shadow-amber-100 dark:shadow-none'
+            shadow: 'shadow-amber-100 dark:shadow-none animate-pulse ring-2 ring-amber-400/50'
         },
         pending: {
             icon: <Clock size={18} />,
@@ -266,6 +275,39 @@ function CustomStepNode({ data }) {
     const groupColor = data.groupColor;
     const hasGroup = data.execution_group && groupColor;
 
+    // Special styling for conditional nodes
+    if (data.isConditional) {
+        return (
+            <div
+                className={`
+                    relative px-4 py-3 rounded-xl border-2 transition-all duration-200 flex flex-col justify-center items-center text-center
+                    ${config.bg} border-violet-400 dark:border-violet-500
+                    ${data.selected ? 'ring-4 ring-violet-200 dark:ring-violet-900 shadow-lg scale-105' : 'hover:shadow-md'}
+                    transform rotate-0
+                `}
+                style={{ width: 180, height: 100 }} // Slightly different size for conditional
+            >
+                <Handle type="target" position={Position.Top} className="!bg-violet-400 !w-3 !h-3" />
+
+                <div className="bg-violet-100 dark:bg-violet-900/50 p-2 rounded-full mb-2">
+                    <GitFork size={20} className="text-violet-600 dark:text-violet-300" />
+                </div>
+                <div className="font-bold text-xs text-violet-900 dark:text-violet-100 uppercase tracking-wider mb-1">Decision</div>
+                <div className="text-xs font-semibold text-slate-700 dark:text-slate-300 line-clamp-2 leading-tight">
+                    {data.label}
+                </div>
+
+                {data.status !== 'pending' && (
+                    <div className={`absolute -right-2 -top-2 rounded-full p-1 border-2 border-white dark:border-slate-900 ${config.bg}`}>
+                        <div className={config.color}>{config.icon}</div>
+                    </div>
+                )}
+
+                <Handle type="source" position={Position.Bottom} className="!bg-violet-400 !w-3 !h-3" />
+            </div>
+        );
+    }
+
     return (
         <div
             className={`
@@ -273,6 +315,7 @@ function CustomStepNode({ data }) {
                 ${hasGroup ? groupColor.bg : config.bg}
                 ${hasGroup ? groupColor.border : config.border}
                 ${data.selected ? `ring-4 ${config.ring} shadow-lg` : `hover:shadow-md ${config.shadow}`}
+                ${data.isHumanInLoop ? 'border-dashed border-amber-400 dark:border-amber-500' : ''}
             `}
             style={{ width: stepNodeWidth, height: stepNodeHeight }}
         >
@@ -280,8 +323,13 @@ function CustomStepNode({ data }) {
 
             <div className="flex flex-col h-full justify-between">
                 <div className="flex items-start gap-3">
-                    <div className={`p-1.5 rounded-md bg-slate-50 border border-slate-100 ${config.color}`}>
+                    <div className={`p-1.5 rounded-md bg-slate-50 border border-slate-100 ${config.color} relative`}>
                         {config.icon}
+                        {data.isHumanInLoop && (
+                            <div className="absolute -bottom-1 -right-1 bg-amber-100 text-amber-600 rounded-full p-0.5 border border-white" title="Human in the loop">
+                                <User size={10} />
+                            </div>
+                        )}
                     </div>
                     <div className="min-w-0 flex-1">
                         <h3 className={`font-bold text-sm truncate ${hasGroup ? groupColor.text : 'text-slate-900 dark:text-white'}`} title={data.label}>
@@ -298,18 +346,19 @@ function CustomStepNode({ data }) {
                     </div>
                 </div>
 
-                {data.duration !== undefined && (
-                    <div className="flex items-center justify-between pt-2 border-t border-slate-100 mt-1">
-                        <span className="text-xs text-slate-400 font-mono">
-                            {data.duration.toFixed(2)}s
+                <div className="flex items-center justify-between pt-2 border-t border-slate-100 mt-1">
+                    {data.duration !== undefined ? (
+                        <span className="text-xs text-slate-400 font-mono flex items-center gap-1">
+                            <Clock size={10} /> {data.duration.toFixed(2)}s
                         </span>
-                        {data.cached && (
-                            <span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded uppercase tracking-wider">
-                                Cached
-                            </span>
-                        )}
-                    </div>
-                )}
+                    ) : <span className="text-xs text-slate-300">-</span>}
+
+                    {data.cached && (
+                        <span className="flex items-center gap-1 text-[10px] font-bold text-emerald-600 bg-emerald-50 border border-emerald-100 px-1.5 py-0.5 rounded-full uppercase tracking-wider shadow-sm">
+                            <Database size={8} /> Cached
+                        </span>
+                    )}
+                </div>
             </div>
 
             <Handle type="source" position={Position.Bottom} className="!bg-slate-400 !w-2 !h-2" />
@@ -318,6 +367,7 @@ function CustomStepNode({ data }) {
 }
 
 
+
 function CustomArtifactNode({ data }) {
     // Determine icon and styling based on artifact type (inferred from label)
     const getArtifactStyle = (label) => {
@@ -326,8 +376,8 @@ function CustomArtifactNode({ data }) {
         if (lowerLabel.includes('model') || lowerLabel.includes('weights')) {
             return {
                 icon: Box,
-                bgColor: 'bg-purple-100 dark:bg-purple-900/30',
-                borderColor: 'border-purple-400 dark:border-purple-600',
+                bgColor: 'bg-purple-100 dark:bg-purple-900/40',
+                borderColor: 'border-purple-300 dark:border-purple-600',
                 iconColor: 'text-purple-600 dark:text-purple-400',
                 textColor: 'text-purple-900 dark:text-purple-100'
             };
@@ -335,8 +385,8 @@ function CustomArtifactNode({ data }) {
         if (lowerLabel.includes('feature') || lowerLabel.includes('train_set') || lowerLabel.includes('test_set')) {
             return {
                 icon: Layers,
-                bgColor: 'bg-emerald-100 dark:bg-emerald-900/30',
-                borderColor: 'border-emerald-400 dark:border-emerald-600',
+                bgColor: 'bg-emerald-100 dark:bg-emerald-900/40',
+                borderColor: 'border-emerald-300 dark:border-emerald-600',
                 iconColor: 'text-emerald-600 dark:text-emerald-400',
                 textColor: 'text-emerald-900 dark:text-emerald-100'
             };
@@ -344,8 +394,8 @@ function CustomArtifactNode({ data }) {
         if (lowerLabel.includes('data') || lowerLabel.includes('batch') || lowerLabel.includes('set')) {
             return {
                 icon: Database,
-                bgColor: 'bg-blue-100 dark:bg-blue-900/30',
-                borderColor: 'border-blue-400 dark:border-blue-600',
+                bgColor: 'bg-blue-100 dark:bg-blue-900/40',
+                borderColor: 'border-blue-300 dark:border-blue-600',
                 iconColor: 'text-blue-600 dark:text-blue-400',
                 textColor: 'text-blue-900 dark:text-blue-100'
             };
@@ -353,8 +403,8 @@ function CustomArtifactNode({ data }) {
         if (lowerLabel.includes('metrics') || lowerLabel.includes('report') || lowerLabel.includes('status')) {
             return {
                 icon: BarChart2,
-                bgColor: 'bg-orange-100 dark:bg-orange-900/30',
-                borderColor: 'border-orange-400 dark:border-orange-600',
+                bgColor: 'bg-orange-100 dark:bg-orange-900/40',
+                borderColor: 'border-orange-300 dark:border-orange-600',
                 iconColor: 'text-orange-600 dark:text-orange-400',
                 textColor: 'text-orange-900 dark:text-orange-100'
             };
@@ -362,8 +412,8 @@ function CustomArtifactNode({ data }) {
         if (lowerLabel.includes('image') || lowerLabel.includes('docker')) {
             return {
                 icon: Box,
-                bgColor: 'bg-cyan-100 dark:bg-cyan-900/30',
-                borderColor: 'border-cyan-400 dark:border-cyan-600',
+                bgColor: 'bg-cyan-100 dark:bg-cyan-900/40',
+                borderColor: 'border-cyan-300 dark:border-cyan-600',
                 iconColor: 'text-cyan-600 dark:text-cyan-400',
                 textColor: 'text-cyan-900 dark:text-cyan-100'
             };
@@ -384,13 +434,13 @@ function CustomArtifactNode({ data }) {
 
     return (
         <div
-            className={`px-3 py-2 rounded-lg ${style.bgColor} border-2 ${style.borderColor} flex items-center justify-center gap-2 shadow-md hover:shadow-lg transition-all min-w-[140px] cursor-pointer`}
-            style={{ height: artifactNodeHeight }}
+            className={`px-4 py-1.5 rounded-full ${style.bgColor} border ${style.borderColor} flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition-all min-w-[120px] cursor-pointer`}
+            style={{ height: 36 }}
         >
             <Handle type="target" position={Position.Top} className="!bg-slate-400 !w-2 !h-2" />
 
-            <Icon size={14} className={style.iconColor} />
-            <span className={`text-xs font-semibold ${style.textColor} truncate max-w-[100px]`} title={data.label}>
+            <Icon size={12} className={style.iconColor} />
+            <span className={`text-[11px] font-bold ${style.textColor} truncate max-w-[120px] uppercase tracking-wide`} title={data.label}>
                 {data.label}
             </span>
 

flowyml/ui/frontend/src/components/RunDetailsPanel.jsx

@@ -232,11 +232,41 @@ export function RunDetailsPanel({ run, onClose }) {
                                                     {step.duration ? `${step.duration.toFixed(2)}s` : '-'}
                                                 </span>
                                             </div>
-                                            {step.error && (
-                                                <div className="text-xs text-rose-600 bg-rose-50 dark:bg-rose-900/20 p-2 rounded mt-2 font-mono">
-                                                    {step.error}
-                                                </div>
-                                            )}
+                                            {
+                                                step.source_file && (
+                                                    <div className="flex justify-end mb-2">
+                                                        <a
+                                                            href={`vscode://file/${step.source_file}:${step.source_line || 1}`}
+                                                            className="text-xs flex items-center gap-1 text-slate-500 hover:text-blue-600 transition-colors"
+                                                            title="Open in VS Code"
+                                                        >
+                                                            <Terminal size={12} />
+                                                            <span className="font-mono">{step.source_file.split('/').pop()}:{step.source_line}</span>
+                                                        </a>
+                                                    </div>
+                                                )
+                                            }
+                                            {
+                                                step.metrics && (
+                                                    <div className="flex gap-4 mb-2 justify-end text-xs text-slate-500 font-mono">
+                                                        <div className="flex items-center gap-1.5" title="CPU Usage">
+                                                            <Cpu size={12} className="text-slate-400" />
+                                                            <span>{step.metrics.cpu_percent?.toFixed(1) || 0}%</span>
+                                                        </div>
+                                                        <div className="flex items-center gap-1.5" title="Memory Usage">
+                                                            <Activity size={12} className="text-slate-400" />
+                                                            <span>{step.metrics.memory_mb?.toFixed(0) || 0} MB</span>
+                                                        </div>
+                                                    </div>
+                                                )
+                                            }
+                                            {
+                                                step.error && (
+                                                    <div className="text-xs text-rose-600 bg-rose-50 dark:bg-rose-900/20 p-2 rounded mt-2 font-mono">
+                                                        {step.error}
+                                                    </div>
+                                                )
+                                            }
                                         </div>
                                     ))}
                                     {(!runData.steps || Object.keys(runData.steps).length === 0) && (
@@ -280,7 +310,7 @@ export function RunDetailsPanel({ run, onClose }) {
                     )}
                 </div>
             </div>
-        </div>
+        </div >
     );
 }
 

flowyml/ui/frontend/src/components/RunMetaPanel.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Card } from './ui/Card';
+import { Badge } from './ui/Badge';
+import { Cpu, Box, Calendar, Clock, Container, Database, Tag } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+export function RunMetaPanel({ run }) {
+    if (!run) return null;
+
+    // Simulate getting resource info from run metadata if available, else placeholders
+    const resources = run.metadata?.resources || {
+        cpu: "Standard (2 vCPU)",
+        memory: "8 GiB",
+        gpu: run.metadata?.resources?.gpu ? `${run.metadata.resources.gpu_count}x ${run.metadata.resources.gpu}` : null
+    };
+
+    const dockerInfo = run.metadata?.docker || {
+        image: "flowyml/base:latest",
+        registry: "ghcr.io",
+        requirements: ["tensorflow", "scikit-learn"]
+    };
+
+    const scheduleInfo = run.trigger ? {
+        type: run.trigger.type,
+        cron: run.trigger.cron,
+        next_run: run.trigger.next_run
+    } : null;
+
+    return (
+        <Card className="p-4 bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm border border-slate-200 dark:border-slate-700/50 shadow-sm">
+            <h4 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
+                <Tag size={12} /> Run Environment
+            </h4>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {/* Resources */}
+                <div className="space-y-3">
+                    <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-300">
+                        <Cpu size={16} className="text-blue-500" />
+                        Resources
+                    </div>
+                    <div className="space-y-2">
+                        <div className="flex items-center justify-between text-xs">
+                            <span className="text-slate-500">Compute</span>
+                            <span className="font-mono text-slate-700 dark:text-slate-200">{resources.cpu}</span>
+                        </div>
+                        <div className="flex items-center justify-between text-xs">
+                            <span className="text-slate-500">Memory</span>
+                            <span className="font-mono text-slate-700 dark:text-slate-200">{resources.memory}</span>
+                        </div>
+                        {resources.gpu && (
+                            <div className="flex items-center justify-between text-xs">
+                                <span className="text-slate-500">GPU</span>
+                                <Badge variant="secondary" className="text-[10px] bg-purple-50 text-purple-700 border-purple-200">
+                                    {resources.gpu}
+                                </Badge>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Docker / Environment */}
+                <div className="space-y-3">
+                    <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-300">
+                        <Container size={16} className="text-cyan-500" />
+                        Environment
+                    </div>
+                    <div className="space-y-2">
+                        <div className="flex flex-col gap-1">
+                            <span className="text-xs text-slate-500">Base Image</span>
+                            <code className="text-[10px] bg-slate-100 dark:bg-slate-700 px-1.5 py-1 rounded text-slate-600 dark:text-slate-300 truncate">
+                                {dockerInfo.image}
+                            </code>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <span className="text-xs text-slate-500 w-16">Registry</span>
+                            <span className="text-xs font-medium text-slate-700 dark:text-slate-300 truncate">{dockerInfo.registry}</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Schedule / Trigger */}
+                <div className="space-y-3">
+                    <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-300">
+                        <Calendar size={16} className="text-emerald-500" />
+                        Trigger Info
+                    </div>
+                    {scheduleInfo ? (
+                        <div className="space-y-2">
+                            <div className="flex items-center gap-2">
+                                <Badge variant="outline" className="text-xs uppercase">{scheduleInfo.type}</Badge>
+                                {scheduleInfo.cron && <code className="text-[10px] bg-slate-100 px-1 py-0.5 rounded">{scheduleInfo.cron}</code>}
+                            </div>
+                            {scheduleInfo.next_run && (
+                                <div className="text-xs text-slate-500 flex items-center gap-1">
+                                    <Clock size={10} />
+                                    Next: {new Date(scheduleInfo.next_run).toLocaleString()}
+                                </div>
+                            )}
+                        </div>
+                    ) : (
+                        <div className="flex items-center gap-2 h-full py-2">
+                            <div className="p-1.5 bg-slate-100 rounded-lg">
+                                <Box size={14} className="text-slate-400" />
+                            </div>
+                            <span className="text-xs text-slate-500 italic">Manual Trigger</span>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </Card>
+    );
+}

flowyml/ui/frontend/src/components/ai/AIAssistantButton.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Sparkles, Brain } from 'lucide-react';
+import { useAIAssistant } from '../../contexts/AIAssistantContext';
+
+export function AIAssistantButton() {
+    const { isOpen, setIsOpen, isLoading, isWebGPUSupported, isModelLoading } = useAIAssistant();
+
+    // Don't render if WebGPU check is still loading
+    if (isWebGPUSupported === null) return null;
+
+    return (
+        <motion.button
+            initial={{ scale: 0, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ delay: 0.5, type: 'spring', stiffness: 300, damping: 20 }}
+            onClick={() => setIsOpen(true)}
+            className={`fixed bottom-6 right-6 z-30 group ${isOpen ? 'hidden' : ''}`}
+        >
+            {/* Animated glow effect */}
+            <motion.div
+                className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 blur-xl opacity-50"
+                animate={{
+                    scale: isLoading || isModelLoading ? [1, 1.3, 1] : 1,
+                    opacity: isLoading || isModelLoading ? [0.5, 0.8, 0.5] : 0.5
+                }}
+                transition={{
+                    duration: 1.5,
+                    repeat: isLoading || isModelLoading ? Infinity : 0,
+                    ease: 'easeInOut'
+                }}
+            />
+
+            {/* Main button */}
+            <div className="relative w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 shadow-xl shadow-purple-500/40 flex items-center justify-center transition-transform group-hover:scale-110">
+                {isLoading || isModelLoading ? (
+                    <motion.div
+                        animate={{ rotate: 360 }}
+                        transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
+                    >
+                        <Brain size={24} className="text-white" />
+                    </motion.div>
+                ) : (
+                    <Sparkles size={24} className="text-white" />
+                )}
+            </div>
+
+            {/* Tooltip */}
+            <div className="absolute right-full mr-3 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                <div className="bg-slate-800 text-white text-sm px-3 py-2 rounded-lg whitespace-nowrap shadow-lg border border-slate-700">
+                    {!isWebGPUSupported
+                        ? 'AI Assistant (WebGPU required)'
+                        : isModelLoading
+                            ? 'Loading AI...'
+                            : 'Ask FlowyML Assistant'
+                    }
+                    <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1 w-2 h-2 bg-slate-800 rotate-45 border-r border-t border-slate-700" />
+                </div>
+            </div>
+
+            {/* WebGPU warning indicator */}
+            {!isWebGPUSupported && (
+                <div className="absolute -top-1 -right-1 w-4 h-4 bg-amber-500 rounded-full flex items-center justify-center text-xs font-bold text-black">
+                    !
+                </div>
+            )}
+        </motion.button>
+    );
+}
+
+export default AIAssistantButton;