flowyml 1.1.0__py3-none-any.whl

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

@@ -0,0 +1,246 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../../utils/api';
+import { Activity, Zap, MessageSquare, Clock, DollarSign } from 'lucide-react';
+import { useProject } from '../../contexts/ProjectContext';
+
+export function Traces() {
+  const [traces, setTraces] = useState([]);
+  const [selectedTrace, setSelectedTrace] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [filterType, setFilterType] = useState('all');
+  const { selectedProject } = useProject();
+
+  useEffect(() => {
+    fetchTraces();
+  }, [filterType, selectedProject]);
+
+  const fetchTraces = async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (filterType !== 'all') {
+        params.append('event_type', filterType);
+      }
+      if (selectedProject) {
+        params.append('project', selectedProject);
+      }
+
+      const response = await fetchApi(`/api/traces?${params}`);
+      const data = await response.json();
+      setTraces(data);
+    } catch (error) {
+      console.error('Failed to fetch traces:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchTraceDetails = async (traceId) => {
+    try {
+      const response = await fetchApi(`/api/traces/${traceId}`);
+      const data = await response.json();
+      setSelectedTrace(data);
+    } catch (error) {
+      console.error('Failed to fetch trace details:', error);
+    }
+  };
+
+  const formatDuration = (duration) => {
+    if (!duration) return 'N/A';
+    return `${(duration * 1000).toFixed(0)}ms`;
+  };
+
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'success': return 'text-green-400';
+      case 'error': return 'text-red-400';
+      case 'running': return 'text-yellow-400';
+      default: return 'text-gray-400';
+    }
+  };
+
+  const getEventTypeIcon = (type) => {
+    switch (type) {
+      case 'llm': return <MessageSquare className="w-4 h-4" />;
+      case 'tool': return <Zap className="w-4 h-4" />;
+      default: return <Activity className="w-4 h-4" />;
+    }
+  };
+
+  const TraceTree = ({ events, level = 0 }) => {
+    if (!events) return null;
+
+    return (
+      <div className={`pl-${level * 4}`}>
+        {events.map((event, idx) => (
+          <div key={idx} className="mb-2">
+            <div className="flex items-center gap-2 p-2 bg-gray-800/50 rounded border border-gray-700/50 hover:border-blue-500/50 transition-colors">
+              <div className="flex items-center gap-2 flex-1">
+                {getEventTypeIcon(event.event_type)}
+                <span className="font-medium">{event.name}</span>
+                <span className={`text-sm ${getStatusColor(event.status)}`}>
+                  {event.status}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-4 text-sm text-gray-400">
+                {event.duration && (
+                  <div className="flex items-center gap-1">
+                    <Clock className="w-3 h-3" />
+                    {formatDuration(event.duration)}
+                  </div>
+                )}
+
+                {event.total_tokens > 0 && (
+                  <div className="flex items-center gap-1">
+                    <Activity className="w-3 h-3" />
+                    {event.total_tokens} tokens
+                  </div>
+                )}
+
+                {event.cost > 0 && (
+                  <div className="flex items-center gap-1">
+                    <DollarSign className="w-3 h-3" />
+                    ${event.cost.toFixed(4)}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {event.children && event.children.length > 0 && (
+              <div className="ml-6 mt-2 border-l-2 border-gray-700/50 pl-2">
+                <TraceTree events={event.children} level={level + 1} />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">🔍 LLM Traces</h1>
+
+        <div className="flex gap-2">
+          <select
+            value={filterType}
+            onChange={(e) => setFilterType(e.target.value)}
+            className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg"
+          >
+            <option value="all">All Types</option>
+            <option value="llm">LLM Calls</option>
+            <option value="tool">Tool Calls</option>
+            <option value="chain">Chains</option>
+            <option value="agent">Agents</option>
+          </select>
+
+          <button
+            onClick={fetchTraces}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="text-center py-12">
+          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+          <p className="mt-4 text-gray-400">Loading traces...</p>
+        </div>
+      ) : traces.length === 0 ? (
+        <div className="text-center py-12 bg-gray-800/30 rounded-lg border-2 border-dashed border-gray-700">
+          <Activity className="w-12 h-12 mx-auto text-gray-600 mb-4" />
+          <p className="text-gray-400">No traces found</p>
+          <p className="text-sm text-gray-500 mt-2">
+            Use @trace_llm decorator to track LLM calls
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {traces.map((trace) => {
+            // Group by trace_id
+            const traceId = trace.trace_id;
+
+            return (
+              <div
+                key={trace.event_id}
+                className="bg-gray-800/50 rounded-lg border border-gray-700/50 p-4 hover:border-blue-500/50 transition-all cursor-pointer"
+                onClick={() => fetchTraceDetails(traceId)}
+              >
+                <div className="flex items-start justify-between mb-3">
+                  <div className="flex items-center gap-3">
+                    {getEventTypeIcon(trace.event_type)}
+                    <div>
+                      <h3 className="font-semibold text-lg">{trace.name}</h3>
+                      <p className="text-sm text-gray-400">
+                        Trace ID: {traceId.slice(0, 8)}...
+                      </p>
+                    </div>
+                  </div>
+
+                  <span className={`px-3 py-1 rounded-full text-sm ${getStatusColor(trace.status)}`}>
+                    {trace.status}
+                  </span>
+                </div>
+
+                <div className="grid grid-cols-4 gap-4 text-sm">
+                  <div>
+                    <span className="text-gray-500">Duration:</span>
+                    <span className="ml-2 text-gray-300">{formatDuration(trace.duration)}</span>
+                  </div>
+
+                  {trace.model && (
+                    <div>
+                      <span className="text-gray-500">Model:</span>
+                      <span className="ml-2 text-gray-300">{trace.model}</span>
+                    </div>
+                  )}
+
+                  {trace.total_tokens > 0 && (
+                    <div>
+                      <span className="text-gray-500">Tokens:</span>
+                      <span className="ml-2 text-gray-300">
+                        {trace.total_tokens} ({trace.prompt_tokens}/{trace.completion_tokens})
+                      </span>
+                    </div>
+                  )}
+
+                  {trace.cost > 0 && (
+                    <div>
+                      <span className="text-gray-500">Cost:</span>
+                      <span className="ml-2 text-gray-300">${trace.cost.toFixed(4)}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Trace Details Modal */}
+      {selectedTrace && (
+        <div className="fixed inset-0 bg-black/80 flex items-center justify-center p-6 z-50">
+          <div className="bg-gray-900 rounded-lg max-w-4xl w-full max-h-[80vh] overflow-auto border border-gray-700">
+            <div className="sticky top-0 bg-gray-900 border-b border-gray-700 p-4 flex justify-between items-center">
+              <h2 className="text-xl font-bold">Trace Details</h2>
+              <button
+                onClick={() => setSelectedTrace(null)}
+                className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg"
+              >
+                Close
+              </button>
+            </div>
+
+            <div className="p-6">
+              <TraceTree events={selectedTrace} />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { LayoutDashboard, PlayCircle, FolderKanban, FlaskConical, Database, Settings, Trophy, Calendar, MessageSquare, Moon, Sun, Key, Package } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { ProjectSelector } from './ui/ProjectSelector';
+
+function NavLink({ to, icon, label }) {
+    const location = useLocation();
+    const isActive = location.pathname === to;
+
+    return (
+        <Link
+            to={to}
+            className={`flex items-center gap-3 px-4 py-2.5 rounded-lg transition-all duration-200 group ${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'
+                }`}
+        >
+            <span className={`transition-colors ${isActive ? 'text-primary-600 dark:text-primary-400' : 'text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300'
+                }`}>
+                {icon}
+            </span>
+            <span className="text-sm">{label}</span>
+        </Link>
+    );
+}
+
+export function Layout({ children }) {
+    const { theme, toggleTheme } = useTheme();
+
+    const navLinks = [
+        { 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' },
+    ];
+
+    return (
+        <div className="flex h-screen bg-slate-50 dark:bg-slate-900">
+            {/* Sidebar */}
+            <aside className="w-64 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col shadow-sm z-10">
+                <div className="p-6 border-b border-slate-100 dark:border-slate-700 flex items-center gap-3">
+                    <div className="w-8 h-8 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>
+                    <h1 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">flowyml</h1>
+                </div>
+
+                <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
+                    <div className="px-4 py-2 text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">
+                        Platform
+                    </div>
+                    {navLinks.map((link) => (
+                        <NavLink
+                            key={link.path}
+                            to={link.path}
+                            icon={<link.icon size={18} />}
+                            label={link.label}
+                        />
+                    ))}
+                    <div className="px-4 py-2 text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mt-4">
+                        Settings
+                    </div>
+                    <NavLink to="/plugins" icon={<Package size={18} />} label="Plugins" />
+                    <NavLink to="/tokens" icon={<Key size={18} />} label="API Tokens" />
+                    <NavLink to="/settings" icon={<Settings size={18} />} label="Settings" />
+                </nav>
+
+                <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">
+                        <p className="text-xs font-medium text-slate-500 dark:text-slate-400">flowyml v0.1.0</p>
+                        <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">Local Environment</p>
+                    </div>
+                </div>
+            </aside>
+
+            {/* Main Content */}
+            <main className="flex-1 flex flex-col overflow-hidden">
+                {/* Header with Project Selector */}
+                <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">
+                    <ProjectSelector />
+
+                    <button
+                        onClick={toggleTheme}
+                        className="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
+                        aria-label="Toggle theme"
+                    >
+                        {theme === 'dark' ? (
+                            <Sun size={20} className="text-slate-400" />
+                        ) : (
+                            <Moon size={20} className="text-slate-400" />
+                        )}
+                    </button>
+                </header>
+
+                {/* Page Content */}
+                <div className="flex-1 overflow-y-auto p-6">
+                    {children}
+                </div>
+            </main>
+        </div>
+    );
+}

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

@@ -0,0 +1,295 @@
+import React, { useCallback, useMemo, useEffect } from 'react';
+import ReactFlow, {
+    Background,
+    Controls,
+    MiniMap,
+    useNodesState,
+    useEdgesState,
+    MarkerType,
+    Handle,
+    Position
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import { CheckCircle, XCircle, Clock, Loader, Database, Box, BarChart2, FileText, Layers } from 'lucide-react';
+import dagre from 'dagre';
+
+const stepNodeWidth = 240;
+const stepNodeHeight = 100;
+const artifactNodeWidth = 180;
+const artifactNodeHeight = 50;
+
+const getLayoutedElements = (nodes, edges, direction = 'TB') => {
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+    const isHorizontal = direction === 'LR';
+    dagreGraph.setGraph({ rankdir: direction, nodesep: 80, ranksep: 100 });
+
+    nodes.forEach((node) => {
+        const width = node.type === 'artifact' ? artifactNodeWidth : stepNodeWidth;
+        const height = node.type === 'artifact' ? artifactNodeHeight : stepNodeHeight;
+        dagreGraph.setNode(node.id, { width, height });
+    });
+
+    edges.forEach((edge) => {
+        dagreGraph.setEdge(edge.source, edge.target);
+    });
+
+    dagre.layout(dagreGraph);
+
+    nodes.forEach((node) => {
+        const nodeWithPosition = dagreGraph.node(node.id);
+        node.targetPosition = isHorizontal ? 'left' : 'top';
+        node.sourcePosition = isHorizontal ? 'right' : 'bottom';
+
+        // Shift to center the node
+        const width = node.type === 'artifact' ? artifactNodeWidth : stepNodeWidth;
+        const height = node.type === 'artifact' ? artifactNodeHeight : stepNodeHeight;
+
+        node.position = {
+            x: nodeWithPosition.x - width / 2,
+            y: nodeWithPosition.y - height / 2,
+        };
+
+        return node;
+    });
+
+    return { nodes, edges };
+};
+
+export function PipelineGraph({ dag, steps, selectedStep, onStepSelect }) {
+    // Transform DAG data to ReactFlow format with Artifact Nodes
+    const { nodes: initialNodes, edges: initialEdges } = useMemo(() => {
+        if (!dag || !dag.nodes) return { nodes: [], edges: [] };
+
+        const nodes = [];
+        const edges = [];
+        const artifactIds = new Set();
+        const createdArtifacts = new Map(); // Map name -> id
+
+        // Helper to get or create artifact node
+        const getArtifactId = (name) => {
+            if (createdArtifacts.has(name)) return createdArtifacts.get(name);
+            const id = `artifact-${name}`;
+            if (!artifactIds.has(id)) {
+                nodes.push({
+                    id: id,
+                    type: 'artifact',
+                    data: { label: name }
+                });
+                artifactIds.add(id);
+                createdArtifacts.set(name, id);
+            }
+            return id;
+        };
+
+        // 1. Create Step Nodes and Connections
+        dag.nodes.forEach(node => {
+            const stepData = steps?.[node.id] || {};
+            const status = stepData.success ? 'success' : stepData.error ? 'failed' : stepData.running ? 'running' : 'pending';
+
+            nodes.push({
+                id: node.id,
+                type: 'step',
+                data: {
+                    label: node.name,
+                    status,
+                    duration: stepData.duration,
+                    cached: stepData.cached,
+                    selected: selectedStep === node.id
+                }
+            });
+
+            // Input Edges: Artifact -> Step
+            node.inputs?.forEach(inputName => {
+                const artifactId = getArtifactId(inputName);
+                edges.push({
+                    id: `e-${artifactId}-${node.id}`,
+                    source: artifactId,
+                    target: node.id,
+                    type: 'smoothstep',
+                    animated: true,
+                    style: { stroke: '#94a3b8', strokeWidth: 2 },
+                    markerEnd: { type: MarkerType.ArrowClosed, color: '#94a3b8' }
+                });
+            });
+
+            // Output Edges: Step -> Artifact
+            node.outputs?.forEach(outputName => {
+                const artifactId = getArtifactId(outputName);
+                edges.push({
+                    id: `e-${node.id}-${artifactId}`,
+                    source: node.id,
+                    target: artifactId,
+                    type: 'smoothstep',
+                    animated: true,
+                    style: { stroke: '#94a3b8', strokeWidth: 2 },
+                    markerEnd: { type: MarkerType.ArrowClosed, color: '#94a3b8' }
+                });
+            });
+        });
+
+        return { nodes, edges };
+    }, [dag, steps, selectedStep]);
+
+    const { nodes: layoutedNodes, edges: layoutedEdges } = useMemo(() => {
+        return getLayoutedElements(initialNodes, initialEdges, 'TB');
+    }, [initialNodes, initialEdges]);
+
+    const [nodes, setNodes, onNodesChange] = useNodesState(layoutedNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedEdges);
+
+    // Update nodes when selection changes or layout changes
+    useEffect(() => {
+        setNodes(layoutedNodes.map(node => {
+            if (node.type === 'step') {
+                return {
+                    ...node,
+                    data: {
+                        ...node.data,
+                        selected: selectedStep === node.id
+                    }
+                };
+            }
+            return node;
+        }));
+        setEdges(layoutedEdges);
+    }, [layoutedNodes, layoutedEdges, selectedStep, setNodes, setEdges]);
+
+    const onNodeClick = useCallback((event, node) => {
+        if (node.type === 'step' && onStepSelect) {
+            onStepSelect(node.id);
+        }
+    }, [onStepSelect]);
+
+    const nodeTypes = useMemo(() => ({
+        step: CustomStepNode,
+        artifact: CustomArtifactNode
+    }), []);
+
+    return (
+        <div className="w-full h-full bg-slate-50/50 rounded-xl border border-slate-200 overflow-hidden">
+            <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onNodeClick={onNodeClick}
+                nodeTypes={nodeTypes}
+                fitView
+                attributionPosition="bottom-left"
+                minZoom={0.2}
+                maxZoom={1.5}
+                defaultViewport={{ x: 0, y: 0, zoom: 0.8 }}
+                fitViewOptions={{ padding: 0.2 }}
+            >
+                <Background color="#e2e8f0" gap={20} size={1} />
+                <Controls className="bg-white border border-slate-200 shadow-sm rounded-lg" />
+                <MiniMap
+                    nodeColor={n => n.type === 'step' ? '#3b82f6' : '#cbd5e1'}
+                    maskColor="rgba(241, 245, 249, 0.7)"
+                    className="bg-white border border-slate-200 shadow-sm rounded-lg"
+                />
+            </ReactFlow>
+        </div>
+    );
+}
+
+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'
+        },
+        failed: {
+            icon: <XCircle size={18} />,
+            color: 'text-rose-600',
+            bg: 'bg-white',
+            border: 'border-rose-500',
+            ring: 'ring-rose-200',
+            shadow: 'shadow-rose-100'
+        },
+        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'
+        },
+        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'
+        }
+    };
+
+    const config = statusConfig[data.status] || statusConfig.pending;
+
+    return (
+        <div
+            className={`
+                relative px-4 py-3 rounded-lg border-2 transition-all duration-200
+                ${config.bg} ${config.border}
+                ${data.selected ? `ring-4 ${config.ring} shadow-lg` : `hover:shadow-md ${config.shadow}`}
+            `}
+            style={{ width: stepNodeWidth, height: stepNodeHeight }}
+        >
+            <Handle type="target" position={Position.Top} className="!bg-slate-400 !w-2 !h-2" />
+
+            <div className="flex flex-col h-full justify-between">
+                <div className="flex items-start gap-3">
+                    <div className={`p-1.5 rounded-md bg-slate-50 border border-slate-100 ${config.color}`}>
+                        {config.icon}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                        <h3 className="font-bold text-slate-900 text-sm truncate" title={data.label}>
+                            {data.label}
+                        </h3>
+                        <p className="text-xs text-slate-500 capitalize">{data.status}</p>
+                    </div>
+                </div>
+
+                {data.duration !== undefined && (
+                    <div className="flex items-center justify-between pt-2 border-t border-slate-100 mt-1">
+                        <span className="text-xs text-slate-400 font-mono">
+                            {data.duration.toFixed(2)}s
+                        </span>
+                        {data.cached && (
+                            <span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded uppercase tracking-wider">
+                                Cached
+                            </span>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            <Handle type="source" position={Position.Bottom} className="!bg-slate-400 !w-2 !h-2" />
+        </div>
+    );
+}
+
+function CustomArtifactNode({ data }) {
+    return (
+        <div
+            className="px-3 py-2 rounded-full bg-slate-100 border border-slate-300 flex items-center justify-center gap-2 shadow-sm min-w-[120px]"
+            style={{ height: artifactNodeHeight }}
+        >
+            <Handle type="target" position={Position.Top} className="!bg-slate-400 !w-2 !h-2" />
+
+            <Database size={12} className="text-slate-500" />
+            <span className="text-xs font-medium text-slate-700 truncate max-w-[140px]" title={data.label}>
+                {data.label}
+            </span>
+
+            <Handle type="source" position={Position.Bottom} className="!bg-slate-400 !w-2 !h-2" />
+        </div>
+    );
+}