reactbridge-sdk 0.2.3 → 0.2.4

package/README.md

@@ -10,6 +10,7 @@ A flexible React SDK for building intelligent conversational interfaces with LLM
 🤖 **Intelligent Context** - Automatic context diffing and injection  
 ⚡ **Two-Step Orchestration** - Seamless action execution and feedback loop  
 📦 **TypeScript First** - Full type safety and IntelliSense support  
+📈 **Analytics Admin UI** - Widgets, reports, and dashboards for AI-generated insights
 
 ## Installation
 
@@ -187,6 +188,83 @@ function CustomChat() {
 }
 ```
 
+## Analytics Suite
+
+The SDK ships with DirectivSys analytics components for visualizing AI-generated metrics, observations, and directives and for executing recommended actions.
+
+### Components
+
+- `AnalyticsWidget` — Floating entry point that opens a drawer of analytics configs; best for adding analytics everywhere in your admin UI.
+- `AnalyticsReport` — Full report view for a single `analyticsType` (metrics, observations, directives) with optional back/close controls.
+- `AnalyticsDashboard` — Full-width dashboard that lists all analytics configs on the left and shows the selected report on the right. Supports manual refresh, optional `autoRefreshInterval`, and directive status filtering.
+
+```tsx
+import {
+  ReactBridgeProvider,
+  AnalyticsWidget,
+  AnalyticsReport,
+  AnalyticsDashboard,
+} from 'reactbridge-sdk';
+
+const handleDirectiveAction = async (directive, action) => {
+  if (action === 'decline') return { success: true };
+
+  // Execute the directive in your system
+  const result = await api.executeDirective(directive);
+  return { success: result.ok, error: result.error };
+};
+
+function Admin() {
+  return (
+    <ReactBridgeProvider apiKey="your-api-key">
+      <AnalyticsWidget onDirectiveAction={handleDirectiveAction} />
+
+      <AnalyticsReport
+        analyticsType="InventoryHealth"
+        onDirectiveAction={handleDirectiveAction}
+      />
+
+      <AnalyticsDashboard
+        onDirectiveAction={handleDirectiveAction}
+        autoRefreshInterval={300}
+      />
+    </ReactBridgeProvider>
+  );
+}
+```
+
+**Directive actions:** The callback receives the directive plus the requested action (`execute` or `decline`) and should return `{ success: boolean, error?: string }`. On success, directive status becomes `executed`; failures become `failed`; declines become `declined`. Directive statuses are `proposed`, `executed`, `declined`, and `failed`. Priorities are numeric (higher = more urgent).
+
+### Analytics Hooks
+
+- `useAnalyticsConfigs()` — Fetches all analytics configs (`configs`, `isLoading`, `error`, `refetch`).
+- `useAnalyticsResult(analyticsType)` — Fetches the latest result for a given analytics type (`result`, `isLoading`, `error`, `refetch`).
+- `useDirectiveAction(onDirectiveAction?)` — Wraps your handler, updates directive status in the backend, and exposes `handleAction`, `isProcessing`, and `error`.
+
+```tsx
+import { useAnalyticsConfigs, useAnalyticsResult, useDirectiveAction } from 'reactbridge-sdk';
+
+const { configs } = useAnalyticsConfigs();
+const { result, refetch } = useAnalyticsResult('InventoryHealth');
+const { handleAction, isProcessing } = useDirectiveAction(handleDirectiveAction);
+```
+
+### Analytics API Client
+
+```tsx
+import { AnalyticsAPI } from 'reactbridge-sdk';
+
+const api = new AnalyticsAPI({ apiKey: 'your-api-key' });
+const configs = await api.getConfigs();
+const result = await api.getLatestResult('InventoryHealth');
+await api.updateDirectiveStatus(directiveId, 'executed');
+```
+
+### More Docs
+
+- Detailed components and hooks: [ANALYTICS_README.md](ANALYTICS_README.md)
+- Full dashboard guide: [ANALYTICS_DASHBOARD_README.md](ANALYTICS_DASHBOARD_README.md)
+
 ## Voice Input/Output
 
 The SDK supports voice input (Speech-to-Text) and voice output (Text-to-Speech) for a fully conversational experience.

package/dist/components/analytics/AnalyticsDashboard.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import type { DirectiveActionCallback } from '../../types/analytics';
-import type { Theme } from '../../types';
+import React from "react";
+import type { DirectiveActionCallback } from "../../types/analytics";
+import type { Theme } from "../../types";
 export interface AnalyticsDashboardProps {
     onDirectiveAction: DirectiveActionCallback;
     className?: string;

package/dist/components/analytics/AnalyticsDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnalyticsDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAsB,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,EAAE,uBAAuB,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,EACjC,iBAAiB,EACjB,SAAc,EACd,WAAkB,EAClB,mBAAuB,EACvB,KAAK,EAAE,WAAW,GACnB,EAAE,uBAAuB,qBAygBzB"}
+{"version":3,"file":"AnalyticsDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAEV,uBAAuB,EACxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,EAAE,uBAAuB,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,EACjC,iBAAiB,EACjB,SAAc,EACd,WAAkB,EAClB,mBAAuB,EACvB,KAAK,EAAE,WAAW,GACnB,EAAE,uBAAuB,qBA+vBzB"}

package/dist/index.esm.js

@@ -2151,11 +2151,11 @@ const AnalyticsWidget = ({ position = 'bottom-right', theme: customTheme, onDire
         isOpen && (React.createElement(AnalyticsDrawer, { isOpen: isOpen, onClose: () => setIsOpen(false), configs: configs, isLoading: isLoading, theme: theme, onDirectiveAction: onDirectiveAction }))));
 };
 
-function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = true, autoRefreshInterval = 0, theme: customTheme, }) {
+function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = true, autoRefreshInterval = 0, theme: customTheme, }) {
     const { theme: contextTheme } = useReactBridgeContext();
     const theme = customTheme || contextTheme;
     const [selectedAnalytics, setSelectedAnalytics] = useState(null);
-    const [directiveFilter, setDirectiveFilter] = useState('all');
+    const [directiveFilter, setDirectiveFilter] = useState("all");
     // Fetch analytics configurations
     const { configs, isLoading: configsLoading, error: configsError, refetch: refetchConfigs, } = useAnalyticsConfigs();
     // Fetch latest result for selected analytics
@@ -2191,20 +2191,20 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
         // Refetch result to get updated directive statuses
         refetchResult();
     });
-    const filteredDirectives = (result === null || result === void 0 ? void 0 : result.directives.filter(d => {
-        if (directiveFilter === 'all')
+    const filteredDirectives = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => {
+        if (directiveFilter === "all")
             return true;
         return d.status === directiveFilter;
     })) || [];
-    const selectedConfig = configs === null || configs === void 0 ? void 0 : configs.find(c => c.analyticsType === selectedAnalytics);
-    const proposedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status === 'proposed').length) || 0;
-    const executedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status === 'executed').length) || 0;
-    const declinedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status === 'declined').length) || 0;
+    const selectedConfig = configs === null || configs === void 0 ? void 0 : configs.find((c) => c.analyticsType === selectedAnalytics);
+    const proposedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "proposed").length) || 0;
+    const executedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "executed").length) || 0;
+    const declinedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "declined").length) || 0;
     const containerStyle = {
-        display: 'flex',
+        display: "flex",
         gap: theme.spacing.lg,
-        width: '100%',
-        minHeight: '540px',
+        width: "100%",
+        minHeight: "540px",
         backgroundColor: theme.colors.background,
         color: theme.colors.text,
         border: `1px solid ${theme.colors.border}`,
@@ -2213,44 +2213,44 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
         padding: theme.spacing.lg,
     };
     const sidebarStyle = {
-        width: '320px',
+        width: "320px",
         borderRight: `1px solid ${theme.colors.border}`,
         paddingRight: theme.spacing.lg,
-        display: 'flex',
-        flexDirection: 'column',
+        display: "flex",
+        flexDirection: "column",
         gap: theme.spacing.sm,
     };
     const listItemStyle = (isActive, isDisabled) => ({
-        width: '100%',
-        textAlign: 'left',
+        width: "100%",
+        textAlign: "left",
         padding: theme.spacing.md,
         backgroundColor: isActive ? theme.colors.primary : theme.colors.surface,
-        color: isActive ? '#fff' : theme.colors.text,
+        color: isActive ? "#fff" : theme.colors.text,
         border: `1px solid ${isActive ? theme.colors.primary : theme.colors.border}`,
         borderRadius: theme.borderRadius,
-        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        cursor: isDisabled ? "not-allowed" : "pointer",
         opacity: isDisabled ? 0.6 : 1,
-        transition: 'transform 0.15s ease, box-shadow 0.15s ease',
-        boxShadow: isActive ? theme.boxShadow : 'none',
+        transition: "transform 0.15s ease, box-shadow 0.15s ease",
+        boxShadow: isActive ? theme.boxShadow : "none",
     });
     const pillStyle = (bg) => ({
         fontSize: theme.fontSizes.xs,
-        padding: '2px 8px',
-        borderRadius: '999px',
+        padding: "2px 8px",
+        borderRadius: "999px",
         backgroundColor: bg,
-        color: '#fff',
+        color: "#fff",
         fontWeight: 600,
     });
     const placeholderStyle = {
         flex: 1,
-        minHeight: '420px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
+        minHeight: "420px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
         gap: theme.spacing.sm,
         color: theme.colors.textSecondary,
-        textAlign: 'center',
+        textAlign: "center",
     };
     const cardStyle = {
         backgroundColor: theme.colors.surface,
@@ -2260,35 +2260,42 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
     };
     const statusBadgeStyle = (status) => {
         const colors = {
-            proposed: { bg: theme.colors.primary, text: '#fff' },
-            executed: { bg: theme.colors.success, text: '#fff' },
-            declined: { bg: theme.colors.error, text: '#fff' },
-            ok: { bg: '#d1fae5', text: '#065f46' },
-            warning: { bg: '#fef3c7', text: '#92400e' },
-            critical: { bg: '#fee2e2', text: '#991b1b' },
-            high: { bg: '#fee2e2', text: '#991b1b' },
-            medium: { bg: '#fef3c7', text: '#92400e' },
-            low: { bg: '#e0ecff', text: '#1e3a8a' },
+            proposed: { bg: theme.colors.primary, text: "#fff" },
+            executed: { bg: theme.colors.success, text: "#fff" },
+            declined: { bg: theme.colors.error, text: "#fff" },
+            ok: { bg: "#d1fae5", text: "#065f46" },
+            warning: { bg: "#fef3c7", text: "#92400e" },
+            critical: { bg: "#fee2e2", text: "#991b1b" },
+            high: { bg: "#fee2e2", text: "#991b1b" },
+            medium: { bg: "#fef3c7", text: "#92400e" },
+            low: { bg: "#e0ecff", text: "#1e3a8a" },
+        };
+        const palette = colors[status] || {
+            bg: theme.colors.surface,
+            text: theme.colors.text,
         };
-        const palette = colors[status] || { bg: theme.colors.surface, text: theme.colors.text };
         return {
             fontSize: theme.fontSizes.xs,
-            padding: '2px 8px',
-            borderRadius: '999px',
+            padding: "2px 8px",
+            borderRadius: "999px",
             backgroundColor: palette.bg,
             color: palette.text,
             fontWeight: 700,
-            textTransform: 'capitalize',
+            textTransform: "capitalize",
         };
     };
-    const directiveCardStyle = (status) => (Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${status === 'executed'
+    const directiveCardStyle = (status) => (Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${status === "executed"
             ? theme.colors.success
-            : status === 'declined'
+            : status === "declined"
                 ? theme.colors.error
-                : theme.colors.primary}`, display: 'flex', flexDirection: 'column', gap: theme.spacing.sm }));
+                : theme.colors.primary}`, display: "flex", flexDirection: "column", gap: theme.spacing.sm }));
     return (React.createElement("div", { className: className, style: containerStyle },
         React.createElement("div", { style: sidebarStyle },
-            React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+            React.createElement("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                } },
                 React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Analytics"),
                 showRefresh && (React.createElement("button", { type: "button", onClick: handleRefresh, disabled: configsLoading, style: {
                         border: `1px solid ${theme.colors.border}`,
@@ -2296,43 +2303,58 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
                         color: theme.colors.text,
                         padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
                         borderRadius: theme.borderRadius,
-                        cursor: configsLoading ? 'not-allowed' : 'pointer',
-                    } }, configsLoading ? 'Refreshing...' : 'Refresh'))),
+                        cursor: configsLoading ? "not-allowed" : "pointer",
+                    } }, configsLoading ? "Refreshing..." : "Refresh"))),
             configsLoading && (React.createElement("div", { style: placeholderStyle }, "Loading analytics...")),
             configsError && (React.createElement("div", { style: placeholderStyle },
                 "Error loading analytics: ",
                 configsError.message)),
             configs && configs.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No analytics configured. Configure analytics in your DirectivSys dashboard.")),
-            configs && configs.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.sm } }, configs.map((config) => {
+            configs && configs.length > 0 && (React.createElement("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: theme.spacing.sm,
+                } }, configs.map((config) => {
                 const isActive = selectedAnalytics === config.analyticsType;
-                return (React.createElement("button", { key: config.configId, type: "button", onClick: () => config.isEnabled && setSelectedAnalytics(config.analyticsType), style: listItemStyle(isActive, !config.isEnabled), disabled: !config.isEnabled },
+                return (React.createElement("button", { key: config.configId, type: "button", onClick: () => config.isEnabled &&
+                        setSelectedAnalytics(config.analyticsType), style: listItemStyle(isActive, !config.isEnabled), disabled: !config.isEnabled },
                     React.createElement("div", { style: {
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
                             marginBottom: theme.spacing.xs,
-                            width: '100%',
+                            width: "100%",
                         } },
                         React.createElement("span", { style: { fontSize: theme.fontSizes.md, fontWeight: 600 } }, config.analyticsType),
-                        !config.isEnabled && React.createElement("span", { style: pillStyle(theme.colors.textSecondary) }, "Disabled")),
+                        !config.isEnabled && (React.createElement("span", { style: pillStyle(theme.colors.textSecondary) }, "Disabled"))),
                     React.createElement("div", { style: {
                             fontSize: theme.fontSizes.sm,
-                            color: isActive ? 'rgba(255,255,255,0.9)' : theme.colors.textSecondary,
+                            color: isActive
+                                ? "rgba(255,255,255,0.9)"
+                                : theme.colors.textSecondary,
                             marginBottom: theme.spacing.xs,
                         } }, config.templateDescription),
                     React.createElement("div", { style: {
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            width: '100%',
+                            display: "flex",
+                            justifyContent: "space-between",
+                            width: "100%",
                             fontSize: theme.fontSizes.xs,
-                            color: isActive ? 'rgba(255,255,255,0.8)' : theme.colors.textSecondary,
+                            color: isActive
+                                ? "rgba(255,255,255,0.8)"
+                                : theme.colors.textSecondary,
                         } },
-                        React.createElement("span", { style: { textTransform: 'capitalize' } }, config.frequency),
+                        React.createElement("span", { style: { textTransform: "capitalize" } }, config.frequency),
                         config.lastExecutedAt && (React.createElement("span", null,
-                            "Last: ",
+                            "Last:",
+                            " ",
                             new Date(config.lastExecutedAt).toLocaleDateString())))));
             })))),
-        React.createElement("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: theme.spacing.lg } },
+        React.createElement("div", { style: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                gap: theme.spacing.lg,
+            } },
             !selectedAnalytics && (React.createElement("div", { style: placeholderStyle },
                 React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No analytics selected"),
                 React.createElement("p", { style: { margin: 0 } }, "Select an analytics type from the left to view results."))),
@@ -2343,92 +2365,188 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
             selectedAnalytics && !resultLoading && !result && (React.createElement("div", { style: placeholderStyle },
                 React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No results yet"),
                 React.createElement("p", { style: { margin: 0 } }, "This analytics has not run yet. Results will appear after the first run."))),
-            selectedAnalytics && result && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.lg } },
-                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.xs } },
-                    React.createElement("h2", { style: { margin: 0, fontSize: theme.fontSizes.xl, color: theme.colors.text } }, selectedConfig === null || selectedConfig === void 0 ? void 0 : selectedConfig.analyticsType),
-                    React.createElement("p", { style: { margin: 0, color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } },
+            selectedAnalytics && result && (React.createElement("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: theme.spacing.lg,
+                } },
+                React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: theme.spacing.xs,
+                    } },
+                    React.createElement("h2", { style: {
+                            margin: 0,
+                            fontSize: theme.fontSizes.xl,
+                            color: theme.colors.text,
+                        } }, selectedConfig === null || selectedConfig === void 0 ? void 0 : selectedConfig.analyticsType),
+                    React.createElement("p", { style: {
+                            margin: 0,
+                            color: theme.colors.textSecondary,
+                            fontSize: theme.fontSizes.sm,
+                        } },
                         "Generated: ",
                         new Date(result.createdAt).toLocaleString())),
-                result.metrics && result.metrics.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } },
+                result.metrics && result.metrics.length > 0 && (React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: theme.spacing.md,
+                    } },
                     React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Metrics"),
                     React.createElement("div", { style: {
-                            display: 'grid',
-                            gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+                            display: "grid",
+                            gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
                             gap: theme.spacing.md,
-                        } }, result.metrics.map((metric, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${metric.status === 'ok'
+                        } }, result.metrics.map((metric, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${metric.status === "ok"
                                 ? theme.colors.success
-                                : metric.status === 'warning'
-                                    ? '#f59e0b'
+                                : metric.status === "warning"
+                                    ? "#f59e0b"
                                     : theme.colors.error}` }) },
                         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: { fontWeight: 600 } }, metric.name),
