flowyml 1.1.0__py3-none-any.whl

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

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import {
+    LayoutDashboard,
+    PlayCircle,
+    FolderKanban,
+    FlaskConical,
+    Database,
+    Settings,
+    Trophy,
+    Calendar,
+    MessageSquare,
+    Key,
+    Package,
+    ChevronLeft,
+    ChevronRight,
+    Menu
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const NAV_LINKS = [
+    { icon: LayoutDashboard, label: 'Dashboard', path: '/' },
+    { icon: FolderKanban, label: 'Projects', path: '/projects' },
+    { icon: PlayCircle, label: 'Pipelines', path: '/pipelines' },
+    { icon: Calendar, label: 'Schedules', path: '/schedules' },
+    { icon: PlayCircle, label: 'Runs', path: '/runs' },
+    { icon: Trophy, label: 'Leaderboard', path: '/leaderboard' },
+    { icon: Database, label: 'Assets', path: '/assets' },
+    { icon: FlaskConical, label: 'Experiments', path: '/experiments' },
+    { icon: MessageSquare, label: 'Traces', path: '/traces' },
+];
+
+const SETTINGS_LINKS = [
+    { icon: Package, label: 'Plugins', path: '/plugins' },
+    { icon: Key, label: 'API Tokens', path: '/tokens' },
+    { icon: Settings, label: 'Settings', path: '/settings' },
+];
+
+export function Sidebar({ collapsed, setCollapsed }) {
+    const location = useLocation();
+
+    return (
+        <motion.aside
+            initial={false}
+            animate={{ width: collapsed ? 80 : 256 }}
+            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>
+                <AnimatePresence>
+                    {!collapsed && (
+                        <motion.h1
+                            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"
+                        >
+                            flowyml
+                        </motion.h1>
+                    )}
+                </AnimatePresence>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex-1 p-4 space-y-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700">
+                <div className={`px-4 py-2 text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider transition-opacity duration-200 ${collapsed ? 'opacity-0 h-0' : 'opacity-100'}`}>
+                    Platform
+                </div>
+                {NAV_LINKS.map((link) => (
+                    <NavItem
+                        key={link.path}
+                        to={link.path}
+                        icon={link.icon}
+                        label={link.label}
+                        collapsed={collapsed}
+                        isActive={location.pathname === link.path}
+                    />
+                ))}
+
+                <div className={`px-4 py-2 text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mt-4 transition-opacity duration-200 ${collapsed ? 'opacity-0 h-0' : 'opacity-100'}`}>
+                    Settings
+                </div>
+                {SETTINGS_LINKS.map((link) => (
+                    <NavItem
+                        key={link.path}
+                        to={link.path}
+                        icon={link.icon}
+                        label={link.label}
+                        collapsed={collapsed}
+                        isActive={location.pathname === link.path}
+                    />
+                ))}
+            </nav>
+
+            {/* 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' : ''}`}>
+                    {!collapsed ? (
+                        <>
+                            <p className="text-xs font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap">flowyml v0.1.0</p>
+                            <p className="text-xs text-slate-400 dark:text-slate-500 mt-1 whitespace-nowrap">Local Environment</p>
+                        </>
+                    ) : (
+                        <div className="w-2 h-2 rounded-full bg-emerald-500" title="Online" />
+                    )}
+                </div>
+            </div>
+
+            {/* Collapse Toggle */}
+            <button
+                onClick={() => setCollapsed(!collapsed)}
+                className="absolute -right-3 top-20 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-full p-1 shadow-md text-slate-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+            >
+                {collapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
+            </button>
+        </motion.aside>
+    );
+}
+
+function NavItem({ to, icon: Icon, label, collapsed, isActive }) {
+    return (
+        <NavLink
+            to={to}
+            className={`flex items-center gap-3 px-4 py-2.5 rounded-lg transition-all duration-200 group relative ${isActive
+                ? 'bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 font-medium shadow-sm'
+                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-900 dark:hover:text-white'
+                }`}
+            title={collapsed ? label : undefined}
+        >
+            <span className={`transition-colors flex-shrink-0 ${isActive ? 'text-primary-600 dark:text-primary-400' : 'text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300'
+                }`}>
+                <Icon size={20} />
+            </span>
+            {!collapsed && (
+                <span className="text-sm whitespace-nowrap overflow-hidden text-ellipsis">{label}</span>
+            )}
+            {collapsed && isActive && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary-600 rounded-r-full" />
+            )}
+        </NavLink>
+    );
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { cn } from '../../utils/cn';
+
+const variants = {
+    default: "bg-slate-100 text-slate-800",
+    primary: "bg-primary-50 text-primary-700 border border-primary-100",
+    success: "bg-emerald-50 text-emerald-700 border border-emerald-100",
+    warning: "bg-amber-50 text-amber-700 border border-amber-100",
+    danger: "bg-rose-50 text-rose-700 border border-rose-100",
+    outline: "bg-transparent border border-slate-200 text-slate-600",
+};
+
+export function Badge({ className, variant = "default", children, ...props }) {
+    return (
+        <span
+            className={cn(
+                "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-black/5",
+                variants[variant],
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </span>
+    );
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils/cn';
+
+const variants = {
+    primary: "bg-primary-600 text-white hover:bg-primary-700 shadow-md shadow-primary-500/20",
+    secondary: "bg-white text-slate-900 border border-slate-200 hover:bg-slate-50",
+    ghost: "bg-transparent text-slate-600 hover:bg-slate-100",
+    danger: "bg-rose-600 text-white hover:bg-rose-700 shadow-md shadow-rose-500/20",
+};
+
+const sizes = {
+    sm: "h-8 px-3 text-xs",
+    md: "h-10 px-4 py-2",
+    lg: "h-12 px-8 text-lg",
+    icon: "h-10 w-10",
+};
+
+export function Button({ className, variant = "primary", size = "md", children, ...props }) {
+    return (
+        <motion.button
+            whileTap={{ scale: 0.98 }}
+            className={cn(
+                "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:pointer-events-none disabled:opacity-50",
+                variants[variant],
+                sizes[size],
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </motion.button>
+    );
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils/cn';
+
+export function Card({ className, children, hover = true, ...props }) {
+    return (
+        <motion.div
+            whileHover={hover ? { y: -2, boxShadow: "0 10px 30px -10px rgba(0,0,0,0.1)" } : {}}
+            transition={{ duration: 0.2 }}
+            className={cn(
+                "bg-white dark:bg-slate-800 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm p-6",
+                "transition-colors duration-200",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </motion.div>
+    );
+}
+
+export function CardHeader({ className, children, ...props }) {
+    return (
+        <div className={cn("flex flex-col space-y-1.5 mb-4", className)} {...props}>
+            {children}
+        </div>
+    );
+}
+
+export function CardTitle({ className, children, ...props }) {
+    return (
+        <h3 className={cn("font-semibold leading-none tracking-tight text-slate-900 dark:text-white", className)} {...props}>
+            {children}
+        </h3>
+    );
+}
+
+export function CardContent({ className, children, ...props }) {
+    return (
+        <div className={cn("", className)} {...props}>
+            {children}
+        </div>
+    );
+}

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

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+
+export function CodeSnippet({ code, language = 'python', title, className = '' }) {
+    const [copied, setCopied] = useState(false);
+
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className={`relative group ${className}`}>
+            {title && (
+                <div className="flex items-center justify-between px-4 py-2 bg-slate-800 dark:bg-slate-900 border-b border-slate-700 rounded-t-lg">
+                    <span className="text-sm font-medium text-slate-300">{title}</span>
+                    <span className="text-xs text-slate-500 uppercase font-mono">{language}</span>
+                </div>
+            )}
+            <div className="relative">
+                <pre className={`p-4 bg-slate-900 dark:bg-slate-950 text-slate-100 text-sm font-mono overflow-x-auto leading-relaxed ${title ? '' : 'rounded-t-lg'} rounded-b-lg`}>
+                    <code className={`language-${language}`}>{code}</code>
+                </pre>
+                <button
+                    onClick={copyToClipboard}
+                    className="absolute top-3 right-3 p-2 bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-slate-200 rounded-md transition-all opacity-0 group-hover:opacity-100"
+                    title="Copy to clipboard"
+                >
+                    {copied ? <Check size={14} /> : <Copy size={14} />}
+                </button>
+            </div>
+        </div>
+    );
+}
+
+// Example usage in CodeTab:
+// <CodeSnippet code={sourceCode} language="python" title="Step Source Code" />

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

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export function CollapsibleCard({
+    title,
+    children,
+    icon,
+    badge,
+    defaultOpen = false,
+    className = '',
+    headerClassName = ''
+}) {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    return (
+        <div className={`border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden bg-white dark:bg-slate-800 ${className}`}>
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className={`w-full flex items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors ${headerClassName}`}
+            >
+                <div className="flex items-center gap-3">
+                    {icon && <span className="text-slate-500">{icon}</span>}
+                    <h3 className="text-base font-semibold text-slate-900 dark:text-white">{title}</h3>
+                    {badge && <span>{badge}</span>}
+                </div>
+                <div className="flex items-center gap-2">
+                    {isOpen ? (
+                        <ChevronDown size={18} className="text-slate-400" />
+                    ) : (
+                        <ChevronRight size={18} className="text-slate-400" />
+                    )}
+                </div>
+            </button>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: 'auto', opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="overflow-hidden"
+                    >
+                        <div className="p-4 pt-0 border-t border-slate-100 dark:border-slate-700">
+                            {children}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}

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

@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import { Search, LayoutGrid, List, Table as TableIcon, ArrowUpDown, Filter } from 'lucide-react';
+import { Button } from './Button';
+
+export function DataView({
+    title,
+    subtitle,
+    actions,
+    items = [],
+    columns = [],
+    renderGrid,
+    renderList,
+    searchPlaceholder = "Search...",
+    initialView = 'grid',
+    emptyState,
+    loading = false
+}) {
+    const [view, setView] = useState(initialView);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+
+    // Filter items
+    const filteredItems = items.filter(item => {
+        if (!searchQuery) return true;
+        const searchStr = searchQuery.toLowerCase();
+        return Object.values(item).some(val =>
+            String(val).toLowerCase().includes(searchStr)
+        );
+    });
+
+    // Sort items
+    const sortedItems = [...filteredItems].sort((a, b) => {
+        if (!sortConfig.key) return 0;
+
+        const aVal = a[sortConfig.key];
+        const bVal = b[sortConfig.key];
+
+        if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1;
+        if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1;
+        return 0;
+    });
+
+    const handleSort = (key) => {
+        setSortConfig(current => ({
+            key,
+            direction: current.key === key && current.direction === 'asc' ? 'desc' : 'asc'
+        }));
+    };
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                <div>
+                    <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{title}</h1>
+                    {subtitle && <p className="text-slate-500 dark:text-slate-400 mt-1">{subtitle}</p>}
+                </div>
+                {actions && <div className="flex gap-2">{actions}</div>}
+            </div>
+
+            {/* Controls */}
+            <div className="flex flex-col md:flex-row gap-4 items-center justify-between bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
+                <div className="relative w-full md:w-96">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 w-4 h-4" />
+                    <input
+                        type="text"
+                        placeholder={searchPlaceholder}
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="w-full pl-10 pr-4 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-sm text-slate-900 dark:text-white"
+                    />
+                </div>
+
+                <div className="flex items-center gap-2 w-full md:w-auto justify-end">
+                    <div className="flex bg-slate-100 dark:bg-slate-900 p-1 rounded-lg border border-slate-200 dark:border-slate-700">
+                        <button
+                            onClick={() => setView('grid')}
+                            className={`p-2 rounded-md transition-all ${view === 'grid' ? 'bg-white dark:bg-slate-800 shadow-sm text-primary-600' : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}`}
+                            title="Grid View"
+                        >
+                            <LayoutGrid size={18} />
+                        </button>
+                        <button
+                            onClick={() => setView('list')}
+                            className={`p-2 rounded-md transition-all ${view === 'list' ? 'bg-white dark:bg-slate-800 shadow-sm text-primary-600' : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}`}
+                            title="List View"
+                        >
+                            <List size={18} />
+                        </button>
+                        <button
+                            onClick={() => setView('table')}
+                            className={`p-2 rounded-md transition-all ${view === 'table' ? 'bg-white dark:bg-slate-800 shadow-sm text-primary-600' : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}`}
+                            title="Table View"
+                        >
+                            <TableIcon size={18} />
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {/* Content */}
+            {loading ? (
+                <div className="flex justify-center py-12">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
+                </div>
+            ) : sortedItems.length === 0 ? (
+                emptyState || (
+                    <div className="text-center py-12 bg-slate-50 dark:bg-slate-800/50 rounded-xl border-2 border-dashed border-slate-200 dark:border-slate-700">
+                        <div className="flex justify-center mb-4">
+                            <Search className="w-12 h-12 text-slate-300 dark:text-slate-600" />
+                        </div>
+                        <h3 className="text-lg font-medium text-slate-900 dark:text-white">No items found</h3>
+                        <p className="text-slate-500 dark:text-slate-400 mt-1">
+                            {searchQuery ? `No results matching "${searchQuery}"` : "Get started by creating a new item."}
+                        </p>
+                    </div>
+                )
+            ) : (
+                <div className="animate-in fade-in duration-300">
+                    {view === 'grid' && (
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {sortedItems.map((item, idx) => (
+                                <div key={idx}>{renderGrid(item)}</div>
+                            ))}
+                        </div>
+                    )}
+
+                    {view === 'list' && (
+                        <div className="space-y-4">
+                            {sortedItems.map((item, idx) => (
+                                <div key={idx}>{renderList ? renderList(item) : renderGrid(item)}</div>
+                            ))}
+                        </div>
+                    )}
+
+                    {view === 'table' && (
+                        <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden shadow-sm">
+                            <div className="overflow-x-auto">
+                                <table className="w-full text-sm text-left">
+                                    <thead className="text-xs text-slate-500 uppercase bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">
+                                        <tr>
+                                            {columns.map((col, idx) => (
+                                                <th
+                                                    key={idx}
+                                                    className="px-6 py-3 font-medium cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+                                                    onClick={() => col.sortable && handleSort(col.key)}
+                                                >
+                                                    <div className="flex items-center gap-2">
+                                                        {col.header}
+                                                        {col.sortable && <ArrowUpDown size={14} className="text-slate-400" />}
+                                                    </div>
+                                                </th>
+                                            ))}
+                                        </tr>
+                                    </thead>
+                                    <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
+                                        {sortedItems.map((item, idx) => (
+                                            <tr key={idx} className="bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
+                                                {columns.map((col, colIdx) => (
+                                                    <td key={colIdx} className="px-6 py-4">
+                                                        {col.render ? col.render(item) : item[col.key]}
+                                                    </td>
+                                                ))}
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button } from './Button';
+
+export function EmptyState({
+    icon: Icon,
+    title,
+    description,
+    action,
+    actionLabel,
+    onAction,
+    className = ''
+}) {
+    return (
+        <div className={`flex flex-col items-center justify-center py-16 px-4 text-center ${className}`}>
+            <div className="w-20 h-20 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-700 rounded-2xl flex items-center justify-center mb-6 shadow-inner">
+                {Icon && <Icon className="text-slate-400 dark:text-slate-500" size={40} />}
+            </div>
+
+            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">
+                {title}
+            </h3>
+
+            {description && (
+                <p className="text-slate-500 dark:text-slate-400 max-w-md mb-6">
+                    {description}
+                </p>
+            )}
+
+            {(action || (actionLabel && onAction)) && (
+                <div>
+                    {action || (
+                        <Button onClick={onAction}>
+                            {actionLabel}
+                        </Button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+// Card wrapper variant
+export function EmptyStateCard(props) {
+    return (
+        <div className="bg-slate-50 dark:bg-slate-800/30 rounded-xl border-2 border-dashed border-slate-200 dark:border-slate-700">
+            <EmptyState {...props} />
+        </div>
+    );
+}