@decido/shell 1.0.0 → 4.0.1

package/src/components/widgets/WidgetRenderer.tsx

@@ -1,892 +0,0 @@
-import React from 'react';
-import { ExternalLink, RefreshCw, X, AlertTriangle, Wifi, WifiOff } from 'lucide-react';
-
-/**
- * WidgetRenderer v2 — Evolved rendering engine for plugin widgets.
- *
- * Option A (SDUI): ServerDrivenNode schema → native React elements
- *   - Data binding via `dataSource` → resolves against a reactive data store
- *   - Conditional rendering via `conditional`
- *   - Rich component library: ProgressBar, StatusBadge, Sparkline, MetricCard
- *   - onAction dispatch to shell
- *
- * Option B (iframe): External SPA in sandboxed iframe
- *   - postMessage bridge for typed host↔plugin communication
- *   - Auto-detect plugin availability
- *   - Error boundary isolation
- */
-
-// ═══════════════════════════════════════════════════════════════════
-// Types
-// ═══════════════════════════════════════════════════════════════════
-
-export interface ServerDrivenNode {
-    type: string;
-    props?: Record<string, any>;
-    children?: (ServerDrivenNode | string)[];
-    onAction?: { command: string; payload?: Record<string, any> };
-    dataSource?: string;
-    conditional?: string;
-}
-
-/**
- * WidgetDef — local widget contract used by the Studio renderer.
- * 
- * Aligns with `WidgetDefinition` from `@decido/sdk/widget`.
- * Once all consumers migrate, this can be replaced with the SDK type directly.
- */
-export interface WidgetDef {
-    id: string;
-    pluginId: string;
-    title: string;
-    icon?: string;
-    slot: string;
-    schema?: ServerDrivenNode;
-    url?: string;
-    visible?: boolean;
-    order?: number;
-    /** Required permissions to view this widget (from SDK WidgetDefinition) */
-    permissions?: string[];
-    /** Width for overlays/sidebars */
-    width?: number | string;
-    /** Height for panels/overlays */
-    height?: number | string;
-    /** URL to a JS script for headless worker-sandbox execution (no UI) */
-    scriptUrl?: string;
-    /** React Component reference for naturally compiled widgets */
-    component?: any;
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// Data Binding Store (Option A evolution)
-// ═══════════════════════════════════════════════════════════════════
-
-type DataListener = () => void;
-
-class WidgetDataStore {
-    private data: Record<string, any> = {};
-    private listeners = new Set<DataListener>();
-
-    /** Set data and notify subscribers */
-    set(path: string, value: any) {
-        this.data[path] = value;
-        this.listeners.forEach(fn => fn());
-    }
-
-    /** Resolve a dotted path: 'sentinel.metrics.uptime' → value */
-    resolve(path: string): any {
-        const parts = path.split('.');
-        let current: any = this.data;
-        for (const part of parts) {
-            if (current == null) return undefined;
-            current = current[part];
-        }
-        return current;
-    }
-
-    /** Bulk set */
-    merge(obj: Record<string, any>) {
-        Object.assign(this.data, obj);
-        this.listeners.forEach(fn => fn());
-    }
-
-    subscribe(fn: DataListener): () => void {
-        this.listeners.add(fn);
-        return () => this.listeners.delete(fn);
-    }
-}
-
-export const widgetDataStore = new WidgetDataStore();
-
-// Seed with demo data for Option A
-widgetDataStore.merge({
-    sentinel: {
-        metrics: { eventsPerMin: 1247, avgLatency: 23, uptime: 99.7, errorCount: 2 },
-        events: [
-            { time: '10:23:01', type: 'pageload', path: '/dashboard', duration: 142 },
-            { time: '10:22:58', type: 'api', path: '/api/nodes', duration: 89 },
-            { time: '10:22:45', type: 'click', path: 'sidebar', duration: 3 },
-            { time: '10:22:30', type: 'session', path: 'user:admin', duration: 0 },
-        ],
-        errors: [
-            { message: 'TypeError: Cannot read properties of undefined', source: 'IssueList.tsx:11:39', ago: '3 min', severity: 'error' },
-            { message: 'Warning: defaultProps deprecated', source: 'recharts.js:28626', ago: '15 min', severity: 'warning' },
-        ],
-        sessions: { today: 3, recording: true },
-    },
-});
-
-// ═══════════════════════════════════════════════════════════════════
-// postMessage Bridge (Option B evolution)
-// ═══════════════════════════════════════════════════════════════════
-
-interface BridgeMessage {
-    type: 'DECIDO_HOST_EVENT' | 'DECIDO_PLUGIN_REQUEST' | 'DECIDO_PLUGIN_RESPONSE';
-    topic?: string;
-    action?: string;
-    payload?: any;
-    requestId?: string;
-}
-
-class PluginBridge {
-    private iframe: HTMLIFrameElement | null = null;
-    private handlers = new Map<string, (payload: any) => any>();
-    private themeObserver: MutationObserver | null = null;
-
-    attach(iframe: HTMLIFrameElement) {
-        this.iframe = iframe;
-        window.addEventListener('message', this.onMessage);
-
-        // Auto-push theme changes to iframe
-        this.themeObserver = new MutationObserver(() => {
-            const isDark = document.documentElement.classList.contains('dark');
-            this.emit('theme:changed', isDark ? 'dark' : 'light');
-        });
-        this.themeObserver.observe(document.documentElement, {
-            attributes: true, attributeFilter: ['class'],
-        });
-    }
-
-    detach() {
-        window.removeEventListener('message', this.onMessage);
-        this.themeObserver?.disconnect();
-        this.themeObserver = null;
-        this.iframe = null;
-    }
-
-    /** Register a handler for plugin requests */
-    onRequest(action: string, handler: (payload: any) => any) {
-        this.handlers.set(action, handler);
-    }
-
-    /** Send an event into the iframe */
-    emit(topic: string, payload: any) {
-        this.iframe?.contentWindow?.postMessage({
-            type: 'DECIDO_HOST_EVENT',
-            topic,
-            payload,
-        } as BridgeMessage, '*');
-    }
-
-    private onMessage = (event: MessageEvent<BridgeMessage>) => {
-        if (!this.iframe || event.source !== this.iframe.contentWindow) return;
-        const msg = event.data;
-        if (msg?.type === 'DECIDO_PLUGIN_REQUEST' && msg.action) {
-            const handler = this.handlers.get(msg.action);
-            if (handler) {
-                try {
-                    const result = handler(msg.payload);
-                    // Handle async handlers
-                    if (result instanceof Promise) {
-                        result.then(r => this.respond(msg.requestId, r))
-                              .catch(e => this.respond(msg.requestId, { error: String(e) }));
-                    } else {
-                        this.respond(msg.requestId, result);
-                    }
-                } catch (e) {
-                    console.error('[Bridge] Handler error:', e);
-                    this.respond(msg.requestId, { error: String(e) });
-                }
-            } else {
-                console.warn(`[Bridge] No handler for action: ${msg.action}`);
-            }
-        }
-    };
-
-    private respond(requestId: string | undefined, payload: any) {
-        if (!requestId) return;
-        this.iframe?.contentWindow?.postMessage({
-            type: 'DECIDO_PLUGIN_RESPONSE',
-            requestId,
-            payload,
-        } as BridgeMessage, '*');
-    }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// Error Boundary
-// ═══════════════════════════════════════════════════════════════════
-
-interface ErrorBoundaryState { hasError: boolean; error?: Error }
-
-class WidgetErrorBoundary extends React.Component<
-    { children: React.ReactNode; widgetId: string; onReset?: () => void },
-    ErrorBoundaryState
-> {
-    state: ErrorBoundaryState = { hasError: false };
-
-    static getDerivedStateFromError(error: Error) {
-        return { hasError: true, error };
-    }
-
-    componentDidCatch(error: Error, info: React.ErrorInfo) {
-        console.error(`[Widget:${this.props.widgetId}] Crash:`, error, info);
-    }
-
-    render() {
-        if (this.state.hasError) {
-            return (
-                <div className="w-full h-full flex flex-col items-center justify-center bg-surface-primary gap-3 p-6">
-                    <div className="w-14 h-14 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center">
-                        <AlertTriangle className="w-7 h-7 text-red-400" />
-                    </div>
-                    <p className="text-sm font-semibold text-text-primary">Widget Crashed</p>
-                    <p className="text-xs text-text-muted text-center max-w-[280px] font-mono bg-surface-glass px-3 py-2 rounded-lg">
-                        {this.state.error?.message || 'Unknown error'}
-                    </p>
-                    <button
-                        onClick={() => { this.setState({ hasError: false, error: undefined }); this.props.onReset?.(); }}
-                        className="px-4 py-1.5 rounded-lg text-xs font-medium bg-surface-glass hover:bg-surface-elevated border border-border-subtle transition-colors"
-                    >
-                        Retry
-                    </button>
-                </div>
-            );
-        }
-        return this.props.children;
-    }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// Main Renderer
-// ═══════════════════════════════════════════════════════════════════
-
-interface WidgetRendererProps {
-    widget: WidgetDef;
-    onClose?: () => void;
-    className?: string;
-}
-
-export function WidgetRenderer({ widget, onClose, className = '' }: WidgetRendererProps) {
-    return (
-        <WidgetErrorBoundary widgetId={widget.id}>
-            {widget.url
-                ? <IframeWidget widget={widget} onClose={onClose} className={className} />
-                : widget.schema
-                    ? <SDUIWidget widget={widget} onClose={onClose} className={className} />
-                    : widget.scriptUrl
-                        ? <HeadlessWidget widget={widget} onClose={onClose} className={className} />
-                        : widget.component
-                            ? <NativeComponentWidget widget={widget} onClose={onClose} className={className} />
-                            : (
-                                <div className={`w-full h-full flex items-center justify-center text-text-muted ${className}`}>
-                                    <p className="text-xs">Widget "{widget.title}" has no schema, URL, scriptUrl, or component</p>
-                                </div>
-                            )
-            }
-        </WidgetErrorBoundary>
-    );
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// OPTION D: Native Component Widget
-// ═══════════════════════════════════════════════════════════════════
-// Renders a React component natively bound into the host process.
-
-function NativeComponentWidget({ widget, onClose, className = '' }: WidgetRendererProps) {
-    const Component = widget.component;
-    return (
-        <div className={`w-full h-full flex flex-col bg-surface-primary ${className} min-w-0 min-h-0`}>
-            <WidgetToolbar label="OPTION D · NATIVE" color="emerald" title={widget.title} onClose={onClose}>
-                <div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
-                    <span className="text-[9px] text-emerald-400 font-mono">REACT</span>
-                </div>
-            </WidgetToolbar>
-            <div className="flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-auto bg-surface-primary rr-block relative" data-rr-block>
-                <React.Suspense fallback={<LoadingOverlay title={widget.title} color="emerald" />}>
-                    <Component />
-                </React.Suspense>
-            </div>
-        </div>
-    );
-}
-
-
-// ═══════════════════════════════════════════════════════════════════
-// OPTION C: Headless Worker-Sandbox Widget
-// ═══════════════════════════════════════════════════════════════════
-// Runs JS code inside a Web Worker (PluginSandbox from @decido/sdk).
-// Shows a minimal status card — no iframe or SDUI needed.
-
-function HeadlessWidget({ widget, onClose, className = '' }: WidgetRendererProps) {
-    const [status, setStatus] = React.useState<'idle' | 'running' | 'stopped' | 'error'>('idle');
-    const [runCount, setRunCount] = React.useState(0);
-    const [lastError, setLastError] = React.useState<string | null>(null);
-    const sandboxRef = React.useRef<any>(null);
-
-    // Cleanup on unmount
-    React.useEffect(() => {
-        return () => {
-            if (sandboxRef.current) {
-                sandboxRef.current.destroy();
-                sandboxRef.current = null;
-            }
-        };
-    }, []);
-
-    const handleStart = React.useCallback(async () => {
-        try {
-            setStatus('running');
-            setLastError(null);
-
-            const scriptUrl = widget.scriptUrl || '';
-
-            // ── Path A: WASM plugin (wasm://name/function) → Tauri IPC bridge ──
-            if (scriptUrl.startsWith('wasm://')) {
-                const parts = scriptUrl.replace('wasm://', '').split('/');
-                const pluginName = parts[0];
-                const fnName = parts[1] || 'run';
-
-                // Dynamic import the WASM bridge
-                const { runWasmPlugin } = await import('../../../../sdk/src/wasm');
-                const result = await runWasmPlugin(pluginName, fnName);
-                console.log(`[WASM] Plugin "${pluginName}.${fnName}" result:`, result);
-                setRunCount(c => c + 1);
-                setStatus('stopped');
-                return;
-            }
-
-            // ── Path B: JS Worker plugin → PluginSandbox ──
-            const { PluginSandbox } = await import('../../../../sdk/src/sandbox/PluginSandbox');
-            const sandbox = new PluginSandbox({
-                pluginId: widget.pluginId,
-                pluginUrl: scriptUrl,
-                tenantId: 'default',
-                permissions: widget.permissions || [],
-            });
-
-            // Connect RPC callback so Worker→Kernel calls work
-            sandbox.onRpcRequest = async (action: string, payload: any) => {
-                return new Promise((resolve, reject) => {
-                    const reqId = `headless-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-                    const handler = (e: MessageEvent) => {
-                        if (e.data?.reqId === reqId) {
-                            window.removeEventListener('message', handler);
-                            if (e.data.error) reject(new Error(e.data.error));
-                            else resolve(e.data.result);
-                        }
-                    };
-                    window.addEventListener('message', handler);
-                    window.postMessage({
-                        type: 'DECIDO_RPC',
-                        reqId,
-                        action,
-                        pluginId: widget.pluginId,
-                        payload,
-                    }, window.location.origin);
-                });
-            };
-
-            sandbox.onError = (error: string) => {
-                setLastError(error);
-                setStatus('error');
-            };
-
-            sandboxRef.current = sandbox;
-            await sandbox.start();
-            setRunCount(c => c + 1);
-        } catch (err: any) {
-            setStatus('error');
-            setLastError(typeof err === 'string' ? err : err?.message || String(err));
-            console.error('[HeadlessWidget] Error:', err);
-        }
-    }, [widget]);
-
-    const handleStop = React.useCallback(() => {
-        if (sandboxRef.current) {
-            sandboxRef.current.destroy();
-            sandboxRef.current = null;
-        }
-        setStatus('stopped');
-    }, []);
-
-    const statusColors = {
-        idle: 'bg-gray-500/20 text-gray-400',
-        running: 'bg-emerald-500/20 text-emerald-400',
-        stopped: 'bg-amber-500/20 text-amber-400',
-        error: 'bg-red-500/20 text-red-400',
-    };
-
-    return (
-        <div className={`flex flex-col h-full ${className}`}>
-            <WidgetToolbar title={widget.title} label="WORKER" color="violet" onClose={onClose}>
-                <div className={`flex items-center gap-1 px-1.5 py-0.5 rounded ${statusColors[status]}`}>
-                    <span className="text-[9px] font-mono uppercase">{status}</span>
-                </div>
-            </WidgetToolbar>
-            <div className="flex-1 flex flex-col items-center justify-center gap-3 p-4">
-                <div className="text-center">
-                    <p className="text-xs text-text-muted mb-1">Worker Sandbox Plugin</p>
-                    <p className="text-[10px] text-text-disabled font-mono">{widget.scriptUrl}</p>
-                </div>
-                <div className="flex gap-2">
-                    <button
-                        onClick={handleStart}
-                        disabled={status === 'running'}
-                        className="px-3 py-1.5 text-xs rounded bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50 transition-colors"
-                    >
-                        ▶ Start
-                    </button>
-                    <button
-                        onClick={handleStop}
-                        disabled={status !== 'running'}
-                        className="px-3 py-1.5 text-xs rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 disabled:opacity-50 transition-colors"
-                    >
-                        ■ Stop
-                    </button>
-                </div>
-                {runCount > 0 && (
-                    <p className="text-[10px] text-text-disabled">Runs: {runCount}</p>
-                )}
-                {lastError && (
-                    <p className="text-[10px] text-red-400 max-w-[200px] text-center">{lastError}</p>
-                )}
-            </div>
-        </div>
-    );
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// OPTION B: iframe Widget (evolved)
-// ═══════════════════════════════════════════════════════════════════
-
-function IframeWidget({ widget, onClose, className = '' }: WidgetRendererProps) {
-    const iframeRef = React.useRef<HTMLIFrameElement>(null);
-    const bridgeRef = React.useRef<PluginBridge>(new PluginBridge());
-    const [isLoading, setIsLoading] = React.useState(true);
-    const [hasError, setHasError] = React.useState(false);
-    const [isOnline, setIsOnline] = React.useState(true);
-
-    // Auto-detect plugin availability
-    React.useEffect(() => {
-        if (!widget.url) return;
-        const controller = new AbortController();
-        fetch(widget.url, { mode: 'no-cors', signal: controller.signal })
-            .then(() => setIsOnline(true))
-            .catch(() => setIsOnline(false));
-        return () => controller.abort();
-    }, [widget.url]);
-
-    // Attach postMessage bridge
-    React.useEffect(() => {
-        const bridge = bridgeRef.current;
-        // Core handlers
-        bridge.onRequest('getTheme', () => {
-            return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
-        });
-        bridge.onRequest('getData', (p: { path: string }) => {
-            return widgetDataStore.resolve(p.path);
-        });
-        bridge.onRequest('navigate', (p: { route: string }) => {
-            console.log('[Bridge] Plugin requested navigation:', p.route);
-        });
-
-        // Expanded handlers
-        bridge.onRequest('requestAction', (p: { command: string; payload?: any }) => {
-            console.log('[Bridge] Action from plugin:', p.command);
-            window.dispatchEvent(new CustomEvent('sdui:action', {
-                detail: { command: p.command, payload: p.payload }
-            }));
-            return { dispatched: true };
-        });
-        bridge.onRequest('getWidgets', () => {
-            // Use window-level reference to avoid circular import
-            const store = (window as any).__pluginWidgetStore;
-            if (!store) return { widgets: [] };
-            return { widgets: store.getVisible().map((w: any) => ({ id: w.id, title: w.title, pluginId: w.pluginId })) };
-        });
-        bridge.onRequest('openExternal', (p: { url: string }) => {
-            window.open(p.url, '_blank', 'noopener,noreferrer');
-            return { opened: true };
-        });
-
-        return () => bridge.detach();
-    }, []);
-
-    React.useEffect(() => {
-        setIsLoading(true);
-        setHasError(false);
-    }, [widget.url]);
-
-    const handleIframeLoad = () => {
-        setIsLoading(false);
-        setHasError(false);
-        if (iframeRef.current) {
-            bridgeRef.current.attach(iframeRef.current);
-        }
-    };
-
-    const handleRefresh = () => {
-        if (iframeRef.current) {
-            setIsLoading(true);
-            setHasError(false);
-            iframeRef.current.src = iframeRef.current.src;
-        }
-    };
-
-    if (!isOnline) {
-        return (
-            <div className={`w-full h-full flex flex-col bg-surface-primary ${className}`}>
-                <WidgetToolbar label="OPTION B · IFRAME" color="blue" title={widget.title} onClose={onClose} onRefresh={() => setIsOnline(true)} />
-                <div className="flex-1 flex flex-col items-center justify-center gap-3">
-                    <div className="w-14 h-14 rounded-2xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center">
-                        <WifiOff className="w-7 h-7 text-amber-400" />
-                    </div>
-                    <p className="text-sm font-semibold text-text-primary">Plugin Offline</p>
-                    <p className="text-xs text-text-muted">{widget.url} no responde</p>
-                    <button onClick={() => { setIsOnline(true); }} className="px-3 py-1.5 rounded-lg text-xs font-medium bg-surface-glass hover:bg-surface-elevated transition-colors">
-                        Reintentar
-                    </button>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className={`w-full h-full flex flex-col bg-surface-primary ${className}`}>
-            <WidgetToolbar label="OPTION B · IFRAME" color="blue" title={widget.title} onClose={onClose} onRefresh={handleRefresh}>
-                <div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-500/10 border border-blue-500/20">
-                    <Wifi className="w-2.5 h-2.5 text-blue-400" />
-                    <span className="text-[9px] text-blue-400 font-mono">BRIDGE</span>
-                </div>
-            </WidgetToolbar>
-            <div className="flex-1 relative rr-block" data-rr-block>
-                {isLoading && <LoadingOverlay title={widget.title} color="blue" />}
-                {hasError && <ErrorOverlay url={widget.url || ''} onRetry={handleRefresh} />}
-                <iframe
-                    ref={iframeRef}
-                    src={widget.url}
-                    className="w-full h-full border-0 rr-block"
-                    onLoad={handleIframeLoad}
-                    onError={() => { setIsLoading(false); setHasError(true); }}
-                    sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-modals"
-                    data-rr-block
-                    title={widget.title}
-                />
-            </div>
-        </div>
-    );
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// OPTION A: SDUI Widget (evolved)
-// ═══════════════════════════════════════════════════════════════════
-
-function SDUIWidget({ widget, onClose, className = '' }: WidgetRendererProps) {
-    // Subscribe to data store for reactive updates
-    const [, forceRender] = React.useReducer(x => x + 1, 0);
-    React.useEffect(() => widgetDataStore.subscribe(forceRender), []);
-
-    return (
-        <div className={`w-full h-full flex flex-col bg-surface-primary overflow-hidden ${className}`}>
-            <WidgetToolbar label="OPTION A · SDUI" color="emerald" title={widget.title} onClose={onClose}>
-                <div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
-                    <span className="text-[9px] text-emerald-400 font-mono">REACTIVE</span>
-                </div>
-            </WidgetToolbar>
-            <div className="flex-1 overflow-auto">
-                {widget.schema && <SDUINode node={widget.schema} />}
-            </div>
-        </div>
-    );
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// Shared UI Components
-// ═══════════════════════════════════════════════════════════════════
-
-function WidgetToolbar({ label, color, title, onClose, onRefresh, children }: {
-    label: string; color: string; title: string;
-    onClose?: () => void; onRefresh?: () => void; children?: React.ReactNode;
-}) {
-    const colorClasses: Record<string, string> = {
-        blue: 'text-blue-400 bg-blue-400',
-        emerald: 'text-emerald-400 bg-emerald-400',
-    };
-    const textColor = colorClasses[color]?.split(' ')[0] || 'text-cyan-400';
-    const dotColor = colorClasses[color]?.split(' ')[1] || 'bg-cyan-400';
-
-    return (
-        <div className="flex-none flex items-center justify-between px-3 py-1.5 bg-surface-secondary/80 backdrop-blur-sm border-b border-border-subtle">
-            <div className="flex items-center gap-2">
-                <div className={`w-2 h-2 rounded-full ${dotColor} animate-pulse`} />
-                <span className={`text-[10px] font-bold ${textColor} tracking-wider uppercase`}>{label}</span>
-                <span className="text-xs font-medium text-text-primary">{title}</span>
-                {children}
-            </div>
-            <div className="flex items-center gap-1">
-                {onRefresh && (
-                    <button onClick={onRefresh} className="p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors" title="Refresh">
-                        <RefreshCw className="w-3 h-3" />
-                    </button>
-                )}
-                {onClose && (
-                    <button onClick={onClose} className="p-1 rounded text-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Close">
-                        <X className="w-3 h-3" />
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-}
-
-function LoadingOverlay({ title, color }: { title: string; color: string }) {
-    const borderColor = color === 'blue' ? 'border-blue-400' : 'border-emerald-400';
-    const borderFade = color === 'blue' ? 'border-blue-500/20' : 'border-emerald-500/20';
-    return (
-        <div className="absolute inset-0 flex items-center justify-center bg-surface-primary z-10">
-            <div className="flex flex-col items-center gap-2">
-                <div className={`w-6 h-6 border-2 ${borderFade} rounded-full relative`}>
-                    <div className={`absolute inset-0 w-6 h-6 border-2 border-transparent border-t-current ${borderColor} rounded-full animate-spin`} />
-                </div>
-                <p className="text-[10px] text-text-muted">Loading {title}...</p>
-            </div>
-        </div>
-    );
-}
-
-function ErrorOverlay({ url, onRetry }: { url: string; onRetry: () => void }) {
-    return (
-        <div className="absolute inset-0 flex items-center justify-center bg-surface-primary z-10">
-            <div className="text-center space-y-2">
-                <X className="w-8 h-8 text-red-400 mx-auto" />
-                <p className="text-xs text-text-muted">Failed to load {url}</p>
-                <button onClick={onRetry} className="text-[10px] px-2 py-1 rounded bg-surface-glass hover:bg-surface-elevated transition-colors">Retry</button>
-            </div>
-        </div>
-    );
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// SDUI Node Renderer (evolved with data binding + rich components)
-// ═══════════════════════════════════════════════════════════════════
-
-const SAFE_TAGS = new Set([
-    'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-    'button', 'a', 'img', 'ul', 'ol', 'li', 'table', 'thead',
-    'tbody', 'tr', 'th', 'td', 'form', 'input', 'textarea',
-    'select', 'option', 'label', 'section', 'article', 'nav',
-    'header', 'footer', 'main', 'aside',
-]);
-
-/** Rich SDUI components — special `type` values that render React components */
-const RICH_COMPONENTS: Record<string, React.FC<any>> = {
-    'MetricCard': MetricCard,
-    'ProgressBar': ProgressBar,
-    'StatusBadge': StatusBadge,
-    'EventList': EventList,
-    'ErrorList': ErrorList,
-    'Sparkline': Sparkline,
-};
-
-function SDUINode({ node }: { node: ServerDrivenNode | string }): React.ReactElement | null {
-    if (typeof node === 'string') return <>{node}</>;
-    if (!node || !node.type) return null;
-
-    // Conditional rendering — resolve against data store
-    if (node.conditional) {
-        const val = widgetDataStore.resolve(node.conditional);
-        if (!val) return null;
-    }
-
-    // Data binding — resolve `dataSource` and inject into props
-    let resolvedProps = { ...node.props };
-    if (node.dataSource) {
-        const val = widgetDataStore.resolve(node.dataSource);
-        if (val !== undefined) {
-            // For text nodes, replace children with resolved value
-            if (typeof val === 'string' || typeof val === 'number') {
-                return React.createElement(node.type, resolvedProps, String(val));
-            }
-            resolvedProps = { ...resolvedProps, data: val };
-        }
-    }
-
-    // Event handlers
-    if (node.onAction) {
-        const action = node.onAction;
-        resolvedProps.onClick = () => {
-            console.log(`[SDUI Action] ${action.command}`, action.payload);
-            window.dispatchEvent(new CustomEvent('sdui:action', {
-                detail: { command: action.command, payload: action.payload }
-            }));
-        };
-        resolvedProps.style = { ...resolvedProps.style, cursor: 'pointer' };
-    }
-
-    // Rich components
-    const RichComponent = RICH_COMPONENTS[node.type];
-    if (RichComponent) {
-        return <RichComponent {...resolvedProps} />;
-    }
-
-    // Standard HTML elements
-    if (!SAFE_TAGS.has(node.type)) {
-        return (
-            <div className="p-2 border border-amber-500/20 rounded bg-amber-500/5 text-xs text-amber-400">
-                Unknown: {node.type}
-            </div>
-        );
-    }
-
-    const children = node.children?.map((child: ServerDrivenNode | string, i: number) => (
-        <SDUINode key={i} node={child} />
-    ));
-
-    return React.createElement(node.type, resolvedProps, children);
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// Rich SDUI Component Library
-// ═══════════════════════════════════════════════════════════════════
-
-function MetricCard({ label, value, unit, color = 'cyan', trend }: {
-    label: string; value: string | number; unit?: string; color?: string; trend?: 'up' | 'down' | 'stable';
-}) {
-    const colors: Record<string, string> = {
-        cyan: 'bg-cyan-900/30 border-cyan-500/20 text-cyan-400',
-        emerald: 'bg-emerald-900/30 border-emerald-500/20 text-emerald-400',
-        amber: 'bg-amber-900/30 border-amber-500/20 text-amber-400',
-        red: 'bg-red-900/30 border-red-500/20 text-red-400',
-        blue: 'bg-blue-900/30 border-blue-500/20 text-blue-400',
-    };
-    const trendIcons = { up: '↑', down: '↓', stable: '→' };
-    const trendColors = { up: 'text-emerald-400', down: 'text-red-400', stable: 'text-zinc-500' };
-
-    return (
-        <div className={`p-3 rounded-lg border text-center ${colors[color] || colors.cyan}`}>
-            <div className="text-2xl font-bold flex items-center justify-center gap-1">
-                {value}{unit && <span className="text-sm opacity-60">{unit}</span>}
-                {trend && <span className={`text-sm ${trendColors[trend]}`}>{trendIcons[trend]}</span>}
-            </div>
-            <div className="text-[10px] text-zinc-400 uppercase tracking-wider mt-1">{label}</div>
-        </div>
-    );
-}
-
-function ProgressBar({ value, max = 100, label, color = 'cyan' }: {
-    value: number; max?: number; label?: string; color?: string;
-}) {
-    const pct = Math.min(100, (value / max) * 100);
-    const barColors: Record<string, string> = {
-        cyan: 'bg-cyan-500', emerald: 'bg-emerald-500', amber: 'bg-amber-500', red: 'bg-red-500',
-    };
-
-    return (
-        <div className="space-y-1">
-            {label && (
-                <div className="flex items-center justify-between text-xs">
-                    <span className="text-zinc-400">{label}</span>
-                    <span className="text-zinc-300 font-mono">{pct.toFixed(0)}%</span>
-                </div>
-            )}
-            <div className="h-2 rounded-full bg-zinc-800 overflow-hidden">
-                <div
-                    className={`h-full rounded-full transition-all duration-700 ${barColors[color] || barColors.cyan}`}
-                    style={{ width: `${pct}%` }}
-                />
-            </div>
-        </div>
-    );
-}
-
-function StatusBadge({ status, label }: { status: 'online' | 'offline' | 'warning' | 'error'; label?: string }) {
-    const styles: Record<string, string> = {
-        online: 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400',
-        offline: 'bg-zinc-500/10 border-zinc-500/20 text-zinc-400',
-        warning: 'bg-amber-500/10 border-amber-500/20 text-amber-400',
-        error: 'bg-red-500/10 border-red-500/20 text-red-400',
-    };
-    const dots: Record<string, string> = {
-        online: 'bg-emerald-400', offline: 'bg-zinc-500', warning: 'bg-amber-400', error: 'bg-red-400',
-    };
-
-    return (
-        <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full border text-[10px] font-semibold uppercase tracking-wider ${styles[status]}`}>
-            <span className={`w-1.5 h-1.5 rounded-full ${dots[status]} ${status === 'online' ? 'animate-pulse' : ''}`} />
-            {label || status}
-        </span>
-    );
-}
-
-function EventList({ data, maxItems = 6 }: { data?: any[]; maxItems?: number }) {
-    const events = Array.isArray(data) ? data.slice(0, maxItems) : [];
-    if (events.length === 0) {
-        return <p className="text-xs text-zinc-500 italic">No events</p>;
-    }
-    const typeColors: Record<string, string> = {
-        pageload: 'text-cyan-400', api: 'text-blue-400', click: 'text-emerald-400',
-        session: 'text-purple-400', error: 'text-red-400',
-    };
-
-    return (
-        <div className="space-y-0.5">
-            {events.map((ev: any, i: number) => (
-                <div key={i} className="flex items-center gap-2 text-xs py-1.5 px-2 rounded hover:bg-white/[0.02] transition-colors">
-                    <span className="text-zinc-600 font-mono text-[10px] w-16 shrink-0">{ev.time}</span>
-                    <span className={`text-[10px] font-bold uppercase tracking-wider w-16 shrink-0 ${typeColors[ev.type] || 'text-zinc-500'}`}>{ev.type}</span>
-                    <span className="text-zinc-400 truncate">{ev.path}</span>
-                    {ev.duration > 0 && <span className="ml-auto text-zinc-600 font-mono text-[10px] shrink-0">{ev.duration}ms</span>}
-                </div>
-            ))}
-        </div>
-    );
-}
-
-function ErrorList({ data }: { data?: any[] }) {
-    const errors = Array.isArray(data) ? data : [];
-    if (errors.length === 0) {
-        return (
-            <div className="flex items-center gap-2 p-3 bg-emerald-900/10 rounded-lg border border-emerald-500/10">
-                <span className="text-emerald-400 text-sm">✓</span>
-                <span className="text-xs text-emerald-400">No errors detected</span>
-            </div>
-        );
-    }
-    return (
-        <div className="space-y-2">
-            {errors.map((err: any, i: number) => {
-                const isError = err.severity === 'error';
-                return (
-                    <div key={i} className={`p-3 rounded-lg border space-y-1 ${isError ? 'bg-red-900/10 border-red-500/20' : 'bg-amber-900/10 border-amber-500/20'}`}>
-                        <div className="flex items-center justify-between">
-                            <span className={`text-sm font-medium ${isError ? 'text-red-400' : 'text-amber-400'}`}>{err.message}</span>
-                            <span className="text-[10px] text-zinc-500">{err.ago}</span>
-                        </div>
-                        <div className="text-xs text-zinc-500 font-mono">{err.source}</div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-}
-
-function Sparkline({ data, color = 'cyan', height = 32 }: { data?: number[]; color?: string; height?: number }) {
-    const values = Array.isArray(data) ? data : [30, 45, 28, 60, 42, 75, 55, 90, 65, 80];
-    const max = Math.max(...values);
-    const min = Math.min(...values);
-    const range = max - min || 1;
-    const w = 120;
-    const points = values.map((v, i) => {
-        const x = (i / (values.length - 1)) * w;
-        const y = height - ((v - min) / range) * (height - 4) - 2;
-        return `${x},${y}`;
-    }).join(' ');
-
-    const strokeColors: Record<string, string> = {
-        cyan: '#22d3ee', emerald: '#34d399', amber: '#fbbf24', red: '#f87171', blue: '#60a5fa',
-    };
-
-    return (
-        <svg width={w} height={height} className="inline-block align-middle">
-            <polyline
-                points={points}
-                fill="none"
-                stroke={strokeColors[color] || strokeColors.cyan}
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-            />
-        </svg>
-    );
-}