@memberjunction/ng-core-entity-forms 2.54.0 → 2.55.0

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

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