@memberjunction/ng-ai-test-harness 2.58.0 → 2.59.0

package/dist/lib/agent-execution-monitor.component.js

@@ -144,14 +144,40 @@ export class AgentExecutionMonitorComponent {
         this.destroy$ = new Subject();
     }
     ngOnChanges(changes) {
+        console.log('🔄 Execution Monitor ngOnChanges:', {
+            executionDataChanged: !!changes['executionData'],
+            modeChanged: !!changes['mode'],
+            hasExecutionData: !!this.executionData,
+            currentTreeLength: this.executionTree.length
+        });
         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
+            // Log the change details
+            const oldData = changes['executionData'].previousValue;
+            const newData = changes['executionData'].currentValue;
+            console.log('📊 Execution data changed:', {
+                oldDataExists: !!oldData,
+                newDataExists: !!newData,
+                newDataKeys: newData ? Object.keys(newData) : [],
+                executionTreeLength: newData?.executionTree?.length,
+                forceRefresh: newData?._forceRefresh
+            });
+            // Check if this is a different execution by comparing run IDs
+            const oldRunId = oldData?.agentRun?.ID || oldData?.promptRun?.ID;
+            const newRunId = newData?.agentRun?.ID || newData?.promptRun?.ID;
+            const isDifferentExecution = oldRunId && newRunId && oldRunId !== newRunId;
+            const isStartingNewLiveExecution = this.mode === 'live' &&
+                newData &&
+                newData.liveSteps &&
+                newData.liveSteps.length === 0 &&
+                this.executionTree.length > 0;
+            const isForceRefresh = newData && newData._forceRefresh;
+            // Clear if it's a genuinely different execution, starting fresh live execution, or force refresh
+            if (isDifferentExecution || isStartingNewLiveExecution || isForceRefresh) {
+                console.log('🗑️ Clearing execution tree due to:', {
+                    isDifferentExecution,
+                    isStartingNewLiveExecution,
+                    isForceRefresh
+                });
                 this.processedStepIds.clear();
                 this.newlyAddedNodeIds.clear();
                 this.clearNodeComponents();
@@ -159,37 +185,59 @@ export class AgentExecutionMonitorComponent {
                 this.currentStep = null;
                 this.calculateStats();
             }
-            // Process data even if it's empty/null (for initial setup)
+            // Check for auto-expand flag
+            if (this.executionData && this.executionData._autoExpandAll) {
+                // Auto-expand all nodes after a short delay to ensure rendering is complete
+                setTimeout(() => {
+                    this.expandAllNodes();
+                }, 50);
+            }
+            // Process data (this will preserve existing nodes if it's the same execution)
             this.processExecutionData();
         }
-        // Handle mode changes
+        // Handle mode changes - be more selective about when to clear
         if (changes['mode'] && !changes['mode'].firstChange) {
-            // Clear live nodes when switching from live to historical
-            if (changes['mode'].previousValue === 'live' && changes['mode'].currentValue === 'historical') {
+            const previousMode = changes['mode'].previousValue;
+            const currentMode = changes['mode'].currentValue;
+            console.log('🔄 Mode changed:', { previousMode, currentMode });
+            // Only clear when switching from live to historical AND we don't have historical data
+            if (previousMode === 'live' && currentMode === '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 = [];
+                // Only clear if we don't have valid historical data to show
+                if (!this.executionData || (!this.executionData.executionTree && !this.executionData.steps)) {
+                    this.processedStepIds.clear();
+                    this.newlyAddedNodeIds.clear();
+                    this.clearNodeComponents();
+                    this.executionTree = [];
+                }
             }
             this.processExecutionData();
         }
     }
     ngAfterViewInit() {
         this.viewInitialized = true;
+        console.log('🎯 View initialized, checking for pending data:', {
+            hasExecutionData: !!this.executionData,
+            treeLength: this.executionTree.length,
+            hasContainer: !!this.executionNodesContainer
+        });
         // 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) {
+            console.log('⚡ Processing pending execution data after view init');
             this.processExecutionData();
         }
+        else if (this.executionTree.length > 0 && this.nodeComponentMap.size === 0) {
+            console.log('⚡ Re-rendering existing tree after view init');
+            this.renderTree();
+        }
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -214,15 +262,23 @@ export class AgentExecutionMonitorComponent {
      * Process execution data based on mode
      */
     processExecutionData() {
+        console.log('⚙️ Processing execution data:', {
+            mode: this.mode,
+            hasExecutionData: !!this.executionData,
+            currentTreeLength: this.executionTree.length,
+            viewInitialized: this.viewInitialized,
+            hasContainer: !!this.executionNodesContainer
+        });
         if (this.mode === 'historical') {
-            // Clear processed step IDs when processing historical data
-            this.processedStepIds.clear();
+            // Only clear processed step IDs if we don't have existing data or it's different data
+            if (this.executionTree.length === 0) {
+                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
+            // For live mode, preserve existing data when possible
             if (this.executionTree.length === 0) {
                 this.processedStepIds.clear();
                 this.newlyAddedNodeIds.clear();
@@ -230,16 +286,26 @@ export class AgentExecutionMonitorComponent {
             // Set up live updates
             this.setupLiveUpdates();
         }
-        // Only calculate stats if we have data
-        if (this.executionTree.length > 0) {
-            this.calculateStats();
+        // Always calculate stats when we have data or when processing new data
+        this.calculateStats();
+        // Force change detection after processing
+        if (this.viewInitialized) {
+            this.cdr.markForCheck();
+            this.cdr.detectChanges();
         }
     }
     /**
      * Build tree from historical execution data
      */
     buildTreeFromHistoricalData() {
+        console.log('🏗️ Building tree from historical data:', {
+            hasExecutionData: !!this.executionData,
+            executionTreeLength: this.executionData?.executionTree?.length,
+            stepsLength: this.executionData?.steps?.length,
+            currentTreeLength: this.executionTree.length
+        });
         if (!this.executionData) {
+            console.log('⚠️ No execution data available');
             this.clearNodeComponents();
             this.executionTree = [];
             return;
@@ -248,47 +314,74 @@ export class AgentExecutionMonitorComponent {
         this.clearNodeComponents();
         // Handle executionTree format - historical mode should only use saved database data
         if (this.executionData.executionTree) {
+            console.log('📊 Converting execution tree with', this.executionData.executionTree.length, 'nodes');
             const allNodes = this.convertExecutionTree(this.executionData.executionTree);
+            console.log('🔄 Converted to', allNodes.length, 'tree nodes');
             // Filter out live-only nodes in historical mode
             this.executionTree = this.filterNodesForMode(allNodes, 'historical');
+            console.log('✅ After filtering for historical mode:', this.executionTree.length, 'nodes');
         }
         else if (this.executionData.steps) {
+            console.log('📊 Converting legacy steps with', this.executionData.steps.length, 'steps');
             // Handle legacy steps format
             const allNodes = this.convertLegacySteps(this.executionData.steps);
             this.executionTree = this.filterNodesForMode(allNodes, 'historical');
+            console.log('✅ After converting legacy steps:', this.executionTree.length, 'nodes');
         }
         else {
+            console.log('⚠️ No executionTree or steps found in data');
             this.executionTree = [];
         }
-        // Render the tree using dynamic components
+        // Always render the tree if we have a container
         if (this.executionNodesContainer) {
+            console.log('🎨 Rendering tree with', this.executionTree.length, 'nodes');
             this.renderTree();
         }
+        else {
+            console.log('⚠️ No execution nodes container available for rendering');
+        }
     }
     /**
      * Render the execution tree using dynamic components
      */
     renderTree() {
+        console.log('🎨 Rendering execution tree:', {
+            hasContainer: !!this.executionNodesContainer,
+            treeLength: this.executionTree.length,
+            viewInitialized: this.viewInitialized
+        });
         if (!this.executionNodesContainer) {
             console.warn('📊 Execution Monitor: No container available for rendering');
             return;
         }
         // Clear and recreate all components for historical view
         this.clearNodeComponents();
+        console.log('🔄 Creating components for', this.executionTree.length, 'nodes');
         // Create components for each root node
         for (const node of this.executionTree) {
-            this.createNodeComponent(node, this.executionNodesContainer);
+            const componentRef = this.createNodeComponent(node, this.executionNodesContainer);
+            console.log('✅ Created component for node:', node.name, 'depth:', node.depth);
         }
+        // Force change detection after rendering
+        this.cdr.markForCheck();
+        this.cdr.detectChanges();
+        console.log('🎯 Tree rendering complete. Components created:', this.nodeComponentMap.size);
     }
     /**
      * Create a component for a node and its children
+     * This now ensures proper depth is passed and used for indentation
      */
     createNodeComponent(node, container) {
         const componentRef = container.createComponent(ExecutionNodeComponent);
         const instance = componentRef.instance;
+        // IMPORTANT: Ensure the node has the correct depth
+        // Create a new node object to ensure Angular detects the change
+        const nodeWithDepth = {
+            ...node,
+            depth: node.depth || 0 // Ensure depth is always defined
+        };
         // Set inputs
-        instance.node = node;
-        // No need to apply margin here - it's handled in the component template
+        instance.node = nodeWithDepth;
         // Subscribe to outputs
         instance.toggleNode.subscribe((n) => this.toggleNode(n));
         instance.userInteracted.subscribe(() => this.onUserInteraction());
@@ -301,25 +394,25 @@ export class AgentExecutionMonitorComponent {
     }
     /**
      * Convert new execution tree format to display nodes
+     * FIXED: Maintain proper hierarchy for sub-agents instead of flattening
      */
     convertExecutionTree(nodes, depth = 0) {
+        const treeNodes = [];
         // 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)
+        for (const node of sortedNodes) {
+            // Parse the step name for markdown content
             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)
+            // Check if the step name contains markdown
             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();
                 }
@@ -343,7 +436,7 @@ export class AgentExecutionMonitorComponent {
             const inputPreview = this.createPreview(node.inputData);
             const outputPreview = this.createPreview(node.outputData);
             const treeNode = {
-                id: node.step?.ID || `node-${Date.now()}-${index}`,
+                id: node.step?.ID || `node-${Date.now()}-${Math.random()}`,
                 name: name,
                 type: this.mapStepType(node.executionType || node.step?.StepType),
                 status: this.mapStepStatus(node.step?.Status),
@@ -354,13 +447,13 @@ export class AgentExecutionMonitorComponent {
                 inputPreview: inputPreview,
                 outputPreview: outputPreview,
                 error: node.step?.ErrorMessage,
-                expanded: false,
-                depth: node.depth !== undefined ? node.depth : depth, // Use node.depth if available, fallback to recursion depth
+                expanded: false, // Start collapsed for sub-agents
+                depth: depth, // Use actual depth for proper indentation
                 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,
+                children: undefined, // Will be set below
                 displayMode: displayMode
             };
             // Add agent metadata if this is a sub-agent node
@@ -376,8 +469,13 @@ export class AgentExecutionMonitorComponent {
                 treeNode.actionId = this.lastParsedActionData.actionId;
                 treeNode.actionIconClass = this.lastParsedActionData.actionIconClass;
             }
-            return treeNode;
-        });
+            // IMPORTANT: Process children recursively to maintain hierarchy
+            if (node.children && node.children.length > 0) {
+                treeNode.children = this.convertExecutionTree(node.children, depth + 1);
+            }
+            treeNodes.push(treeNode);
+        }
+        return treeNodes;
     }
     /**
      * Convert legacy step format to tree nodes
@@ -423,6 +521,7 @@ export class AgentExecutionMonitorComponent {
             'validation': 'validation',
             'prompt': 'prompt',
             'action': 'action',
+            'action_execution': 'action',
             'subagent': 'sub-agent',
             'sub-agent': 'sub-agent',
             'decision': 'decision',
@@ -595,6 +694,7 @@ export class AgentExecutionMonitorComponent {
     }
     /**
      * Convert live steps format to execution tree format
+     * FIXED: Ensure depth is properly preserved
      */
     convertLiveStepsToTree(liveSteps) {
         const treeNodes = [];
@@ -628,7 +728,7 @@ export class AgentExecutionMonitorComponent {
                 startTime: step.startTime ? new Date(step.startTime) : new Date(),
                 agentPath: step.agentHierarchy || [],
                 expanded: false,
-                depth: step.depth || 0,
+                depth: step.depth !== undefined ? step.depth : 0, // Ensure depth is always defined
                 detailsMarkdown: detailsMarkdown,
                 detailsExpanded: false
             };
@@ -690,6 +790,7 @@ export class AgentExecutionMonitorComponent {
                 // Update the component if it exists
                 const componentRef = this.nodeComponentMap.get(nodeId);
                 if (componentRef) {
+                    // Create a new object to ensure change detection
                     componentRef.instance.node = { ...node };
                     componentRef.changeDetectorRef.detectChanges();
                 }
@@ -732,31 +833,63 @@ export class AgentExecutionMonitorComponent {
             this.stats.totalTokens = this.executionData.agentRun.TotalTokensUsed || 0;
             this.stats.totalCost = this.executionData.agentRun.TotalCost || 0;
         }
-        const processNode = (node) => {
-            this.stats.totalSteps++;
-            if (node.status === 'completed')
-                this.stats.completedSteps++;
-            if (node.status === 'failed')
-                this.stats.failedSteps++;
-            // Only accumulate tokens if we don't have agent run data
-            if (!this.executionData?.agentRun) {
-                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));
+        // Calculate stats from execution tree nodes if we have them
+        if (this.executionTree.length > 0) {
+            const processNode = (node) => {
+                this.stats.totalSteps++;
+                if (node.status === 'completed')
+                    this.stats.completedSteps++;
+                if (node.status === 'failed')
+                    this.stats.failedSteps++;
+                // Only accumulate tokens if we don't have agent run data
+                if (!this.executionData?.agentRun) {
+                    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));
+        }
+        else if (this.executionData?.executionTree) {
+            // If we don't have processed tree nodes but have raw execution data, calculate from raw data
+            console.log('📈 Calculating stats from raw execution data since tree is empty');
+            const processRawNode = (node) => {
+                this.stats.totalSteps++;
+                const status = this.mapStepStatus(node.step?.Status);
+                if (status === 'completed')
+                    this.stats.completedSteps++;
+                if (status === 'failed')
+                    this.stats.failedSteps++;
+                if (node.durationMs)
+                    this.stats.totalDuration += node.durationMs;
+                const nodeType = this.mapStepType(node.executionType || node.step?.StepType);
+                this.stats.stepsByType[nodeType] = (this.stats.stepsByType[nodeType] || 0) + 1;
+                if (nodeType === 'prompt') {
+                    this.stats.totalPrompts += 1;
+                }
+                if (node.children) {
+                    node.children.forEach((child) => processRawNode(child));
+                }
+            };
+            this.executionData.executionTree.forEach((node) => processRawNode(node));
+        }
+        console.log('📈 Stats calculated:', {
+            totalSteps: this.stats.totalSteps,
+            treeLength: this.executionTree.length,
+            executionDataExists: !!this.executionData,
+            hasRawExecutionTree: !!this.executionData?.executionTree
+        });
     }
     /**
      * Toggle node expansion
@@ -775,18 +908,6 @@ export class AgentExecutionMonitorComponent {
             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
      */
@@ -915,6 +1036,7 @@ export class AgentExecutionMonitorComponent {
     }
     /**
      * Append new live steps without re-rendering entire tree
+     * FIXED: Ensure depth is properly preserved when creating nodes
      */
     appendNewLiveSteps(liveSteps) {
         if (!liveSteps || liveSteps.length === 0)
@@ -995,13 +1117,13 @@ export class AgentExecutionMonitorComponent {
                 }
             }
             else {
-                // Create new node
+                // Create new node with proper depth
                 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);
+                // Ensure depth is set from the step data
+                if (step.depth !== undefined) {
+                    newNode.depth = step.depth;
                 }
-                if (step.depth === 0) {
+                if (newNode.depth === 0) {
                     // Add to tree and create component
                     this.executionTree.push(newNode);
                     this.createNodeComponent(newNode, this.executionNodesContainer);
@@ -1025,7 +1147,7 @@ export class AgentExecutionMonitorComponent {
                         }
                     }
                     else {
-                        // If no parent found, add as root
+                        // If no parent found, add as root but preserve depth
                         this.executionTree.push(newNode);
                         this.createNodeComponent(newNode, this.executionNodesContainer);
                     }
@@ -1105,7 +1227,8 @@ export class AgentExecutionMonitorComponent {
      * Filter nodes based on display mode
      */
     filterNodesForMode(nodes, mode) {
-        return nodes.filter(node => {
+        console.log('🔍 Filtering nodes for mode:', mode, 'from', nodes.length, 'nodes');
+        const filteredNodes = nodes.filter(node => {
             // If no displayMode is set, default to showing in both modes
             if (!node.displayMode) {
                 return true;
@@ -1118,8 +1241,11 @@ export class AgentExecutionMonitorComponent {
                 }
                 return true;
             }
+            console.log('📄 Filtering out node in', mode, 'mode:', node.name, 'displayMode:', node.displayMode);
             return false;
         });
+        console.log('✅ Filtered to', filteredNodes.length, 'nodes for mode:', mode);
+        return filteredNodes;
     }
     /**
      * Build a map of nodes by ID for quick lookup
@@ -1134,6 +1260,7 @@ export class AgentExecutionMonitorComponent {
     }
     /**
      * Create a single node from a live step
+     * FIXED: Ensure depth is properly set from step data
      */
     createNodeFromLiveStep(step) {
         const stepName = step.step?.StepName || 'Processing...';
@@ -1180,6 +1307,8 @@ export class AgentExecutionMonitorComponent {
         const inputPreview = this.createPreview(step.inputData);
         const outputPreview = this.createPreview(step.outputData);
         const nodeType = this.mapStepType(step.executionType || step.step?.StepType);
+        // IMPORTANT: Use the depth from step data, ensure it's always defined
+        const nodeDepth = step.depth !== undefined ? step.depth : 0;
         const node = {
             id: step.step?.ID || this.generateStepId(step),
             name: name,
@@ -1190,7 +1319,7 @@ export class AgentExecutionMonitorComponent {
             duration: step.durationMs,
             agentPath: step.agentHierarchy || [],
             expanded: false,
-            depth: step.depth || 0,
+            depth: nodeDepth, // Use the extracted depth
             detailsMarkdown: detailsMarkdown,
             detailsExpanded: false,
             inputPreview: inputPreview,
@@ -1292,6 +1421,87 @@ export class AgentExecutionMonitorComponent {
         }
         return false;
     }
+    /**
+     * Expands nodes in the execution tree that have children
+     * Called when auto-expand flag is detected or execution completes
+     */
+    expandAllNodes() {
+        if (!this.executionTree || this.executionTree.length === 0) {
+            return;
+        }
+        console.log('🔄 Starting auto-expansion of nodes with children', this.executionTree.length);
+        // Recursively expand only nodes that have children
+        const expandNodeRecursively = (nodes) => {
+            for (const node of nodes) {
+                // Only expand nodes that have children (sub-nodes)
+                const hasChildren = node.children && node.children.length > 0;
+                if (hasChildren) {
+                    node.expanded = true;
+                    console.log(`Expanding node with children: ${node.name}`, {
+                        childCount: node.children?.length,
+                        nodeType: node.type
+                    });
+                    // Update the corresponding component if it exists
+                    const componentRef = this.nodeComponentMap.get(node.id);
+                    if (componentRef) {
+                        // Create a new object to ensure change detection
+                        const updatedNode = { ...node, expanded: true };
+                        componentRef.instance.node = updatedNode;
+                        componentRef.changeDetectorRef.markForCheck();
+                        componentRef.changeDetectorRef.detectChanges();
+                        console.log(`Updated component for node: ${node.name}`);
+                    }
+                    else {
+                        console.log(`No component found for node: ${node.name}`);
+                    }
+                    // Expand children recursively
+                    expandNodeRecursively(node.children);
+                }
+                else {
+                    console.log(`Skipping node without children: ${node.name}`, {
+                        hasExpandableContent: this.hasExpandableContent(node),
+                        hasInputPreview: !!node.inputPreview,
+                        hasOutputPreview: !!node.outputPreview,
+                        hasError: !!node.error,
+                        hasDetailsMarkdown: !!node.detailsMarkdown
+                    });
+                }
+            }
+        };
+        expandNodeRecursively(this.executionTree);
+        // Trigger change detection for the entire component
+        this.cdr.markForCheck();
+        this.cdr.detectChanges();
+        console.log('✅ Completed auto-expansion of nodes with children');
+        // Scroll to top after expansion to show the full tree
+        setTimeout(() => {
+            this.scrollToTop();
+        }, 100);
+    }
+    /**
+     * Scroll the execution tree to the top
+     */
+    scrollToTop() {
+        if (this.executionTreeContainer) {
+            const element = this.executionTreeContainer.nativeElement;
+            element.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    }
+    /**
+     * 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;
+    }
     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);
@@ -1371,7 +1581,7 @@ export class AgentExecutionMonitorComponent {
             i0.ɵɵconditional(ctx.stats.totalDuration ? 37 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.getStepTypes().length > 0 ? 38 : -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        .view-run-btn[_ngcontent-%COMP%] {\n            background: #2196f3;\n            color: white;\n            border: none;\n            padding: 6px 12px;\n            border-radius: 4px;\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            transition: all 0.2s ease;\n            margin-left: auto;\n        }\n        \n        .view-run-btn[_ngcontent-%COMP%]:hover {\n            background: #1976d2;\n            transform: translateY(-1px);\n            box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n        }\n        \n        .view-run-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 12px;\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 }); }
+        } }, 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        \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        .view-run-btn[_ngcontent-%COMP%] {\n            background: #2196f3;\n            color: white;\n            border: none;\n            padding: 6px 12px;\n            border-radius: 4px;\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            transition: all 0.2s ease;\n            margin-left: auto;\n        }\n        \n        .view-run-btn[_ngcontent-%COMP%]:hover {\n            background: #1976d2;\n            transform: translateY(-1px);\n            box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n        }\n        \n        .view-run-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 12px;\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        }"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentExecutionMonitorComponent, [{
         type: Component,
@@ -1463,7 +1673,7 @@ export class AgentExecutionMonitorComponent {
                 }
             </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        /* View Run Button */\n        .view-run-btn {\n            background: #2196f3;\n            color: white;\n            border: none;\n            padding: 6px 12px;\n            border-radius: 4px;\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            transition: all 0.2s ease;\n            margin-left: auto;\n        }\n        \n        .view-run-btn:hover {\n            background: #1976d2;\n            transform: translateY(-1px);\n            box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n        }\n        \n        .view-run-btn i {\n            font-size: 12px;\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    "] }]
+    `, 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 - These styles are for reference only, actual rendering is done by ExecutionNodeComponent */\n        .tree-node {\n            margin-bottom: 4px;\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        /* View Run Button */\n        .view-run-btn {\n            background: #2196f3;\n            color: white;\n            border: none;\n            padding: 6px 12px;\n            border-radius: 4px;\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            transition: all 0.2s ease;\n            margin-left: auto;\n        }\n        \n        .view-run-btn:hover {\n            background: #1976d2;\n            transform: translateY(-1px);\n            box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n        }\n        \n        .view-run-btn i {\n            font-size: 12px;\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    "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { mode: [{
             type: Input
         }], executionData: [{
@@ -1483,5 +1693,5 @@ export class AgentExecutionMonitorComponent {
             type: ViewChild,
             args: ['executionNodesContainer', { read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentExecutionMonitorComponent, { className: "AgentExecutionMonitorComponent", filePath: "lib/agent-execution-monitor.component.ts", lineNumber: 643 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentExecutionMonitorComponent, { className: "AgentExecutionMonitorComponent", filePath: "lib/agent-execution-monitor.component.ts", lineNumber: 406 }); })();
 //# sourceMappingURL=agent-execution-monitor.component.js.map