flowyml 1.7.1__py3-none-any.whl → 1.7.2__py3-none-any.whl

flowyml/ui/frontend/src/app/runs/[runId]/page.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { fetchApi } from '../../../utils/api';
 import { downloadArtifactById } from '../../../utils/downloads';
 import { useParams, Link } from 'react-router-dom';
-import { CheckCircle, XCircle, Clock, Calendar, Package, ArrowRight, BarChart2, FileText, Database, Box, ChevronRight, Activity, Layers, Code2, Terminal, Info, X, Maximize2, TrendingUp, Download, ArrowDownCircle, ArrowUpCircle, Tag, Zap, AlertCircle, FolderPlus, Cloud, Server } from 'lucide-react';
+import { CheckCircle, XCircle, Clock, Calendar, Package, ArrowRight, BarChart2, FileText, Database, Box, ChevronRight, Activity, Layers, Code2, Terminal, Info, X, Maximize2, TrendingUp, TrendingDown, Download, ArrowDownCircle, ArrowUpCircle, Tag, Zap, AlertCircle, FolderPlus, Cloud, Server, LineChart, Minimize2 } from 'lucide-react';
 import { Card } from '../../../components/ui/Card';
 import { Badge } from '../../../components/ui/Badge';
 import { Button } from '../../../components/ui/Button';
@@ -12,6 +12,8 @@ import { ArtifactViewer } from '../../../components/ArtifactViewer';
 import { PipelineGraph } from '../../../components/PipelineGraph';
 import { ProjectSelector } from '../../../components/ProjectSelector';
 import { CodeSnippet } from '../../../components/ui/CodeSnippet';
