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

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

@@ -1,7 +1,5 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import * as i0 from "@angular/core";
-const _forTrack0 = ($index, $item) => $item.id;
 function ExecutionNodeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "i", 19);
@@ -9,7 +7,7 @@ function ExecutionNodeComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.node.expanded)("fa-chevron-right", !ctx_r1.node.expanded);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.expanded)("fa-chevron-right", !ctx_r1.expanded);
 } }
 function ExecutionNodeComponent_Case_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 4);
@@ -33,7 +31,7 @@ function ExecutionNodeComponent_Case_11_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(ctx_r1.node.actionIconClass);
+    i0.ɵɵclassMap(ctx_r1.getActionIconClass());
 } }
 function ExecutionNodeComponent_Case_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 21);
@@ -42,19 +40,19 @@ function ExecutionNodeComponent_Case_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, ExecutionNodeComponent_Case_11_Conditional_0_Template, 1, 2, "i", 20)(1, ExecutionNodeComponent_Case_11_Conditional_1_Template, 1, 0, "i", 21);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.node.actionIconClass ? 0 : 1);
+    i0.ɵɵconditional(ctx_r1.getActionIconClass() ? 0 : 1);
 } }
 function ExecutionNodeComponent_Case_12_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 22);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("src", ctx_r1.node.agentLogoURL, i0.ɵɵsanitizeUrl)("alt", ctx_r1.node.agentName || "Agent");
+    i0.ɵɵproperty("src", ctx_r1.getAgentLogoURL(), i0.ɵɵsanitizeUrl)("alt", ctx_r1.getAgentName() || "Agent");
 } }
 function ExecutionNodeComponent_Case_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(ctx_r1.node.agentIconClass);
+    i0.ɵɵclassMap(ctx_r1.getAgentIconClass());
 } }
 function ExecutionNodeComponent_Case_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 23);
@@ -63,7 +61,7 @@ function ExecutionNodeComponent_Case_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, ExecutionNodeComponent_Case_12_Conditional_0_Template, 1, 2, "img", 22)(1, ExecutionNodeComponent_Case_12_Conditional_1_Template, 1, 2, "i", 20)(2, ExecutionNodeComponent_Case_12_Conditional_2_Template, 1, 0, "i", 23);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.node.agentLogoURL ? 0 : ctx_r1.node.agentIconClass ? 1 : 2);
+    i0.ɵɵconditional(ctx_r1.getAgentLogoURL() ? 0 : ctx_r1.getAgentIconClass() ? 1 : 2);
 } }
 function ExecutionNodeComponent_Case_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 11);
@@ -78,7 +76,7 @@ function ExecutionNodeComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("[Level ", ctx_r1.node.depth, "]");
+    i0.ɵɵtextInterpolate1("[Level ", ctx_r1.depth, "]");
 } }
 function ExecutionNodeComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 15);
@@ -87,7 +85,7 @@ function ExecutionNodeComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.node.duration));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.getDuration()));
 } }
 function ExecutionNodeComponent_Conditional_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 24);
@@ -96,7 +94,7 @@ function ExecutionNodeComponent_Conditional_19_Conditional_1_Template(rf, ctx) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", ctx_r1.node.tokensUsed, " tokens");
+    i0.ɵɵtextInterpolate1("", ctx_r1.getTokensUsed(), " tokens");
 } }
 function ExecutionNodeComponent_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 25);
@@ -105,7 +103,7 @@ function ExecutionNodeComponent_Conditional_19_Conditional_2_Template(rf, ctx) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("$", ctx_r1.node.cost.toFixed(4), "");
+    i0.ɵɵtextInterpolate1("$", ctx_r1.getCost().toFixed(4), "");
 } }
 function ExecutionNodeComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 16);
@@ -114,9 +112,9 @@ function ExecutionNodeComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.node.tokensUsed ? 1 : -1);
+    i0.ɵɵconditional(ctx_r1.getTokensUsed() ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.node.cost ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.getCost() ? 2 : -1);
 } }
 function ExecutionNodeComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -126,9 +124,9 @@ function ExecutionNodeComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("title", ctx_r1.node.detailsExpanded ? "Hide details" : "Show details");
+    i0.ɵɵproperty("title", ctx_r1.detailsExpanded ? "Hide details" : "Show details");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-info", !ctx_r1.node.detailsExpanded)("fa-times", ctx_r1.node.detailsExpanded);
+    i0.ɵɵclassProp("fa-info", !ctx_r1.detailsExpanded)("fa-times", ctx_r1.detailsExpanded);
 } }
 function ExecutionNodeComponent_Conditional_21_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31);
@@ -137,13 +135,13 @@ function ExecutionNodeComponent_Conditional_21_Conditional_0_Conditional_1_Templ
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.node.name);
+    i0.ɵɵtextInterpolate(ctx_r1.step.StepName);
 } }
 function ExecutionNodeComponent_Conditional_21_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 32);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("innerHTML", ctx_r1.formatMarkdown(ctx_r1.node.detailsMarkdown), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r1.formatMarkdown(ctx_r1.getDetailsMarkdown()), i0.ɵɵsanitizeHtml);
 } }
 function ExecutionNodeComponent_Conditional_21_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 28);
@@ -154,7 +152,7 @@ function ExecutionNodeComponent_Conditional_21_Conditional_0_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isNameTruncated() ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.node.detailsMarkdown ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.getDetailsMarkdown() ? 2 : -1);
 } }
 function ExecutionNodeComponent_Conditional_21_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 29)(1, "div", 33);
@@ -167,7 +165,7 @@ function ExecutionNodeComponent_Conditional_21_Conditional_2_Template(rf, ctx) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.node.error);
+    i0.ɵɵtextInterpolate(ctx_r1.step.ErrorMessage);
 } }
 function ExecutionNodeComponent_Conditional_21_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 30)(1, "div", 33);
@@ -180,7 +178,7 @@ function ExecutionNodeComponent_Conditional_21_Conditional_3_Template(rf, ctx) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.node.inputPreview);
+    i0.ɵɵtextInterpolate(ctx_r1.getInputPreview());
 } }
 function ExecutionNodeComponent_Conditional_21_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 30)(1, "div", 33);
@@ -193,7 +191,7 @@ function ExecutionNodeComponent_Conditional_21_Conditional_4_Template(rf, ctx) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.node.outputPreview);
+    i0.ɵɵtextInterpolate(ctx_r1.getOutputPreview());
 } }
 function ExecutionNodeComponent_Conditional_21_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 30)(1, "div", 35);
