@memberjunction/ng-core-entity-forms 2.77.0 → 2.79.0

package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js

@@ -1,6 +1,7 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Subject, combineLatest } from 'rxjs';
-import { takeUntil, map, shareReplay } from 'rxjs/operators';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Subject, combineLatest, interval, of, from } from 'rxjs';
+import { takeUntil, map, shareReplay, switchMap, filter } from 'rxjs/operators';
+import { RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "./ai-agent-run-data.service";
 function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
@@ -34,8 +35,9 @@ function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_contain
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const child_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", child_r5.children);
+    i0.ɵɵproperty("ngForOf", child_r5.children)("ngForTrackBy", ctx_r2.trackByItemId);
 } }
 function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -43,7 +45,7 @@ function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_contain
     i0.ɵɵelementStart(1, "mj-ai-agent-run-step-node", 8);
     i0.ɵɵlistener("itemClick", function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_container_3_ng_container_1_Template_mj_ai_agent_run_step_node_itemClick_1_listener() { const child_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.selectItem(child_r5)); })("expandToggle", function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_container_3_ng_container_1_Template_mj_ai_agent_run_step_node_expandToggle_1_listener($event) { const child_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.toggleItemExpansion(child_r5, $event)); })("navigateToEntity", function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_container_3_ng_container_1_Template_mj_ai_agent_run_step_node_navigateToEntity_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.navigateToEntity.emit($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(2, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_container_3_ng_container_1_div_2_Template, 2, 1, "div", 19);
+    i0.ɵɵtemplate(2, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_container_3_ng_container_1_div_2_Template, 2, 2, "div", 19);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const child_r5 = ctx.$implicit;
@@ -59,8 +61,9 @@ function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_contain
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const item_r2 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", item_r2.children);
+    i0.ɵɵproperty("ngForOf", item_r2.children)("ngForTrackBy", ctx_r2.trackByItemId);
 } }
 function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_mj_ai_agent_run_timeline_4_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
@@ -73,7 +76,7 @@ function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_mj_ai_agen
 } }
 function AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵtemplate(1, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_div_1_Template, 3, 0, "div", 11)(2, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_div_2_Template, 3, 0, "div", 12)(3, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_container_3_Template, 2, 1, "ng-container", 13)(4, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_mj_ai_agent_run_timeline_4_Template, 1, 2, "mj-ai-agent-run-timeline", 14);
+    i0.ɵɵtemplate(1, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_div_1_Template, 3, 0, "div", 11)(2, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_div_2_Template, 3, 0, "div", 12)(3, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_ng_container_3_Template, 2, 2, "ng-container", 13)(4, AIAgentRunTimelineComponent_div_0_div_1_ng_container_1_div_2_mj_ai_agent_run_timeline_4_Template, 1, 2, "mj-ai-agent-run-timeline", 14);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r2 = i0.ɵɵnextContext().$implicit;
@@ -108,8 +111,9 @@ function AIAgentRunTimelineComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const items_r9 = i0.ɵɵnextContext().ngIf;
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", items_r9);
+    i0.ɵɵproperty("ngForOf", items_r9)("ngForTrackBy", ctx_r2.trackByItemId);
 } }
 function AIAgentRunTimelineComponent_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 22);
@@ -120,7 +124,7 @@ function AIAgentRunTimelineComponent_div_0_div_2_Template(rf, ctx) { if (rf & 1)
 } }
 function AIAgentRunTimelineComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵtemplate(1, AIAgentRunTimelineComponent_div_0_div_1_Template, 2, 1, "div", 4)(2, AIAgentRunTimelineComponent_div_0_div_2_Template, 4, 0, "div", 5);
