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

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

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, ChangeDetectionStrategy, ViewContainerRef } from '@angular/core';
+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';
@@ -8,18 +8,18 @@ const _c0 = ["executionTreeContainer"];
 const _c1 = ["executionNodesContainer"];
 function AgentExecutionMonitorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
-    i0.ɵɵelement(1, "span", 18);
+    i0.ɵɵ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", 19);
+    i0.ɵɵelementStart(0, "div", 7)(1, "span", 20);
     i0.ɵɵtext(2, "Current:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 20);
+    i0.ɵɵelementStart(3, "span", 21);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 21);
+    i0.ɵɵelementStart(5, "span", 22);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -29,15 +29,27 @@ function AgentExecutionMonitorComponent_Conditional_7_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.currentStep.name);
 } }
-function AgentExecutionMonitorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵelement(1, "i", 22);
+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_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 16);
+function AgentExecutionMonitorComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -45,11 +57,11 @@ function AgentExecutionMonitorComponent_Conditional_20_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("(", ctx_r1.stats.failedSteps, " failed)");
 } }
-function AgentExecutionMonitorComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13)(1, "span", 14);
+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", 15);
+    i0.ɵɵelementStart(3, "span", 16);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -57,19 +69,19 @@ function AgentExecutionMonitorComponent_Conditional_36_Template(rf, ctx) { if (r
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.stats.totalDuration));
 } }
-function AgentExecutionMonitorComponent_Conditional_37_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 23);
+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_r3 = ctx.$implicit;
+    const type_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", ctx_r1.stats.stepsByType[type_r3], " ", type_r3, " ");
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.stats.stepsByType[type_r4], " ", type_r4, " ");
 } }
