@launchdarkly/toolbar 0.12.0-beta.1 → 0.13.0-beta.1

package/dist/js/plugins/FlagOverridePlugin.js

@@ -13,6 +13,9 @@ class FlagOverridePlugin {
             name: 'FlagOverridePlugin'
         };
     }
+    getHooks(_metadata) {
+        return [];
+    }
     register(ldClient) {
         this.ldClient = ldClient;
     }

package/dist/js/plugins/index.js

@@ -13,6 +13,9 @@ class FlagOverridePlugin {
             name: 'FlagOverridePlugin'
         };
     }
+    getHooks(_metadata) {
+        return [];
+    }
     register(ldClient) {
         this.ldClient = ldClient;
     }
@@ -127,4 +130,296 @@ class FlagOverridePlugin {
         }
     }
 }
-export { FlagOverridePlugin };
+const MAX_EVENTS = 100;
+class EventStore {
+    events = [];
+    listeners = new Set();
+    addEvent(event) {
+        try {
+            this.events.push(event);
+            if (this.events.length > MAX_EVENTS) this.events.splice(0, this.events.length - MAX_EVENTS);
+            this.notifyListeners();
+        } catch (error) {
+            console.warn('Event store error:', error);
+        }
+    }
+    getEvents() {
+        return [
+            ...this.events
+        ];
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        listener();
+        return ()=>this.listeners.delete(listener);
+    }
+    clear() {
+        this.events = [];
+        this.notifyListeners();
+    }
+    destroy() {
+        this.listeners.clear();
+        this.events = [];
+    }
+    notifyListeners() {
+        this.listeners.forEach((listener)=>{
+            try {
+                listener();
+            } catch (error) {
+                console.warn('Listener error:', error);
+            }
+        });
+    }
+}
+class AfterTrackHook {
+    config;
+    idCounter = 0;
+    constructor(config = {}){
+        this.config = {
+            filter: config.filter,
+            onNewEvent: config.onNewEvent
+        };
+    }
+    getMetadata() {
+        return {
+            name: 'AfterTrackHook'
+        };
+    }
+    afterTrack(hookContext) {
+        try {
+            const syntheticContext = {
+                kind: 'custom',
+                key: hookContext.key,
+                context: hookContext.context,
+                data: hookContext.data,
+                metricValue: hookContext.metricValue,
+                creationDate: Date.now(),
+                url: 'undefined' != typeof window ? window.location.href : void 0
+            };
+            if (!this.shouldProcessEvent()) return;
+            const processedEvent = this.processEvent(syntheticContext);
+            this.config.onNewEvent?.(processedEvent);
+        } catch (error) {
+            console.warn('Event processing error in AfterTrackHook:', error);
+        }
+    }
+    shouldProcessEvent() {
+        const filter = this.config.filter;
+        if (!filter) return true;
+        return !(filter.kinds && !filter.kinds.includes('custom')) && !(filter.categories && !filter.categories.includes('custom'));
+    }
+    processEvent(context) {
+        const timestamp = Date.now();
+        this.idCounter = (this.idCounter + 1) % 999999;
+        const randomPart = Math.random().toString(36).substring(2, 8);
+        const id = `${context.kind}-${timestamp}-${this.idCounter.toString().padStart(6, '0')}-${randomPart}`;
+        return {
+            id,
+            kind: context.kind,
+            key: context.key,
+            timestamp,
+            context,
+            displayName: `Custom: ${context.key || 'unknown'}`,
+            category: 'custom',
+            metadata: this.extractMetadata(context)
+        };
+    }
+    extractMetadata(context) {
+        return {
+            data: context.data,
+            metricValue: context.metricValue,
+            url: context.url
+        };
+    }
+}
+class AfterIdentifyHook {
+    config;
+    idCounter = 0;
+    constructor(config = {}){
+        this.config = {
+            filter: config.filter,
+            onNewEvent: config.onNewEvent
+        };
+    }
+    getMetadata() {
+        return {
+            name: 'AfterIdentifyHook'
+        };
+    }
+    afterIdentify(hookContext, data, result) {
+        try {
+            if ('completed' !== result.status) return data;
+            const syntheticContext = {
+                kind: 'identify',
+                context: hookContext.context,
+                creationDate: Date.now(),
+                contextKind: this.determineContextKind(hookContext.context)
+            };
+            if (!this.shouldProcessEvent()) return data;
+            const processedEvent = this.processEvent(syntheticContext);
+            this.config.onNewEvent?.(processedEvent);
+        } catch (error) {
+            console.warn('Event processing error in AfterIdentifyHook:', error);
+        }
+        return data;
+    }
+    determineContextKind(context) {
+        if (context && 'object' == typeof context) {
+            if ('kind' in context && context.kind) return context.kind;
+            if (context.anonymous) return 'anonymousUser';
+        }
+        return 'user';
+    }
+    shouldProcessEvent() {
+        const filter = this.config.filter;
+        if (!filter) return true;
+        return !(filter.kinds && !filter.kinds.includes('identify')) && !(filter.categories && !filter.categories.includes('identify'));
+    }
+    processEvent(context) {
+        const timestamp = Date.now();
+        this.idCounter = (this.idCounter + 1) % 999999;
+        const randomPart = Math.random().toString(36).substring(2, 8);
+        const id = `${context.kind}-${timestamp}-${this.idCounter.toString().padStart(6, '0')}-${randomPart}`;
+        return {
+            id,
+            kind: context.kind,
+            key: context.key,
+            timestamp,
+            context,
+            displayName: `Identify: ${context.context?.key || 'anonymous'}`,
+            category: 'identify',
+            metadata: this.extractMetadata(context)
+        };
+    }
+    extractMetadata(context) {
+        return {
+            contextKind: context.contextKind
+        };
+    }
+}
+class AfterEvaluationHook {
+    config;
+    idCounter = 0;
+    constructor(config = {}){
+        this.config = {
+            filter: config.filter,
+            onNewEvent: config.onNewEvent
+        };
+    }
+    getMetadata() {
+        return {
+            name: 'AfterEvaluationHook'
+        };
+    }
+    afterEvaluation(hookContext, data, detail) {
+        try {
+            const syntheticContext = {
+                kind: 'feature',
+                key: hookContext.flagKey,
+                context: hookContext.context,
+                value: detail.value,
+                variation: detail.variationIndex,
+                default: hookContext.defaultValue,
+                reason: detail.reason,
+                creationDate: Date.now()
+            };
+            if (!this.shouldProcessEvent(syntheticContext)) return data;
+            const processedEvent = this.processEvent(syntheticContext);
+            this.config.onNewEvent?.(processedEvent);
+        } catch (error) {
+            console.warn('Event processing error in AfterEvaluationHook:', error);
+        }
+        return data;
+    }
+    shouldProcessEvent(context) {
+        const filter = this.config.filter;
+        if (!filter) return true;
+        return !(filter.kinds && !filter.kinds.includes('feature')) && !(filter.categories && !filter.categories.includes('flag')) && !(filter.flagKeys && context.key && !filter.flagKeys.includes(context.key));
+    }
+    processEvent(context) {
+        const timestamp = Date.now();
+        this.idCounter = (this.idCounter + 1) % 999999;
+        const randomPart = Math.random().toString(36).substring(2, 8);
+        const id = `${context.kind}-${timestamp}-${this.idCounter.toString().padStart(6, '0')}-${randomPart}`;
+        return {
+            id,
+            kind: context.kind,
+            key: context.key,
+            timestamp,
+            context,
+            displayName: `Flag: ${context.key || 'unknown'}`,
+            category: 'flag',
+            metadata: this.extractMetadata(context)
+        };
+    }
+    extractMetadata(context) {
+        return {
+            flagVersion: context.version,
+            variation: context.variation,
+            trackEvents: context.trackEvents,
+            reason: context.reason,
+            defaultValue: context.default
+        };
+    }
+}
+class EventInterceptionPlugin {
+    afterTrackHook;
+    afterIdentifyHook;
+    afterEvaluationHook;
+    eventStore;
+    config;
+    constructor(config = {}){
+        this.config = {
+            enableLogging: true,
+            ...config
+        };
+        this.eventStore = new EventStore();
+        const onNewEvent = (event)=>{
+            if (this.config.enableLogging) console.log('🎯 Event intercepted:', {
+                kind: event.kind,
+                key: event.key,
+                category: event.category,
+                displayName: event.displayName
+            });
+            this.eventStore.addEvent(event);
+        };
+        this.afterTrackHook = new AfterTrackHook({
+            filter: config.filter,
+            onNewEvent
+        });
+        this.afterIdentifyHook = new AfterIdentifyHook({
+            filter: config.filter,
+            onNewEvent
+        });
+        this.afterEvaluationHook = new AfterEvaluationHook({
+            filter: config.filter,
+            onNewEvent
+        });
+    }
+    getMetadata() {
+        return {
+            name: 'EventInterceptionPlugin'
+        };
+    }
+    getHooks(_metadata) {
+        return [
+            this.afterTrackHook,
+            this.afterIdentifyHook,
+            this.afterEvaluationHook
+        ];
+    }
+    register(_client) {}
+    getEvents() {
+        return this.eventStore.getEvents();
+    }
+    subscribe(listener) {
+        return this.eventStore.subscribe(listener);
+    }
+    clearEvents() {
+        this.eventStore.clear();
+    }
+    destroy() {
+        this.eventStore.destroy();
+    }
+}
+export { EventInterceptionPlugin, FlagOverridePlugin };