+import { TrainingMetricsPanel } from '../../../components/TrainingMetricsPanel';
+import { TrainingHistoryChart } from '../../../components/TrainingHistoryChart';
 
 export function RunDetails() {
     const { runId } = useParams();
@@ -26,6 +28,8 @@ export function RunDetails() {
     const [isPolling, setIsPolling] = useState(false);
     const [stopping, setStopping] = useState(false);
     const [stepLogs, setStepLogs] = useState({});
+    const [stepPanelExpanded, setStepPanelExpanded] = useState(false);
+    const [hasTrainingHistory, setHasTrainingHistory] = useState(false);
 
     const handleStopRun = async () => {
         if (!confirm('Are you sure you want to stop this run?')) return;
@@ -227,30 +231,70 @@ export function RunDetails() {
                 />
             </div>
 
-            {/* Main Content - Split View */}
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                {/* DAG Visualization - 2 columns */}
-                <div className="lg:col-span-2">
+            {/* Main Content - Dynamic Split View */}
+            <div className={`grid gap-6 transition-all duration-300 ${
+                stepPanelExpanded
+                    ? 'grid-cols-1 lg:grid-cols-2'
+                    : 'grid-cols-1 lg:grid-cols-3'
+            }`}>
+                {/* DAG Visualization */}
+                <div className={stepPanelExpanded ? 'lg:col-span-1' : 'lg:col-span-2'}>
                     <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
                         <Activity className="text-primary-500" /> Pipeline Execution Graph
                     </h3>
-                    <div className="h-[calc(100vh-240px)] min-h-[600px]">
+                    <div className={`min-h-[500px] ${stepPanelExpanded ? 'h-[500px]' : 'h-[calc(100vh-240px)]'}`}>
                         {run.dag ? (
                             <PipelineGraph
                                 dag={run.dag}
                                 steps={run.steps}
                                 selectedStep={selectedStep}
                                 onStepSelect={setSelectedStep}
-                                onArtifactSelect={(name) => {
-                                    // Find the artifact object by name
-                                    // We look in 'artifacts' array which contains all assets for the run
-                                    const found = artifacts.find(a => a.name === name);
+                                onArtifactSelect={(artifactLabel) => {
+                                    // Smart artifact matching:
+                                    // DAG labels are like "data/train", "model/trained"
+                                    // API names are like "train_dataset", "trained_model"
+
+                                    // 1. Exact name match
+                                    let found = artifacts.find(a => a.name === artifactLabel);
+
+                                    if (!found) {
+                                        // 2. Match by output pattern
+                                        // "data/train" -> look for artifacts with "train" and type Dataset
+                                        // "model/trained" -> look for artifacts with "trained" and type Model
+                                        const parts = artifactLabel.split('/');
+                                        const prefix = parts[0];  // "data", "model", "metrics"
+                                        const suffix = parts[1];  // "train", "trained", "evaluation"
+
+                                        const typeMap = {
+                                            'data': 'Dataset',
+                                            'model': 'Model',
+                                            'metrics': 'Metrics',
+                                            'features': 'FeatureSet',
+                                        };
+                                        const expectedType = typeMap[prefix];
+
+                                        // Look for artifacts with matching type and suffix in name
+                                        if (suffix && expectedType) {
+                                            found = artifacts.find(a =>
+                                                a.type === expectedType &&
+                                                (a.name.toLowerCase().includes(suffix.toLowerCase()) ||
+                                                 suffix.toLowerCase().includes(a.name.toLowerCase().replace(/_/g, '')))
+                                            );
+                                        }
+
+                                        // 3. Fallback: match by type alone if only one of that type
+                                        if (!found && expectedType) {
+                                            const typeMatches = artifacts.filter(a => a.type === expectedType);
+                                            if (typeMatches.length === 1) {
+                                                found = typeMatches[0];
+                                            }
+                                        }
+                                    }
+
                                     if (found) {
                                         setSelectedArtifact(found);
                                     } else {
-                                        // Fallback if not found (e.g. might be an intermediate artifact not persisted)
-                                        console.warn(`Artifact ${name} not found in assets list`);
-                                        // Optionally show a toast or alert
+                                        console.warn(`Artifact "${artifactLabel}" not found in assets list. Available:`, artifacts.map(a => a.name));
                                     }
                                 }}
                             />
@@ -262,18 +306,31 @@ export function RunDetails() {
                     </div>
                 </div>
 
-                {/* Step Details Panel - 1 column */}
-                <div>
-                    <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
-                        <Info className="text-primary-500" /> Step Details
-                    </h3>
+                {/* Step Details Panel - Expandable */}
+                <div className={stepPanelExpanded ? 'lg:col-span-1' : ''}>
+                    <div className="flex items-center justify-between mb-4">
+                        <h3 className="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
+                            <Info className="text-primary-500" /> Step Details
+                        </h3>
+                        <button
+                            onClick={() => setStepPanelExpanded(!stepPanelExpanded)}
+                            className="p-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+                            title={stepPanelExpanded ? 'Collapse panel' : 'Expand panel'}
+                        >
+                            <Maximize2 size={16} className="text-slate-600 dark:text-slate-300" />
+                        </button>
+                    </div>
 
                     {selectedStepData ? (
-                        <Card className="overflow-hidden">
+                        <Card className={`overflow-hidden transition-all duration-300 ${
+                            stepPanelExpanded ? 'h-auto' : ''
+                        }`}>
                             {/* Step Header */}
                             <div className="pb-4 border-b border-slate-100 dark:border-slate-700">
-                                <h4 className="text-lg font-bold text-slate-900 dark:text-white mb-2">{selectedStep}</h4>
-                                <div className="flex items-center gap-2">
+                                <div className="flex items-center justify-between">
+                                    <h4 className="text-lg font-bold text-slate-900 dark:text-white">{selectedStep}</h4>
+                                </div>
+                                <div className="flex items-center gap-2 mt-2">
                                     <Badge variant={selectedStepData.success ? 'success' : 'danger'} className="text-xs">
                                         {selectedStepData.success ? 'Success' : 'Failed'}
                                     </Badge>
@@ -288,7 +345,7 @@ export function RunDetails() {
                                 </div>
                             </div>
 
-                            {/* Live Heartbeat Indicator (Header) */}
+                            {/* Live Heartbeat Indicator */}
                             {selectedStepData.status === 'running' && (
                                 <div className="px-4 py-2 bg-blue-50 dark:bg-blue-900/20 border-b border-blue-100 dark:border-blue-800 flex items-center justify-between">
                                     <div className="flex items-center gap-2 text-sm text-blue-700 dark:text-blue-300">
@@ -312,23 +369,25 @@ export function RunDetails() {
                             )}
 
                             {/* Tabs */}
-                            <div className="flex gap-2 border-b border-slate-100 dark:border-slate-700 mt-4">
+                            <div className="flex gap-1 border-b border-slate-100 dark:border-slate-700 mt-4 overflow-x-auto">
                                 <TabButton active={activeTab === 'overview'} onClick={() => setActiveTab('overview')}>
-                                    <Info size={16} /> Overview
+                                    <Info size={14} /> Overview
                                 </TabButton>
                                 <TabButton active={activeTab === 'code'} onClick={() => setActiveTab('code')}>
-                                    <Code2 size={16} /> Code
+                                    <Code2 size={14} /> Code
                                 </TabButton>
                                 <TabButton active={activeTab === 'artifacts'} onClick={() => setActiveTab('artifacts')}>
-                                    <Package size={16} /> Artifacts
+                                    <Package size={14} /> Artifacts
                                 </TabButton>
                                 <TabButton active={activeTab === 'logs'} onClick={() => setActiveTab('logs')} data-tab="logs">
-                                    <Terminal size={16} /> Logs
+                                    <Terminal size={14} /> Logs
                                 </TabButton>
                             </div>
 
-                            {/* Tab Content */}
-                            <div className="mt-4 max-h-[450px] overflow-y-auto">
+                            {/* Tab Content - Larger when expanded */}
+                            <div className={`mt-4 overflow-y-auto transition-all duration-300 ${
+                                stepPanelExpanded ? 'max-h-[600px]' : 'max-h-[450px]'
+                            }`}>
                                 {activeTab === 'overview' && (
                                     <OverviewTab
                                         stepData={selectedStepData}
@@ -351,18 +410,27 @@ export function RunDetails() {
                                         runId={runId}
                                         stepName={selectedStep}
                                         isRunning={run.status === 'running'}
+                                        maxHeight={stepPanelExpanded ? 'max-h-[500px]' : 'max-h-96'}
                                     />
                                 )}
                             </div>
                         </Card>
                     ) : (
-                        <Card className="p-12 text-center">
-                            <p className="text-slate-500">Select a step to view details</p>
+                        <Card className="p-12 text-center border-2 border-dashed border-slate-200 dark:border-slate-700">
+                            <Info size={32} className="mx-auto text-slate-300 dark:text-slate-600 mb-3" />
+                            <p className="text-slate-500 dark:text-slate-400 font-medium">Select a step to view details</p>
+                            <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">Click on any step in the graph</p>
                         </Card>
                     )}
                 </div>
             </div>
 
+            {/* Training Metrics Section - Only shown if there's training data */}
+            <TrainingMetricsSectionWrapper
+                runId={runId}
+                isRunning={run.status === 'running'}
+            />
+
             {/* Artifact Detail Modal */}
             <ArtifactModal
                 artifact={selectedArtifact}
@@ -712,105 +780,342 @@ function ArtifactsTab({ artifacts, onArtifactClick }) {
 }
 
 function ArtifactModal({ artifact, onClose }) {
+    const [activeTab, setActiveTab] = useState('visualization');
+
     if (!artifact) return null;
 
+    const isDataset = artifact.type === 'Dataset' || artifact.asset_type === 'Dataset';
+    const isModel = artifact.type === 'Model' || artifact.asset_type === 'Model';
+    const isMetrics = artifact.type === 'Metrics' || artifact.asset_type === 'Metrics';
+
+    // Get properties for display (filter out internal/large ones)
+    const displayableProps = artifact.properties
+        ? Object.entries(artifact.properties).filter(([key, value]) => {
+            // Skip internal properties and very large values
+            if (key.startsWith('_')) return false;
+            if (typeof value === 'string' && value.length > 500) return false;
+            return true;
+        })
+        : [];
+
+    // Check for training history
+    const hasTrainingHistory = artifact.training_history &&
+        artifact.training_history.epochs &&
+        artifact.training_history.epochs.length > 0;
+
+    // Also check in properties for training history
+    const trainingHistoryFromProps = artifact.properties?.training_history;
+    const effectiveTrainingHistory = artifact.training_history || (
+        trainingHistoryFromProps && trainingHistoryFromProps.epochs
+            ? trainingHistoryFromProps
+            : null
+    );
+
+    // Get icon and gradient based on type
+    const getTypeStyle = () => {
+        if (isDataset) return {
+            icon: <Database size={28} />,
+            gradient: 'from-blue-500 to-indigo-600',
+            bgGradient: 'from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20',
+            iconBg: 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
+        };
+        if (isModel) return {
+            icon: <Box size={28} />,
+            gradient: 'from-purple-500 to-violet-600',
+            bgGradient: 'from-purple-50 to-violet-50 dark:from-purple-900/20 dark:to-violet-900/20',
+            iconBg: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400'
+        };
+        if (isMetrics) return {
+            icon: <BarChart2 size={28} />,
+            gradient: 'from-emerald-500 to-teal-600',
+            bgGradient: 'from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20',
+            iconBg: 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400'
+        };
+        return {
+            icon: <FileText size={28} />,
+            gradient: 'from-slate-500 to-slate-600',
+            bgGradient: 'from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900',
+            iconBg: 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400'
+        };
+    };
+
+    const typeStyle = getTypeStyle();
+
+    // Get model-specific properties
+    const modelInfo = isModel ? {
+        framework: artifact.properties?.framework || 'Unknown',
+        parameters: artifact.properties?.parameters,
+        layers: artifact.properties?.num_layers,
+        optimizer: artifact.properties?.optimizer,
+        learningRate: artifact.properties?.learning_rate,
+        epochsTrained: artifact.properties?.epochs_trained || effectiveTrainingHistory?.epochs?.length,
+    } : null;
+
+    // Get dataset-specific properties
+    const datasetInfo = isDataset ? {
+        samples: artifact.properties?.num_samples || artifact.properties?.samples,
+        features: artifact.properties?.num_features,
+        source: artifact.properties?.source,
+        split: artifact.properties?.split,
+    } : null;
+
+    // Get metrics-specific data
+    const metricsData = isMetrics && artifact.properties ? Object.entries(artifact.properties)
+        .filter(([key, value]) => typeof value === 'number' && !key.startsWith('_'))
+        .sort((a, b) => a[0].localeCompare(b[0])) : [];
+
     return (
         <AnimatePresence>
             <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
-                className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+                className="fixed inset-0 bg-black/60 backdrop-blur-md z-50 flex items-center justify-center p-4"
                 onClick={onClose}
             >
                 <motion.div
-                    initial={{ scale: 0.9, opacity: 0 }}
-                    animate={{ scale: 1, opacity: 1 }}
-                    exit={{ scale: 0.9, opacity: 0 }}
+                    initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                    animate={{ scale: 1, opacity: 1, y: 0 }}
+                    exit={{ scale: 0.9, opacity: 0, y: 20 }}
+                    transition={{ type: 'spring', damping: 25, stiffness: 300 }}
                     onClick={(e) => e.stopPropagation()}
-                    className="bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[80vh] overflow-hidden"
+                    className="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col"
                 >
-                    {/* Header */}
-                    <div className="flex items-center justify-between p-6 border-b border-slate-100 bg-gradient-to-r from-primary-50 to-purple-50">
-                        <div className="flex items-center gap-3">
-                            <div className="p-3 bg-white rounded-xl shadow-sm">
-                                {artifact.type === 'Dataset' ? <Database size={24} className="text-blue-600" /> :
-                                    artifact.type === 'Model' ? <Box size={24} className="text-purple-600" /> :
-                                        artifact.type === 'Metrics' ? <BarChart2 size={24} className="text-emerald-600" /> :
-                                            <FileText size={24} className="text-slate-600" />}
+                    {/* Header with gradient */}
+                    <div className={`relative p-6 bg-gradient-to-r ${typeStyle.bgGradient} border-b border-slate-200 dark:border-slate-700`}>
+                        {/* Background decoration */}
+                        <div className="absolute top-0 right-0 w-64 h-64 opacity-10 pointer-events-none">
+                            <div className={`w-full h-full bg-gradient-to-br ${typeStyle.gradient} rounded-full blur-3xl`} />
+                        </div>
+
+                        <div className="relative flex items-start justify-between">
+                            <div className="flex items-center gap-4">
+                                <div className={`p-4 rounded-2xl shadow-lg bg-gradient-to-br ${typeStyle.gradient}`}>
+                                    <div className="text-white">
+                                        {typeStyle.icon}
+                                    </div>
+                                </div>
+                                <div>
+                                    <h3 className="text-2xl font-bold text-slate-900 dark:text-white">{artifact.name}</h3>
+                                    <div className="flex items-center gap-3 mt-1">
+                                        <span className={`text-sm font-medium px-3 py-0.5 rounded-full ${typeStyle.iconBg}`}>
+                                            {artifact.type}
+                                        </span>
+                                        {artifact.step && (
+                                            <span className="text-sm text-slate-500 dark:text-slate-400">
+                                                from <span className="font-mono font-medium">{artifact.step}</span>
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
                             </div>
-                            <div>
-                                <h3 className="text-xl font-bold text-slate-900">{artifact.name}</h3>
-                                <p className="text-sm text-slate-500">{artifact.type}</p>
+                            <div className="flex items-center gap-2">
+                                <button
+                                    onClick={() => downloadArtifactById(artifact.artifact_id)}
+                                    className={`inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r ${typeStyle.gradient} text-white text-sm font-semibold hover:shadow-lg transition-all disabled:opacity-50`}
+                                    disabled={!artifact.artifact_id}
+                                >
+                                    <Download size={16} /> Download
+                                </button>
+                                <button
+                                    onClick={onClose}
+                                    className="p-2.5 hover:bg-white/50 dark:hover:bg-slate-800 rounded-xl transition-colors"
+                                >
+                                    <X size={22} className="text-slate-500 dark:text-slate-400" />
+                                </button>
                             </div>
                         </div>
-                        <div className="flex items-center gap-2">
-                            <button
-                                onClick={() => downloadArtifactById(artifact.artifact_id)}
-                                className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-primary-600 text-white text-sm font-semibold hover:bg-primary-500 transition-colors disabled:opacity-50"
-                                disabled={!artifact.artifact_id}
-                            >
-                                <Download size={16} /> Download
-                            </button>
-                            <button
-                                onClick={onClose}
-                                className="p-2 hover:bg-white rounded-lg transition-colors"
-                            >
-                                <X size={20} className="text-slate-400" />
-                            </button>
-                        </div>
+
+                        {/* Quick stats bar for Models */}
+                        {isModel && modelInfo && (
+                            <div className="mt-4 flex flex-wrap gap-4">
+                                <QuickStat label="Framework" value={modelInfo.framework} icon={<Zap size={12} />} />
+                                {modelInfo.parameters && <QuickStat label="Parameters" value={modelInfo.parameters.toLocaleString()} icon={<Activity size={12} />} />}
+                                {modelInfo.layers && <QuickStat label="Layers" value={modelInfo.layers} icon={<Layers size={12} />} />}
+                                {modelInfo.epochsTrained && <QuickStat label="Epochs" value={modelInfo.epochsTrained} icon={<TrendingUp size={12} />} />}
+                            </div>
+                        )}
+
+                        {/* Quick stats bar for Datasets */}
+                        {isDataset && datasetInfo && (
+                            <div className="mt-4 flex flex-wrap gap-4">
+                                {datasetInfo.samples && <QuickStat label="Samples" value={datasetInfo.samples.toLocaleString()} icon={<Database size={12} />} />}
+                                {datasetInfo.features && <QuickStat label="Features" value={datasetInfo.features} icon={<Layers size={12} />} />}
+                                {datasetInfo.split && <QuickStat label="Split" value={datasetInfo.split} icon={<FileText size={12} />} />}
+                                {datasetInfo.source && <QuickStat label="Source" value={datasetInfo.source} icon={<Cloud size={12} />} />}
+                            </div>
+                        )}
                     </div>
 
+                    {/* Tabs - only show for complex types */}
+                    {(isModel || isDataset || isMetrics) && (
+                        <div className="flex gap-1 px-6 py-3 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
+                            <TabBtn active={activeTab === 'visualization'} onClick={() => setActiveTab('visualization')}>
+                                {isModel ? <><LineChart size={14} /> Visualization</> :
+                                 isDataset ? <><BarChart2 size={14} /> Statistics</> :
+                                 <><Activity size={14} /> Metrics</>}
+                            </TabBtn>
+                            {displayableProps.length > 0 && (
+                                <TabBtn active={activeTab === 'properties'} onClick={() => setActiveTab('properties')}>
+                                    <Tag size={14} /> Properties ({displayableProps.length})
+                                </TabBtn>
+                            )}
+                            <TabBtn active={activeTab === 'metadata'} onClick={() => setActiveTab('metadata')}>
+                                <Info size={14} /> Metadata
+                            </TabBtn>
+                        </div>
+                    )}
+
                     {/* Content */}
-                    <div className="p-6 overflow-y-auto max-h-[60vh]">
-                        <div className="space-y-4">
-                            {/* Rich Viewer */}
-                            <ArtifactViewer artifact={artifact} />
-
-                            {/* Properties (collapsible or below) */}
-                            {artifact.properties && Object.keys(artifact.properties).length > 0 && (
-                                <div className="mt-6 pt-6 border-t border-slate-100">
-                                    <h4 className="text-sm font-semibold text-slate-700 mb-3">Properties</h4>
-                                    <div className="grid grid-cols-2 gap-3">
-                                        {Object.entries(artifact.properties).map(([key, value]) => (
-                                            <div key={key} className="p-3 bg-slate-50 rounded-lg border border-slate-100">
-                                                <span className="text-xs text-slate-500 block mb-1">{key}</span>
-                                                <span className="text-sm font-mono font-semibold text-slate-900">
-                                                    {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                    <div className="flex-1 overflow-y-auto p-6">
+                        <AnimatePresence mode="wait">
+                            {/* Visualization Tab */}
+                            {activeTab === 'visualization' && (
+                                <motion.div
+                                    key="viz"
+                                    initial={{ opacity: 0, y: 10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: -10 }}
+                                    className="space-y-6"
+                                >
+                                    {/* Model with Training History */}
+                                    {isModel && effectiveTrainingHistory && (
+                                        <div>
+                                            <div className="flex items-center gap-2 mb-4">
+                                                <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
+                                                    <LineChart size={18} className="text-purple-600 dark:text-purple-400" />
+                                                </div>
+                                                <h4 className="text-lg font-bold text-slate-900 dark:text-white">Training History</h4>
+                                                <span className="text-xs bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded-full text-slate-500">
+                                                    {effectiveTrainingHistory.epochs.length} epochs
+                                                </span>
+                                            </div>
+                                            <TrainingHistoryChart
+                                                trainingHistory={effectiveTrainingHistory}
+                                                compact={false}
+                                            />
+                                        </div>
+                                    )}
+
+                                    {/* Model without Training History */}
+                                    {isModel && !effectiveTrainingHistory && (
+                                        <div className="text-center py-12">
+                                            <div className="inline-flex p-4 bg-slate-100 dark:bg-slate-800 rounded-full mb-4">
+                                                <Box size={32} className="text-slate-400" />
+                                            </div>
+                                            <h4 className="text-lg font-bold text-slate-900 dark:text-white mb-2">Model Artifact</h4>
+                                            <p className="text-slate-500 dark:text-slate-400">
+                                                No training history available for this model.
+                                                <br />
+                                                Use <code className="bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded text-xs">FlowymlKerasCallback</code> to capture training metrics.
+                                            </p>
+                                        </div>
+                                    )}
+
+                                    {/* Dataset Viewer - use the full DatasetViewer */}
+                                    {isDataset && (
+                                        <ArtifactViewer artifact={artifact} />
+                                    )}
+
+                                    {/* Metrics Display */}
+                                    {isMetrics && metricsData.length > 0 && (
+                                        <div className="space-y-4">
+                                            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                                                {metricsData.map(([key, value], idx) => (
+                                                    <MetricDisplayCard
+                                                        key={key}
+                                                        name={key}
+                                                        value={value}
+                                                        index={idx}
+                                                    />
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
+
+                                    {/* Generic Artifact */}
+                                    {!isModel && !isDataset && !isMetrics && (
+                                        <ArtifactViewer artifact={artifact} />
+                                    )}
+                                </motion.div>
+                            )}
+
+                            {/* Properties Tab */}
+                            {activeTab === 'properties' && (
+                                <motion.div
+                                    key="props"
+                                    initial={{ opacity: 0, y: 10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: -10 }}
+                                >
+                                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                        {displayableProps.map(([key, value]) => (
+                                            <div
+                                                key={key}
+                                                className="p-4 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700"
+                                            >
+                                                <span className="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wide block mb-1">
+                                                    {key.replace(/_/g, ' ')}
+                                                </span>
+                                                <span className="text-sm font-mono font-semibold text-slate-900 dark:text-white break-all">
+                                                    {typeof value === 'object' ? JSON.stringify(value, null, 2) :
+                                                     typeof value === 'number' ? value.toLocaleString() :
+                                                     String(value)}
                                                 </span>
                                             </div>
                                         ))}
                                     </div>
-                                </div>
+                                </motion.div>
                             )}
 
-                            {/* Metadata */}
-                            <div className="mt-6">
-                                <h4 className="text-sm font-semibold text-slate-700 mb-3">Metadata</h4>
-                                <div className="space-y-2 text-sm">
-                                    <div className="flex justify-between">
-                                        <span className="text-slate-500">Artifact ID:</span>
-                                        <span className="font-mono text-xs text-slate-700">{artifact.artifact_id}</span>
-                                    </div>
-                                    <div className="flex justify-between">
-                                        <span className="text-slate-500">Step:</span>
-                                        <span className="font-medium text-slate-700">{artifact.step}</span>
-                                    </div>
-                                    {artifact.created_at && (
-                                        <div className="flex justify-between">
-                                            <span className="text-slate-500">Created:</span>
-                                            <span className="text-slate-700">{format(new Date(artifact.created_at), 'MMM d, yyyy HH:mm:ss')}</span>
+                            {/* Metadata Tab */}
+                            {activeTab === 'metadata' && (
+                                <motion.div
+                                    key="meta"
+                                    initial={{ opacity: 0, y: 10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: -10 }}
+                                    className="space-y-4"
+                                >
+                                    <div className="bg-slate-50 dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700">
+                                        <h5 className="text-sm font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide mb-4">
+                                            Artifact Information
+                                        </h5>
+                                        <div className="space-y-3">
+                                            <MetadataRow label="Artifact ID" value={artifact.artifact_id} mono />
+                                            <MetadataRow label="Type" value={artifact.type} />
+                                            <MetadataRow label="Step" value={artifact.step} />
+                                            {artifact.run_id && <MetadataRow label="Run ID" value={artifact.run_id} mono />}
+                                            {artifact.pipeline_name && <MetadataRow label="Pipeline" value={artifact.pipeline_name} />}
+                                            {artifact.created_at && (
+                                                <MetadataRow
+                                                    label="Created"
+                                                    value={format(new Date(artifact.created_at), 'MMM d, yyyy HH:mm:ss')}
+                                                />
+                                            )}
                                         </div>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
+                                    </div>
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
                     </div>
 
                     {/* Footer */}
-                    <div className="p-4 border-t border-slate-100 bg-slate-50 flex justify-end gap-2">
-                        <Button variant="ghost" onClick={onClose}>Close</Button>
-                        <Button variant="primary">Download</Button>
+                    <div className="p-4 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 flex justify-between items-center">
+                        <p className="text-xs text-slate-500 dark:text-slate-400">
+                            💡 Click Download to save the full artifact data
+                        </p>
+                        <div className="flex gap-2">
+                            <Button variant="ghost" onClick={onClose}>Close</Button>
+                            <Button
+                                variant="primary"
+                                onClick={() => downloadArtifactById(artifact.artifact_id)}
+                                disabled={!artifact.artifact_id}
+                            >
+                                <Download size={14} className="mr-1.5" />
+                                Download
+                            </Button>
+                        </div>
                     </div>
                 </motion.div>
             </motion.div>
@@ -818,6 +1123,105 @@ function ArtifactModal({ artifact, onClose }) {
     );
 }
 
+// Quick stat component for header
+function QuickStat({ label, value, icon }) {
+    return (
+        <div className="flex items-center gap-2 px-3 py-1.5 bg-white/50 dark:bg-slate-800/50 rounded-lg backdrop-blur-sm border border-slate-200/50 dark:border-slate-700/50">
+            <span className="text-slate-400">{icon}</span>
+            <span className="text-xs text-slate-500 dark:text-slate-400">{label}:</span>
+            <span className="text-sm font-bold text-slate-900 dark:text-white">{value}</span>
+        </div>
+    );
+}
+
+// Tab button component
+function TabBtn({ active, onClick, children }) {
+    return (
+        <button
+            onClick={onClick}
+            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all ${
+                active
+                    ? '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-200 hover:bg-white/50 dark:hover:bg-slate-700/50'
+            }`}
+        >
+            {children}
+        </button>
+    );
+}
+
+// Metric display card for Metrics artifacts
+function MetricDisplayCard({ name, value, index }) {
+    const colors = [
+        'from-blue-500 to-indigo-600',
+        'from-purple-500 to-violet-600',
+        'from-emerald-500 to-teal-600',
+        'from-amber-500 to-orange-600',
+        'from-rose-500 to-pink-600',
+        'from-cyan-500 to-blue-600',
+    ];
+    const color = colors[index % colors.length];
+
+    // Format name nicely
+    const displayName = name
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, c => c.toUpperCase());
+
+    // Format value
+    const displayValue = typeof value === 'number'
+        ? (Math.abs(value) < 0.01 || Math.abs(value) > 1000
+            ? value.toExponential(3)
+            : value.toFixed(4))
+        : value;
+
+    // Determine if this is a "good" metric (accuracy, score) or "bad" (loss, error)
+    const isLossLike = name.toLowerCase().includes('loss') ||
+                       name.toLowerCase().includes('error') ||
+                       name.toLowerCase().includes('mse') ||
+                       name.toLowerCase().includes('mae');
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: index * 0.05 }}
+            className="relative overflow-hidden p-4 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-lg transition-all group"
+        >
+            <div className={`absolute top-0 right-0 w-16 h-16 bg-gradient-to-br ${color} opacity-10 rounded-full blur-2xl group-hover:opacity-20 transition-opacity`} />
+            <div className="relative">
+                <p className="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1 truncate">
+                    {displayName}
+                </p>
+                <p className="text-2xl font-bold font-mono text-slate-900 dark:text-white">
+                    {displayValue}
+                </p>
+                <div className="mt-1 flex items-center gap-1">
+                    {isLossLike ? (
+                        <TrendingDown size={12} className="text-emerald-500" />
+                    ) : (
+                        <TrendingUp size={12} className="text-emerald-500" />
+                    )}
+                    <span className="text-xs text-slate-400">
+                        {isLossLike ? 'Lower is better' : 'Higher is better'}
+                    </span>
+                </div>
+            </div>
+        </motion.div>
+    );
+}
+
+// Metadata row component
+function MetadataRow({ label, value, mono = false }) {
+    return (
+        <div className="flex justify-between items-center py-2 border-b border-slate-200/50 dark:border-slate-700/50 last:border-0">
+            <span className="text-sm text-slate-500 dark:text-slate-400">{label}</span>
+            <span className={`text-sm font-medium text-slate-900 dark:text-white ${mono ? 'font-mono text-xs' : ''}`}>
+                {value || '—'}
+            </span>
+        </div>
+    );
+}
+
 function LogsViewer({ runId, stepName, isRunning, maxHeight = "max-h-96", minimal = false }) {
     const [logs, setLogs] = useState('');
     const [loading, setLoading] = useState(true);
@@ -964,3 +1368,87 @@ function LogsViewer({ runId, stepName, isRunning, maxHeight = "max-h-96", minima
         </div>
     );
 }
+
+/**
+ * Training Metrics Section Wrapper
+ * Only renders the training metrics section if there's actual training data.
+ * This prevents showing an empty section for non-training pipelines.
+ */
+function TrainingMetricsSectionWrapper({ runId, isRunning }) {
+    const [hasData, setHasData] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(true);
+    const [loading, setLoading] = useState(true);
+
+    // Check if training data exists
+    useEffect(() => {
+        const checkTrainingData = async () => {
+            try {
+                const res = await fetchApi(`/api/runs/${runId}/training-history`);
+                if (res.ok) {
+                    const data = await res.json();
+                    setHasData(data.has_history && data.training_history?.epochs?.length > 0);
+                }
+            } catch (err) {
+                console.error('Error checking training history:', err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (runId) {
+            checkTrainingData();
+        }
+    }, [runId]);
+
+    // Don't render anything if no training data
+    if (loading) return null;
+    if (!hasData) return null;
+
+    return (
+        <div className="mt-8">
+            <Card className="overflow-hidden">
+                <div
+                    className="p-6 cursor-pointer flex items-center justify-between bg-gradient-to-r from-slate-50 to-white dark:from-slate-800 dark:to-slate-900 border-b border-slate-100 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
+                    onClick={() => setIsExpanded(!isExpanded)}
+                >
+                    <div className="flex items-center gap-3">
+                        <div className="p-2.5 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl shadow-lg">
+                            <LineChart size={20} className="text-white" />
+                        </div>
+                        <div>
+                            <h3 className="text-lg font-bold text-slate-900 dark:text-white">
+                                Training Metrics
+                            </h3>
+                            <p className="text-sm text-slate-500 dark:text-slate-400">
+                                Interactive training history visualization
+                            </p>
+                        </div>
+                    </div>
+                    <ChevronRight
+                        size={20}
+                        className={`text-slate-400 transform transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
+                    />
+                </div>
+                <AnimatePresence>
+                    {isExpanded && (
+                        <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-6">
+                                <TrainingMetricsPanel
+                                    runId={runId}
+                                    isRunning={isRunning}
+                                    autoRefresh={true}
+                                />
+                            </div>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </Card>
+        </div>
+    );
+}