@memberjunction/ng-ai-test-harness 2.55.0

package/README.md

@@ -0,0 +1,187 @@
+# @memberjunction/ng-ai-test-harness
+
+A beautiful, reusable Angular component for testing AI agents, prompts, and actions in MemberJunction applications.
+
+## Overview
+
+The AI Test Harness provides a comprehensive testing interface supporting three modes:
+- **Agent Mode**: Test AI agents with conversational inputs
+- **Prompt Mode**: Test AI prompts with user messages
+- **Action Mode**: Test actions with parameter inputs
+
+## Features
+
+- 🎨 Beautiful, modern UI with smooth animations
+- 🔄 Three testing modes with easy switching
+- ⚙️ Advanced settings (temperature, max tokens, streaming)
+- 📊 Execution history tracking
+- 💬 Real-time streaming responses
+- 💰 Token usage and cost tracking
+- 🔌 Dialog service for programmatic access
+- 🎯 TypeScript support with full type safety
+
+## Installation
+
+```bash
+npm install @memberjunction/ng-ai-test-harness
+```
+
+## Usage
+
+### Module Import
+
+```typescript
+import { AITestHarnessModule } from '@memberjunction/ng-ai-test-harness';
+
+@NgModule({
+  imports: [
+    AITestHarnessModule,
+    // ... other imports
+  ]
+})
+export class YourModule { }
+```
+
+### Component Usage
+
+#### Embedded Mode
+
+```html
+<mj-ai-test-harness 
+  [config]="testConfig"
+  [embedded]="true"
+  (executionComplete)="onTestComplete($event)"
+  (modeChanged)="onModeChanged($event)">
+</mj-ai-test-harness>
+```
+
+```typescript
+testConfig: TestHarnessConfig = {
+  mode: 'agent',
+  entityId: 'agent-id-here',
+  showHistory: true,
+  showAdvancedOptions: false,
+  theme: 'light',
+  maxHistoryItems: 10
+};
+
+onTestComplete(result: TestExecutionResult) {
+  console.log('Test completed:', result);
+}
+```
+
+#### Dialog Mode
+
+```typescript
+import { AITestHarnessDialogService } from '@memberjunction/ng-ai-test-harness';
+
+constructor(private testHarness: AITestHarnessDialogService) {}
+
+// Test an agent
+testAgent() {
+  this.testHarness.openForAgent('agent-id').subscribe(result => {
+    if (result.success) {
+      console.log('Agent test successful:', result);
+    }
+  });
+}
+
+// Test a prompt
+testPrompt() {
+  this.testHarness.openForPrompt('prompt-id').subscribe(result => {
+    console.log('Prompt test result:', result);
+  });
+}
+
+// Test an action
+testAction() {
+  this.testHarness.openForAction('action-id').subscribe(result => {
+    console.log('Action test result:', result);
+  });
+}
+```
+
+## Configuration
+
+### TestHarnessConfig
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| mode | `'agent' \| 'prompt' \| 'action'` | `'agent'` | Testing mode |
+| entityId | `string` | - | Pre-selected entity ID |
+| showHistory | `boolean` | `true` | Show execution history |
+| showAdvancedOptions | `boolean` | `false` | Show advanced settings |
+| theme | `'light' \| 'dark'` | `'light'` | Visual theme |
+| maxHistoryItems | `number` | `10` | Max history items to display |
+
+### TestExecutionResult
+
+```typescript
+interface TestExecutionResult {
+  success: boolean;
+  result?: any;
+  error?: string;
+  executionTime?: number;
+  tokensUsed?: number;
+  cost?: number;
+}
+```
+
+## Advanced Features
+
+### Custom Entity Filtering
+
+```typescript
+this.testHarness.open({
+  mode: 'agent',
+  entityFilter: "Status='Active' AND Category='Customer Service'",
+  defaultInput: 'Hello, how can you help me?'
+});
+```
+
+### Streaming Responses
+
+The test harness supports real-time streaming for compatible AI models. Enable streaming in the advanced options panel or programmatically:
+
+```typescript
+this.testHarness.open({
+  mode: 'prompt',
+  streamResponse: true,
+  temperature: 0.7,
+  maxTokens: 2000
+});
+```
+
+## Styling
+
+The component uses CSS custom properties for theming:
+
+```scss
+:root {
+  --harness-primary: #007bff;
+  --harness-success: #28a745;
+  --harness-error: #dc3545;
+  --harness-background: #f8f9fa;
+  --harness-text: #212529;
+}
+```
+
+## Dependencies
+
+- Angular 18.0.2+
+- @memberjunction/core
+- @memberjunction/core-entities
+- @memberjunction/graphql-dataprovider
+- Kendo UI for Angular
+
+## License
+
+ISC
+
+## Contributing
+
+Contributions are welcome! Please submit pull requests to the MemberJunction repository.
+
+## Support
+
+For issues and questions, please use the MemberJunction GitHub repository.