+                            React.createElement("span", { style: {
+                                    fontWeight: 600,
+                                    maxWidth: "100%",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    display: "inline-block",
+                                }, title: metric.name }, metric.name),
                             React.createElement("span", { style: statusBadgeStyle(metric.status) }, metric.status)),
-                        React.createElement("div", { style: { fontSize: theme.fontSizes.xl, fontWeight: 700 } },
+                        React.createElement("div", { style: {
+                                fontSize: theme.fontSizes.xl,
+                                fontWeight: 700,
+                            } },
                             metric.value,
                             " ",
                             metric.unit),
-                        React.createElement("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } }, metric.explanation))))))),
-                result.observations && result.observations.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } },
+                        React.createElement("div", { style: {
+                                color: theme.colors.textSecondary,
+                                fontSize: theme.fontSizes.sm,
+                            } }, metric.explanation))))))),
+                result.observations && result.observations.length > 0 && (React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: theme.spacing.md,
+                    } },
                     React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Observations"),
-                    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.sm } }, result.observations.map((observation, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${observation.severity === 'high'
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: theme.spacing.sm,
+                        } }, result.observations.map((observation, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${observation.severity === "high"
                                 ? theme.colors.error
-                                : observation.severity === 'medium'
-                                    ? '#f59e0b'
-                                    : theme.colors.primary}`, display: 'flex', flexDirection: 'column', gap: theme.spacing.xs }) },
-                        React.createElement("div", { style: { display: 'flex', gap: theme.spacing.sm, alignItems: 'center' } },
+                                : observation.severity === "medium"
+                                    ? "#f59e0b"
+                                    : theme.colors.primary}`, display: "flex", flexDirection: "column", gap: theme.spacing.xs }) },
+                        React.createElement("div", { style: {
+                                display: "flex",
+                                gap: theme.spacing.sm,
+                                alignItems: "center",
+                            } },
                             React.createElement("span", { style: statusBadgeStyle(observation.severity) }, observation.severity),
-                            React.createElement("span", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } }, observation.scope)),
-                        React.createElement("div", { style: { color: theme.colors.text, fontSize: theme.fontSizes.sm } }, observation.text))))))),
-                result.directives && result.directives.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } },
-                    React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+                            React.createElement("span", { style: {
+                                    color: theme.colors.textSecondary,
+                                    fontSize: theme.fontSizes.sm,
+                                } }, observation.scope)),
+                        React.createElement("div", { style: {
+                                color: theme.colors.text,
+                                fontSize: theme.fontSizes.sm,
+                            } }, observation.text))))))),
+                result.directives && result.directives.length > 0 && (React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: theme.spacing.md,
+                    } },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                        } },
                         React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Recommended actions"),
