flowyml 1.1.0__py3-none-any.whl

flowyml/ui/frontend/src/components/header/Header.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useLocation, Link } from 'react-router-dom';
+import { Sun, Moon, ChevronRight, Home } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { ProjectSelector } from '../ui/ProjectSelector';
+
+export function Header() {
+    const { theme, toggleTheme } = useTheme();
+    const location = useLocation();
+
+    // Generate breadcrumbs from path
+    const pathnames = location.pathname.split('/').filter((x) => x);
+
+    return (
+        <header className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-6 py-4 flex items-center justify-between shadow-sm z-10">
+            <div className="flex items-center gap-4 flex-1">
+                {/* Breadcrumbs */}
+                <nav className="flex items-center text-sm text-slate-500 dark:text-slate-400">
+                    <Link to="/" className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
+                        <Home size={16} />
+                    </Link>
+                    {pathnames.length > 0 && (
+                        <ChevronRight size={14} className="mx-2 text-slate-300 dark:text-slate-600" />
+                    )}
+                    {pathnames.map((name, index) => {
+                        const routeTo = `/${pathnames.slice(0, index + 1).join('/')}`;
+                        const isLast = index === pathnames.length - 1;
+                        const formattedName = name.charAt(0).toUpperCase() + name.slice(1).replace(/-/g, ' ');
+
+                        return (
+                            <React.Fragment key={name}>
+                                {isLast ? (
+                                    <span className="font-medium text-slate-900 dark:text-white">
+                                        {formattedName}
+                                    </span>
+                                ) : (
+                                    <Link
+                                        to={routeTo}
+                                        className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+                                    >
+                                        {formattedName}
+                                    </Link>
+                                )}
+                                {!isLast && (
+                                    <ChevronRight size={14} className="mx-2 text-slate-300 dark:text-slate-600" />
+                                )}
+                            </React.Fragment>
+                        );
+                    })}
+                </nav>
+            </div>
+
+            <div className="flex items-center gap-4">
+                <ProjectSelector />
+
+                <div className="h-6 w-px bg-slate-200 dark:bg-slate-700 mx-2" />
+
+                <button
+                    onClick={toggleTheme}
+                    className="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors text-slate-500 hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
+                    aria-label="Toggle theme"
+                >
+                    {theme === 'dark' ? (
+                        <Sun size={20} />
+                    ) : (
+                        <Moon size={20} />
+                    )}
+                </button>
+            </div>
+        </header>
+    );
+}

