@memberjunction/ng-core-entity-forms 6.1.4 → 6.2.0-edge.1

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

@@ -775,16 +775,16 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
         /** Pending re-read of the run tree while a detached workflow is still running. */
         this.workflowPollTimer = null;
         // UI state
-        this.activeTab = 'timeline';
-        this.selectedTimelineItem = null;
-        this.jsonPanelExpanded = false;
-        this.loading = false;
+        this.ActiveTab = 'timeline';
+        this.SelectedTimelineItem = null;
+        this.JsonPanelExpanded = false;
+        this.Loading = false;
         this.error = null;
-        this.analyticsLoaded = false;
-        this.visualizationLoaded = false;
-        this.agent = null;
+        this.AnalyticsLoaded = false;
+        this.VisualizationLoaded = false;
+        this.Agent = null;
         // Cost metrics using shared service
-        this.costMetrics = null;
+        this.CostMetrics = null;
         // Cached parsed results to prevent redundant JSON parsing
         this._cachedParsedResult = null;
         this._cachedParsedStartingPayload = null;
@@ -797,7 +797,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
         this.costService = inject(AIAgentRunCostService);
         this.appManager = inject(ApplicationManager);
         // Instance of data helper per component
-        this.dataHelper = new AIAgentRunDataHelper();
+        this.DataHelper = new AIAgentRunDataHelper();
         /**
          * The run's complete execution tree — loaded ONCE here and shared with every tab.
          *
@@ -807,11 +807,123 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
          * different run than the one beside it. Sharing it also means a refresh updates all three at once
          * rather than whichever one the user happens to open next.
          */
-        this.runTree = null;
+        this.RunTree = null;
         /** True while the tree is loading, so a tab can say so rather than render an empty run. */
-        this.runTreeLoading = false;
+        this.RunTreeLoading = false;
         /** Why the tree could not be loaded, or null. Surfaced rather than swallowed. */
