reactbridge-sdk 0.2.6 → 0.2.8

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext, useRef, useEffect, useCallback } from 'react';
+import React, { createContext, useState, useContext, useRef, useEffect, useCallback, useMemo } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -32,7 +32,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const DEFAULT_BASE_URL$1 = 'https://react-bridge-api-14089992360.northamerica-northeast2.run.app'; // 'http://localhost:5093';
+const DEFAULT_BASE_URL$1 = "https://react-bridge-api-14089992360.northamerica-northeast2.run.app"; // 'http://localhost:5093';
 class ReactBridgeAPI {
     constructor(config) {
         this.config = config;
@@ -45,13 +45,15 @@ class ReactBridgeAPI {
                 // Configure abort signal for fetch with robust fallback.
                 // `ReactBridgeConfig.timeout` is milliseconds. If it's undefined, no timeout is applied.
                 // If it's 0 or a non-positive number, timeout is disabled.
-                const timeoutMs = typeof this.config.timeout === 'number' ? this.config.timeout : undefined;
+                const timeoutMs = typeof this.config.timeout === "number"
+                    ? this.config.timeout
+                    : undefined;
                 let controller = null;
                 let timeoutId = null;
                 let signal;
-                if (typeof timeoutMs === 'number' && timeoutMs > 0) {
+                if (typeof timeoutMs === "number" && timeoutMs > 0) {
                     // Prefer built-in AbortSignal.timeout when available
-                    if (typeof AbortSignal.timeout === 'function') {
+                    if (typeof AbortSignal.timeout === "function") {
                         signal = AbortSignal.timeout(timeoutMs);
                     }
                     else {
@@ -62,43 +64,43 @@ class ReactBridgeAPI {
                 }
                 // Check if this is a multimodal request (has image or document)
                 const hasFile = request.image || request.document;
-                let headers = Object.assign({ 'X-API-Key': this.config.apiKey }, this.config.headers);
+                let headers = Object.assign({ "X-API-Key": this.config.apiKey }, this.config.headers);
                 let body;
                 if (hasFile) {
                     // Use FormData for file uploads
                     const formData = new FormData();
                     // Add text fields
-                    formData.append('userId', request.userId);
-                    formData.append('query', request.query);
+                    formData.append("userId", request.userId);
+                    formData.append("query", request.query);
                     if (request.userName)
-                        formData.append('userName', request.userName);
+                        formData.append("userName", request.userName);
                     if (request.userPreferences)
-                        formData.append('userPreferences', request.userPreferences);
+                        formData.append("userPreferences", request.userPreferences);
                     if (request.userRecentActivity)
-                        formData.append('userRecentActivity', request.userRecentActivity);
+                        formData.append("userRecentActivity", request.userRecentActivity);
                     if (request.interfaceState)
                         formData.append("InterfaceStateJson", JSON.stringify(request.interfaceState));
                     if (request.sessionId)
-                        formData.append('sessionId', request.sessionId);
+                        formData.append("sessionId", request.sessionId);
                     if (request.modalityHint)
-                        formData.append('modalityHint', request.modalityHint);
+                        formData.append("modalityHint", request.modalityHint);
                     // Add files
                     if (request.image)
-                        formData.append('image', request.image);
+                        formData.append("image", request.image);
                     if (request.document)
-                        formData.append('document', request.document);
+                        formData.append("document", request.document);
                     body = formData;
                     // Don't set Content-Type for FormData - let browser set it with boundary
-                    delete headers['Content-Type'];
+                    delete headers["Content-Type"];
                 }
                 else {
                     // Use JSON for text-only requests
-                    headers['Content-Type'] = 'application/json';
+                    headers["Content-Type"] = "application/json";
                     body = JSON.stringify(request);
                 }
                 // console.log('Sending request to ReactBridge API:', { url, headers, body, timeoutMs });
                 const response = yield fetch(url, {
-                    method: 'POST',
+                    method: "POST",
                     headers,
                     body,
                     signal,
@@ -118,7 +120,7 @@ class ReactBridgeAPI {
                 if (error instanceof Error) {
                     throw new Error(`ReactBridge API Error: ${error.message}`);
                 }
-                throw new Error('ReactBridge API Error: Unknown error occurred');
+                throw new Error("ReactBridge API Error: Unknown error occurred");
             }
         });
     }
@@ -138,65 +140,164 @@ class ReactBridgeAPI {
         });
     }
     sendImageRequest(userId_1, imageFile_1) {
-        return __awaiter(this, arguments, void 0, function* (userId, imageFile, query = '', context) {
+        return __awaiter(this, arguments, void 0, function* (userId, imageFile, query = "", context) {
             const request = Object.assign({ userId,
-                query, image: imageFile, modalityHint: 'image' }, context);
+                query, image: imageFile, modalityHint: "image" }, context);
             return this.sendMessage(request);
         });
     }
     sendDocumentRequest(userId_1, documentFile_1) {
-        return __awaiter(this, arguments, void 0, function* (userId, documentFile, query = '', context) {
+        return __awaiter(this, arguments, void 0, function* (userId, documentFile, query = "", context) {
             const request = Object.assign({ userId,
-                query, document: documentFile, modalityHint: 'document' }, context);
+                query, document: documentFile, modalityHint: "document" }, context);
             return this.sendMessage(request);
         });
     }
+    /**
+     * Report API Methods - Call analytics endpoints directly
+     */
+    fetchReport(endpoint, params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const baseURL = this.config.baseURL || DEFAULT_BASE_URL$1;
+            const url = new URL(`${baseURL}/api/reports/${endpoint}`);
+            // Add query parameters if provided
+            if (params) {
+                for (const key in params) {
+                    if (params.hasOwnProperty(key)) {
+                        url.searchParams.append(key, params[key]);
+                    }
+                }
+            }
+            try {
+                const response = yield fetch(url.toString(), {
+                    method: "GET",
+                    headers: Object.assign({ "X-API-Key": this.config.apiKey, "Content-Type": "application/json" }, this.config.headers),
+                });
+                if (!response.ok) {
+                    const errorMessage = this.getErrorMessage(response.status);
+                    throw new Error(errorMessage);
+                }
+                return (yield response.json());
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    throw error;
+                }
+                throw new Error("Failed to fetch report data");
+            }
+        });
+    }
+    getErrorMessage(status) {
+        switch (status) {
+            case 401:
+                return "Unauthorized: Invalid API key";
+            case 404:
+                return "Report endpoint not found";
+            case 500:
+                return "Server error: Unable to fetch report data";
+            default:
+                return `API Error: ${status}`;
+        }
+    }
+    getExecutiveDashboard(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const queryParams = {};
+            if (params === null || params === void 0 ? void 0 : params.startDate)
+                queryParams.startDate = params.startDate;
+            if (params === null || params === void 0 ? void 0 : params.endDate)
+                queryParams.endDate = params.endDate;
+            return this.fetchReport("executive-dashboard", queryParams);
+        });
+    }
+    getSupplyChainRisk(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const queryParams = {};
+            if (params === null || params === void 0 ? void 0 : params.startDate)
+                queryParams.startDate = params.startDate;
+            if (params === null || params === void 0 ? void 0 : params.endDate)
+                queryParams.endDate = params.endDate;
+            return this.fetchReport("supply-chain-risk", queryParams);
+        });
+    }
+    getExecutionAuditTrail(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const queryParams = {};
+            if (params === null || params === void 0 ? void 0 : params.startDate)
+                queryParams.startDate = params.startDate;
+            if (params === null || params === void 0 ? void 0 : params.endDate)
+                queryParams.endDate = params.endDate;
+            if (params === null || params === void 0 ? void 0 : params.directiveType)
+                queryParams.directiveType = params.directiveType;
+            return this.fetchReport("execution-audit-trail", queryParams);
+        });
+    }
+    getPortfolioHealth(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const queryParams = {};
+            if (params === null || params === void 0 ? void 0 : params.startDate)
+                queryParams.startDate = params.startDate;
+            if (params === null || params === void 0 ? void 0 : params.endDate)
+                queryParams.endDate = params.endDate;
+            return this.fetchReport("portfolio-health", queryParams);
+        });
+    }
+    getDataQualityAutomation(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const queryParams = {};
+            if (params === null || params === void 0 ? void 0 : params.startDate)
+                queryParams.startDate = params.startDate;
+            if (params === null || params === void 0 ? void 0 : params.endDate)
+                queryParams.endDate = params.endDate;
+            return this.fetchReport("data-quality-automation", queryParams);
+        });
+    }
 }
 
 const lightTheme = {
-    name: 'light',
+    name: "light",
     colors: {
-        primary: '#1976d2',
-        secondary: '#dc004e',
-        background: '#ffffff',
-        surface: '#f5f5f5',
-        text: '#000000',
-        textSecondary: '#666666',
-        border: '#e0e0e0',
-        error: '#f44336',
-        success: '#4caf50',
+        primary: "#1976d2",
+        secondary: "#dc004e",
+        background: "#ffffff",
+        surface: "#f5f5f5",
+        text: "#000000",
+        textSecondary: "#666666",
+        border: "#e0e0e0",
+        error: "#f44336",
+        success: "#4caf50",
     },
     spacing: {
-        xs: '4px',
-        sm: '8px',
-        md: '16px',
-        lg: '24px',
-        xl: '32px',
+        xs: "4px",
+        sm: "8px",
+        md: "16px",
+        lg: "24px",
+        xl: "32px",
     },
     fontSizes: {
-        xs: '12px',
-        sm: '14px',
-        md: '16px',
-        lg: '18px',
-        xl: '24px',
+        xs: "12px",
+        sm: "14px",
+        md: "16px",
+        lg: "18px",
+        xl: "24px",
     },
-    borderRadius: '8px',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    borderRadius: "8px",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
 };
 
 // Default STT Provider using Web Speech API
 class WebSpeechSTTProvider {
     constructor() {
-        if (typeof window !== 'undefined') {
-            const SpeechRecognitionCtor = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (typeof window !== "undefined") {
+            const SpeechRecognitionCtor = window.SpeechRecognition ||
+                window.webkitSpeechRecognition;
             if (SpeechRecognitionCtor) {
                 this.recognition = new SpeechRecognitionCtor();
                 if (!this.recognition) {
-                    throw new Error('Failed to initialize SpeechRecognition');
+                    throw new Error("Failed to initialize SpeechRecognition");
                 }
                 this.recognition.continuous = false;
                 this.recognition.interimResults = false;
-                this.recognition.lang = 'en-US';
+                this.recognition.lang = "en-US";
                 this.recognition.onresult = (event) => {
                     var _a;
                     const transcript = event.results[0][0].transcript;
@@ -208,7 +309,7 @@ class WebSpeechSTTProvider {
                 };
             }
             else {
-                console.warn('SpeechRecognition API not supported in this browser.');
+                console.warn("SpeechRecognition API not supported in this browser.");
             }
         }
     }
@@ -217,7 +318,7 @@ class WebSpeechSTTProvider {
             this.recognition.start();
         }
         else {
-            throw new Error('Speech recognition not supported');
+            throw new Error("Speech recognition not supported");
         }
     }
     stopRecognition() {
@@ -234,16 +335,16 @@ class WebSpeechSTTProvider {
 // Default TTS Provider using Web Speech API
 class WebSpeechTTSProvider {
     speak(text) {
-        if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
+        if (typeof window !== "undefined" && "speechSynthesis" in window) {
             const utterance = new SpeechSynthesisUtterance(text);
             window.speechSynthesis.speak(utterance);
         }
         else {
-            console.warn('Text-to-speech not supported');
+            console.warn("Text-to-speech not supported");
         }
     }
     stop() {
-        if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
+        if (typeof window !== "undefined" && "speechSynthesis" in window) {
             window.speechSynthesis.cancel();
         }
     }
@@ -255,14 +356,10 @@ function ReactBridgeProvider({ apiKey, config = {}, theme = lightTheme, sttProvi
         apiKey,
         baseURL: config.baseURL,
         // Preserve explicit 0 (to disable timeouts). If not provided, default to 30s
-        timeout: typeof config.timeout === 'number' ? config.timeout : 30000,
+        timeout: typeof config.timeout === "number" ? config.timeout : 30000,
         headers: config.headers,
     };
-    const api = React.useMemo(() => new ReactBridgeAPI(fullConfig), [
-        fullConfig.apiKey,
-        fullConfig.baseURL,
-        fullConfig.timeout,
-    ]);
+    const api = React.useMemo(() => new ReactBridgeAPI(fullConfig), [fullConfig.apiKey, fullConfig.baseURL, fullConfig.timeout]);
     const [sttProvider, setSTTProvider] = useState(initialSTTProvider || new WebSpeechSTTProvider());
     const [ttsProvider, setTTSProvider] = useState(initialTTSProvider || new WebSpeechTTSProvider());
     const value = {
@@ -279,7 +376,7 @@ function ReactBridgeProvider({ apiKey, config = {}, theme = lightTheme, sttProvi
 function useReactBridgeContext() {
     const context = useContext(ReactBridgeContext);
     if (!context) {
-        throw new Error('useReactBridgeContext must be used within a ReactBridgeProvider');
+        throw new Error("useReactBridgeContext must be used within a ReactBridgeProvider");
     }
     return context;
 }
@@ -288,7 +385,8 @@ function hasContextChanged(previous, current) {
     if (!previous)
         return true;
     // Check if page changed
-    if (previous.interfaceState.currentPageName !== current.interfaceState.currentPageName) {
+    if (previous.interfaceState.currentPageName !==
+        current.interfaceState.currentPageName) {
         return true;
     }
     // Check if viewing items changed
@@ -298,8 +396,8 @@ function hasContextChanged(previous, current) {
         return true;
     }
     // Check if item IDs changed
-    const prevIds = prevItems.map(item => item.id).sort();
-    const currIds = currItems.map(item => item.id).sort();
+    const prevIds = prevItems.map((item) => item.id).sort();
+    const currIds = currItems.map((item) => item.id).sort();
     return JSON.stringify(prevIds) !== JSON.stringify(currIds);
 }
 function getContextSummary(context) {
@@ -308,14 +406,14 @@ function getContextSummary(context) {
     parts.push(`Page: ${interfaceState.currentPageName}`);
     if (interfaceState.viewingItems && interfaceState.viewingItems.length > 0) {
         parts.push(`Viewing ${interfaceState.viewingItems.length} items:`);
-        interfaceState.viewingItems.slice(0, 3).forEach(item => {
+        interfaceState.viewingItems.slice(0, 3).forEach((item) => {
             parts.push(`  - ${item.name} ($${item.price})`);
         });
         if (interfaceState.viewingItems.length > 3) {
             parts.push(`  ... and ${interfaceState.viewingItems.length - 3} more`);
         }
     }
-    return parts.join('\n');
+    return parts.join("\n");
 }
 
 function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, }) {
@@ -333,17 +431,17 @@ function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechSta
             const contextSummary = getContextSummary(currentContext);
             const contextMessage = {
                 id: `context-${Date.now()}`,
-                role: 'system',
+                role: "system",
                 content: `[Context Update]\n${contextSummary}`,
                 timestamp: new Date(),
             };
-            setMessages(prev => [...prev, contextMessage]);
+            setMessages((prev) => [...prev, contextMessage]);
             previousContextRef.current = currentContext;
         }
     }, [currentContext]);
     const sendChatQuery = useCallback((queryOrOptions_1, ...args_1) => __awaiter(this, [queryOrOptions_1, ...args_1], void 0, function* (queryOrOptions, fromVoiceInput = false) {
-        const isMultimodal = typeof queryOrOptions === 'object';
-        const query = isMultimodal ? (queryOrOptions.query || '') : queryOrOptions;
+        const isMultimodal = typeof queryOrOptions === "object";
+        const query = isMultimodal ? queryOrOptions.query || "" : queryOrOptions;
         const image = isMultimodal ? queryOrOptions.image : undefined;
         const document = isMultimodal ? queryOrOptions.document : undefined;
         if (!query.trim() && !image && !document)
@@ -353,18 +451,22 @@ function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechSta
         // Add user message with file info if present
         let messageContent = query;
         if (image) {
-            messageContent = messageContent ? `${messageContent} [Image: ${image.name}]` : `[Image: ${image.name}]`;
+            messageContent = messageContent
+                ? `${messageContent} [Image: ${image.name}]`
+                : `[Image: ${image.name}]`;
         }
         else if (document) {
-            messageContent = messageContent ? `${messageContent} [Document: ${document.name}]` : `[Document: ${document.name}]`;
+            messageContent = messageContent
+                ? `${messageContent} [Document: ${document.name}]`
+                : `[Document: ${document.name}]`;
         }
         const userMessage = {
             id: `user-${Date.now()}`,
-            role: 'user',
+            role: "user",
             content: messageContent,
             timestamp: new Date(),
         };
-        setMessages(prev => [...prev, userMessage]);
+        setMessages((prev) => [...prev, userMessage]);
         try {
             // Step 1: Send initial request to orchestrator
             const request = {
@@ -379,12 +481,12 @@ function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechSta
                 // Add multimodal fields
                 image,
                 document,
-                modalityHint: image ? 'image' : document ? 'document' : undefined,
+                modalityHint: image ? "image" : document ? "document" : undefined,
             };
             lastRequestRef.current = request;
             const response = yield api.sendMessage(request);
             if (!response.success) {
-                throw new Error(response.error || 'Request failed');
+                throw new Error(response.error || "Request failed");
             }
             // Update session ID
             if (response.sessionId) {
@@ -393,12 +495,12 @@ function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechSta
             // Add assistant message
             const assistantMessage = {
                 id: `assistant-${Date.now()}`,
-                role: 'assistant',
+                role: "assistant",
                 content: response.message,
                 timestamp: new Date(),
                 toolCall: response.toolCall,
             };
-            setMessages(prev => [...prev, assistantMessage]);
+            setMessages((prev) => [...prev, assistantMessage]);
             // Trigger TTS and callback only if input came from voice
             if (fromVoiceInput) {
                 ttsProvider.speak(response.message);
@@ -416,11 +518,11 @@ function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechSta
                         // Add final assistant message with tool result context
                         const finalMessage = {
                             id: `assistant-final-${Date.now()}`,
-                            role: 'assistant',
+                            role: "assistant",
                             content: resultResponse.message,
                             timestamp: new Date(),
                         };
-                        setMessages(prev => [...prev, finalMessage]);
+                        setMessages((prev) => [...prev, finalMessage]);
                         // Trigger TTS for final response only if input came from voice
                         if (fromVoiceInput) {
                             ttsProvider.speak(resultResponse.message);
@@ -433,30 +535,32 @@ function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechSta
                 catch (toolError) {
                     const errorMessage = toolError instanceof Error
                         ? toolError.message
-                        : 'Tool execution failed';
+                        : "Tool execution failed";
                     const errorMsg = {
                         id: `error-${Date.now()}`,
-                        role: 'assistant',
+                        role: "assistant",
                         content: `I encountered an error: ${errorMessage}`,
                         timestamp: new Date(),
                     };
-                    setMessages(prev => [...prev, errorMsg]);
+                    setMessages((prev) => [...prev, errorMsg]);
                     if (onError) {
-                        onError(toolError instanceof Error ? toolError : new Error(errorMessage));
+                        onError(toolError instanceof Error
+                            ? toolError
+                            : new Error(errorMessage));
                     }
                 }
             }
         }
         catch (err) {
-            const error = err instanceof Error ? err : new Error('Unknown error');
+            const error = err instanceof Error ? err : new Error("Unknown error");
             setError(error);
             const errorMessage = {
                 id: `error-${Date.now()}`,
-                role: 'assistant',
+                role: "assistant",
                 content: `Sorry, I encountered an error: ${error.message}`,
                 timestamp: new Date(),
             };
-            setMessages(prev => [...prev, errorMessage]);
+            setMessages((prev) => [...prev, errorMessage]);
             if (onError) {
                 onError(error);
             }
@@ -497,7 +601,14 @@ function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechSta
             });
         }
         sttProvider.startRecognition();
-    }, [sttProvider, sendChatQuery, onSpeechStart, onSpeechEnd, onTranscript, onError]);
+    }, [
+        sttProvider,
+        sendChatQuery,
+        onSpeechStart,
+        onSpeechEnd,
+        onTranscript,
+        onError,
+    ]);
     const stopVoiceInput = useCallback(() => {
         setIsListening(false);
         sttProvider.stopRecognition();
@@ -955,7 +1066,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                 padding: theme.spacing.md,
                 backgroundColor: theme.colors.background,
             } },
-            messages.map((message) => renderMessage ? renderMessage(message) : defaultRenderMessage(message)),
+            messages.map((message) => renderMessage
+                ? renderMessage(message)
+                : defaultRenderMessage(message)),
             isLoading && React.createElement(TypingIndicator, { theme: theme }),
             React.createElement("div", { ref: messagesEndRef })),
         React.createElement("form", { onSubmit: handleSubmit, style: {
@@ -1110,10 +1223,10 @@ const MIC_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/200
 // Plus Icon SVG
 const PLUS_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
     React.createElement("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })));
-function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Search...', width = '100%', maxResults = 5, theme: themeOverride, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, }) {
+function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Search...", width = "100%", maxResults = 5, theme: themeOverride, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, }) {
     const { theme: contextTheme } = useReactBridgeContext();
     const theme = Object.assign(Object.assign({}, contextTheme), themeOverride);
-    const { messages, isLoading, sendChatQuery, isListening, startVoiceInput, stopVoiceInput } = useReactBridge({
+    const { messages, isLoading, sendChatQuery, isListening, startVoiceInput, stopVoiceInput, } = useReactBridge({
         onIntentDetected,
         currentContext,
         onError,
@@ -1122,7 +1235,7 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
         onTranscript,
         onAgentResponse,
     });
-    const [inputValue, setInputValue] = useState('');
+    const [inputValue, setInputValue] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [isUploadMenuOpen, setIsUploadMenuOpen] = useState(false);
     const [selectedFile, setSelectedFile] = useState(null);
@@ -1132,13 +1245,14 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
     // Close dropdown and upload menu when clicking outside
     useEffect(() => {
         const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
                 setIsOpen(false);
                 setIsUploadMenuOpen(false);
             }
         };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
     // Open dropdown when there are messages
     useEffect(() => {
@@ -1148,9 +1262,10 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
     }, [messages]);
     const handleFileSelect = (type) => {
         if (fileInputRef.current) {
-            fileInputRef.current.accept = type === 'image'
-                ? 'image/png,image/jpeg,image/jpg,image/webp'
-                : 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain';
+            fileInputRef.current.accept =
+                type === "image"
+                    ? "image/png,image/jpeg,image/jpg,image/webp"
+                    : "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain";
             fileInputRef.current.click();
         }
         setIsUploadMenuOpen(false);
@@ -1161,12 +1276,19 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
         if (!file)
             return;
         // Validate file type
-        const imageTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
-        const documentTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain'];
-        const allowedTypes = file.type.startsWith('image/') ? imageTypes : documentTypes;
+        const imageTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+        const documentTypes = [
+            "application/pdf",
+            "application/msword",
+            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            "text/plain",
+        ];
+        const allowedTypes = file.type.startsWith("image/")
+            ? imageTypes
+            : documentTypes;
         if (!allowedTypes.includes(file.type)) {
             if (onError) {
-                onError(new Error(`Invalid file type. Please select a valid ${file.type.startsWith('image/') ? 'image' : 'document'} file.`));
+                onError(new Error(`Invalid file type. Please select a valid ${file.type.startsWith("image/") ? "image" : "document"} file.`));
             }
             return;
         }
@@ -1174,13 +1296,13 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
         const maxSize = 10 * 1024 * 1024; // 10MB
         if (file.size > maxSize) {
             if (onError) {
-                onError(new Error('File size too large. Please select a file smaller than 10MB.'));
+                onError(new Error("File size too large. Please select a file smaller than 10MB."));
             }
             return;
         }
         setSelectedFile(file);
         // Create preview for images
-        if (file.type.startsWith('image/')) {
+        if (file.type.startsWith("image/")) {
             const reader = new FileReader();
             reader.onload = (e) => {
                 var _a;
@@ -1197,7 +1319,7 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
         setSelectedFile(null);
         setFilePreview(null);
         if (fileInputRef.current) {
-            fileInputRef.current.value = '';
+            fileInputRef.current.value = "";
         }
     };
     const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
@@ -1205,13 +1327,17 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
         if ((!inputValue.trim() && !selectedFile) || isLoading)
             return;
         const query = inputValue.trim();
-        setInputValue('');
+        setInputValue("");
         // Handle multimodal request
         if (selectedFile && filePreview) {
             yield sendChatQuery({
                 query,
-                image: selectedFile.type.startsWith('image/') ? selectedFile : undefined,
-                document: selectedFile.type.startsWith('image/') ? undefined : selectedFile,
+                image: selectedFile.type.startsWith("image/")
+                    ? selectedFile
+                    : undefined,
+                document: selectedFile.type.startsWith("image/")
+                    ? undefined
+                    : selectedFile,
             });
             removeFile();
         }
@@ -1221,33 +1347,33 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
     });
     // Get only assistant messages (not system messages)
     const displayMessages = messages
-        .filter((msg) => msg.role === 'assistant')
+        .filter((msg) => msg.role === "assistant")
         .slice(-maxResults);
     return (React.createElement("div", { ref: containerRef, style: {
-            position: 'relative',
+            position: "relative",
             width,
-            fontFamily: 'system-ui, -apple-system, sans-serif',
+            fontFamily: "system-ui, -apple-system, sans-serif",
         } },
         React.createElement("form", { onSubmit: handleSubmit },
-            React.createElement("div", { style: { position: 'relative' } },
-                React.createElement("input", { ref: fileInputRef, type: "file", onChange: handleFileChange, style: { display: 'none' } }),
+            React.createElement("div", { style: { position: "relative" } },
+                React.createElement("input", { ref: fileInputRef, type: "file", onChange: handleFileChange, style: { display: "none" } }),
                 React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => displayMessages.length > 0 && setIsOpen(true), placeholder: selectedFile ? `Search with ${selectedFile.name}...` : placeholder, disabled: isLoading, style: {
-                        width: '100%',
+                        width: "100%",
                         padding: theme.spacing.md,
-                        paddingRight: '180px', // Increased to make room for plus, mic, and search buttons
+                        paddingRight: "180px", // Increased to make room for plus, mic, and search buttons
                         fontSize: theme.fontSizes.md,
                         border: `1px solid ${theme.colors.border}`,
                         borderRadius: theme.borderRadius,
                         backgroundColor: theme.colors.background,
                         color: theme.colors.text,
-                        outline: 'none',
-                        boxSizing: 'border-box',
+                        outline: "none",
+                        boxSizing: "border-box",
                     } }),
                 React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Upload file", style: {
-                        position: 'absolute',
-                        right: '105px', // Position before the mic button
-                        top: '50%',
-                        transform: 'translateY(-50%)',
+                        position: "absolute",
+                        right: "105px", // Position before the mic button
+                        top: "50%",
+                        transform: "translateY(-50%)",
                         padding: theme.spacing.sm,
                         marginRight: theme.spacing.xs,
                         color: theme.colors.border,
@@ -1262,42 +1388,42 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                         height: "32px",
                     } }, PLUS_ICON_SVG),
                 isUploadMenuOpen && (React.createElement("div", { style: {
-                        position: 'absolute',
-                        right: '105px',
-                        top: '100%',
+                        position: "absolute",
+                        right: "105px",
+                        top: "100%",
                         marginTop: theme.spacing.xs,
                         backgroundColor: theme.colors.background,
                         border: `1px solid ${theme.colors.border}`,
                         borderRadius: theme.borderRadius,
                         boxShadow: theme.boxShadow,
                         zIndex: 1000,
-                        minWidth: '120px',
+                        minWidth: "120px",
                     } },
-                    React.createElement("button", { type: "button", onClick: () => handleFileSelect('image'), style: {
-                            width: '100%',
+                    React.createElement("button", { type: "button", onClick: () => handleFileSelect("image"), style: {
+                            width: "100%",
                             padding: theme.spacing.sm,
-                            backgroundColor: 'transparent',
-                            border: 'none',
+                            backgroundColor: "transparent",
+                            border: "none",
                             color: theme.colors.text,
-                            cursor: 'pointer',
-                            textAlign: 'left',
+                            cursor: "pointer",
+                            textAlign: "left",
                             fontSize: theme.fontSizes.sm,
                         } }, "\uD83D\uDCF7 Image"),
-                    React.createElement("button", { type: "button", onClick: () => handleFileSelect('document'), style: {
-                            width: '100%',
+                    React.createElement("button", { type: "button", onClick: () => handleFileSelect("document"), style: {
+                            width: "100%",
                             padding: theme.spacing.sm,
-                            backgroundColor: 'transparent',
-                            border: 'none',
+                            backgroundColor: "transparent",
+                            border: "none",
                             color: theme.colors.text,
-                            cursor: 'pointer',
-                            textAlign: 'left',
+                            cursor: "pointer",
+                            textAlign: "left",
                             fontSize: theme.fontSizes.sm,
                         } }, "\uD83D\uDCC4 Document"))),
                 React.createElement("button", { type: "button", onClick: isListening ? stopVoiceInput : startVoiceInput, disabled: isLoading, title: isListening ? "Stop recording" : "Start voice input", style: {
-                        position: 'absolute',
-                        right: '70px', // Position before the search button
-                        top: '50%',
-                        transform: 'translateY(-50%)',
+                        position: "absolute",
+                        right: "70px", // Position before the search button
+                        top: "50%",
+                        transform: "translateY(-50%)",
                         padding: theme.spacing.sm,
                         marginRight: theme.spacing.xs,
                         color: isListening ? theme.colors.primary : theme.colors.border,
@@ -1312,67 +1438,73 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                         height: "32px",
                     } }, MIC_ICON_SVG),
                 React.createElement("button", { type: "submit", disabled: isLoading || (!inputValue.trim() && !selectedFile), style: {
-                        position: 'absolute',
+                        position: "absolute",
                         right: theme.spacing.sm,
-                        top: '50%',
-                        transform: 'translateY(-50%)',
+                        top: "50%",
+                        transform: "translateY(-50%)",
                         padding: `${theme.spacing.xs} ${theme.spacing.md}`,
                         fontSize: theme.fontSizes.sm,
                         backgroundColor: theme.colors.primary,
                         color: theme.colors.background,
-                        border: 'none',
+                        border: "none",
                         borderRadius: theme.borderRadius,
-                        cursor: isLoading || (!inputValue.trim() && !selectedFile) ? 'not-allowed' : 'pointer',
+                        cursor: isLoading || (!inputValue.trim() && !selectedFile)
+                            ? "not-allowed"
+                            : "pointer",
                         opacity: isLoading || (!inputValue.trim() && !selectedFile) ? 0.5 : 1,
-                    } }, isLoading ? 'Searching...' : 'Search')),
+                    } }, isLoading ? "Searching..." : "Search")),
             selectedFile && filePreview && (React.createElement("div", { style: {
                     marginTop: theme.spacing.sm,
                     padding: theme.spacing.sm,
                     backgroundColor: theme.colors.surface,
                     border: `1px solid ${theme.colors.border}`,
                     borderRadius: theme.borderRadius,
-                    display: 'flex',
-                    alignItems: 'center',
+                    display: "flex",
+                    alignItems: "center",
                     gap: theme.spacing.sm,
                 } },
-                selectedFile.type.startsWith('image/') ? (React.createElement("img", { src: filePreview, alt: "Preview", style: {
-                        width: '40px',
-                        height: '40px',
-                        objectFit: 'cover',
+                selectedFile.type.startsWith("image/") ? (React.createElement("img", { src: filePreview, alt: "Preview", style: {
+                        width: "40px",
+                        height: "40px",
+                        objectFit: "cover",
                         borderRadius: theme.borderRadius,
                     } })) : (React.createElement("div", { style: {
-                        width: '40px',
-                        height: '40px',
+                        width: "40px",
+                        height: "40px",
                         backgroundColor: theme.colors.primary,
                         borderRadius: theme.borderRadius,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
                         color: theme.colors.background,
                         fontSize: theme.fontSizes.lg,
                     } }, "\uD83D\uDCC4")),
-                React.createElement("div", { style: { flex: 1, fontSize: theme.fontSizes.sm, color: theme.colors.text } },
-                    React.createElement("div", { style: { fontWeight: 'bold' } }, selectedFile.name),
+                React.createElement("div", { style: {
+                        flex: 1,
+                        fontSize: theme.fontSizes.sm,
+                        color: theme.colors.text,
+                    } },
+                    React.createElement("div", { style: { fontWeight: "bold" } }, selectedFile.name),
                     React.createElement("div", { style: { color: theme.colors.textSecondary } },
                         (selectedFile.size / 1024 / 1024).toFixed(2),
                         " MB")),
                 React.createElement("button", { type: "button", onClick: removeFile, style: {
                         padding: theme.spacing.xs,
-                        backgroundColor: 'transparent',
-                        border: 'none',
+                        backgroundColor: "transparent",
+                        border: "none",
                         color: theme.colors.textSecondary,
-                        cursor: 'pointer',
+                        cursor: "pointer",
                         borderRadius: theme.borderRadius,
-                        width: '24px',
-                        height: '24px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        fontSize: '18px',
+                        width: "24px",
+                        height: "24px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: "18px",
                     }, title: "Remove file" }, "\u00D7")))),
         isOpen && displayMessages.length > 0 && (React.createElement("div", { style: {
-                position: 'absolute',
-                top: '100%',
+                position: "absolute",
+                top: "100%",
                 left: 0,
                 right: 0,
                 marginTop: theme.spacing.xs,
@@ -1380,15 +1512,15 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                 border: `1px solid ${theme.colors.border}`,
                 borderRadius: theme.borderRadius,
                 boxShadow: theme.boxShadow,
-                maxHeight: '300px',
-                overflowY: 'auto',
+                maxHeight: "300px",
+                overflowY: "auto",
                 zIndex: 1000,
             } }, displayMessages.map((message) => (React.createElement("div", { key: message.id, style: {
                 padding: theme.spacing.md,
                 borderBottom: `1px solid ${theme.colors.border}`,
                 fontSize: theme.fontSizes.sm,
                 color: theme.colors.text,
-                cursor: 'pointer',
+                cursor: "pointer",
             }, onMouseEnter: (e) => {
                 e.currentTarget.style.backgroundColor = theme.colors.surface;
             }, onMouseLeave: (e) => {
@@ -1397,47 +1529,47 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
 }
 
 const darkTheme = {
-    name: 'dark',
+    name: "dark",
     colors: {
-        primary: '#90caf9',
-        secondary: '#f48fb1',
-        background: '#121212',
-        surface: '#1e1e1e',
-        text: '#ffffff',
-        textSecondary: '#b0b0b0',
-        border: '#333333',
-        error: '#f44336',
-        success: '#4caf50',
+        primary: "#90caf9",
+        secondary: "#f48fb1",
+        background: "#121212",
+        surface: "#1e1e1e",
+        text: "#ffffff",
+        textSecondary: "#b0b0b0",
+        border: "#333333",
+        error: "#f44336",
+        success: "#4caf50",
     },
     spacing: {
-        xs: '4px',
-        sm: '8px',
-        md: '16px',
-        lg: '24px',
-        xl: '32px',
+        xs: "4px",
+        sm: "8px",
+        md: "16px",
+        lg: "24px",
+        xl: "32px",
     },
     fontSizes: {
-        xs: '12px',
-        sm: '14px',
-        md: '16px',
-        lg: '18px',
-        xl: '24px',
+        xs: "12px",
+        sm: "14px",
+        md: "16px",
+        lg: "18px",
+        xl: "24px",
     },
-    borderRadius: '8px',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+    borderRadius: "8px",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.5)",
 };
 
 function getTheme(mode, customTheme) {
-    if (mode === 'custom' && customTheme) {
+    if (mode === "custom" && customTheme) {
         return customTheme;
     }
-    return mode === 'dark' ? darkTheme : lightTheme;
+    return mode === "dark" ? darkTheme : lightTheme;
 }
 function createCustomTheme(baseTheme, overrides) {
     return Object.assign(Object.assign(Object.assign({}, baseTheme), overrides), { colors: Object.assign(Object.assign({}, baseTheme.colors), (overrides.colors || {})), spacing: Object.assign(Object.assign({}, baseTheme.spacing), (overrides.spacing || {})), fontSizes: Object.assign(Object.assign({}, baseTheme.fontSizes), (overrides.fontSizes || {})) });
 }
 
-const DEFAULT_BASE_URL = 'https://react-bridge-api-14089992360.northamerica-northeast2.run.app';
+const DEFAULT_BASE_URL = "https://react-bridge-api-14089992360.northamerica-northeast2.run.app";
 class AnalyticsAPI {
     constructor(config) {
         this.config = config;
@@ -1450,8 +1582,8 @@ class AnalyticsAPI {
             const baseURL = this.config.baseURL || DEFAULT_BASE_URL;
             const url = `${baseURL}/api/analytics/configs`;
             const response = yield fetch(url, {
-                method: 'GET',
-                headers: Object.assign({ 'X-API-Key': this.config.apiKey }, this.config.headers),
+                method: "GET",
+                headers: Object.assign({ "X-API-Key": this.config.apiKey }, this.config.headers),
             });
             if (!response.ok) {
                 throw new Error(`Failed to fetch analytics configs: ${response.statusText}`);
@@ -1467,8 +1599,8 @@ class AnalyticsAPI {
             const baseURL = this.config.baseURL || DEFAULT_BASE_URL;
             const url = `${baseURL}/api/analytics/${analyticsType}/latest`;
             const response = yield fetch(url, {
-                method: 'GET',
-                headers: Object.assign({ 'X-API-Key': this.config.apiKey, 'Content-Type': 'application/json' }, this.config.headers),
+                method: "GET",
+                headers: Object.assign({ "X-API-Key": this.config.apiKey, "Content-Type": "application/json" }, this.config.headers),
             });
             if (!response.ok) {
                 if (response.status === 404) {
@@ -1487,8 +1619,8 @@ class AnalyticsAPI {
             const baseURL = this.config.baseURL || DEFAULT_BASE_URL;
             const url = `${baseURL}/api/analytics/directives/${directiveId}/status`;
             const response = yield fetch(url, {
-                method: 'PATCH',
-                headers: Object.assign({ 'X-API-Key': this.config.apiKey, 'Content-Type': 'application/json' }, this.config.headers),
+                method: "PATCH",
+                headers: Object.assign({ "X-API-Key": this.config.apiKey, "Content-Type": "application/json" }, this.config.headers),
                 body: JSON.stringify({ status }),
             });
             if (!response.ok) {
@@ -1564,14 +1696,14 @@ function useAnalyticsResult(analyticsType) {
     };
 }
 
-const MetricsPanel = ({ metrics, theme }) => {
+const MetricsPanel = ({ metrics, theme, }) => {
     const getStatusColor = (status) => {
         switch (status) {
-            case 'ok':
+            case "ok":
                 return theme.colors.success;
-            case 'warning':
-                return '#FFA500'; // Orange
-            case 'critical':
+            case "warning":
+                return "#FFA500"; // Orange
+            case "critical":
                 return theme.colors.error;
             default:
                 return theme.colors.textSecondary;
@@ -1585,8 +1717,8 @@ const MetricsPanel = ({ metrics, theme }) => {
                 color: theme.colors.text,
             } }, "Metrics"),
         React.createElement("div", { style: {
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
                 gap: theme.spacing.md,
             } }, metrics.map((metric, index) => (React.createElement("div", { key: index, style: {
                 padding: theme.spacing.md,
@@ -1595,28 +1727,28 @@ const MetricsPanel = ({ metrics, theme }) => {
                 border: `2px solid ${getStatusColor(metric.status)}`,
             } },
             React.createElement("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
                     marginBottom: theme.spacing.xs,
                 } },
                 React.createElement("span", { style: {
                         fontSize: theme.fontSizes.sm,
                         color: theme.colors.textSecondary,
-                        textTransform: 'uppercase',
-                        letterSpacing: '0.5px',
-                    } }, metric.name.replace(/_/g, ' ')),
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px",
+                    } }, metric.name.replace(/_/g, " ")),
                 React.createElement("span", { style: {
                         fontSize: theme.fontSizes.xs,
-                        padding: '2px 8px',
-                        borderRadius: '12px',
+                        padding: "2px 8px",
+                        borderRadius: "12px",
                         backgroundColor: getStatusColor(metric.status),
-                        color: '#fff',
-                        textTransform: 'uppercase',
+                        color: "#fff",
+                        textTransform: "uppercase",
                     } }, metric.status)),
             React.createElement("div", { style: {
                     fontSize: theme.fontSizes.xl,
-                    fontWeight: 'bold',
+                    fontWeight: "bold",
                     color: theme.colors.text,
                     marginBottom: theme.spacing.xs,
                 } },
@@ -1632,11 +1764,11 @@ const MetricsPanel = ({ metrics, theme }) => {
 const ObservationsPanel = ({ observations, theme, }) => {
     const getSeverityColor = (severity) => {
         switch (severity) {
-            case 'low':
+            case "low":
                 return theme.colors.success;
-            case 'medium':
-                return '#FFA500'; // Orange
-            case 'high':
+            case "medium":
+                return "#FFA500"; // Orange
+            case "high":
                 return theme.colors.error;
             default:
                 return theme.colors.textSecondary;
@@ -1649,7 +1781,11 @@ const ObservationsPanel = ({ observations, theme, }) => {
                 fontSize: theme.fontSizes.lg,
                 color: theme.colors.text,
             } }, "Observations"),
-        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } }, observations.map((observation, index) => (React.createElement("div", { key: index, style: {
+        React.createElement("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: theme.spacing.md,
+            } }, observations.map((observation, index) => (React.createElement("div", { key: index, style: {
                 padding: theme.spacing.md,
                 backgroundColor: theme.colors.surface,
                 borderRadius: theme.borderRadius,
@@ -1657,18 +1793,18 @@ const ObservationsPanel = ({ observations, theme, }) => {
                 borderLeft: `4px solid ${getSeverityColor(observation.severity)}`,
             } },
             React.createElement("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
                     marginBottom: theme.spacing.xs,
                 } },
                 React.createElement("span", { style: {
                         fontSize: theme.fontSizes.xs,
-                        padding: '2px 8px',
-                        borderRadius: '12px',
+                        padding: "2px 8px",
+                        borderRadius: "12px",
                         backgroundColor: getSeverityColor(observation.severity),
-                        color: '#fff',
-                        textTransform: 'uppercase',
+                        color: "#fff",
+                        textTransform: "uppercase",
                     } }, observation.severity),
                 React.createElement("span", { style: {
                         fontSize: theme.fontSizes.xs,
@@ -1677,7 +1813,7 @@ const ObservationsPanel = ({ observations, theme, }) => {
             React.createElement("div", { style: {
                     fontSize: theme.fontSizes.md,
                     color: theme.colors.text,
-                    lineHeight: '1.5',
+                    lineHeight: "1.5",
                 } }, observation.text)))))));
 };
 
@@ -1695,19 +1831,19 @@ function useDirectiveAction(onDirectiveAction) {
                 const result = yield onDirectiveAction(directive, action);
                 if (result.success) {
                     // Update status to 'executed' if action succeeded
-                    yield api.updateDirectiveStatus(directive.directiveId, 'executed');
+                    yield api.updateDirectiveStatus(directive.directiveId, "executed");
                 }
                 else {
                     // Update status to 'failed' if action failed
-                    yield api.updateDirectiveStatus(directive.directiveId, 'failed');
-                    throw new Error(result.error || 'Directive execution failed');
+                    yield api.updateDirectiveStatus(directive.directiveId, "failed");
+                    throw new Error(result.error || "Directive execution failed");
                 }
                 return { success: true };
             }
             else {
                 // No callback provided, just update status to 'declined'
-                if (action === 'decline') {
-                    yield api.updateDirectiveStatus(directive.directiveId, 'declined');
+                if (action === "decline") {
+                    yield api.updateDirectiveStatus(directive.directiveId, "declined");
                 }
                 return { success: true };
             }
@@ -1734,28 +1870,28 @@ const DirectivesPanel = ({ directives, theme, onDirectiveAction, onUpdate, }) =>
         if (priority >= 3)
             return theme.colors.error; // High/Critical
         if (priority === 2)
-            return '#FFA500'; // Medium
+            return "#FFA500"; // Medium
         return theme.colors.success; // Low
     };
     const getPriorityLabel = (priority) => {
         if (priority >= 3)
-            return 'Critical';
+            return "Critical";
         if (priority === 2)
-            return 'High';
+            return "High";
         if (priority === 1)
-            return 'Medium';
-        return 'Low';
+            return "Medium";
+        return "Low";
     };
     const getStatusLabel = (status) => {
         switch (status) {
-            case 'proposed':
-                return 'Pending';
-            case 'executed':
-                return 'Executed ✓';
-            case 'declined':
-                return 'Declined';
-            case 'failed':
-                return 'Failed ✗';
+            case "proposed":
+                return "Pending";
+            case "executed":
+                return "Executed ✓";
+            case "declined":
+                return "Declined";
+            case "failed":
+                return "Failed ✗";
             default:
                 return status;
         }
@@ -1775,8 +1911,12 @@ const DirectivesPanel = ({ directives, theme, onDirectiveAction, onUpdate, }) =>
                 fontSize: theme.fontSizes.lg,
                 color: theme.colors.text,
             } }, "Directives"),
-        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } }, directives.map((directive) => {
-            const isDisabled = directive.status !== 'proposed' ||
+        React.createElement("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: theme.spacing.md,
+            } }, directives.map((directive) => {
+            const isDisabled = directive.status !== "proposed" ||
                 isProcessing ||
                 processingId === directive.directiveId;
             return (React.createElement("div", { key: directive.directiveId, style: {
@@ -1786,32 +1926,32 @@ const DirectivesPanel = ({ directives, theme, onDirectiveAction, onUpdate, }) =>
                     border: `1px solid ${theme.colors.border}`,
                 } },
                 React.createElement("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
                         marginBottom: theme.spacing.sm,
                     } },
                     React.createElement("span", { style: {
                             fontSize: theme.fontSizes.xs,
-                            padding: '2px 8px',
-                            borderRadius: '12px',
+                            padding: "2px 8px",
+                            borderRadius: "12px",
                             backgroundColor: getPriorityColor(directive.priority),
-                            color: '#fff',
-                            textTransform: 'uppercase',
+                            color: "#fff",
+                            textTransform: "uppercase",
                         } }, getPriorityLabel(directive.priority)),
                     React.createElement("span", { style: {
                             fontSize: theme.fontSizes.xs,
-                            padding: '2px 8px',
-                            borderRadius: '12px',
+                            padding: "2px 8px",
+                            borderRadius: "12px",
                             backgroundColor: theme.colors.textSecondary,
-                            color: '#fff',
+                            color: "#fff",
                         } }, getStatusLabel(directive.status))),
                 React.createElement("div", { style: {
                         fontSize: theme.fontSizes.lg,
-                        fontWeight: 'bold',
+                        fontWeight: "bold",
                         color: theme.colors.text,
                         marginBottom: theme.spacing.xs,
-                    } }, directive.action.replace(/_/g, ' ').toUpperCase()),
+                    } }, directive.action.replace(/_/g, " ").toUpperCase()),
                 directive.targets.length > 0 && (React.createElement("div", { style: {
                         fontSize: theme.fontSizes.sm,
                         color: theme.colors.textSecondary,
@@ -1819,7 +1959,7 @@ const DirectivesPanel = ({ directives, theme, onDirectiveAction, onUpdate, }) =>
                     } },
                     React.createElement("strong", null, "Targets:"),
                     " ",
-                    directive.targets.join(', '))),
+                    directive.targets.join(", "))),
                 directive.parameters.length > 0 && (React.createElement("div", { style: {
                         marginBottom: theme.spacing.sm,
                         padding: theme.spacing.sm,
@@ -1828,7 +1968,7 @@ const DirectivesPanel = ({ directives, theme, onDirectiveAction, onUpdate, }) =>
                     } }, directive.parameters.map((param, index) => (React.createElement("div", { key: index, style: {
                         fontSize: theme.fontSizes.sm,
                         color: theme.colors.text,
-                        marginBottom: '4px',
+                        marginBottom: "4px",
                     } },
                     React.createElement("strong", null,
                         param.name,
@@ -1842,35 +1982,37 @@ const DirectivesPanel = ({ directives, theme, onDirectiveAction, onUpdate, }) =>
                         fontSize: theme.fontSizes.sm,
                         color: theme.colors.textSecondary,
                         marginBottom: theme.spacing.md,
-                        lineHeight: '1.5',
+                        lineHeight: "1.5",
                     } }, directive.rationale),
-                directive.status === 'proposed' && (React.createElement("div", { style: { display: 'flex', gap: theme.spacing.sm } },
-                    React.createElement("button", { onClick: () => handleDirectiveAction(directive, 'execute'), disabled: isDisabled, style: {
+                directive.status === "proposed" && (React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm } },
+                    React.createElement("button", { onClick: () => handleDirectiveAction(directive, "execute"), disabled: isDisabled, style: {
                             flex: 1,
                             padding: theme.spacing.sm,
                             backgroundColor: isDisabled
                                 ? theme.colors.textSecondary
                                 : theme.colors.success,
-                            color: '#fff',
-                            border: 'none',
+                            color: "#fff",
+                            border: "none",
                             borderRadius: theme.borderRadius,
-                            cursor: isDisabled ? 'not-allowed' : 'pointer',
+                            cursor: isDisabled ? "not-allowed" : "pointer",
                             fontSize: theme.fontSizes.sm,
-                            fontWeight: 'bold',
+                            fontWeight: "bold",
                             opacity: isDisabled ? 0.6 : 1,
-                        } }, processingId === directive.directiveId ? 'Processing...' : 'Execute'),
-                    React.createElement("button", { onClick: () => handleDirectiveAction(directive, 'decline'), disabled: isDisabled, style: {
+                        } }, processingId === directive.directiveId
+                        ? "Processing..."
+                        : "Execute"),
+                    React.createElement("button", { onClick: () => handleDirectiveAction(directive, "decline"), disabled: isDisabled, style: {
                             flex: 1,
                             padding: theme.spacing.sm,
                             backgroundColor: isDisabled
                                 ? theme.colors.textSecondary
                                 : theme.colors.error,
-                            color: '#fff',
-                            border: 'none',
+                            color: "#fff",
+                            border: "none",
                             borderRadius: theme.borderRadius,
-                            cursor: isDisabled ? 'not-allowed' : 'pointer',
+                            cursor: isDisabled ? "not-allowed" : "pointer",
                             fontSize: theme.fontSizes.sm,
-                            fontWeight: 'bold',
+                            fontWeight: "bold",
                             opacity: isDisabled ? 0.6 : 1,
                         } }, "Decline")))));
         }))));
@@ -1896,53 +2038,57 @@ const AnalyticsReport = ({ analyticsType, theme: customTheme, onDirectiveAction,
     // Use a default theme if none provided
     const theme = customTheme || {
         colors: {
-            background: '#ffffff',
-            surface: '#f5f5f5',
-            text: '#333333',
-            textSecondary: '#666666',
-            border: '#e0e0e0',
-            primary: '#007bff',
-            success: '#28a745',
-            error: '#dc3545',
-            secondary: '#6c757d',
+            background: "#ffffff",
+            surface: "#f5f5f5",
+            text: "#333333",
+            textSecondary: "#666666",
+            border: "#e0e0e0",
+            primary: "#007bff",
+            success: "#28a745",
+            error: "#dc3545",
+            secondary: "#6c757d",
         },
         spacing: {
-            xs: '4px',
-            sm: '8px',
-            md: '16px',
-            lg: '24px',
-            xl: '32px',
+            xs: "4px",
+            sm: "8px",
+            md: "16px",
+            lg: "24px",
+            xl: "32px",
         },
         fontSizes: {
-            xs: '12px',
-            sm: '14px',
-            md: '16px',
-            lg: '20px',
-            xl: '24px',
+            xs: "12px",
+            sm: "14px",
+            md: "16px",
+            lg: "20px",
+            xl: "24px",
         },
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-        name: 'default',
+        borderRadius: "8px",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+        name: "default",
     };
     return (React.createElement("div", { style: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
             backgroundColor: theme.colors.background,
         } },
         React.createElement("div", { style: {
                 padding: theme.spacing.lg,
                 borderBottom: `1px solid ${theme.colors.border}`,
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
             } },
-            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: theme.spacing.sm } },
+            React.createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: theme.spacing.sm,
+                } },
                 onBack && (React.createElement("button", { onClick: onBack, style: {
-                        background: 'none',
-                        border: 'none',
-                        cursor: 'pointer',
-                        fontSize: '24px',
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        fontSize: "24px",
                         color: theme.colors.text,
                         padding: 0,
                     } }, BACK_ICON_SVG)),
@@ -1955,33 +2101,33 @@ const AnalyticsReport = ({ analyticsType, theme: customTheme, onDirectiveAction,
                     result && (React.createElement("div", { style: {
                             fontSize: theme.fontSizes.xs,
                             color: theme.colors.textSecondary,
-                            marginTop: '4px',
+                            marginTop: "4px",
                         } },
                         "Last updated: ",
                         new Date(result.createdAt).toLocaleString())))),
-            React.createElement("div", { style: { display: 'flex', gap: theme.spacing.sm } },
+            React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm } },
                 React.createElement("button", { onClick: handleRefresh, disabled: isLoading, style: {
-                        background: 'none',
-                        border: 'none',
-                        cursor: isLoading ? 'not-allowed' : 'pointer',
-                        fontSize: '24px',
+                        background: "none",
+                        border: "none",
+                        cursor: isLoading ? "not-allowed" : "pointer",
+                        fontSize: "24px",
                         color: theme.colors.text,
                         padding: 0,
                         opacity: isLoading ? 0.5 : 1,
                     } }, REFRESH_ICON_SVG),
                 onClose && (React.createElement("button", { onClick: onClose, style: {
-                        background: 'none',
-                        border: 'none',
-                        cursor: 'pointer',
-                        fontSize: '24px',
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        fontSize: "24px",
                         color: theme.colors.text,
                         padding: 0,
                     } }, CLOSE_ICON_SVG$1)))),
         React.createElement("div", { style: {
                 flex: 1,
-                overflowY: 'auto',
+                overflowY: "auto",
                 padding: theme.spacing.lg,
-            } }, isLoading ? (React.createElement("div", { style: { textAlign: 'center', color: theme.colors.textSecondary } }, "Loading analytics result...")) : error ? (React.createElement("div", { style: {
+            } }, isLoading ? (React.createElement("div", { style: { textAlign: "center", color: theme.colors.textSecondary } }, "Loading analytics result...")) : error ? (React.createElement("div", { style: {
                 padding: theme.spacing.md,
                 backgroundColor: theme.colors.surface,
                 borderRadius: theme.borderRadius,
@@ -1989,10 +2135,14 @@ const AnalyticsReport = ({ analyticsType, theme: customTheme, onDirectiveAction,
                 color: theme.colors.error,
             } },
             "Error: ",
-            error.message)) : result ? (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.xl } },
+            error.message)) : result ? (React.createElement("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: theme.spacing.xl,
+            } },
             result.metrics.length > 0 && (React.createElement(MetricsPanel, { metrics: result.metrics, theme: theme })),
             result.observations.length > 0 && (React.createElement(ObservationsPanel, { observations: result.observations, theme: theme })),
-            result.directives.length > 0 && (React.createElement(DirectivesPanel, { directives: result.directives, theme: theme, onDirectiveAction: onDirectiveAction, onUpdate: refetch })))) : (React.createElement("div", { style: { textAlign: 'center', color: theme.colors.textSecondary } }, "No results available")))));
+            result.directives.length > 0 && (React.createElement(DirectivesPanel, { directives: result.directives, theme: theme, onDirectiveAction: onDirectiveAction, onUpdate: refetch })))) : (React.createElement("div", { style: { textAlign: "center", color: theme.colors.textSecondary } }, "No results available")))));
 };
 
 // Close Icon SVG
@@ -2001,32 +2151,32 @@ const CLOSE_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2
 const AnalyticsDrawer = ({ isOpen, onClose, configs, isLoading, theme, onDirectiveAction, }) => {
     const [selectedAnalytics, setSelectedAnalytics] = useState(null);
     // Check if mobile
-    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
+    const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
     const drawerStyles = {
-        position: 'fixed',
+        position: "fixed",
         top: 0,
         right: 0,
-        width: isMobile ? '100%' : '400px',
-        height: '100%',
+        width: isMobile ? "100%" : "400px",
+        height: "100%",
         backgroundColor: theme.colors.background,
         boxShadow: theme.boxShadow,
         zIndex: 1001,
-        display: 'flex',
-        flexDirection: 'column',
-        transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
-        transition: 'transform 0.3s ease',
+        display: "flex",
+        flexDirection: "column",
+        transform: isOpen ? "translateX(0)" : "translateX(100%)",
+        transition: "transform 0.3s ease",
     };
     const overlayStyles = {
-        position: 'fixed',
+        position: "fixed",
         top: 0,
         left: 0,
-        width: '100%',
-        height: '100%',
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        width: "100%",
+        height: "100%",
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
         zIndex: 1000,
         opacity: isOpen ? 1 : 0,
-        pointerEvents: isOpen ? 'auto' : 'none',
-        transition: 'opacity 0.3s ease',
+        pointerEvents: isOpen ? "auto" : "none",
+        transition: "opacity 0.3s ease",
     };
     if (selectedAnalytics) {
         return (React.createElement(React.Fragment, null,
@@ -2040,9 +2190,9 @@ const AnalyticsDrawer = ({ isOpen, onClose, configs, isLoading, theme, onDirecti
             React.createElement("div", { style: {
                     padding: theme.spacing.lg,
                     borderBottom: `1px solid ${theme.colors.border}`,
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
                 } },
                 React.createElement("h2", { style: {
                         margin: 0,
@@ -2050,36 +2200,41 @@ const AnalyticsDrawer = ({ isOpen, onClose, configs, isLoading, theme, onDirecti
                         color: theme.colors.text,
                     } }, "Analytics"),
                 React.createElement("button", { onClick: onClose, style: {
-                        background: 'none',
-                        border: 'none',
-                        cursor: 'pointer',
-                        fontSize: '24px',
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        fontSize: "24px",
                         color: theme.colors.text,
                         padding: 0,
                     } }, CLOSE_ICON_SVG)),
             React.createElement("div", { style: {
                     flex: 1,
-                    overflowY: 'auto',
+                    overflowY: "auto",
                     padding: theme.spacing.lg,
-                } }, isLoading ? (React.createElement("div", { style: { textAlign: 'center', color: theme.colors.textSecondary } }, "Loading analytics...")) : configs.length === 0 ? (React.createElement("div", { style: { textAlign: 'center', color: theme.colors.textSecondary } }, "No analytics configured")) : (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } }, configs.map((config) => (React.createElement("div", { key: config.configId, onClick: () => config.isEnabled && setSelectedAnalytics(config.analyticsType), style: {
+                } }, isLoading ? (React.createElement("div", { style: { textAlign: "center", color: theme.colors.textSecondary } }, "Loading analytics...")) : configs.length === 0 ? (React.createElement("div", { style: { textAlign: "center", color: theme.colors.textSecondary } }, "No analytics configured")) : (React.createElement("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: theme.spacing.md,
+                } }, configs.map((config) => (React.createElement("div", { key: config.configId, onClick: () => config.isEnabled &&
+                    setSelectedAnalytics(config.analyticsType), style: {
                     padding: theme.spacing.md,
                     backgroundColor: theme.colors.surface,
                     borderRadius: theme.borderRadius,
                     border: `1px solid ${theme.colors.border}`,
-                    cursor: config.isEnabled ? 'pointer' : 'not-allowed',
+                    cursor: config.isEnabled ? "pointer" : "not-allowed",
                     opacity: config.isEnabled ? 1 : 0.6,
-                    transition: 'transform 0.2s ease',
+                    transition: "transform 0.2s ease",
                 }, onMouseEnter: (e) => {
                     if (config.isEnabled) {
-                        e.currentTarget.style.transform = 'translateX(5px)';
+                        e.currentTarget.style.transform = "translateX(5px)";
                     }
                 }, onMouseLeave: (e) => {
-                    e.currentTarget.style.transform = 'translateX(0)';
+                    e.currentTarget.style.transform = "translateX(0)";
                 } },
                 React.createElement("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
                         marginBottom: theme.spacing.xs,
                     } },
                     React.createElement("h3", { style: {
@@ -2089,13 +2244,13 @@ const AnalyticsDrawer = ({ isOpen, onClose, configs, isLoading, theme, onDirecti
                         } }, config.analyticsType),
                     React.createElement("span", { style: {
                             fontSize: theme.fontSizes.xs,
-                            padding: '2px 8px',
-                            borderRadius: '12px',
+                            padding: "2px 8px",
+                            borderRadius: "12px",
                             backgroundColor: config.isEnabled
                                 ? theme.colors.success
                                 : theme.colors.textSecondary,
-                            color: '#fff',
-                        } }, config.isEnabled ? 'Enabled' : 'Disabled')),
+                            color: "#fff",
+                        } }, config.isEnabled ? "Enabled" : "Disabled")),
                 React.createElement("p", { style: {
                         margin: 0,
                         fontSize: theme.fontSizes.sm,
@@ -2110,43 +2265,44 @@ const AnalyticsDrawer = ({ isOpen, onClose, configs, isLoading, theme, onDirecti
                         "Frequency: ",
                         config.frequency),
                     config.lastExecutedAt && (React.createElement("div", null,
-                        "Last run: ",
+                        "Last run:",
+                        " ",
                         new Date(config.lastExecutedAt).toLocaleString()))))))))))));
 };
 
 // Analytics Icon SVG
 const ANALYTICS_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
     React.createElement("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" })));
-const AnalyticsWidget = ({ position = 'bottom-right', theme: customTheme, onDirectiveAction, }) => {
+const AnalyticsWidget = ({ position = "bottom-right", theme: customTheme, onDirectiveAction, }) => {
     const { theme: contextTheme } = useReactBridgeContext();
     const theme = customTheme || contextTheme;
     const { configs, isLoading } = useAnalyticsConfigs();
     const [isOpen, setIsOpen] = useState(false);
     const enabledCount = configs.filter((c) => c.isEnabled).length;
-    const positionStyles = position === 'bottom-right'
+    const positionStyles = position === "bottom-right"
         ? { right: theme.spacing.lg, bottom: theme.spacing.lg }
         : { left: theme.spacing.lg, bottom: theme.spacing.lg };
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: Object.assign(Object.assign({ position: 'fixed' }, positionStyles), { width: '60px', height: '60px', borderRadius: '50%', backgroundColor: theme.colors.primary, color: '#fff', border: 'none', boxShadow: theme.boxShadow, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '24px', zIndex: 1000, transition: 'transform 0.2s ease' }), onMouseEnter: (e) => {
-                e.currentTarget.style.transform = 'scale(1.1)';
+        React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: Object.assign(Object.assign({ position: "fixed" }, positionStyles), { width: "60px", height: "60px", borderRadius: "50%", backgroundColor: theme.colors.primary, color: "#fff", border: "none", boxShadow: theme.boxShadow, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "24px", zIndex: 1000, transition: "transform 0.2s ease" }), onMouseEnter: (e) => {
+                e.currentTarget.style.transform = "scale(1.1)";
             }, onMouseLeave: (e) => {
-                e.currentTarget.style.transform = 'scale(1)';
+                e.currentTarget.style.transform = "scale(1)";
             } },
             ANALYTICS_ICON_SVG,
             !isLoading && enabledCount > 0 && (React.createElement("span", { style: {
-                    position: 'absolute',
-                    top: '-5px',
-                    right: '-5px',
+                    position: "absolute",
+                    top: "-5px",
+                    right: "-5px",
                     backgroundColor: theme.colors.error,
-                    color: '#fff',
-                    borderRadius: '50%',
-                    width: '24px',
-                    height: '24px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: '12px',
-                    fontWeight: 'bold',
+                    color: "#fff",
+                    borderRadius: "50%",
+                    width: "24px",
+                    height: "24px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "12px",
+                    fontWeight: "bold",
                 } }, enabledCount))),
         isOpen && (React.createElement(AnalyticsDrawer, { isOpen: isOpen, onClose: () => setIsOpen(false), configs: configs, isLoading: isLoading, theme: theme, onDirectiveAction: onDirectiveAction }))));
 };
@@ -2516,7 +2672,7 @@ function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = t
                                 "Declined (",
                                 declinedCount,
                                 ")")),
-                        directiveTypes.length > 1 && (React.createElement("select", { value: directiveType, onChange: e => setDirectiveType(e.target.value), style: {
+                        directiveTypes.length > 1 && (React.createElement("select", { value: directiveType, onChange: (e) => setDirectiveType(e.target.value), style: {
                                 padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
                                 borderRadius: theme.borderRadius,
                                 border: `1px solid ${theme.colors.border}`,
@@ -2530,7 +2686,7 @@ function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = t
                                 cursor: "pointer",
                             } },
                             React.createElement("option", { value: "all" }, "All types"),
-                            directiveTypes.map(type => (React.createElement("option", { key: type, value: type }, type)))))),
+                            directiveTypes.map((type) => (React.createElement("option", { key: type, value: type }, type)))))),
                     filteredDirectives.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No directives match the selected filter.")),
                     React.createElement("div", { style: {
                             display: "flex",
@@ -2575,17 +2731,1810 @@ function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = t
                                 ": ",
                                 param.value)))))),
                         directive.status === "proposed" && (React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm } },
-                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "execute"), disabled: isProcessing && processingId === directive.directiveId, style: Object.assign(Object.assign({}, pillStyle(theme.colors.success)), { border: "none", cursor: isProcessing && processingId === directive.directiveId
+                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "execute"), disabled: isProcessing &&
+                                    processingId === directive.directiveId, style: Object.assign(Object.assign({}, pillStyle(theme.colors.success)), { border: "none", cursor: isProcessing &&
+                                        processingId === directive.directiveId
                                         ? "not-allowed"
-                                        : "pointer" }) }, isProcessing && processingId === directive.directiveId
+                                        : "pointer" }) }, isProcessing &&
+                                processingId === directive.directiveId
                                 ? "Processing..."
                                 : "Execute"),
-                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "decline"), disabled: isProcessing && processingId === directive.directiveId, style: Object.assign(Object.assign({}, pillStyle(theme.colors.error)), { border: "none", cursor: isProcessing && processingId === directive.directiveId
+                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "decline"), disabled: isProcessing &&
+                                    processingId === directive.directiveId, style: Object.assign(Object.assign({}, pillStyle(theme.colors.error)), { border: "none", cursor: isProcessing &&
+                                        processingId === directive.directiveId
                                         ? "not-allowed"
-                                        : "pointer" }) }, isProcessing && processingId === directive.directiveId
+                                        : "pointer" }) }, isProcessing &&
+                                processingId === directive.directiveId
                                 ? "Processing..."
                                 : "Decline"))))))))))))));
 }
 