package/dist/plugins/EventInterceptionPlugin.d.ts

@@ -0,0 +1,30 @@
+import type { Hook, LDClient, LDPluginEnvironmentMetadata, LDPluginMetadata } from 'launchdarkly-js-client-sdk';
+import type { EventFilter, ProcessedEvent } from '../types/events';
+import type { IEventInterceptionPlugin } from '../types/plugin';
+/**
+ * Configuration options for the EventInterceptionPlugin
+ */
+export interface EventInterceptionPluginConfig {
+    /** Configuration for event filtering */
+    filter?: EventFilter;
+    /** Enable console logging for debugging */
+    enableLogging?: boolean;
+}
+/**
+ * Plugin dedicated to intercepting and processing LaunchDarkly events
+ */
+export declare class EventInterceptionPlugin implements IEventInterceptionPlugin {
+    private afterTrackHook;
+    private afterIdentifyHook;
+    private afterEvaluationHook;
+    private eventStore;
+    private config;
+    constructor(config?: EventInterceptionPluginConfig);
+    getMetadata(): LDPluginMetadata;
+    getHooks(_metadata: LDPluginEnvironmentMetadata): Hook[];
+    register(_client: LDClient): void;
+    getEvents(): ProcessedEvent[];
+    subscribe(listener: () => void): () => void;
+    clearEvents(): void;
+    destroy(): void;
+}

