@decido/shell 1.0.0

package/src/components/widgets/WidgetRenderer.tsx

@@ -0,0 +1,892 @@
+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>
+    );
+}