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

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

@@ -1,5 +1,4 @@
 import { Component, Input, ViewChild, ChangeDetectionStrategy, ViewContainerRef, Output, EventEmitter } 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';
@@ -18,22 +17,17 @@ function AgentExecutionMonitorComponent_Conditional_7_Template(rf, ctx) { if (rf
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span", 21);
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 22);
-    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);
+    i0.ɵɵtextInterpolate(ctx_r1.currentStep.StepName);
 } }
 function AgentExecutionMonitorComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵelementStart(0, "button", 22);
     i0.ɵɵlistener("click", function AgentExecutionMonitorComponent_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewRunClick()); });
-    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelement(1, "i", 23);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -43,7 +37,7 @@ function AgentExecutionMonitorComponent_Conditional_8_Template(rf, ctx) { if (rf
 } }
 function AgentExecutionMonitorComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelement(1, "i", 24);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Waiting for execution to begin...");
     i0.ɵɵelementEnd()();
@@ -70,18 +64,18 @@ function AgentExecutionMonitorComponent_Conditional_37_Template(rf, ctx) { if (r
     i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.stats.totalDuration));
 } }
 function AgentExecutionMonitorComponent_Conditional_38_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const type_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", ctx_r1.stats.stepsByType[type_r4], " ", type_r4, " ");
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.stats.stepsByType[type_r4], " ", ctx_r1.pluralizeStepType(type_r4, ctx_r1.stats.stepsByType[type_r4]), " ");
 } }
 function AgentExecutionMonitorComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵrepeaterCreate(1, AgentExecutionMonitorComponent_Conditional_38_For_2_Template, 2, 2, "span", 26, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, AgentExecutionMonitorComponent_Conditional_38_For_2_Template, 2, 2, "span", 25, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -108,15 +102,19 @@ export class AgentExecutionMonitorComponent {
     constructor(cdr) {
         this.cdr = cdr;
         this.mode = 'historical';
-        this.executionData = null; // Can be live updates or historical data
+        this.agentRun = null; // For historical mode
+        this.liveSteps = []; // For live mode streaming
         this.autoExpand = true; // Auto-expand nodes in live mode
         this.runId = null; // ID of the run (agent or prompt)
         this.runType = 'agent'; // Type of run
         this.viewRunClick = new EventEmitter();
-        this.executionTree = [];
+        // Store the currently rendered steps for UI state management
         this.currentStep = null;
         // Track component references for dynamic components
         this.nodeComponentMap = new Map();
+        // UI state management - track expanded states separately from entities
+        this.expandedStates = new Map();
+        this.detailsExpandedStates = new Map();
         this.stats = {
             totalSteps: 0,
             completedSteps: 0,
@@ -145,84 +143,83 @@ export class AgentExecutionMonitorComponent {
     }
     ngOnChanges(changes) {
         console.log('🔄 Execution Monitor ngOnChanges:', {
-            executionDataChanged: !!changes['executionData'],
+            agentRunChanged: !!changes['agentRun'],
+            liveStepsChanged: !!changes['liveSteps'],
             modeChanged: !!changes['mode'],
-            hasExecutionData: !!this.executionData,
-            currentTreeLength: this.executionTree.length
+            hasAgentRun: !!this.agentRun,
+            liveStepsCount: this.liveSteps?.length || 0
         });
-        if (changes['executionData']) {
-            // 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
+        // Handle agent run changes (historical mode)
+        if (changes['agentRun'] && this.mode === 'historical') {
+            const oldRun = changes['agentRun'].previousValue;
+            const newRun = changes['agentRun'].currentValue;
+            console.log('📊 Agent run changed:', {
+                oldRunExists: !!oldRun,
+                newRunExists: !!newRun,
+                oldRunId: oldRun?.ID,
+                newRunId: newRun?.ID,
+                stepsCount: newRun?.Steps?.length
             });
-            // 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
-                });
+            // Only clear if it's actually a different execution (different ID)
+            const isDifferentExecution = (!oldRun && newRun) ||
+                (oldRun && newRun && oldRun.ID !== newRun.ID) ||
+                (oldRun && !newRun);
+            if (isDifferentExecution) {
+                console.log('🗑️ Clearing for different agent run');
                 this.processedStepIds.clear();
                 this.newlyAddedNodeIds.clear();
+                this.expandedStates.clear();
+                this.detailsExpandedStates.clear();
                 this.clearNodeComponents();
-                this.executionTree = [];
                 this.currentStep = null;
-                this.calculateStats();
             }
-            // 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);
+            // Always process the agent run data (will handle updates to existing run)
+            if (newRun) {
+                this.processAgentRun();
             }
-            // Process data (this will preserve existing nodes if it's the same execution)
-            this.processExecutionData();
         }
-        // Handle mode changes - be more selective about when to clear
+        // Handle live steps changes (live mode)
+        if (changes['liveSteps'] && this.mode === 'live') {
+            const oldSteps = changes['liveSteps'].previousValue;
+            const newSteps = changes['liveSteps'].currentValue;
+            console.log('📊 Live steps changed:', {
+                oldCount: oldSteps?.length || 0,
+                newCount: newSteps?.length || 0
+            });
+            // Process live steps
+            this.processLiveSteps();
+        }
+        // Handle mode changes
         if (changes['mode'] && !changes['mode'].firstChange) {
             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;
-                }
-                // 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 = [];
-                }
+            // Clear everything when switching modes
+            this.processedStepIds.clear();
+            this.newlyAddedNodeIds.clear();
+            this.expandedStates.clear();
+            this.detailsExpandedStates.clear();
+            this.clearNodeComponents();
+            this.currentStep = null;
+            // Stop live updates when switching away from live mode
+            if (previousMode === 'live' && this.updateSubscription) {
+                this.updateSubscription.unsubscribe();
+                this.updateSubscription = undefined;
+            }
+            // Process data for the new mode
+            if (currentMode === 'historical' && this.agentRun) {
+                this.processAgentRun();
+            }
+            else if (currentMode === 'live') {
+                this.setupLiveUpdates();
             }
-            this.processExecutionData();
         }
     }
     ngAfterViewInit() {
         this.viewInitialized = true;
         console.log('🎯 View initialized, checking for pending data:', {
-            hasExecutionData: !!this.executionData,
-            treeLength: this.executionTree.length,
+            hasAgentRun: !!this.agentRun,
+            hasLiveSteps: this.liveSteps?.length > 0,
             hasContainer: !!this.executionNodesContainer
         });
         // Initial setup for scroll behavior
@@ -230,13 +227,13 @@ export class AgentExecutionMonitorComponent {
             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();
+        if (this.mode === 'historical' && this.agentRun && this.nodeComponentMap.size === 0) {
+            console.log('⚡ Processing agent run after view init');
+            this.processAgentRun();
         }
-        else if (this.executionTree.length > 0 && this.nodeComponentMap.size === 0) {
-            console.log('⚡ Re-rendering existing tree after view init');
-            this.renderTree();
+        else if (this.mode === 'live' && this.liveSteps?.length > 0) {
+            console.log('⚡ Processing live steps after view init');
+            this.processLiveSteps();
         }
     }
     ngOnDestroy() {
@@ -259,288 +256,192 @@ export class AgentExecutionMonitorComponent {
         }
     }
     /**
-     * Process execution data based on mode
+     * Process agent run for historical mode
      */
-    processExecutionData() {
-        console.log('⚙️ Processing execution data:', {
-            mode: this.mode,
-            hasExecutionData: !!this.executionData,
-            currentTreeLength: this.executionTree.length,
+    processAgentRun() {
+        console.log('⚙️ Processing agent run:', {
+            hasAgentRun: !!this.agentRun,
+            stepsCount: this.agentRun?.Steps?.length || 0,
             viewInitialized: this.viewInitialized,
             hasContainer: !!this.executionNodesContainer
         });
-        if (this.mode === 'historical') {
-            // 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();
+        if (!this.agentRun || !this.viewInitialized || !this.executionNodesContainer) {
+            console.warn('⚠️ Cannot process agent run:', {
+                agentRun: !this.agentRun ? 'missing' : 'present',
+                viewInitialized: this.viewInitialized ? 'yes' : 'no',
+                container: !this.executionNodesContainer ? 'missing' : 'present'
+            });
+            return;
+        }
+        // Clear existing components
+        this.clearNodeComponents();
+        // Render the agent run steps
+        if (this.agentRun.Steps && this.agentRun.Steps.length > 0) {
+            console.log('🎨 Rendering', this.agentRun.Steps.length, 'steps');
+            this.renderSteps(this.agentRun.Steps, 0, []);
+            console.log('✅ Finished rendering, container now has', this.executionNodesContainer.length, 'components');
         }
         else {
-            // For live mode, preserve existing data when possible
-            if (this.executionTree.length === 0) {
-                this.processedStepIds.clear();
-                this.newlyAddedNodeIds.clear();
-            }
-            // Set up live updates
-            this.setupLiveUpdates();
+            console.warn('⚠️ No steps to render');
         }
-        // Always calculate stats when we have data or when processing new data
+        // Calculate statistics
         this.calculateStats();
-        // Force change detection after processing
-        if (this.viewInitialized) {
-            this.cdr.markForCheck();
-            this.cdr.detectChanges();
-        }
+        // Trigger change detection after rendering all components
+        this.cdr.detectChanges();
     }
     /**
-     * Build tree from historical execution data
+     * Process live steps for live mode
      */
-    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
+    processLiveSteps() {
+        console.log('⚙️ Processing live steps:', {
+            stepsCount: this.liveSteps?.length || 0,
+            viewInitialized: this.viewInitialized,
+            hasContainer: !!this.executionNodesContainer
         });
-        if (!this.executionData) {
-            console.log('⚠️ No execution data available');
-            this.clearNodeComponents();
-            this.executionTree = [];
+        if (!this.liveSteps || !this.viewInitialized || !this.executionNodesContainer) {
             return;
         }
-        // Clear existing components for full rebuild
-        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 = [];
-        }
-        // 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');
+        // Append new steps without clearing existing ones
+        this.appendNewLiveSteps(this.liveSteps);
+        // Trigger change detection after appending live steps
+        this.cdr.detectChanges();
+        // Set up live update monitoring if not already set up
+        if (!this.updateSubscription) {
+            this.setupLiveUpdates();
         }
     }
     /**
-     * Render the execution tree using dynamic components
+     * Render steps recursively with proper hierarchy
      */
-    renderTree() {
-        console.log('🎨 Rendering execution tree:', {
-            hasContainer: !!this.executionNodesContainer,
-            treeLength: this.executionTree.length,
-            viewInitialized: this.viewInitialized
+    renderSteps(steps, depth, agentPath) {
+        console.log('🎨 Rendering steps:', {
+            count: steps.length,
+            depth,
+            agentPath
         });
-        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) {
-            const componentRef = this.createNodeComponent(node, this.executionNodesContainer);
-            console.log('✅ Created component for node:', node.name, 'depth:', node.depth);
+        // Sort steps by StepNumber to ensure proper ordering
+        const sortedSteps = [...steps].sort((a, b) => (a.StepNumber || 0) - (b.StepNumber || 0));
+        for (const step of sortedSteps) {
+            // Skip if already processed in live mode
+            if (this.processedStepIds.has(step.ID)) {
+                continue;
+            }
+            // Create component for this step
+            this.createStepComponent(step, depth, agentPath);
+            // Mark as processed
+            this.processedStepIds.add(step.ID);
+            // Handle sub-agent recursion
+            if (step.StepType === 'Sub-Agent' && step.SubAgentRun?.Steps) {
+                const subAgentPath = [...agentPath, step.SubAgentRun.Agent || 'Sub-Agent'];
+                this.renderSteps(step.SubAgentRun.Steps, depth + 1, subAgentPath);
+            }
         }
-        // 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
+     * Create a component for a step
      */
-    createNodeComponent(node, container) {
-        const componentRef = container.createComponent(ExecutionNodeComponent);
+    createStepComponent(step, depth, agentPath) {
+        // Ensure container exists
+        if (!this.executionNodesContainer) {
+            console.error('❌ executionNodesContainer not available');
+            throw new Error('executionNodesContainer ViewContainerRef not initialized');
+        }
+        const componentRef = this.executionNodesContainer.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 = nodeWithDepth;
+        console.log('🔨 Creating component for step:', {
+            stepId: step.ID,
+            stepName: step.StepName,
+            depth,
+            containerLength: this.executionNodesContainer.length,
+            hostElement: componentRef.location.nativeElement
+        });
+        // Pass the step data with UI state information
+        instance.step = step;
+        instance.depth = depth;
+        instance.agentPath = agentPath;
+        instance.expanded = this.expandedStates.get(step.ID) || false;
+        instance.detailsExpanded = this.detailsExpandedStates.get(step.ID) || false;
         // Subscribe to outputs
-        instance.toggleNode.subscribe((n) => this.toggleNode(n));
+        instance.toggleNode.subscribe(() => this.toggleStepExpansion(step));
+        instance.toggleDetails.subscribe(() => this.toggleStepDetails(step));
         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();
+        this.nodeComponentMap.set(step.ID, componentRef);
+        // Log the component state after setup
+        console.log('✅ Component created and configured:', {
+            stepId: step.ID,
+            hasData: !!instance.step,
+            isAttached: componentRef.hostView.destroyed === false
+        });
         return componentRef;
     }
     /**
-     * Convert new execution tree format to display nodes
-     * FIXED: Maintain proper hierarchy for sub-agents instead of flattening
+     * Toggle step expansion
      */
-    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;
-        });
-        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
-            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();
-                }
-            }
-            // Determine display mode based on the step content
-            let displayMode = 'both';
-            // Progress messages that should only show in live mode
-            if (name.includes('Executing') && name.includes('action') && !name.startsWith('Execute Action:')) {
-                displayMode = 'live';
-            }
-            else if (name.includes("Executing agent's initial prompt")) {
-                displayMode = 'live';
-            }
-            else if (name.includes('Re-executing agent prompt with additional context')) {
-                displayMode = 'live';
-            }
-            // Clear metadata storage before creating previews
-            this.lastParsedAgentData = null;
-            this.lastParsedActionData = null;
-            // Create previews which will populate metadata if available
-            const inputPreview = this.createPreview(node.inputData);
-            const outputPreview = this.createPreview(node.outputData);
-            const treeNode = {
-                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),
-                startTime: node.startTime ? new Date(node.startTime) : undefined,
-                endTime: node.endTime ? new Date(node.endTime) : undefined,
-                duration: node.durationMs,
-                agentPath: node.agentHierarchy || [],
-                inputPreview: inputPreview,
-                outputPreview: outputPreview,
-                error: node.step?.ErrorMessage,
-                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: undefined, // Will be set below
-                displayMode: displayMode
-            };
-            // Add agent metadata if this is a sub-agent node
-            if (treeNode.type === 'sub-agent' && this.lastParsedAgentData) {
-                treeNode.agentName = this.lastParsedAgentData.agentName;
-                treeNode.agentId = this.lastParsedAgentData.agentId;
-                treeNode.agentIconClass = this.lastParsedAgentData.agentIconClass;
-                treeNode.agentLogoURL = this.lastParsedAgentData.agentLogoURL;
-            }
-            // Add action metadata if this is an action node
-            if (treeNode.type === 'action' && this.lastParsedActionData) {
-                treeNode.actionName = this.lastParsedActionData.actionName;
-                treeNode.actionId = this.lastParsedActionData.actionId;
-                treeNode.actionIconClass = this.lastParsedActionData.actionIconClass;
-            }
-            // 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);
+    toggleStepExpansion(step) {
+        const currentState = this.expandedStates.get(step.ID) || false;
+        this.expandedStates.set(step.ID, !currentState);
+        this.userHasInteracted = true;
+        // Update the component
+        const componentRef = this.nodeComponentMap.get(step.ID);
+        if (componentRef) {
+            componentRef.instance.expanded = !currentState;
+            componentRef.changeDetectorRef.detectChanges();
         }
-        return treeNodes;
+        this.cdr.markForCheck();
     }
     /**
-     * Convert legacy step format to tree nodes
+     * Toggle step details expansion
      */
-    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
-            };
-        });
+    toggleStepDetails(step) {
+        const currentState = this.detailsExpandedStates.get(step.ID) || false;
+        this.detailsExpandedStates.set(step.ID, !currentState);
+        // Update the component
+        const componentRef = this.nodeComponentMap.get(step.ID);
+        if (componentRef) {
+            componentRef.instance.detailsExpanded = !currentState;
+            componentRef.changeDetectorRef.detectChanges();
+        }
     }
     /**
-     * Map step type strings to our type enum
+     * Get step type CSS class for styling
      */
-    mapStepType(type) {
+    getStepTypeClass(stepType) {
         const typeMap = {
-            'validation': 'validation',
-            'prompt': 'prompt',
-            'action': 'action',
-            'action_execution': 'action',
-            'subagent': 'sub-agent',
-            'sub-agent': 'sub-agent',
-            'decision': 'decision',
-            'chat': 'chat'
+            'Validation': 'validation',
+            'Prompt': 'prompt',
+            'Actions': 'action',
+            'Sub-Agent': 'sub-agent',
+            'Decision': 'decision',
+            'Chat': 'chat'
         };
-        return typeMap[type?.toLowerCase()] || 'prompt';
+        return typeMap[stepType] || 'prompt';
     }
     /**
-     * Map status strings to our status enum
+     * Get status CSS class for styling
      */
-    mapStepStatus(status) {
+    getStatusClass(status) {
         const statusMap = {
-            'pending': 'pending',
-            'running': 'running',
-            'completed': 'completed',
-            'failed': 'failed',
-            'error': 'failed'
+            'Pending': 'pending',
+            'Running': 'running',
+            'Completed': 'completed',
+            'Failed': 'failed',
+            'Cancelled': 'failed',
+            'Paused': 'pending'
         };
-        return statusMap[status?.toLowerCase()] || 'pending';
+        return statusMap[status] || 'pending';
+    }
+    /**
+     * Helper function to safely convert a value to a preview string
+     */
+    valueToPreviewString(value) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        if (typeof value === 'object') {
+            return JSON.stringify(value, null, 2);
+        }
+        return String(value);
     }
     /**
      * Create a preview string from data
@@ -573,9 +474,9 @@ export class AgentExecutionMonitorComponent {
                 return `Sub-agent: ${parsed.subAgentName}`;
             }
             if (parsed.message)
-                return parsed.message;
+                return this.valueToPreviewString(parsed.message);
             if (parsed.userMessage)
-                return parsed.userMessage;
+                return this.valueToPreviewString(parsed.userMessage);
             // Show action results clearly
             if (parsed.actionResult) {
                 const result = parsed.actionResult;
@@ -587,7 +488,7 @@ export class AgentExecutionMonitorComponent {
                     preview += `Result Code: ${result.resultCode}\n`;
                 }
                 if (result.message) {
-                    preview += `Message: ${result.message}\n`;
+                    preview += `Message: ${this.valueToPreviewString(result.message)}\n`;
                 }
                 if (result.result) {
                     preview += `Result: ${typeof result.result === 'object' ? JSON.stringify(result.result, null, 2) : result.result}`;
@@ -596,10 +497,7 @@ export class AgentExecutionMonitorComponent {
             }
             // Legacy action result format
             if (parsed.result) {
-                if (typeof parsed.result === 'object') {
-                    return JSON.stringify(parsed.result, null, 2);
-                }
-                return String(parsed.result);
+                return this.valueToPreviewString(parsed.result);
             }
             // Show prompt results
             if (parsed.promptResult) {
@@ -609,7 +507,7 @@ export class AgentExecutionMonitorComponent {
                     preview += `Success: ${result.success}\n`;
                 }
                 if (result.content) {
-                    preview += `Content: ${typeof result.content === 'string' ? result.content : JSON.stringify(result.content, null, 2)}`;
+                    preview += `Content: ${this.valueToPreviewString(result.content)}`;
                 }
                 return preview;
             }
@@ -663,155 +561,83 @@ export class AgentExecutionMonitorComponent {
      * 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);
-            }
+        console.log('⚡ Setting up live updates');
+        // Process initial live steps if any
+        if (this.liveSteps && this.liveSteps.length > 0) {
+            this.appendNewLiveSteps(this.liveSteps);
         }
-        // Set up interval to monitor for changes (if not already set up)
+        // Set up interval to check for updates (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();
-                }
+                // Update current step indicator
                 this.updateCurrentStep();
+                // Recalculate stats periodically
+                this.calculateStats();
             });
         }
     }
-    /**
-     * Convert live steps format to execution tree format
-     * FIXED: Ensure depth is properly preserved
-     */
-    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 !== undefined ? step.depth : 0, // Ensure depth is always defined
-                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;
-                }
+        // Find the first running step from all rendered components
+        let runningStep = null;
+        this.nodeComponentMap.forEach((componentRef, stepId) => {
+            const step = componentRef.instance.step;
+            if (step && step.Status === 'Running' && !runningStep) {
+                runningStep = step;
             }
-            return null;
-        };
-        this.currentStep = findRunning(this.executionTree);
+        });
+        this.currentStep = runningStep;
         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) {
-                    // Create a new object to ensure change detection
-                    componentRef.instance.node = { ...node };
-                    componentRef.changeDetectorRef.detectChanges();
-                }
+        // Mark ALL running steps as completed (not just previously new ones)
+        // This ensures only the latest step shows as running
+        this.nodeComponentMap.forEach((componentRef, stepId) => {
+            const step = componentRef.instance.step;
+            if (step.Status === 'Running') {
+                // Create a copy with updated status
+                const updatedStep = Object.assign({}, step, { Status: 'Completed' });
+                componentRef.instance.step = updatedStep;
+                componentRef.changeDetectorRef.detectChanges();
             }
-        }
+        });
     }
     /**
-     * Find a node by ID in the tree
+     * Ensure only the last step in the execution order shows as running
      */