-export { AnalyticsAPI, AnalyticsDashboard, AnalyticsReport, AnalyticsWidget, DirectivesPanel, MetricsPanel, ObservationsPanel, ReactBridgeAPI, ReactBridgeChatbox, ReactBridgeProvider, ReactBridgeSearch, WebSpeechSTTProvider, WebSpeechTTSProvider, createCustomTheme, darkTheme, getTheme, lightTheme, useAnalyticsConfigs, useAnalyticsResult, useDirectiveAction, useReactBridge, useReactBridgeContext };
+/**
+ * Request Cache Manager
+ * Implements a simple caching mechanism similar to react-query
+ * Prevents duplicate concurrent requests and caches results
+ */
+const DEFAULT_TTL = 5 * 60 * 1000; // 5 minutes
+class RequestCache {
+    constructor() {
+        this.cache = new Map();
+        this.pendingRequests = new Map();
+    }
+    /**
+     * Generate a cache key from function and parameters
+     */
+    getCacheKey(fetchFn, params) {
+        const fnString = fetchFn.toString();
+        const paramString = params ? JSON.stringify(params) : '';
+        return `${fnString}::${paramString}`;
+    }
+    /**
+     * Check if cache entry is still valid
+     */
+    isCacheValid(entry) {
+        return Date.now() - entry.timestamp < entry.ttl;
+    }
+    /**
+     * Fetch or return cached data
+     */
+    get(fetchFn_1, params_1) {
+        return __awaiter(this, arguments, void 0, function* (fetchFn, params, ttl = DEFAULT_TTL) {
+            const key = this.getCacheKey(fetchFn, params);
+            // Return valid cached data
+            const cached = this.cache.get(key);
+            if (cached && this.isCacheValid(cached)) {
+                return cached.data;
+            }
+            // Return pending request if already in flight
+            const pending = this.pendingRequests.get(key);
+            if (pending) {
+                return pending.promise;
+            }
+            // Create new request
+            const promise = fetchFn().then((data) => {
+                this.cache.set(key, {
+                    data,
+                    timestamp: Date.now(),
+                    ttl,
+                });
+                this.pendingRequests.delete(key);
+                return data;
+            }).catch((error) => {
+                this.pendingRequests.delete(key);
+                throw error;
+            });
+            this.pendingRequests.set(key, { promise });
+            return promise;
+        });
+    }
+    /**
+     * Invalidate cache entry
+     */
+    invalidate(fetchFn, params) {
+        const key = this.getCacheKey(fetchFn, params);
+        this.cache.delete(key);
+    }
+    /**
+     * Clear all cache
+     */
+    clear() {
+        this.cache.clear();
+        this.pendingRequests.clear();
+    }
+}
+// Singleton instance
+const requestCache = new RequestCache();
+
+/**
+ * useReportData Hook
+ * Fetches and manages report data with error handling
+ * Implements caching to prevent duplicate requests
+ */
+/**
+ * Generic hook for fetching report data
+ * Implements caching and deduplication to prevent infinite requests
+ * @param fetchFn - Async function to fetch report data
+ * @param dependencies - Dependencies that trigger refetch when changed
+ * @param options - Hook options (enabled flag, cache TTL)
+ */
+function useReportData(fetchFn, dependencies = [], options = {}) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const isMountedRef = useRef(true);
+    const { enabled = true, ttl = 5 * 60 * 1000 } = options;
+    // Create a stable string representation of dependencies for comparison
+    const depsString = JSON.stringify(dependencies);
+    useEffect(() => {
+        isMountedRef.current = true;
+        if (!enabled) {
+            setLoading(false);
+            return;
+        }
+        let cancelled = false;
+        const fetchData = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                setLoading(true);
+                setError(null);
+                // Use cache to avoid duplicate requests
+                const result = yield requestCache.get(fetchFn, depsString, ttl);
+                if (!cancelled && isMountedRef.current) {
+                    setData(result);
+                }
+            }
+            catch (err) {
+                if (!cancelled && isMountedRef.current) {
+                    const error = err instanceof Error ? err : new Error("Unknown error occurred");
+                    setError(error);
+                    setData(null);
+                }
+            }
+            finally {
+                if (!cancelled && isMountedRef.current) {
+                    setLoading(false);
+                }
+            }
+        });
+        fetchData();
+        return () => {
+            cancelled = true;
+        };
+    }, [depsString, enabled, ttl, fetchFn]);
+    useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    const refetch = () => __awaiter(this, void 0, void 0, function* () {
+        // Invalidate cache and refetch
+        requestCache.invalidate(fetchFn, depsString);
+        try {
+            setLoading(true);
+            setError(null);
+            const result = yield requestCache.get(fetchFn, depsString, ttl);
+            if (isMountedRef.current) {
+                setData(result);
+            }
+        }
+        catch (err) {
+            if (isMountedRef.current) {
+                const error = err instanceof Error ? err : new Error("Unknown error occurred");
+                setError(error);
+                setData(null);
+            }
+        }
+        finally {
+            if (isMountedRef.current) {
+                setLoading(false);
+            }
+        }
+    });
+    return { data, loading, error, refetch };
+}
+
+/**
+ * Date Range Service
+ * Handles date range calculations and options
+ */
+class DateRangeService {
+    /**
+     * Calculate date range based on predefined options
+     */
+    static getDateRange(option) {
+        const today = new Date();
+        const endDate = today.toISOString().split("T")[0]; // YYYY-MM-DD format
+        let startDate;
+        switch (option) {
+            case "past-week":
+                startDate = new Date(today);
+                startDate.setDate(today.getDate() - 7);
+                break;
+            case "past-month":
+                startDate = new Date(today);
+                startDate.setMonth(today.getMonth() - 1);
+                break;
+            case "past-3-months":
+                startDate = new Date(today);
+                startDate.setMonth(today.getMonth() - 3);
+                break;
+            case "past-6-months":
+                startDate = new Date(today);
+                startDate.setMonth(today.getMonth() - 6);
+                break;
+            case "past-year":
+                startDate = new Date(today);
+                startDate.setFullYear(today.getFullYear() - 1);
+                break;
+            default:
+                startDate = new Date(today);
+                startDate.setMonth(today.getMonth() - 1);
+        }
+        return {
+            label: this.getLabel(option),
+            startDate: startDate.toISOString().split("T")[0],
+            endDate,
+        };
+    }
+    /**
+     * Get human-readable label for date range option
+     */
+    static getLabel(option) {
+        const labels = {
+            "past-week": "Past Week",
+            "past-month": "Past Month",
+            "past-3-months": "Past 3 Months",
+            "past-6-months": "Past 6 Months",
+            "past-year": "Past Year",
+        };
+        return labels[option];
+    }
+    /**
+     * Get all available date range options
+     */
+    static getAllOptions() {
+        return [
+            { value: "past-week", label: "Past Week" },
+            { value: "past-month", label: "Past Month" },
+            { value: "past-3-months", label: "Past 3 Months" },
+            { value: "past-6-months", label: "Past 6 Months" },
+            { value: "past-year", label: "Past Year" },
+        ];
+    }
+    /**
+     * Format date for display (e.g., "Jan 6 - Feb 5")
+     */
+    static formatDateRangeForDisplay(startDate, endDate) {
+        try {
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+            const formatPart = (date) => {
+                const month = date.toLocaleString("default", { month: "short" });
+                const day = date.getDate();
+                return `${month} ${day}`;
+            };
+            return `${formatPart(start)} - ${formatPart(end)}`;
+        }
+        catch (_a) {
+            return `${startDate} - ${endDate}`;
+        }
+    }
+}
+
+/**
+ * useDateRange Hook
+ * Manages date range state with predefined options
+ */
+/**
+ * Hook to manage date range selection for reports
+ * @param defaultOption - Default date range option (default: 'past-month')
+ */
+function useDateRange(defaultOption = "past-month") {
+    const [selectedOption, setSelectedOption] = useState(defaultOption);
+    const dateRange = DateRangeService.getDateRange(selectedOption);
+    return {
+        selectedOption,
+        setSelectedOption,
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+        label: dateRange.label,
+    };
+}
+
+/**
+ * DateRangeSelector Component
+ * Select dropdown for date range selection
+ */
+const DateRangeSelector = ({ selectedOption, onSelect, theme, }) => {
+    const options = DateRangeService.getAllOptions();
+    return (React.createElement("select", { value: selectedOption, onChange: (e) => onSelect(e.target.value), style: {
+            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "6px"} ${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px"}`,
+            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "13px",
+            fontWeight: "500",
+            borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
+            border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#d0d0d0"}`,
+            backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f9f9f9",
+            color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+            cursor: "pointer",
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+        }, onFocus: (e) => {
+            e.currentTarget.style.borderColor =
+                (theme === null || theme === void 0 ? void 0 : theme.colors.primary) || "#1976d2";
+            e.currentTarget.style.boxShadow = `0 0 0 2px ${((theme === null || theme === void 0 ? void 0 : theme.colors.primary) || "#1976d2") + "20"}`;
+        }, onBlur: (e) => {
+            e.currentTarget.style.borderColor =
+                (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#d0d0d0";
+            e.currentTarget.style.boxShadow = "none";
+        } }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))));
+};
+
+/**
+ * LoadingState Component
+ * Skeleton loader for reports
+ */
+const Skeleton = ({ theme }) => (React.createElement("div", { style: {
+        backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0",
+        borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+        height: "16px",
+        marginBottom: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
+        animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+    } }));
+const LoadingState = ({ theme, variant = "minimal", }) => {
+    if (variant === "minimal") {
+        return (React.createElement("div", { style: {
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.lg) || "24px",
+                textAlign: "center",
+                color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+            } },
+            React.createElement("div", { style: {
+                    display: "inline-block",
+                    width: "40px",
+                    height: "40px",
+                    border: `3px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderTop: `3px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.primary) || "#1976d2"}`,
+                    borderRadius: "50%",
+                    animation: "spin 0.6s linear infinite",
+                } }),
+            React.createElement("p", { style: { marginTop: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px" } }, "Loading report...")));
+    }
+    if (variant === "cards") {
+        return (React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+            } }, [1, 2, 3, 4].map((i) => (React.createElement("div", { key: i, style: {
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+            } },
+            React.createElement(Skeleton, { theme: theme }),
+            React.createElement(Skeleton, { theme: theme }),
+            React.createElement(Skeleton, { theme: theme }))))));
+    }
+    return (React.createElement("div", { style: {
+            padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+            border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+            borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+            backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+        } }, [1, 2, 3, 4, 5].map((i) => (React.createElement("div", { key: i, style: { marginBottom: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px" } },
+        React.createElement(Skeleton, { theme: theme }),
+        React.createElement(Skeleton, { theme: theme }))))));
+};
+
+/**
+ * ReportLayout Component
+ * Wrapper for report pages with header and date range selector
+ */
+const ReportLayout = ({ title, description, selectedDateRange, onDateRangeChange, loading, error, children, theme: themeProp, }) => {
+    const { theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
+    return (React.createElement("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "12px",
+        } },
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "12px",
+                flexWrap: "wrap",
+            } },
+            React.createElement("div", { style: { flex: 1, minWidth: "200px" } },
+                React.createElement("h1", { style: {
+                        margin: 0,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.lg) || "20px",
+                        fontWeight: "700",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                    } }, title),
+                description && (React.createElement("p", { style: {
+                        margin: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0 0 0`,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "12px",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                    } }, description))),
+            React.createElement(DateRangeSelector, { selectedOption: selectedDateRange, onSelect: onDateRangeChange, theme: theme })),
+        loading ? (React.createElement(LoadingState, { theme: theme })) : error ? (React.createElement("div", { style: {
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "12px",
+                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
+                backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.error)
+                    ? `${theme.colors.error}15`
+                    : "#FEE2E2",
+                border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.error) || "#f44336"}`,
+            } },
+            React.createElement("p", { style: {
+                    margin: 0,
+                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "12px",
+                    color: (theme === null || theme === void 0 ? void 0 : theme.colors.error) || "#f44336",
+                    fontWeight: "500",
+                } },
+                "Error loading report: ",
+                error.message))) : (children)));
+};
+
+/**
+ * MetricCard Component
+ * Displays a single KPI metric with optional trend indicator
+ */
+const MetricCard = ({ label, value, unit, trend, trendValue, icon, onClick, theme, }) => {
+    const getTrendColor = () => {
+        if (!theme)
+            return "inherit";
+        if (trend === "up")
+            return theme.colors.success;
+        if (trend === "down")
+            return theme.colors.error;
+        return theme.colors.textSecondary;
+    };
+    const getTrendIcon = () => {
+        if (trend === "up")
+            return "↑";
+        if (trend === "down")
+            return "↓";
+        return "→";
+    };
+    const containerStyles = {
+        padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
+        borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
+        border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+        backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+        cursor: onClick ? "pointer" : "default",
+        transition: "all 0.2s ease",
+    };
+    return (React.createElement("div", { style: containerStyles, onClick: onClick, onMouseEnter: (e) => {
+            if (onClick) {
+                e.currentTarget.style.boxShadow =
+                    (theme === null || theme === void 0 ? void 0 : theme.boxShadow) || "0 2px 8px rgba(0, 0, 0, 0.1)";
+            }
+        }, onMouseLeave: (e) => {
+            if (onClick) {
+                e.currentTarget.style.boxShadow = "none";
+            }
+        } },
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+            } },
+            React.createElement("div", { style: { flex: 1 } },
+                React.createElement("p", { style: {
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                        margin: "0 0 6px 0",
+                    } }, label),
+                React.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "baseline",
+                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
+                    } },
+                    React.createElement("p", { style: {
+                            fontSize: "18px",
+                            fontWeight: "bold",
+                            color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                            margin: 0,
+                        } }, value),
+                    unit && (React.createElement("p", { style: {
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
+                            color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                            margin: 0,
+                        } }, unit))),
+                trend && trendValue !== undefined && (React.createElement("div", { style: {
+                        fontSize: "10px",
+                        color: getTrendColor(),
+                        marginTop: "4px",
+                    } },
+                    getTrendIcon(),
+                    " ",
+                    trendValue,
+                    "%"))),
+            icon && (React.createElement("div", { style: {
+                    color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#999",
+                    fontSize: "18px",
+                } }, icon)))));
+};
+
+/**
+ * TrendChart Component
+ * Renders a simple line/area chart for trend data
+ */
+const TrendChart = ({ data, title, height = 200, theme, showArea = true, }) => {
+    if (!data || data.length === 0) {
+        return (React.createElement("div", { style: {
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.lg) || "24px",
+                textAlign: "center",
+                color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+            } }, "No data available"));
+    }
+    const padding = 40;
+    const width = 600;
+    const innerHeight = height - padding * 2;
+    const innerWidth = width - padding * 2;
+    const maxValue = Math.max(...data.map((d) => d.value));
+    const minValue = Math.min(...data.map((d) => d.value));
+    const range = maxValue - minValue || 1;
+    const points = data.map((d, i) => {
+        const x = padding + (i / (data.length - 1 || 1)) * innerWidth;
+        const y = padding + innerHeight - ((d.value - minValue) / range) * innerHeight;
+        return Object.assign({ x, y }, d);
+    });
+    const pathD = points
+        .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
+        .join(" ");
+    const areaPathD = `${pathD} L ${points[points.length - 1].x} ${padding + innerHeight} L ${points[0].x} ${padding + innerHeight} Z`;
+    const lineColor = (theme === null || theme === void 0 ? void 0 : theme.colors.primary) || "#1976d2";
+    const areaColor = (theme === null || theme === void 0 ? void 0 : theme.colors.primary) || "#1976d2";
+    return (React.createElement("div", null,
+        title && (React.createElement("h3", { style: {
+                margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.md) || "16px",
+                fontWeight: "600",
+                color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+            } }, title)),
+        React.createElement("svg", { width: "100%", height: height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", style: { overflow: "visible" } },
+            [0, 0.25, 0.5, 0.75, 1].map((factor) => {
+                const y = padding + innerHeight - factor * innerHeight;
+                return (React.createElement("line", { key: `grid-${factor}`, x1: padding, y1: y, x2: width - padding, y2: y, stroke: (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0", strokeWidth: "1", strokeDasharray: "4", opacity: "0.5" }));
+            }),
+            showArea && React.createElement("path", { d: areaPathD, fill: areaColor, fillOpacity: "0.1" }),
+            React.createElement("path", { d: pathD, fill: "none", stroke: lineColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            points.map((p, i) => (React.createElement("circle", { key: `point-${i}`, cx: p.x, cy: p.y, r: "3", fill: lineColor, opacity: "0.8" }))),
+            points.map((p, i) => {
+                if (data.length <= 6 || i % Math.ceil(data.length / 6) === 0) {
+                    return (React.createElement("text", { key: `label-${i}`, x: p.x, y: height - padding + 20, textAnchor: "middle", fontSize: "12", fill: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" }, p.label));
+                }
+            }))));
+};
+
+/**
+ * Executive Dashboard Report
+ * High-level directive execution metrics, trends, and cost impact
+ */
+const ExecutiveDashboard = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
+    const dateRange = useDateRange(defaultDateRange);
+    const { data, loading, error } = useReportData(() => api.getExecutiveDashboard({
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+    }), [dateRange.startDate, dateRange.endDate]);
+    const trendData = ((_a = data === null || data === void 0 ? void 0 : data.monthlyTrends) === null || _a === void 0 ? void 0 : _a.map((m) => ({
+        label: m.month,
+        value: m.successPercentage,
+    }))) || [];
+    return (React.createElement(ReportLayout, { title: "Executive Dashboard", description: "High-level directive execution metrics and trends", selectedDateRange: dateRange.selectedOption, onDateRangeChange: dateRange.setSelectedOption, loading: loading, error: error, theme: theme },
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
+            } },
+            React.createElement(MetricCard, { label: "Total Directives", value: (_b = data === null || data === void 0 ? void 0 : data.totalDirectives) !== null && _b !== void 0 ? _b : 0, theme: theme }),
+            React.createElement(MetricCard, { label: "Success Rate", value: (_d = (_c = data === null || data === void 0 ? void 0 : data.successRate) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : 0, unit: "%", trend: ((_e = data === null || data === void 0 ? void 0 : data.successRate) !== null && _e !== void 0 ? _e : 0 > 80) ? "up" : "neutral", theme: theme }),
+            React.createElement(MetricCard, { label: "Auto-Executed", value: (_f = data === null || data === void 0 ? void 0 : data.autoExecutedDirectives) !== null && _f !== void 0 ? _f : 0, theme: theme }),
+            React.createElement(MetricCard, { label: "Cost Impact", value: (_h = (_g = data === null || data === void 0 ? void 0 : data.totalCostImpact) === null || _g === void 0 ? void 0 : _g.toFixed(2)) !== null && _h !== void 0 ? _h : 0, unit: "$", theme: theme })),
+        trendData.length > 0 && (React.createElement("div", { style: {
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
+                border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
+                backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+            } },
+            React.createElement(TrendChart, { data: trendData, title: "Success Rate Trend", theme: theme, showArea: true }))),
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
+            } },
+            React.createElement("div", { style: {
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
+                    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                } },
+                React.createElement("h3", { style: {
+                        margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px"} 0`,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "13px",
+                        fontWeight: "600",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                    } }, "Execution Summary"),
+                React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
+                    } },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "3px"} 0`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Successful:"),
+                        React.createElement("span", { style: {
+                                fontWeight: "600",
+                                color: (theme === null || theme === void 0 ? void 0 : theme.colors.success) || "#4caf50",
+                            } }, (_j = data === null || data === void 0 ? void 0 : data.successfulExecutions) !== null && _j !== void 0 ? _j : 0)),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "3px"} 0`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Failed:"),
+                        React.createElement("span", { style: {
+                                fontWeight: "600",
+                                color: (theme === null || theme === void 0 ? void 0 : theme.colors.error) || "#f44336",
+                            } }, (_k = data === null || data === void 0 ? void 0 : data.failedExecutions) !== null && _k !== void 0 ? _k : 0)),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "3px"} 0`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Avg Cost:"),
+                        React.createElement("span", { style: {
+                                fontWeight: "600",
+                                color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                            } },
+                            "$", (_m = (_l = data === null || data === void 0 ? void 0 : data.averageCostPerDirective) === null || _l === void 0 ? void 0 : _l.toFixed(2)) !== null && _m !== void 0 ? _m : 0)))))));
+};
+
+/**
+ * ProgressBar Component
+ * Displays percentage with visual bar
+ */
+const ProgressBar = ({ percentage, label, showPercentage = true, height = "medium", theme, }) => {
+    const normalizedPercentage = Math.min(Math.max(percentage, 0), 100);
+    const getBarColor = () => {
+        if (!theme) {
+            if (normalizedPercentage >= 80)
+                return "#10B981";
+            if (normalizedPercentage >= 60)
+                return "#F59E0B";
+            return "#EF4444";
+        }
+        if (normalizedPercentage >= 80)
+            return theme.colors.success;
+        if (normalizedPercentage >= 60)
+            return "#F59E0B"; // warning
+        return theme.colors.error;
+    };
+    const heightConfig = {
+        small: "4px",
+        medium: "8px",
+        large: "12px",
+    };
+    return (React.createElement("div", null,
+        (label || showPercentage) && (React.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
+            } },
+            label && (React.createElement("span", { style: {
+                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                    color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                    fontWeight: "500",
+                } }, label)),
+            showPercentage && (React.createElement("span", { style: {
+                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "12px",
+                    color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                } },
+                normalizedPercentage.toFixed(1),
+                "%")))),
+        React.createElement("div", { style: {
+                width: "100%",
+                height: heightConfig[height],
+                backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0",
+                borderRadius: "4px",
+                overflow: "hidden",
+            } },
+            React.createElement("div", { style: {
+                    height: "100%",
+                    width: `${normalizedPercentage}%`,
+                    backgroundColor: getBarColor(),
+                    transition: "width 0.3s ease",
+                } }))));
+};
+
+/**
+ * DataTable Component
+ * Generic sortable/paginated table for report data
+ */
+const DataTable = React.forwardRef(({ columns, data, title, pageSize = 10, theme }, ref) => {
+    const [sortKey, setSortKey] = useState(null);
+    const [sortOrder, setSortOrder] = useState("asc");
+    const [currentPage, setCurrentPage] = useState(0);
+    const sortedData = useMemo(() => {
+        if (!sortKey)
+            return data;
+        const sorted = [...data].sort((a, b) => {
+            const aVal = a[sortKey];
+            const bVal = b[sortKey];
+            if (aVal < bVal)
+                return sortOrder === "asc" ? -1 : 1;
+            if (aVal > bVal)
+                return sortOrder === "asc" ? 1 : -1;
+            return 0;
+        });
+        return sorted;
+    }, [data, sortKey, sortOrder]);
+    const paginatedData = useMemo(() => {
+        const start = currentPage * pageSize;
+        return sortedData.slice(start, start + pageSize);
+    }, [sortedData, currentPage, pageSize]);
+    const totalPages = Math.ceil(sortedData.length / pageSize);
+    const handleSort = (key) => {
+        if (sortKey === key) {
+            setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+        }
+        else {
+            setSortKey(key);
+            setSortOrder("asc");
+        }
+        setCurrentPage(0);
+    };
+    return (React.createElement("div", { ref: ref },
+        title && (React.createElement("h3", { style: {
+                margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.md) || "16px",
+                fontWeight: "600",
+                color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+            } }, title)),
+        data.length === 0 ? (React.createElement("div", { style: {
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.lg) || "24px",
+                textAlign: "center",
+                color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+            } }, "No data available")) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    overflowX: "auto",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                } },
+                React.createElement("table", { style: {
+                        width: "100%",
+                        borderCollapse: "collapse",
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                    } },
+                    React.createElement("thead", null,
+                        React.createElement("tr", { style: {
+                                backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                                borderBottom: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                            } }, columns.map((col) => (React.createElement("th", { key: String(col.key), onClick: () => col.sortable && handleSort(String(col.key)), style: {
+                                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                                textAlign: "left",
+                                fontWeight: "600",
+                                color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                                cursor: col.sortable ? "pointer" : "default",
+                                userSelect: "none",
+                                width: col.width,
+                                whiteSpace: "nowrap",
+                            }, onMouseEnter: (e) => {
+                                if (col.sortable) {
+                                    e.currentTarget.style.backgroundColor =
+                                        (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0";
+                                }
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.backgroundColor =
+                                    (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5";
+                            } },
+                            React.createElement("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "4px",
+                                } },
+                                col.label,
+                                col.sortable && sortKey === String(col.key) && (React.createElement("span", null, sortOrder === "asc" ? "↑" : "↓")))))))),
+                    React.createElement("tbody", null, paginatedData.map((row, idx) => (React.createElement("tr", { key: row.id || idx, style: {
+                            borderBottom: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                            backgroundColor: idx % 2 === 0
+                                ? "transparent"
+                                : (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor =
+                                (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0";
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor =
+                                idx % 2 === 0
+                                    ? "transparent"
+                                    : (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5";
+                        } }, columns.map((col) => (React.createElement("td", { key: String(col.key), style: {
+                            padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                            color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                        } }, col.render
+                        ? col.render(row[col.key], row)
+                        : String(row[col.key])))))))))),
+            totalPages > 1 && (React.createElement("div", { style: {
+                    marginTop: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                } },
+                React.createElement("span", { style: {
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                    } },
+                    "Page ",
+                    currentPage + 1,
+                    " of ",
+                    totalPages),
+                React.createElement("div", { style: { display: "flex", gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px" } },
+                    React.createElement("button", { onClick: () => setCurrentPage(0), disabled: currentPage === 0, style: {
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} ${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px"}`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                            borderRadius: "4px",
+                            border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                            backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                            cursor: currentPage === 0 ? "not-allowed" : "pointer",
+                            opacity: currentPage === 0 ? 0.5 : 1,
+                        } }, "First"),
+                    React.createElement("button", { onClick: () => setCurrentPage(Math.max(0, currentPage - 1)), disabled: currentPage === 0, style: {
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} ${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px"}`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                            borderRadius: "4px",
+                            border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                            backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                            cursor: currentPage === 0 ? "not-allowed" : "pointer",
+                            opacity: currentPage === 0 ? 0.5 : 1,
+                        } }, "Previous"),
+                    React.createElement("button", { onClick: () => setCurrentPage(Math.min(totalPages - 1, currentPage + 1)), disabled: currentPage === totalPages - 1, style: {
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} ${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px"}`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                            borderRadius: "4px",
+                            border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                            backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                            cursor: currentPage === totalPages - 1
+                                ? "not-allowed"
+                                : "pointer",
+                            opacity: currentPage === totalPages - 1 ? 0.5 : 1,
+                        } }, "Next"),
+                    React.createElement("button", { onClick: () => setCurrentPage(totalPages - 1), disabled: currentPage === totalPages - 1, style: {
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} ${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px"}`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                            borderRadius: "4px",
+                            border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                            backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                            cursor: currentPage === totalPages - 1
+                                ? "not-allowed"
+                                : "pointer",
+                            opacity: currentPage === totalPages - 1 ? 0.5 : 1,
+                        } }, "Last"))))))));
+});
+DataTable.displayName = "DataTable";
+
+/**
+ * Supply Chain Risk Report
+ * Supply chain risks including inventory, supplier, and cost analysis
+ */
+const SupplyChainRisk = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
+    const dateRange = useDateRange(defaultDateRange);
+    const { data, loading, error } = useReportData(() => api.getSupplyChainRisk({
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+    }), [dateRange.startDate, dateRange.endDate]);
+    const riskPercentage = (_a = data === null || data === void 0 ? void 0 : data.overallRiskScore) !== null && _a !== void 0 ? _a : 0;
+    ((_b = data === null || data === void 0 ? void 0 : data.highRiskCount) !== null && _b !== void 0 ? _b : 0) +
+        ((_c = data === null || data === void 0 ? void 0 : data.mediumRiskCount) !== null && _c !== void 0 ? _c : 0) +
+        ((_d = data === null || data === void 0 ? void 0 : data.lowRiskCount) !== null && _d !== void 0 ? _d : 0);
+    const tableColumns = [
+        {
+            key: "issueType",
+            label: "Issue Type",
+            sortable: true,
+        },
+        {
+            key: "description",
+            label: "Description",
+            sortable: true,
+        },
+        {
+            key: "affectedRecords",
+            label: "Affected Records",
+            sortable: true,
+        },
+        {
+            key: "severity",
+            label: "Severity",
+            sortable: true,
+            render: (value) => {
+                const color = value === "high"
+                    ? theme === null || theme === void 0 ? void 0 : theme.colors.error
+                    : value === "medium"
+                        ? "#F59E0B"
+                        : theme === null || theme === void 0 ? void 0 : theme.colors.success;
+                return (React.createElement("span", { style: { color, fontWeight: "600" } }, value.toUpperCase()));
+            },
+        },
+    ];
+    return (React.createElement(ReportLayout, { title: "Supply Chain Risk", description: "Inventory, supplier, and cost risk analysis", selectedDateRange: dateRange.selectedOption, onDateRangeChange: dateRange.setSelectedOption, loading: loading, error: error, theme: theme },
+        React.createElement("div", { style: {
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+            } },
+            React.createElement("h3", { style: {
+                    margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.lg) || "18px",
+                    fontWeight: "600",
+                    color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                } }, "Overall Risk Assessment"),
+            React.createElement(ProgressBar, { percentage: riskPercentage, label: "Risk Score", theme: theme, height: "large" })),
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+            } },
+            React.createElement(MetricCard, { label: "High Risk Items", value: (_e = data === null || data === void 0 ? void 0 : data.highRiskCount) !== null && _e !== void 0 ? _e : 0, theme: theme }),
+            React.createElement(MetricCard, { label: "Medium Risk Items", value: (_f = data === null || data === void 0 ? void 0 : data.mediumRiskCount) !== null && _f !== void 0 ? _f : 0, theme: theme }),
+            React.createElement(MetricCard, { label: "Low Risk Items", value: (_g = data === null || data === void 0 ? void 0 : data.lowRiskCount) !== null && _g !== void 0 ? _g : 0, theme: theme })),
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+            } },
+            React.createElement("div", { style: {
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                } },
+                React.createElement("h4", { style: {
+                        margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.md) || "16px",
+                        fontWeight: "600",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                    } }, "Inventory Risk"),
+                React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                    } },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Low Stock Items:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_j = (_h = data === null || data === void 0 ? void 0 : data.inventoryRisk) === null || _h === void 0 ? void 0 : _h.lowStockItems) !== null && _j !== void 0 ? _j : 0)),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Overstocked Items:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_l = (_k = data === null || data === void 0 ? void 0 : data.inventoryRisk) === null || _k === void 0 ? void 0 : _k.overstockedItems) !== null && _l !== void 0 ? _l : 0)),
+                    React.createElement(ProgressBar, { percentage: (_o = (_m = data === null || data === void 0 ? void 0 : data.inventoryRisk) === null || _m === void 0 ? void 0 : _m.averageStockHealth) !== null && _o !== void 0 ? _o : 0, label: "Stock Health", theme: theme }))),
+            React.createElement("div", { style: {
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                } },
+                React.createElement("h4", { style: {
+                        margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.md) || "16px",
+                        fontWeight: "600",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                    } }, "Supplier Risk"),
+                React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                    } },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Unreliable Suppliers:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_q = (_p = data === null || data === void 0 ? void 0 : data.supplierRisk) === null || _p === void 0 ? void 0 : _p.unreliableSuppliers) !== null && _q !== void 0 ? _q : 0)),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "High Defect Rate:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_s = (_r = data === null || data === void 0 ? void 0 : data.supplierRisk) === null || _r === void 0 ? void 0 : _r.highDefectRateSuppliers) !== null && _s !== void 0 ? _s : 0)),
+                    React.createElement(ProgressBar, { percentage: (_u = (_t = data === null || data === void 0 ? void 0 : data.supplierRisk) === null || _t === void 0 ? void 0 : _t.averageSupplierScore) !== null && _u !== void 0 ? _u : 0, label: "Supplier Score", theme: theme }))),
+            React.createElement("div", { style: {
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                } },
+                React.createElement("h4", { style: {
+                        margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.md) || "16px",
+                        fontWeight: "600",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                    } }, "Cost Risk"),
+                React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                    } },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Cost Variance:"),
+                        React.createElement("span", { style: {
+                                fontWeight: "600",
+                                color: (theme === null || theme === void 0 ? void 0 : theme.colors.error) || "#f44336",
+                            } },
+                            "$", (_x = (_w = (_v = data === null || data === void 0 ? void 0 : data.costRisk) === null || _v === void 0 ? void 0 : _v.unexpectedCostVariance) === null || _w === void 0 ? void 0 : _w.toFixed(2)) !== null && _x !== void 0 ? _x : 0)),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Potential Savings:"),
+                        React.createElement("span", { style: {
+                                fontWeight: "600",
+                                color: (theme === null || theme === void 0 ? void 0 : theme.colors.success) || "#4caf50",
+                            } },
+                            "$", (_0 = (_z = (_y = data === null || data === void 0 ? void 0 : data.costRisk) === null || _y === void 0 ? void 0 : _y.potentialSavings) === null || _z === void 0 ? void 0 : _z.toFixed(2)) !== null && _0 !== void 0 ? _0 : 0)),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Volatility Index:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_3 = (_2 = (_1 = data === null || data === void 0 ? void 0 : data.costRisk) === null || _1 === void 0 ? void 0 : _1.costVolatilityIndex) === null || _2 === void 0 ? void 0 : _2.toFixed(2)) !== null && _3 !== void 0 ? _3 : 0,
+                            "%"))))),
+        (data === null || data === void 0 ? void 0 : data.dataQualityIssues) && data.dataQualityIssues.length > 0 && (React.createElement("div", null,
+            React.createElement(DataTable, { title: "Data Quality Issues", columns: tableColumns, data: data.dataQualityIssues.map((issue, idx) => (Object.assign({ id: idx }, issue))), pageSize: 5, theme: theme })))));
+};
+
+/**
+ * StatusBadge Component
+ * Displays status with color-coded background
+ */
+const getStatusConfig = (status, theme) => {
+    const baseConfig = {
+        ok: { label: "OK" },
+        warning: { label: "Warning" },
+        critical: { label: "Critical" },
+        proposed: { label: "Proposed" },
+        executed: { label: "Executed" },
+        declined: { label: "Declined" },
+        failed: { label: "Failed" },
+        "auto-executed": { label: "Auto Executed" },
+    };
+    const config = baseConfig[status];
+    if (theme) {
+        const statusColors = {
+            ok: { bg: "rgba(16, 185, 129, 0.15)", text: theme.colors.success },
+            warning: { bg: "rgba(245, 158, 11, 0.15)", text: "#F59E0B" },
+            critical: { bg: "rgba(239, 68, 68, 0.15)", text: theme.colors.error },
+            proposed: { bg: "rgba(59, 130, 246, 0.15)", text: theme.colors.primary },
+            executed: { bg: "rgba(16, 185, 129, 0.15)", text: theme.colors.success },
+            declined: {
+                bg: "rgba(156, 163, 175, 0.15)",
+                text: theme.colors.textSecondary,
+            },
+            failed: { bg: "rgba(239, 68, 68, 0.15)", text: theme.colors.error },
+            "auto-executed": {
+                bg: "rgba(16, 185, 129, 0.15)",
+                text: theme.colors.success,
+            },
+        };
+        return {
+            bg: statusColors[status].bg,
+            text: statusColors[status].text,
+            label: config.label,
+        };
+    }
+    const defaultColors = {
+        ok: { bg: "#D1FAE5", text: "#059669" },
+        warning: { bg: "#FEF3C7", text: "#D97706" },
+        critical: { bg: "#FEE2E2", text: "#DC2626" },
+        proposed: { bg: "#DBEAFE", text: "#1D4ED8" },
+        executed: { bg: "#D1FAE5", text: "#059669" },
+        declined: { bg: "#E5E7EB", text: "#4B5563" },
+        failed: { bg: "#FEE2E2", text: "#DC2626" },
+        "auto-executed": { bg: "#D1FAE5", text: "#059669" },
+    };
+    return {
+        bg: defaultColors[status].bg,
+        text: defaultColors[status].text,
+        label: config.label,
+    };
+};
+const StatusBadge = ({ status, label, theme, }) => {
+    const config = getStatusConfig(status, theme);
+    return (React.createElement("span", { style: {
+            display: "inline-flex",
+            alignItems: "center",
+            paddingLeft: "10px",
+            paddingRight: "10px",
+            paddingTop: "4px",
+            paddingBottom: "4px",
+            borderRadius: "4px",
+            fontSize: "12px",
+            fontWeight: "500",
+            backgroundColor: config.bg,
+            color: config.text,
+            whiteSpace: "nowrap",
+        } }, label || config.label));
+};
+
+/**
+ * Execution Audit Trail Report
+ * Complete execution history and audit information
+ */
+const ExecutionAuditTrail = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
+    const dateRange = useDateRange(defaultDateRange);
+    const [directiveTypeFilter, setDirectiveTypeFilter] = useState("");
+    const { data, loading, error } = useReportData(() => api.getExecutionAuditTrail({
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+        directiveType: directiveTypeFilter || undefined,
+    }), [dateRange.startDate, dateRange.endDate, directiveTypeFilter]);
+    const tableColumns = [
+        {
+            key: "directiveAction",
+            label: "Directive Action",
+            sortable: true,
+            width: "200px",
+        },
+        {
+            key: "status",
+            label: "Status",
+            sortable: true,
+            render: (value) => React.createElement(StatusBadge, { status: value, theme: theme }),
+        },
+        {
+            key: "executedAt",
+            label: "Executed At",
+            sortable: true,
+            render: (value) => {
+                try {
+                    return new Date(value).toLocaleString();
+                }
+                catch (_a) {
+                    return value;
+                }
+            },
+        },
+        {
+            key: "executionDurationMinutes",
+            label: "Duration (min)",
+            sortable: true,
+        },
+        {
+            key: "executedBy",
+            label: "Executed By",
+            sortable: true,
+        },
+        {
+            key: "outcome",
+            label: "Outcome",
+            sortable: false,
+        },
+    ];
+    return (React.createElement(ReportLayout, { title: "Execution Audit Trail", description: "Directive execution history and audit information", selectedDateRange: dateRange.selectedOption, onDateRangeChange: dateRange.setSelectedOption, loading: loading, error: error, theme: theme },
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+            } },
+            React.createElement(MetricCard, { label: "Total Directives", value: (_a = data === null || data === void 0 ? void 0 : data.totalDirectives) !== null && _a !== void 0 ? _a : 0, theme: theme }),
+            React.createElement(MetricCard, { label: "Executed", value: (_b = data === null || data === void 0 ? void 0 : data.executedCount) !== null && _b !== void 0 ? _b : 0, theme: theme }),
+            React.createElement(MetricCard, { label: "Declined", value: (_c = data === null || data === void 0 ? void 0 : data.declinedCount) !== null && _c !== void 0 ? _c : 0, theme: theme }),
+            React.createElement(MetricCard, { label: "Failed", value: (_d = data === null || data === void 0 ? void 0 : data.failedCount) !== null && _d !== void 0 ? _d : 0, theme: theme }),
+            React.createElement(MetricCard, { label: "Auto-Executed", value: (_e = data === null || data === void 0 ? void 0 : data.autoExecutedCount) !== null && _e !== void 0 ? _e : 0, theme: theme })),
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+            } },
+            React.createElement("div", { style: {
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                } },
+                React.createElement("h4", { style: {
+                        margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.md) || "16px",
+                        fontWeight: "600",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                    } }, "Execution Statistics"),
+                React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                    } },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Avg. Duration:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.stats) === null || _f === void 0 ? void 0 : _f.averageExecutionTimeMinutes) === null || _g === void 0 ? void 0 : _g.toFixed(1)) !== null && _h !== void 0 ? _h : 0,
+                            " min")),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Success Rate:"),
+                        React.createElement("span", { style: {
+                                fontWeight: "600",
+                                color: (theme === null || theme === void 0 ? void 0 : theme.colors.success) || "#4caf50",
+                            } }, (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.stats) === null || _j === void 0 ? void 0 : _j.successRate) === null || _k === void 0 ? void 0 : _k.toFixed(2)) !== null && _l !== void 0 ? _l : 0,
+                            "%")),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Fastest Execution:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_o = (_m = data === null || data === void 0 ? void 0 : data.stats) === null || _m === void 0 ? void 0 : _m.fastestExecutionMinutes) !== null && _o !== void 0 ? _o : 0,
+                            " min")),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Slowest Execution:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_q = (_p = data === null || data === void 0 ? void 0 : data.stats) === null || _p === void 0 ? void 0 : _p.slowestExecutionMinutes) !== null && _q !== void 0 ? _q : 0,
+                            " min"))))),
+        (data === null || data === void 0 ? void 0 : data.executionHistory) && data.executionHistory.length > 0 && (React.createElement("div", null,
+            React.createElement(DataTable, { title: "Execution History", columns: tableColumns, data: data.executionHistory.map((record, idx) => (Object.assign({ id: idx }, record))), pageSize: 10, theme: theme })))));
+};
+
+/**
+ * HealthGauge Component
+ * Displays health/score on a 0-10 scale with color-coded circle
+ */
+const HealthGauge = ({ score, label, size = "medium", theme, }) => {
+    const getColor = () => {
+        if (!theme) {
+            if (score >= 8)
+                return "#10B981";
+            if (score >= 6)
+                return "#F59E0B";
+            return "#EF4444";
+        }
+        if (score >= 8)
+            return theme.colors.success;
+        if (score >= 6)
+            return "#F59E0B"; // warning
+        return theme.colors.error;
+    };
+    const getBackgroundColor = () => {
+        if (!theme) {
+            if (score >= 8)
+                return "rgba(16, 185, 129, 0.1)";
+            if (score >= 6)
+                return "rgba(245, 158, 11, 0.1)";
+            return "rgba(239, 68, 68, 0.1)";
+        }
+        if (score >= 8)
+            return "rgba(16, 185, 129, 0.15)";
+        if (score >= 6)
+            return "rgba(245, 158, 11, 0.15)";
+        return "rgba(239, 68, 68, 0.15)";
+    };
+    const sizeConfig = {
+        small: { width: 64, height: 64, fontSize: "14px", labelSize: "11px" },
+        medium: { width: 96, height: 96, fontSize: "24px", labelSize: "12px" },
+        large: { width: 128, height: 128, fontSize: "32px", labelSize: "13px" },
+    };
+    const config = sizeConfig[size];
+    return (React.createElement("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+        } },
+        React.createElement("div", { style: {
+                width: `${config.width}px`,
+                height: `${config.height}px`,
+                borderRadius: "50%",
+                backgroundColor: getBackgroundColor(),
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flex: "none",
+            } },
+            React.createElement("span", { style: {
+                    fontSize: config.fontSize,
+                    fontWeight: "bold",
+                    color: getColor(),
+                } }, score.toFixed(1))),
+        React.createElement("p", { style: {
+                fontSize: config.labelSize,
+                color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                textAlign: "center",
+                margin: 0,
+                maxWidth: `${config.width + 20}px`,
+            } }, label)));
+};
+
+/**
+ * Portfolio Health Report
+ * Aggregated metric health across the entire portfolio
+ */
+const PortfolioHealth = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
+    var _a, _b, _c, _d;
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
+    const dateRange = useDateRange(defaultDateRange);
+    const { data, loading, error } = useReportData(() => api.getPortfolioHealth({
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+    }), [dateRange.startDate, dateRange.endDate]);
+    const metricTableColumns = [
+        {
+            key: "metricName",
+            label: "Metric Name",
+            sortable: true,
+        },
+        {
+            key: "score",
+            label: "Score (0-10)",
+            sortable: true,
+            render: (value) => value.toFixed(2),
+        },
+        {
+            key: "status",
+            label: "Status",
+            sortable: true,
+            render: (value) => {
+                const color = value === "ok"
+                    ? theme === null || theme === void 0 ? void 0 : theme.colors.success
+                    : value === "warning"
+                        ? "#F59E0B"
+                        : theme === null || theme === void 0 ? void 0 : theme.colors.error;
+                return (React.createElement("span", { style: { color, fontWeight: "600" } }, value.toUpperCase()));
+            },
+        },
+        {
+            key: "currentValue",
+            label: "Current Value",
+            sortable: true,
+            render: (value) => value.toFixed(2),
+        },
+        {
+            key: "targetValue",
+            label: "Target Value",
+            sortable: true,
+            render: (value) => value.toFixed(2),
+        },
+        {
+            key: "variance",
+            label: "Variance",
+            sortable: true,
+            render: (value) => {
+                const color = value > 0 ? theme === null || theme === void 0 ? void 0 : theme.colors.success : theme === null || theme === void 0 ? void 0 : theme.colors.error;
+                return (React.createElement("span", { style: { color, fontWeight: "600" } }, value.toFixed(2)));
+            },
+        },
+    ];
+    const criticalTableColumns = [
+        {
+            key: "metricName",
+            label: "Metric Name",
+            sortable: true,
+        },
+        {
+            key: "description",
+            label: "Description",
+            sortable: true,
+        },
+        {
+            key: "recommendedAction",
+            label: "Recommended Action",
+            sortable: false,
+        },
+    ];
+    return (React.createElement(ReportLayout, { title: "Portfolio Health", description: "Aggregated metric health and critical alerts", selectedDateRange: dateRange.selectedOption, onDateRangeChange: dateRange.setSelectedOption, loading: loading, error: error, theme: theme },
+        React.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "center",
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.lg) || "24px",
+                border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+            } },
+            React.createElement(HealthGauge, { score: (_a = data === null || data === void 0 ? void 0 : data.overallHealthScore) !== null && _a !== void 0 ? _a : 0, label: "Overall Portfolio Health", size: "large", theme: theme })),
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+            } },
+            React.createElement("div", { style: {
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                    textAlign: "center",
+                } },
+                React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                        marginBottom: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
+                    } }, "Healthy Metrics"),
+                React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: "24px",
+                        fontWeight: "bold",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.success) || "#4caf50",
+                    } }, (_b = data === null || data === void 0 ? void 0 : data.healthyMetricsCount) !== null && _b !== void 0 ? _b : 0)),
+            React.createElement("div", { style: {
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                    textAlign: "center",
+                } },
+                React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                        marginBottom: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
+                    } }, "Warning Metrics"),
+                React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: "24px",
+                        fontWeight: "bold",
+                        color: "#F59E0B",
+                    } }, (_c = data === null || data === void 0 ? void 0 : data.warningMetricsCount) !== null && _c !== void 0 ? _c : 0)),
+            React.createElement("div", { style: {
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                    textAlign: "center",
+                } },
+                React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                        marginBottom: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
+                    } }, "Critical Metrics"),
+                React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: "24px",
+                        fontWeight: "bold",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.error) || "#f44336",
+                    } }, (_d = data === null || data === void 0 ? void 0 : data.criticalMetricsCount) !== null && _d !== void 0 ? _d : 0))),
+        (data === null || data === void 0 ? void 0 : data.metricHealthScores) && data.metricHealthScores.length > 0 && (React.createElement("div", null,
+            React.createElement(DataTable, { title: "Metric Health Scores", columns: metricTableColumns, data: data.metricHealthScores.map((metric, idx) => (Object.assign({ id: idx }, metric))), pageSize: 10, theme: theme }))),
+        (data === null || data === void 0 ? void 0 : data.criticalMetrics) && data.criticalMetrics.length > 0 && (React.createElement("div", null,
+            React.createElement(DataTable, { title: "Critical Metrics Requiring Attention", columns: criticalTableColumns, data: data.criticalMetrics.map((metric, idx) => (Object.assign({ id: idx }, metric))), pageSize: 5, theme: theme })))));
+};
+
+/**
+ * Data Quality & Automation Report
+ * Data gaps, automation opportunities, and actionable recommendations
+ */
+const DataQualityAutomation = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
+    const dateRange = useDateRange(defaultDateRange);
+    const { data, loading, error } = useReportData(() => api.getDataQualityAutomation({
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+    }), [dateRange.startDate, dateRange.endDate]);
+    const dataGapColumns = [
+        {
+            key: "fieldName",
+            label: "Field Name",
+            sortable: true,
+        },
+        {
+            key: "missingRecords",
+            label: "Missing Records",
+            sortable: true,
+        },
+        {
+            key: "missingPercentage",
+            label: "Missing %",
+            sortable: true,
+            render: (value) => `${value.toFixed(2)}%`,
+        },
+        {
+            key: "impact",
+            label: "Impact",
+            sortable: false,
+        },
+    ];
+    const recommendationColumns = [
+        {
+            key: "category",
+            label: "Category",
+            sortable: true,
+        },
+        {
+            key: "recommendation",
+            label: "Recommendation",
+            sortable: true,
+        },
+        {
+            key: "priority",
+            label: "Priority",
+            sortable: true,
+            render: (value) => {
+                const color = value === "High"
+                    ? theme === null || theme === void 0 ? void 0 : theme.colors.error
+                    : value === "Medium"
+                        ? "#F59E0B"
+                        : theme === null || theme === void 0 ? void 0 : theme.colors.success;
+                return React.createElement("span", { style: { color, fontWeight: "600" } }, value);
+            },
+        },
+        {
+            key: "expectedBenefit",
+            label: "Expected Benefit",
+            sortable: false,
+        },
+    ];
+    return (React.createElement(ReportLayout, { title: "Data Quality & Automation", description: "Data quality assessment and automation opportunities", selectedDateRange: dateRange.selectedOption, onDateRangeChange: dateRange.setSelectedOption, loading: loading, error: error, theme: theme },
+        React.createElement("div", { style: {
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+            } },
+            React.createElement("h3", { style: {
+                    margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.lg) || "18px",
+                    fontWeight: "600",
+                    color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                } }, "Data Quality Assessment"),
+            React.createElement("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                } },
+                React.createElement(ProgressBar, { percentage: (_a = data === null || data === void 0 ? void 0 : data.overallDataQualityScore) !== null && _a !== void 0 ? _a : 0, label: "Overall Quality Score", theme: theme, height: "large" }),
+                React.createElement(ProgressBar, { percentage: (_b = data === null || data === void 0 ? void 0 : data.completenessScore) !== null && _b !== void 0 ? _b : 0, label: "Completeness", theme: theme }),
+                React.createElement(ProgressBar, { percentage: (_c = data === null || data === void 0 ? void 0 : data.accuracyScore) !== null && _c !== void 0 ? _c : 0, label: "Accuracy", theme: theme }),
+                React.createElement(ProgressBar, { percentage: (_d = data === null || data === void 0 ? void 0 : data.consistencyScore) !== null && _d !== void 0 ? _d : 0, label: "Consistency", theme: theme })),
+            React.createElement("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+                    gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    marginTop: (theme === null || theme === void 0 ? void 0 : theme.spacing.lg) || "24px",
+                } },
+                React.createElement("div", { style: {
+                        textAlign: "center",
+                        padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                    } },
+                    React.createElement("p", { style: {
+                            margin: 0,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                            color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                        } }, "Total Records Analyzed"),
+                    React.createElement("p", { style: {
+                            margin: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0 0 0`,
+                            fontSize: "20px",
+                            fontWeight: "600",
+                            color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                        } }, (_e = data === null || data === void 0 ? void 0 : data.totalRecordsAnalyzed) !== null && _e !== void 0 ? _e : 0)),
+                React.createElement("div", { style: {
+                        textAlign: "center",
+                        padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                    } },
+                    React.createElement("p", { style: {
+                            margin: 0,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                            color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+                        } }, "Records with Issues"),
+                    React.createElement("p", { style: {
+                            margin: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0 0 0`,
+                            fontSize: "20px",
+                            fontWeight: "600",
+                            color: (theme === null || theme === void 0 ? void 0 : theme.colors.error) || "#f44336",
+                        } }, (_f = data === null || data === void 0 ? void 0 : data.recordsWithIssues) !== null && _f !== void 0 ? _f : 0)))),
+        React.createElement("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+            } },
+            React.createElement("div", { style: {
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                    backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+                } },
+                React.createElement("h4", { style: {
+                        margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.md) || "16px",
+                        fontWeight: "600",
+                        color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+                    } }, "Automation Readiness"),
+                React.createElement("div", { style: {
+                        marginBottom: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    } },
+                    React.createElement(ProgressBar, { percentage: (_h = (_g = data === null || data === void 0 ? void 0 : data.automationOpportunities) === null || _g === void 0 ? void 0 : _g.automationReadinessScore) !== null && _h !== void 0 ? _h : 0, label: "Readiness Score", theme: theme, height: "large" })),
+                React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                    } },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Fully Automatable:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_k = (_j = data === null || data === void 0 ? void 0 : data.automationOpportunities) === null || _j === void 0 ? void 0 : _j.fullyAutomatable) !== null && _k !== void 0 ? _k : 0)),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Partially Automatable:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_m = (_l = data === null || data === void 0 ? void 0 : data.automationOpportunities) === null || _l === void 0 ? void 0 : _l.partiallyAutomatable) !== null && _m !== void 0 ? _m : 0)),
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                        } },
+                        React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Manual Only:"),
+                        React.createElement("span", { style: { fontWeight: "600" } }, (_p = (_o = data === null || data === void 0 ? void 0 : data.automationOpportunities) === null || _o === void 0 ? void 0 : _o.manualOnly) !== null && _p !== void 0 ? _p : 0))))),
+        (data === null || data === void 0 ? void 0 : data.identifiedDataGaps) && data.identifiedDataGaps.length > 0 && (React.createElement("div", null,
+            React.createElement(DataTable, { title: "Identified Data Gaps", columns: dataGapColumns, data: data.identifiedDataGaps.map((gap, idx) => (Object.assign({ id: idx }, gap))), pageSize: 10, theme: theme }))),
+        (data === null || data === void 0 ? void 0 : data.recommendations) && data.recommendations.length > 0 && (React.createElement("div", null,
+            React.createElement(DataTable, { title: "Recommendations", columns: recommendationColumns, data: data.recommendations.map((rec, idx) => (Object.assign({ id: idx }, rec))), pageSize: 10, theme: theme })))));
+};
+
+/**
+ * Reports Dashboard
+ * Main container that displays all 5 reports with navigation
+ */
+const REPORTS = [
+    {
+        id: "executive",
+        label: "Executive Dashboard",
+        icon: "📊",
+        description: "High-level directive execution metrics",
+    },
+    {
+        id: "risk",
+        label: "Supply Chain Risk",
+        icon: "⚠️",
+        description: "Risk analysis and supply chain health",
+    },
+    {
+        id: "audit",
+        label: "Execution Audit",
+        icon: "✓",
+        description: "Directive execution history and audit trail",
+    },
+    {
+        id: "health",
+        label: "Portfolio Health",
+        icon: "❤️",
+        description: "Portfolio metric health and critical alerts",
+    },
+    {
+        id: "quality",
+        label: "Data Quality",
+        icon: "📈",
+        description: "Data quality and automation assessment",
+    },
+];
+const ReportsDashboard = ({ theme, initialReport = "executive", }) => {
+    const [activeReport, setActiveReport] = useState(initialReport);
+    const containerStyle = {
+        minHeight: "100vh",
+        backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.background) || "#fff",
+        color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+    };
+    const navContainerStyle = {
+        borderBottom: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+        backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
+    };
+    const navWrapperStyle = {
+        maxWidth: "1400px",
+        margin: "0 auto",
+        padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} ${(theme === null || theme === void 0 ? void 0 : theme.spacing.lg) || "24px"}`,
+        display: "flex",
+        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+        overflowX: "auto",
+        scrollBehavior: "smooth",
+    };
+    const navButtonStyle = (isActive) => ({
+        padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px"} ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"}`,
+        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+        fontWeight: "500",
+        borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+        border: "none",
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        backgroundColor: isActive
+            ? (theme === null || theme === void 0 ? void 0 : theme.colors.primary) || "#1976d2"
+            : (theme === null || theme === void 0 ? void 0 : theme.colors.background) || "#fff",
+        color: isActive ? "#fff" : (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+        whiteSpace: "nowrap",
+        display: "flex",
+        alignItems: "center",
+        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
+    });
+    const contentStyle = {
+        maxWidth: "1400px",
+        margin: "0 auto",
+        padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.lg) || "24px",
+    };
+    return (React.createElement("div", { style: containerStyle },
+        React.createElement("div", { style: navContainerStyle },
+            React.createElement("div", { style: navWrapperStyle }, REPORTS.map((report) => (React.createElement("button", { key: report.id, onClick: () => setActiveReport(report.id), style: navButtonStyle(activeReport === report.id), title: report.description },
+                React.createElement("span", null, report.icon),
+                React.createElement("span", null, report.label)))))),
+        React.createElement("div", { style: contentStyle },
+            activeReport === "executive" && React.createElement(ExecutiveDashboard, { theme: theme }),
+            activeReport === "risk" && React.createElement(SupplyChainRisk, { theme: theme }),
+            activeReport === "audit" && React.createElement(ExecutionAuditTrail, { theme: theme }),
+            activeReport === "health" && React.createElement(PortfolioHealth, { theme: theme }),
+            activeReport === "quality" && React.createElement(DataQualityAutomation, { theme: theme }))));
+};
+
+/**
+ * RiskMatrix Component
+ * 2D visualization of risk items (probability vs impact)
+ */
+const RiskMatrix = ({ items, title, height = 300, theme, }) => {
+    if (!items || items.length === 0) {
+        return (React.createElement("div", { style: {
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.lg) || "24px",
+                textAlign: "center",
+                color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
+            } }, "No risk data available"));
+    }
+    const padding = 50;
+    const width = 500;
+    const innerWidth = width - padding * 2;
+    const innerHeight = height - padding * 2;
+    const getRiskColor = (severity) => {
+        if (severity === "high")
+            return (theme === null || theme === void 0 ? void 0 : theme.colors.error) || "#ef4444";
+        if (severity === "medium")
+            return "#F59E0B";
+        return (theme === null || theme === void 0 ? void 0 : theme.colors.success) || "#10B981";
+    };
+    return (React.createElement("div", null,
+        title && (React.createElement("h3", { style: {
+                margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
+                fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.md) || "16px",
+                fontWeight: "600",
+                color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+            } }, title)),
+        React.createElement("svg", { width: "100%", height: height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", style: {
+                border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
+                borderRadius: "8px",
+            } },
+            React.createElement("rect", { x: padding + innerWidth / 2, y: padding, width: innerWidth / 2, height: innerHeight / 2, fill: "#ef4444", opacity: "0.05" }),
+            React.createElement("rect", { x: padding, y: padding, width: innerWidth / 2, height: innerHeight / 2, fill: "#F59E0B", opacity: "0.05" }),
+            React.createElement("rect", { x: padding + innerWidth / 2, y: padding + innerHeight / 2, width: innerWidth / 2, height: innerHeight / 2, fill: "#F59E0B", opacity: "0.05" }),
+            React.createElement("rect", { x: padding, y: padding + innerHeight / 2, width: innerWidth / 2, height: innerHeight / 2, fill: "#10B981", opacity: "0.05" }),
+            React.createElement("line", { x1: padding, y1: padding + innerHeight / 2, x2: width - padding, y2: padding + innerHeight / 2, stroke: (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0", strokeWidth: "2" }),
+            React.createElement("line", { x1: padding + innerWidth / 2, y1: padding, x2: padding + innerWidth / 2, y2: height - padding, stroke: (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0", strokeWidth: "2" }),
+            React.createElement("text", { x: width / 2, y: height - 5, textAnchor: "middle", fontSize: "12", fill: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666", fontWeight: "500" }, "Probability"),
+            React.createElement("text", { x: 15, y: height / 2, textAnchor: "middle", fontSize: "12", fill: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666", fontWeight: "500", transform: `rotate(-90 15 ${height / 2})` }, "Impact"),
+            items.map((item) => {
+                const x = padding + (item.probability / 100) * innerWidth;
+                const y = padding + innerHeight - (item.impact / 100) * innerHeight;
+                return (React.createElement("g", { key: item.id },
+                    React.createElement("circle", { cx: x, cy: y, r: "6", fill: getRiskColor(item.severity), opacity: "0.7", style: { cursor: "pointer" } }),
+                    React.createElement("circle", { cx: x, cy: y, r: "6", fill: "none", stroke: getRiskColor(item.severity), strokeWidth: "2", opacity: "0.4" })));
+            }))));
+};
+
+export { AnalyticsAPI, AnalyticsDashboard, AnalyticsReport, AnalyticsWidget, DataQualityAutomation, DataTable, DateRangeSelector, DateRangeService, DirectivesPanel, ExecutionAuditTrail, ExecutiveDashboard, HealthGauge, LoadingState, MetricCard, MetricsPanel, ObservationsPanel, PortfolioHealth, ProgressBar, ReactBridgeAPI, ReactBridgeChatbox, ReactBridgeProvider, ReactBridgeSearch, ReportLayout, ReportsDashboard, RiskMatrix, StatusBadge, SupplyChainRisk, TrendChart, WebSpeechSTTProvider, WebSpeechTTSProvider, createCustomTheme, darkTheme, getTheme, lightTheme, useAnalyticsConfigs, useAnalyticsResult, useDateRange, useDirectiveAction, useReactBridge, useReactBridgeContext, useReportData };
 //# sourceMappingURL=index.esm.js.map