-                        React.createElement("div", { style: { display: 'flex', gap: theme.spacing.xs } },
-                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter('all'), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === 'all' ? theme.colors.primary : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === 'all' ? '#fff' : theme.colors.text }) },
+                        React.createElement("div", { style: { display: "flex", gap: theme.spacing.xs } },
+                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("all"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "all"
+                                    ? theme.colors.primary
+                                    : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "all"
+                                        ? "#fff"
+                                        : theme.colors.text }) },
                                 "All (",
                                 result.directives.length,
                                 ")"),
-                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter('proposed'), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === 'proposed' ? theme.colors.primary : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === 'proposed' ? '#fff' : theme.colors.text }) },
+                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("proposed"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "proposed"
+                                    ? theme.colors.primary
+                                    : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "proposed"
+                                        ? "#fff"
+                                        : theme.colors.text }) },
                                 "Proposed (",
                                 proposedCount,
                                 ")"),
-                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter('executed'), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === 'executed' ? theme.colors.primary : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === 'executed' ? '#fff' : theme.colors.text }) },
+                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("executed"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "executed"
+                                    ? theme.colors.primary
+                                    : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "executed"
+                                        ? "#fff"
+                                        : theme.colors.text }) },
                                 "Executed (",
                                 executedCount,
                                 ")"),