-    findNodeById(nodes, id) {
-        for (const node of nodes) {
-            if (node.id === id) {
-                return node;
+    ensureOnlyLastStepIsRunning() {
+        // Find the last step by step number
+        let lastRunningStep = null;
+        this.nodeComponentMap.forEach((componentRef, stepId) => {
+            const step = componentRef.instance.step;
+            if (step.Status === 'Running') {
+                const stepNumber = step.StepNumber || 0;
+                if (!lastRunningStep || stepNumber > lastRunningStep.stepNumber) {
+                    lastRunningStep = { stepId, stepNumber, componentRef };
+                }
             }
-            if (node.children) {
-                const found = this.findNodeById(node.children, id);
-                if (found)
-                    return found;
+        });
+        // Set override display status for all running steps
+        this.nodeComponentMap.forEach((componentRef, stepId) => {
+            const step = componentRef.instance.step;
+            if (step.Status === 'Running') {
+                // Override display to show as completed, except for the last one
+                if (lastRunningStep && stepId === lastRunningStep.stepId) {
+                    componentRef.instance.overrideDisplayStatus = 'Running';
+                }
+                else {
+                    componentRef.instance.overrideDisplayStatus = 'Completed';
+                }
+                componentRef.changeDetectorRef.detectChanges();
             }
-        }
-        return null;
+        });
     }
     /**
      * Calculate execution statistics
@@ -827,85 +653,47 @@ export class AgentExecutionMonitorComponent {
             totalDuration: 0,
             totalPrompts: 0
         };
-        // Check if we have agent run data with token information
-        if (this.executionData?.agentRun) {
-            // Use token data from agent run if available
-            this.stats.totalTokens = this.executionData.agentRun.TotalTokensUsed || 0;
-            this.stats.totalCost = this.executionData.agentRun.TotalCost || 0;
-        }
-        // 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));
+        // Use token data from agent run if available
+        if (this.agentRun) {
+            this.stats.totalTokens = this.agentRun.TotalTokensUsed || 0;
+            this.stats.totalCost = this.agentRun.TotalCost || 0;
+            // Calculate duration
+            if (this.agentRun.StartedAt && this.agentRun.CompletedAt) {
+                this.stats.totalDuration = new Date(this.agentRun.CompletedAt).getTime() -
+                    new Date(this.agentRun.StartedAt).getTime();
+            }
+            // Count steps recursively
+            if (this.agentRun.Steps) {
+                this.countSteps(this.agentRun.Steps);
+            }
         }
         console.log('📈 Stats calculated:', {
             totalSteps: this.stats.totalSteps,
-            treeLength: this.executionTree.length,
-            executionDataExists: !!this.executionData,
-            hasRawExecutionTree: !!this.executionData?.executionTree
+            totalTokens: this.stats.totalTokens,
+            totalCost: this.stats.totalCost
         });
     }
     /**
-     * Toggle node expansion
+     * Count steps recursively
      */
-    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();
+    countSteps(steps) {
+        for (const step of steps) {
+            this.stats.totalSteps++;
+            // Map to display types for consistency
+            const displayType = this.getStepTypeClass(step.StepType);
+            this.stats.stepsByType[displayType] = (this.stats.stepsByType[displayType] || 0) + 1;
+            if (step.Status === 'Completed')
+                this.stats.completedSteps++;
+            if (step.Status === 'Failed' || step.Status === 'Cancelled')
+                this.stats.failedSteps++;
+            // Count prompts
+            if (step.StepType === 'Prompt') {
+                this.stats.totalPrompts++;
+            }
+            // Recurse for sub-agents
+            if (step.StepType === 'Sub-Agent' && step.SubAgentRun?.Steps) {
+                this.countSteps(step.SubAgentRun.Steps);
             }
-            this.cdr.markForCheck();
         }
     }
     /**
@@ -998,6 +786,24 @@ export class AgentExecutionMonitorComponent {
     getStepTypes() {
         return Object.keys(this.stats.stepsByType).sort();
     }
+    /**
+     * Pluralize step type based on count
+     */
+    pluralizeStepType(type, count) {
+        if (count === 1) {
+            return type;
+        }
+        // Handle special cases
+        switch (type.toLowerCase()) {
+            case 'analysis':
+                return 'Analyses';
+            case 'summary':
+                return 'Summaries';
+            default:
+                // Default pluralization - just add 's'
+                return type + 's';
+        }
+    }
     /**
      * Format markdown content for display
      */
@@ -1036,136 +842,53 @@ 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)
-            return;
-        // If view is not initialized yet, wait for it
-        if (!this.viewInitialized || !this.executionNodesContainer) {
+    appendNewLiveSteps(newSteps) {
+        if (!newSteps || newSteps.length === 0 || !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) {
+        console.log('📝 Appending', newSteps.length, 'live steps');
+        // Sort steps by StepNumber
+        const sortedSteps = [...newSteps].sort((a, b) => (a.StepNumber || 0) - (b.StepNumber || 0));
+        // Mark previously new steps as completed
+        if (this.newlyAddedNodeIds.size > 0) {
             this.markPreviouslyNewNodesAsComplete();
-            // Clear the set for new additions
             this.newlyAddedNodeIds.clear();
         }
-        let hasNewNodes = false;
+        let hasNewSteps = 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();
+            // Skip if already processed
+            if (this.processedStepIds.has(step.ID)) {
+                // Update existing step if status changed
+                const componentRef = this.nodeComponentMap.get(step.ID);
+                if (componentRef && componentRef.instance.step.Status !== step.Status) {
+                    componentRef.instance.step = step;
                     componentRef.changeDetectorRef.detectChanges();
                 }
+                continue;
             }
-            else {
-                // Create new node with proper depth
-                const newNode = this.createNodeFromLiveStep(step);
-                // Ensure depth is set from the step data
-                if (step.depth !== undefined) {
-                    newNode.depth = step.depth;
-                }
-                if (newNode.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 but preserve depth
-                        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);
-                }
+            // Mark as processed and newly added
+            this.processedStepIds.add(step.ID);
+            this.newlyAddedNodeIds.add(step.ID);
+            hasNewSteps = true;
+            // Determine depth based on parent hierarchy
+            const depth = this.calculateStepDepth(step);
+            const agentPath = this.buildAgentPath(step);
+            // Create component for new step
+            this.createStepComponent(step, depth, agentPath);
+            // Handle sub-agent steps recursively
+            if (step.StepType === 'Sub-Agent' && step.SubAgentRun?.Steps) {
+                const subAgentPath = [...agentPath, step.SubAgentRun.Agent || 'Sub-Agent'];
+                this.renderSteps(step.SubAgentRun.Steps, depth + 1, subAgentPath);
             }
         }
-        if (hasNewNodes) {
-            // Update current step
+        if (hasNewSteps) {
+            // After processing all new steps, ensure only the last one shows as running
+            this.ensureOnlyLastStepIsRunning();
             this.updateCurrentStep();
-            // Recalculate stats
             this.calculateStats();
-            // Trigger change detection
-            this.cdr.markForCheck();
+            // Force change detection to ensure new components are rendered
+            this.cdr.detectChanges();
             // Auto-scroll if user hasn't interacted
             setTimeout(() => {
                 this.autoScrollToBottom();
@@ -1173,220 +896,20 @@ export class AgentExecutionMonitorComponent {
         }
     }
     /**
-     * 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;
-    }
-    /**
-     * Filter nodes based on display mode
-     */
-    filterNodesForMode(nodes, mode) {
-        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;
-            }
-            // Show if displayMode is 'both' or matches current mode
-            if (node.displayMode === 'both' || node.displayMode === mode) {
-                // Filter children recursively
-                if (node.children) {
-                    node.children = this.filterNodesForMode(node.children, mode);
-                }
-                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
-     */
-    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
-     * FIXED: Ensure depth is properly set from step data
+     * Calculate step depth based on parent hierarchy
      */
-    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';
-            }
-        }
-        // Determine display mode based on the step content
-        let displayMode = 'both';
-        // Progress messages that should only show in live mode
-        if (name.includes('Executing') && name.includes('action') && !name.startsWith('Execute Action:')) {
-            displayMode = 'live';
-        }
-        else if (name.includes("Executing agent's initial prompt")) {
-            displayMode = 'live';
-        }
-        else if (name.includes('Re-executing agent prompt with additional context')) {
-            displayMode = 'live';
-        }
-        // Check displayMode from metadata if available
-        if (step.metadata?.displayMode) {
-            displayMode = step.metadata.displayMode;
-        }
-        // Clear metadata storage before creating previews
-        this.lastParsedAgentData = null;
-        this.lastParsedActionData = null;
-        // Create previews which will populate metadata if available
-        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,
-            type: nodeType,
-            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: nodeDepth, // Use the extracted depth
-            detailsMarkdown: detailsMarkdown,
-            detailsExpanded: false,
-            inputPreview: inputPreview,
-            outputPreview: outputPreview,
-            tokensUsed: this.extractTokens(step.outputData),
-            cost: this.extractCost(step.outputData),
-            displayMode: displayMode
-        };
-        // Add agent metadata if this is a sub-agent node
-        if (nodeType === 'sub-agent' && this.lastParsedAgentData) {
-            node.agentName = this.lastParsedAgentData.agentName;
-            node.agentId = this.lastParsedAgentData.agentId;
-            node.agentIconClass = this.lastParsedAgentData.agentIconClass;
-            node.agentLogoURL = this.lastParsedAgentData.agentLogoURL;
-        }
-        // Add action metadata if this is an action node
-        if (nodeType === 'action' && this.lastParsedActionData) {
-            node.actionName = this.lastParsedActionData.actionName;
-            node.actionId = this.lastParsedActionData.actionId;
-            node.actionIconClass = this.lastParsedActionData.actionIconClass;
-        }
-        return node;
-    }
-    /**
-     * 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);
-            }
-        }
+    calculateStepDepth(step) {
+        // For now, return 0 for top-level steps
+        // In live mode, depth information should come from the streaming data
+        return 0;
     }
     /**
-     * Preserve expanded state of all nodes
+     * Build agent path for a step
      */
-    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);
-            }
-        }
+    buildAgentPath(step) {
+        // In live mode, agent path should come from streaming data
+        // For now, return empty array
+        return [];
     }
     /**
      * Check if execution is complete
@@ -1399,81 +922,29 @@ export class AgentExecutionMonitorComponent {
      * Handle view run button click
      */
     onViewRunClick() {
-        if (this.runId) {
-            this.viewRunClick.emit({ runId: this.runId, runType: this.runType });
-        }
-    }
-    /**
-     * 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;
-            }
+        if (this.agentRun) {
+            this.viewRunClick.emit({ runId: this.agentRun.ID, runType: 'agent' });
         }
-        return false;
     }
     /**
-     * Expands nodes in the execution tree that have children
-     * Called when auto-expand flag is detected or execution completes
+     * Expands all nodes that have sub-agent children
      */
     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
-                    });
-                }
+        console.log('🔄 Auto-expanding nodes with sub-agents');
+        // Expand all steps that have sub-agent runs
+        this.nodeComponentMap.forEach((componentRef, stepId) => {
+            const step = componentRef.instance.step;
+            if (step.StepType === 'Sub-Agent' && step.SubAgentRun?.Steps?.length) {
+                this.expandedStates.set(stepId, true);
+                componentRef.instance.expanded = true;
+                componentRef.changeDetectorRef.detectChanges();
+                console.log(`Expanded sub-agent: ${step.StepName}`);
             }
-        };
-        expandNodeRecursively(this.executionTree);
-        // Trigger change detection for the entire component
+        });
+        // Trigger change detection
         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
