@memberjunction/ng-core-entity-forms 2.50.0 → 2.52.0

package/dist/lib/custom/ai-test-harness/agent-execution-monitor.component.js

@@ -0,0 +1,1327 @@
+import { Component, Input, ViewChild, ChangeDetectionStrategy, ViewContainerRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subject, interval } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ExecutionNodeComponent } from './agent-execution-node.component';
+import * as i0 from "@angular/core";
+const _c0 = ["executionTreeContainer"];
+const _c1 = ["executionNodesContainer"];
+function AgentExecutionMonitorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵelement(1, "span", 18);
+    i0.ɵɵtext(2, " LIVE ");
+    i0.ɵɵelementEnd();
+} }
+function AgentExecutionMonitorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7)(1, "span", 19);
+    i0.ɵɵtext(2, "Current:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 20);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 21);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.formatAgentPath(ctx_r1.currentStep.agentPath));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.currentStep.name);
+} }
+function AgentExecutionMonitorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Waiting for execution to begin...");
+    i0.ɵɵelementEnd()();
+} }
+function AgentExecutionMonitorComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("(", ctx_r1.stats.failedSteps, " failed)");
+} }
+function AgentExecutionMonitorComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "span", 14);
+    i0.ɵɵtext(2, "Duration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 15);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.stats.totalDuration));
+} }
+function AgentExecutionMonitorComponent_Conditional_37_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const type_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.stats.stepsByType[type_r3], " ", type_r3, " ");
+} }
+function AgentExecutionMonitorComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵrepeaterCreate(1, AgentExecutionMonitorComponent_Conditional_37_For_2_Template, 2, 2, "span", 23, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.getStepTypes());
+} }
+/**
+ * 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 class AgentExecutionMonitorComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.mode = 'historical';
+        this.executionData = null; // Can be live updates or historical data
+        this.autoExpand = true; // Auto-expand nodes in live mode
+        this.executionTree = [];
+        this.currentStep = null;
+        // Track component references for dynamic components
+        this.nodeComponentMap = new Map();
+        this.stats = {
+            totalSteps: 0,
+            completedSteps: 0,
+            failedSteps: 0,
+            totalTokens: 0,
+            totalCost: 0,
+            stepsByType: {},
+            totalPrompts: 0
+        };
+        // User interaction tracking
+        this.userHasInteracted = false;
+        this.userHasScrolled = false;
+        this.isAutoScrolling = false;
+        this.lastScrollPosition = 0;
+        this.scrollThreshold = 50; // pixels from bottom to consider "at bottom"
+        // View initialization flag
+        this.viewInitialized = false;
+        // Track processed step IDs to avoid duplication
+        this.processedStepIds = new Set();
+        // Track which nodes were added in the current update
+        this.newlyAddedNodeIds = new Set();
+        this.destroy$ = new Subject();
+    }
+    ngOnChanges(changes) {
+        if (changes['executionData']) {
+            // Check if we're starting a new live execution (empty liveSteps array)
+            if (this.mode === 'live' &&
+                this.executionData &&
+                this.executionData.liveSteps &&
+                this.executionData.liveSteps.length === 0 &&
+                this.executionTree.length > 0) {
+                // Clear everything for new run
+                this.processedStepIds.clear();
+                this.newlyAddedNodeIds.clear();
+                this.clearNodeComponents();
+                this.executionTree = [];
+                this.currentStep = null;
+                this.calculateStats();
+            }
+            // Process data even if it's empty/null (for initial setup)
+            this.processExecutionData();
+        }
+        // Handle mode changes
+        if (changes['mode'] && !changes['mode'].firstChange) {
+            // Clear live nodes when switching from live to historical
+            if (changes['mode'].previousValue === 'live' && changes['mode'].currentValue === 'historical') {
+                // Stop live updates
+                if (this.updateSubscription) {
+                    this.updateSubscription.unsubscribe();
+                    this.updateSubscription = undefined;
+                }
+                // Clear all tracking data from live mode
+                this.processedStepIds.clear();
+                this.newlyAddedNodeIds.clear();
+                this.clearNodeComponents();
+                this.executionTree = [];
+            }
+            this.processExecutionData();
+        }
+    }
+    ngAfterViewInit() {
+        this.viewInitialized = true;
+        // Initial setup for scroll behavior
+        if (this.mode === 'live') {
+            this.checkIfUserAtBottom();
+        }
+        // If we have data waiting to be rendered, render it now
+        if (this.executionData && this.executionTree.length === 0) {
+            this.processExecutionData();
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.updateSubscription) {
+            this.updateSubscription.unsubscribe();
+            this.updateSubscription = undefined;
+        }
+        this.clearNodeComponents();
+    }
+    /**
+     * Clear all dynamically created components
+     */
+    clearNodeComponents() {
+        this.nodeComponentMap.forEach(ref => ref.destroy());
+        this.nodeComponentMap.clear();
+        if (this.executionNodesContainer) {
+            this.executionNodesContainer.clear();
+        }
+    }
+    /**
+     * Process execution data based on mode
+     */
+    processExecutionData() {
+        if (this.mode === 'historical') {
+            // Clear processed step IDs when processing historical data
+            this.processedStepIds.clear();
+            // Process historical data
+            this.buildTreeFromHistoricalData();
+        }
+        else {
+            // For live mode, only clear if we don't have existing data
+            // This prevents losing state when switching tabs
+            if (this.executionTree.length === 0) {
+                this.processedStepIds.clear();
+                this.newlyAddedNodeIds.clear();
+            }
+            // Set up live updates
+            this.setupLiveUpdates();
+        }
+        // Only calculate stats if we have data
+        if (this.executionTree.length > 0) {
+            this.calculateStats();
+        }
+    }
+    /**
+     * Build tree from historical execution data
+     */
+    buildTreeFromHistoricalData() {
+        if (!this.executionData) {
+            this.clearNodeComponents();
+            this.executionTree = [];
+            return;
+        }
+        // Clear existing components for full rebuild
+        this.clearNodeComponents();
+        // Handle executionTree format
+        if (this.executionData.executionTree) {
+            this.executionTree = this.convertExecutionTree(this.executionData.executionTree);
+        }
+        else if (this.executionData.liveSteps) {
+            // Handle live steps that have been converted to historical
+            this.executionTree = this.convertLiveStepsToTree(this.executionData.liveSteps);
+        }
+        else if (this.executionData.steps) {
+            // Handle legacy steps format
+            this.executionTree = this.convertLegacySteps(this.executionData.steps);
+        }
+        else {
+            this.executionTree = [];
+        }
+        // Render the tree using dynamic components
+        if (this.executionNodesContainer) {
+            this.renderTree();
+        }
+    }
+    /**
+     * Render the execution tree using dynamic components
+     */
+    renderTree() {
+        if (!this.executionNodesContainer) {
+            console.warn('📊 Execution Monitor: No container available for rendering');
+            return;
+        }
+        // Clear and recreate all components for historical view
+        this.clearNodeComponents();
+        // Create components for each root node
+        for (const node of this.executionTree) {
+            this.createNodeComponent(node, this.executionNodesContainer);
+        }
+    }
+    /**
+     * Create a component for a node and its children
+     */
+    createNodeComponent(node, container) {
+        const componentRef = container.createComponent(ExecutionNodeComponent);
+        const instance = componentRef.instance;
+        // Set inputs
+        instance.node = node;
+        // No need to apply margin here - it's handled in the component template
+        // Subscribe to outputs
+        instance.toggleNode.subscribe((n) => this.toggleNode(n));
+        instance.userInteracted.subscribe(() => this.onUserInteraction());
+        // Store reference
+        this.nodeComponentMap.set(node.id, componentRef);
+        // Force immediate change detection to ensure styles are applied
+        componentRef.changeDetectorRef.markForCheck();
+        componentRef.changeDetectorRef.detectChanges();
+        return componentRef;
+    }
+    /**
+     * Convert new execution tree format to display nodes
+     */
+    convertExecutionTree(nodes, depth = 0) {
+        // Sort nodes by StepNumber before processing
+        const sortedNodes = [...nodes].sort((a, b) => {
+            const aStepNum = a.step?.StepNumber || 0;
+            const bStepNum = b.step?.StepNumber || 0;
+            return aStepNum - bStepNum;
+        });
+        return sortedNodes.map((node, index) => {
+            // Parse the step name for markdown content (same as live steps)
+            const stepName = node.step?.StepName || 'Unknown Step';
+            let name = stepName;
+            let detailsMarkdown;
+            // Check if the step name contains markdown (indicated by newlines or markdown syntax)
+            if (stepName.includes('\n') || stepName.includes('**') || stepName.includes('##')) {
+                // Split by newline and use first line as name
+                const lines = stepName.split('\n');
+                name = lines[0].trim();
+                // Rest is markdown details
+                if (lines.length > 1) {
+                    detailsMarkdown = lines.slice(1).join('\n').trim();
+                }
+            }
+            const treeNode = {
+                id: node.step?.ID || `node-${Date.now()}-${index}`,
+                name: name,
+                type: this.mapStepType(node.executionType || node.step?.StepType),
+                status: this.mapStepStatus(node.step?.Status),
+                startTime: node.startTime ? new Date(node.startTime) : undefined,
+                endTime: node.endTime ? new Date(node.endTime) : undefined,
+                duration: node.durationMs,
+                agentPath: node.agentHierarchy || [],
+                inputPreview: this.createPreview(node.inputData),
+                outputPreview: this.createPreview(node.outputData),
+                error: node.step?.ErrorMessage,
+                expanded: false,
+                depth: node.depth !== undefined ? node.depth : depth, // Use node.depth if available, fallback to recursion depth
+                tokensUsed: this.extractTokens(node.outputData),
+                cost: this.extractCost(node.outputData),
+                detailsMarkdown: detailsMarkdown,
+                detailsExpanded: false,
+                children: node.children ? this.convertExecutionTree(node.children, node.depth !== undefined ? node.depth + 1 : depth + 1) : undefined
+            };
+            return treeNode;
+        });
+    }
+    /**
+     * Convert legacy step format to tree nodes
+     */
+    convertLegacySteps(steps) {
+        return steps.map((step, index) => {
+            // Parse the step name for markdown content
+            const stepName = step.StepName || '';
+            let name = stepName;
+            let detailsMarkdown;
+            // Check if the step name contains markdown
+            if (stepName.includes('\n') || stepName.includes('**') || stepName.includes('##')) {
+                const lines = stepName.split('\n');
+                name = lines[0].trim();
+                if (lines.length > 1) {
+                    detailsMarkdown = lines.slice(1).join('\n').trim();
+                }
+            }
+            return {
+                id: step.ID || `step-${index}`,
+                name: name,
+                type: this.mapStepType(step.StepType),
+                status: this.mapStepStatus(step.Status),
+                startTime: step.StartedAt ? new Date(step.StartedAt) : undefined,
+                endTime: step.CompletedAt ? new Date(step.CompletedAt) : undefined,
+                duration: this.calculateDuration(step.StartedAt, step.CompletedAt),
+                agentPath: [],
+                inputPreview: this.createPreview(step.InputData),
+                outputPreview: this.createPreview(step.OutputData),
+                error: step.ErrorMessage,
+                expanded: false,
+                depth: 0,
+                detailsMarkdown: detailsMarkdown,
+                detailsExpanded: false
+            };
+        });
+    }
+    /**
+     * Map step type strings to our type enum
+     */
+    mapStepType(type) {
+        const typeMap = {
+            'validation': 'validation',
+            'prompt': 'prompt',
+            'action': 'action',
+            'subagent': 'sub-agent',
+            'sub-agent': 'sub-agent',
+            'decision': 'decision',
+            'chat': 'chat'
+        };
+        return typeMap[type?.toLowerCase()] || 'prompt';
+    }
+    /**
+     * Map status strings to our status enum
+     */
+    mapStepStatus(status) {
+        const statusMap = {
+            'pending': 'pending',
+            'running': 'running',
+            'completed': 'completed',
+            'failed': 'failed',
+            'error': 'failed'
+        };
+        return statusMap[status?.toLowerCase()] || 'pending';
+    }
+    /**
+     * Create a preview string from data
+     */
+    createPreview(data) {
+        if (!data)
+            return undefined;
+        try {
+            const parsed = typeof data === 'string' ? JSON.parse(data) : data;
+            // Extract meaningful preview
+            if (parsed.promptName)
+                return `Prompt: ${parsed.promptName}`;
+            if (parsed.actionName)
+                return `Action: ${parsed.actionName}`;
+            if (parsed.subAgentName)
+                return `Sub-agent: ${parsed.subAgentName}`;
+            if (parsed.message)
+                return parsed.message;
+            if (parsed.userMessage)
+                return parsed.userMessage;
+            // Show action results clearly
+            if (parsed.actionResult) {
+                const result = parsed.actionResult;
+                let preview = '';
+                if (result.success !== undefined) {
+                    preview += `Success: ${result.success}\n`;
+                }
+                if (result.resultCode) {
+                    preview += `Result Code: ${result.resultCode}\n`;
+                }
+                if (result.message) {
+                    preview += `Message: ${result.message}\n`;
+                }
+                if (result.result) {
+                    preview += `Result: ${typeof result.result === 'object' ? JSON.stringify(result.result, null, 2) : result.result}`;
+                }
+                return preview.trim();
+            }
+            // Legacy action result format
+            if (parsed.result) {
+                if (typeof parsed.result === 'object') {
+                    return JSON.stringify(parsed.result, null, 2);
+                }
+                return String(parsed.result);
+            }
+            // Show prompt results
+            if (parsed.promptResult) {
+                const result = parsed.promptResult;
+                let preview = '';
+                if (result.success !== undefined) {
+                    preview += `Success: ${result.success}\n`;
+                }
+                if (result.content) {
+                    preview += `Content: ${typeof result.content === 'string' ? result.content : JSON.stringify(result.content, null, 2)}`;
+                }
+                return preview;
+            }
+            // Fallback to stringified preview
+            const str = JSON.stringify(parsed, null, 2);
+            return str.length > 500 ? str.substring(0, 500) + '...' : str;
+        }
+        catch {
+            return typeof data === 'string' ? data : JSON.stringify(data);
+        }
+    }
+    /**
+     * Extract token count from output data
+     */
+    extractTokens(data) {
+        if (!data)
+            return undefined;
+        try {
+            const parsed = typeof data === 'string' ? JSON.parse(data) : data;
+            return parsed.promptResult?.tokensUsed || parsed.tokensUsed;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    /**
+     * Extract cost from output data
+     */
+    extractCost(data) {
+        if (!data)
+            return undefined;
+        try {
+            const parsed = typeof data === 'string' ? JSON.parse(data) : data;
+            return parsed.promptResult?.totalCost || parsed.totalCost;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    /**
+     * Calculate duration from timestamps
+     */
+    calculateDuration(start, end) {
+        if (!start || !end)
+            return undefined;
+        const startTime = new Date(start).getTime();
+        const endTime = new Date(end).getTime();
+        return endTime - startTime;
+    }
+    /**
+     * Set up live updates for real-time execution
+     */
+    setupLiveUpdates() {
+        // Handle live streaming data format
+        if (this.executionData && this.executionData.liveSteps) {
+            // Only clear and rebuild if we don't have existing data
+            if (this.executionTree.length === 0) {
+                this.clearNodeComponents();
+                this.executionTree = [];
+                // Then append all steps
+                this.appendNewLiveSteps(this.executionData.liveSteps);
+            }
+            else {
+                // Just append new steps without clearing
+                this.appendNewLiveSteps(this.executionData.liveSteps);
+            }
+        }
+        // Set up interval to monitor for changes (if not already set up)
+        if (this.mode === 'live' && !this.updateSubscription) {
+            this.updateSubscription = interval(500)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                // Check for new live steps and update tree
+                if (this.executionData && this.executionData.liveSteps) {
+                    // Instead of replacing entire tree, append new nodes
+                    this.appendNewLiveSteps(this.executionData.liveSteps);
+                    this.calculateStats();
+                }
+                this.updateCurrentStep();
+            });
+        }
+    }
+    /**
+     * Convert live steps format to execution tree format
+     */
+    convertLiveStepsToTree(liveSteps) {
+        const treeNodes = [];
+        const nodeMap = new Map();
+        // Sort steps by StepNumber to ensure proper ordering
+        const sortedSteps = [...liveSteps].sort((a, b) => {
+            const aStepNum = a.step?.StepNumber || 0;
+            const bStepNum = b.step?.StepNumber || 0;
+            return aStepNum - bStepNum;
+        });
+        for (const step of sortedSteps) {
+            // Parse the step name for markdown content
+            const stepName = step.step?.StepName || 'Processing...';
+            let name = stepName;
+            let detailsMarkdown;
+            // Check if the step name contains markdown (indicated by newlines or markdown syntax)
+            if (stepName.includes('\n') || stepName.includes('**') || stepName.includes('##')) {
+                // Split by newline and use first line as name
+                const lines = stepName.split('\n');
+                name = lines[0].trim();
+                // Rest is markdown details
+                if (lines.length > 1) {
+                    detailsMarkdown = lines.slice(1).join('\n').trim();
+                }
+            }
+            const node = {
+                id: step.step?.ID || `live-${Date.now()}-${Math.random()}`,
+                name: name,
+                type: this.mapStepType(step.executionType || step.step?.StepType),
+                status: 'running', // Live steps are always running
+                startTime: step.startTime ? new Date(step.startTime) : new Date(),
+                agentPath: step.agentHierarchy || [],
+                expanded: false,
+                depth: step.depth || 0,
+                detailsMarkdown: detailsMarkdown,
+                detailsExpanded: false
+            };
+            // Store in map for hierarchy building
+            nodeMap.set(node.id, node);
+            // Handle hierarchy by depth
+            if (step.depth === 0) {
+                treeNodes.push(node);
+            }
+            else {
+                // Find parent based on depth and agent hierarchy
+                let parent;
+                // Look for a node at depth-1 that could be the parent
+                nodeMap.forEach((candidate) => {
+                    if (candidate.depth === step.depth - 1) {
+                        parent = candidate;
+                    }
+                });
+                if (parent) {
+                    if (!parent.children) {
+                        parent.children = [];
+                    }
+                    parent.children.push(node);
+                }
+            }
+            nodeMap.set(node.id, node);
+        }
+        return treeNodes;
+    }
+    /**
+     * Update current step indicator
+     */
+    updateCurrentStep() {
+        // Find the first running step
+        const findRunning = (nodes) => {
+            for (const node of nodes) {
+                if (node.status === 'running')
+                    return node;
+                if (node.children) {
+                    const child = findRunning(node.children);
+                    if (child)
+                        return child;
+                }
+            }
+            return null;
+        };
+        this.currentStep = findRunning(this.executionTree);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Mark previously new nodes as completed
+     */
+    markPreviouslyNewNodesAsComplete() {
+        // Only mark nodes that were previously marked as newly added
+        for (const nodeId of this.newlyAddedNodeIds) {
+            const node = this.findNodeById(this.executionTree, nodeId);
+            if (node && node.status === 'running') {
+                node.status = 'completed';
+                // Update the component if it exists
+                const componentRef = this.nodeComponentMap.get(nodeId);
+                if (componentRef) {
+                    componentRef.instance.node = { ...node };
+                    componentRef.changeDetectorRef.detectChanges();
+                }
+            }
+        }
+    }
+    /**
+     * Find a node by ID in the tree
+     */
+    findNodeById(nodes, id) {
+        for (const node of nodes) {
+            if (node.id === id) {
+                return node;
+            }
+            if (node.children) {
+                const found = this.findNodeById(node.children, id);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    /**
+     * Calculate execution statistics
+     */
+    calculateStats() {
+        this.stats = {
+            totalSteps: 0,
+            completedSteps: 0,
+            failedSteps: 0,
+            totalTokens: 0,
+            totalCost: 0,
+            stepsByType: {},
+            totalDuration: 0,
+            totalPrompts: 0
+        };
+        const processNode = (node) => {
+            this.stats.totalSteps++;
+            if (node.status === 'completed')
+                this.stats.completedSteps++;
+            if (node.status === 'failed')
+                this.stats.failedSteps++;
+            if (node.tokensUsed)
+                this.stats.totalTokens += node.tokensUsed;
+            if (node.cost)
+                this.stats.totalCost += node.cost;
+            if (node.duration)
+                this.stats.totalDuration += node.duration;
+            this.stats.stepsByType[node.type] = (this.stats.stepsByType[node.type] || 0) + 1;
+            // Count prompts
+            if (node.type === 'prompt' || node.promptCount) {
+                this.stats.totalPrompts += node.promptCount || 1;
+            }
+            if (node.children) {
+                node.children.forEach(child => processNode(child));
+            }
+        };
+        this.executionTree.forEach(node => processNode(node));
+    }
+    /**
+     * Toggle node expansion
+     */
+    toggleNode(node) {
+        const nodeInTree = this.findNodeById(this.executionTree, node.id);
+        if (nodeInTree && this.hasExpandableContent(nodeInTree)) {
+            nodeInTree.expanded = !nodeInTree.expanded;
+            this.userHasInteracted = true;
+            // Update the component's node reference to trigger change detection
+            const componentRef = this.nodeComponentMap.get(node.id);
+            if (componentRef) {
+                componentRef.instance.node = { ...nodeInTree };
+                componentRef.changeDetectorRef.detectChanges();
+            }
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Check if node has expandable content
+     */
+    hasExpandableContent(node) {
+        return !!(node.children && node.children.length > 0) ||
+            node.type === 'sub-agent' ||
+            node.type === 'action' ||
+            !!node.inputPreview ||
+            !!node.outputPreview ||
+            !!node.error ||
+            !!node.detailsMarkdown;
+    }
+    /**
+     * Handle scroll events
+     */
+    onScroll(event) {
+        if (this.isAutoScrolling) {
+            // Ignore scroll events triggered by auto-scrolling
+            return;
+        }
+        const element = event.target;
+        const isAtBottom = this.isScrolledToBottom(element);
+        // If user scrolled up from bottom, mark as user interaction
+        if (!isAtBottom && this.lastScrollPosition !== element.scrollTop) {
+            this.userHasScrolled = true;
+            this.userHasInteracted = true;
+        }
+        // If user scrolled back to bottom, reset interaction flags
+        if (isAtBottom) {
+            this.userHasScrolled = false;
+            this.userHasInteracted = false;
+        }
+        this.lastScrollPosition = element.scrollTop;
+    }
+    /**
+     * Handle user clicks (interaction detection)
+     */
+    onUserInteraction() {
+        // This is called when user clicks anywhere in the execution tree
+        // The toggleNode method will set userHasInteracted for specific interactions
+    }
+    /**
+     * Check if scroll is at bottom
+     */
+    isScrolledToBottom(element) {
+        const threshold = this.scrollThreshold;
+        return element.scrollHeight - element.scrollTop - element.clientHeight < threshold;
+    }
+    /**
+     * Check if user is at bottom (for initial setup)
+     */
+    checkIfUserAtBottom() {
+        if (!this.executionTreeContainer)
+            return;
+        const element = this.executionTreeContainer.nativeElement;
+        if (this.isScrolledToBottom(element)) {
+            this.userHasScrolled = false;
+        }
+    }
+    /**
+     * Auto-scroll to bottom if user hasn't interacted
+     */
+    autoScrollToBottom() {
+        if (!this.executionTreeContainer || this.userHasInteracted || this.userHasScrolled) {
+            return;
+        }
+        const element = this.executionTreeContainer.nativeElement;
+        this.isAutoScrolling = true;
+        // Use smooth scrolling for better UX
+        element.scrollTo({
+            top: element.scrollHeight,
+            behavior: 'smooth'
+        });
+        // Reset auto-scrolling flag after animation
+        setTimeout(() => {
+            this.isAutoScrolling = false;
+        }, 300);
+    }
+    /**
+     * Format agent path for display
+     */
+    formatAgentPath(path) {
+        return path.join(' → ');
+    }
+    /**
+     * Format duration for display
+     */
+    formatDuration(ms) {
+        if (ms < 1000)
+            return `${ms}ms`;
+        if (ms < 60000)
+            return `${(ms / 1000).toFixed(1)}s`;
+        const minutes = Math.floor(ms / 60000);
+        const seconds = Math.floor((ms % 60000) / 1000);
+        return `${minutes}m ${seconds}s`;
+    }
+    /**
+     * Get step types for display
+     */
+    getStepTypes() {
+        return Object.keys(this.stats.stepsByType).sort();
+    }
+    /**
+     * Format markdown content for display
+     */
+    formatMarkdown(markdown) {
+        // Basic markdown formatting
+        // This is a simple implementation - you might want to use a proper markdown library
+        let html = markdown;
+        // Headers
+        html = html.replace(/^### (.*$)/gim, '<h4>$1</h4>');
+        html = html.replace(/^## (.*$)/gim, '<h3>$1</h3>');
+        html = html.replace(/^# (.*$)/gim, '<h2>$1</h2>');
+        // Bold
+        html = html.replace(/\*\*(.*)\*\*/g, '<strong>$1</strong>');
+        // Italic
+        html = html.replace(/\*(.*)\*/g, '<em>$1</em>');
+        // Detect and linkify URLs
+        // This regex matches URLs starting with http://, https://, or www.
+        const urlRegex = /(?:https?:\/\/|www\.)[^\s<]+/gi;
+        html = html.replace(urlRegex, (url) => {
+            // Ensure the URL has a protocol
+            const href = url.startsWith('http') ? url : `https://${url}`;
+            // Truncate long URLs for display
+            const displayUrl = url.length > 50 ? url.substring(0, 50) + '...' : url;
+            return `<a href="${href}" target="_blank" rel="noopener noreferrer" style="color: #2196f3; text-decoration: underline; font-size: inherit;">${displayUrl}</a>`;
+        });
+        // Line breaks
+        html = html.replace(/\n/g, '<br>');
+        // Lists
+        html = html.replace(/^\* (.+)$/gim, '<li>$1</li>');
+        html = html.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
+        // Code blocks
+        html = html.replace(/```(.*?)```/gs, '<pre><code>$1</code></pre>');
+        // Inline code
+        html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+        return html;
+    }
+    /**
+     * Append new live steps without re-rendering entire tree
+     */
+    appendNewLiveSteps(liveSteps) {
+        if (!liveSteps || liveSteps.length === 0)
+            return;
+        // If view is not initialized yet, wait for it
+        if (!this.viewInitialized || !this.executionNodesContainer) {
+            return;
+        }
+        // Sort live steps by stepNumber to ensure proper ordering
+        const sortedSteps = [...liveSteps].sort((a, b) => {
+            const aStepNum = a.step?.StepNumber || 0;
+            const bStepNum = b.step?.StepNumber || 0;
+            return aStepNum - bStepNum;
+        });
+        // Create a map of existing nodes by ID for quick lookup
+        const nodeMap = new Map();
+        this.buildNodeMap(this.executionTree, nodeMap);
+        // First pass: identify which steps are truly NEW (not in processedStepIds)
+        const trulyNewStepIds = new Set();
+        for (const step of sortedSteps) {
+            const stepId = step.step?.ID || this.generateStepId(step);
+            if (!this.processedStepIds.has(stepId)) {
+                trulyNewStepIds.add(stepId);
+            }
+        }
+        // Only mark previously new nodes as complete if we have truly new steps
+        if (trulyNewStepIds.size > 0 && this.newlyAddedNodeIds.size > 0) {
+            this.markPreviouslyNewNodesAsComplete();
+            // Clear the set for new additions
+            this.newlyAddedNodeIds.clear();
+        }
+        let hasNewNodes = false;
+        for (const step of sortedSteps) {
+            // Generate a stable ID based on step content to avoid duplicates
+            const stepId = step.step?.ID || this.generateStepId(step);
+            // Skip if we've already processed this exact step
+            if (this.processedStepIds.has(stepId)) {
+                continue;
+            }
+            // Mark as processed
+            this.processedStepIds.add(stepId);
+            // Check if this node already exists
+            const existingNode = nodeMap.get(stepId);
+            if (existingNode) {
+                // Update existing node in the component
+                const componentRef = this.nodeComponentMap.get(stepId);
+                if (componentRef) {
+                    // Preserve current UI state
+                    const currentExpanded = existingNode.expanded;
+                    const currentDetailsExpanded = existingNode.detailsExpanded;
+                    const updatedStatus = step.step?.Status ?
+                        this.mapStepStatus(step.step.Status) :
+                        (step.endTime || step.outputData ? 'completed' : existingNode.status);
+                    if (existingNode.status !== updatedStatus) {
+                        existingNode.status = updatedStatus;
+                    }
+                    if (step.endTime && !existingNode.endTime) {
+                        existingNode.endTime = new Date(step.endTime);
+                        existingNode.duration = step.durationMs;
+                    }
+                    // Update output data if available
+                    if (step.outputData && !existingNode.outputPreview) {
+                        existingNode.outputPreview = this.createPreview(step.outputData);
+                        existingNode.tokensUsed = this.extractTokens(step.outputData);
+                        existingNode.cost = this.extractCost(step.outputData);
+                    }
+                    // Restore UI state
+                    existingNode.expanded = currentExpanded;
+                    existingNode.detailsExpanded = currentDetailsExpanded;
+                    // Update the component's node reference
+                    // Important: We need to update the node object directly to ensure
+                    // Angular detects changes to style bindings that depend on node.depth
+                    const nodeInstance = componentRef.instance.node;
+                    Object.assign(nodeInstance, existingNode);
+                    // Mark for check to ensure Angular updates the view
+                    componentRef.changeDetectorRef.markForCheck();
+                    componentRef.changeDetectorRef.detectChanges();
+                }
+            }
+            else {
+                // Create new node
+                const newNode = this.createNodeFromLiveStep(step);
+                // Debug: Log if depth is missing
+                if (newNode.depth === 0 && step.depth !== 0) {
+                    console.warn('Node depth was reset to 0 for step:', step);
+                }
+                if (step.depth === 0) {
+                    // Add to tree and create component
+                    this.executionTree.push(newNode);
+                    this.createNodeComponent(newNode, this.executionNodesContainer);
+                }
+                else {
+                    // Find parent and add as child
+                    const parentNode = this.findParentNode(this.executionTree, newNode);
+                    if (parentNode) {
+                        if (!parentNode.children) {
+                            parentNode.children = [];
+                        }
+                        parentNode.children.push(newNode);
+                        // Update parent component to show new child
+                        const parentComponentRef = this.nodeComponentMap.get(parentNode.id);
+                        if (parentComponentRef) {
+                            // Update the parent node object directly
+                            const parentNodeInstance = parentComponentRef.instance.node;
+                            Object.assign(parentNodeInstance, parentNode);
+                            parentComponentRef.changeDetectorRef.markForCheck();
+                            parentComponentRef.changeDetectorRef.detectChanges();
+                        }
+                    }
+                    else {
+                        // If no parent found, add as root
+                        this.executionTree.push(newNode);
+                        this.createNodeComponent(newNode, this.executionNodesContainer);
+                    }
+                }
+                hasNewNodes = true;
+                // Only track as newly added if it's truly new
+                if (trulyNewStepIds.has(stepId)) {
+                    this.newlyAddedNodeIds.add(newNode.id);
+                }
+            }
+        }
+        if (hasNewNodes) {
+            // Update current step
+            this.updateCurrentStep();
+            // Recalculate stats
+            this.calculateStats();
+            // Trigger change detection
+            this.cdr.markForCheck();
+            // Auto-scroll if user hasn't interacted
+            setTimeout(() => {
+                this.autoScrollToBottom();
+            }, 100);
+        }
+    }
+    /**
+     * Generate a stable ID for a step based on its content
+     */
+    generateStepId(step) {
+        // Create a stable ID based on step properties that should be unique
+        const parts = [
+            step.executionType || 'unknown',
+            step.depth || 0,
+            step.step?.StepName || '',
+            step.startTime || Date.now()
+        ];
+        return `live-${parts.join('-').replace(/[^a-zA-Z0-9-]/g, '')}`;
+    }
+    /**
+     * Find parent node based on depth
+     */
+    findParentNode(nodes, childNode) {
+        // We need to find the most recent node at the parent depth
+        // that could logically be this node's parent
+        let potentialParent = null;
+        const findParentRecursive = (searchNodes) => {
+            // Process nodes in reverse order to find the most recent one
+            for (let i = searchNodes.length - 1; i >= 0; i--) {
+                const node = searchNodes[i];
+                // Check if this node could be the parent based on depth
+                if (node.depth === childNode.depth - 1) {
+                    // Special handling for sub-agent execution steps
+                    if (childNode.agentPath && childNode.agentPath.length > node.agentPath.length) {
+                        // This child belongs to a sub-agent
+                        // Look for the most recent sub-agent delegation node
+                        if (node.type === 'sub-agent' || node.name.includes('Delegating to')) {
+                            return node;
+                        }
+                    }
+                    // Keep track of the most recent node at the correct depth
+                    if (!potentialParent) {
+                        potentialParent = node;
+                    }
+                }
+                // Search children recursively
+                if (node.children && node.children.length > 0) {
+                    const foundInChildren = findParentRecursive(node.children);
+                    if (foundInChildren)
+                        return foundInChildren;
+                }
+            }
+            return null;
+        };
+        const found = findParentRecursive(nodes);
+        return found || potentialParent;
+    }
+    /**
+     * Build a map of nodes by ID for quick lookup
+     */
+    buildNodeMap(nodes, map) {
+        for (const node of nodes) {
+            map.set(node.id, node);
+            if (node.children) {
+                this.buildNodeMap(node.children, map);
+            }
+        }
+    }
+    /**
+     * Create a single node from a live step
+     */
+    createNodeFromLiveStep(step) {
+        const stepName = step.step?.StepName || 'Processing...';
+        let name = stepName;
+        let detailsMarkdown;
+        // Check if the step name contains markdown
+        if (stepName.includes('\n') || stepName.includes('**') || stepName.includes('##')) {
+            const lines = stepName.split('\n');
+            name = lines[0].trim();
+            if (lines.length > 1) {
+                detailsMarkdown = lines.slice(1).join('\n').trim();
+            }
+        }
+        // For live steps, always start as running
+        // The status will be updated to completed in markPreviouslyNewNodesAsComplete
+        let status = 'running';
+        if (step.step?.Status) {
+            // Only use explicit status if it's failed
+            const mappedStatus = this.mapStepStatus(step.step.Status);
+            if (mappedStatus === 'failed') {
+                status = 'failed';
+            }
+        }
+        return {
+            id: step.step?.ID || this.generateStepId(step),
+            name: name,
+            type: this.mapStepType(step.executionType || step.step?.StepType),
+            status: status,
+            startTime: step.startTime ? new Date(step.startTime) : new Date(),
+            endTime: step.endTime ? new Date(step.endTime) : undefined,
+            duration: step.durationMs,
+            agentPath: step.agentHierarchy || [],
+            expanded: false,
+            depth: step.depth || 0,
+            detailsMarkdown: detailsMarkdown,
+            detailsExpanded: false,
+            inputPreview: this.createPreview(step.inputData),
+            outputPreview: this.createPreview(step.outputData),
+            tokensUsed: this.extractTokens(step.outputData),
+            cost: this.extractCost(step.outputData)
+        };
+    }
+    /**
+     * Collect all node IDs in the tree
+     */
+    collectNodeIds(nodes, ids) {
+        for (const node of nodes) {
+            ids.add(node.id);
+            if (node.children) {
+                this.collectNodeIds(node.children, ids);
+            }
+        }
+    }
+    /**
+     * Preserve expanded state of all nodes
+     */
+    preserveExpandedState(nodes, expandedState, detailsExpandedState) {
+        for (const node of nodes) {
+            if (node.expanded !== undefined) {
+                expandedState.set(node.id, node.expanded);
+            }
+            if (node.detailsExpanded !== undefined) {
+                detailsExpandedState.set(node.id, node.detailsExpanded);
+            }
+            if (node.children) {
+                this.preserveExpandedState(node.children, expandedState, detailsExpandedState);
+            }
+        }
+    }
+    /**
+     * Restore expanded state of all nodes
+     */
+    restoreExpandedState(nodes, expandedState, detailsExpandedState) {
+        for (const node of nodes) {
+            const expanded = expandedState.get(node.id);
+            if (expanded !== undefined) {
+                node.expanded = expanded;
+            }
+            const detailsExpanded = detailsExpandedState.get(node.id);
+            if (detailsExpanded !== undefined) {
+                node.detailsExpanded = detailsExpanded;
+            }
+            if (node.children) {
+                this.restoreExpandedState(node.children, expandedState, detailsExpandedState);
+            }
+        }
+    }
+    /**
+     * Append a node to its parent based on depth
+     */
+    appendToParent(nodes, newNode) {
+        for (const node of nodes) {
+            if (node.depth === newNode.depth - 1) {
+                if (!node.children) {
+                    node.children = [];
+                }
+                node.children.push(newNode);
+                return true;
+            }
+            if (node.children && this.appendToParent(node.children, newNode)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    static { this.ɵfac = function AgentExecutionMonitorComponent_Factory(t) { return new (t || AgentExecutionMonitorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentExecutionMonitorComponent, selectors: [["mj-agent-execution-monitor"]], viewQuery: function AgentExecutionMonitorComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c1, 5, ViewContainerRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.executionTreeContainer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.executionNodesContainer = _t.first);
+        } }, inputs: { mode: "mode", executionData: "executionData", autoExpand: "autoExpand" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 38, vars: 15, consts: [["executionTreeContainer", ""], ["executionNodesContainer", ""], [1, "execution-monitor"], [1, "monitor-header"], [1, "header-title"], [1, "fa-solid", "fa-diagram-project"], [1, "live-indicator"], [1, "current-status"], [1, "execution-tree", 3, "scroll", "click"], [1, "nodes-container"], [1, "empty-state"], [1, "monitor-footer"], [1, "stats-grid"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "failed-count"], [1, "step-types"], [1, "pulse"], [1, "status-label"], [1, "agent-path"], [1, "step-name"], [1, "fa-solid", "fa-hourglass-start"], [1, "type-badge"]], template: function AgentExecutionMonitorComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4);
+            i0.ɵɵelement(3, "i", 5);
+            i0.ɵɵelementStart(4, "span");
+            i0.ɵɵtext(5, "Execution Monitor");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, AgentExecutionMonitorComponent_Conditional_6_Template, 3, 0, "span", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, AgentExecutionMonitorComponent_Conditional_7_Template, 7, 2, "div", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 8, 0);
+            i0.ɵɵlistener("scroll", function AgentExecutionMonitorComponent_Template_div_scroll_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onScroll($event)); })("click", function AgentExecutionMonitorComponent_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onUserInteraction()); });
+            i0.ɵɵelementStart(10, "div", 9, 1);
+            i0.ɵɵtemplate(12, AgentExecutionMonitorComponent_Conditional_12_Template, 4, 0, "div", 10);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "div", 11)(14, "div", 12)(15, "div", 13)(16, "span", 14);
+            i0.ɵɵtext(17, "Steps");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "span", 15);
+            i0.ɵɵtext(19);
+            i0.ɵɵtemplate(20, AgentExecutionMonitorComponent_Conditional_20_Template, 2, 1, "span", 16);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(21, "div", 13)(22, "span", 14);
+            i0.ɵɵtext(23, "Prompts");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "span", 15);
+            i0.ɵɵtext(25);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(26, "div", 13)(27, "span", 14);
+            i0.ɵɵtext(28, "Tokens");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(29, "span", 15);
+            i0.ɵɵtext(30);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(31, "div", 13)(32, "span", 14);
+            i0.ɵɵtext(33, "Cost");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(34, "span", 15);
+            i0.ɵɵtext(35);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(36, AgentExecutionMonitorComponent_Conditional_36_Template, 5, 1, "div", 13);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(37, AgentExecutionMonitorComponent_Conditional_37_Template, 3, 0, "div", 17);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("live-mode", ctx.mode === "live");
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional(ctx.mode === "live" ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.currentStep && ctx.mode === "live" ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("has-content", ctx.executionTree.length > 0);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.executionTree.length === 0 ? 12 : -1);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate2(" ", ctx.stats.completedSteps, "/", ctx.stats.totalSteps, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.stats.failedSteps > 0 ? 20 : -1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.stats.totalPrompts);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.stats.totalTokens.toLocaleString());
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1("$", ctx.stats.totalCost.toFixed(4), "");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.stats.totalDuration ? 36 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.getStepTypes().length > 0 ? 37 : -1);
+        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            overflow: hidden;\n        }\n        \n        .execution-monitor[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            background: #fff;\n            border: 1px solid #e0e0e0;\n            border-radius: 8px;\n            overflow: hidden;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        \n\n        .monitor-header[_ngcontent-%COMP%] {\n            padding: 16px;\n            background: #f8f9fa;\n            border-bottom: 1px solid #e0e0e0;\n        }\n\n        .header-title[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n            margin-bottom: 8px;\n        }\n\n        .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            color: #2196f3;\n        }\n\n        .live-indicator[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 4px 8px;\n            background: #ff4444;\n            color: white;\n            border-radius: 4px;\n            font-size: 11px;\n            font-weight: 600;\n            letter-spacing: 0.5px;\n        }\n\n        .pulse[_ngcontent-%COMP%] {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            background: white;\n            border-radius: 50%;\n            animation: _ngcontent-%COMP%_pulse 2s infinite;\n        }\n\n        @keyframes _ngcontent-%COMP%_pulse {\n            0% { opacity: 1; transform: scale(1); }\n            50% { opacity: 0.5; transform: scale(0.8); }\n            100% { opacity: 1; transform: scale(1); }\n        }\n\n        .current-status[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 13px;\n            color: #666;\n        }\n\n        .status-label[_ngcontent-%COMP%] {\n            font-weight: 500;\n        }\n\n        .agent-path[_ngcontent-%COMP%] {\n            color: #999;\n        }\n\n        .step-name[_ngcontent-%COMP%] {\n            color: #1a1a1a;\n            font-weight: 500;\n        }\n\n        \n\n        .execution-tree[_ngcontent-%COMP%] {\n            flex: 1;\n            overflow-y: auto;\n            overflow-x: auto;\n            padding: 16px;\n            min-height: 0;\n        }\n        \n        .nodes-container[_ngcontent-%COMP%] {\n            \n\n        }\n\n        .empty-state[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            color: #999;\n            text-align: center;\n        }\n\n        .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 48px;\n            margin-bottom: 16px;\n            opacity: 0.5;\n        }\n\n        .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n            margin: 0;\n            font-size: 14px;\n        }\n\n        \n\n        .tree-node[_ngcontent-%COMP%] {\n            margin-bottom: 4px;\n        }\n\n        .node-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 12px;\n            background: #f8f9fa;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            user-select: none;\n        }\n\n        .node-header[_ngcontent-%COMP%]:hover {\n            background: #e8f0fe;\n            border-color: #2196f3;\n        }\n\n        .expand-icon[_ngcontent-%COMP%], .expand-spacer[_ngcontent-%COMP%] {\n            width: 16px;\n            text-align: center;\n            color: #666;\n            font-size: 10px;\n        }\n\n        .status-icon[_ngcontent-%COMP%] {\n            width: 20px;\n            text-align: center;\n            font-size: 14px;\n        }\n\n        .status-pending[_ngcontent-%COMP%] { color: #999; }\n        .status-running[_ngcontent-%COMP%] { color: #2196f3; }\n        .status-completed[_ngcontent-%COMP%] { color: #4caf50; }\n        .status-failed[_ngcontent-%COMP%] { color: #f44336; }\n\n        .type-icon[_ngcontent-%COMP%] {\n            width: 20px;\n            text-align: center;\n            font-size: 14px;\n            color: #666;\n        }\n\n        .node-name[_ngcontent-%COMP%] {\n            flex: 1;\n            font-size: 13px;\n            font-weight: 500;\n            color: #1a1a1a;\n        }\n\n        .node-duration[_ngcontent-%COMP%] {\n            font-size: 12px;\n            color: #666;\n            font-weight: 500;\n        }\n\n        .node-metrics[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 12px;\n            font-size: 12px;\n        }\n\n        .tokens[_ngcontent-%COMP%] {\n            color: #666;\n        }\n\n        .cost[_ngcontent-%COMP%] {\n            color: #2196f3;\n            font-weight: 500;\n        }\n\n        \n\n        .node-details[_ngcontent-%COMP%] {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f5f5f5;\n            border-radius: 4px;\n            font-size: 12px;\n        }\n\n        .detail-section[_ngcontent-%COMP%] {\n            margin-bottom: 8px;\n        }\n\n        .detail-section[_ngcontent-%COMP%]:last-child {\n            margin-bottom: 0;\n        }\n\n        .detail-section.error[_ngcontent-%COMP%] {\n            color: #d32f2f;\n        }\n\n        .detail-label[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            font-weight: 600;\n            margin-bottom: 4px;\n            color: #666;\n        }\n\n        .detail-section.error[_ngcontent-%COMP%]   .detail-label[_ngcontent-%COMP%] {\n            color: #d32f2f;\n        }\n\n        .detail-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 12px;\n        }\n\n        .detail-content[_ngcontent-%COMP%] {\n            padding-left: 18px;\n            color: #333;\n            line-height: 1.4;\n            white-space: pre-wrap;\n            word-break: break-word;\n        }\n\n        \n\n        .monitor-footer[_ngcontent-%COMP%] {\n            padding: 16px;\n            background: #f8f9fa;\n            border-top: 1px solid #e0e0e0;\n        }\n\n        .stats-grid[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n            gap: 16px;\n            margin-bottom: 12px;\n        }\n\n        .stat-item[_ngcontent-%COMP%] {\n            text-align: center;\n        }\n\n        .stat-label[_ngcontent-%COMP%] {\n            display: block;\n            font-size: 11px;\n            color: #666;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            margin-bottom: 4px;\n        }\n\n        .stat-value[_ngcontent-%COMP%] {\n            display: block;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n\n        .failed-count[_ngcontent-%COMP%] {\n            color: #f44336;\n            font-size: 12px;\n            font-weight: normal;\n        }\n\n        .step-types[_ngcontent-%COMP%] {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            justify-content: center;\n        }\n\n        .type-badge[_ngcontent-%COMP%] {\n            display: inline-block;\n            padding: 4px 8px;\n            background: #e3f2fd;\n            color: #1976d2;\n            border-radius: 4px;\n            font-size: 12px;\n            font-weight: 500;\n        }\n\n        \n\n        .details-toggle[_ngcontent-%COMP%] {\n            margin-left: 8px;\n            padding: 2px 6px;\n            background: transparent;\n            border: 1px solid #ddd;\n            border-radius: 3px;\n            cursor: pointer;\n            font-size: 10px;\n            color: #666;\n            transition: all 0.2s ease;\n        }\n        \n        .details-toggle[_ngcontent-%COMP%]:hover {\n            background: #f0f0f0;\n            border-color: #2196f3;\n            color: #2196f3;\n        }\n        \n        \n\n        .markdown-details[_ngcontent-%COMP%] {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f9fafb;\n            border-left: 3px solid #2196f3;\n            border-radius: 0 4px 4px 0;\n            font-size: 13px;\n            line-height: 1.6;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n            font-size: 16px;\n            margin: 0 0 8px 0;\n            color: #1a1a1a;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            font-size: 14px;\n            margin: 8px 0 6px 0;\n            color: #333;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n            font-size: 13px;\n            margin: 6px 0 4px 0;\n            color: #555;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n            margin: 4px 0;\n            padding-left: 20px;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n            margin: 2px 0;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n            background: #e8f0fe;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-family: 'Consolas', 'Monaco', monospace;\n            font-size: 12px;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n            background: #f5f5f5;\n            padding: 8px;\n            border-radius: 4px;\n            overflow-x: auto;\n            margin: 8px 0;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n            background: none;\n            padding: 0;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   em[_ngcontent-%COMP%] {\n            font-style: italic;\n            color: #555;\n        }\n\n        \n\n        .execution-history-toggle[_ngcontent-%COMP%] {\n            background: transparent;\n            border: none;\n            padding: 4px 8px;\n            margin-left: 4px;\n            cursor: pointer;\n            color: #666;\n            font-size: 12px;\n            border-radius: 3px;\n            transition: all 0.2s ease;\n        }\n        \n        .execution-history-toggle[_ngcontent-%COMP%]:hover {\n            background: #e3f2fd;\n            color: #2196f3;\n        }\n\n        \n\n        @media (max-width: 768px) {\n            .monitor-header[_ngcontent-%COMP%] {\n                padding: 12px;\n            }\n\n            .execution-tree[_ngcontent-%COMP%] {\n                padding: 12px;\n            }\n\n            .node-header[_ngcontent-%COMP%] {\n                padding: 6px 8px;\n                gap: 6px;\n            }\n\n            .node-metrics[_ngcontent-%COMP%] {\n                display: none;\n            }\n            \n            .markdown-details[_ngcontent-%COMP%] {\n                margin-left: 20px;\n                font-size: 12px;\n            }\n        }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentExecutionMonitorComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-agent-execution-monitor', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <div class="execution-monitor" [class.live-mode]="mode === 'live'">
+            <!-- Header -->
+            <div class="monitor-header">
+                <div class="header-title">
+                    <i class="fa-solid fa-diagram-project"></i>
+                    <span>Execution Monitor</span>
+                    @if (mode === 'live') {
+                        <span class="live-indicator">
+                            <span class="pulse"></span>
+                            LIVE
+                        </span>
+                    }
+                </div>
+                @if (currentStep && mode === 'live') {
+                    <div class="current-status">
+                        <span class="status-label">Current:</span>
+                        <span class="agent-path">{{ formatAgentPath(currentStep.agentPath) }}</span>
+                        <span class="step-name">{{ currentStep.name }}</span>
+                    </div>
+                }
+            </div>
+
+            <!-- Execution Tree -->
+            <div class="execution-tree" 
+                 #executionTreeContainer
+                 [class.has-content]="executionTree.length > 0"
+                 (scroll)="onScroll($event)"
+                 (click)="onUserInteraction()">
+                <!-- Always render the container, but show empty state when no data -->
+                <div #executionNodesContainer class="nodes-container">
+                    @if (executionTree.length === 0) {
+                        <div class="empty-state">
+                            <i class="fa-solid fa-hourglass-start"></i>
+                            <p>Waiting for execution to begin...</p>
+                        </div>
+                    }
+                </div>
+            </div>
+
+            <!-- Statistics Footer -->
+            <div class="monitor-footer">
+                <div class="stats-grid">
+                    <div class="stat-item">
+                        <span class="stat-label">Steps</span>
+                        <span class="stat-value">
+                            {{ stats.completedSteps }}/{{ stats.totalSteps }}
+                            @if (stats.failedSteps > 0) {
+                                <span class="failed-count">({{ stats.failedSteps }} failed)</span>
+                            }
+                        </span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Prompts</span>
+                        <span class="stat-value">{{ stats.totalPrompts }}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Tokens</span>
+                        <span class="stat-value">{{ stats.totalTokens.toLocaleString() }}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Cost</span>
+                        <span class="stat-value">\${{ stats.totalCost.toFixed(4) }}</span>
+                    </div>
+                    @if (stats.totalDuration) {
+                        <div class="stat-item">
+                            <span class="stat-label">Duration</span>
+                            <span class="stat-value">{{ formatDuration(stats.totalDuration) }}</span>
+                        </div>
+                    }
+                </div>
+                @if (getStepTypes().length > 0) {
+                    <div class="step-types">
+                        @for (type of getStepTypes(); track type) {
+                            <span class="type-badge">
+                                {{ stats.stepsByType[type] }} {{ type }}
+                            </span>
+                        }
+                    </div>
+                }
+            </div>
+        </div>
+    `, styles: ["\n        :host {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            overflow: hidden;\n        }\n        \n        .execution-monitor {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            background: #fff;\n            border: 1px solid #e0e0e0;\n            border-radius: 8px;\n            overflow: hidden;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        /* Header */\n        .monitor-header {\n            padding: 16px;\n            background: #f8f9fa;\n            border-bottom: 1px solid #e0e0e0;\n        }\n\n        .header-title {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n            margin-bottom: 8px;\n        }\n\n        .header-title i {\n            color: #2196f3;\n        }\n\n        .live-indicator {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 4px 8px;\n            background: #ff4444;\n            color: white;\n            border-radius: 4px;\n            font-size: 11px;\n            font-weight: 600;\n            letter-spacing: 0.5px;\n        }\n\n        .pulse {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            background: white;\n            border-radius: 50%;\n            animation: pulse 2s infinite;\n        }\n\n        @keyframes pulse {\n            0% { opacity: 1; transform: scale(1); }\n            50% { opacity: 0.5; transform: scale(0.8); }\n            100% { opacity: 1; transform: scale(1); }\n        }\n\n        .current-status {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 13px;\n            color: #666;\n        }\n\n        .status-label {\n            font-weight: 500;\n        }\n\n        .agent-path {\n            color: #999;\n        }\n\n        .step-name {\n            color: #1a1a1a;\n            font-weight: 500;\n        }\n\n        /* Execution Tree */\n        .execution-tree {\n            flex: 1;\n            overflow-y: auto;\n            overflow-x: auto;\n            padding: 16px;\n            min-height: 0;\n        }\n        \n        .nodes-container {\n            /* No extra padding needed, indentation handled by node margins */\n        }\n\n        .empty-state {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            color: #999;\n            text-align: center;\n        }\n\n        .empty-state i {\n            font-size: 48px;\n            margin-bottom: 16px;\n            opacity: 0.5;\n        }\n\n        .empty-state p {\n            margin: 0;\n            font-size: 14px;\n        }\n\n        /* Tree Nodes */\n        .tree-node {\n            margin-bottom: 4px;\n        }\n\n        .node-header {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 12px;\n            background: #f8f9fa;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            user-select: none;\n        }\n\n        .node-header:hover {\n            background: #e8f0fe;\n            border-color: #2196f3;\n        }\n\n        .expand-icon, .expand-spacer {\n            width: 16px;\n            text-align: center;\n            color: #666;\n            font-size: 10px;\n        }\n\n        .status-icon {\n            width: 20px;\n            text-align: center;\n            font-size: 14px;\n        }\n\n        .status-pending { color: #999; }\n        .status-running { color: #2196f3; }\n        .status-completed { color: #4caf50; }\n        .status-failed { color: #f44336; }\n\n        .type-icon {\n            width: 20px;\n            text-align: center;\n            font-size: 14px;\n            color: #666;\n        }\n\n        .node-name {\n            flex: 1;\n            font-size: 13px;\n            font-weight: 500;\n            color: #1a1a1a;\n        }\n\n        .node-duration {\n            font-size: 12px;\n            color: #666;\n            font-weight: 500;\n        }\n\n        .node-metrics {\n            display: flex;\n            gap: 12px;\n            font-size: 12px;\n        }\n\n        .tokens {\n            color: #666;\n        }\n\n        .cost {\n            color: #2196f3;\n            font-weight: 500;\n        }\n\n        /* Node Details */\n        .node-details {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f5f5f5;\n            border-radius: 4px;\n            font-size: 12px;\n        }\n\n        .detail-section {\n            margin-bottom: 8px;\n        }\n\n        .detail-section:last-child {\n            margin-bottom: 0;\n        }\n\n        .detail-section.error {\n            color: #d32f2f;\n        }\n\n        .detail-label {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            font-weight: 600;\n            margin-bottom: 4px;\n            color: #666;\n        }\n\n        .detail-section.error .detail-label {\n            color: #d32f2f;\n        }\n\n        .detail-label i {\n            font-size: 12px;\n        }\n\n        .detail-content {\n            padding-left: 18px;\n            color: #333;\n            line-height: 1.4;\n            white-space: pre-wrap;\n            word-break: break-word;\n        }\n\n        /* Footer */\n        .monitor-footer {\n            padding: 16px;\n            background: #f8f9fa;\n            border-top: 1px solid #e0e0e0;\n        }\n\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n            gap: 16px;\n            margin-bottom: 12px;\n        }\n\n        .stat-item {\n            text-align: center;\n        }\n\n        .stat-label {\n            display: block;\n            font-size: 11px;\n            color: #666;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            margin-bottom: 4px;\n        }\n\n        .stat-value {\n            display: block;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n\n        .failed-count {\n            color: #f44336;\n            font-size: 12px;\n            font-weight: normal;\n        }\n\n        .step-types {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            justify-content: center;\n        }\n\n        .type-badge {\n            display: inline-block;\n            padding: 4px 8px;\n            background: #e3f2fd;\n            color: #1976d2;\n            border-radius: 4px;\n            font-size: 12px;\n            font-weight: 500;\n        }\n\n        /* Details Toggle Button */\n        .details-toggle {\n            margin-left: 8px;\n            padding: 2px 6px;\n            background: transparent;\n            border: 1px solid #ddd;\n            border-radius: 3px;\n            cursor: pointer;\n            font-size: 10px;\n            color: #666;\n            transition: all 0.2s ease;\n        }\n        \n        .details-toggle:hover {\n            background: #f0f0f0;\n            border-color: #2196f3;\n            color: #2196f3;\n        }\n        \n        /* Markdown Details Section */\n        .markdown-details {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f9fafb;\n            border-left: 3px solid #2196f3;\n            border-radius: 0 4px 4px 0;\n            font-size: 13px;\n            line-height: 1.6;\n        }\n        \n        .markdown-details h2 {\n            font-size: 16px;\n            margin: 0 0 8px 0;\n            color: #1a1a1a;\n        }\n        \n        .markdown-details h3 {\n            font-size: 14px;\n            margin: 8px 0 6px 0;\n            color: #333;\n        }\n        \n        .markdown-details h4 {\n            font-size: 13px;\n            margin: 6px 0 4px 0;\n            color: #555;\n        }\n        \n        .markdown-details ul {\n            margin: 4px 0;\n            padding-left: 20px;\n        }\n        \n        .markdown-details li {\n            margin: 2px 0;\n        }\n        \n        .markdown-details code {\n            background: #e8f0fe;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-family: 'Consolas', 'Monaco', monospace;\n            font-size: 12px;\n        }\n        \n        .markdown-details pre {\n            background: #f5f5f5;\n            padding: 8px;\n            border-radius: 4px;\n            overflow-x: auto;\n            margin: 8px 0;\n        }\n        \n        .markdown-details pre code {\n            background: none;\n            padding: 0;\n        }\n        \n        .markdown-details strong {\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n        \n        .markdown-details em {\n            font-style: italic;\n            color: #555;\n        }\n\n        /* Button styling for execution history toggle */\n        .execution-history-toggle {\n            background: transparent;\n            border: none;\n            padding: 4px 8px;\n            margin-left: 4px;\n            cursor: pointer;\n            color: #666;\n            font-size: 12px;\n            border-radius: 3px;\n            transition: all 0.2s ease;\n        }\n        \n        .execution-history-toggle:hover {\n            background: #e3f2fd;\n            color: #2196f3;\n        }\n\n        /* Responsive */\n        @media (max-width: 768px) {\n            .monitor-header {\n                padding: 12px;\n            }\n\n            .execution-tree {\n                padding: 12px;\n            }\n\n            .node-header {\n                padding: 6px 8px;\n                gap: 6px;\n            }\n\n            .node-metrics {\n                display: none;\n            }\n            \n            .markdown-details {\n                margin-left: 20px;\n                font-size: 12px;\n            }\n        }\n    "] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { mode: [{
+            type: Input
+        }], executionData: [{
+            type: Input
+        }], autoExpand: [{
+            type: Input
+        }], executionTreeContainer: [{
+            type: ViewChild,
+            args: ['executionTreeContainer']
+        }], executionNodesContainer: [{
+            type: ViewChild,
+            args: ['executionNodesContainer', { read: ViewContainerRef }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentExecutionMonitorComponent, { className: "AgentExecutionMonitorComponent", filePath: "src/lib/custom/ai-test-harness/agent-execution-monitor.component.ts", lineNumber: 589 }); })();
+//# sourceMappingURL=agent-execution-monitor.component.js.map