-                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter('declined'), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === 'declined' ? theme.colors.primary : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === 'declined' ? '#fff' : theme.colors.text }) },
+                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("declined"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "declined"
+                                    ? theme.colors.primary
+                                    : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "declined"
+                                        ? "#fff"
+                                        : theme.colors.text }) },
                                 "Declined (",
                                 declinedCount,
                                 ")"))),
                     filteredDirectives.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No directives match the selected filter.")),
-                    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.sm } }, filteredDirectives.map((directive) => (React.createElement("div", { key: directive.directiveId, style: directiveCardStyle(directive.status) },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: theme.spacing.sm,
+                        } }, filteredDirectives.map((directive) => (React.createElement("div", { key: directive.directiveId, style: directiveCardStyle(directive.status) },
                         React.createElement("div", { style: {
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
+                                display: "flex",
+                                justifyContent: "space-between",
+                                alignItems: "center",
                                 gap: theme.spacing.sm,
-                                flexWrap: 'wrap',
+                                flexWrap: "wrap",
                             } },
-                            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.xs } },
+                            React.createElement("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: theme.spacing.xs,
+                                } },
                                 React.createElement("span", { style: { fontWeight: 700 } }, directive.action),
-                                React.createElement("span", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } },
+                                React.createElement("span", { style: {
+                                        color: theme.colors.textSecondary,
+                                        fontSize: theme.fontSizes.sm,
+                                    } },
                                     "Priority: ",
                                     directive.priority)),
                             React.createElement("span", { style: statusBadgeStyle(directive.status) }, directive.status)),