+        // Scroll to top after expansion
         setTimeout(() => {
             this.scrollToTop();
         }, 100);
@@ -1491,16 +962,10 @@ export class AgentExecutionMonitorComponent {
         }
     }
     /**
-     * Check if node has expandable content
+     * Check if there is content to display
      */
-    hasExpandableContent(node) {
-        return !!(node.children && node.children.length > 0) ||
-            node.type === 'sub-agent' ||
-            node.type === 'action' ||
-            !!node.inputPreview ||
-            !!node.outputPreview ||
-            !!node.error ||
-            !!node.detailsMarkdown;
+    hasContent() {
+        return this.nodeComponentMap.size > 0;
     }
     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) {
@@ -1510,7 +975,7 @@ export class AgentExecutionMonitorComponent {
             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", runId: "runId", runType: "runType" }, outputs: { viewRunClick: "viewRunClick" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 39, vars: 16, 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, "view-run-btn"], [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, "view-run-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-hourglass-start"], [1, "type-badge"]], template: function AgentExecutionMonitorComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { mode: "mode", agentRun: "agentRun", liveSteps: "liveSteps", autoExpand: "autoExpand", runId: "runId", runType: "runType" }, outputs: { viewRunClick: "viewRunClick" }, features: [i0.ɵɵNgOnChangesFeature], decls: 39, vars: 16, 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, "view-run-btn"], [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, "step-name"], [1, "view-run-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [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);
@@ -1519,13 +984,13 @@ export class AgentExecutionMonitorComponent {
             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)(8, AgentExecutionMonitorComponent_Conditional_8_Template, 3, 1, "button", 8);
+            i0.ɵɵtemplate(7, AgentExecutionMonitorComponent_Conditional_7_Template, 5, 1, "div", 7)(8, AgentExecutionMonitorComponent_Conditional_8_Template, 3, 1, "button", 8);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(9, "div", 9, 0);
             i0.ɵɵlistener("scroll", function AgentExecutionMonitorComponent_Template_div_scroll_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onScroll($event)); })("click", function AgentExecutionMonitorComponent_Template_div_click_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onUserInteraction()); });