flowyml/ui/frontend/src/components/plugins/AddPluginDialog.jsx

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { Plus, X, Package, Link as LinkIcon } from 'lucide-react';
+import { Button } from '../ui/Button';
+
+export function AddPluginDialog({ isOpen, onClose, onAdd }) {
+    const [method, setMethod] = useState('package'); // 'package' or 'url'
+    const [packageName, setPackageName] = useState('');
+    const [url, setUrl] = useState('');
+
+    const handleAdd = () => {
+        if (method === 'package' && packageName) {
+            onAdd({ type: 'package', value: packageName });
+            setPackageName('');
+            onClose();
+        } else if (method === 'url' && url) {
+            onAdd({ type: 'url', value: url });
+            setUrl('');
+            onClose();
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
+            <div
+                className="bg-white dark:bg-slate-800 rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Add Plugin</h3>
+                    <button
+                        onClick={onClose}
+                        className="p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
+                    >
+                        <X size={20} className="text-slate-500" />
+                    </button>
+                </div>
+
+                {/* Method Selector */}
+                <div className="flex gap-2 mb-4 bg-slate-100 dark:bg-slate-900 p-1 rounded-lg">
+                    <button
+                        onClick={() => setMethod('package')}
+                        className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-all ${method === 'package'
+                                ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
+                                : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'
+                            }`}
+                    >
+                        <div className="flex items-center justify-center gap-2">
+                            <Package size={16} />
+                            Package Name
+                        </div>
+                    </button>
+                    <button
+                        onClick={() => setMethod('url')}
+                        className={`flex-1 px-4 py-2 rounded-md text-sm font-medium transition-all ${method === 'url'
+                                ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
+                                : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'
+                            }`}
+                    >
+                        <div className="flex items-center justify-center gap-2">
+                            <LinkIcon size={16} />
+                            URL/Git
+                        </div>
+                    </button>
+                </div>
+
+                {/* Input Field */}
+                <div className="mb-4">
+                    {method === 'package' ? (
+                        <div>
+                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                                Package Name
+                            </label>
+                            <input
+                                type="text"
+                                placeholder="e.g., zenml-kubernetes"
+                                value={packageName}
+                                onChange={(e) => setPackageName(e.target.value)}
+                                className="w-full px-3 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"
+                            />
+                            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                                Install from PyPI by package name
+                            </p>
+                        </div>
+                    ) : (
+                        <div>
+                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                                URL
+                            </label>
+                            <input
+                                type="text"
+                                placeholder="e.g., git+https://github.com/..."
+                                value={url}
+                                onChange={(e) => setUrl(e.target.value)}
+                                className="w-full px-3 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"
+                            />
+                            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                                Install from Git repository or URL
+                            </p>
+                        </div>
+                    )}
+                </div>
+
+                {/* Actions */}
+                <div className="flex gap-2">
+                    <Button variant="outline" onClick={onClose} className="flex-1">
+                        Cancel
+                    </Button>
+                    <Button
+                        onClick={handleAdd}
+                        disabled={method === 'package' ? !packageName : !url}
+                        className="flex-1"
+                    >
+                        Install
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

flowyml/ui/frontend/src/components/plugins/InstalledPlugins.jsx

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import { Trash2, Settings, RefreshCw, Loader2 } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { Badge } from '../ui/Badge';
+import { pluginService } from '../../services/pluginService';
+
+export function InstalledPlugins() {
+    const [plugins, setPlugins] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [uninstalling, setUninstalling] = useState(null);
+    const [refreshing, setRefreshing] = useState(false);
+
+    useEffect(() => {
+        loadPlugins();
+    }, []);
+
+    const loadPlugins = async () => {
+        try {
+            setLoading(true);
+            const data = await pluginService.getInstalledPlugins();
+            setPlugins(data);
+        } catch (error) {
+            console.error('Failed to load installed plugins:', error);
+        } finally {
+            setLoading(false);
+            setRefreshing(false);
+        }
+    };
+
+    const handleRefresh = async () => {
+        setRefreshing(true);
+        await loadPlugins();
+    };
+
+    const handleUninstall = async (id) => {
+        if (!confirm('Are you sure you want to uninstall this plugin?')) return;
+
+        setUninstalling(id);
+        try {
+            await pluginService.uninstallPlugin(id);
+            setPlugins(prev => prev.filter(p => p.id !== id));
+        } catch (error) {
+            console.error('Uninstall failed:', error);
+            alert(`Uninstall failed: ${error.message}`);
+        } finally {
+            setUninstalling(null);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center py-12">
+                <Loader2 className="animate-spin text-primary-500" size={32} />
+            </div>
+        );
+    }
+
+    if (plugins.length === 0) {
+        return (
+            <div className="text-center py-12 text-slate-500 dark:text-slate-400">
+                <p>No plugins installed yet.</p>
+                <p className="text-sm mt-2">Install plugins from the Browser tab</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-4">
+            {/* Refresh Button */}
+            <div className="flex justify-end">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleRefresh}
+                    disabled={refreshing}
+                    className="flex items-center gap-2"
+                >
+                    <RefreshCw size={14} className={refreshing ? 'animate-spin' : ''} />
+                    Refresh
+                </Button>
+            </div>
+
+            {plugins.map((plugin) => (
+                <div
+                    key={plugin.id}
+                    className="flex items-center justify-between p-4 bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl"
+                >
+                    <div className="flex items-start gap-4">
+                        <div className="p-2 bg-primary-50 dark:bg-primary-900/20 rounded-lg">
+                            <Settings className="text-primary-500" size={24} />
+                        </div>
+                        <div>
+                            <div className="flex items-center gap-2">
+                                <h3 className="font-semibold text-slate-900 dark:text-white">{plugin.name}</h3>
+                                <Badge variant="outline" className="text-xs">v{plugin.version}</Badge>
+                                <Badge variant="success" className="text-xs">Active</Badge>
+                            </div>
+                            <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
+                                {plugin.description}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
+                            title="Uninstall"
+                            onClick={() => handleUninstall(plugin.id)}
+                            disabled={uninstalling === plugin.id}
+                        >
+                            {uninstalling === plugin.id ? (
+                                <Loader2 size={16} className="animate-spin" />
+                            ) : (
+                                <Trash2 size={16} />
+                            )}
+                        </Button>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}

flowyml/ui/frontend/src/components/plugins/PluginBrowser.jsx

@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from 'react';
+import { Search, Download, Star, CheckCircle, Loader2, Plus } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { Badge } from '../ui/Badge';
+import { pluginService } from '../../services/pluginService';
+import { AddPluginDialog } from './AddPluginDialog';
+
+export function PluginBrowser() {
+    const [search, setSearch] = useState('');
+    const [plugins, setPlugins] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [installing, setInstalling] = useState(null);
+    const [showAddDialog, setShowAddDialog] = useState(false);
+
+    useEffect(() => {
+        loadPlugins();
+    }, []);
+
+    const loadPlugins = async () => {
+        try {
+            setLoading(true);
+            const data = await pluginService.getAvailablePlugins();
+            setPlugins(data);
+        } catch (error) {
+            console.error('Failed to load plugins:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const filteredPlugins = plugins.filter(p =>
+        p.name.toLowerCase().includes(search.toLowerCase()) ||
+        p.description.toLowerCase().includes(search.toLowerCase())
+    );
+
+    const handleInstall = async (id) => {
+        setInstalling(id);
+        try {
+            await pluginService.installPlugin(id);
+            // Update local state to show installed
+            setPlugins(prev => prev.map(p =>
+                p.id === id ? { ...p, installed: true } : p
+            ));
+        } catch (error) {
+            console.error('Install failed:', error);
+            alert(`Installation failed: ${error.message}`);
+        } finally {
+            setInstalling(null);
+        }
+    };
+
+    const handleManualAdd = async ({ type, value }) => {
+        setInstalling('manual');
+        try {
+            await pluginService.installPlugin(value);
+            // Reload the list to show the new plugin
+            await loadPlugins();
+            alert(`Successfully installed ${value}`);
+        } catch (error) {
+            console.error('Install failed:', error);
+            alert(`Installation failed: ${error.message}`);
+        } finally {
+            setInstalling(null);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center py-12">
+                <Loader2 className="animate-spin text-primary-500" size={32} />
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <div className="space-y-6">
+                <div className="flex gap-4">
+                    <div className="relative flex-1">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
+                        <input
+                            type="text"
+                            placeholder="Search plugins..."
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            className="w-full pl-10 pr-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                        />
+                    </div>
+                    <Button
+                        onClick={() => setShowAddDialog(true)}
+                        className="flex items-center gap-2"
+                    >
+                        <Plus size={18} />
+                        Add Plugin
+                    </Button>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {filteredPlugins.map((plugin) => (
+                        <div
+                            key={plugin.id}
+                            className="p-4 border border-slate-200 dark:border-slate-700 rounded-xl hover:border-primary-500/50 dark:hover:border-primary-500/50 transition-colors bg-white dark:bg-slate-800/50"
+                        >
+                            <div className="flex justify-between items-start mb-2">
+                                <div>
+                                    <h3 className="font-semibold text-slate-900 dark:text-white">{plugin.name}</h3>
+                                    <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 mt-1">
+                                        <span>v{plugin.version}</span>
+                                        <span>•</span>
+                                        <span>by {plugin.author}</span>
+                                    </div>
+                                </div>
+                                {plugin.installed ? (
+                                    <Badge variant="success" className="flex items-center gap-1">
+                                        <CheckCircle size={12} /> Installed
+                                    </Badge>
+                                ) : (
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
+                                        onClick={() => handleInstall(plugin.id)}
+                                        disabled={installing === plugin.id || installing === 'manual'}
+                                    >
+                                        {installing === plugin.id ? (
+                                            <>
+                                                <Loader2 size={12} className="animate-spin mr-1" />
+                                                Installing...
+                                            </>
+                                        ) : 'Install'}
+                                    </Button>
+                                )}
+                            </div>
+
+                            <p className="text-sm text-slate-600 dark:text-slate-300 mb-4 line-clamp-2">
+                                {plugin.description}
+                            </p>
+
+                            <div className="flex items-center justify-between mt-auto">
+                                <div className="flex gap-2">
+                                    {plugin.tags.map(tag => (
+                                        <span key={tag} className="px-2 py-0.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs rounded-full">
+                                            {tag}
+                                        </span>
+                                    ))}
+                                </div>
+                                <div className="flex items-center gap-3 text-xs text-slate-400">
+                                    <div className="flex items-center gap-1">
+                                        <Download size={12} /> {plugin.downloads}
+                                    </div>
+                                    <div className="flex items-center gap-1">
+                                        <Star size={12} /> {plugin.stars}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <AddPluginDialog
+                isOpen={showAddDialog}
+                onClose={() => setShowAddDialog(false)}
+                onAdd={handleManualAdd}
+            />
+        </>
+    );
+}

flowyml/ui/frontend/src/components/plugins/PluginManager.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Package, Download, RefreshCw, Server } from 'lucide-react';
+import { Card, CardHeader, CardTitle, CardContent } from '../ui/Card';
+import { PluginBrowser } from './PluginBrowser';
+import { InstalledPlugins } from './InstalledPlugins';
+import { ZenMLIntegration } from './ZenMLIntegration';
+
+export function PluginManager() {
+    const [activeTab, setActiveTab] = useState('browser');
+
+    const tabs = [
+        { id: 'browser', label: 'Plugin Browser', icon: Package },
+        { id: 'installed', label: 'Installed', icon: Download },
+        { id: 'zenml', label: 'ZenML Integration', icon: Server },
+    ];
+
+    return (
+        <Card className="overflow-hidden">
+            <CardHeader className="border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 pb-0">
+                <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-2">
+                        <Package size={20} className="text-primary-500" />
+                        <CardTitle>Plugins & Integrations</CardTitle>
+                    </div>
+                </div>
+
+                <div className="flex gap-6">
+                    {tabs.map((tab) => {
+                        const Icon = tab.icon;
+                        const isActive = activeTab === tab.id;
+                        return (
+                            <button
+                                key={tab.id}
+                                onClick={() => setActiveTab(tab.id)}
+                                className={`
+                                    flex items-center gap-2 pb-3 text-sm font-medium transition-all relative
+                                    ${isActive
+                                        ? 'text-primary-600 dark:text-primary-400'
+                                        : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
+                                    }
+                                `}
+                            >
+                                <Icon size={16} />
+                                {tab.label}
+                                {isActive && (
+                                    <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-500 rounded-t-full" />
+                                )}
+                            </button>
+                        );
+                    })}
+                </div>
+            </CardHeader>
+            <CardContent className="p-6">
+                {activeTab === 'browser' && <PluginBrowser />}
+                {activeTab === 'installed' && <InstalledPlugins />}
+                {activeTab === 'zenml' && <ZenMLIntegration />}
+            </CardContent>
+        </Card>
+    );
+}