package/dist/plugins/FlagOverridePlugin.d.ts

@@ -1,4 +1,5 @@
-import type { LDClient, LDPlugin, LDDebugOverride, LDPluginMetadata } from 'launchdarkly-js-client-sdk';
+import type { LDClient, LDDebugOverride, LDPluginMetadata, LDFlagSet, Hook, LDPluginEnvironmentMetadata } from 'launchdarkly-js-client-sdk';
+import type { IFlagOverridePlugin } from '../types/plugin';
 /**
  * Configuration options for the FlagOverridePlugin
  */
@@ -6,7 +7,7 @@ export type FlagOverridePluginConfig = {
     /** Namespace for localStorage keys. Defaults to 'ld-flag-override' */
     storageNamespace?: string;
 };
-export declare class FlagOverridePlugin implements LDPlugin {
+export declare class FlagOverridePlugin implements IFlagOverridePlugin {
     private debugOverride?;
     private config;
     private ldClient;
@@ -15,6 +16,10 @@ export declare class FlagOverridePlugin implements LDPlugin {
      * Returns plugin metadata
      */
     getMetadata(): LDPluginMetadata;
+    /**
+     * Returns the hooks for the plugin
+     */
+    getHooks(_metadata: LDPluginEnvironmentMetadata): Hook[];
     /**
      * Called when the plugin is registered with the LaunchDarkly client
      */
@@ -44,7 +49,7 @@ export declare class FlagOverridePlugin implements LDPlugin {
      * Returns all currently active feature flag overrides
      * @returns Record of flag keys to their override values
      */
-    getAllOverrides(): Record<string, unknown>;
+    getAllOverrides(): LDFlagSet;
     /**
      * Returns the LaunchDarkly client instance
      * @returns The LaunchDarkly client

package/dist/plugins/index.d.ts

@@ -1,2 +1,4 @@
 export { FlagOverridePlugin } from './FlagOverridePlugin';
 export type { FlagOverridePluginConfig } from './FlagOverridePlugin';
+export { EventInterceptionPlugin } from './EventInterceptionPlugin';
+export type { EventInterceptionPluginConfig } from './EventInterceptionPlugin';

package/dist/tests/hooks/AfterEvaluationHook.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/hooks/AfterIdentifyHook.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/hooks/AfterTrackHook.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/hooks/EventStore.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/events.d.ts

@@ -0,0 +1,64 @@
+export interface SyntheticEventContext {
+    readonly kind: EventKind;
+    readonly key?: string;
+    readonly context?: object;
+    readonly creationDate: number;
+    readonly data?: unknown;
+    readonly metricValue?: number;
+    readonly url?: string;
+    readonly value?: any;
+    readonly variation?: number | null;
+    readonly default?: any;
+    readonly reason?: object;
+    readonly version?: number;
+    readonly trackEvents?: boolean;
+    readonly debugEventsUntilDate?: number;
+    readonly contextKind?: string;
+}
+/**
+ * Valid event kinds that can be emitted by the LaunchDarkly SDK
+ */
+declare const VALID_EVENT_KINDS: readonly ["identify", "feature", "custom", "debug", "summary", "diagnostic"];
+/**
+ * Valid event categories used for organizing events
+ */
+declare const VALID_EVENT_CATEGORIES: readonly ["flag", "custom", "identify", "debug"];
+/**
+ * Strict typing for event kinds based on LaunchDarkly's event system
+ */
+export type EventKind = (typeof VALID_EVENT_KINDS)[number];
+/**
+ * Event categories for UI organization
+ */
+export type EventCategory = (typeof VALID_EVENT_CATEGORIES)[number];
+/**
+ * Enhanced processed event
+ */
+export interface ProcessedEvent {
+    readonly id: string;
+    readonly kind: EventKind;
+    readonly key?: string;
+    readonly timestamp: number;
+    readonly context: SyntheticEventContext;
+    readonly displayName: string;
+    readonly category: EventCategory;
+    readonly metadata?: Readonly<Record<string, unknown>>;
+}
+/**
+ * Event filter configuration
+ */
+export interface EventFilter {
+    readonly kinds?: ReadonlyArray<EventKind>;
+    readonly categories?: ReadonlyArray<EventCategory>;
+    readonly flagKeys?: ReadonlyArray<string>;
+    readonly timeRange?: {
+        readonly start: number;
+        readonly end: number;
+    };
+}
+/**
+ * Type guards for event validation
+ */
+export declare function isValidEventKind(kind: string): kind is EventKind;
+export declare function isValidEventCategory(category: string): category is EventCategory;
+export {};

package/dist/types/plugin.d.ts

@@ -1,4 +1,5 @@
 import type { LDClient, LDDebugOverride, LDFlagSet, LDFlagValue, LDPlugin } from 'launchdarkly-js-client-sdk';
+import type { ProcessedEvent } from './events';
 /**
  * Interface for flag override plugins that can be used with the LaunchDarkly Toolbar
  */
@@ -29,3 +30,23 @@ export interface IFlagOverridePlugin extends LDPlugin, LDDebugOverride {
      */
     getClient(): LDClient | null;
 }
+/**
+ * Interface for event interception plugins that can be used with the LaunchDarkly Toolbar
+ */
+export interface IEventInterceptionPlugin extends LDPlugin {
+    /**
+     * Gets all intercepted events from the event store
+     * @returns Array of processed events
+     */
+    getEvents(): ProcessedEvent[];
+    /**
+     * Subscribes to event store changes
+     * @param listener - Callback function to be called when events change
+     * @returns Unsubscribe function
+     */
+    subscribe(listener: () => void): () => void;
+    /**
+     * Clears all events from the event store
+     */
+    clearEvents(): void;
+}

package/dist/ui/Toolbar/LaunchDarklyToolbar.d.ts

@@ -1,14 +1,16 @@
 import { ToolbarMode, ToolbarPosition } from './types/toolbar';
-import type { IFlagOverridePlugin } from '../../types/plugin';
+import type { IEventInterceptionPlugin, IFlagOverridePlugin } from '../../types/plugin';
 export interface LdToolbarProps {
-    flagOverridePlugin?: IFlagOverridePlugin;
     mode: ToolbarMode;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
 }
 export declare function LdToolbar(props: LdToolbarProps): import("react/jsx-runtime").JSX.Element;
 export interface LaunchDarklyToolbarProps {
     devServerUrl?: string;
     projectKey?: string;
     flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
     pollIntervalInMs?: number;
     position?: ToolbarPosition;
 }

package/dist/ui/Toolbar/TabContent/EventsTabContent.css.d.ts

@@ -1,3 +1,21 @@
+export declare const statsHeader: string;
+export declare const statsText: string;
 export declare const eventInfo: string;
 export declare const eventName: string;
 export declare const eventMeta: string;
+export declare const eventBadge: string;
+export declare const eventBadgeFeature: string;
+export declare const eventBadgeIdentify: string;
+export declare const eventBadgeCustom: string;
+export declare const eventBadgeDebug: string;
+export declare const eventBadgeSummary: string;
+export declare const eventBadgeDiagnostic: string;
+export declare const eventBadgeDefault: string;
+export declare const virtualContainer: string;
+export declare const virtualInner: string;
+export declare const virtualItem: string;
+export declare const liveTailContainer: string;
+export declare const liveTailIndicator: string;
+export declare const liveTailDot: string;
+export declare const liveTailText: string;
+export declare const liveTailSubtext: string;

package/dist/ui/Toolbar/TabContent/EventsTabContent.d.ts

@@ -1 +1,6 @@
-export declare function EventsTabContent(): import("react/jsx-runtime").JSX.Element;
+import type { IEventInterceptionPlugin } from '../../../types/plugin';
+interface EventsTabContentProps {
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
+}
+export declare function EventsTabContent(props: EventsTabContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/Toolbar/components/DoNotTrackWarning.css.d.ts

@@ -0,0 +1,5 @@
+export declare const warningContainer: string;
+export declare const warningMessage: string;
+export declare const warningTitle: string;
+export declare const warningText: string;
+export declare const warningHelp: string;

package/dist/ui/Toolbar/components/DoNotTrackWarning.d.ts

@@ -0,0 +1 @@
+export declare function DoNotTrackWarning(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toolbar/components/ExpandedToolbarContent.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { ActiveTabId, ToolbarMode } from '../types';
-import type { IFlagOverridePlugin } from '../../../types/plugin';
+import type { IFlagOverridePlugin, IEventInterceptionPlugin } from '../../../types/plugin';
 interface ExpandedToolbarContentProps {
     isExpanded: boolean;
     activeTab: ActiveTabId;
@@ -11,8 +11,9 @@ interface ExpandedToolbarContentProps {
     onClose: () => void;
     onTabChange: (tabId: string) => void;
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
-    flagOverridePlugin?: IFlagOverridePlugin;
     mode: ToolbarMode;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
 }
 export declare function ExpandedToolbarContent(props: ExpandedToolbarContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/Toolbar/components/TabContentRenderer.d.ts

@@ -1,10 +1,11 @@
 import { TabId, ToolbarMode } from '../types';
-import type { IFlagOverridePlugin } from '../../../types/plugin';
+import type { IFlagOverridePlugin, IEventInterceptionPlugin } from '../../../types/plugin';
 interface TabContentRendererProps {
     activeTab: TabId;
     slideDirection: number;
-    flagOverridePlugin?: IFlagOverridePlugin;
     mode: ToolbarMode;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    eventInterceptionPlugin?: IEventInterceptionPlugin;
 }
 export declare function TabContentRenderer(props: TabContentRendererProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/ui/Toolbar/components/index.d.ts

@@ -1,6 +1,7 @@
 export { ActionButtonsContainer } from './ActionButtonsContainer';
 export { CircleLogo } from './CircleLogo';
 export { ConnectionStatus } from './ConnectionStatus';
+export { DoNotTrackWarning } from './DoNotTrackWarning';
 export { ExpandedToolbarContent } from './ExpandedToolbarContent';
 export { LaunchDarklyIcon } from './icons/LaunchDarklyIcon';
 export { StatusDot } from './StatusDot';

package/dist/ui/Toolbar/constants/animations.d.ts

@@ -75,6 +75,33 @@ export declare const ANIMATION_CONFIG: {
         };
         readonly delay: 0.3;
     };
+    readonly eventList: {
+        readonly liveTail: {
+            readonly dot: {
+                readonly scale: number[];
+                readonly opacity: number[];
+                readonly transition: {
+                    readonly duration: 1.5;
+                    readonly repeat: number;
+                    readonly ease: "easeInOut";
+                };
+            };
+            readonly container: {
+                readonly initial: {
+                    readonly opacity: 0;
+                    readonly y: 20;
+                };
+                readonly animate: {
+                    readonly opacity: 1;
+                    readonly y: 0;
+                };
+                readonly transition: {
+                    readonly duration: 0.4;
+                    readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+                };
+            };
+        };
+    };
 };
 export declare const DIMENSIONS: {
     readonly collapsed: {

package/dist/ui/Toolbar/hooks/index.d.ts

@@ -3,3 +3,5 @@ export { useToolbarAnimations } from './useToolbarAnimations';
 export { useToolbarVisibility } from './useToolbarVisibility';
 export { useToolbarDrag } from './useToolbarDrag';
 export { useKeyPressed } from './useKeyPressed';
+export { useEvents } from './useEvents';
+export { useCurrentDate } from './useCurrentDate';

package/dist/ui/Toolbar/hooks/useCurrentDate.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook that provides the current date and updates it at a specified interval
+ * Useful for displaying relative timestamps that update in real-time
+ */
+export declare function useCurrentDate(updateInterval?: number): Date;

package/dist/ui/Toolbar/hooks/useEvents.d.ts

@@ -0,0 +1,13 @@
+import type { ProcessedEvent } from '../../../types/events';
+import { IEventInterceptionPlugin } from '../../../types/plugin';
+interface EventStats {
+    totalEvents: number;
+    eventsByKind: Record<string, number>;
+    eventsByFlag: Record<string, number>;
+}
+interface UseEventsReturn {
+    events: ProcessedEvent[];
+    eventStats: EventStats;
+}
+export declare function useEvents(eventInterceptionPlugin: IEventInterceptionPlugin | undefined, searchTerm?: string): UseEventsReturn;
+export {};