-            i0.ɵɵelementStart(11, "div", 10, 1);
+            i0.ɵɵelement(11, "div", 10, 1);
             i0.ɵɵtemplate(13, AgentExecutionMonitorComponent_Conditional_13_Template, 4, 0, "div", 11);
-            i0.ɵɵelementEnd()();
+            i0.ɵɵelementEnd();
             i0.ɵɵelementStart(14, "div", 12)(15, "div", 13)(16, "div", 14)(17, "span", 15);
             i0.ɵɵtext(18, "Steps");
             i0.ɵɵelementEnd();
@@ -1562,11 +1027,11 @@ export class AgentExecutionMonitorComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.currentStep && ctx.mode === "live" ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.mode === "historical" && ctx.runId && ctx.isExecutionComplete() ? 8 : -1);
+            i0.ɵɵconditional(ctx.mode === "historical" && ctx.agentRun && ctx.isExecutionComplete() ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("has-content", ctx.executionTree.length > 0);
+            i0.ɵɵclassProp("has-content", ctx.hasContent());
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.executionTree.length === 0 ? 13 : -1);
+            i0.ɵɵconditional(!ctx.agentRun && ctx.liveSteps.length === 0 ? 13 : -1);
             i0.ɵɵadvance(7);
             i0.ɵɵtextInterpolate2(" ", ctx.stats.completedSteps, "/", ctx.stats.totalSteps, " ");
             i0.ɵɵadvance();