@@ -207,57 +205,37 @@ function ExecutionNodeComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.node.detailsMarkdown || ctx_r1.isNameTruncated() ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.getDetailsMarkdown() || ctx_r1.isNameTruncated() ? 0 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.node.error ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.step.ErrorMessage ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.node.inputPreview ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.getInputPreview() ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.node.outputPreview ? 4 : -1);
+    i0.ɵɵconditional(ctx_r1.getOutputPreview() ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.node.error && !ctx_r1.node.inputPreview && !ctx_r1.node.outputPreview && !ctx_r1.node.detailsMarkdown && !ctx_r1.isNameTruncated() ? 5 : -1);
-} }
-function ExecutionNodeComponent_Conditional_22_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-execution-node", 39);
-    i0.ɵɵlistener("toggleNode", function ExecutionNodeComponent_Conditional_22_For_1_Template_mj_execution_node_toggleNode_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleNode.emit($event)); })("userInteracted", function ExecutionNodeComponent_Conditional_22_For_1_Template_mj_execution_node_userInteracted_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.userInteracted.emit()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const child_r5 = ctx.$implicit;
-    i0.ɵɵproperty("node", child_r5)("depth", child_r5.depth);
-} }
-function ExecutionNodeComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ExecutionNodeComponent_Conditional_22_For_1_Template, 1, 2, "mj-execution-node", 38, _forTrack0);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r1.node.children);
+    i0.ɵɵconditional(!ctx_r1.step.ErrorMessage && !ctx_r1.getInputPreview() && !ctx_r1.getOutputPreview() && !ctx_r1.getDetailsMarkdown() && !ctx_r1.isNameTruncated() ? 5 : -1);
 } }
 export class ExecutionNodeComponent {
     constructor() {
-        this.depth = 0; // Add depth input
+        this.depth = 0;
+        this.agentPath = [];
+        this.expanded = false;
+        this.detailsExpanded = false;
         this.toggleNode = new EventEmitter();
+        this.toggleDetails = new EventEmitter();
         this.userInteracted = new EventEmitter();
     }
-    // NEW: Add events for node navigation
-    // Note: Removed navigateToStep functionality
-    hasExpandableContent() {
-        return !!(this.node.children && this.node.children.length > 0) ||
-            this.node.type === 'sub-agent' ||
-            this.node.type === 'action' ||
-            !!this.node.inputPreview ||
-            !!this.node.outputPreview ||
-            !!this.node.error ||
-            !!this.node.detailsMarkdown;
-    }
     hasChildren() {
-        return !!(this.node.children && this.node.children.length > 0);
+        return this.step.StepType === 'Sub-Agent' &&
+            !!this.step.SubAgentRun?.Steps &&
+            this.step.SubAgentRun.Steps.length > 0;
     }
     onToggleChildren(event) {
         if (event) {
             event.stopPropagation();
         }
         if (this.hasChildren()) {
-            this.toggleNode.emit(this.node);
+            this.toggleNode.emit();
             this.userInteracted.emit();
         }
     }
@@ -266,32 +244,33 @@ export class ExecutionNodeComponent {
             event.stopPropagation();
         }
         if (this.hasNodeDetails()) {
-            this.node.detailsExpanded = !this.node.detailsExpanded;
+            this.toggleDetails.emit();
             this.userInteracted.emit();
         }
     }
     onDoubleClick() {
         if (this.hasChildren()) {
-            this.toggleNode.emit(this.node);
+            this.toggleNode.emit();
             this.userInteracted.emit();
         }
     }
     hasNodeDetails() {
-        return !!this.node.inputPreview ||
-            !!this.node.outputPreview ||
-            !!this.node.error ||
-            !!this.node.detailsMarkdown ||
+        return !!this.step.InputData ||
+            !!this.step.OutputData ||
+            !!this.step.ErrorMessage ||
+            !!this.getDetailsMarkdown() ||
             this.isNameTruncated();
     }
     getTruncatedName() {
         const maxLength = 120;
-        if (this.node.name.length <= maxLength) {
-            return this.node.name;
+        const name = this.getStepName();
+        if (name.length <= maxLength) {
+            return name;
         }
-        return this.node.name.substring(0, maxLength) + '...';
+        return name.substring(0, maxLength) + '...';
     }
     isNameTruncated() {
-        return this.node.name.length > 120;
+        return this.step.StepName.length > 120;
     }
     formatDuration(ms) {
         if (ms < 1000)
@@ -303,13 +282,170 @@ export class ExecutionNodeComponent {
         return `${minutes}m ${seconds}s`;
     }
     getNodeTitle() {
-        if (this.node.type === 'sub-agent' && this.node.agentName) {
-            return `Sub-agent: ${this.node.agentName}`;
+        if (this.step.StepType === 'Sub-Agent' && this.getAgentName()) {
+            return `Sub-agent: ${this.getAgentName()}`;
         }
-        if (this.node.type === 'action' && this.node.actionName) {
-            return `Action: ${this.node.actionName}`;
+        if (this.step.StepType === 'Actions' && this.getActionName()) {
+            return `Action: ${this.getActionName()}`;
+        }
+        return this.step.StepType;
+    }
+    // Getter methods for step data
+    getStepName() {
+        // Extract just the first line if the name contains markdown
+        const lines = this.step.StepName.split('\n');
+        return lines[0].trim();
+    }
+    getStepTypeClass() {
+        const typeMap = {
+            'Validation': 'validation',
+            'Prompt': 'prompt',
+            'Actions': 'action',
+            'Sub-Agent': 'sub-agent',
+            'Decision': 'decision',
+            'Chat': 'chat'
+        };
+        return typeMap[this.step.StepType] || 'prompt';
+    }
+    getStatusClass() {
+        const statusMap = {
+            'Pending': 'pending',
+            'Running': 'running',
+            'Completed': 'completed',
+            'Failed': 'failed',
+            'Cancelled': 'failed',
+            'Paused': 'pending'
+        };
+        // Use override if provided, otherwise use actual status
+        const status = this.overrideDisplayStatus || this.step.Status;
+        return statusMap[status] || 'pending';
+    }
+    getDuration() {
+        if (!this.step.StartedAt || !this.step.CompletedAt)
+            return 0;
+        return new Date(this.step.CompletedAt).getTime() - new Date(this.step.StartedAt).getTime();
+    }
+    getTokensUsed() {
+        // Check if this is a prompt step with token data
+        if (this.step.StepType === 'Prompt' && this.step.PromptRun) {
+            return this.step.PromptRun.TokensUsed || undefined;
+        }
+        return undefined;
+    }
+    getCost() {
+        // Check if this is a prompt step with cost data
+        if (this.step.StepType === 'Prompt' && this.step.PromptRun) {
+            return this.step.PromptRun.TotalCost || undefined;
+        }
+        return undefined;
+    }
+    getDetailsMarkdown() {
+        // Check if the step name contains markdown details after the first line
+        const lines = this.step.StepName.split('\n');
+        if (lines.length > 1) {
+            return lines.slice(1).join('\n').trim();
+        }
+        return undefined;
+    }
+    getInputPreview() {
+        if (!this.step.InputData)
+            return undefined;
+        try {
+            const parsed = JSON.parse(this.step.InputData);
+            // 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;
+            // Fallback to stringified preview
+            const str = JSON.stringify(parsed, null, 2);
+            return str.length > 500 ? str.substring(0, 500) + '...' : str;
+        }
+        catch {
+            return typeof this.step.InputData === 'string' ? this.step.InputData : JSON.stringify(this.step.InputData);
+        }
+    }
+    getOutputPreview() {
+        if (!this.step.OutputData)
+            return undefined;
+        try {
+            const parsed = JSON.parse(this.step.OutputData);
+            // 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();
+            }
+            // 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: ${result.content}`;
+                }
+                return preview;
+            }
+            // Fallback
+            const str = JSON.stringify(parsed, null, 2);
+            return str.length > 500 ? str.substring(0, 500) + '...' : str;
+        }
+        catch {
+            return typeof this.step.OutputData === 'string' ? this.step.OutputData : JSON.stringify(this.step.OutputData);
+        }
+    }
+    // Methods to extract metadata from input/output data
+    getAgentName() {
+        if (this.step.StepType === 'Sub-Agent' && this.step.SubAgentRun) {
+            return this.step.SubAgentRun.Agent || undefined;
+        }
+        return this.parseMetadata('subAgentName');
+    }
+    getAgentIconClass() {
+        return this.parseMetadata('subAgentIconClass') || this.parseMetadata('agentIconClass');
+    }
+    getAgentLogoURL() {
+        return this.parseMetadata('subAgentLogoURL') || this.parseMetadata('agentLogoURL');
+    }
+    getActionName() {
+        if (this.step.StepType === 'Actions' && this.step.ActionExecutionLog) {
+            return this.step.ActionExecutionLog.Action;
+        }
+        return this.parseMetadata('actionName');
+    }
+    getActionIconClass() {
+        return this.parseMetadata('actionIconClass');
+    }
+    parseMetadata(key) {
+        if (!this.step.InputData)
+            return undefined;
+        try {
+            const parsed = JSON.parse(this.step.InputData);
+            return parsed[key];
+        }
+        catch {
+            return undefined;
         }
-        return this.node.type;
     }
     formatMarkdown(markdown) {
         // Basic markdown formatting
@@ -340,7 +476,7 @@ export class ExecutionNodeComponent {
         return html;
     }
     static { this.ɵfac = function ExecutionNodeComponent_Factory(t) { return new (t || ExecutionNodeComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionNodeComponent, selectors: [["mj-execution-node"]], inputs: { node: "node", depth: "depth" }, outputs: { toggleNode: "toggleNode", userInteracted: "userInteracted" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 23, vars: 19, consts: [[1, "tree-node"], [1, "node-header", 3, "dblclick"], ["title", "Toggle children", 1, "expand-icon", "fa-solid", 3, "fa-chevron-down", "fa-chevron-right"], [1, "status-icon"], [1, "fa-regular", "fa-circle"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-times-circle"], [1, "type-icon", 3, "title"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-brain"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-comments"], [1, "node-name"], [2, "color", "#666", "margin-right", "8px"], [1, "node-duration"], [1, "node-metrics"], [1, "details-toggle-btn", 3, "title"], [1, "node-details"], ["title", "Toggle children", 1, "expand-icon", "fa-solid", 3, "click"], [3, "class"], [1, "fa-solid", "fa-bolt"], [1, "agent-logo-icon", 3, "src", "alt"], [1, "fa-solid", "fa-sitemap"], [1, "tokens"], [1, "cost"], [1, "details-toggle-btn", 3, "click", "title"], [1, "fa-solid"], [1, "markdown-details"], [1, "detail-section", "error"], [1, "detail-section"], [1, "full-name"], [1, "detail-content", "markdown", 3, "innerHTML"], [1, "detail-label"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "detail-content"], [1, "fa-solid", "fa-sign-in-alt"], [1, "fa-solid", "fa-sign-out-alt"], [3, "node", "depth"], [3, "toggleNode", "userInteracted", "node", "depth"]], template: function ExecutionNodeComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionNodeComponent, selectors: [["mj-execution-node"]], inputs: { step: "step", depth: "depth", agentPath: "agentPath", expanded: "expanded", detailsExpanded: "detailsExpanded", overrideDisplayStatus: "overrideDisplayStatus" }, outputs: { toggleNode: "toggleNode", toggleDetails: "toggleDetails", userInteracted: "userInteracted" }, decls: 22, vars: 20, consts: [[1, "tree-node"], [1, "node-header", 3, "dblclick"], ["title", "Toggle children", 1, "expand-icon", "fa-solid", 3, "fa-chevron-down", "fa-chevron-right"], [1, "status-icon"], [1, "fa-regular", "fa-circle"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-times-circle"], [1, "type-icon", 3, "title"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-brain"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-comments"], [1, "node-name"], [2, "color", "#666", "margin-right", "8px"], [1, "node-duration"], [1, "node-metrics"], [1, "details-toggle-btn", 3, "title"], [1, "node-details"], ["title", "Toggle children", 1, "expand-icon", "fa-solid", 3, "click"], [3, "class"], [1, "fa-solid", "fa-bolt"], [1, "agent-logo-icon", 3, "src", "alt"], [1, "fa-solid", "fa-sitemap"], [1, "tokens"], [1, "cost"], [1, "details-toggle-btn", 3, "click", "title"], [1, "fa-solid"], [1, "markdown-details"], [1, "detail-section", "error"], [1, "detail-section"], [1, "full-name"], [1, "detail-content", "markdown", 3, "innerHTML"], [1, "detail-label"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "detail-content"], [1, "fa-solid", "fa-sign-in-alt"], [1, "fa-solid", "fa-sign-out-alt"]], template: function ExecutionNodeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵlistener("dblclick", function ExecutionNodeComponent_Template_div_dblclick_1_listener() { return ctx.onDoubleClick(); });
             i0.ɵɵtemplate(2, ExecutionNodeComponent_Conditional_2_Template, 1, 4, "i", 2);
@@ -356,46 +492,45 @@ export class ExecutionNodeComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(18, ExecutionNodeComponent_Conditional_18_Template, 2, 1, "span", 15)(19, ExecutionNodeComponent_Conditional_19_Template, 3, 2, "span", 16)(20, ExecutionNodeComponent_Conditional_20_Template, 2, 5, "button", 17);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(21, ExecutionNodeComponent_Conditional_21_Template, 6, 5, "div", 18)(22, ExecutionNodeComponent_Conditional_22_Template, 2, 0);
+            i0.ɵɵtemplate(21, ExecutionNodeComponent_Conditional_21_Template, 6, 5, "div", 18);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            let tmp_5_0;
-            let tmp_7_0;
-            i0.ɵɵclassMap("depth-" + ctx.node.depth + " type-" + ctx.node.type);
-            i0.ɵɵclassProp("expanded", ctx.node.expanded)("has-children", ctx.hasChildren());
+            let tmp_6_0;
+            let tmp_8_0;
+            i0.ɵɵclassMap("depth-" + ctx.depth + " type-" + ctx.getStepTypeClass());
+            i0.ɵɵclassProp("expanded", ctx.expanded)("has-children", ctx.hasChildren())("details-expanded", ctx.detailsExpanded);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.hasChildren() ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassMap("status-" + ctx.node.status);
+            i0.ɵɵclassMap("status-" + ctx.getStatusClass());
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_5_0 = ctx.node.status) === "pending" ? 4 : tmp_5_0 === "running" ? 5 : tmp_5_0 === "completed" ? 6 : tmp_5_0 === "failed" ? 7 : -1);
+            i0.ɵɵconditional((tmp_6_0 = ctx.getStatusClass()) === "pending" ? 4 : tmp_6_0 === "running" ? 5 : tmp_6_0 === "completed" ? 6 : tmp_6_0 === "failed" ? 7 : -1);
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("title", ctx.getNodeTitle());
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_7_0 = ctx.node.type) === "validation" ? 9 : tmp_7_0 === "prompt" ? 10 : tmp_7_0 === "action" ? 11 : tmp_7_0 === "sub-agent" ? 12 : tmp_7_0 === "decision" ? 13 : tmp_7_0 === "chat" ? 14 : -1);
+            i0.ɵɵconditional((tmp_8_0 = ctx.getStepTypeClass()) === "validation" ? 9 : tmp_8_0 === "prompt" ? 10 : tmp_8_0 === "action" ? 11 : tmp_8_0 === "sub-agent" ? 12 : tmp_8_0 === "decision" ? 13 : tmp_8_0 === "chat" ? 14 : -1);
             i0.ɵɵadvance(7);
-            i0.ɵɵconditional(ctx.node.type === "sub-agent" && ctx.node.depth > 0 ? 16 : -1);
+            i0.ɵɵconditional(ctx.step.StepType === "Sub-Agent" && ctx.depth > 0 ? 16 : -1);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.getTruncatedName(), " ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.node.duration ? 18 : -1);
+            i0.ɵɵconditional(ctx.getDuration() ? 18 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.node.tokensUsed || ctx.node.cost ? 19 : -1);
+            i0.ɵɵconditional(ctx.getTokensUsed() || ctx.getCost() ? 19 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.hasNodeDetails() ? 20 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.node.detailsExpanded ? 21 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.node.expanded && ctx.node.children && ctx.node.children.length > 0 ? 22 : -1);
-        } }, dependencies: [ExecutionNodeComponent, CommonModule], styles: ["[_nghost-%COMP%] {\n            display: block;\n            width: 100%;\n        }\n        \n        \n\n        .tree-node[_ngcontent-%COMP%] {\n            margin: 4px 0;\n            position: relative;\n        }\n        \n        \n\n        .depth-0[_ngcontent-%COMP%] { \n            margin-left: 0;\n            position: relative;\n            z-index: 2;\n        }\n        .depth-0[_ngcontent-%COMP%]::after {\n            display: none;\n        }\n        .depth-0[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] { \n            background: #f8f9fa;\n            border: 2px solid #e0e0e0;\n            font-weight: 600;\n            position: relative;\n            z-index: 10;\n        }\n        \n        \n\n        .depth-1[_ngcontent-%COMP%] {\n            margin-left: 24px;\n        }\n        .depth-1[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fafafa;\n            border-color: #d0d0d0;\n        }\n        \n        .depth-2[_ngcontent-%COMP%] {\n            margin-left: 48px;\n        }\n        .depth-2[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fcfcfc;\n            border-color: #c0c0c0;\n        }\n        \n        .depth-3[_ngcontent-%COMP%] {\n            margin-left: 72px;\n        }\n        .depth-3[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fdfdfd;\n            border-color: #b0b0b0;\n        }\n        \n        .depth-4[_ngcontent-%COMP%] {\n            margin-left: 96px;\n        }\n        .depth-4[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n        \n        .depth-5[_ngcontent-%COMP%] {\n            margin-left: 120px;\n        }\n        .depth-5[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n        \n        .depth-6[_ngcontent-%COMP%] {\n            margin-left: 144px;\n        }\n        .depth-6[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n\n        \n\n        .depth-0[_ngcontent-%COMP%] { \n            position: relative;\n            overflow: hidden;\n            z-index: 2;\n        }\n        .depth-0[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] { \n            background: #f8f9fa;\n            position: relative;\n            z-index: 2;\n        }\n        \n        \n\n        .depth-0.has-children[_ngcontent-%COMP%]::before {\n            content: '';\n            position: absolute;\n            left: 12px;\n            top: 0;\n            width: 2px;\n            height: 100%;\n            border-left: 2px dotted #c0c7d0;\n            z-index: 0; \n\n        }\n        \n        \n\n        .depth-1[_ngcontent-%COMP%] { \n            margin-left: 30px;\n            padding-left: 12px;\n            position: relative;\n            z-index: 1;\n        }\n        .depth-1[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] { \n            background: #fafbfc;\n            position: relative;\n            z-index: 1;\n        }\n        \n        \n\n        .depth-1[_ngcontent-%COMP%]::after {\n            content: '';\n            position: absolute;\n            left: -15px;\n            top: 12px;\n            width: 25px;\n            height: 2px;\n            border-bottom: 2px dotted #c0c7d0;\n            z-index: 1;\n        }\n        \n        \n\n        .tree-node.details-expanded[_ngcontent-%COMP%]    > .node-header[_ngcontent-%COMP%] {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n            border-bottom: 1px solid #2196f3;\n        }\n        \n        .node-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 12px;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            transition: all 0.2s ease;\n            user-select: none;\n            position: relative;\n            z-index: 5;\n            background: white;\n        }\n        \n        .node-header[_ngcontent-%COMP%]:hover {\n            background: var(--gray-700);\n            border-color: var(--mj-blue) !important;\n        }\n        \n        \n\n        .tree-node.type-sub-agent[_ngcontent-%COMP%]    > .node-header[_ngcontent-%COMP%] {\n            border-left: 4px solid var(--mj-blue);\n        }\n        \n        \n\n        .tree-node.type-action[_ngcontent-%COMP%]    > .node-header[_ngcontent-%COMP%] {\n            border-left: 4px solid #4caf50;\n        }\n        \n        .expand-icon[_ngcontent-%COMP%] {\n            width: 20px;\n            height: 20px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            color: #666;\n            font-size: 10px;\n            cursor: pointer;\n            border-radius: 3px;\n            transition: all 0.2s ease;\n            z-index: 10; \n\n            position: relative;\n        }\n        \n        .expand-icon[_ngcontent-%COMP%]:hover {\n            background: #e0e0e0;\n            color: #333;\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            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 14px;\n            color: #666;\n        }\n        \n        .agent-logo-icon[_ngcontent-%COMP%] {\n            width: 16px;\n            height: 16px;\n            object-fit: cover;\n            border-radius: 3px;\n        }\n        \n        .node-name[_ngcontent-%COMP%] {\n            flex: 1;\n            font-size: 13px;\n            font-weight: 500;\n            color: #1a1a1a;\n        }\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        .details-toggle-btn[_ngcontent-%COMP%] {\n            width: 28px;\n            height: 28px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 1px solid #e0e0e0;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 12px;\n            color: #666;\n            margin-left: 4px;\n        }\n        \n        .details-toggle-btn[_ngcontent-%COMP%]:hover {\n            background: #f0f0f0;\n            border-color: #2196f3;\n            color: #2196f3;\n        }\n        \n        .details-toggle-btn[_ngcontent-%COMP%]:active {\n            background: #e3f2fd;\n        }\n        \n        \n\n        .tree-node.details-expanded[_ngcontent-%COMP%]   .details-toggle-btn[_ngcontent-%COMP%] {\n            background: #2196f3;\n            border-color: #2196f3;\n            color: white;\n        }\n        \n        .tree-node.details-expanded[_ngcontent-%COMP%]   .details-toggle-btn[_ngcontent-%COMP%]:hover {\n            background: #1976d2;\n            border-color: #1976d2;\n        }\n        \n        .node-details[_ngcontent-%COMP%] {\n            margin: 0 5px;\n            padding: 16px;\n            background: var(--gray-600);\n            border: 1px solid var(--gray-700);\n            border-top: none;\n            border-radius: 0 0 6px 6px;\n            font-size: 12px;\n            position: relative;\n            z-index: 4;\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: #555;\n        }\n        \n        .detail-content[_ngcontent-%COMP%] {\n            white-space: pre-wrap;\n            word-break: break-word;\n            color: #333;\n            line-height: 1.4;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%] {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f9f9f9;\n            border-left: 3px solid #2196f3;\n            border-radius: 0 4px 4px 0;\n            font-size: 13px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .markdown[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n            margin: 8px 0 4px 0;\n            color: #1a1a1a;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            font-size: 14px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n            font-size: 13px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n            margin: 4px 0;\n            padding-left: 20px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n            margin: 2px 0;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n            background: #e8e8e8;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-size: 12px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n            background: #f5f5f5;\n            padding: 8px;\n            border-radius: 4px;\n            overflow-x: auto;\n            margin: 4px 0;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n            background: none;\n            padding: 0;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   em[_ngcontent-%COMP%] {\n            font-style: italic;\n            color: #555;\n        }\n        \n        .full-name[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: #1a1a1a;\n            margin-bottom: 8px;\n            padding-bottom: 8px;\n            border-bottom: 1px solid #e0e0e0;\n            word-wrap: break-word;\n        }"] }); }
+            i0.ɵɵconditional(ctx.detailsExpanded ? 21 : -1);
+        } }, styles: ["[_nghost-%COMP%] {\n            display: block;\n            width: 100%;\n        }\n        \n        \n\n        .tree-node[_ngcontent-%COMP%] {\n            margin: 4px 0;\n            position: relative;\n        }\n        \n        \n\n        .depth-0[_ngcontent-%COMP%] { \n            margin-left: 0;\n            position: relative;\n            z-index: 2;\n        }\n        .depth-0[_ngcontent-%COMP%]::after {\n            display: none;\n        }\n        .depth-0[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] { \n            background: #f8f9fa;\n            border: 2px solid #e0e0e0;\n            font-weight: 600;\n            position: relative;\n            z-index: 10;\n        }\n        \n        \n\n        .depth-1[_ngcontent-%COMP%] {\n            margin-left: 24px;\n        }\n        .depth-1[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fafafa;\n            border-color: #d0d0d0;\n        }\n        \n        .depth-2[_ngcontent-%COMP%] {\n            margin-left: 48px;\n        }\n        .depth-2[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fcfcfc;\n            border-color: #c0c0c0;\n        }\n        \n        .depth-3[_ngcontent-%COMP%] {\n            margin-left: 72px;\n        }\n        .depth-3[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fdfdfd;\n            border-color: #b0b0b0;\n        }\n        \n        .depth-4[_ngcontent-%COMP%] {\n            margin-left: 96px;\n        }\n        .depth-4[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n        \n        .depth-5[_ngcontent-%COMP%] {\n            margin-left: 120px;\n        }\n        .depth-5[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n        \n        .depth-6[_ngcontent-%COMP%] {\n            margin-left: 144px;\n        }\n        .depth-6[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n\n        \n\n        .depth-0[_ngcontent-%COMP%] { \n            position: relative;\n            overflow: hidden;\n            z-index: 2;\n        }\n        .depth-0[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] { \n            background: #f8f9fa;\n            position: relative;\n            z-index: 2;\n        }\n        \n        \n\n        .depth-0.has-children[_ngcontent-%COMP%]::before {\n            content: '';\n            position: absolute;\n            left: 12px;\n            top: 0;\n            width: 2px;\n            height: 100%;\n            border-left: 2px dotted #c0c7d0;\n            z-index: 0; \n\n        }\n        \n        \n\n        .depth-1[_ngcontent-%COMP%] { \n            margin-left: 30px;\n            padding-left: 12px;\n            position: relative;\n            z-index: 1;\n        }\n        .depth-1[_ngcontent-%COMP%]   .node-header[_ngcontent-%COMP%] { \n            background: #fafbfc;\n            position: relative;\n            z-index: 1;\n        }\n        \n        \n\n        .depth-1[_ngcontent-%COMP%]::after {\n            content: '';\n            position: absolute;\n            left: -15px;\n            top: 12px;\n            width: 25px;\n            height: 2px;\n            border-bottom: 2px dotted #c0c7d0;\n            z-index: 1;\n        }\n        \n        \n\n        .tree-node.details-expanded[_ngcontent-%COMP%]    > .node-header[_ngcontent-%COMP%] {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n            border-bottom: 1px solid #2196f3;\n        }\n        \n        .node-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 12px;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            transition: all 0.2s ease;\n            user-select: none;\n            position: relative;\n            z-index: 5;\n            background: white;\n        }\n        \n        .node-header[_ngcontent-%COMP%]:hover {\n            background: var(--gray-700);\n            border-color: var(--mj-blue) !important;\n        }\n        \n        \n\n        .tree-node.type-sub-agent[_ngcontent-%COMP%]    > .node-header[_ngcontent-%COMP%] {\n            border-left: 4px solid var(--mj-blue);\n        }\n        \n        \n\n        .tree-node.type-action[_ngcontent-%COMP%]    > .node-header[_ngcontent-%COMP%] {\n            border-left: 4px solid #4caf50;\n        }\n        \n        .expand-icon[_ngcontent-%COMP%] {\n            width: 20px;\n            height: 20px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            color: #666;\n            font-size: 10px;\n            cursor: pointer;\n            border-radius: 3px;\n            transition: all 0.2s ease;\n            z-index: 10; \n\n            position: relative;\n        }\n        \n        .expand-icon[_ngcontent-%COMP%]:hover {\n            background: #e0e0e0;\n            color: #333;\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            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 14px;\n            color: #666;\n        }\n        \n        .agent-logo-icon[_ngcontent-%COMP%] {\n            width: 16px;\n            height: 16px;\n            object-fit: cover;\n            border-radius: 3px;\n        }\n        \n        .node-name[_ngcontent-%COMP%] {\n            flex: 1;\n            font-size: 13px;\n            font-weight: 500;\n            color: #1a1a1a;\n        }\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        .details-toggle-btn[_ngcontent-%COMP%] {\n            width: 28px;\n            height: 28px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 1px solid #e0e0e0;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 12px;\n            color: #666;\n            margin-left: 4px;\n        }\n        \n        .details-toggle-btn[_ngcontent-%COMP%]:hover {\n            background: #f0f0f0;\n            border-color: #2196f3;\n            color: #2196f3;\n        }\n        \n        .details-toggle-btn[_ngcontent-%COMP%]:active {\n            background: #e3f2fd;\n        }\n        \n        \n\n        .tree-node.details-expanded[_ngcontent-%COMP%]   .details-toggle-btn[_ngcontent-%COMP%] {\n            background: #2196f3;\n            border-color: #2196f3;\n            color: white;\n        }\n        \n        .tree-node.details-expanded[_ngcontent-%COMP%]   .details-toggle-btn[_ngcontent-%COMP%]:hover {\n            background: #1976d2;\n            border-color: #1976d2;\n        }\n        \n        .node-details[_ngcontent-%COMP%] {\n            margin: 0 5px;\n            padding: 16px;\n            background: var(--gray-600);\n            border: 1px solid var(--gray-700);\n            border-top: none;\n            border-radius: 0 0 6px 6px;\n            font-size: 12px;\n            position: relative;\n            z-index: 4;\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: #555;\n        }\n        \n        .detail-content[_ngcontent-%COMP%] {\n            white-space: pre-wrap;\n            word-break: break-word;\n            color: #333;\n            line-height: 1.4;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%] {\n            padding: 16px 16px 0 16px;\n            background: var(--gray-600);\n            border: 1px solid var(--gray-700);\n            border-bottom: none;\n            border-top: none;\n            margin: 0 5px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .markdown[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n            margin: 8px 0 4px 0;\n            color: #1a1a1a;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            font-size: 14px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n            font-size: 13px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n            margin: 4px 0;\n            padding-left: 20px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n            margin: 2px 0;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n            background: #e8e8e8;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-size: 12px;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n            background: #f5f5f5;\n            padding: 8px;\n            border-radius: 4px;\n            overflow-x: auto;\n            margin: 4px 0;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n            background: none;\n            padding: 0;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n        \n        .markdown[_ngcontent-%COMP%]   em[_ngcontent-%COMP%] {\n            font-style: italic;\n            color: #555;\n        }\n        \n        .full-name[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: #1a1a1a;\n            padding-bottom: 8px;\n            border-bottom: 1px solid #e0e0e0;\n            word-wrap: break-word;\n        }"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExecutionNodeComponent, [{
         type: Component,
-        args: [{ selector: 'mj-execution-node', standalone: true, imports: [CommonModule], template: `
+        args: [{ selector: 'mj-execution-node', changeDetection: ChangeDetectionStrategy.OnPush, template: `
         <div class="tree-node" 
-             [class.expanded]="node.expanded"
+             [class.expanded]="expanded"
              [class.has-children]="hasChildren()"
-             [class]="'depth-' + node.depth + ' type-' + node.type">
+             [class.details-expanded]="detailsExpanded"
+             [class]="'depth-' + depth + ' type-' + getStepTypeClass()">
             
             <!-- Node Header -->
             <div class="node-header" 
@@ -403,15 +538,15 @@ export class ExecutionNodeComponent {
                 <!-- Expand/Collapse Icon - Only show if node has children -->
                 @if (hasChildren()) {
                     <i class="expand-icon fa-solid"
-                       [class.fa-chevron-down]="node.expanded"
-                       [class.fa-chevron-right]="!node.expanded"
+                       [class.fa-chevron-down]="expanded"
+                       [class.fa-chevron-right]="!expanded"
                        (click)="onToggleChildren($event)"
                        title="Toggle children"></i>
                 }
                 
                 <!-- Status Icon -->
-                <span class="status-icon" [class]="'status-' + node.status">
-                    @switch (node.status) {
+                <span class="status-icon" [class]="'status-' + getStatusClass()">
+                    @switch (getStatusClass()) {
                         @case ('pending') {
                             <i class="fa-regular fa-circle"></i>
                         }
@@ -429,7 +564,7 @@ export class ExecutionNodeComponent {
                 
                 <!-- Type Icon -->
                 <span class="type-icon" [title]="getNodeTitle()">
-                    @switch (node.type) {
+                    @switch (getStepTypeClass()) {
                         @case ('validation') {
                             <i class="fa-solid fa-shield-halved"></i>
                         }
@@ -437,17 +572,17 @@ export class ExecutionNodeComponent {
                             <i class="fa-solid fa-brain"></i>
                         }
                         @case ('action') {
-                            @if (node.actionIconClass) {
-                                <i [class]="node.actionIconClass"></i>
+                            @if (getActionIconClass()) {
+                                <i [class]="getActionIconClass()"></i>
                             } @else {
                                 <i class="fa-solid fa-bolt"></i>
                             }
                         }
                         @case ('sub-agent') {
-                            @if (node.agentLogoURL) {
-                                <img [src]="node.agentLogoURL" [alt]="node.agentName || 'Agent'" class="agent-logo-icon">
-                            } @else if (node.agentIconClass) {
-                                <i [class]="node.agentIconClass"></i>
+                            @if (getAgentLogoURL()) {
+                                <img [src]="getAgentLogoURL()" [alt]="getAgentName() || 'Agent'" class="agent-logo-icon">
+                            } @else if (getAgentIconClass()) {
+                                <i [class]="getAgentIconClass()"></i>
                             } @else {
                                 <i class="fa-solid fa-sitemap"></i>
                             }
@@ -463,25 +598,25 @@ export class ExecutionNodeComponent {
                 
                 <!-- Node Name with depth indicator for sub-agents -->
                 <span class="node-name">
-                    @if (node.type === 'sub-agent' && node.depth > 0) {
-                        <small style="color: #666; margin-right: 8px;">[Level {{ node.depth }}]</small>
+                    @if (step.StepType === 'Sub-Agent' && depth > 0) {
+                        <small style="color: #666; margin-right: 8px;">[Level {{ depth }}]</small>
                     }
                     {{ getTruncatedName() }}
                 </span>
                 
                 <!-- Duration -->
-                @if (node.duration) {
-                    <span class="node-duration">{{ formatDuration(node.duration) }}</span>
+                @if (getDuration()) {
+                    <span class="node-duration">{{ formatDuration(getDuration()) }}</span>
                 }
                 
                 <!-- Tokens/Cost -->
-                @if (node.tokensUsed || node.cost) {
+                @if (getTokensUsed() || getCost()) {
                     <span class="node-metrics">
-                        @if (node.tokensUsed) {
-                            <span class="tokens">{{ node.tokensUsed }} tokens</span>
+                        @if (getTokensUsed()) {
+                            <span class="tokens">{{ getTokensUsed() }} tokens</span>
                         }
-                        @if (node.cost) {
-                            <span class="cost">\${{ node.cost.toFixed(4) }}</span>
+                        @if (getCost()) {
+                            <span class="cost">\${{ getCost()!.toFixed(4) }}</span>
                         }
                     </span>
                 }
@@ -490,55 +625,55 @@ export class ExecutionNodeComponent {
                 @if (hasNodeDetails()) {
                     <button class="details-toggle-btn"
                             (click)="onToggleDetails($event)"
-                            [title]="node.detailsExpanded ? 'Hide details' : 'Show details'">
+                            [title]="detailsExpanded ? 'Hide details' : 'Show details'">
                         <i class="fa-solid"
-                           [class.fa-info]="!node.detailsExpanded"
-                           [class.fa-times]="node.detailsExpanded"></i>
+                           [class.fa-info]="!detailsExpanded"
+                           [class.fa-times]="detailsExpanded"></i>
                     </button>
                 }
             </div>
             
             <!-- Node Details (when details are expanded) -->
-            @if (node.detailsExpanded) {
+            @if (detailsExpanded) {
                 <!-- Show markdown details first if available -->
-                @if (node.detailsMarkdown || isNameTruncated()) {
+                @if (getDetailsMarkdown() || isNameTruncated()) {
                     <div class="markdown-details">
                         @if (isNameTruncated()) {
-                            <div class="full-name">{{ node.name }}</div>
+                            <div class="full-name">{{ step.StepName }}</div>
                         }
-                        @if (node.detailsMarkdown) {
-                            <div class="detail-content markdown" [innerHTML]="formatMarkdown(node.detailsMarkdown)"></div>
+                        @if (getDetailsMarkdown()) {
+                            <div class="detail-content markdown" [innerHTML]="formatMarkdown(getDetailsMarkdown()!)"></div>
                         }
                     </div>
                 }
                 
                 <!-- Always show details section if node is expanded, even if some content is empty -->
                 <div class="node-details">
-                    @if (node.error) {
+                    @if (step.ErrorMessage) {
                         <div class="detail-section error">
                             <div class="detail-label">
                                 <i class="fa-solid fa-exclamation-triangle"></i> Error
                             </div>
-                            <div class="detail-content">{{ node.error }}</div>
+                            <div class="detail-content">{{ step.ErrorMessage }}</div>
                         </div>
                     }
-                    @if (node.inputPreview) {
+                    @if (getInputPreview()) {
                         <div class="detail-section">
                             <div class="detail-label">
                                 <i class="fa-solid fa-sign-in-alt"></i> Input
                             </div>
-                            <div class="detail-content">{{ node.inputPreview }}</div>
+                            <div class="detail-content">{{ getInputPreview() }}</div>
                         </div>
                     }
-                    @if (node.outputPreview) {
+                    @if (getOutputPreview()) {
                         <div class="detail-section">
                             <div class="detail-label">
                                 <i class="fa-solid fa-sign-out-alt"></i> Output
                             </div>
-                            <div class="detail-content">{{ node.outputPreview }}</div>
+                            <div class="detail-content">{{ getOutputPreview() }}</div>
                         </div>
                     }
-                    @if (!node.error && !node.inputPreview && !node.outputPreview && !node.detailsMarkdown && !isNameTruncated()) {
+                    @if (!step.ErrorMessage && !getInputPreview() && !getOutputPreview() && !getDetailsMarkdown() && !isNameTruncated()) {
                         <div class="detail-section">
                             <div class="detail-content">No additional details available for this step.</div>
                         </div>
@@ -546,27 +681,27 @@ export class ExecutionNodeComponent {
                 </div>
             }
             
-            <!-- Children (when children are expanded) - HIERARCHICAL DISPLAY -->
-            @if (node.expanded && node.children && node.children.length > 0) {
-                @for (child of node.children; track child.id) {
-                    <mj-execution-node 
-                        [node]="child"
-                        [depth]="child.depth"
-                        (toggleNode)="toggleNode.emit($event)"
-                        (userInteracted)="userInteracted.emit()">
-                    </mj-execution-node>
-                }
-            }
+            <!-- Note: Sub-agent children are rendered by the parent component to maintain proper depth tracking -->
         </div>
-    `, styles: ["\n        :host {\n            display: block;\n            width: 100%;\n        }\n        \n        /* Depth-based indentation - each level indents by 24px */\n        .tree-node {\n            margin: 4px 0;\n            position: relative;\n        }\n        \n        /* Root level nodes (depth 0) */\n        .depth-0 { \n            margin-left: 0;\n            position: relative;\n            z-index: 2;\n        }\n        .depth-0::after {\n            display: none;\n        }\n        .depth-0 .node-header { \n            background: #f8f9fa;\n            border: 2px solid #e0e0e0;\n            font-weight: 600;\n            position: relative;\n            z-index: 10;\n        }\n        \n        /* Sub-level nodes with increasing indentation */\n        .depth-1 {\n            margin-left: 24px;\n        }\n        .depth-1 .node-header {\n            background: #fafafa;\n            border-color: #d0d0d0;\n        }\n        \n        .depth-2 {\n            margin-left: 48px;\n        }\n        .depth-2 .node-header {\n            background: #fcfcfc;\n            border-color: #c0c0c0;\n        }\n        \n        .depth-3 {\n            margin-left: 72px;\n        }\n        .depth-3 .node-header {\n            background: #fdfdfd;\n            border-color: #b0b0b0;\n        }\n        \n        .depth-4 {\n            margin-left: 96px;\n        }\n        .depth-4 .node-header {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n        \n        .depth-5 {\n            margin-left: 120px;\n        }\n        .depth-5 .node-header {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n        \n        .depth-6 {\n            margin-left: 144px;\n        }\n        .depth-6 .node-header {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n\n        /* Root level - higher z-index to hide lines behind it */\n        .depth-0 { \n            position: relative;\n            overflow: hidden;\n            z-index: 2;\n        }\n        .depth-0 .node-header { \n            background: #f8f9fa;\n            position: relative;\n            z-index: 2;\n        }\n        \n        /* Only add left padding for nodes with children (that show chevrons) */\n        .depth-0.has-children::before {\n            content: '';\n            position: absolute;\n            left: 12px;\n            top: 0;\n            width: 2px;\n            height: 100%;\n            border-left: 2px dotted #c0c7d0;\n            z-index: 0; /* Behind everything */\n        }\n        \n        /* Child level - only for nodes that actually have parent chevrons */\n        .depth-1 { \n            margin-left: 30px;\n            padding-left: 12px;\n            position: relative;\n            z-index: 1;\n        }\n        .depth-1 .node-header { \n            background: #fafbfc;\n            position: relative;\n            z-index: 1;\n        }\n        \n        /* Horizontal line connecting to each child node - only when parent has children */\n        .depth-1::after {\n            content: '';\n            position: absolute;\n            left: -15px;\n            top: 12px;\n            width: 25px;\n            height: 2px;\n            border-bottom: 2px dotted #c0c7d0;\n            z-index: 1;\n        }\n        \n        /* Visual indicator when details are expanded */\n        .tree-node.details-expanded > .node-header {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n            border-bottom: 1px solid #2196f3;\n        }\n        \n        .node-header {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 12px;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            transition: all 0.2s ease;\n            user-select: none;\n            position: relative;\n            z-index: 5;\n            background: white;\n        }\n        \n        .node-header:hover {\n            background: var(--gray-700);\n            border-color: var(--mj-blue) !important;\n        }\n        \n        /* Sub-agent specific styling */\n        .tree-node.type-sub-agent > .node-header {\n            border-left: 4px solid var(--mj-blue);\n        }\n        \n        /* Action specific styling */\n        .tree-node.type-action > .node-header {\n            border-left: 4px solid #4caf50;\n        }\n        \n        .expand-icon {\n            width: 20px;\n            height: 20px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            color: #666;\n            font-size: 10px;\n            cursor: pointer;\n            border-radius: 3px;\n            transition: all 0.2s ease;\n            z-index: 10; /* Ensure expand icon is clickable */\n            position: relative;\n        }\n        \n        .expand-icon:hover {\n            background: #e0e0e0;\n            color: #333;\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            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 14px;\n            color: #666;\n        }\n        \n        .agent-logo-icon {\n            width: 16px;\n            height: 16px;\n            object-fit: cover;\n            border-radius: 3px;\n        }\n        \n        .node-name {\n            flex: 1;\n            font-size: 13px;\n            font-weight: 500;\n            color: #1a1a1a;\n        }\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        /* Details Toggle Button */\n        .details-toggle-btn {\n            width: 28px;\n            height: 28px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 1px solid #e0e0e0;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 12px;\n            color: #666;\n            margin-left: 4px;\n        }\n        \n        .details-toggle-btn:hover {\n            background: #f0f0f0;\n            border-color: #2196f3;\n            color: #2196f3;\n        }\n        \n        .details-toggle-btn:active {\n            background: #e3f2fd;\n        }\n        \n        /* When details are expanded, style the button differently */\n        .tree-node.details-expanded .details-toggle-btn {\n            background: #2196f3;\n            border-color: #2196f3;\n            color: white;\n        }\n        \n        .tree-node.details-expanded .details-toggle-btn:hover {\n            background: #1976d2;\n            border-color: #1976d2;\n        }\n        \n        .node-details {\n            margin: 0 5px;\n            padding: 16px;\n            background: var(--gray-600);\n            border: 1px solid var(--gray-700);\n            border-top: none;\n            border-radius: 0 0 6px 6px;\n            font-size: 12px;\n            position: relative;\n            z-index: 4;\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: #555;\n        }\n        \n        .detail-content {\n            white-space: pre-wrap;\n            word-break: break-word;\n            color: #333;\n            line-height: 1.4;\n        }\n        \n        .markdown-details {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f9f9f9;\n            border-left: 3px solid #2196f3;\n            border-radius: 0 4px 4px 0;\n            font-size: 13px;\n        }\n        \n        .markdown h3, .markdown h4 {\n            margin: 8px 0 4px 0;\n            color: #1a1a1a;\n        }\n        \n        .markdown h3 {\n            font-size: 14px;\n        }\n        \n        .markdown h4 {\n            font-size: 13px;\n        }\n        \n        .markdown ul {\n            margin: 4px 0;\n            padding-left: 20px;\n        }\n        \n        .markdown li {\n            margin: 2px 0;\n        }\n        \n        .markdown code {\n            background: #e8e8e8;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-size: 12px;\n        }\n        \n        .markdown pre {\n            background: #f5f5f5;\n            padding: 8px;\n            border-radius: 4px;\n            overflow-x: auto;\n            margin: 4px 0;\n        }\n        \n        .markdown pre code {\n            background: none;\n            padding: 0;\n        }\n        \n        .markdown strong {\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n        \n        .markdown em {\n            font-style: italic;\n            color: #555;\n        }\n        \n        .full-name {\n            font-weight: 600;\n            color: #1a1a1a;\n            margin-bottom: 8px;\n            padding-bottom: 8px;\n            border-bottom: 1px solid #e0e0e0;\n            word-wrap: break-word;\n        }\n    "] }]
-    }], null, { node: [{
+    `, styles: ["\n        :host {\n            display: block;\n            width: 100%;\n        }\n        \n        /* Depth-based indentation - each level indents by 24px */\n        .tree-node {\n            margin: 4px 0;\n            position: relative;\n        }\n        \n        /* Root level nodes (depth 0) */\n        .depth-0 { \n            margin-left: 0;\n            position: relative;\n            z-index: 2;\n        }\n        .depth-0::after {\n            display: none;\n        }\n        .depth-0 .node-header { \n            background: #f8f9fa;\n            border: 2px solid #e0e0e0;\n            font-weight: 600;\n            position: relative;\n            z-index: 10;\n        }\n        \n        /* Sub-level nodes with increasing indentation */\n        .depth-1 {\n            margin-left: 24px;\n        }\n        .depth-1 .node-header {\n            background: #fafafa;\n            border-color: #d0d0d0;\n        }\n        \n        .depth-2 {\n            margin-left: 48px;\n        }\n        .depth-2 .node-header {\n            background: #fcfcfc;\n            border-color: #c0c0c0;\n        }\n        \n        .depth-3 {\n            margin-left: 72px;\n        }\n        .depth-3 .node-header {\n            background: #fdfdfd;\n            border-color: #b0b0b0;\n        }\n        \n        .depth-4 {\n            margin-left: 96px;\n        }\n        .depth-4 .node-header {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n        \n        .depth-5 {\n            margin-left: 120px;\n        }\n        .depth-5 .node-header {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n        \n        .depth-6 {\n            margin-left: 144px;\n        }\n        .depth-6 .node-header {\n            background: #fefefe;\n            border-color: #a0a0a0;\n        }\n\n        /* Root level - higher z-index to hide lines behind it */\n        .depth-0 { \n            position: relative;\n            overflow: hidden;\n            z-index: 2;\n        }\n        .depth-0 .node-header { \n            background: #f8f9fa;\n            position: relative;\n            z-index: 2;\n        }\n        \n        /* Only add left padding for nodes with children (that show chevrons) */\n        .depth-0.has-children::before {\n            content: '';\n            position: absolute;\n            left: 12px;\n            top: 0;\n            width: 2px;\n            height: 100%;\n            border-left: 2px dotted #c0c7d0;\n            z-index: 0; /* Behind everything */\n        }\n        \n        /* Child level - only for nodes that actually have parent chevrons */\n        .depth-1 { \n            margin-left: 30px;\n            padding-left: 12px;\n            position: relative;\n            z-index: 1;\n        }\n        .depth-1 .node-header { \n            background: #fafbfc;\n            position: relative;\n            z-index: 1;\n        }\n        \n        /* Horizontal line connecting to each child node - only when parent has children */\n        .depth-1::after {\n            content: '';\n            position: absolute;\n            left: -15px;\n            top: 12px;\n            width: 25px;\n            height: 2px;\n            border-bottom: 2px dotted #c0c7d0;\n            z-index: 1;\n        }\n        \n        /* Visual indicator when details are expanded */\n        .tree-node.details-expanded > .node-header {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n            border-bottom: 1px solid #2196f3;\n        }\n        \n        .node-header {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 12px;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            transition: all 0.2s ease;\n            user-select: none;\n            position: relative;\n            z-index: 5;\n            background: white;\n        }\n        \n        .node-header:hover {\n            background: var(--gray-700);\n            border-color: var(--mj-blue) !important;\n        }\n        \n        /* Sub-agent specific styling */\n        .tree-node.type-sub-agent > .node-header {\n            border-left: 4px solid var(--mj-blue);\n        }\n        \n        /* Action specific styling */\n        .tree-node.type-action > .node-header {\n            border-left: 4px solid #4caf50;\n        }\n        \n        .expand-icon {\n            width: 20px;\n            height: 20px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            color: #666;\n            font-size: 10px;\n            cursor: pointer;\n            border-radius: 3px;\n            transition: all 0.2s ease;\n            z-index: 10; /* Ensure expand icon is clickable */\n            position: relative;\n        }\n        \n        .expand-icon:hover {\n            background: #e0e0e0;\n            color: #333;\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            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 14px;\n            color: #666;\n        }\n        \n        .agent-logo-icon {\n            width: 16px;\n            height: 16px;\n            object-fit: cover;\n            border-radius: 3px;\n        }\n        \n        .node-name {\n            flex: 1;\n            font-size: 13px;\n            font-weight: 500;\n            color: #1a1a1a;\n        }\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        /* Details Toggle Button */\n        .details-toggle-btn {\n            width: 28px;\n            height: 28px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 1px solid #e0e0e0;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 12px;\n            color: #666;\n            margin-left: 4px;\n        }\n        \n        .details-toggle-btn:hover {\n            background: #f0f0f0;\n            border-color: #2196f3;\n            color: #2196f3;\n        }\n        \n        .details-toggle-btn:active {\n            background: #e3f2fd;\n        }\n        \n        /* When details are expanded, style the button differently */\n        .tree-node.details-expanded .details-toggle-btn {\n            background: #2196f3;\n            border-color: #2196f3;\n            color: white;\n        }\n        \n        .tree-node.details-expanded .details-toggle-btn:hover {\n            background: #1976d2;\n            border-color: #1976d2;\n        }\n        \n        .node-details {\n            margin: 0 5px;\n            padding: 16px;\n            background: var(--gray-600);\n            border: 1px solid var(--gray-700);\n            border-top: none;\n            border-radius: 0 0 6px 6px;\n            font-size: 12px;\n            position: relative;\n            z-index: 4;\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: #555;\n        }\n        \n        .detail-content {\n            white-space: pre-wrap;\n            word-break: break-word;\n            color: #333;\n            line-height: 1.4;\n        }\n        \n        .markdown-details {\n            padding: 16px 16px 0 16px;\n            background: var(--gray-600);\n            border: 1px solid var(--gray-700);\n            border-bottom: none;\n            border-top: none;\n            margin: 0 5px;\n        }\n        \n        .markdown h3, .markdown h4 {\n            margin: 8px 0 4px 0;\n            color: #1a1a1a;\n        }\n        \n        .markdown h3 {\n            font-size: 14px;\n        }\n        \n        .markdown h4 {\n            font-size: 13px;\n        }\n        \n        .markdown ul {\n            margin: 4px 0;\n            padding-left: 20px;\n        }\n        \n        .markdown li {\n            margin: 2px 0;\n        }\n        \n        .markdown code {\n            background: #e8e8e8;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-size: 12px;\n        }\n        \n        .markdown pre {\n            background: #f5f5f5;\n            padding: 8px;\n            border-radius: 4px;\n            overflow-x: auto;\n            margin: 4px 0;\n        }\n        \n        .markdown pre code {\n            background: none;\n            padding: 0;\n        }\n        \n        .markdown strong {\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n        \n        .markdown em {\n            font-style: italic;\n            color: #555;\n        }\n        \n        .full-name {\n            font-weight: 600;\n            color: #1a1a1a;\n            padding-bottom: 8px;\n            border-bottom: 1px solid #e0e0e0;\n            word-wrap: break-word;\n        }\n    "] }]
+    }], null, { step: [{
             type: Input
         }], depth: [{
             type: Input
+        }], agentPath: [{
+            type: Input
+        }], expanded: [{
+            type: Input
+        }], detailsExpanded: [{
+            type: Input
+        }], overrideDisplayStatus: [{
+            type: Input
         }], toggleNode: [{
             type: Output
+        }], toggleDetails: [{
+            type: Output
         }], userInteracted: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionNodeComponent, { className: "ExecutionNodeComponent", filePath: "lib/agent-execution-node.component.ts", lineNumber: 568 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionNodeComponent, { className: "ExecutionNodeComponent", filePath: "lib/agent-execution-node.component.ts", lineNumber: 556 }); })();
 //# sourceMappingURL=agent-execution-node.component.js.map