flowyml 1.1.0__py3-none-any.whl

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import { CheckCircle, XCircle, Clock, Loader, AlertCircle, PlayCircle } from 'lucide-react';
+
+const statusConfig = {
+    completed: {
+        icon: CheckCircle,
+        label: 'Completed',
+        color: 'text-emerald-600 dark:text-emerald-400',
+        bg: 'bg-emerald-50 dark:bg-emerald-900/20',
+        border: 'border-emerald-200 dark:border-emerald-800'
+    },
+    success: {
+        icon: CheckCircle,
+        label: 'Success',
+        color: 'text-emerald-600 dark:text-emerald-400',
+        bg: 'bg-emerald-50 dark:bg-emerald-900/20',
+        border: 'border-emerald-200 dark:border-emerald-800'
+    },
+    failed: {
+        icon: XCircle,
+        label: 'Failed',
+        color: 'text-rose-600 dark:text-rose-400',
+        bg: 'bg-rose-50 dark:bg-rose-900/20',
+        border: 'border-rose-200 dark:border-rose-800'
+    },
+    running: {
+        icon: Loader,
+        label: 'Running',
+        color: 'text-blue-600 dark:text-blue-400',
+        bg: 'bg-blue-50 dark:bg-blue-900/20',
+        border: 'border-blue-200 dark:border-blue-800',
+        animate: true
+    },
+    pending: {
+        icon: Clock,
+        label: 'Pending',
+        color: 'text-amber-600 dark:text-amber-400',
+        bg: 'bg-amber-50 dark:bg-amber-900/20',
+        border: 'border-amber-200 dark:border-amber-800'
+    },
+    queued: {
+        icon: Clock,
+        label: 'Queued',
+        color: 'text-slate-600 dark:text-slate-400',
+        bg: 'bg-slate-50 dark:bg-slate-900/20',
+        border: 'border-slate-200 dark:border-slate-700'
+    },
+    initializing: {
+        icon: PlayCircle,
+        label: 'Initializing',
+        color: 'text-blue-600 dark:text-blue-400',
+        bg: 'bg-blue-50 dark:bg-blue-900/20',
+        border: 'border-blue-200 dark:border-blue-800'
+    },
+    cached: {
+        icon: CheckCircle,
+        label: 'Cached',
+        color: 'text-cyan-600 dark:text-cyan-400',
+        bg: 'bg-cyan-50 dark:bg-cyan-900/20',
+        border: 'border-cyan-200 dark:border-cyan-800'
+    }
+};
+
+export function ExecutionStatus({
+    status,
+    size = 'md',
+    showLabel = true,
+    className = '',
+    iconOnly = false
+}) {
+    const config = statusConfig[status?.toLowerCase()] || statusConfig.pending;
+    const Icon = config.icon;
+
+    const sizeClasses = {
+        sm: { icon: 14, text: 'text-xs', padding: 'px-2 py-0.5' },
+        md: { icon: 16, text: 'text-sm', padding: 'px-2.5 py-1' },
+        lg: { icon: 20, text: 'text-base', padding: 'px-3 py-1.5' }
+    };
+
+    const { icon: iconSize, text: textSize, padding } = sizeClasses[size];
+
+    if (iconOnly) {
+        return (
+            <Icon
+                size={iconSize}
+                className={`${config.color} ${config.animate ? 'animate-spin' : ''} ${className}`}
+            />
+        );
+    }
+
+    return (
+        <div className={`inline-flex items-center gap-1.5 ${padding} rounded-full border ${config.bg} ${config.border} ${className}`}>
+            <Icon
+                size={iconSize}
+                className={`${config.color} ${config.animate ? 'animate-spin' : ''}`}
+            />
+            {showLabel && (
+                <span className={`font-medium ${config.color} ${textSize}`}>
+                    {config.label}
+                </span>
+            )}
+        </div>
+    );
+}
+
+// Badge variant for minimal display
+export function StatusBadge({ status, className = '' }) {
+    return <ExecutionStatus status={status} size="sm" className={className} />;
+}
+
+// Icon-only variant
+export function StatusIcon({ status, size = 16, className = '' }) {
+    const config = statusConfig[status?.toLowerCase()] || statusConfig.pending;
+    const Icon = config.icon;
+
+    return (
+        <Icon
+            size={size}
+            className={`${config.color} ${config.animate ? 'animate-spin' : ''} ${className}`}
+        />
+    );
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export function KeyValue({ label, value, icon, className = '', valueClassName = '' }) {
+    return (
+        <div className={`flex items-start justify-between p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg border border-slate-200 dark:border-slate-700 ${className}`}>
+            <div className="flex items-center gap-2">
+                {icon && <span className="text-slate-400">{icon}</span>}
+                <span className="text-sm font-medium text-slate-600 dark:text-slate-400">{label}</span>
+            </div>
+            <span className={`text-sm font-mono font-semibold text-slate-900 dark:text-white text-right ${valueClassName}`}>
+                {value}
+            </span>
+        </div>
+    );
+}
+
+export function KeyValueGrid({ items, columns = 2, className = '' }) {
+    return (
+        <div className={`grid grid-cols-1 md:grid-cols-${columns} gap-3 ${className}`}>
+            {items.map((item, idx) => (
+                <KeyValue key={idx} {...item} />
+            ))}
+        </div>
+    );
+}

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import { ChevronDown, FolderOpen, Globe } from 'lucide-react';
+import { useProject } from '../../contexts/ProjectContext';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export function ProjectSelector() {
+    const { selectedProject, projects, loading, selectProject, clearProject } = useProject();
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const currentProject = projects.find(p => p.name === selectedProject);
+
+    return (
+        <div className="relative">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors min-w-[200px]"
+            >
+                {selectedProject ? (
+                    <>
+                        <FolderOpen size={18} className="text-primary-600 dark:text-primary-400" />
+                        <div className="flex-1 text-left">
+                            <div className="text-sm font-medium text-slate-900 dark:text-white">
+                                {currentProject?.name || selectedProject}
+                            </div>
+                            {currentProject?.description && (
+                                <div className="text-xs text-slate-500 dark:text-slate-400 truncate max-w-[150px]">
+                                    {currentProject.description}
+                                </div>
+                            )}
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        <Globe size={18} className="text-slate-400" />
+                        <span className="flex-1 text-left text-sm font-medium text-slate-700 dark:text-slate-300">
+                            All Projects
+                        </span>
+                    </>
+                )}
+                <ChevronDown
+                    size={16}
+                    className={`text-slate-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+                />
+            </button>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <>
+                        {/* Backdrop */}
+                        <div
+                            className="fixed inset-0 z-10"
+                            onClick={() => setIsOpen(false)}
+                        />
+
+                        {/* Dropdown */}
+                        <motion.div
+                            initial={{ opacity: 0, y: -10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -10 }}
+                            transition={{ duration: 0.15 }}
+                            className="absolute top-full mt-2 left-0 w-full min-w-[280px] bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-xl z-20 max-h-[400px] overflow-y-auto"
+                        >
+                            {/* All Projects Option */}
+                            <button
+                                onClick={() => {
+                                    clearProject();
+                                    setIsOpen(false);
+                                }}
+                                className={`w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors ${!selectedProject ? 'bg-primary-50 dark:bg-primary-900/20' : ''
+                                    }`}
+                            >
+                                <Globe size={18} className="text-slate-400" />
+                                <div className="flex-1 text-left">
+                                    <div className="text-sm font-medium text-slate-900 dark:text-white">
+                                        All Projects
+                                    </div>
+                                    <div className="text-xs text-slate-500 dark:text-slate-400">
+                                        View data from all projects
+                                    </div>
+                                </div>
+                                {!selectedProject && (
+                                    <div className="w-2 h-2 rounded-full bg-primary-600" />
+                                )}
+                            </button>
+
+                            <div className="border-t border-slate-200 dark:border-slate-700" />
+
+                            {/* Project List */}
+                            {loading ? (
+                                <div className="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
+                                    Loading projects...
+                                </div>
+                            ) : projects.length === 0 ? (
+                                <div className="px-4 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
+                                    No projects yet
+                                </div>
+                            ) : (
+                                projects.map(project => (
+                                    <button
+                                        key={project.name}
+                                        onClick={() => {
+                                            selectProject(project.name);
+                                            setIsOpen(false);
+                                        }}
+                                        className={`w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors ${selectedProject === project.name ? 'bg-primary-50 dark:bg-primary-900/20' : ''
+                                            }`}
+                                    >
+                                        <FolderOpen
+                                            size={18}
+                                            className={selectedProject === project.name ? 'text-primary-600 dark:text-primary-400' : 'text-slate-400'}
+                                        />
+                                        <div className="flex-1 text-left">
+                                            <div className="text-sm font-medium text-slate-900 dark:text-white">
+                                                {project.name}
+                                            </div>
+                                            {project.description && (
+                                                <div className="text-xs text-slate-500 dark:text-slate-400">
+                                                    {project.description}
+                                                </div>
+                                            )}
+                                        </div>
+                                        {selectedProject === project.name && (
+                                            <div className="w-2 h-2 rounded-full bg-primary-600" />
+                                        )}
+                                    </button>
+                                ))
+                            )}
+                        </motion.div>
+                    </>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}

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

@@ -0,0 +1,79 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const ProjectContext = createContext();
+
+export function ProjectProvider({ children }) {
+    const [selectedProject, setSelectedProject] = useState(() => {
+        // Check localStorage first
+        const saved = localStorage.getItem('flowyml-selected-project');
+        return saved || null; // null means "All Projects"
+    });
+
+    const [projects, setProjects] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        // Fetch available projects
+        fetch('/api/projects/')
+            .then(res => res.json())
+            .then(data => {
+                setProjects(data || []);
+                setLoading(false);
+            })
+            .catch(err => {
+                console.error('Failed to fetch projects:', err);
+                setLoading(false);
+            });
+    }, []);
+
+    useEffect(() => {
+        // Save to localStorage
+        if (selectedProject) {
+            localStorage.setItem('flowyml-selected-project', selectedProject);
+        } else {
+            localStorage.removeItem('flowyml-selected-project');
+        }
+    }, [selectedProject]);
+
+    const selectProject = (projectName) => {
+        setSelectedProject(projectName);
+    };
+
+    const clearProject = () => {
+        setSelectedProject(null);
+    };
+
+    const refreshProjects = async () => {
+        setLoading(true);
+        try {
+            const res = await fetch('/api/projects/');
+            const data = await res.json();
+            setProjects(data || []);
+        } catch (err) {
+            console.error('Failed to refresh projects:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <ProjectContext.Provider value={{
+            selectedProject,
+            projects,
+            loading,
+            selectProject,
+            clearProject,
+            refreshProjects
+        }}>
+            {children}
+        </ProjectContext.Provider>
+    );
+}
+
+export function useProject() {
+    const context = useContext(ProjectContext);
+    if (!context) {
+        throw new Error('useProject must be used within ProjectProvider');
+    }
+    return context;
+}

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

@@ -0,0 +1,54 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+    const [theme, setTheme] = useState(() => {
+        // Check localStorage first
+        const savedTheme = localStorage.getItem('flowyml-theme');
+        if (savedTheme) {
+            // Apply immediately before React renders
+            document.documentElement.classList.remove('light', 'dark');
+            document.documentElement.classList.add(savedTheme);
+            return savedTheme;
+        }
+
+        // Check system preference
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.remove('light');
+            document.documentElement.classList.add('dark');
+            return 'dark';
+        }
+
+        document.documentElement.classList.remove('dark');
+        document.documentElement.classList.add('light');
+        return 'light';
+    });
+
+    useEffect(() => {
+        // Apply theme to document
+        document.documentElement.classList.remove('light', 'dark');
+        document.documentElement.classList.add(theme);
+
+        // Save to localStorage
+        localStorage.setItem('flowyml-theme', theme);
+    }, [theme]);
+
+    const toggleTheme = () => {
+        setTheme(prev => prev === 'light' ? 'dark' : 'light');
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within ThemeProvider');
+    }
+    return context;
+}

flowyml/ui/frontend/src/index.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+body {
+  @apply bg-slate-50 text-slate-900;
+}

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

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from '../components/sidebar/Sidebar';
+import { Header } from '../components/header/Header';
+
+export function MainLayout() {
+    const [collapsed, setCollapsed] = useState(false);
+
+    return (
+        <div className="flex h-screen bg-slate-50 dark:bg-slate-900 overflow-hidden">
+            <Sidebar collapsed={collapsed} setCollapsed={setCollapsed} />
+
+            <div className="flex-1 flex flex-col min-w-0">
+                <Header />
+                <main className="flex-1 overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700">
+                    <div className="max-w-7xl mx-auto w-full">
+                        <Outlet />
+                    </div>
+                </main>
+            </div>
+        </div>
+    );
+}

flowyml/ui/frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+)

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

@@ -0,0 +1,39 @@
+import { createBrowserRouter } from 'react-router-dom';
+import { MainLayout } from '../layouts/MainLayout';
+import { Dashboard } from '../app/dashboard/page';
+import { Pipelines } from '../app/pipelines/page';
+import { Runs } from '../app/runs/page';
+import { RunDetails } from '../app/runs/[runId]/page';
+import { Assets } from '../app/assets/page';
+import { Experiments } from '../app/experiments/page';
+import { ExperimentDetails } from '../app/experiments/[experimentId]/page';
+import { Traces } from '../app/traces/page';
+import { Projects } from '../app/projects/page';
+import { Schedules } from '../app/schedules/page';
+import { Leaderboard } from '../app/leaderboard/page';
+import { Plugins } from '../app/plugins/page';
+import { Settings } from '../app/settings/page';
+import { TokenManagement } from '../app/tokens/page';
+
+export const router = createBrowserRouter([
+    {
+        path: '/',
+        element: <MainLayout />,
+        children: [
+            { index: true, element: <Dashboard /> },
+            { path: 'pipelines', element: <Pipelines /> },
+            { path: 'runs', element: <Runs /> },
+            { path: 'runs/:runId', element: <RunDetails /> },
+            { path: 'assets', element: <Assets /> },
+            { path: 'experiments', element: <Experiments /> },
+            { path: 'experiments/:experimentId', element: <ExperimentDetails /> },
+            { path: 'traces', element: <Traces /> },
+            { path: 'projects', element: <Projects /> },
+            { path: 'schedules', element: <Schedules /> },
+            { path: 'leaderboard', element: <Leaderboard /> },
+            { path: 'plugins', element: <Plugins /> },
+            { path: 'settings', element: <Settings /> },
+            { path: 'tokens', element: <TokenManagement /> },
+        ],
+    },
+]);

flowyml/ui/frontend/src/services/pluginService.js

@@ -0,0 +1,90 @@
+/**
+ * Service for managing plugins and integrations.
+ * Communicates with the backend API for plugin operations.
+ */
+
+const API_BASE_URL = '/api';
+
+class PluginService {
+    async getAvailablePlugins() {
+        try {
+            const response = await fetch(`${API_BASE_URL}/plugins/available`);
+            if (!response.ok) throw new Error('Failed to fetch available plugins');
+            return await response.json();
+        } catch (error) {
+            console.error('Error fetching available plugins:', error);
+            return [];
+        }
+    }
+
+    async getInstalledPlugins() {
+        try {
+            const response = await fetch(`${API_BASE_URL}/plugins/installed`);
+            if (!response.ok) throw new Error('Failed to fetch installed plugins');
+            return await response.json();
+        } catch (error) {
+            console.error('Error fetching installed plugins:', error);
+            return [];
+        }
+    }
+
+    async installPlugin(pluginId) {
+        try {
+            const response = await fetch(`${API_BASE_URL}/plugins/install`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ plugin_id: pluginId })
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.detail || 'Installation failed');
+            }
+
+            return await response.json();
+        } catch (error) {
+            console.error('Error installing plugin:', error);
+            throw error;
+        }
+    }
+
+    async uninstallPlugin(pluginId) {
+        try {
+            const response = await fetch(`${API_BASE_URL}/plugins/uninstall/${pluginId}`, {
+                method: 'POST'
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.detail || 'Uninstall failed');
+            }
+
+            return await response.json();
+        } catch (error) {
+            console.error('Error uninstalling plugin:', error);
+            throw error;
+        }
+    }
+
+    async importZenMLStack(stackName) {
+        try {
+            const response = await fetch(`${API_BASE_URL}/plugins/import-stack`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ stack_name: stackName })
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.detail || 'Import failed');
+            }
+
+            return await response.json();
+        } catch (error) {
+            console.error('Error importing stack:', error);
+            throw error;
+        }
+    }
+}
+
+export const pluginService = new PluginService();

flowyml/ui/frontend/src/utils/api.js

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+
+// Cache for config
+let configCache = null;
+
+export const getConfig = async () => {
+  if (configCache) return configCache;
+  try {
+    const res = await fetch('/api/config');
+    configCache = await res.json();
+    return configCache;
+  } catch (err) {
+    console.error('Failed to fetch config:', err);
+    return { execution_mode: 'local' };
+  }
+};
+
+export const getBaseUrl = async () => {
+  const config = await getConfig();
+  if (config.execution_mode === 'remote' && config.remote_server_url) {
+    return config.remote_server_url;
+  }
+  return '';
+};
+
+export const fetchApi = async (endpoint, options = {}) => {
+  const baseUrl = await getBaseUrl();
+  // Ensure endpoint starts with /
+  const path = endpoint.startsWith('/') ? endpoint : `/${endpoint}`;
+  const url = `${baseUrl}${path}`;
+
+  return fetch(url, options);
+};
+
+export const useConfig = () => {
+  const [config, setConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getConfig().then(cfg => {
+      setConfig(cfg);
+      setLoading(false);
+    });
+  }, []);
+
+  return { config, loading };
+};

flowyml/ui/frontend/src/utils/cn.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+    return twMerge(clsx(inputs))
+}