flowyml 1.4.0__py3-none-any.whl → 1.6.0__py3-none-any.whl

flowyml/ui/frontend/src/app/runs/page.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { fetchApi } from '../../utils/api';
-import { Link, useSearchParams } from 'react-router-dom';
-import { PlayCircle, Clock, CheckCircle, XCircle, Activity, ArrowRight, Calendar, Filter, RefreshCw, Layout } from 'lucide-react';
+import { Link, useSearchParams, useNavigate } from 'react-router-dom';
+import { PlayCircle, Clock, CheckCircle, XCircle, Activity, ArrowRight, Calendar, Filter, RefreshCw, Layout, GitCompare, CheckSquare, X } from 'lucide-react';
 import { Card } from '../../components/ui/Card';
 import { Badge } from '../../components/ui/Badge';
 import { Button } from '../../components/ui/Button';
@@ -17,8 +17,14 @@ export function Runs() {
     const [loading, setLoading] = useState(true);
     const [selectedRun, setSelectedRun] = useState(null);
     const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
     const { selectedProject } = useProject();
 
+    // Selection & Comparison State
+    const [selectionMode, setSelectionMode] = useState('single');
+    const [selectedRunIds, setSelectedRunIds] = useState([]);
+
+
     // Filter states
     const [statusFilter, setStatusFilter] = useState('all');
     const pipelineFilter = searchParams.get('pipeline');
@@ -49,7 +55,33 @@ export function Runs() {
     }, [selectedProject, pipelineFilter]);
 
     const handleRunSelect = (run) => {
-        setSelectedRun(run);
+        if (selectionMode === 'single') {
+            setSelectedRun(run);
+        }
+    };
+
+    const toggleSelectionMode = () => {
+        if (selectionMode === 'single') {
+            setSelectionMode('multi');
+            setSelectedRunIds([]);
+        } else {
+            setSelectionMode('single');
+            setSelectedRunIds([]);
+        }
+    };
+
+    const handleMultiSelect = (runId, checked) => {
+        if (checked) {
+            setSelectedRunIds(prev => [...prev, runId]);
+        } else {
+            setSelectedRunIds(prev => prev.filter(id => id !== runId));
+        }
+    };
+
+    const handleCompare = () => {
+        if (selectedRunIds.length >= 2) {
+            navigate(`/compare?runs=${selectedRunIds.join(',')}`);
+        }
     };
 
     return (
@@ -67,6 +99,32 @@ export function Runs() {
                         </p>
                     </div>
                     <div className="flex items-center gap-3">
+                        {selectionMode === 'multi' ? (
+                            <>
+                                <span className="text-sm text-slate-500 mr-2">
+                                    {selectedRunIds.length} selected
+                                </span>
+                                <Button
+                                    size="sm"
+                                    variant="primary"
+                                    disabled={selectedRunIds.length < 2}
+                                    onClick={handleCompare}
+                                >
+                                    <GitCompare size={16} className="mr-2" />
+                                    Compare
+                                </Button>
+                                <Button variant="ghost" size="sm" onClick={toggleSelectionMode}>
+                                    <X size={16} className="mr-2" />
+                                    Cancel
+                                </Button>
+                            </>
+                        ) : (
+                            <Button variant="outline" size="sm" onClick={toggleSelectionMode}>
+                                <CheckSquare size={16} className="mr-2" />
+                                Select to Compare
+                            </Button>
+                        )}
+
                         <Button variant="outline" size="sm" onClick={fetchRuns} disabled={loading}>
                             <RefreshCw size={16} className={`mr-2 ${loading ? 'animate-spin' : ''}`} />
                             Refresh
@@ -95,6 +153,9 @@ export function Runs() {
                                     projectId={selectedProject}
                                     onSelect={handleRunSelect}
                                     selectedId={selectedRun?.run_id}
+                                    selectionMode={selectionMode}
+                                    selectedIds={selectedRunIds}
+                                    onMultiSelect={handleMultiSelect}
                                 />
                             </div>
                         </div>

flowyml/ui/frontend/src/app/settings/page.jsx

@@ -146,7 +146,7 @@ export function Settings() {
                         </Button>
                     </Card>
                 ) : (
-                    tokens.map((token) => (
+                    Array.isArray(tokens) && tokens.map((token) => (
                         <Card key={token.id} className="hover:shadow-lg transition-all duration-200">
                             <div className="flex items-center justify-between gap-4">
                                 <div className="flex-1 min-w-0">

flowyml/ui/frontend/src/app/tokens/page.jsx

@@ -42,6 +42,7 @@ export function TokenManagement() {
                 return;
             }
             const data = await res.json();
+            console.log("Tokens fetched:", data);
             setTokens(data.tokens || []);
         } catch (err) {
             console.error('Failed to fetch tokens:', err);
@@ -127,7 +128,7 @@ export function TokenManagement() {
             )}
 
             {/* Tokens List */}
-            {tokens.length > 0 && (
+            {Array.isArray(tokens) && tokens.length > 0 && (
                 <Card>
                     <CardHeader>
                         <div className="flex items-center justify-between">
@@ -210,7 +211,7 @@ function TokenItem({ token, onRevoke }) {
     const handleRevoke = async () => {
         try {
             // This would need to be implemented in the backend
-            await fetch(`/ api / execution / tokens / ${token.name} `, {
+            await fetchApi(`/api/execution/tokens/${token.name}`, {
                 method: 'DELETE'
             });
             onRevoke();
@@ -232,7 +233,7 @@ function TokenItem({ token, onRevoke }) {
                         )}
                     </div>
                     <div className="flex flex-wrap gap-2 mb-3">
-                        {token.permissions?.length ? (
+                        {Array.isArray(token.permissions) && token.permissions.length > 0 ? (
                             token.permissions.map(perm => (
                                 <PermissionChip key={perm} perm={perm} />
                             ))
@@ -347,9 +348,10 @@ function CreateTokenModal({ onClose, onCreate }) {
         try {
             const res = await fetchApi('/api/projects/');
             const data = await res.json();
-            setProjects(data || []);
+            setProjects(data.projects || []);
         } catch (err) {
             console.error('Failed to fetch projects:', err);
+            setProjects([]);
         } finally {
             setLoadingProjects(false);
         }
@@ -364,7 +366,7 @@ function CreateTokenModal({ onClose, onCreate }) {
         setLoading(true);
         setError(null);
         try {
-            const res = await fetch('/api/execution/tokens', {
+            const res = await fetchApi('/api/execution/tokens', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
@@ -448,7 +450,7 @@ function CreateTokenModal({ onClose, onCreate }) {
                                 className="w-full px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-slate-900 text-slate-900 dark:text-white"
                             >
                                 <option value="">All Projects</option>
-                                {projects.map(proj => (
+                                {Array.isArray(projects) && projects.map(proj => (
                                     <option key={proj.name} value={proj.name}>
                                         {proj.name}
                                     </option>

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

@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../utils/api';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
+import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import {
+    Image,
+    FileText,
+    Code,
+    Table as TableIcon,
+    AlertCircle,
+    Download
+} from 'lucide-react';
+import { Button } from './ui/Button'; // Assuming you have a Button component, or use native button if not
+
+SyntaxHighlighter.registerLanguage('json', json);
+SyntaxHighlighter.registerLanguage('python', python);
+
+export function ArtifactViewer({ artifact }) {
+    const [content, setContent] = useState(null);
+    const [contentType, setContentType] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        if (!artifact?.artifact_id) return;
+        fetchContent();
+    }, [artifact]);
+
+    const fetchContent = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            // First try to infer type from artifact metadata
+            let type = 'text';
+            if (artifact.path) {
+                const ext = artifact.path.split('.').pop().toLowerCase();
+                if (['png', 'jpg', 'jpeg', 'svg', 'gif'].includes(ext)) type = 'image';
+                else if (['json'].includes(ext)) type = 'json';
+                else if (['csv', 'tsv'].includes(ext)) type = 'table';
+            }
+
+            // If it's a value-based artifact (no file path), use the value directly if possible
+            if (!artifact.path && artifact.value) {
+                try {
+                    const parsed = JSON.parse(artifact.value);
+                    setContent(parsed);
+                    setContentType('json');
+                } catch {
+                    setContent(artifact.value);
+                    setContentType('text');
+                }
+                setLoading(false);
+                return;
+            }
+
+            // Fetch actual content from backend
+            const res = await fetchApi(`/api/assets/${artifact.artifact_id}/content`);
+            if (!res.ok) {
+                // If content fetch fails, fallback to 'value' preview if available
+                if (artifact.value) {
+                    setContent(artifact.value);
+                    setContentType('text');
+                } else {
+                    throw new Error('Failed to load artifact content');
+                }
+            } else {
+                const blob = await res.blob();
+                const mime = blob.type;
+
+                if (mime.startsWith('image/') || type === 'image') {
+                    const url = URL.createObjectURL(blob);
+                    setContent(url);
+                    setContentType('image');
+                } else if (mime.includes('json') || type === 'json') {
+                    const text = await blob.text();
+                    setContent(JSON.parse(text));
+                    setContentType('json');
+                } else {
+                    const text = await blob.text();
+                    setContent(text);
+                    setContentType('text');
+                }
+            }
+
+        } catch (err) {
+            console.error('Failed to load artifact:', err);
+            setError('Could not load full content. Showing metadata only.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex flex-col items-center justify-center p-12 text-slate-400">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500 mb-2"></div>
+                <p className="text-sm">Loading content...</p>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex flex-col items-center justify-center p-8 text-rose-500 bg-rose-50 rounded-lg border border-rose-100">
+                <AlertCircle size={24} className="mb-2" />
+                <p className="text-sm font-medium">{error}</p>
+            </div>
+        );
+    }
+
+    if (contentType === 'image') {
+        return (
+            <div className="flex flex-col items-center bg-slate-50 dark:bg-slate-900 p-4 rounded-lg border border-slate-200 dark:border-slate-700">
+                <div className="relative rounded-lg overflow-hidden shadow-sm bg-white dark:bg-black">
+                    <img src={content} alt={artifact.name} className="max-w-full max-h-[60vh] object-contain" />
+                </div>
+                <p className="text-xs text-slate-500 dark:text-slate-400 mt-2 flex items-center gap-1">
+                    <Image size={12} />
+                    Image Preview
+                </p>
+            </div>
+        );
+    }
+
+    if (contentType === 'json') {
+        return (
+            <div className="rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700 shadow-sm">
+                <div className="bg-slate-50 dark:bg-slate-800 px-3 py-2 border-b border-slate-200 dark:border-slate-700 flex items-center gap-2">
+                    <Code size={14} className="text-slate-500 dark:text-slate-400" />
+                    <span className="text-xs font-semibold text-slate-600 dark:text-slate-300">JSON Viewer</span>
+                </div>
+                <div className="max-h-[50vh] overflow-y-auto bg-white">
+                    <SyntaxHighlighter
+                        language="json"
+                        style={docco}
+                        customStyle={{ margin: 0, padding: '1rem', fontSize: '0.85rem' }}
+                    >
+                        {JSON.stringify(content, null, 2)}
+                    </SyntaxHighlighter>
+                </div>
+            </div>
+        );
+    }
+
+    // Default Text Viewer
+    return (
+        <div className="rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700 shadow-sm">
+            <div className="bg-slate-50 dark:bg-slate-800 px-3 py-2 border-b border-slate-200 dark:border-slate-700 flex items-center gap-2">
+                <FileText size={14} className="text-slate-500 dark:text-slate-400" />
+                <span className="text-xs font-semibold text-slate-600 dark:text-slate-300">Text Content</span>
+            </div>
+            <pre className="p-4 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-200 text-xs font-mono overflow-x-auto whitespace-pre-wrap max-h-[50vh] overflow-y-auto">
+                {typeof content === 'string' ? content : JSON.stringify(content, null, 2)}
+            </pre>
+        </div>
+    );
+}

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

@@ -53,7 +53,10 @@ const TreeNode = ({
     badge,
     onClick,
     isActive = false,
-    subLabel
+    subLabel,
+    checkable = false,
+    checked = false,
+    onCheck
 }) => {
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
     const hasChildren = children && children.length > 0;
@@ -78,6 +81,18 @@ const TreeNode = ({
                     onClick?.();
                 }}
             >
+                {/* Checkbox for selection mode */}
+                {checkable && (
+                    <div className="shrink-0 mr-1" onClick={(e) => e.stopPropagation()}>
+                        <input
+                            type="checkbox"
+                            checked={checked}
+                            onChange={(e) => onCheck?.(e.target.checked)}
+                            className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500 cursor-pointer accent-blue-600"
+                        />
+                    </div>
+                )}
+
                 <div className="flex items-center gap-1 text-slate-400 shrink-0">
                     {hasChildren ? (
                         <motion.div
@@ -135,7 +150,10 @@ export function NavigationTree({
     onSelect,
     selectedId,
     mode = 'experiments', // experiments, pipelines, runs
-    className = ''
+    className = '',
+    selectionMode = 'single', // 'single' | 'multi'
+    selectedIds = [], // Array of IDs for multi-select
+    onMultiSelect // Callback for multi-select (id, checked)
 }) {
     const [data, setData] = useState({ projects: [], items: [] });
     const [loading, setLoading] = useState(true);
@@ -238,13 +256,6 @@ export function NavigationTree({
     );
 
     const renderExperiments = () => {
-        const getRunsForExperiment = (expName) => {
-            // This would ideally come from the API or be passed in,
-            // but for now we might not have runs loaded here.
-            // We'll just show the experiment node.
-            return [];
-        };
-
         const renderExperimentNode = (exp, level) => (
             <TreeNode
                 key={exp.experiment_id}
@@ -253,6 +264,9 @@ export function NavigationTree({
                 level={level}
                 isActive={selectedId === exp.experiment_id}
                 onClick={() => onSelect?.(exp)}
+                checkable={selectionMode === 'multi'}
+                checked={selectedIds?.includes(exp.experiment_id)}
+                onCheck={(checked) => onMultiSelect?.(exp.experiment_id, checked)}
                 badge={
                     <span className="text-[10px] bg-slate-100 dark:bg-slate-800 text-slate-500 px-1.5 py-0.5 rounded-full">
                         {exp.run_count || 0}
@@ -338,6 +352,9 @@ export function NavigationTree({
                 status={run.status}
                 isActive={selectedId === run.run_id}
                 onClick={() => onSelect?.(run)}
+                checkable={selectionMode === 'multi'}
+                checked={selectedIds?.includes(run.run_id)}
+                onCheck={(checked) => onMultiSelect?.(run.run_id, checked)}
             />
         );
 

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

@@ -57,7 +57,7 @@ const getLayoutedElements = (nodes, edges, direction = 'TB') => {
     return { nodes, edges };
 };
 
-export function PipelineGraph({ dag, steps, selectedStep, onStepSelect }) {
+export function PipelineGraph({ dag, steps, selectedStep, onStepSelect, onArtifactSelect }) {
     // Transform DAG data to ReactFlow format with Artifact Nodes
     const { nodes: initialNodes, edges: initialEdges } = useMemo(() => {
         if (!dag || !dag.nodes) return { nodes: [], edges: [] };
@@ -83,10 +83,37 @@ export function PipelineGraph({ dag, steps, selectedStep, onStepSelect }) {
             return id;
         };
 
+        // Map execution groups to colors
+        const groupColors = {};
+        const groupColorPalette = [
+            { bg: 'bg-blue-50 dark:bg-blue-900/20', border: 'border-blue-400 dark:border-blue-500', text: 'text-blue-700 dark:text-blue-300', badge: 'bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-blue-300' },
+            { bg: 'bg-purple-50 dark:bg-purple-900/20', border: 'border-purple-400 dark:border-purple-500', text: 'text-purple-700 dark:text-purple-300', badge: 'bg-purple-100 dark:bg-purple-800 text-purple-700 dark:text-purple-300' },
+            { bg: 'bg-green-50 dark:bg-green-900/20', border: 'border-green-400 dark:border-green-500', text: 'text-green-700 dark:text-green-300', badge: 'bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-300' },
+            { bg: 'bg-orange-50 dark:bg-orange-900/20', border: 'border-orange-400 dark:border-orange-500', text: 'text-orange-700 dark:text-orange-300', badge: 'bg-orange-100 dark:bg-orange-800 text-orange-700 dark:text-orange-300' },
+            { bg: 'bg-pink-50 dark:bg-pink-900/20', border: 'border-pink-400 dark:border-pink-500', text: 'text-pink-700 dark:text-pink-300', badge: 'bg-pink-100 dark:bg-pink-800 text-pink-700 dark:text-pink-300' },
+            { bg: 'bg-cyan-50 dark:bg-cyan-900/20', border: 'border-cyan-400 dark:border-cyan-500', text: 'text-cyan-700 dark:text-cyan-300', badge: 'bg-cyan-100 dark:bg-cyan-800 text-cyan-700 dark:text-cyan-300' },
+        ];
+
+        // First pass: collect all execution groups
+        const executionGroups = new Set();
+        dag.nodes.forEach(node => {
+            const stepData = steps?.[node.id] || {};
+            if (stepData.execution_group) {
+                executionGroups.add(stepData.execution_group);
+            }
+        });
+
+        // Assign colors to groups
+        Array.from(executionGroups).forEach((group, idx) => {
+            groupColors[group] = groupColorPalette[idx % groupColorPalette.length];
+        });
+
         // 1. Create Step Nodes and Connections
         dag.nodes.forEach(node => {
             const stepData = steps?.[node.id] || {};
             const status = stepData.success ? 'success' : stepData.error ? 'failed' : stepData.running ? 'running' : 'pending';
+            const executionGroup = stepData.execution_group;
+            const groupColor = executionGroup ? groupColors[executionGroup] : null;
 
             nodes.push({
                 id: node.id,
@@ -96,7 +123,9 @@ export function PipelineGraph({ dag, steps, selectedStep, onStepSelect }) {
                     status,
                     duration: stepData.duration,
                     cached: stepData.cached,
-                    selected: selectedStep === node.id
+                    selected: selectedStep === node.id,
+                    execution_group: executionGroup,
+                    groupColor: groupColor
                 }
             });
 
@@ -159,8 +188,10 @@ export function PipelineGraph({ dag, steps, selectedStep, onStepSelect }) {
     const onNodeClick = useCallback((event, node) => {
         if (node.type === 'step' && onStepSelect) {
             onStepSelect(node.id);
+        } else if (node.type === 'artifact' && onArtifactSelect) {
+            onArtifactSelect(node.data.label);
         }
-    }, [onStepSelect]);
+    }, [onStepSelect, onArtifactSelect]);
 
     const nodeTypes = useMemo(() => ({
         step: CustomStepNode,
@@ -168,7 +199,7 @@ export function PipelineGraph({ dag, steps, selectedStep, onStepSelect }) {
     }), []);
 
     return (
-        <div className="w-full h-full bg-slate-50/50 rounded-xl border border-slate-200 overflow-hidden">
+        <div className="w-full h-full bg-slate-50/50 dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
             <ReactFlow
                 nodes={nodes}
                 edges={edges}
@@ -199,45 +230,48 @@ function CustomStepNode({ data }) {
     const statusConfig = {
         success: {
             icon: <CheckCircle size={18} />,
-            color: 'text-emerald-600',
-            bg: 'bg-white',
-            border: 'border-emerald-500',
-            ring: 'ring-emerald-200',
-            shadow: 'shadow-emerald-100'
+            color: 'text-emerald-600 dark:text-emerald-400',
+            bg: 'bg-white dark:bg-slate-800',
+            border: 'border-emerald-500 dark:border-emerald-500',
+            ring: 'ring-emerald-200 dark:ring-emerald-900',
+            shadow: 'shadow-emerald-100 dark:shadow-none'
         },
         failed: {
             icon: <XCircle size={18} />,
-            color: 'text-rose-600',
-            bg: 'bg-white',
-            border: 'border-rose-500',
-            ring: 'ring-rose-200',
-            shadow: 'shadow-rose-100'
+            color: 'text-rose-600 dark:text-rose-400',
+            bg: 'bg-white dark:bg-slate-800',
+            border: 'border-rose-500 dark:border-rose-500',
+            ring: 'ring-rose-200 dark:ring-rose-900',
+            shadow: 'shadow-rose-100 dark:shadow-none'
         },
         running: {
             icon: <Loader size={18} className="animate-spin" />,
-            color: 'text-amber-600',
-            bg: 'bg-white',
-            border: 'border-amber-500',
-            ring: 'ring-amber-200',
-            shadow: 'shadow-amber-100'
+            color: 'text-amber-600 dark:text-amber-400',
+            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'
         },
         pending: {
             icon: <Clock size={18} />,
-            color: 'text-slate-400',
-            bg: 'bg-slate-50',
-            border: 'border-slate-300',
-            ring: 'ring-slate-200',
-            shadow: 'shadow-slate-100'
+            color: 'text-slate-400 dark:text-slate-500',
+            bg: 'bg-slate-50 dark:bg-slate-800/50',
+            border: 'border-slate-300 dark:border-slate-700',
+            ring: 'ring-slate-200 dark:ring-slate-800',
+            shadow: 'shadow-slate-100 dark:shadow-none'
         }
     };
 
     const config = statusConfig[data.status] || statusConfig.pending;
+    const groupColor = data.groupColor;
+    const hasGroup = data.execution_group && groupColor;
 
     return (
         <div
             className={`
                 relative px-4 py-3 rounded-lg border-2 transition-all duration-200
-                ${config.bg} ${config.border}
+                ${hasGroup ? groupColor.bg : config.bg}
+                ${hasGroup ? groupColor.border : config.border}
                 ${data.selected ? `ring-4 ${config.ring} shadow-lg` : `hover:shadow-md ${config.shadow}`}
             `}
             style={{ width: stepNodeWidth, height: stepNodeHeight }}
@@ -250,10 +284,17 @@ function CustomStepNode({ data }) {
                         {config.icon}
                     </div>
                     <div className="min-w-0 flex-1">
-                        <h3 className="font-bold text-slate-900 text-sm truncate" title={data.label}>
+                        <h3 className={`font-bold text-sm truncate ${hasGroup ? groupColor.text : 'text-slate-900 dark:text-white'}`} title={data.label}>
                             {data.label}
                         </h3>
-                        <p className="text-xs text-slate-500 capitalize">{data.status}</p>
+                        <div className="flex items-center gap-2 mt-0.5">
+                            <p className="text-xs text-slate-500 capitalize">{data.status}</p>
+                            {hasGroup && (
+                                <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded ${groupColor.badge}`}>
+                                    {data.execution_group}
+                                </span>
+                            )}
+                        </div>
                     </div>
                 </div>
 
@@ -343,7 +384,7 @@ 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]`}
+            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 }}
         >
             <Handle type="target" position={Position.Top} className="!bg-slate-400 !w-2 !h-2" />