package/dist/lib/agent-execution-monitor.component.d.ts

@@ -0,0 +1,273 @@
+import { OnChanges, SimpleChanges, OnDestroy, ElementRef, AfterViewInit, ChangeDetectorRef, ViewContainerRef, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Progress message with display mode
+ */
+export interface ProgressMessage {
+    id: string;
+    message: string;
+    timestamp: Date;
+    displayMode: 'live' | 'historical' | 'both';
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Represents a node in the execution tree with all necessary display information
+ */
+export interface ExecutionTreeNode {
+    id: string;
+    name: string;
+    type: 'validation' | 'prompt' | 'action' | 'sub-agent' | 'decision' | 'chat';
+    status: 'pending' | 'running' | 'completed' | 'failed';
+    startTime?: Date;
+    endTime?: Date;
+    duration?: number;
+    agentPath: string[];
+    inputPreview?: string;
+    outputPreview?: string;
+    error?: string;
+    children?: ExecutionTreeNode[];
+    expanded?: boolean;
+    depth: number;
+    tokensUsed?: number;
+    cost?: number;
+    detailsMarkdown?: string;
+    detailsExpanded?: boolean;
+    promptCount?: number;
+    displayMode?: 'live' | 'historical' | 'both';
+}
+/**
+ * Mode for the execution monitor component
+ */
+export type ExecutionMonitorMode = 'live' | 'historical';
+/**
+ * Execution statistics for display
+ */
+export interface ExecutionStats {
+    totalSteps: number;
+    completedSteps: number;
+    failedSteps: number;
+    totalTokens: number;
+    totalCost: number;
+    stepsByType: Record<string, number>;
+    totalDuration?: number;
+    totalPrompts: number;
+}
+/**
+ * AgentExecutionMonitor Component
+ *
+ * A reusable component for visualizing AI agent execution flow in real-time or historically.
+ * Displays a hierarchical tree of execution steps with status, timing, and preview information.
+ *
+ * Features:
+ * - Real-time updates for live executions
+ * - Historical playback for completed executions
+ * - Collapsible tree structure
+ * - Step status indicators with animations
+ * - Execution statistics
+ * - Token usage and cost tracking
+ * - Error display
+ * - Input/output preview
+ */
+export declare class AgentExecutionMonitorComponent implements OnChanges, OnDestroy, AfterViewInit {
+    private cdr;
+    mode: ExecutionMonitorMode;
+    executionData: any;
+    autoExpand: boolean;
+    runId: string | null;
+    runType: 'agent' | 'prompt';
+    viewRunClick: EventEmitter<{
+        runId: string;
+        runType: 'agent' | 'prompt';
+    }>;
+    executionTreeContainer: ElementRef<HTMLDivElement>;
+    executionNodesContainer: ViewContainerRef;
+    executionTree: ExecutionTreeNode[];
+    currentStep: ExecutionTreeNode | null;
+    private nodeComponentMap;
+    stats: ExecutionStats;
+    private userHasInteracted;
+    private userHasScrolled;
+    private isAutoScrolling;
+    private lastScrollPosition;
+    private scrollThreshold;
+    private viewInitialized;
+    private processedStepIds;
+    private newlyAddedNodeIds;
+    private destroy$;
+    private updateSubscription?;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Clear all dynamically created components
+     */
+    private clearNodeComponents;
+    /**
+     * Process execution data based on mode
+     */
+    private processExecutionData;
+    /**
+     * Build tree from historical execution data
+     */
+    private buildTreeFromHistoricalData;
+    /**
+     * Render the execution tree using dynamic components
+     */
+    private renderTree;
+    /**
+     * Create a component for a node and its children
+     */
+    private createNodeComponent;
+    /**
+     * Convert new execution tree format to display nodes
+     */
+    private convertExecutionTree;
+    /**
+     * Convert legacy step format to tree nodes
+     */
+    private convertLegacySteps;
+    /**
+     * Map step type strings to our type enum
+     */
+    private mapStepType;
+    /**
+     * Map status strings to our status enum
+     */
+    private mapStepStatus;
+    /**
+     * Create a preview string from data
+     */
+    private createPreview;
+    /**
+     * Extract token count from output data
+     */
+    private extractTokens;
+    /**
+     * Extract cost from output data
+     */
+    private extractCost;
+    /**
+     * Calculate duration from timestamps
+     */
+    private calculateDuration;
+    /**
+     * Set up live updates for real-time execution
+     */
+    private setupLiveUpdates;
+    /**
+     * Convert live steps format to execution tree format
+     */
+    private convertLiveStepsToTree;
+    /**
+     * Update current step indicator
+     */
+    private updateCurrentStep;
+    /**
+     * Mark previously new nodes as completed
+     */
+    private markPreviouslyNewNodesAsComplete;
+    /**
+     * Find a node by ID in the tree
+     */
+    private findNodeById;
+    /**
+     * Calculate execution statistics
+     */
+    private calculateStats;
+    /**
+     * Toggle node expansion
+     */
+    toggleNode(node: ExecutionTreeNode): void;
+    /**
+     * Check if node has expandable content
+     */
+    private hasExpandableContent;
+    /**
+     * Handle scroll events
+     */
+    onScroll(event: Event): void;
+    /**
+     * Handle user clicks (interaction detection)
+     */
+    onUserInteraction(): void;
+    /**
+     * Check if scroll is at bottom
+     */
+    private isScrolledToBottom;
+    /**
+     * Check if user is at bottom (for initial setup)
+     */
+    private checkIfUserAtBottom;
+    /**
+     * Auto-scroll to bottom if user hasn't interacted
+     */
+    private autoScrollToBottom;
+    /**
+     * Format agent path for display
+     */
+    formatAgentPath(path: string[]): string;
+    /**
+     * Format duration for display
+     */
+    formatDuration(ms: number): string;
+    /**
+     * Get step types for display
+     */
+    getStepTypes(): string[];
+    /**
+     * Format markdown content for display
+     */
+    formatMarkdown(markdown: string): string;
+    /**
+     * Append new live steps without re-rendering entire tree
+     */
+    private appendNewLiveSteps;
+    /**
+     * Generate a stable ID for a step based on its content
+     */
+    private generateStepId;
+    /**
+     * Find parent node based on depth
+     */
+    private findParentNode;
+    /**
+     * Filter nodes based on display mode
+     */
+    private filterNodesForMode;
+    /**
+     * Build a map of nodes by ID for quick lookup
+     */
+    private buildNodeMap;
+    /**
+     * Create a single node from a live step
+     */
+    private createNodeFromLiveStep;
+    /**
+     * Collect all node IDs in the tree
+     */
+    private collectNodeIds;
+    /**
+     * Preserve expanded state of all nodes
+     */
+    private preserveExpandedState;
+    /**
+     * Restore expanded state of all nodes
+     */
+    private restoreExpandedState;
+    /**
+     * Check if execution is complete
+     */
+    isExecutionComplete(): boolean;
+    /**
+     * Handle view run button click
+     */
+    onViewRunClick(): void;
+    /**
+     * Append a node to its parent based on depth
+     */
+    private appendToParent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AgentExecutionMonitorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AgentExecutionMonitorComponent, "mj-agent-execution-monitor", never, { "mode": { "alias": "mode"; "required": false; }; "executionData": { "alias": "executionData"; "required": false; }; "autoExpand": { "alias": "autoExpand"; "required": false; }; "runId": { "alias": "runId"; "required": false; }; "runType": { "alias": "runType"; "required": false; }; }, { "viewRunClick": "viewRunClick"; }, never, never, true, never>;
+}
+//# sourceMappingURL=agent-execution-monitor.component.d.ts.map

package/dist/lib/agent-execution-monitor.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-execution-monitor.component.d.ts","sourceRoot":"","sources":["../../src/lib/agent-execution-monitor.component.ts"],"names":[],"mappings":"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"}