flowyml 1.3.0__py3-none-any.whl → 1.5.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: [] };
@@ -159,8 +159,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 +170,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,35 +201,35 @@ 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'
         }
     };
 
@@ -343,7 +345,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" />

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

@@ -27,6 +27,7 @@ import { ProjectSelector } from './ProjectSelector';
 
 export function RunDetailsPanel({ run, onClose }) {
     const [details, setDetails] = useState(null);
+    const [artifacts, setArtifacts] = useState([]);
     const [loading, setLoading] = useState(false);
     const [activeTab, setActiveTab] = useState('overview'); // overview, steps, artifacts
     const [currentProject, setCurrentProject] = useState(run?.project);
@@ -41,9 +42,17 @@ export function RunDetailsPanel({ run, onClose }) {
     const fetchRunDetails = async () => {
         setLoading(true);
         try {
-            const res = await fetchApi(`/api/runs/${run.run_id}`);
-            const data = await res.json();
+            const [runRes, assetsRes] = await Promise.all([
+                fetchApi(`/api/runs/${run.run_id}`),
+                fetchApi(`/api/assets?run_id=${run.run_id}`)
+            ]);
+
+            const data = await runRes.json();
+            const assetsData = await assetsRes.json();
+
             setDetails(data);
+            setArtifacts(assetsData.assets || []);
+
             if (data.project) setCurrentProject(data.project);
         } catch (error) {
             console.error('Failed to fetch run details:', error);
@@ -177,11 +186,11 @@ export function RunDetailsPanel({ run, onClose }) {
                             {activeTab === 'overview' && (
                                 <div className="space-y-4">
                                     {/* DAG Visualization Preview */}
-                                    <Card className="p-0 overflow-hidden h-64 border-slate-200 dark:border-slate-700">
-                                        <div className="p-3 border-b border-slate-100 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 flex justify-between items-center">
+                                    <div className="rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden h-[400px] flex flex-col bg-white dark:bg-slate-800">
+                                        <div className="p-3 border-b border-slate-100 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 flex justify-between items-center shrink-0">
                                             <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300">Pipeline Graph</h3>
                                         </div>
-                                        <div className="h-full bg-slate-50/50">
+                                        <div className="flex-1 min-h-0 bg-slate-50/50 dark:bg-slate-900/50">
                                             {runData.dag ? (
                                                 <PipelineGraph
                                                     dag={runData.dag}
@@ -193,7 +202,7 @@ export function RunDetailsPanel({ run, onClose }) {
                                                 </div>
                                             )}
                                         </div>
-                                    </Card>
+                                    </div>
 
                                     {/* Error Display if Failed */}
                                     {runData.status === 'failed' && runData.error && (
@@ -238,14 +247,33 @@ export function RunDetailsPanel({ run, onClose }) {
 
                             {activeTab === 'artifacts' && (
                                 <div className="space-y-3">
-                                    {/* This would need actual artifact data structure */}
-                                    <div className="text-center py-8 text-slate-500">
-                                        <Box size={32} className="mx-auto mb-2 opacity-50" />
-                                        <p>Artifacts view not fully implemented in preview</p>
-                                        <Link to={`/runs/${runData.run_id}`} className="text-primary-600 hover:underline text-sm mt-2 inline-block">
-                                            View in full details page
-                                        </Link>
-                                    </div>
+                                    {artifacts.length > 0 ? (
+                                        artifacts.map(art => (
+                                            <div
+                                                key={art.artifact_id}
+                                                className="flex items-center gap-3 p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-primary-300 dark:hover:border-primary-700 transition-colors"
+                                            >
+                                                <div className="p-2 bg-slate-50 dark:bg-slate-700 rounded-md text-slate-500 dark:text-slate-400">
+                                                    <FileText size={18} />
+                                                </div>
+                                                <div className="min-w-0 flex-1">
+                                                    <p className="text-sm font-semibold text-slate-900 dark:text-white truncate">
+                                                        {art.name}
+                                                    </p>
+                                                    <p className="text-xs text-slate-500 truncate">{art.type}</p>
+                                                </div>
+                                                <Link to={`/runs/${run.run_id}`}>
+                                                    <Button variant="ghost" size="sm">
+                                                        <ArrowRight size={14} />
+                                                    </Button>
+                                                </Link>
+                                            </div>
+                                        ))
+                                    ) : (
+                                        <div className="text-center py-8 text-slate-500">
+                                            No artifacts found for this run.
+                                        </div>
+                                    )}
                                 </div>
                             )}
                         </>

flowyml/ui/frontend/src/router/index.jsx

@@ -16,6 +16,8 @@ import { Leaderboard } from '../app/leaderboard/page';
 import { Plugins } from '../app/plugins/page';
 import { Settings } from '../app/settings/page';
 import { TokenManagement } from '../app/tokens/page';
+import { RunComparisonPage } from '../app/compare/page';
+import { ExperimentComparisonPage } from '../app/experiments/compare/page';
 
 export const router = createBrowserRouter([
     {
@@ -25,9 +27,11 @@ export const router = createBrowserRouter([
             { index: true, element: <Dashboard /> },
             { path: 'pipelines', element: <Pipelines /> },
             { path: 'runs', element: <Runs /> },
+            { path: 'compare', element: <RunComparisonPage /> },
             { path: 'runs/:runId', element: <RunDetails /> },
             { path: 'assets', element: <Assets /> },
             { path: 'experiments', element: <Experiments /> },
+            { path: 'experiments/compare', element: <ExperimentComparisonPage /> },
             { path: 'experiments/:experimentId', element: <ExperimentDetails /> },
             { path: 'traces', element: <Traces /> },
             { path: 'projects', element: <Projects /> },

{flowyml-1.3.0.dist-info → flowyml-1.5.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: flowyml
-Version: 1.3.0
+Version: 1.5.0
 Summary: Next-Generation ML Pipeline Framework
 License: Apache-2.0
 License-File: LICENSE
@@ -36,11 +36,13 @@ Requires-Dist: httpx (>=0.24,<0.28)
 Requires-Dist: loguru (>=0.7.3,<0.8.0)
 Requires-Dist: numpy (>=1.20.0)
 Requires-Dist: pandas (>=1.3.0)
+Requires-Dist: psycopg2-binary (>=2.9.0)
 Requires-Dist: pydantic (>=2.0.0)
 Requires-Dist: python-multipart (>=0.0.6) ; extra == "ui" or extra == "all"
 Requires-Dist: pytz (>=2024.1,<2025.0)
 Requires-Dist: pyyaml (>=6.0)
 Requires-Dist: scikit-learn (>=1.0.0) ; extra == "sklearn" or extra == "all"
+Requires-Dist: sqlalchemy (>=2.0.0)
 Requires-Dist: tensorflow (>=2.12.0) ; extra == "tensorflow" or extra == "all"
 Requires-Dist: toml (>=0.10.2)
 Requires-Dist: torch (>=2.0.0) ; extra == "pytorch" or extra == "all"