-        this.runTreeError = null;
+        this.RunTreeError = null;
+    }
+    /** @deprecated Use {@link ActiveTab}. */
+    get activeTab() {
+        return this.ActiveTab;
+    }
+    /** @deprecated Use {@link ActiveTab}. */
+    set activeTab(value) {
+        this.ActiveTab = value;
+    }
+    /** @deprecated Use {@link SelectedTimelineItem}. */
+    get selectedTimelineItem() {
+        return this.SelectedTimelineItem;
+    }
+    /** @deprecated Use {@link SelectedTimelineItem}. */
+    set selectedTimelineItem(value) {
+        this.SelectedTimelineItem = value;
+    }
+    /** @deprecated Use {@link JsonPanelExpanded}. */
+    get jsonPanelExpanded() {
+        return this.JsonPanelExpanded;
+    }
+    /** @deprecated Use {@link JsonPanelExpanded}. */
+    set jsonPanelExpanded(value) {
+        this.JsonPanelExpanded = value;
+    }
+    /** @deprecated Use {@link Loading}. */
+    get loading() {
+        return this.Loading;
+    }
+    /** @deprecated Use {@link Loading}. */
+    set loading(value) {
+        this.Loading = value;
+    }
+    /** @deprecated Use {@link AnalyticsLoaded}. */
+    get analyticsLoaded() {
+        return this.AnalyticsLoaded;
+    }
+    /** @deprecated Use {@link AnalyticsLoaded}. */
+    set analyticsLoaded(value) {
+        this.AnalyticsLoaded = value;
+    }
+    /** @deprecated Use {@link VisualizationLoaded}. */
+    get visualizationLoaded() {
+        return this.VisualizationLoaded;
+    }
+    /** @deprecated Use {@link VisualizationLoaded}. */
+    set visualizationLoaded(value) {
+        this.VisualizationLoaded = value;
+    }
+    /** @deprecated Use {@link Agent}. */
+    get agent() {
+        return this.Agent;
+    }
+    /** @deprecated Use {@link Agent}. */
+    set agent(value) {
+        this.Agent = value;
+    }
+    /** @deprecated Use {@link CostMetrics}. */
+    get costMetrics() {
+        return this.CostMetrics;
+    }
+    /** @deprecated Use {@link CostMetrics}. */
+    set costMetrics(value) {
+        this.CostMetrics = value;
+    }
+    /** @deprecated Use {@link TimelineComponent}. */
+    get timelineComponent() {
+        return this.TimelineComponent;
+    }
+    /** @deprecated Use {@link TimelineComponent}. */
+    set timelineComponent(value) {
+        this.TimelineComponent = value;
+    }
+    /** @deprecated Use {@link AnalyticsComponent}. */
+    get analyticsComponent() {
+        return this.AnalyticsComponent;
+    }
+    /** @deprecated Use {@link AnalyticsComponent}. */
+    set analyticsComponent(value) {
+        this.AnalyticsComponent = value;
+    }
+    /** @deprecated Use {@link DataHelper}. */
+    get dataHelper() {
+        return this.DataHelper;
+    }
+    /** @deprecated Use {@link DataHelper}. */
+    set dataHelper(value) {
+        this.DataHelper = value;
+    }
+    /** @deprecated Use {@link RunTree}. */
+    get runTree() {
+        return this.RunTree;
+    }
+    /** @deprecated Use {@link RunTree}. */
+    set runTree(value) {
+        this.RunTree = value;
+    }
+    /** @deprecated Use {@link RunTreeLoading}. */
+    get runTreeLoading() {
+        return this.RunTreeLoading;
+    }
+    /** @deprecated Use {@link RunTreeLoading}. */
+    set runTreeLoading(value) {
+        this.RunTreeLoading = value;
+    }
+    /** @deprecated Use {@link RunTreeError}. */
+    get runTreeError() {
+        return this.RunTreeError;
+    }
+    /** @deprecated Use {@link RunTreeError}. */
+    set runTreeError(value) {
+        this.RunTreeError = value;
     }
     /**
      * Loads (or reloads) the shared run tree.
@@ -822,23 +934,23 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
     async loadRunTree() {
         if (!this.record?.ID)
             return;
-        this.runTreeLoading = true;
-        this.runTreeError = null;
+        this.RunTreeLoading = true;
+        this.RunTreeError = null;
         try {
             const result = await LoadAgentRunTree(this.record.ID, this.RunQueryToUse);
-            this.runTree = result.Root;
-            this.runTreeError = result.ErrorMessage;
+            this.RunTree = result.Root;
+            this.RunTreeError = result.ErrorMessage;
             if (result.Truncated) {
-                this.runTreeError =
+                this.RunTreeError =
                     `This run nests deeper than ${MAX_AGENT_RUN_TREE_DEPTH} levels; what is shown is truncated.`;
             }
         }
         catch (e) {
-            this.runTreeError = e instanceof Error ? e.message : String(e);
-            this.runTree = null;
+            this.RunTreeError = e instanceof Error ? e.message : String(e);
+            this.RunTree = null;
         }
         finally {
-            this.runTreeLoading = false;
+            this.RunTreeLoading = false;
             this.scheduleWorkflowPoll();
         }
     }
@@ -855,9 +967,9 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
      * snapshot of a moving thing, with nothing saying so.
      */
     get WorkflowStillRunning() {
-        if (!this.runTree)
+        if (!this.RunTree)
             return false;
-        for (const node of WalkAgentRunTree(this.runTree)) {
+        for (const node of WalkAgentRunTree(this.RunTree)) {
             if (node.NodeType !== 'Task' && node.NodeType !== 'TaskGraph')
                 continue;
             if (!TERMINAL_TASK_STATUSES.has(node.Status))
@@ -893,7 +1005,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
     async ngOnInit() {
         await super.ngOnInit();
         if (this.record && this.record.ID) {
-            await this.dataHelper.loadAgentRunData(this.record.ID);
+            await this.DataHelper.loadAgentRunData(this.record.ID);
             await this.loadRunTree();
             await this.loadAgent();
             await this.loadCostMetrics();
@@ -915,9 +1027,9 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
         this.entityEventSubscription?.unsubscribe();
         this.entityEventSubscription = null;
         this.clearParsedCache();
-        this.dataHelper.clearData();
-        this.costMetrics = null;
-        this.agent = null;
+        this.DataHelper.clearData();
+        this.CostMetrics = null;
+        this.Agent = null;
     }
     subscribeToRunEvents() {
         if (this.entityEventSubscription)
@@ -974,7 +1086,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             // Status change on THIS run row.
             const savedID = this.resolveEventID(evt);
             if (savedID && UUIDsEqual(savedID, runId)) {
-                this.refreshData();
+                this.RefreshData();
                 // If the run completed, drop the subscription — no further
                 // writes are expected and we don't want to hold the listener.
                 // Resolved only once the id has matched, so an unrelated run's event costs no read.
@@ -1070,7 +1182,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             this.refreshInFlight = false;
             if (!this.record?.ID)
                 return;
-            this.dataHelper.loadAgentRunData(this.record.ID, true);
+            this.DataHelper.loadAgentRunData(this.record.ID, true);
         });
     }
     async loadAgent() {
@@ -1080,7 +1192,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             const md = this.ProviderToUse;
             const agent = await md.GetEntityObject('MJ: AI Agents');
             if (agent && await agent.Load(this.record.AgentID)) {
-                this.agent = agent;
+                this.Agent = agent;
                 this.cdr.detectChanges();
             }
         }
@@ -1092,12 +1204,12 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
         if (!this.record?.ID)
             return;
         try {
-            this.costMetrics = await this.costService.getAgentRunCostMetrics(this.record.ID);
+            this.CostMetrics = await this.costService.getAgentRunCostMetrics(this.record.ID);
             this.cdr.markForCheck();
         }
         catch (error) {
             console.error('Error loading cost metrics:', error);
-            this.costMetrics = {
+            this.CostMetrics = {
                 totalCost: 0,
                 totalPrompts: 0,
                 totalTokensInput: 0,
@@ -1107,20 +1219,24 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             };
         }
     }
-    changeTab(tab) {
-        this.activeTab = tab;
+    ChangeTab(tab) {
+        this.ActiveTab = tab;
         // Lazy load the Visualization (playable + static flow) view on first access
-        if (tab === 'visualization' && !this.visualizationLoaded) {
-            this.visualizationLoaded = true;
+        if (tab === 'visualization' && !this.VisualizationLoaded) {
+            this.VisualizationLoaded = true;
             this.cdr.markForCheck();
         }
         // Lazy load analytics when the tab is first accessed
-        if (tab === 'analytics' && !this.analyticsLoaded) {
-            this.analyticsLoaded = true;
+        if (tab === 'analytics' && !this.AnalyticsLoaded) {
+            this.AnalyticsLoaded = true;
             this.cdr.markForCheck();
         }
     }
-    calculateDuration(start, end) {
+    /** @deprecated Use {@link ChangeTab}. */
+    changeTab(tab) {
+        return this.ChangeTab(tab);
+    }
+    CalculateDuration(start, end) {
         if (!end)
             return 'Running...';
         const ms = end.getTime() - start.getTime();
@@ -1132,38 +1248,70 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
         return `${Math.floor(ms / 3600000)}h ${Math.floor((ms % 3600000) / 60000)}m`;
     }
+    /** @deprecated Use {@link CalculateDuration}. */
+    calculateDuration(start, end) {
+        return this.CalculateDuration(start, end);
+    }
+    SelectTimelineItem(item) {
+        this.SelectedTimelineItem = item;
+        this.JsonPanelExpanded = true;
+        this.cdr.markForCheck();
+    }
+    /** @deprecated Use {@link SelectTimelineItem}. */
     selectTimelineItem(item) {
-        this.selectedTimelineItem = item;
-        this.jsonPanelExpanded = true;
+        return this.SelectTimelineItem(item);
+    }
+    CloseJsonPanel() {
+        this.SelectedTimelineItem = null;
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link CloseJsonPanel}. */
     closeJsonPanel() {
-        this.selectedTimelineItem = null;
-        this.cdr.markForCheck();
+        return this.CloseJsonPanel();
     }
-    navigateToSubRun(runId) {
+    NavigateToSubRun(runId) {
         SharedService.Instance.OpenEntityRecord("MJ: AI Agent Runs", CompositeKey.FromID(runId));
     }
-    navigateToParentRun() {
+    /** @deprecated Use {@link NavigateToSubRun}. */
+    navigateToSubRun(runId) {
+        return this.NavigateToSubRun(runId);
+    }
+    NavigateToParentRun() {
         if (this.record.ParentRunID) {
             SharedService.Instance.OpenEntityRecord("MJ: AI Agent Runs", CompositeKey.FromID(this.record.ParentRunID));
         }
     }
-    navigateToActionLog(logId) {
+    /** @deprecated Use {@link NavigateToParentRun}. */
+    navigateToParentRun() {
+        return this.NavigateToParentRun();
+    }
+    NavigateToActionLog(logId) {
         SharedService.Instance.OpenEntityRecord("MJ: Action Execution Logs", CompositeKey.FromID(logId));
     }
-    openEntityRecord(entityName, recordId) {
+    /** @deprecated Use {@link NavigateToActionLog}. */
+    navigateToActionLog(logId) {
+        return this.NavigateToActionLog(logId);
+    }
+    OpenEntityRecord(entityName, recordId) {
         if (recordId) {
             SharedService.Instance.OpenEntityRecord(entityName, CompositeKey.FromURLSegment(this.ProviderToUse.EntityByName(entityName), recordId));
         }
     }
-    navigateToEntityRecord(event) {
+    /** @deprecated Use {@link OpenEntityRecord}. */
+    openEntityRecord(entityName, recordId) {
+        return this.OpenEntityRecord(entityName, recordId);
+    }
+    NavigateToEntityRecord(event) {
         SharedService.Instance.OpenEntityRecord(event.entityName, CompositeKey.FromURLSegment(this.ProviderToUse.EntityByName(event.entityName), event.recordId));
     }
+    /** @deprecated Use {@link NavigateToEntityRecord}. */
+    navigateToEntityRecord(event) {
+        return this.NavigateToEntityRecord(event);
+    }
     /**
      * Navigate to the conversation in the Chat application
      */
-    navigateToConversation() {
+    NavigateToConversation() {
         if (!this.record?.ConversationID)
             return;
         // Find the Chat app
@@ -1175,7 +1323,11 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
         // Navigate to the Conversations nav item with the conversationId parameter
         this.navigationService.OpenNavItemByName('Conversations', { conversationId: this.record.ConversationID }, chatApp.ID);
     }
-    refreshData() {
+    /** @deprecated Use {@link NavigateToConversation}. */
+    navigateToConversation() {
+        return this.NavigateToConversation();
+    }
+    RefreshData() {
         // Reload the agent run record to get latest status
         if (this.record?.ID) {
             // Clear parsed cache when refreshing data
@@ -1186,16 +1338,20 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
                 this.costService.clearCache(this.record.ID);
                 this.loadCostMetrics();
                 // Reload data through helper - this will update all components (force reload for refresh)
-                this.dataHelper.loadAgentRunData(this.record.ID, true);
+                this.DataHelper.loadAgentRunData(this.record.ID, true);
                 void this.loadRunTree();
                 // Trigger analytics refresh
-                if (this.analyticsComponent) {
-                    this.analyticsComponent.loadData();
+                if (this.AnalyticsComponent) {
+                    this.AnalyticsComponent.loadData();
                 }
             });
         }
     }
-    getStatusIcon(status) {
+    /** @deprecated Use {@link RefreshData}. */
+    refreshData() {
+        return this.RefreshData();
+    }
+    GetStatusIcon(status) {
         const iconMap = {
             'Running': 'fa-circle-notch fa-spin',
             'Completed': 'fa-check-circle',
@@ -1205,7 +1361,11 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
         };
         return iconMap[status] || 'fa-question-circle';
     }
-    async copyToClipboard(text) {
+    /** @deprecated Use {@link GetStatusIcon}. */
+    getStatusIcon(status) {
+        return this.GetStatusIcon(status);
+    }
+    async CopyToClipboard(text) {
         try {
             await navigator.clipboard.writeText(text);
             // Could show a toast notification here
@@ -1214,10 +1374,14 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             console.error('Failed to copy to clipboard:', err);
         }
     }
+    /** @deprecated Use {@link CopyToClipboard}. */
+    async copyToClipboard(text) {
+        return this.CopyToClipboard(text);
+    }
     /**
      * Get the Result field with recursive JSON parsing applied
      */
-    get parsedResult() {
+    get ParsedResult() {
         if (!this.record?.Result) {
             return '';
         }
@@ -1254,10 +1418,14 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return fallbackResult;
         }
     }
+    /** @deprecated Use {@link ParsedResult}. */
+    get parsedResult() {
+        return this.ParsedResult;
+    }
     /**
      * Get the Starting Payload field with recursive JSON parsing applied
      */
-    get parsedStartingPayload() {
+    get ParsedStartingPayload() {
         if (!this.record?.StartingPayload) {
             return '';
         }
@@ -1294,10 +1462,14 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return fallbackResult;
         }
     }
+    /** @deprecated Use {@link ParsedStartingPayload}. */
+    get parsedStartingPayload() {
+        return this.ParsedStartingPayload;
+    }
     /**
      * Get the Final Payload (state) field with recursive JSON parsing applied
      */
-    get parsedFinalPayload() {
+    get ParsedFinalPayload() {
         if (!this.record?.FinalPayload)
             return '';
         // Return cached result if available
@@ -1333,10 +1505,14 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return fallbackResult;
         }
     }
+    /** @deprecated Use {@link ParsedFinalPayload}. */
+    get parsedFinalPayload() {
+        return this.ParsedFinalPayload;
+    }
     /**
      * Get the Data field with recursive JSON parsing applied
      */
-    get parsedData() {
+    get ParsedData() {
         if (!this.record?.Data)
             return '';
         // Return cached result if available
@@ -1372,10 +1548,14 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return fallbackResult;
         }
     }
+    /** @deprecated Use {@link ParsedData}. */
+    get parsedData() {
+        return this.ParsedData;
+    }
     /**
      * Get parsed Starting Payload as an object for deep diff
      */
-    get startingPayloadObject() {
+    get StartingPayloadObject() {
         if (!this.record?.StartingPayload)
             return null;
         try {
@@ -1401,10 +1581,14 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return null;
         }
     }
+    /** @deprecated Use {@link StartingPayloadObject}. */
+    get startingPayloadObject() {
+        return this.StartingPayloadObject;
+    }
     /**
      * Get parsed Final Payload as an object for deep diff
      */
-    get finalPayloadObject() {
+    get FinalPayloadObject() {
         if (!this.record?.FinalPayload)
             return null;
         try {
@@ -1430,6 +1614,10 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return null;
         }
     }
+    /** @deprecated Use {@link FinalPayloadObject}. */
+    get finalPayloadObject() {
+        return this.FinalPayloadObject;
+    }
     /**
      * Clear all cached parsed results
      */
@@ -1448,19 +1636,19 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             let parsedCount = 0;
             // Parse all fields that exist
             if (this.record?.Result) {
-                this.parsedResult; // Triggers parsing and caching
+                this.ParsedResult; // Triggers parsing and caching
                 parsedCount++;
             }
             if (this.record?.StartingPayload) {
-                this.parsedStartingPayload; // Triggers parsing and caching
+                this.ParsedStartingPayload; // Triggers parsing and caching
                 parsedCount++;
             }
             if (this.record?.FinalPayload) {
-                this.parsedFinalPayload; // Triggers parsing and caching
+                this.ParsedFinalPayload; // Triggers parsing and caching
                 parsedCount++;
             }
             if (this.record?.Data) {
-                this.parsedData; // Triggers parsing and caching
+                this.ParsedData; // Triggers parsing and caching
                 parsedCount++;
             }
             this._allParsingComplete = true;
@@ -1472,23 +1660,31 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
     /**
      * Check if all parsing is complete - used by template
      */
-    get isParsingComplete() {
+    get IsParsingComplete() {
         return this._allParsingComplete;
     }
+    /** @deprecated Use {@link IsParsingComplete}. */
+    get isParsingComplete() {
+        return this.IsParsingComplete;
+    }
     /**
      * Check if we have both payloads to show diff
      */
-    get showPayloadDiff() {
+    get ShowPayloadDiff() {
         return !!(this.record?.StartingPayload && this.record?.FinalPayload);
     }
+    /** @deprecated Use {@link ShowPayloadDiff}. */
+    get showPayloadDiff() {
+        return this.ShowPayloadDiff;
+    }
     /**
      * Check if selected timeline item is a step with payload changes
      */
-    get showStepPayloadDiff() {
-        if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {
+    get ShowStepPayloadDiff() {
+        if (!this.SelectedTimelineItem || this.SelectedTimelineItem.type !== 'step') {
             return false;
         }
-        const stepData = this.selectedTimelineItem.data;
+        const stepData = this.SelectedTimelineItem.data;
         if (stepData && (stepData.PayloadAtStart?.trim().length > 0
             || stepData.PayloadAtEnd?.trim().length > 0)) {
             return stepData.PayloadAtStart !== stepData.PayloadAtEnd;
@@ -1497,14 +1693,18 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return false;
         }
     }
+    /** @deprecated Use {@link ShowStepPayloadDiff}. */
+    get showStepPayloadDiff() {
+        return this.ShowStepPayloadDiff;
+    }
     /**
      * Get parsed PayloadAtStart for the selected step
      */
-    get stepPayloadAtStartObject() {
-        if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {
+    get StepPayloadAtStartObject() {
+        if (!this.SelectedTimelineItem || this.SelectedTimelineItem.type !== 'step') {
             return null;
         }
-        const stepData = this.selectedTimelineItem.data;
+        const stepData = this.SelectedTimelineItem.data;
         if (!stepData || !stepData.PayloadAtStart) {
             return null;
         }
@@ -1528,14 +1728,18 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return null;
         }
     }
+    /** @deprecated Use {@link StepPayloadAtStartObject}. */
+    get stepPayloadAtStartObject() {
+        return this.StepPayloadAtStartObject;
+    }
     /**
      * Get parsed PayloadAtEnd for the selected step
      */
-    get stepPayloadAtEndObject() {
-        if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {
+    get StepPayloadAtEndObject() {
+        if (!this.SelectedTimelineItem || this.SelectedTimelineItem.type !== 'step') {
             return null;
         }
-        const stepData = this.selectedTimelineItem.data;
+        const stepData = this.SelectedTimelineItem.data;
         if (!stepData || !stepData.PayloadAtEnd) {
             return null;
         }
@@ -1559,13 +1763,17 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             return null;
         }
     }
+    /** @deprecated Use {@link StepPayloadAtEndObject}. */
+    get stepPayloadAtEndObject() {
+        return this.StepPayloadAtEndObject;
+    }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJAIAgentRunFormComponentExtended_BaseFactory; return function MJAIAgentRunFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJAIAgentRunFormComponentExtended_BaseFactory || (ɵMJAIAgentRunFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJAIAgentRunFormComponentExtended)))(__ngFactoryType__ || MJAIAgentRunFormComponentExtended); }; })(); }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAIAgentRunFormComponentExtended, selectors: [["mj-ai-agent-run-form"]], viewQuery: function MJAIAgentRunFormComponentExtended_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(AIAgentRunTimelineComponent, 5)(AIAgentRunAnalyticsComponent, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.timelineComponent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.analyticsComponent = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TimelineComponent = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.AnalyticsComponent = _t.first);
         } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 59, vars: 35, consts: [["analyticsComponent", ""], [1, "record-form-container", "ai-agent-run-form"], [1, "record-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [1, "fas", 3, "ngClass"], [1, "fas", "fa-robot"], [1, "header-info"], [1, "meta-info"], [1, "agent-name"], [1, "run-id"], [1, "parent-run"], ["title", "Open conversation in Chat app", 1, "conversation-pill"], [1, "header-right"], ["title", "This run executed in Plan Mode \u2014 the agent presented a plan for human approval before executing actions or sub-agents", 1, "plan-mode-badge"], [1, "status-badge"], ["title", "This run submitted a workflow that runs on the dispatcher. The run finished when the workflow was submitted; the workflow itself is still going. This view refreshes on its own.", 1, "workflow-running-badge"], [1, "header-actions"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fas", "fa-sync-alt"], [1, "header-stats"], [1, "stat"], [1, "label"], [1, "value"], [1, "configuration-bar"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-stream"], [1, "fas", "fa-diagram-project"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-info-circle"], [1, "content-area"], [1, "tab-content", 2, "height", "100%"], [1, "tab-content"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], [1, "fas", "fa-level-up-alt"], [1, "parent-link", 3, "click"], ["title", "Open conversation in Chat app", 1, "conversation-pill", 3, "click"], [1, "fas", "fa-comments"], [1, "fas", "fa-external-link-alt", "pill-action"], [1, "fas", "fa-clipboard-check"], [1, "fas", "fa-circle-notch", "fa-spin"], [1, "value", "loading"], [1, "fas", "fa-spinner", "fa-spin"], [1, "config-item"], [1, "fas", "fa-cog"], [1, "config-content"], [1, "config-label"], [1, "config-value"], ["direction", "horizontal", 2, "height", "100%"], [3, "size"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "dataHelper", "RunTree"], [3, "closePanel", "navigateToActionLog", "copyToClipboard", "selectedTimelineItem", "Provider"], [3, "aiAgentRunId", "dataHelper", "agentName", "runStatus", "agentIconClass", "agentLogoUrl", "RunTree"], [3, "agentRunId", "RunTree"], [3, "Expanded"], ["mjAccordionTitle", ""], [1, "details-grid"], [1, "detail-item"], ["href", "javascript:void(0)", 1, "entity-link"], [1, "success"], [1, "error-message"], [1, "detail-item", "full-width"], [1, "fas", "fa-cogs"], [1, "fas", "fa-tasks"], [1, "message"], [1, "fas", "fa-dollar-sign"], [1, "result-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], [2, "padding", "20px", "text-align", "center", "color", "var(--mj-text-muted)"], [1, "fas", "fa-code"], [1, "fas", "fa-upload"], [1, "fas", "fa-database"], [1, "fas", "fa-download"], [2, "padding", "20px", "background", "var(--mj-bg-surface-card)"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "fas", "fa-code-compare"]], template: function MJAIAgentRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "div", 5)(5, "div", 6);
             i0.ɵɵconditionalCreate(6, MJAIAgentRunFormComponentExtended_Conditional_6_Template, 1, 2, "img", 7);
@@ -1702,10 +1910,10 @@ export { MJAIAgentRunFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIAgentRunFormComponentExtended, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-ai-agent-run-form', template: "<div class=\"record-form-container ai-agent-run-form\">\n  <div class=\"record-form\">\n    <!-- Header -->\n    <div class=\"header\">\n      <div class=\"header-content\">\n        <div class=\"header-left\">\n          <div class=\"icon-wrapper\">\n            @if (agent && agent.LogoURL) {\n              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name || 'Agent'\" class=\"agent-logo\" />\n            }\n            @if (agent && !agent.LogoURL && agent.IconClass) {\n              <i class=\"fas\" [ngClass]=\"agent.IconClass\"></i>\n            }\n            @if (!agent || (!agent.LogoURL && !agent.IconClass)) {\n              <i class=\"fas fa-robot\"></i>\n            }\n          </div>\n          <div class=\"header-info\">\n            <h2>AI Agent Run</h2>\n            <div class=\"meta-info\">\n              @if (agent) {\n                <span class=\"agent-name\">\n                  <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agents', record.AgentID)\">\n                    {{ agent.Name }}\n                  </a>\n                </span>\n              }\n              <span class=\"run-id\">{{ record.ID }}</span>\n              @if (record.ParentRunID) {\n                <span class=\"parent-run\">\n                  <i class=\"fas fa-level-up-alt\"></i>\n                  <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n                </span>\n              }\n              <!-- Conversation Link Pill -->\n              @if (record.ConversationID) {\n                <span class=\"conversation-pill\" (click)=\"navigateToConversation()\" title=\"Open conversation in Chat app\">\n                  <i class=\"fas fa-comments\"></i>\n                  <span>Conversation</span>\n                  <i class=\"fas fa-external-link-alt pill-action\"></i>\n                </span>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"header-right\">\n          @if (record.PlanMode) {\n            <div class=\"plan-mode-badge\" title=\"This run executed in Plan Mode \u2014 the agent presented a plan for human approval before executing actions or sub-agents\">\n              <i class=\"fas fa-clipboard-check\"></i>\n              Plan Mode\n            </div>\n          }\n          <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n            <i class=\"fas\" [ngClass]=\"getStatusIcon(record.Status || '')\"></i>\n            {{ record.Status }}\n          </div>\n          <!-- A workflow outlives the run that submitted it, so a Completed run can still have work\n               in flight. Said beside the status rather than instead of it \u2014 both are true. -->\n          @if (WorkflowStillRunning) {\n            <div class=\"workflow-running-badge\"\n                 title=\"This run submitted a workflow that runs on the dispatcher. The run finished when the workflow was submitted; the workflow itself is still going. This view refreshes on its own.\">\n              <i class=\"fas fa-circle-notch fa-spin\"></i>\n              Workflow still running\n            </div>\n          }\n          <div class=\"header-actions\">\n            <button class=\"btn-icon\" (click)=\"refreshData()\" title=\"Refresh\">\n              <i class=\"fas fa-sync-alt\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat\">\n          <span class=\"label\">Started</span>\n          <span class=\"value\">{{ record.StartedAt | date:'medium' }}</span>\n        </div>\n        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Completed</span>\n            <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n          </div>\n        }\n        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Duration</span>\n            <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n          </div>\n        }\n        @if (record.Success !== null && record.CompletedAt !== null) {\n          <div class=\"stat\">\n            <span class=\"label\">Result</span>\n            <span class=\"value\" [class.success]=\"record.Success\" [class.error]=\"!record.Success\">\n              {{ record.Success ? 'Success' : 'Failed' }}\n            </span>\n          </div>\n        }\n        @if (costMetrics && (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Tokens</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">{{ (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) | number:'1.0-0' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (costMetrics && costMetrics.totalCost > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Cost</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">${{ costMetrics.totalCost | number:'1.2-4' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (record.EffortLevel) {\n          <div class=\"stat\">\n            <span class=\"label\">Effort Level</span>\n            <span class=\"value\">{{ record.EffortLevel }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Configuration Bar (shown below header stats when ConfigurationID exists) -->\n      @if (record.ConfigurationID) {\n        <div class=\"configuration-bar\">\n          <div class=\"config-item\">\n            <i class=\"fas fa-cog\"></i>\n            <div class=\"config-content\">\n              <div class=\"config-label\">Configuration</div>\n              <div class=\"config-value\">\n                <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Configurations', record.ConfigurationID)\">\n                  {{ record.Configuration || 'Unknown' }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"tabs\">\n      <button class=\"tab\" [class.active]=\"activeTab === 'timeline'\" (click)=\"changeTab('timeline')\">\n        <i class=\"fas fa-stream\"></i> Timeline\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'visualization'\" (click)=\"changeTab('visualization')\">\n        <i class=\"fas fa-diagram-project\"></i> Visualization\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'analytics'\" (click)=\"changeTab('analytics')\">\n        <i class=\"fas fa-chart-line\"></i> Analytics\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"changeTab('details')\">\n        <i class=\"fas fa-info-circle\"></i> Details\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"content-area\">\n      <!-- Timeline Tab -->\n      @if (activeTab === 'timeline') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          <as-split direction=\"horizontal\" style=\"height: 100%;\">\n            <!-- Timeline Pane -->\n            <as-split-area [size]=\"selectedTimelineItem ? 55 : 100\">\n              <mj-ai-agent-run-timeline\n                [aiAgentRunId]=\"record.ID\"\n                [dataHelper]=\"dataHelper\"\n                [RunTree]=\"runTree\"\n                (itemSelected)=\"selectTimelineItem($event)\"\n                (navigateToEntity)=\"navigateToEntityRecord($event)\">\n              </mj-ai-agent-run-timeline>\n            </as-split-area>\n            <!-- JSON Detail Pane -->\n            @if (selectedTimelineItem) {\n              <as-split-area [size]=\"45\">\n                <mj-ai-agent-run-step-detail\n                  [selectedTimelineItem]=\"selectedTimelineItem\"\n                  [Provider]=\"ProviderToUse\"\n                  (closePanel)=\"closeJsonPanel()\"\n                  (navigateToActionLog)=\"navigateToActionLog($event)\"\n                  (copyToClipboard)=\"copyToClipboard($event)\">\n                </mj-ai-agent-run-step-detail>\n              </as-split-area>\n            }\n          </as-split>\n        </div>\n      }\n\n      <!-- Visualization Tab (animated flow views + static flowchart) -->\n      @if (activeTab === 'visualization') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (visualizationLoaded) {\n            <mj-ai-agent-run-flow\n              [aiAgentRunId]=\"record.ID\"\n              [dataHelper]=\"dataHelper\"\n              [agentName]=\"agent?.Name || null\"\n              [runStatus]=\"record.Status || ''\"\n              [agentIconClass]=\"agent?.IconClass || null\"\n              [agentLogoUrl]=\"agent?.LogoURL || null\"\n              [RunTree]=\"runTree\">\n            </mj-ai-agent-run-flow>\n          }\n        </div>\n      }\n\n      <!-- Analytics Tab -->\n      @if (activeTab === 'analytics') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (analyticsLoaded) {\n            <mj-ai-agent-run-analytics\n              #analyticsComponent\n              [agentRunId]=\"record.ID\"\n              [RunTree]=\"runTree\"\n              >\n            </mj-ai-agent-run-analytics>\n          }\n        </div>\n      }\n\n      <!-- Details Tab -->\n      @if (activeTab === 'details') {\n        <div class=\"tab-content\">\n          <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-info-circle\"></i> General Information\n            </ng-template>\n                <div class=\"details-grid\">\n                  <div class=\"detail-item\">\n                    <label>Agent</label>\n                    <span>\n                      <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agents', record.AgentID)\">\n                        {{ agent?.Name || 'N/A' }}\n                      </a>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Parent Run ID</label>\n                    <span>\n                      @if (record.ParentRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.ParentRunID)\">\n                          {{ record.ParentRunID }}\n                        </a>\n                      }\n                      @if (!record.ParentRunID) {\n                        <span>None (Root)</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Last Run ID</label>\n                    <span>\n                      @if (record.LastRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.LastRunID)\">\n                          {{ record.LastRunID }}\n                        </a>\n                      }\n                      @if (!record.LastRunID) {\n                        <span>None</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Conversation ID</label>\n                    <span>\n                      @if (record.ConversationID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Conversations', record.ConversationID)\">\n                          {{ record.ConversationID }}\n                        </a>\n                      }\n                      @if (!record.ConversationID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>User</label>\n                    <span>\n                      @if (record.UserID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Users', record.UserID)\">\n                          {{ record.User || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.UserID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                </div>\n          </mj-accordion-panel>\n          <mj-accordion-panel [Expanded]=\"false\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-cogs\"></i> Execution Settings\n            </ng-template>\n                <div class=\"details-grid\">\n                  <div class=\"detail-item\">\n                    <label>Override Model</label>\n                    <span>\n                      @if (record.OverrideModelID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Models', record.OverrideModelID)\">\n                          {{ record.OverrideModel || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideModelID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Override Vendor</label>\n                    <span>\n                      @if (record.OverrideVendorID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Vendors', record.OverrideVendorID)\">\n                          {{ record.OverrideVendor || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideVendorID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Verbose Logging</label>\n                    <span>{{ record.Verbose ? 'Yes' : 'No' }}</span>\n                  </div>\n                </div>\n          </mj-accordion-panel>\n          <mj-accordion-panel [Expanded]=\"false\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-tasks\"></i> Execution Status\n            </ng-template>\n                <div class=\"details-grid\">\n                  <div class=\"detail-item\">\n                    <label>Status</label>\n                    <span class=\"status-badge\" [attr.data-status]=\"record.Status\">\n                      {{ record.Status }}\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Success</label>\n                    @if (record.Success === null) {\n                      <span>In Progress</span>\n                    }\n                    @else if (record.Success) {\n                      <span class=\"success\">Yes</span>\n                    }\n                    @else {\n                      <span class=\"error-message\">No</span>\n                    }\n                  </div>\n                  @if (record.Message) {\n                    <div class=\"detail-item full-width\">\n                      <label>Message</label>\n                      <div class=\"message\">{{ record.Message }}</div>\n                    </div>\n                  }\n                  @if (record.ErrorMessage) {\n                    <div class=\"detail-item full-width\">\n                      <label>Error Message</label>\n                      <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n                    </div>\n                  }\n                </div>\n          </mj-accordion-panel>\n          <mj-accordion-panel [Expanded]=\"false\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-dollar-sign\"></i> Usage &amp; Cost\n            </ng-template>\n            <div class=\"details-grid\">\n              <div class=\"detail-item\">\n                <label>Total Tokens Used</label>\n                <span>{{ record.TotalTokensUsed ? (record.TotalTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Prompt Tokens</label>\n                <span>{{ record.TotalPromptTokensUsed ? (record.TotalPromptTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Completion Tokens</label>\n                <span>{{ record.TotalCompletionTokensUsed ? (record.TotalCompletionTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Total Cost</label>\n                <span>{{ record.TotalCost != null ? ('$' + (record.TotalCost | number:'1.2-4')) : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Total Prompt Iterations</label>\n                <span>{{ record.TotalPromptIterations != null ? (record.TotalPromptIterations | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n            </div>\n          </mj-accordion-panel>\n          @if (record.Result) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-code\"></i> Result\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedResult\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading result data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (record.StartingPayload) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-upload\"></i> Starting Payload\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedStartingPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (record.Data) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-database\"></i> Execution Data\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedData\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading execution data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (record.FinalPayload) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-download\"></i> Final Payload\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedFinalPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading final payload data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (showPayloadDiff) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-code-compare\"></i> Payload Diff\n              </ng-template>\n              <div style=\"padding: 20px; background: var(--mj-bg-surface-card);\">\n                @if (isParsingComplete) {\n                  <mj-deep-diff\n                    [oldValue]=\"startingPayloadObject\"\n                    [newValue]=\"finalPayloadObject\"\n                    [title]=\"''\"\n                    [showSummary]=\"true\"\n                    [showUnchanged]=\"false\"\n                    [expandAll]=\"false\"\n                    [maxDepth]=\"10\"\n                    [maxStringLength]=\"200\"\n                    [treatNullAsUndefined]=\"true\">\n                  </mj-deep-diff>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload diff...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n    </div>\n  }\n</div>\n</div>\n</div>", styles: [".ai-agent-run-form {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form > .record-form,\n.ai-agent-run-form > .record-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n/* Header Styles */\n.header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 20px;\n  overflow: hidden;\n}\n\n.agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.header-info h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.meta-info {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n}\n\n.parent-run {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link {\n  color: var(--mj-status-error);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link:hover {\n  color: var(--mj-status-error);\n  text-decoration: underline;\n}\n\n.agent-name {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.run-id {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n/* Conversation Link Pill */\n.conversation-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.conversation-pill:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.conversation-pill i:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill .pill-action {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill:hover .pill-action {\n  opacity: 1;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.status-badge[data-status=\"Completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge[data-status=\"Paused\"] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.small {\n  padding: 4px 12px;\n  font-size: 11px;\n}\n\n/* Plan Mode chip \u2014 shown next to the status badge when AIAgentRun.PlanMode = 1 */\n.plan-mode-badge {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.btn-icon {\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.btn-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n.header-stats {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n/* Configuration Bar */\n.configuration-bar {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n  margin-top: 16px;\n}\n\n.config-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.config-item > i {\n  font-size: 1.2em;\n  color: var(--mj-text-muted);\n  width: 24px;\n  text-align: center;\n}\n\n.config-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.config-label {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-value .entity-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value .entity-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat .label {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat .value {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.stat .value.success {\n  color: var(--mj-status-success);\n}\n\n.stat .value.error {\n  color: var(--mj-status-error);\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.tab {\n  padding: 12px 24px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n}\n\n.tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n/* Content Area */\n.content-area {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content {\n  height: 100%;\n  min-height: 0;\n  overflow: auto;\n}\n\n/* Details tab accordion panels */\n.tab-content mj-accordion-panel {\n  display: block;\n  margin-bottom: 8px;\n}\n\n/* JSON Detail Pane */\n.json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-pane-header h3 i {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.json-pane-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.json-meta {\n  display: flex;\n  gap: 20px;\n  margin-bottom: 16px;\n  flex-wrap: wrap;\n}\n\n.json-meta .meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta .meta-item label {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link {\n  margin-bottom: 12px;\n}\n\n.action-link .btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-link .btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\n  overflow: auto;\n  padding: 20px;\n  gap: 10px;\n  min-height: 0;\n  margin-bottom: 45px;\n}\n\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n/* Timeline Styles */\n.timeline-container {\n  height: 100%;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.timeline-container > .timeline {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.timeline {\n  position: relative;\n  padding-left: 40px;\n}\n\n.timeline::before {\n  content: '';\n  position: absolute;\n  left: 20px;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n.timeline-item {\n  position: relative;\n  margin-bottom: 24px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n  transform: translateX(4px);\n}\n\n.timeline-item.selected {\n  transform: translateX(8px);\n}\n\n.timeline-item.selected .timeline-content {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.timeline-marker {\n  position: absolute;\n  left: -30px;\n  top: 0;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-border-default);\n  z-index: 1;\n  transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"] {\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success);\n}\n\n.timeline-marker[data-color=\"error\"] {\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.timeline-marker[data-color=\"info\"] {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.timeline-marker[data-color=\"warning\"] {\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n  border-color: var(--mj-text-muted);\n  color: var(--mj-text-muted);\n}\n\n.timeline-marker.small {\n  width: 28px;\n  height: 28px;\n  font-size: 12px;\n}\n\n.timeline-content {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 16px 20px;\n  margin-left: 20px;\n  box-shadow: var(--mj-shadow-sm);\n  transition: all 0.2s ease;\n}\n\n.timeline-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.timeline-header h4 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.timeline-header h5 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.timeline-time {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-family: monospace;\n}\n\n.timeline-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.timeline-meta {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.timeline-meta .status {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.timeline-meta .status[data-status=\"Completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.timeline-meta .status[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.timeline-meta .status[data-status=\"Running\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.timeline-meta .status[data-status=\"Paused\"] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.duration {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.timeline-actions {\n  position: absolute;\n  right: 20px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s ease;\n}\n\n.btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.btn-expand {\n  width: 24px;\n  height: 24px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n.btn-expand:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n/* Timeline Children */\n.timeline-children {\n  position: relative;\n  margin-top: 12px;\n  margin-bottom: 12px;\n}\n\n.timeline-children::before {\n  content: '';\n  position: absolute;\n  left: -10px;\n  top: -12px;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n.child-item {\n  margin-bottom: 12px;\n}\n\n.child-item .timeline-content {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-default);\n}\n\n/* Sub-run timeline styles */\n.sub-run-timeline {\n  background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n  border-left: 2px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  margin-left: 20px;\n  padding-left: 20px;\n  margin-top: 8px;\n  margin-bottom: 8px;\n}\n\n.sub-run-item .timeline-marker {\n  border-width: 2px;\n}\n\n.sub-run-item .timeline-content {\n  transition: all 0.2s ease;\n}\n\n/* JSON Detail Pane (in splitter) */\n.json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-weight: 600;\n}\n\n.json-pane-content {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.json-meta {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n}\n\n.json-meta .meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.json-meta span {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.action-link .btn-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  font-size: 14px;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 4px;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n\n.action-link .btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  text-decoration: none;\n}\n\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n/* Details Tab */\n.details-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.detail-item label {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-item span {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.error-message {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  padding: 12px;\n  border-radius: 8px;\n  font-size: 13px;\n}\n\n.result-viewer,\n.state-viewer {\n  padding: 20px;\n  max-height: 450px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.result-viewer mj-code-editor,\n.state-viewer mj-code-editor {\n  flex: 1;\n  min-height: 0;\n}\n\n/* Empty States */\n.empty-state,\n.loading-state,\n.error-state {\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i,\n.loading-state i,\n.error-state i {\n  opacity: 0.3;\n  margin-bottom: 16px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n  \n  .header-stats {\n    flex-wrap: wrap;\n  }\n  \n  .json-detail-pane {\n    width: 100%;\n  }\n  \n  .timeline {\n    padding-left: 30px;\n  }\n  \n  .timeline-marker {\n    left: -25px;\n    width: 32px;\n    height: 32px;\n  }\n  \n  .timeline-content {\n    margin-left: 10px;\n  }\n}\n\n/* Entity Link Styles */\n.entity-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  transition: all 0.2s ease;\n  border-bottom: 1px solid transparent;\n  display: inline-block;\n}\n\n.entity-link:hover {\n  color: var(--mj-brand-primary-hover);\n  border-bottom-color: var(--mj-brand-primary-hover);\n}\n\n.entity-link:active {\n  color: var(--mj-brand-primary-hover);\n}\n\n/* Detail Pane Tabs */\n.detail-pane-tabs {\n  display: flex;\n  gap: 8px;\n  margin: 8px 0 0 0;\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 16px;\n}\n\n.detail-tab {\n  padding: 10px 16px;\n  background: none;\n  border: none;\n  border-bottom: 3px solid transparent;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.detail-tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.detail-tab i {\n  font-size: 14px;\n}\n\n/* Detail Pane Content */\n.detail-pane-content {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs {\n  /* When tabs are shown, content starts right after tabs */\n  margin-top: 0;\n}\n\n/* Step Payload Diff */\n.step-payload-diff {\n  height: 100%;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.step-payload-diff mj-deep-diff {\n  display: block;\n  height: 100%;\n}\n\n/* JSON Viewer adjustments when no tabs */\n.detail-pane-content:not(.with-tabs) .json-viewer {\n  margin-top: 16px;\n}\n/* A detached workflow still executing after its run completed. Blue rather than green or amber: it\n   is neither finished nor wrong, it is the same \"workflow\" provenance the timeline uses. */\n.workflow-running-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-full, 999px);\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  white-space: nowrap;\n}\n"] }]
-    }], null, { timelineComponent: [{
+    }], null, { TimelineComponent: [{
             type: ViewChild,
             args: [AIAgentRunTimelineComponent]
-        }], analyticsComponent: [{
+        }], AnalyticsComponent: [{
             type: ViewChild,
             args: [AIAgentRunAnalyticsComponent]
         }] }); })();