-                        React.createElement("div", { style: { color: theme.colors.text, fontSize: theme.fontSizes.sm } }, directive.rationale),
-                        directive.parameters && directive.parameters.length > 0 && (React.createElement("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } },
+                        React.createElement("div", { style: {
+                                color: theme.colors.text,
+                                fontSize: theme.fontSizes.sm,
+                            } }, directive.rationale),
+                        directive.parameters &&
+                            directive.parameters.length > 0 && (React.createElement("div", { style: {
+                                color: theme.colors.textSecondary,
+                                fontSize: theme.fontSizes.sm,
+                            } },
                             React.createElement("strong", { style: { color: theme.colors.text } }, "Parameters:"),
-                            React.createElement("ul", { style: { margin: `${theme.spacing.xs} 0 0 16px`, padding: 0 } }, directive.parameters.map((param, index) => (React.createElement("li", { key: index, style: { marginBottom: theme.spacing.xs } },
+                            React.createElement("ul", { style: {
+                                    margin: `${theme.spacing.xs} 0 0 16px`,
+                                    padding: 0,
+                                } }, directive.parameters.map((param, index) => (React.createElement("li", { key: index, style: { marginBottom: theme.spacing.xs } },
                                 React.createElement("code", null, param.name),
                                 ": ",
                                 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, style: Object.assign(Object.assign({}, pillStyle(theme.colors.success)), { border: 'none', cursor: isProcessing ? 'not-allowed' : 'pointer' }) }, isProcessing ? 'Processing...' : 'Execute'),
-                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, 'decline'), disabled: isProcessing, style: Object.assign(Object.assign({}, pillStyle(theme.colors.error)), { border: 'none', cursor: isProcessing ? 'not-allowed' : 'pointer' }) }, "Decline"))))))))))))));
+                        directive.status === "proposed" && (React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm } },
+                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "execute"), disabled: isProcessing, style: Object.assign(Object.assign({}, pillStyle(theme.colors.success)), { border: "none", cursor: isProcessing ? "not-allowed" : "pointer" }) }, isProcessing ? "Processing..." : "Execute"),
+                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "decline"), disabled: isProcessing, style: Object.assign(Object.assign({}, pillStyle(theme.colors.error)), { border: "none", cursor: isProcessing ? "not-allowed" : "pointer" }) }, "Decline"))))))))))))));
 }
 
 export { AnalyticsAPI, AnalyticsDashboard, AnalyticsReport, AnalyticsWidget, DirectivesPanel, MetricsPanel, ObservationsPanel, ReactBridgeAPI, ReactBridgeChatbox, ReactBridgeProvider, ReactBridgeSearch, WebSpeechSTTProvider, WebSpeechTTSProvider, createCustomTheme, darkTheme, getTheme, lightTheme, useAnalyticsConfigs, useAnalyticsResult, useDirectiveAction, useReactBridge, useReactBridgeContext };