@vertesia/ui 1.0.0-dev.20260203.130115Z → 1.0.0-dev.20260227.112605Z

package/src/features/agent/chat/AgentChart.tsx

@@ -1,702 +1,70 @@
-import { Component, memo, useState, useRef, useCallback, type ReactNode, type ErrorInfo } from 'react';
-import { toPng } from 'html-to-image';
-import { Download, Copy, Check } from 'lucide-react';
+import { memo } from 'react';
 import { VegaLiteChart } from './VegaLiteChart';
-import {
-    Area,
-    AreaChart,
-    Bar,
-    BarChart,
-    CartesianGrid,
-    Cell,
-    ComposedChart,
-    Funnel,
-    FunnelChart,
-    LabelList,
-    Legend,
-    Line,
-    LineChart,
-    Pie,
-    PieChart,
-    PolarAngleAxis,
-    PolarGrid,
-    PolarRadiusAxis,
-    Radar,
-    RadarChart,
-    RadialBar,
-    RadialBarChart,
-    ReferenceLine,
-    ResponsiveContainer,
-    Scatter,
-    ScatterChart,
-    Tooltip,
-    Treemap,
-    XAxis,
-    YAxis,
-} from 'recharts';
 
-// Default color palette for charts
-const COLORS = ['#4f46e5', '#06b6d4', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6'];
-
-// Error boundary for chart rendering
-type ChartErrorBoundaryProps = {
-    chartType: string;
-    children: ReactNode;
-};
-
-type ChartErrorBoundaryState = {
-    hasError: boolean;
-    error: Error | null;
-};
-
-class ChartErrorBoundary extends Component<ChartErrorBoundaryProps, ChartErrorBoundaryState> {
-    constructor(props: ChartErrorBoundaryProps) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
-
-    static getDerivedStateFromError(error: Error): ChartErrorBoundaryState {
-        return { hasError: true, error };
-    }
-
-    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        console.error(`Chart rendering error (${this.props.chartType}):`, error, errorInfo);
-    }
-
-    render() {
-        if (this.state.hasError) {
-            return (
-                <div className="flex items-center justify-center h-full bg-red-50 dark:bg-red-950 rounded-md p-4">
-                    <div className="text-center">
-                        <p className="text-sm font-medium text-red-600 dark:text-red-400">
-                            Cannot render {this.props.chartType} chart
-                        </p>
-                        <p className="text-xs text-red-500 dark:text-red-500 mt-1 max-w-xs truncate">
-                            {this.state.error?.message || 'Unknown error'}
-                        </p>
-                    </div>
-                </div>
-            );
-        }
-
-        return this.props.children;
-    }
-}
-
-// Recharts-based chart specification (default)
+// Legacy Recharts chart specification.
+// Recharts rendering has been retired; this type is kept for backward-compatibility.
 export type RechartsChartSpec = {
-    version?: '1.0';
-    library?: 'recharts';
-    chart: 'bar' | 'line' | 'composed' | 'area' | 'pie' | 'scatter' | 'radar' | 'radialBar' | 'funnel' | 'treemap';
-    title?: string;
-    description?: string;
-    data: Record<string, any>[];
-    xKey: string;
-    series: Array<{
-        key: string;
-        label?: string;
-        type?: 'bar' | 'line' | 'area';
-        color?: string;
-        yAxisId?: 'left' | 'right';
-        stackId?: string;
-        dot?: boolean;
-    }>;
-    // For pie/radialBar charts
-    nameKey?: string;
-    valueKey?: string;
-    // For scatter charts
-    yKey?: string;
-    zKey?: string; // optional size dimension
-    // For radar charts
-    axisKey?: string;
-    // For treemap
-    dataKey?: string;
-    yAxis?: {
-        left?: { label?: string };
-        right?: { label?: string };
-    };
-    options?: {
-        stacked?: boolean;
-        referenceZero?: boolean;
-        collapsible?: boolean;
-        collapseInitially?: boolean;
-        innerRadius?: number; // for pie/radialBar (donut style)
-        showLabels?: boolean; // for pie/funnel
-        startAngle?: number; // for radialBar
-        endAngle?: number; // for radialBar
-    };
+  version?: '1.0';
+  library?: 'recharts';
+  [key: string]: unknown;
 };
 