+    i0.ɵɵtemplate(1, AIAgentRunTimelineComponent_div_0_div_1_Template, 2, 2, "div", 4)(2, AIAgentRunTimelineComponent_div_0_div_2_Template, 4, 0, "div", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const items_r9 = ctx.ngIf;
@@ -148,12 +152,14 @@ function AIAgentRunTimelineComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r2.error);
 } }
 export class AIAgentRunTimelineComponent {
-    constructor(dataService) {
+    constructor(dataService, cdr) {
         this.dataService = dataService;
+        this.cdr = cdr;
         this.autoRefresh = false;
-        this.refreshInterval = 5000;
+        this.refreshInterval = 30000; // Minimum 30 seconds
         this.itemSelected = new EventEmitter();
         this.navigateToEntity = new EventEmitter();
+        this.agentRunCompleted = new EventEmitter();
         this.destroy$ = new Subject();
         // Public observables from service
         this.steps$ = this.dataService.steps$;
@@ -163,6 +169,7 @@ export class AIAgentRunTimelineComponent {
         this.loading = false;
         this.error = null;
         this.selectedItem = null;
+        this.refreshSubscription = null;
         // Combine all data sources to build timeline
         this.timelineItems$ = combineLatest([
             this.steps$,
@@ -193,20 +200,46 @@ export class AIAgentRunTimelineComponent {
         }
     }
     startAutoRefresh() {
-        this.refreshTimer = setInterval(() => {
-            // Check if we should still be refreshing
-            this.dataService.steps$.pipe(takeUntil(this.destroy$)).subscribe(steps => {
-                const hasRunningSteps = steps.some(s => s.Status === 'Running');
-                if (!hasRunningSteps && this.refreshTimer) {
-                    clearInterval(this.refreshTimer);
-                    this.refreshTimer = null;
-                }
-                else if (hasRunningSteps && this.aiAgentRunId) {
-                    // Trigger parent to reload data
-                    this.dataService.loadAgentRunData(this.aiAgentRunId);
-                }
-            });
-        }, this.refreshInterval);
+        // Ensure minimum 30 second interval
+        const refreshIntervalMs = Math.max(30000, this.refreshInterval);
+        // Don't create multiple subscriptions - subscribe once and use interval
+        this.refreshSubscription = interval(refreshIntervalMs)
+            .pipe(takeUntil(this.destroy$), 
+        // Get the latest agent run status
+        switchMap(() => {
+            if (!this.aiAgentRunId)
+                return of(null);
+            const rv = new RunView();
+            return from(rv.RunView({
+                EntityName: 'MJ: AI Agent Runs',
+                ExtraFilter: `ID = '${this.aiAgentRunId}'`,
+                ResultType: 'simple'
+            }));
+        }), filter(result => result !== null && result.Success && result.Results?.length > 0), map(result => result.Results[0]))
+            .subscribe(agentRun => {
+            // Check if the agent run is still running
+            if (agentRun.Status === 'Running') {
+                // Reload data
+                this.dataService.loadAgentRunData(this.aiAgentRunId);
+            }
+            else {
+                // Agent run completed/failed - stop refresh
+                console.log(`Agent run ${agentRun.Status} - stopping auto-refresh`);
+                this.stopAutoRefresh();
+                // Emit event to parent to update status
+                this.agentRunCompleted.emit(agentRun.Status);
+            }
+        });
+    }
+    stopAutoRefresh() {
+        if (this.refreshSubscription) {
+            this.refreshSubscription.unsubscribe();
+            this.refreshSubscription = null;
+        }
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer);
+            this.refreshTimer = null;
+        }
     }
     // This method is now just for compatibility - actual loading is done by parent
     async loadData() {
@@ -319,11 +352,15 @@ export class AIAgentRunTimelineComponent {
             // Create timeline items
             item.children = data.steps.map(step => this.createTimelineItemFromStep(step, item.level + 1, data.promptRuns));
             item.childrenLoaded = true;
+            // Trigger change detection after updating the data
+            this.cdr.markForCheck();
         }
         catch (error) {
             console.error('🔄 Timeline: Error loading sub-agent children:', error);
             item.hasNoChildren = true;
             item.childrenLoaded = true;
+            // Trigger change detection for error state
+            this.cdr.markForCheck();
         }
     }
     navigateToSubRun(runId, event) {
@@ -338,8 +375,14 @@ export class AIAgentRunTimelineComponent {
         event.stopPropagation();
         this.navigateToEntity.emit({ entityName: 'MJ: AI Prompt Runs', recordId: runId });
     }
-    static { this.ɵfac = function AIAgentRunTimelineComponent_Factory(t) { return new (t || AIAgentRunTimelineComponent)(i0.ɵɵdirectiveInject(i1.AIAgentRunDataService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunTimelineComponent, selectors: [["mj-ai-agent-run-timeline"]], inputs: { aiAgentRunId: "aiAgentRunId", autoRefresh: "autoRefresh", refreshInterval: "refreshInterval" }, outputs: { itemSelected: "itemSelected", navigateToEntity: "navigateToEntity" }, decls: 4, vars: 5, consts: [["class", "timeline-container", 4, "ngIf"], ["class", "loading-state", 4, "ngIf"], ["class", "error-state", 4, "ngIf"], [1, "timeline-container"], ["class", "timeline", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], [1, "timeline"], [4, "ngFor", "ngForOf"], [3, "itemClick", "expandToggle", "navigateToEntity", "item", "isSelected"], ["class", "sub-timeline", 4, "ngIf"], [1, "sub-timeline"], ["class", "loading-children", 4, "ngIf"], ["class", "no-children", 4, "ngIf"], [4, "ngIf"], [3, "aiAgentRunId", "autoRefresh", "itemSelected", "navigateToEntity", 4, "ngIf"], [1, "loading-children"], [1, "fas", "fa-spinner", "fa-spin"], [1, "no-children"], [1, "fas", "fa-info-circle"], ["class", "sub-run-steps", 4, "ngIf"], [1, "sub-run-steps"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "autoRefresh"], [1, "empty-state"], [1, "fas", "fa-stream", "fa-3x"], [1, "loading-state"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], [1, "error-state"], [1, "fas", "fa-exclamation-triangle", "fa-2x"]], template: function AIAgentRunTimelineComponent_Template(rf, ctx) { if (rf & 1) {
+    /**
+     * TrackBy function for timeline items
+     */
+    trackByItemId(index, item) {
+        return item.id;
+    }
+    static { this.ɵfac = function AIAgentRunTimelineComponent_Factory(t) { return new (t || AIAgentRunTimelineComponent)(i0.ɵɵdirectiveInject(i1.AIAgentRunDataService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunTimelineComponent, selectors: [["mj-ai-agent-run-timeline"]], inputs: { aiAgentRunId: "aiAgentRunId", autoRefresh: "autoRefresh", refreshInterval: "refreshInterval" }, outputs: { itemSelected: "itemSelected", navigateToEntity: "navigateToEntity", agentRunCompleted: "agentRunCompleted" }, decls: 4, vars: 5, consts: [["class", "timeline-container", 4, "ngIf"], ["class", "loading-state", 4, "ngIf"], ["class", "error-state", 4, "ngIf"], [1, "timeline-container"], ["class", "timeline", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], [1, "timeline"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "itemClick", "expandToggle", "navigateToEntity", "item", "isSelected"], ["class", "sub-timeline", 4, "ngIf"], [1, "sub-timeline"], ["class", "loading-children", 4, "ngIf"], ["class", "no-children", 4, "ngIf"], [4, "ngIf"], [3, "aiAgentRunId", "autoRefresh", "itemSelected", "navigateToEntity", 4, "ngIf"], [1, "loading-children"], [1, "fas", "fa-spinner", "fa-spin"], [1, "no-children"], [1, "fas", "fa-info-circle"], ["class", "sub-run-steps", 4, "ngIf"], [1, "sub-run-steps"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "autoRefresh"], [1, "empty-state"], [1, "fas", "fa-stream", "fa-3x"], [1, "loading-state"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], [1, "error-state"], [1, "fas", "fa-exclamation-triangle", "fa-2x"]], template: function AIAgentRunTimelineComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, AIAgentRunTimelineComponent_div_0_Template, 3, 2, "div", 0);
             i0.ɵɵpipe(1, "async");
             i0.ɵɵtemplate(2, AIAgentRunTimelineComponent_div_2_Template, 4, 0, "div", 1)(3, AIAgentRunTimelineComponent_div_3_Template, 4, 1, "div", 2);
@@ -349,12 +392,12 @@ export class AIAgentRunTimelineComponent {
             i0.ɵɵproperty("ngIf", ctx.loading);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.error);
-        } }, styles: [".timeline-container[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.timeline[_ngcontent-%COMP%] {\n  position: relative;\n  padding-left: 40px; \n\n}\n\n.sub-timeline[_ngcontent-%COMP%] {\n  margin-left: 24px;\n  margin-top: 8px;\n  padding-left: 12px;\n  border-left: 2px dashed #e0e6ed;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #6c757d;\n  gap: 16px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.loading-children[_ngcontent-%COMP%], \n.no-children[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  margin-left: 60px;\n  color: #6c757d;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.loading-children[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n\n.no-children[_ngcontent-%COMP%] {\n  color: #868e96;\n  font-style: italic;\n}\n\n.no-children[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #adb5bd;\n}\n\n\n\n.sub-run-steps[_ngcontent-%COMP%] {\n  margin-left: 20px;\n  padding-left: 20px;\n  border-left: 2px solid #e9ecef;\n  margin-top: 8px;\n}"] }); }
+        } }, styles: [".timeline-container[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.timeline[_ngcontent-%COMP%] {\n  position: relative;\n  padding-left: 40px; \n\n}\n\n.sub-timeline[_ngcontent-%COMP%] {\n  margin-left: 24px;\n  margin-top: 8px;\n  padding-left: 12px;\n  border-left: 2px dashed #e0e6ed;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #6c757d;\n  gap: 16px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.loading-children[_ngcontent-%COMP%], \n.no-children[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  margin-left: 60px;\n  color: #6c757d;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.loading-children[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n\n.no-children[_ngcontent-%COMP%] {\n  color: #868e96;\n  font-style: italic;\n}\n\n.no-children[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #adb5bd;\n}\n\n\n\n.sub-run-steps[_ngcontent-%COMP%] {\n  margin-left: 20px;\n  padding-left: 20px;\n  border-left: 2px solid #e9ecef;\n  margin-top: 8px;\n}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunTimelineComponent, [{
         type: Component,
-        args: [{ selector: 'mj-ai-agent-run-timeline', template: "<div class=\"timeline-container\" *ngIf=\"!loading && (timelineItems$ | async) as items\">\n  <div class=\"timeline\" *ngIf=\"items.length > 0\">\n    <ng-container *ngFor=\"let item of items\">\n      <!-- Main Timeline Item -->\n      <mj-ai-agent-run-step-node\n        [item]=\"item\"\n        [isSelected]=\"selectedItem?.id === item.id\"\n        (itemClick)=\"selectItem(item)\"\n        (expandToggle)=\"toggleItemExpansion(item, $event)\"\n        (navigateToEntity)=\"navigateToEntity.emit($event)\">\n      </mj-ai-agent-run-step-node>\n      \n      <!-- Sub-Run Timeline (Recursive) -->\n      <div class=\"sub-timeline\" *ngIf=\"(item.type === 'subrun' || (item.type === 'step' && item.data?.StepType === 'Sub-Agent')) && item.isExpanded\">\n        <!-- Show loading indicator while loading children -->\n        <div class=\"loading-children\" *ngIf=\"item.type === 'step' && !item.childrenLoaded\">\n          <i class=\"fas fa-spinner fa-spin\"></i> Loading sub-agent steps...\n        </div>\n        \n        <!-- Show no children message -->\n        <div class=\"no-children\" *ngIf=\"item.type === 'step' && item.childrenLoaded && item.hasNoChildren\">\n          <i class=\"fas fa-info-circle\"></i> No sub-agent steps found\n        </div>\n        \n        <!-- For sub-agent steps that have loaded children -->\n        <ng-container *ngIf=\"item.type === 'step' && item.childrenLoaded && item.children && item.children.length > 0\">\n          <ng-container *ngFor=\"let child of item.children\">\n            <!-- Render the sub-run container with its steps -->\n            <mj-ai-agent-run-step-node\n              [item]=\"child\"\n              [isSelected]=\"selectedItem?.id === child.id\"\n              (itemClick)=\"selectItem(child)\"\n              (expandToggle)=\"toggleItemExpansion(child, $event)\"\n              (navigateToEntity)=\"navigateToEntity.emit($event)\">\n            </mj-ai-agent-run-step-node>\n            \n            <!-- Show the steps within this sub-run when expanded -->\n            <div class=\"sub-run-steps\" *ngIf=\"child.isExpanded && child.children\">\n              <ng-container *ngFor=\"let step of child.children\">\n                <mj-ai-agent-run-step-node\n                  [item]=\"step\"\n                  [isSelected]=\"selectedItem?.id === step.id\"\n                  (itemClick)=\"selectItem(step)\"\n                  (expandToggle)=\"toggleItemExpansion(step, $event)\"\n                  (navigateToEntity)=\"navigateToEntity.emit($event)\">\n                </mj-ai-agent-run-step-node>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        \n        <!-- For actual sub-run items (from the initial load) -->\n        <mj-ai-agent-run-timeline\n          *ngIf=\"item.type === 'subrun' && item.data?.ID\"\n          [aiAgentRunId]=\"item.data.ID\"\n          [autoRefresh]=\"false\"\n          (itemSelected)=\"selectItem($event)\"\n          (navigateToEntity)=\"navigateToEntity.emit($event)\">\n        </mj-ai-agent-run-timeline>\n      </div>\n    </ng-container>\n  </div>\n  \n  <div class=\"empty-state\" *ngIf=\"items.length === 0\">\n    <i class=\"fas fa-stream fa-3x\"></i>\n    <p>No execution steps found</p>\n  </div>\n</div>\n\n<div class=\"loading-state\" *ngIf=\"loading\">\n  <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n  <p>Loading timeline...</p>\n</div>\n\n<div class=\"error-state\" *ngIf=\"error\">\n  <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n  <p>{{ error }}</p>\n</div>", styles: [".timeline-container {\n  height: 100%;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.timeline {\n  position: relative;\n  padding-left: 40px; /* Add padding to accommodate expand buttons */\n}\n\n.sub-timeline {\n  margin-left: 24px;\n  margin-top: 8px;\n  padding-left: 12px;\n  border-left: 2px dashed #e0e6ed;\n}\n\n/* State Displays */\n.empty-state,\n.loading-state,\n.error-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #6c757d;\n  gap: 16px;\n}\n\n.error-state {\n  color: #dc3545;\n}\n\n/* Loading and No Children States */\n.loading-children,\n.no-children {\n  padding: 12px 20px;\n  margin-left: 60px;\n  color: #6c757d;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.loading-children i {\n  color: #2196f3;\n}\n\n.no-children {\n  color: #868e96;\n  font-style: italic;\n}\n\n.no-children i {\n  color: #adb5bd;\n}\n\n/* Sub-run steps container */\n.sub-run-steps {\n  margin-left: 20px;\n  padding-left: 20px;\n  border-left: 2px solid #e9ecef;\n  margin-top: 8px;\n}"] }]
-    }], () => [{ type: i1.AIAgentRunDataService }], { aiAgentRunId: [{
+        args: [{ selector: 'mj-ai-agent-run-timeline', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"timeline-container\" *ngIf=\"!loading && (timelineItems$ | async) as items\">\n  <div class=\"timeline\" *ngIf=\"items.length > 0\">\n    <ng-container *ngFor=\"let item of items; trackBy: trackByItemId\">\n      <!-- Main Timeline Item -->\n      <mj-ai-agent-run-step-node\n        [item]=\"item\"\n        [isSelected]=\"selectedItem?.id === item.id\"\n        (itemClick)=\"selectItem(item)\"\n        (expandToggle)=\"toggleItemExpansion(item, $event)\"\n        (navigateToEntity)=\"navigateToEntity.emit($event)\">\n      </mj-ai-agent-run-step-node>\n      \n      <!-- Sub-Run Timeline (Recursive) -->\n      <div class=\"sub-timeline\" *ngIf=\"(item.type === 'subrun' || (item.type === 'step' && item.data?.StepType === 'Sub-Agent')) && item.isExpanded\">\n        <!-- Show loading indicator while loading children -->\n        <div class=\"loading-children\" *ngIf=\"item.type === 'step' && !item.childrenLoaded\">\n          <i class=\"fas fa-spinner fa-spin\"></i> Loading sub-agent steps...\n        </div>\n        \n        <!-- Show no children message -->\n        <div class=\"no-children\" *ngIf=\"item.type === 'step' && item.childrenLoaded && item.hasNoChildren\">\n          <i class=\"fas fa-info-circle\"></i> No sub-agent steps found\n        </div>\n        \n        <!-- For sub-agent steps that have loaded children -->\n        <ng-container *ngIf=\"item.type === 'step' && item.childrenLoaded && item.children && item.children.length > 0\">\n          <ng-container *ngFor=\"let child of item.children; trackBy: trackByItemId\">\n            <!-- Render the sub-run container with its steps -->\n            <mj-ai-agent-run-step-node\n              [item]=\"child\"\n              [isSelected]=\"selectedItem?.id === child.id\"\n              (itemClick)=\"selectItem(child)\"\n              (expandToggle)=\"toggleItemExpansion(child, $event)\"\n              (navigateToEntity)=\"navigateToEntity.emit($event)\">\n            </mj-ai-agent-run-step-node>\n            \n            <!-- Show the steps within this sub-run when expanded -->\n            <div class=\"sub-run-steps\" *ngIf=\"child.isExpanded && child.children\">\n              <ng-container *ngFor=\"let step of child.children; trackBy: trackByItemId\">\n                <mj-ai-agent-run-step-node\n                  [item]=\"step\"\n                  [isSelected]=\"selectedItem?.id === step.id\"\n                  (itemClick)=\"selectItem(step)\"\n                  (expandToggle)=\"toggleItemExpansion(step, $event)\"\n                  (navigateToEntity)=\"navigateToEntity.emit($event)\">\n                </mj-ai-agent-run-step-node>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        \n        <!-- For actual sub-run items (from the initial load) -->\n        <mj-ai-agent-run-timeline\n          *ngIf=\"item.type === 'subrun' && item.data?.ID\"\n          [aiAgentRunId]=\"item.data.ID\"\n          [autoRefresh]=\"false\"\n          (itemSelected)=\"selectItem($event)\"\n          (navigateToEntity)=\"navigateToEntity.emit($event)\">\n        </mj-ai-agent-run-timeline>\n      </div>\n    </ng-container>\n  </div>\n  \n  <div class=\"empty-state\" *ngIf=\"items.length === 0\">\n    <i class=\"fas fa-stream fa-3x\"></i>\n    <p>No execution steps found</p>\n  </div>\n</div>\n\n<div class=\"loading-state\" *ngIf=\"loading\">\n  <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n  <p>Loading timeline...</p>\n</div>\n\n<div class=\"error-state\" *ngIf=\"error\">\n  <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n  <p>{{ error }}</p>\n</div>", styles: [".timeline-container {\n  height: 100%;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.timeline {\n  position: relative;\n  padding-left: 40px; /* Add padding to accommodate expand buttons */\n}\n\n.sub-timeline {\n  margin-left: 24px;\n  margin-top: 8px;\n  padding-left: 12px;\n  border-left: 2px dashed #e0e6ed;\n}\n\n/* State Displays */\n.empty-state,\n.loading-state,\n.error-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #6c757d;\n  gap: 16px;\n}\n\n.error-state {\n  color: #dc3545;\n}\n\n/* Loading and No Children States */\n.loading-children,\n.no-children {\n  padding: 12px 20px;\n  margin-left: 60px;\n  color: #6c757d;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.loading-children i {\n  color: #2196f3;\n}\n\n.no-children {\n  color: #868e96;\n  font-style: italic;\n}\n\n.no-children i {\n  color: #adb5bd;\n}\n\n/* Sub-run steps container */\n.sub-run-steps {\n  margin-left: 20px;\n  padding-left: 20px;\n  border-left: 2px solid #e9ecef;\n  margin-top: 8px;\n}"] }]
+    }], () => [{ type: i1.AIAgentRunDataService }, { type: i0.ChangeDetectorRef }], { aiAgentRunId: [{
             type: Input
         }], autoRefresh: [{
             type: Input
@@ -364,6 +407,8 @@ export class AIAgentRunTimelineComponent {
             type: Output
         }], navigateToEntity: [{
             type: Output
+        }], agentRunCompleted: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunTimelineComponent, { className: "AIAgentRunTimelineComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunTimelineComponent, { className: "AIAgentRunTimelineComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.ts", lineNumber: 34 }); })();
 //# sourceMappingURL=ai-agent-run-timeline.component.js.map

package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-agent-run-timeline.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.ts","../../../../src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.html"],"names":[],"mappings":"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"}
+{"version":3,"file":"ai-agent-run-timeline.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.ts","../../../../src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.html"],"names":[],"mappings":"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"}

package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts

@@ -12,7 +12,7 @@ export declare class AIAgentRunVisualizationComponent implements OnInit, OnDestr
     private pendingData;
     loading: boolean;
     error: string | null;
-    dataLoading: boolean;
+    private dataLoading;
     selectedItem: TimelineItem | null;
     private nodes;
     private scopes;
@@ -26,6 +26,12 @@ export declare class AIAgentRunVisualizationComponent implements OnInit, OnDestr
         startY: number;
     };
     private dragState;
+    private panState;
+    private animationFrameId;
+    private boundOnWheel;
+    private boundOnSvgMouseDown;
+    private boundOnSvgMouseMove;
+    private boundOnSvgMouseUp;
     constructor(cdr: ChangeDetectorRef, dataService: AIAgentRunDataService);
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-agent-run-visualization.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-visualization.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,SAAS,EAAa,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAI7H,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;;AAuBpE,qBAKa,gCAAiC,YAAW,MAAM,EAAE,SAAS,EAAE,aAAa;IA+CrF,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,WAAW;IA/CyB,YAAY,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC/E,YAAY,EAAG,MAAM,CAAC;IAE/B,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,WAAW,CAAwJ;IAE3K,OAAO,UAAS;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5B,WAAW,UAAQ;IAEnB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IAGzC,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,MAAM,CAAgC;IAC9C,OAAO,CAAC,WAAW,CAAgE;IAGnF,OAAO;;;;;;;MAOL;IAGF,OAAO,CAAC,SAAS,CAcf;gBAGQ,GAAG,EAAE,iBAAiB,EACtB,WAAW,EAAE,qBAAqB;IAG5C,QAAQ;IAkDR,eAAe;IA0Bf,WAAW;IAWX,OAAO,CAAC,aAAa;YA4CP,kBAAkB;IA0DhC,OAAO,CAAC,kBAAkB;YAiBZ,mBAAmB;IAiEjC,OAAO,CAAC,iBAAiB;YAwFX,kBAAkB;IA0FhC,OAAO,CAAC,aAAa;IAmDrB,OAAO,CAAC,eAAe;IA6DvB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,kBAAkB;YAWZ,kBAAkB;YAmBlB,iBAAiB;IAyB/B,OAAO,CAAC,gBAAgB;IAsCxB,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,eAAe;IAwCvB,OAAO,CAAC,WAAW,CA6BlB;IAED,OAAO,CAAC,SAAS,CAiBhB;IAGD,OAAO,CAAC,KAAK,EAAE,UAAU;IAOzB,cAAc,CAAC,KAAK,EAAE,UAAU;IAShC,cAAc,CAAC,KAAK,EAAE,UAAU;IAQhC,YAAY,CAAC,KAAK,EAAE,UAAU;IAI9B,OAAO,CAAC,eAAe;IAYvB,MAAM;IAKN,OAAO;IAKP,SAAS;IAQT,eAAe;IAKf,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAK3B,eAAe,CAAC,IAAI,EAAE,MAAM;yCAh9BvB,gCAAgC;2CAAhC,gCAAgC;CAu9B5C"}
+{"version":3,"file":"ai-agent-run-visualization.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-visualization.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,SAAS,EAAa,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAA2B,MAAM,eAAe,CAAC;AAItJ,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;;AAuBpE,qBAMa,gCAAiC,YAAW,MAAM,EAAE,SAAS,EAAE,aAAa;IAmErF,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,WAAW;IAnEyB,YAAY,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC/E,YAAY,EAAG,MAAM,CAAC;IAE/B,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,WAAW,CAAwJ;IAE3K,OAAO,UAAS;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5B,OAAO,CAAC,WAAW,CAAS;IAE5B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IAGzC,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,MAAM,CAAgC;IAC9C,OAAO,CAAC,WAAW,CAAgE;IAGnF,OAAO;;;;;;;MAOL;IAGF,OAAO,CAAC,SAAS,CAgBf;IAGF,OAAO,CAAC,QAAQ,CAMd;IAGF,OAAO,CAAC,gBAAgB,CAAuB;IAG/C,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,mBAAmB,CAAkC;IAC7D,OAAO,CAAC,mBAAmB,CAAkC;IAC7D,OAAO,CAAC,iBAAiB,CAAgC;gBAG/C,GAAG,EAAE,iBAAiB,EACtB,WAAW,EAAE,qBAAqB;IAG5C,QAAQ;IAgDR,eAAe;IA0Bf,WAAW;IAqEX,OAAO,CAAC,aAAa;YA4CP,kBAAkB;IAgEhC,OAAO,CAAC,kBAAkB;YAiBZ,mBAAmB;IAiEjC,OAAO,CAAC,iBAAiB;YAwFX,kBAAkB;IA0FhC,OAAO,CAAC,aAAa;IAmDrB,OAAO,CAAC,eAAe;IA6DvB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,kBAAkB;YAWZ,kBAAkB;YAmBlB,iBAAiB;IAyB/B,OAAO,CAAC,gBAAgB;IAsCxB,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,eAAe;IAwCvB,OAAO,CAAC,WAAW,CA6BlB;IAED,OAAO,CAAC,SAAS,CAiBhB;IAGD,OAAO,CAAC,KAAK,EAAE,UAAU;IAOzB,cAAc,CAAC,KAAK,EAAE,UAAU;IAShC,cAAc,CAAC,KAAK,EAAE,UAAU;IAQhC,YAAY,CAAC,KAAK,EAAE,UAAU;IAI9B,OAAO,CAAC,eAAe;IAYvB,MAAM;IAKN,OAAO;IAKP,SAAS;IAQT,eAAe;IAKf,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAK3B,eAAe,CAAC,IAAI,EAAE,MAAM;yCAliCvB,gCAAgC;2CAAhC,gCAAgC;CAyiC5C"}

package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { Subject, combineLatest } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import * as i0 from "@angular/core";
@@ -80,7 +80,7 @@ export class AIAgentRunVisualizationComponent {
         this.pendingData = null;
         this.loading = false; // Start with false so the container renders
         this.error = null;
-        this.dataLoading = true; // Track data loading separately
+        this.dataLoading = false; // Track data loading state from service
         this.selectedItem = null;
         // Node management
         this.nodes = new Map();
@@ -104,6 +104,21 @@ export class AIAgentRunVisualizationComponent {
             startY: 0,
             startTransform: { x: 0, y: 0 }
         };
+        // Pan state
+        this.panState = {
+            isPanning: false,
+            startX: 0,
+            startY: 0,
+            initialTranslateX: 0,
+            initialTranslateY: 0
+        };
+        // Animation frame ID for cleanup
+        this.animationFrameId = null;
+        // Bound event handlers for proper cleanup
+        this.boundOnWheel = this.onWheel.bind(this);
+        this.boundOnSvgMouseDown = this.onSvgMouseDown.bind(this);
+        this.boundOnSvgMouseMove = this.onSvgMouseMove.bind(this);
+        this.boundOnSvgMouseUp = this.onSvgMouseUp.bind(this);
         this.onMouseMove = (event) => {
             if (!this.dragState.isDragging || !this.dragState.element)
                 return;
@@ -156,6 +171,7 @@ export class AIAgentRunVisualizationComponent {
                 this.dataService.promptRuns$,
                 this.dataService.loading$
             ]).pipe(takeUntil(this.destroy$)).subscribe(([steps, subRuns, actionLogs, promptRuns, loading]) => {
+                this.dataLoading = loading;
                 if (!loading && steps && steps.length > 0) {
                     console.log('Visualization: Received data from service', {
                         steps: steps.length,
@@ -170,12 +186,10 @@ export class AIAgentRunVisualizationComponent {
                         // Store data for when view is ready
                         console.log('View not ready, storing data for later');
                         this.pendingData = { steps, subRuns, actionLogs, promptRuns };
-                        this.loading = false; // Show the container so it can render
                     }
                 }
                 else if (!loading && (!steps || steps.length === 0)) {
                     console.log('Visualization: No steps available');
-                    this.loading = false;
                     this.error = null;
                 }
             });
@@ -190,8 +204,6 @@ export class AIAgentRunVisualizationComponent {
         else {
             console.error('Visualization: No agent run ID provided');
             this.error = 'No agent run ID provided';
-            this.loading = false;
-            this.dataLoading = false;
         }
     }
     ngAfterViewInit() {
@@ -215,11 +227,61 @@ export class AIAgentRunVisualizationComponent {
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
-        // Clean up drag listeners
-        if (this.dragState.isDragging) {
-            document.removeEventListener('mousemove', this.onMouseMove);
-            document.removeEventListener('mouseup', this.onMouseUp);
+        // Clean up document-level event listeners
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseup', this.onMouseUp);
+        // Clean up SVG and all its event listeners
+        if (this.svgContainer?.nativeElement) {
+            const svg = this.svgContainer.nativeElement.querySelector('svg');
+            if (svg) {
+                // Remove all SVG event listeners with bound handlers
+                svg.removeEventListener('wheel', this.boundOnWheel);
+                svg.removeEventListener('mousedown', this.boundOnSvgMouseDown);
+                svg.removeEventListener('mousemove', this.boundOnSvgMouseMove);
+                svg.removeEventListener('mouseup', this.boundOnSvgMouseUp);
+                // Remove all node and scope event listeners
+                // We can't remove specific listeners if we don't have references to them
+                // The best approach is to clone and replace the elements, which removes all listeners
+                svg.querySelectorAll('g[id^="node-"], g[id^="scope-"]').forEach(element => {
+                    const clone = element.cloneNode(true);
+                    element.parentNode?.replaceChild(clone, element);
+                });
+                // Remove expand button listeners
+                svg.querySelectorAll('.expand-button').forEach(button => {
+                    const clone = button.cloneNode(true);
+                    button.parentNode?.replaceChild(clone, button);
+                });
+                // Clear all SVG content
+                while (svg.firstChild) {
+                    svg.removeChild(svg.firstChild);
+                }
+            }
+        }
+        // Clear data structures
+        this.nodes.clear();
+        this.scopes.clear();
+        this.connections = [];
+        // Clear any pending animation frames
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
         }
+        // Reset state
+        this.dragState = {
+            isDragging: false,
+            element: null,
+            nodeId: null,
+            startX: 0,
+            startY: 0,
+            startTransform: { x: 0, y: 0 }
+        };
+        this.panState = {
+            isPanning: false,
+            startX: 0,
+            startY: 0,
+            initialTranslateX: 0,
+            initialTranslateY: 0
+        };
     }
     initializeSVG() {
         const container = this.svgContainer?.nativeElement;
@@ -234,11 +296,11 @@ export class AIAgentRunVisualizationComponent {
             svg.setAttribute('class', 'visualization-svg');
             svg.setAttribute('width', '100%');
             svg.setAttribute('height', '100%');
-            // Add event listeners
-            svg.addEventListener('wheel', (e) => this.onWheel(e));
-            svg.addEventListener('mousedown', (e) => this.onSvgMouseDown(e));
-            svg.addEventListener('mousemove', (e) => this.onSvgMouseMove(e));
-            svg.addEventListener('mouseup', (e) => this.onSvgMouseUp(e));
+            // Add event listeners with bound handlers
+            svg.addEventListener('wheel', this.boundOnWheel);
+            svg.addEventListener('mousedown', this.boundOnSvgMouseDown);
+            svg.addEventListener('mousemove', this.boundOnSvgMouseMove);
+            svg.addEventListener('mouseup', this.boundOnSvgMouseUp);
             container.appendChild(svg);
         }
         // Add arrow marker definition
@@ -294,11 +356,15 @@ export class AIAgentRunVisualizationComponent {
             this.fitToView();
             this.loading = false;
             console.log('Visualization built successfully');
+            // Trigger change detection since we're using OnPush
+            this.cdr.markForCheck();
         }
         catch (error) {
             this.error = 'Failed to build visualization';
             console.error('Visualization error:', error);
             this.loading = false;
+            // Trigger change detection since we're using OnPush
+            this.cdr.markForCheck();
         }
     }
     clearVisualization() {
@@ -916,16 +982,16 @@ export class AIAgentRunVisualizationComponent {
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.error ? 1 : 2);
-        } }, dependencies: [i2.SplitterComponent, i2.SplitterPaneComponent, i3.AIAgentRunStepDetailComponent], styles: [".visualization-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 600px;\n  min-height: 400px;\n  position: relative;\n  background: #f5f5f5;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.loading-state[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%], .empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 0.5rem;\n  color: #666;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #c00;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2rem;\n  opacity: 0.5;\n}\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: rgba(255, 255, 255, 0.9);\n  padding: 1rem 2rem;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 10;\n}\n\n.diagram-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background: #fafafa;\n}\n\n.diagram-toolbar[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  left: 10px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: white;\n  padding: 8px 12px;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  z-index: 10;\n}\n\n.toolbar-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.zoom-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.zoom-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  border: 1px solid #ddd;\n  background: white;\n  border-radius: 3px;\n  cursor: pointer;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  transition: all 0.2s;\n}\n\n.zoom-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  border-color: #4a90e2;\n}\n\n.zoom-level[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  margin-left: 8px;\n  font-family: monospace;\n}\n\n.visualization-svg[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  cursor: grab;\n}\n\n.visualization-svg[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n\n\n[_nghost-%COMP%]     .step-node {\n  cursor: pointer;\n  transition: transform 0.2s;\n}\n\n[_nghost-%COMP%]     .step-node:hover {\n  transform: scale(1.02);\n}\n\n[_nghost-%COMP%]     .step-node.dragging {\n  opacity: 0.8;\n  cursor: move;\n}\n\n[_nghost-%COMP%]     .step-node rect {\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\n}\n\n[_nghost-%COMP%]     .step-node:hover rect {\n  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));\n}\n\n[_nghost-%COMP%]     .scope-container {\n  cursor: pointer;\n}\n\n[_nghost-%COMP%]     .scope-container rect {\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\n}\n\n[_nghost-%COMP%]     .expand-button:hover circle {\n  fill: #e3f2fd;\n}\n\n[_nghost-%COMP%]     .connections-group path {\n  transition: stroke-width 0.2s;\n}\n\n[_nghost-%COMP%]     .connections-group path:hover {\n  stroke-width: 3;\n}\n\n\n\n[_nghost-%COMP%]     .k-splitter {\n  border: none;\n}\n\n[_nghost-%COMP%]     .k-splitter-pane {\n  overflow: visible;\n}\n\n[_nghost-%COMP%]     .k-splitbar {\n  background: #e0e6ed;\n  width: 4px;\n}\n\n[_nghost-%COMP%]     .k-splitbar:hover {\n  background: #c1c9d2;\n}\n\n[_nghost-%COMP%]     .k-splitbar-draggable-horizontal {\n  cursor: col-resize;\n}\n\n\n\n[_nghost-%COMP%]     .step-node[data-type=\"prompt\"] rect {\n  fill: #e3f2fd;\n}\n\n[_nghost-%COMP%]     .step-node[data-type=\"action\"] rect {\n  fill: #e8f5e9;\n}\n\n[_nghost-%COMP%]     .step-node[data-type=\"subagent\"] rect {\n  fill: #fff3e0;\n}\n\n[_nghost-%COMP%]     .step-node[data-type=\"tool\"] rect {\n  fill: #f3e5f5;\n}\n\n[_nghost-%COMP%]     .step-node[data-type=\"decision\"] rect {\n  fill: #ffebee;\n}"] }); }
+        } }, dependencies: [i2.SplitterComponent, i2.SplitterPaneComponent, i3.AIAgentRunStepDetailComponent], styles: [".visualization-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: #f5f5f5;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.loading-state[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%], .empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 0.5rem;\n  color: #666;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #c00;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2rem;\n  opacity: 0.5;\n}\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: rgba(255, 255, 255, 0.9);\n  padding: 1rem 2rem;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 10;\n}\n\n.diagram-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background: #fafafa;\n}\n\n.diagram-toolbar[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  left: 10px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: white;\n  padding: 8px 12px;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  z-index: 10;\n}\n\n.toolbar-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.zoom-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.zoom-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  border: 1px solid #ddd;\n  background: white;\n  border-radius: 3px;\n  cursor: pointer;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  transition: all 0.2s;\n}\n\n.zoom-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  border-color: #4a90e2;\n}\n\n.zoom-level[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  margin-left: 8px;\n  font-family: monospace;\n}\n\n.visualization-svg[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  cursor: grab;\n}\n\n.visualization-svg[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n\n\n[_nghost-%COMP%]     .step-node {\n  cursor: pointer;\n  transition: transform 0.2s;\n}\n\n[_nghost-%COMP%]     .step-node:hover {\n  transform: scale(1.02);\n}\n\n[_nghost-%COMP%]     .step-node.dragging {\n  opacity: 0.8;\n  cursor: move;\n}\n\n[_nghost-%COMP%]     .step-node rect {\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\n}\n\n[_nghost-%COMP%]     .step-node:hover rect {\n  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));\n}\n\n[_nghost-%COMP%]     .scope-container {\n  cursor: pointer;\n}\n\n[_nghost-%COMP%]     .scope-container rect {\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\n}\n\n[_nghost-%COMP%]     .expand-button:hover circle {\n  fill: #e3f2fd;\n}\n\n[_nghost-%COMP%]     .connections-group path {\n  transition: stroke-width 0.2s;\n}\n\n[_nghost-%COMP%]     .connections-group path:hover {\n  stroke-width: 3;\n}\n\n\n\n[_nghost-%COMP%]     .k-splitter {\n  border: none;\n}\n\n[_nghost-%COMP%]     .k-splitter-pane {\n  overflow: visible;\n}\n\n[_nghost-%COMP%]     .k-splitbar {\n  background: #e0e6ed;\n  width: 4px;\n}\n\n[_nghost-%COMP%]     .k-splitbar:hover {\n  background: #c1c9d2;\n}\n\n[_nghost-%COMP%]     .k-splitbar-draggable-horizontal {\n  cursor: col-resize;\n}\n\n\n\n[_nghost-%COMP%]     .step-node[data-type=\"prompt\"] rect {\n  fill: #e3f2fd;\n}\n\n[_nghost-%COMP%]     .step-node[data-type=\"action\"] rect {\n  fill: #e8f5e9;\n}\n\n[_nghost-%COMP%]     .step-node[data-type=\"subagent\"] rect {\n  fill: #fff3e0;\n}\n\n[_nghost-%COMP%]     .step-node[data-type=\"tool\"] rect {\n  fill: #f3e5f5;\n}\n\n[_nghost-%COMP%]     .step-node[data-type=\"decision\"] rect {\n  fill: #ffebee;\n}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunVisualizationComponent, [{
         type: Component,
-        args: [{ selector: 'mj-ai-agent-run-visualization', template: "<div class=\"visualization-container\">\n  @if (error) {\n    <div class=\"error-state\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <span>{{ error }}</span>\n    </div>\n  } @else {\n    <kendo-splitter orientation=\"horizontal\" style=\"height: 100%;\">\n      <!-- Diagram Pane -->\n      <kendo-splitter-pane [collapsible]=\"false\">\n        <div class=\"diagram-container\" #svgContainer>\n          <div class=\"diagram-toolbar\">\n            <div class=\"toolbar-title\">\n              <i class=\"fa-solid fa-diagram-project\"></i>\n              Agent Execution Flow\n            </div>\n            <div class=\"zoom-controls\">\n              <button (click)=\"zoomIn()\" title=\"Zoom in\">\n                <i class=\"fa-solid fa-search-plus\"></i>\n              </button>\n              <button (click)=\"zoomOut()\" title=\"Zoom out\">\n                <i class=\"fa-solid fa-search-minus\"></i>\n              </button>\n              <button (click)=\"resetZoom()\" title=\"Reset zoom\">\n                <i class=\"fa-solid fa-compress\"></i>\n              </button>\n              <span class=\"zoom-level\">{{ (panZoom.scale * 100).toFixed(0) }}%</span>\n            </div>\n          </div>\n          @if (loading) {\n            <div class=\"loading-overlay\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>Loading visualization...</span>\n            </div>\n          }\n        </div>\n      </kendo-splitter-pane>\n      \n      <!-- Detail Pane -->\n      @if (selectedItem) {\n        <kendo-splitter-pane [size]=\"'400px'\" [min]=\"'300px'\" [max]=\"'600px'\" [collapsible]=\"true\">\n          <mj-ai-agent-run-step-detail\n            [selectedTimelineItem]=\"selectedItem\"\n            (closePanel)=\"closeDetailPane()\"\n            (navigateToActionLog)=\"navigateToActionLog($event)\"\n            (copyToClipboard)=\"copyToClipboard($event)\">\n          </mj-ai-agent-run-step-detail>\n        </kendo-splitter-pane>\n      }\n    </kendo-splitter>\n  }\n</div>", styles: [".visualization-container {\n  width: 100%;\n  height: 600px;\n  min-height: 400px;\n  position: relative;\n  background: #f5f5f5;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.loading-state, .error-state, .empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 0.5rem;\n  color: #666;\n}\n\n.error-state {\n  color: #c00;\n}\n\n.empty-state {\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.empty-state i {\n  font-size: 2rem;\n  opacity: 0.5;\n}\n\n.loading-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: rgba(255, 255, 255, 0.9);\n  padding: 1rem 2rem;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 10;\n}\n\n.diagram-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background: #fafafa;\n}\n\n.diagram-toolbar {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  left: 10px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: white;\n  padding: 8px 12px;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  z-index: 10;\n}\n\n.toolbar-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.zoom-controls {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.zoom-controls button {\n  padding: 6px 10px;\n  border: 1px solid #ddd;\n  background: white;\n  border-radius: 3px;\n  cursor: pointer;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  transition: all 0.2s;\n}\n\n.zoom-controls button:hover {\n  background: #f0f0f0;\n  border-color: #4a90e2;\n}\n\n.zoom-level {\n  font-size: 12px;\n  color: #666;\n  margin-left: 8px;\n  font-family: monospace;\n}\n\n.visualization-svg {\n  width: 100%;\n  height: 100%;\n  cursor: grab;\n}\n\n.visualization-svg:active {\n  cursor: grabbing;\n}\n\n/* SVG Styles */\n:host ::ng-deep .step-node {\n  cursor: pointer;\n  transition: transform 0.2s;\n}\n\n:host ::ng-deep .step-node:hover {\n  transform: scale(1.02);\n}\n\n:host ::ng-deep .step-node.dragging {\n  opacity: 0.8;\n  cursor: move;\n}\n\n:host ::ng-deep .step-node rect {\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\n}\n\n:host ::ng-deep .step-node:hover rect {\n  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));\n}\n\n:host ::ng-deep .scope-container {\n  cursor: pointer;\n}\n\n:host ::ng-deep .scope-container rect {\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\n}\n\n:host ::ng-deep .expand-button:hover circle {\n  fill: #e3f2fd;\n}\n\n:host ::ng-deep .connections-group path {\n  transition: stroke-width 0.2s;\n}\n\n:host ::ng-deep .connections-group path:hover {\n  stroke-width: 3;\n}\n\n/* Splitter customization */\n:host ::ng-deep .k-splitter {\n  border: none;\n}\n\n:host ::ng-deep .k-splitter-pane {\n  overflow: visible;\n}\n\n:host ::ng-deep .k-splitbar {\n  background: #e0e6ed;\n  width: 4px;\n}\n\n:host ::ng-deep .k-splitbar:hover {\n  background: #c1c9d2;\n}\n\n:host ::ng-deep .k-splitbar-draggable-horizontal {\n  cursor: col-resize;\n}\n\n/* Node type colors */\n:host ::ng-deep .step-node[data-type=\"prompt\"] rect {\n  fill: #e3f2fd;\n}\n\n:host ::ng-deep .step-node[data-type=\"action\"] rect {\n  fill: #e8f5e9;\n}\n\n:host ::ng-deep .step-node[data-type=\"subagent\"] rect {\n  fill: #fff3e0;\n}\n\n:host ::ng-deep .step-node[data-type=\"tool\"] rect {\n  fill: #f3e5f5;\n}\n\n:host ::ng-deep .step-node[data-type=\"decision\"] rect {\n  fill: #ffebee;\n}"] }]
+        args: [{ selector: 'mj-ai-agent-run-visualization', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"visualization-container\">\n  @if (error) {\n    <div class=\"error-state\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <span>{{ error }}</span>\n    </div>\n  } @else {\n    <kendo-splitter orientation=\"horizontal\" style=\"height: 100%;\">\n      <!-- Diagram Pane -->\n      <kendo-splitter-pane [collapsible]=\"false\">\n        <div class=\"diagram-container\" #svgContainer>\n          <div class=\"diagram-toolbar\">\n            <div class=\"toolbar-title\">\n              <i class=\"fa-solid fa-diagram-project\"></i>\n              Agent Execution Flow\n            </div>\n            <div class=\"zoom-controls\">\n              <button (click)=\"zoomIn()\" title=\"Zoom in\">\n                <i class=\"fa-solid fa-search-plus\"></i>\n              </button>\n              <button (click)=\"zoomOut()\" title=\"Zoom out\">\n                <i class=\"fa-solid fa-search-minus\"></i>\n              </button>\n              <button (click)=\"resetZoom()\" title=\"Reset zoom\">\n                <i class=\"fa-solid fa-compress\"></i>\n              </button>\n              <span class=\"zoom-level\">{{ (panZoom.scale * 100).toFixed(0) }}%</span>\n            </div>\n          </div>\n          @if (loading) {\n            <div class=\"loading-overlay\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>Loading visualization...</span>\n            </div>\n          }\n        </div>\n      </kendo-splitter-pane>\n      \n      <!-- Detail Pane -->\n      @if (selectedItem) {\n        <kendo-splitter-pane [size]=\"'400px'\" [min]=\"'300px'\" [max]=\"'600px'\" [collapsible]=\"true\">\n          <mj-ai-agent-run-step-detail\n            [selectedTimelineItem]=\"selectedItem\"\n            (closePanel)=\"closeDetailPane()\"\n            (navigateToActionLog)=\"navigateToActionLog($event)\"\n            (copyToClipboard)=\"copyToClipboard($event)\">\n          </mj-ai-agent-run-step-detail>\n        </kendo-splitter-pane>\n      }\n    </kendo-splitter>\n  }\n</div>", styles: [".visualization-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: #f5f5f5;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.loading-state, .error-state, .empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 0.5rem;\n  color: #666;\n}\n\n.error-state {\n  color: #c00;\n}\n\n.empty-state {\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.empty-state i {\n  font-size: 2rem;\n  opacity: 0.5;\n}\n\n.loading-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: rgba(255, 255, 255, 0.9);\n  padding: 1rem 2rem;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  z-index: 10;\n}\n\n.diagram-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background: #fafafa;\n}\n\n.diagram-toolbar {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  left: 10px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: white;\n  padding: 8px 12px;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  z-index: 10;\n}\n\n.toolbar-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.zoom-controls {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.zoom-controls button {\n  padding: 6px 10px;\n  border: 1px solid #ddd;\n  background: white;\n  border-radius: 3px;\n  cursor: pointer;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  transition: all 0.2s;\n}\n\n.zoom-controls button:hover {\n  background: #f0f0f0;\n  border-color: #4a90e2;\n}\n\n.zoom-level {\n  font-size: 12px;\n  color: #666;\n  margin-left: 8px;\n  font-family: monospace;\n}\n\n.visualization-svg {\n  width: 100%;\n  height: 100%;\n  cursor: grab;\n}\n\n.visualization-svg:active {\n  cursor: grabbing;\n}\n\n/* SVG Styles */\n:host ::ng-deep .step-node {\n  cursor: pointer;\n  transition: transform 0.2s;\n}\n\n:host ::ng-deep .step-node:hover {\n  transform: scale(1.02);\n}\n\n:host ::ng-deep .step-node.dragging {\n  opacity: 0.8;\n  cursor: move;\n}\n\n:host ::ng-deep .step-node rect {\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\n}\n\n:host ::ng-deep .step-node:hover rect {\n  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));\n}\n\n:host ::ng-deep .scope-container {\n  cursor: pointer;\n}\n\n:host ::ng-deep .scope-container rect {\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\n}\n\n:host ::ng-deep .expand-button:hover circle {\n  fill: #e3f2fd;\n}\n\n:host ::ng-deep .connections-group path {\n  transition: stroke-width 0.2s;\n}\n\n:host ::ng-deep .connections-group path:hover {\n  stroke-width: 3;\n}\n\n/* Splitter customization */\n:host ::ng-deep .k-splitter {\n  border: none;\n}\n\n:host ::ng-deep .k-splitter-pane {\n  overflow: visible;\n}\n\n:host ::ng-deep .k-splitbar {\n  background: #e0e6ed;\n  width: 4px;\n}\n\n:host ::ng-deep .k-splitbar:hover {\n  background: #c1c9d2;\n}\n\n:host ::ng-deep .k-splitbar-draggable-horizontal {\n  cursor: col-resize;\n}\n\n/* Node type colors */\n:host ::ng-deep .step-node[data-type=\"prompt\"] rect {\n  fill: #e3f2fd;\n}\n\n:host ::ng-deep .step-node[data-type=\"action\"] rect {\n  fill: #e8f5e9;\n}\n\n:host ::ng-deep .step-node[data-type=\"subagent\"] rect {\n  fill: #fff3e0;\n}\n\n:host ::ng-deep .step-node[data-type=\"tool\"] rect {\n  fill: #f3e5f5;\n}\n\n:host ::ng-deep .step-node[data-type=\"decision\"] rect {\n  fill: #ffebee;\n}"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.AIAgentRunDataService }], { svgContainer: [{
             type: ViewChild,
             args: ['svgContainer', { static: false }]
         }], aiAgentRunId: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunVisualizationComponent, { className: "AIAgentRunVisualizationComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-visualization.component.ts", lineNumber: 34 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunVisualizationComponent, { className: "AIAgentRunVisualizationComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-visualization.component.ts", lineNumber: 35 }); })();
 //# sourceMappingURL=ai-agent-run-visualization.component.js.map