-function AgentExecutionMonitorComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵrepeaterCreate(1, AgentExecutionMonitorComponent_Conditional_37_For_2_Template, 2, 2, "span", 23, i0.ɵɵrepeaterTrackByIdentity);
+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();
@@ -98,6 +110,9 @@ export class AgentExecutionMonitorComponent {
         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
@@ -228,17 +243,16 @@ export class AgentExecutionMonitorComponent {
         }
         // Clear existing components for full rebuild
         this.clearNodeComponents();
-        // Handle executionTree format
+        // Handle executionTree format - historical mode should only use saved database data
         if (this.executionData.executionTree) {
-            this.executionTree = this.convertExecutionTree(this.executionData.executionTree);
-        }
-        else if (this.executionData.liveSteps) {
-            // Handle live steps that have been converted to historical
-            this.executionTree = this.convertLiveStepsToTree(this.executionData.liveSteps);
+            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
-            this.executionTree = this.convertLegacySteps(this.executionData.steps);
+            const allNodes = this.convertLegacySteps(this.executionData.steps);
+            this.executionTree = this.filterNodesForMode(allNodes, 'historical');
         }
         else {
             this.executionTree = [];
@@ -307,6 +321,18 @@ export class AgentExecutionMonitorComponent {
                     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,
@@ -325,7 +351,8 @@ export class AgentExecutionMonitorComponent {
                 cost: this.extractCost(node.outputData),
                 detailsMarkdown: detailsMarkdown,
                 detailsExpanded: false,
-                children: node.children ? this.convertExecutionTree(node.children, node.depth !== undefined ? node.depth + 1 : depth + 1) : undefined
+                children: node.children ? this.convertExecutionTree(node.children, node.depth !== undefined ? node.depth + 1 : depth + 1) : undefined,
+                displayMode: displayMode
             };
             return treeNode;
         });
@@ -662,16 +689,25 @@ export class AgentExecutionMonitorComponent {
             totalDuration: 0,
             totalPrompts: 0
         };
+        // Check if we have agent run data with token information
+        if (this.executionData?.agentRun) {
+            // Use token data from agent run if available
+            this.stats.totalTokens = this.executionData.agentRun.TotalTokensUsed || 0;
+            this.stats.totalCost = this.executionData.agentRun.TotalCost || 0;
+        }
         const processNode = (node) => {
             this.stats.totalSteps++;
             if (node.status === 'completed')
                 this.stats.completedSteps++;
             if (node.status === 'failed')
                 this.stats.failedSteps++;
-            if (node.tokensUsed)
-                this.stats.totalTokens += node.tokensUsed;
-            if (node.cost)
-                this.stats.totalCost += node.cost;
+            // 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;
@@ -1028,6 +1064,26 @@ export class AgentExecutionMonitorComponent {
         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
      */
@@ -1064,6 +1120,22 @@ export class AgentExecutionMonitorComponent {
                 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,
@@ -1080,7 +1152,8 @@ export class AgentExecutionMonitorComponent {
             inputPreview: this.createPreview(step.inputData),
             outputPreview: this.createPreview(step.outputData),
             tokensUsed: this.extractTokens(step.outputData),
-            cost: this.extractCost(step.outputData)
+            cost: this.extractCost(step.outputData),
+            displayMode: displayMode
         };
     }
     /**
@@ -1128,6 +1201,21 @@ export class AgentExecutionMonitorComponent {
             }
         }
     }
+    /**
+     * 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
      */
@@ -1154,7 +1242,7 @@ export class AgentExecutionMonitorComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.executionTreeContainer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.executionNodesContainer = _t.first);
-        } }, inputs: { mode: "mode", executionData: "executionData", autoExpand: "autoExpand" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 38, vars: 15, consts: [["executionTreeContainer", ""], ["executionNodesContainer", ""], [1, "execution-monitor"], [1, "monitor-header"], [1, "header-title"], [1, "fa-solid", "fa-diagram-project"], [1, "live-indicator"], [1, "current-status"], [1, "execution-tree", 3, "scroll", "click"], [1, "nodes-container"], [1, "empty-state"], [1, "monitor-footer"], [1, "stats-grid"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "failed-count"], [1, "step-types"], [1, "pulse"], [1, "status-label"], [1, "agent-path"], [1, "step-name"], [1, "fa-solid", "fa-hourglass-start"], [1, "type-badge"]], template: function AgentExecutionMonitorComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, 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);
@@ -1163,41 +1251,41 @@ export class AgentExecutionMonitorComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(6, AgentExecutionMonitorComponent_Conditional_6_Template, 3, 0, "span", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, AgentExecutionMonitorComponent_Conditional_7_Template, 7, 2, "div", 7);
+            i0.ɵɵtemplate(7, AgentExecutionMonitorComponent_Conditional_7_Template, 7, 2, "div", 7)(8, AgentExecutionMonitorComponent_Conditional_8_Template, 3, 1, "button", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 8, 0);
-            i0.ɵɵlistener("scroll", function AgentExecutionMonitorComponent_Template_div_scroll_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onScroll($event)); })("click", function AgentExecutionMonitorComponent_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onUserInteraction()); });
-            i0.ɵɵelementStart(10, "div", 9, 1);
-            i0.ɵɵtemplate(12, AgentExecutionMonitorComponent_Conditional_12_Template, 4, 0, "div", 10);
+            i0.ɵɵ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(13, "div", 11)(14, "div", 12)(15, "div", 13)(16, "span", 14);
-            i0.ɵɵtext(17, "Steps");
+            i0.ɵɵelementStart(14, "div", 12)(15, "div", 13)(16, "div", 14)(17, "span", 15);
+            i0.ɵɵtext(18, "Steps");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "span", 15);
-            i0.ɵɵtext(19);
-            i0.ɵɵtemplate(20, AgentExecutionMonitorComponent_Conditional_20_Template, 2, 1, "span", 16);
+            i0.ɵɵelementStart(19, "span", 16);
+            i0.ɵɵtext(20);
+            i0.ɵɵtemplate(21, AgentExecutionMonitorComponent_Conditional_21_Template, 2, 1, "span", 17);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "div", 13)(22, "span", 14);
-            i0.ɵɵtext(23, "Prompts");
+            i0.ɵɵelementStart(22, "div", 14)(23, "span", 15);
+            i0.ɵɵtext(24, "Prompts");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "span", 15);
-            i0.ɵɵtext(25);
+            i0.ɵɵelementStart(25, "span", 16);
+            i0.ɵɵtext(26);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(26, "div", 13)(27, "span", 14);
-            i0.ɵɵtext(28, "Tokens");
+            i0.ɵɵelementStart(27, "div", 14)(28, "span", 15);
+            i0.ɵɵtext(29, "Tokens");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "span", 15);
-            i0.ɵɵtext(30);
+            i0.ɵɵelementStart(30, "span", 16);
+            i0.ɵɵtext(31);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(31, "div", 13)(32, "span", 14);
-            i0.ɵɵtext(33, "Cost");
+            i0.ɵɵelementStart(32, "div", 14)(33, "span", 15);
+            i0.ɵɵtext(34, "Cost");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "span", 15);
-            i0.ɵɵtext(35);
+            i0.ɵɵelementStart(35, "span", 16);
+            i0.ɵɵtext(36);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(36, AgentExecutionMonitorComponent_Conditional_36_Template, 5, 1, "div", 13);
+            i0.ɵɵtemplate(37, AgentExecutionMonitorComponent_Conditional_37_Template, 5, 1, "div", 14);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(37, AgentExecutionMonitorComponent_Conditional_37_Template, 3, 0, "div", 17);
+            i0.ɵɵtemplate(38, AgentExecutionMonitorComponent_Conditional_38_Template, 3, 0, "div", 18);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassProp("live-mode", ctx.mode === "live");
@@ -1206,13 +1294,15 @@ export class AgentExecutionMonitorComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.currentStep && ctx.mode === "live" ? 7 : -1);
             i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.mode === "historical" && ctx.runId && ctx.isExecutionComplete() ? 8 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵclassProp("has-content", ctx.executionTree.length > 0);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.executionTree.length === 0 ? 12 : -1);