-// Vega-Lite chart specification for advanced visualizations
+// Vega-Lite chart specification for supported visualizations.
 export type VegaLiteChartSpec = {
-    version?: '1.0';
-    library: 'vega-lite';
-    title?: string;
-    description?: string;
-    // Native Vega-Lite specification object
-    spec: Record<string, any>;
-    options?: {
-        collapsible?: boolean;
-        collapseInitially?: boolean;
-        theme?: 'default' | 'dark';
-        renderer?: 'canvas' | 'svg';
-        // Dashboard mode options
-        mode?: 'chart' | 'dashboard';
-        height?: number; // Explicit height override (default: 280 for chart, 500 for dashboard)
-        enableFullscreen?: boolean; // Show fullscreen button (default: true for dashboard, false for chart)
-        // Interactive features
-        enableTooltips?: boolean; // Enable Vega tooltips (default: true)
-        enableSignalListeners?: boolean; // Enable external signal listeners (default: false)
-        // Parameter values - set initial values for Vega-Lite params (sliders, dropdowns, etc.)
-        parameterValues?: Record<string, any>;
-    };
+  version?: '1.0';
+  library: 'vega-lite';
+  title?: string;
+  description?: string;
+  spec: Record<string, unknown>;
+  options?: {
+    collapsible?: boolean;
+    collapseInitially?: boolean;
+    theme?: 'default' | 'dark';
+    renderer?: 'canvas' | 'svg';
+    mode?: 'chart' | 'dashboard';
+    height?: number;
+    enableFullscreen?: boolean;
+    enableTooltips?: boolean;
+    enableSignalListeners?: boolean;
+    parameterValues?: Record<string, unknown>;
+  };
 };
 
-// Union type for all chart specifications
 export type AgentChartSpec = RechartsChartSpec | VegaLiteChartSpec;
 
-// Type guard to check if spec is Vega-Lite
 export function isVegaLiteSpec(spec: AgentChartSpec): spec is VegaLiteChartSpec {
-    return spec.library === 'vega-lite';
+  return spec.library === 'vega-lite' && typeof (spec as VegaLiteChartSpec).spec === 'object';
 }
 
-// Type guard to check if spec is Recharts (default)
 export function isRechartsSpec(spec: AgentChartSpec): spec is RechartsChartSpec {
-    return (spec.library === 'recharts' || spec.library === undefined) && !('spec' in spec);
+  return spec.library === 'recharts' || spec.library === undefined;
 }
 
 type AgentChartProps = {
-    spec: AgentChartSpec;
-    /**
-     * Optional workflow run id used to resolve artifact: URLs in Vega-Lite data references.
-     * When provided, data URLs like "artifact:out/data.json" will be resolved to the actual data.
-     */
-    artifactRunId?: string;
+  spec: AgentChartSpec;
+  artifactRunId?: string;
 };
 
