reactbridge-sdk 0.2.2 → 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,11 +1,12 @@
-import React from 'react';
-import type { DirectiveActionCallback } from '../../types/analytics';
-import './AnalyticsDashboard.css';
+import React from "react";
+import type { DirectiveActionCallback } from "../../types/analytics";
+import type { Theme } from "../../types";
 export interface AnalyticsDashboardProps {
     onDirectiveAction: DirectiveActionCallback;
     className?: string;
     showRefresh?: boolean;
     autoRefreshInterval?: number;
+    theme?: Theme;
 }
-export declare function AnalyticsDashboard({ onDirectiveAction, className, showRefresh, autoRefreshInterval, }: AnalyticsDashboardProps): React.JSX.Element;
+export declare function AnalyticsDashboard({ onDirectiveAction, className, showRefresh, autoRefreshInterval, theme: customTheme, }: AnalyticsDashboardProps): React.JSX.Element;
 //# sourceMappingURL=AnalyticsDashboard.d.ts.map

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,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,0BAA0B,CAAC;AAElC,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;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,iBAAiB,EACjB,SAAc,EACd,WAAkB,EAClB,mBAAuB,GACxB,EAAE,uBAAuB,qBAwTzB"}
+{"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"}