+            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 ? 20 : -1);
+            i0.ɵɵconditional(ctx.stats.failedSteps > 0 ? 21 : -1);
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate(ctx.stats.totalPrompts);
             i0.ɵɵadvance(5);
@@ -1220,10 +1310,10 @@ export class AgentExecutionMonitorComponent {
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate1("$", ctx.stats.totalCost.toFixed(4), "");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.stats.totalDuration ? 36 : -1);
+            i0.ɵɵconditional(ctx.stats.totalDuration ? 37 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.getStepTypes().length > 0 ? 37 : -1);
-        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            overflow: hidden;\n        }\n        \n        .execution-monitor[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            background: #fff;\n            border: 1px solid #e0e0e0;\n            border-radius: 8px;\n            overflow: hidden;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        \n\n        .monitor-header[_ngcontent-%COMP%] {\n            padding: 16px;\n            background: #f8f9fa;\n            border-bottom: 1px solid #e0e0e0;\n        }\n\n        .header-title[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n            margin-bottom: 8px;\n        }\n\n        .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            color: #2196f3;\n        }\n\n        .live-indicator[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 4px 8px;\n            background: #ff4444;\n            color: white;\n            border-radius: 4px;\n            font-size: 11px;\n            font-weight: 600;\n            letter-spacing: 0.5px;\n        }\n\n        .pulse[_ngcontent-%COMP%] {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            background: white;\n            border-radius: 50%;\n            animation: _ngcontent-%COMP%_pulse 2s infinite;\n        }\n\n        @keyframes _ngcontent-%COMP%_pulse {\n            0% { opacity: 1; transform: scale(1); }\n            50% { opacity: 0.5; transform: scale(0.8); }\n            100% { opacity: 1; transform: scale(1); }\n        }\n\n        .current-status[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 13px;\n            color: #666;\n        }\n\n        .status-label[_ngcontent-%COMP%] {\n            font-weight: 500;\n        }\n\n        .agent-path[_ngcontent-%COMP%] {\n            color: #999;\n        }\n\n        .step-name[_ngcontent-%COMP%] {\n            color: #1a1a1a;\n            font-weight: 500;\n        }\n\n        \n\n        .execution-tree[_ngcontent-%COMP%] {\n            flex: 1;\n            overflow-y: auto;\n            overflow-x: auto;\n            padding: 16px;\n            min-height: 0;\n        }\n        \n        .nodes-container[_ngcontent-%COMP%] {\n            \n\n        }\n\n        .empty-state[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            color: #999;\n            text-align: center;\n        }\n\n        .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 48px;\n            margin-bottom: 16px;\n            opacity: 0.5;\n        }\n\n        .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n            margin: 0;\n            font-size: 14px;\n        }\n\n        \n\n        .tree-node[_ngcontent-%COMP%] {\n            margin-bottom: 4px;\n        }\n\n        .node-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 12px;\n            background: #f8f9fa;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            user-select: none;\n        }\n\n        .node-header[_ngcontent-%COMP%]:hover {\n            background: #e8f0fe;\n            border-color: #2196f3;\n        }\n\n        .expand-icon[_ngcontent-%COMP%], .expand-spacer[_ngcontent-%COMP%] {\n            width: 16px;\n            text-align: center;\n            color: #666;\n            font-size: 10px;\n        }\n\n        .status-icon[_ngcontent-%COMP%] {\n            width: 20px;\n            text-align: center;\n            font-size: 14px;\n        }\n\n        .status-pending[_ngcontent-%COMP%] { color: #999; }\n        .status-running[_ngcontent-%COMP%] { color: #2196f3; }\n        .status-completed[_ngcontent-%COMP%] { color: #4caf50; }\n        .status-failed[_ngcontent-%COMP%] { color: #f44336; }\n\n        .type-icon[_ngcontent-%COMP%] {\n            width: 20px;\n            text-align: center;\n            font-size: 14px;\n            color: #666;\n        }\n\n        .node-name[_ngcontent-%COMP%] {\n            flex: 1;\n            font-size: 13px;\n            font-weight: 500;\n            color: #1a1a1a;\n        }\n\n        .node-duration[_ngcontent-%COMP%] {\n            font-size: 12px;\n            color: #666;\n            font-weight: 500;\n        }\n\n        .node-metrics[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 12px;\n            font-size: 12px;\n        }\n\n        .tokens[_ngcontent-%COMP%] {\n            color: #666;\n        }\n\n        .cost[_ngcontent-%COMP%] {\n            color: #2196f3;\n            font-weight: 500;\n        }\n\n        \n\n        .node-details[_ngcontent-%COMP%] {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f5f5f5;\n            border-radius: 4px;\n            font-size: 12px;\n        }\n\n        .detail-section[_ngcontent-%COMP%] {\n            margin-bottom: 8px;\n        }\n\n        .detail-section[_ngcontent-%COMP%]:last-child {\n            margin-bottom: 0;\n        }\n\n        .detail-section.error[_ngcontent-%COMP%] {\n            color: #d32f2f;\n        }\n\n        .detail-label[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            font-weight: 600;\n            margin-bottom: 4px;\n            color: #666;\n        }\n\n        .detail-section.error[_ngcontent-%COMP%]   .detail-label[_ngcontent-%COMP%] {\n            color: #d32f2f;\n        }\n\n        .detail-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 12px;\n        }\n\n        .detail-content[_ngcontent-%COMP%] {\n            padding-left: 18px;\n            color: #333;\n            line-height: 1.4;\n            white-space: pre-wrap;\n            word-break: break-word;\n        }\n\n        \n\n        .monitor-footer[_ngcontent-%COMP%] {\n            padding: 16px;\n            background: #f8f9fa;\n            border-top: 1px solid #e0e0e0;\n        }\n\n        .stats-grid[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n            gap: 16px;\n            margin-bottom: 12px;\n        }\n\n        .stat-item[_ngcontent-%COMP%] {\n            text-align: center;\n        }\n\n        .stat-label[_ngcontent-%COMP%] {\n            display: block;\n            font-size: 11px;\n            color: #666;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            margin-bottom: 4px;\n        }\n\n        .stat-value[_ngcontent-%COMP%] {\n            display: block;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n\n        .failed-count[_ngcontent-%COMP%] {\n            color: #f44336;\n            font-size: 12px;\n            font-weight: normal;\n        }\n\n        .step-types[_ngcontent-%COMP%] {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            justify-content: center;\n        }\n\n        .type-badge[_ngcontent-%COMP%] {\n            display: inline-block;\n            padding: 4px 8px;\n            background: #e3f2fd;\n            color: #1976d2;\n            border-radius: 4px;\n            font-size: 12px;\n            font-weight: 500;\n        }\n\n        \n\n        .details-toggle[_ngcontent-%COMP%] {\n            margin-left: 8px;\n            padding: 2px 6px;\n            background: transparent;\n            border: 1px solid #ddd;\n            border-radius: 3px;\n            cursor: pointer;\n            font-size: 10px;\n            color: #666;\n            transition: all 0.2s ease;\n        }\n        \n        .details-toggle[_ngcontent-%COMP%]:hover {\n            background: #f0f0f0;\n            border-color: #2196f3;\n            color: #2196f3;\n        }\n        \n        \n\n        .markdown-details[_ngcontent-%COMP%] {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f9fafb;\n            border-left: 3px solid #2196f3;\n            border-radius: 0 4px 4px 0;\n            font-size: 13px;\n            line-height: 1.6;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n            font-size: 16px;\n            margin: 0 0 8px 0;\n            color: #1a1a1a;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            font-size: 14px;\n            margin: 8px 0 6px 0;\n            color: #333;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n            font-size: 13px;\n            margin: 6px 0 4px 0;\n            color: #555;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n            margin: 4px 0;\n            padding-left: 20px;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n            margin: 2px 0;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n            background: #e8f0fe;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-family: 'Consolas', 'Monaco', monospace;\n            font-size: 12px;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n            background: #f5f5f5;\n            padding: 8px;\n            border-radius: 4px;\n            overflow-x: auto;\n            margin: 8px 0;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n            background: none;\n            padding: 0;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n        \n        .markdown-details[_ngcontent-%COMP%]   em[_ngcontent-%COMP%] {\n            font-style: italic;\n            color: #555;\n        }\n\n        \n\n        .execution-history-toggle[_ngcontent-%COMP%] {\n            background: transparent;\n            border: none;\n            padding: 4px 8px;\n            margin-left: 4px;\n            cursor: pointer;\n            color: #666;\n            font-size: 12px;\n            border-radius: 3px;\n            transition: all 0.2s ease;\n        }\n        \n        .execution-history-toggle[_ngcontent-%COMP%]:hover {\n            background: #e3f2fd;\n            color: #2196f3;\n        }\n\n        \n\n        @media (max-width: 768px) {\n            .monitor-header[_ngcontent-%COMP%] {\n                padding: 12px;\n            }\n\n            .execution-tree[_ngcontent-%COMP%] {\n                padding: 12px;\n            }\n\n            .node-header[_ngcontent-%COMP%] {\n                padding: 6px 8px;\n                gap: 6px;\n            }\n\n            .node-metrics[_ngcontent-%COMP%] {\n                display: none;\n            }\n            \n            .markdown-details[_ngcontent-%COMP%] {\n                margin-left: 20px;\n                font-size: 12px;\n            }\n        }"], changeDetection: 0 }); }
+            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,
@@ -1248,6 +1338,12 @@ export class AgentExecutionMonitorComponent {
                         <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 -->
@@ -1309,13 +1405,19 @@ export class AgentExecutionMonitorComponent {
                 }
             </div>
         </div>
-    `, styles: ["\n        :host {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            overflow: hidden;\n        }\n        \n        .execution-monitor {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            background: #fff;\n            border: 1px solid #e0e0e0;\n            border-radius: 8px;\n            overflow: hidden;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        /* Header */\n        .monitor-header {\n            padding: 16px;\n            background: #f8f9fa;\n            border-bottom: 1px solid #e0e0e0;\n        }\n\n        .header-title {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n            margin-bottom: 8px;\n        }\n\n        .header-title i {\n            color: #2196f3;\n        }\n\n        .live-indicator {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 4px 8px;\n            background: #ff4444;\n            color: white;\n            border-radius: 4px;\n            font-size: 11px;\n            font-weight: 600;\n            letter-spacing: 0.5px;\n        }\n\n        .pulse {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            background: white;\n            border-radius: 50%;\n            animation: pulse 2s infinite;\n        }\n\n        @keyframes pulse {\n            0% { opacity: 1; transform: scale(1); }\n            50% { opacity: 0.5; transform: scale(0.8); }\n            100% { opacity: 1; transform: scale(1); }\n        }\n\n        .current-status {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 13px;\n            color: #666;\n        }\n\n        .status-label {\n            font-weight: 500;\n        }\n\n        .agent-path {\n            color: #999;\n        }\n\n        .step-name {\n            color: #1a1a1a;\n            font-weight: 500;\n        }\n\n        /* Execution Tree */\n        .execution-tree {\n            flex: 1;\n            overflow-y: auto;\n            overflow-x: auto;\n            padding: 16px;\n            min-height: 0;\n        }\n        \n        .nodes-container {\n            /* No extra padding needed, indentation handled by node margins */\n        }\n\n        .empty-state {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            color: #999;\n            text-align: center;\n        }\n\n        .empty-state i {\n            font-size: 48px;\n            margin-bottom: 16px;\n            opacity: 0.5;\n        }\n\n        .empty-state p {\n            margin: 0;\n            font-size: 14px;\n        }\n\n        /* Tree Nodes */\n        .tree-node {\n            margin-bottom: 4px;\n        }\n\n        .node-header {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 12px;\n            background: #f8f9fa;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            user-select: none;\n        }\n\n        .node-header:hover {\n            background: #e8f0fe;\n            border-color: #2196f3;\n        }\n\n        .expand-icon, .expand-spacer {\n            width: 16px;\n            text-align: center;\n            color: #666;\n            font-size: 10px;\n        }\n\n        .status-icon {\n            width: 20px;\n            text-align: center;\n            font-size: 14px;\n        }\n\n        .status-pending { color: #999; }\n        .status-running { color: #2196f3; }\n        .status-completed { color: #4caf50; }\n        .status-failed { color: #f44336; }\n\n        .type-icon {\n            width: 20px;\n            text-align: center;\n            font-size: 14px;\n            color: #666;\n        }\n\n        .node-name {\n            flex: 1;\n            font-size: 13px;\n            font-weight: 500;\n            color: #1a1a1a;\n        }\n\n        .node-duration {\n            font-size: 12px;\n            color: #666;\n            font-weight: 500;\n        }\n\n        .node-metrics {\n            display: flex;\n            gap: 12px;\n            font-size: 12px;\n        }\n\n        .tokens {\n            color: #666;\n        }\n\n        .cost {\n            color: #2196f3;\n            font-weight: 500;\n        }\n\n        /* Node Details */\n        .node-details {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f5f5f5;\n            border-radius: 4px;\n            font-size: 12px;\n        }\n\n        .detail-section {\n            margin-bottom: 8px;\n        }\n\n        .detail-section:last-child {\n            margin-bottom: 0;\n        }\n\n        .detail-section.error {\n            color: #d32f2f;\n        }\n\n        .detail-label {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            font-weight: 600;\n            margin-bottom: 4px;\n            color: #666;\n        }\n\n        .detail-section.error .detail-label {\n            color: #d32f2f;\n        }\n\n        .detail-label i {\n            font-size: 12px;\n        }\n\n        .detail-content {\n            padding-left: 18px;\n            color: #333;\n            line-height: 1.4;\n            white-space: pre-wrap;\n            word-break: break-word;\n        }\n\n        /* Footer */\n        .monitor-footer {\n            padding: 16px;\n            background: #f8f9fa;\n            border-top: 1px solid #e0e0e0;\n        }\n\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n            gap: 16px;\n            margin-bottom: 12px;\n        }\n\n        .stat-item {\n            text-align: center;\n        }\n\n        .stat-label {\n            display: block;\n            font-size: 11px;\n            color: #666;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            margin-bottom: 4px;\n        }\n\n        .stat-value {\n            display: block;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n\n        .failed-count {\n            color: #f44336;\n            font-size: 12px;\n            font-weight: normal;\n        }\n\n        .step-types {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            justify-content: center;\n        }\n\n        .type-badge {\n            display: inline-block;\n            padding: 4px 8px;\n            background: #e3f2fd;\n            color: #1976d2;\n            border-radius: 4px;\n            font-size: 12px;\n            font-weight: 500;\n        }\n\n        /* Details Toggle Button */\n        .details-toggle {\n            margin-left: 8px;\n            padding: 2px 6px;\n            background: transparent;\n            border: 1px solid #ddd;\n            border-radius: 3px;\n            cursor: pointer;\n            font-size: 10px;\n            color: #666;\n            transition: all 0.2s ease;\n        }\n        \n        .details-toggle:hover {\n            background: #f0f0f0;\n            border-color: #2196f3;\n            color: #2196f3;\n        }\n        \n        /* Markdown Details Section */\n        .markdown-details {\n            margin: 8px 0 8px 44px;\n            padding: 12px;\n            background: #f9fafb;\n            border-left: 3px solid #2196f3;\n            border-radius: 0 4px 4px 0;\n            font-size: 13px;\n            line-height: 1.6;\n        }\n        \n        .markdown-details h2 {\n            font-size: 16px;\n            margin: 0 0 8px 0;\n            color: #1a1a1a;\n        }\n        \n        .markdown-details h3 {\n            font-size: 14px;\n            margin: 8px 0 6px 0;\n            color: #333;\n        }\n        \n        .markdown-details h4 {\n            font-size: 13px;\n            margin: 6px 0 4px 0;\n            color: #555;\n        }\n        \n        .markdown-details ul {\n            margin: 4px 0;\n            padding-left: 20px;\n        }\n        \n        .markdown-details li {\n            margin: 2px 0;\n        }\n        \n        .markdown-details code {\n            background: #e8f0fe;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-family: 'Consolas', 'Monaco', monospace;\n            font-size: 12px;\n        }\n        \n        .markdown-details pre {\n            background: #f5f5f5;\n            padding: 8px;\n            border-radius: 4px;\n            overflow-x: auto;\n            margin: 8px 0;\n        }\n        \n        .markdown-details pre code {\n            background: none;\n            padding: 0;\n        }\n        \n        .markdown-details strong {\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n        \n        .markdown-details em {\n            font-style: italic;\n            color: #555;\n        }\n\n        /* Button styling for execution history toggle */\n        .execution-history-toggle {\n            background: transparent;\n            border: none;\n            padding: 4px 8px;\n            margin-left: 4px;\n            cursor: pointer;\n            color: #666;\n            font-size: 12px;\n            border-radius: 3px;\n            transition: all 0.2s ease;\n        }\n        \n        .execution-history-toggle:hover {\n            background: #e3f2fd;\n            color: #2196f3;\n        }\n\n        /* Responsive */\n        @media (max-width: 768px) {\n            .monitor-header {\n                padding: 12px;\n            }\n\n            .execution-tree {\n                padding: 12px;\n            }\n\n            .node-header {\n                padding: 6px 8px;\n                gap: 6px;\n            }\n\n            .node-metrics {\n                display: none;\n            }\n            \n            .markdown-details {\n                margin-left: 20px;\n                font-size: 12px;\n            }\n        }\n    "] }]
+    `, styles: ["\n        :host {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            overflow: hidden;\n        }\n        \n        .execution-monitor {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            background: #fff;\n            border: 1px solid #e0e0e0;\n            border-radius: 8px;\n            overflow: hidden;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        /* Header */\n        .monitor-header {\n            padding: 16px;\n            background: #f8f9fa;\n            border-bottom: 1px solid #e0e0e0;\n        }\n\n        .header-title {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n            margin-bottom: 8px;\n        }\n\n        .header-title i {\n            color: #2196f3;\n        }\n\n        .live-indicator {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 4px 8px;\n            background: #ff4444;\n            color: white;\n            border-radius: 4px;\n            font-size: 11px;\n            font-weight: 600;\n            letter-spacing: 0.5px;\n        }\n\n        .pulse {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            background: white;\n            border-radius: 50%;\n            animation: pulse 2s infinite;\n        }\n\n        @keyframes pulse {\n            0% { opacity: 1; transform: scale(1); }\n            50% { opacity: 0.5; transform: scale(0.8); }\n            100% { opacity: 1; transform: scale(1); }\n        }\n\n        .current-status {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 13px;\n            color: #666;\n        }\n\n        .status-label {\n            font-weight: 500;\n        }\n\n        .agent-path {\n            color: #999;\n        }\n\n        .step-name {\n            color: #1a1a1a;\n            font-weight: 500;\n        }\n\n        /* Execution Tree */\n        .execution-tree {\n            flex: 1;\n            overflow-y: auto;\n            overflow-x: auto;\n            padding: 16px;\n            min-height: 0;\n        }\n        \n        .nodes-container {\n            /* No extra padding needed, indentation handled by node margins */\n        }\n\n        .empty-state {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            color: #999;\n            text-align: center;\n        }\n\n        .empty-state i {\n            font-size: 48px;\n            margin-bottom: 16px;\n            opacity: 0.5;\n        }\n\n        .empty-state p {\n            margin: 0;\n            font-size: 14px;\n        }\n\n        /* Tree Nodes */\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']
@@ -1323,5 +1425,5 @@ export class AgentExecutionMonitorComponent {
             type: ViewChild,
             args: ['executionNodesContainer', { read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentExecutionMonitorComponent, { className: "AgentExecutionMonitorComponent", filePath: "src/lib/custom/ai-test-harness/agent-execution-monitor.component.ts", lineNumber: 589 }); })();
+(() => { (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