-function formatNumber(n: number): string {
-    if (!isFinite(n)) return String(n);
-    const abs = Math.abs(n);
-    if (abs >= 1_000_000_000) return (n / 1_000_000_000).toFixed(1) + 'B';
-    if (abs >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
-    if (abs >= 1_000) return (n / 1_000).toFixed(1) + 'K';
-    return n.toLocaleString();
+function isNativeVegaLiteSpec(spec: AgentChartSpec): spec is Record<string, unknown> {
+  return typeof (spec as Record<string, unknown>).$schema === 'string' &&
+    ((spec as Record<string, unknown>).$schema as string).includes('vega');
 }
 
-// Router component that delegates to the appropriate chart renderer
 export const AgentChart = memo(function AgentChart({ spec, artifactRunId }: AgentChartProps) {
-    // Route to VegaLiteChart for Vega-Lite specs
-    if (isVegaLiteSpec(spec)) {
-        return <VegaLiteChart spec={spec} artifactRunId={artifactRunId} />;
-    }
-
-    // Route to RechartsChart for Recharts specs
-    return <RechartsChart spec={spec as RechartsChartSpec} />;
-}, (prevProps, nextProps) => {
-    // Deep compare the spec to prevent re-renders when data hasn't changed
-    return JSON.stringify(prevProps.spec) === JSON.stringify(nextProps.spec) &&
-        prevProps.artifactRunId === nextProps.artifactRunId;
-});
-
-// Map alternative chart type names to our standard names
-function normalizeChartType(spec: any): RechartsChartSpec['chart'] {
-    // If 'chart' is provided, use it directly
-    if (spec.chart) return spec.chart;
-    // Map 'type' field (e.g., "BarChart" -> "bar")
-    const typeMap: Record<string, RechartsChartSpec['chart']> = {
-        'BarChart': 'bar',
-        'LineChart': 'line',
-        'AreaChart': 'area',
-        'PieChart': 'pie',
-        'ScatterChart': 'scatter',
-        'RadarChart': 'radar',
-        'FunnelChart': 'funnel',
-        'Treemap': 'treemap',
-        'ComposedChart': 'composed',
-        'RadialBarChart': 'radialBar',
-    };
-    if (spec.type && typeMap[spec.type]) {
-        return typeMap[spec.type];
-    }
-    return 'bar'; // default
-}
-
-// Recharts implementation component
-const RechartsChart = memo(function RechartsChart({ spec }: { spec: RechartsChartSpec }) {
-    // Normalize spec to handle alternative formats from agents
-    const normalizedSpec = {
-        ...spec,
-        chart: normalizeChartType(spec),
-        // Handle x_axis.data_key -> xKey
-        xKey: spec.xKey || (spec as any).x_axis?.data_key || 'name',
-        // Handle bars/lines -> series
-        series: spec.series || (spec as any).bars?.map((b: any) => ({
-            key: b.data_key || b.dataKey,
-            color: b.fill || b.color,
-            label: b.name,
-        })) || (spec as any).lines?.map((l: any) => ({
-            key: l.data_key || l.dataKey,
-            color: l.stroke || l.color,
-            label: l.name,
-        })) || [],
-    };
-
-    const {
-        chart,
-        title,
-        description,
-        data,
-        xKey,
-        series,
-        yAxis,
-        options,
-        nameKey,
-        valueKey,
-        yKey,
-        zKey: _zKey,
-        axisKey,
-        dataKey,
-    } = normalizedSpec;
-    const [isExporting, setIsExporting] = useState(false);
-    const [isCopied, setIsCopied] = useState(false);
-    const chartRef = useRef<HTMLDivElement>(null);
-
-    const handleCopy = useCallback(async () => {
-        if (!chartRef.current || isCopied) return;
-
-        try {
-            const dataUrl = await toPng(chartRef.current, {
-                backgroundColor: '#ffffff',
-                pixelRatio: 2,
-            });
-            const response = await fetch(dataUrl);
-            const blob = await response.blob();
-            await navigator.clipboard.write([
-                new ClipboardItem({ 'image/png': blob })
-            ]);
-            setIsCopied(true);
-            setTimeout(() => setIsCopied(false), 2000);
-        } catch (err) {
-            console.error('Failed to copy chart:', err);
-        }
-    }, [isCopied]);
-
-    const handleExport = useCallback(async () => {
-        if (!chartRef.current || isExporting) return;
-
-        setIsExporting(true);
-        try {
-            const dataUrl = await toPng(chartRef.current, {
-                backgroundColor: '#ffffff',
-                pixelRatio: 2,
-            });
-            const link = document.createElement('a');
-            link.download = `${title || 'chart'}.png`;
-            link.href = dataUrl;
-            link.click();
-        } catch (err) {
-            console.error('Failed to export chart:', err);
-        } finally {
-            setIsExporting(false);
-        }
-    }, [title, isExporting]);
-
-    // Safe arrays - default to empty array if undefined
-    const safeSeries = series || [];
-    const safeData = data || [];
-
-    const commonAxes = (
-        <>
-            <XAxis dataKey={xKey} tick={{ fontSize: 12 }} />
-            <YAxis
-                yAxisId="left"
-                tickFormatter={formatNumber}
-                label={yAxis?.left?.label ? { value: yAxis.left.label, angle: -90, position: 'insideLeft' } : undefined}
-            />
-            {safeSeries.some((s) => s.yAxisId === 'right') && (
-                <YAxis
-                    yAxisId="right"
-                    orientation="right"
-                    tickFormatter={formatNumber}
-                    label={yAxis?.right?.label ? { value: yAxis.right.label, angle: -90, position: 'insideRight' } : undefined}
-                />
-            )}
-        </>
-    );
-
-    const commonOverlays = (
-        <>
-            <CartesianGrid strokeDasharray="3 3" />
-            <Tooltip formatter={(value) => (typeof value === 'number' ? formatNumber(value) : String(value))} />
-            <Legend />
-            {options?.referenceZero && <ReferenceLine y={0} stroke="#999" strokeDasharray="3 3" />}
-        </>
-    );
-
-    const renderSeries = () =>
-        safeSeries.map((s, idx) => {
-            const color = s.color || COLORS[idx % COLORS.length];
-            const yAxisId = s.yAxisId || 'left';
-            if (chart === 'line') {
-                return (
-                    <Line
-                        key={s.key}
-                        type="monotone"
-                        dataKey={s.key}
-                        name={s.label || s.key}
-                        stroke={color}
-                        dot={s.dot ?? false}
-                        yAxisId={yAxisId}
-                    />
-                );
-            }
-            if (chart === 'area') {
-                return (
-                    <Area
-                        key={s.key}
-                        type="monotone"
-                        dataKey={s.key}
-                        name={s.label || s.key}
-                        stroke={color}
-                        fill={color}
-                        fillOpacity={0.3}
-                        stackId={options?.stacked ? (s.stackId || 'stack') : undefined}
-                        yAxisId={yAxisId}
-                    />
-                );
-            }
-            if (chart === 'bar' || s.type === 'bar') {
-                return (
-                    <Bar
-                        key={s.key}
-                        dataKey={s.key}
-                        name={s.label || s.key}
-                        fill={color}
-                        stackId={options?.stacked ? (s.stackId || 'stack') : undefined}
-                        yAxisId={yAxisId}
-                    />
-                );
-            }
-            if (s.type === 'area') {
-                return (
-                    <Area
-                        key={s.key}
-                        type="monotone"
-                        dataKey={s.key}
-                        name={s.label || s.key}
-                        stroke={color}
-                        fill={color}
-                        fillOpacity={0.3}
-                        stackId={options?.stacked ? (s.stackId || 'stack') : undefined}
-                        yAxisId={yAxisId}
-                    />
-                );
-            }
-            // default to line in composed
-            return (
-                <Line
-                    key={s.key}
-                    type="monotone"
-                    dataKey={s.key}
-                    name={s.label || s.key}
-                    stroke={color}
-                    dot={s.dot ?? false}
-                    yAxisId={yAxisId}
-                />
-            );
-        });
-
-    // Render Pie Chart
-    const renderPieChart = () => {
-        const nKey = nameKey || 'name';
-        const vKey = valueKey || 'value';
-        const innerRadius = options?.innerRadius || 0;
-        return (
-            <PieChart>
-                <Pie
-                    data={safeData}
-                    dataKey={vKey}
-                    nameKey={nKey}
-                    cx="50%"
-                    cy="50%"
-                    innerRadius={innerRadius}
-                    outerRadius={100}
-                    label={options?.showLabels !== false}
-                >
-                    {safeData.map((_, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </Pie>
-                <Tooltip formatter={(value) => (typeof value === 'number' ? formatNumber(value) : String(value))} />
-                <Legend />
-            </PieChart>
-        );
-    };
-
-    // Render Scatter Chart
-    const renderScatterChart = () => {
-        const xDataKey = xKey;
-        const yDataKey = yKey || 'y';
-        return (
-            <ScatterChart>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey={xDataKey} name={xDataKey} tick={{ fontSize: 12 }} />
-                <YAxis dataKey={yDataKey} name={yDataKey} tickFormatter={formatNumber} />
-                <Tooltip formatter={(value) => (typeof value === 'number' ? formatNumber(value) : String(value))} />
-                <Legend />
-                {safeSeries.length > 0 ? (
-                    safeSeries.map((s, idx) => (
-                        <Scatter
-                            key={s.key}
-                            name={s.label || s.key}
-                            data={safeData}
-                            fill={s.color || COLORS[idx % COLORS.length]}
-                        />
-                    ))
-                ) : (
-                    <Scatter name="Data" data={safeData} fill={COLORS[0]} />
-                )}
-            </ScatterChart>
-        );
-    };
-
-    // Render Radar Chart
-    const renderRadarChart = () => {
-        const aKey = axisKey || xKey || 'axis';
-        return (
-            <RadarChart cx="50%" cy="50%" outerRadius={100} data={safeData}>
-                <PolarGrid />
-                <PolarAngleAxis dataKey={aKey} tick={{ fontSize: 11 }} />
-                <PolarRadiusAxis tickFormatter={formatNumber} />
-                {safeSeries.map((s, idx) => (
-                    <Radar
-                        key={s.key}
-                        name={s.label || s.key}
-                        dataKey={s.key}
-                        stroke={s.color || COLORS[idx % COLORS.length]}
-                        fill={s.color || COLORS[idx % COLORS.length]}
-                        fillOpacity={0.3}
-                    />
-                ))}
-                <Tooltip formatter={(value) => (typeof value === 'number' ? formatNumber(value) : String(value))} />
-                <Legend />
-            </RadarChart>
-        );
-    };
-
-    // Render RadialBar Chart
-    const renderRadialBarChart = () => {
-        const nKey = nameKey || 'name';
-        const vKey = valueKey || 'value';
-        const startAngle = options?.startAngle ?? 180;
-        const endAngle = options?.endAngle ?? 0;
-        const innerRadius = options?.innerRadius ?? 30;
-        return (
-            <RadialBarChart
-                cx="50%"
-                cy="50%"
-                innerRadius={innerRadius}
-                outerRadius={100}
-                barSize={15}
-                data={safeData}
-                startAngle={startAngle}
-                endAngle={endAngle}
-            >
-                <RadialBar
-                    label={{ position: 'insideStart', fill: '#fff', fontSize: 11 }}
-                    background
-                    dataKey={vKey}
-                >
-                    {safeData.map((_, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </RadialBar>
-                <Tooltip formatter={(value) => (typeof value === 'number' ? formatNumber(value) : String(value))} />
-                <Legend
-                    iconSize={10}
-                    layout="vertical"
-                    verticalAlign="middle"
-                    align="right"
-                    formatter={(value, entry) => {
-                        const item = safeData.find((d) => d[nKey] === value || d[vKey] === entry.payload?.value);
-                        return item ? item[nKey] : value;
-                    }}
-                />
-            </RadialBarChart>
-        );
-    };
-
-    // Render Funnel Chart
-    const renderFunnelChart = () => {
-        const nKey = nameKey || 'name';
-        const vKey = valueKey || 'value';
-        return (
-            <FunnelChart>
-                <Tooltip formatter={(value) => (typeof value === 'number' ? formatNumber(value) : String(value))} />
-                <Funnel dataKey={vKey} data={safeData} isAnimationActive>
-                    {safeData.map((_, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                    {options?.showLabels !== false && (
-                        <LabelList position="center" fill="#fff" stroke="none" dataKey={nKey} />
-                    )}
-                </Funnel>
-            </FunnelChart>
-        );
-    };
-
-    // Render Treemap
-    const renderTreemap = () => {
-        const dKey = dataKey || valueKey || 'value';
-        return (
-            <Treemap
-                data={safeData}
-                dataKey={dKey}
-                aspectRatio={4 / 3}
-                stroke="#fff"
-                fill="#4f46e5"
-                content={({ x, y, width, height, name, value, index }) => {
-                    const fill = COLORS[(index as number) % COLORS.length];
-                    return (
-                        <g>
-                            <rect
-                                x={x}
-                                y={y}
-                                width={width}
-                                height={height}
-                                style={{ fill, stroke: '#fff', strokeWidth: 2 }}
-                            />
-                            {(width as number) > 50 && (height as number) > 30 && (
-                                <>
-                                    <text
-                                        x={(x as number) + (width as number) / 2}
-                                        y={(y as number) + (height as number) / 2 - 7}
-                                        textAnchor="middle"
-                                        fill="#fff"
-                                        fontSize={12}
-                                    >
-                                        {name}
-                                    </text>
-                                    <text
-                                        x={(x as number) + (width as number) / 2}
-                                        y={(y as number) + (height as number) / 2 + 10}
-                                        textAnchor="middle"
-                                        fill="#fff"
-                                        fontSize={11}
-                                    >
-                                        {formatNumber(value as number)}
-                                    </text>
-                                </>
-                            )}
-                        </g>
-                    );
-                }}
-            />
-        );
-    };
-
-    // Render chart based on type
-    const renderChart = () => {
-        switch (chart) {
-            case 'bar':
-                return (
-                    <BarChart data={safeData}>
-                        {commonAxes}
-                        {commonOverlays}
-                        {renderSeries()}
-                    </BarChart>
-                );
-            case 'line':
-                return (
-                    <LineChart data={safeData}>
-                        {commonAxes}
-                        {commonOverlays}
-                        {renderSeries()}
-                    </LineChart>
-                );
-            case 'area':
-                return (
-                    <AreaChart data={safeData}>
-                        {commonAxes}
-                        {commonOverlays}
-                        {renderSeries()}
-                    </AreaChart>
-                );
-            case 'composed':
-                return (
-                    <ComposedChart data={safeData}>
-                        {commonAxes}
-                        {commonOverlays}
-                        {renderSeries()}
-                    </ComposedChart>
-                );
-            case 'pie':
-                return renderPieChart();
-            case 'scatter':
-                return renderScatterChart();
-            case 'radar':
-                return renderRadarChart();
-            case 'radialBar':
-                return renderRadialBarChart();
-            case 'funnel':
-                return renderFunnelChart();
-            case 'treemap':
-                return renderTreemap();
-            default:
-                return (
-                    <ComposedChart data={safeData}>
-                        {commonAxes}
-                        {commonOverlays}
-                        {renderSeries()}
-                    </ComposedChart>
-                );
-        }
-    };
-
-    return (
-        <div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-sm my-5">
-            <div className="flex flex-col gap-2 p-4">
-                <div className="flex items-center justify-between">
-                    <span className="font-medium text-sm text-gray-900 dark:text-gray-100">
-                        {title || 'Chart'}
-                    </span>
-                    <div className="flex items-center gap-2 print:hidden chart-actions">
-                        <button
-                            onClick={handleCopy}
-                            disabled={isCopied}
-                            className="text-xs px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors disabled:opacity-50 flex items-center gap-1"
-                            title="Copy to clipboard"
-                        >
-                            {isCopied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
-                            {isCopied ? 'Copied' : 'Copy'}
-                        </button>
-                        <button
-                            onClick={handleExport}
-                            disabled={isExporting}
-                            className="text-xs px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
-                            title="Export as PNG"
-                        >
-                            <Download className="w-3 h-3" />
-                            {isExporting ? 'Exporting...' : 'Export'}
-                        </button>
-                    </div>
-                </div>
-                {description && (
-                    <span className="text-xs text-gray-500 dark:text-gray-400">
-                        {description}
-                    </span>
-                )}
-                <div ref={chartRef} className="bg-white dark:bg-gray-900 rounded" style={{ width: '100%', height: 280, minWidth: 0 }}>
-                    <ChartErrorBoundary chartType={chart}>
-                        <ResponsiveContainer width="100%" height="100%">
-                            {renderChart()}
-                        </ResponsiveContainer>
-                    </ChartErrorBoundary>
-                </div>
-            </div>
-        </div>
-    );
+  if (isVegaLiteSpec(spec)) {
+    return <VegaLiteChart spec={spec} artifactRunId={artifactRunId} />;
+  }
+
+  if (isNativeVegaLiteSpec(spec)) {
+    return <VegaLiteChart spec={{ library: 'vega-lite', spec }} artifactRunId={artifactRunId} />;
+  }
+
+  return (
+    <div className="my-5 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
+      Recharts chart rendering has been retired. Use a Vega-Lite chart spec (<code>library: &quot;vega-lite&quot;</code> with <code>spec</code>).
+    </div>
+  );
 }, (prevProps, nextProps) => {
-    // Deep compare the spec to prevent re-renders when data hasn't changed
-    return JSON.stringify(prevProps.spec) === JSON.stringify(nextProps.spec);
+  return JSON.stringify(prevProps.spec) === JSON.stringify(nextProps.spec)
+    && prevProps.artifactRunId === nextProps.artifactRunId;
 });