@@ -1581,11 +1046,11 @@ 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        \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 }); }
+        } }, 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        }\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,
-        args: [{ selector: 'mj-agent-execution-monitor', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        args: [{ selector: 'mj-agent-execution-monitor', changeDetection: ChangeDetectionStrategy.OnPush, template: `
         <div class="execution-monitor" [class.live-mode]="mode === 'live'">
             <!-- Header -->
             <div class="monitor-header">
@@ -1602,11 +1067,10 @@ export class AgentExecutionMonitorComponent {
                 @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>
+                        <span class="step-name">{{ currentStep.StepName }}</span>
                     </div>
                 }
-                @if (mode === 'historical' && runId && isExecutionComplete()) {
+                @if (mode === 'historical' && agentRun && isExecutionComplete()) {
                     <button class="view-run-btn" (click)="onViewRunClick()">
                         <i class="fa-solid fa-external-link-alt"></i>
                         View {{ runType === 'agent' ? 'Agent' : 'Prompt' }} Run
@@ -1617,18 +1081,18 @@ export class AgentExecutionMonitorComponent {
             <!-- Execution Tree -->
             <div class="execution-tree" 
                  #executionTreeContainer
-                 [class.has-content]="executionTree.length > 0"
+                 [class.has-content]="hasContent()"
                  (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>
+                @if (!agentRun && liveSteps.length === 0) {
+                    <div class="empty-state">
+                        <i class="fa-solid fa-hourglass-start"></i>
+                        <p>Waiting for execution to begin...</p>
+                    </div>
+                }
             </div>
 
             <!-- Statistics Footer -->
@@ -1666,17 +1130,19 @@ export class AgentExecutionMonitorComponent {
                     <div class="step-types">
                         @for (type of getStepTypes(); track type) {
                             <span class="type-badge">
-                                {{ stats.stepsByType[type] }} {{ type }}
+                                {{ stats.stepsByType[type] }} {{ pluralizeStepType(type, stats.stepsByType[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 - 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    "] }]
+    `, 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        }\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: [{
+        }], agentRun: [{
+            type: Input
+        }], liveSteps: [{
             type: Input
         }], autoExpand: [{
             type: Input
@@ -1693,5 +1159,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: 406 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentExecutionMonitorComponent, { className: "AgentExecutionMonitorComponent", filePath: "lib/agent-execution-monitor.component.ts", lineNumber: 367 }); })();
 //# sourceMappingURL=agent-execution-monitor.component.js.map