@memberjunction/ng-core-entity-forms 6.2.1 → 6.3.0-edge.0

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

@@ -20,6 +20,7 @@ import { AIAgentRunAnalyticsComponent } from './ai-agent-run-analytics.component
 import { AIAgentRunCostService } from './ai-agent-run-cost.service';
 import { AIAgentRunDataHelper } from './ai-agent-run-data.service';
 import { ApplicationManager } from '@memberjunction/ng-base-application';
+import { IsPhoneViewport, WatchPhoneViewport } from '@memberjunction/ng-ui-components';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
@@ -49,7 +50,7 @@ function MJAIAgentRunFormComponentExtended_Conditional_8_Template(rf, ctx) { if
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 12)(1, "a", 37);
+    i0.ɵɵelementStart(0, "span", 12)(1, "a", 39);
     i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_13_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agents", ctx_r0.record.AgentID)); });
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -63,8 +64,8 @@ function MJAIAgentRunFormComponentExtended_Conditional_13_Template(rf, ctx) { if
 function MJAIAgentRunFormComponentExtended_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 14);
-    i0.ɵɵelement(1, "i", 38);
-    i0.ɵɵelementStart(2, "a", 39);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementStart(2, "a", 41);
     i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_16_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToParentRun()); });
     i0.ɵɵtext(3, "Parent Run");
     i0.ɵɵelementEnd()();
@@ -75,24 +76,24 @@ function MJAIAgentRunFormComponentExtended_Conditional_16_Template(rf, ctx) { if
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵelementStart(0, "span", 42);
     i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_17_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToConversation()); });
-    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Conversation");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "i", 42);
+    i0.ɵɵelement(4, "i", 44);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵelement(1, "i", 45);
     i0.ɵɵtext(2, " Plan Mode ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelement(1, "i", 46);
     i0.ɵɵtext(2, " Workflow still running ");
     i0.ɵɵelementEnd();
 } }
@@ -146,8 +147,8 @@ function MJAIAgentRunFormComponentExtended_Conditional_37_Conditional_3_Template
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r0.costMetrics.totalTokensInput + ctx_r0.costMetrics.totalTokensOutput, "1.0-0"));
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_37_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 45);
-    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(0, "span", 47);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_37_Template(rf, ctx) { if (rf & 1) {
@@ -155,7 +156,7 @@ function MJAIAgentRunFormComponentExtended_Conditional_37_Template(rf, ctx) { if
     i0.ɵɵtext(2, "Tokens");
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_37_Conditional_3_Template, 3, 4, "span", 26);
-    i0.ɵɵconditionalCreate(4, MJAIAgentRunFormComponentExtended_Conditional_37_Conditional_4_Template, 2, 0, "span", 45);
+    i0.ɵɵconditionalCreate(4, MJAIAgentRunFormComponentExtended_Conditional_37_Conditional_4_Template, 2, 0, "span", 47);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -175,8 +176,8 @@ function MJAIAgentRunFormComponentExtended_Conditional_38_Conditional_3_Template
     i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(2, 1, ctx_r0.costMetrics.totalCost, "1.2-4"));
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_38_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 45);
-    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(0, "span", 47);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_38_Template(rf, ctx) { if (rf & 1) {
@@ -184,7 +185,7 @@ function MJAIAgentRunFormComponentExtended_Conditional_38_Template(rf, ctx) { if
     i0.ɵɵtext(2, "Cost");
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_38_Conditional_3_Template, 3, 4, "span", 26);
-    i0.ɵɵconditionalCreate(4, MJAIAgentRunFormComponentExtended_Conditional_38_Conditional_4_Template, 2, 0, "span", 45);
+    i0.ɵɵconditionalCreate(4, MJAIAgentRunFormComponentExtended_Conditional_38_Conditional_4_Template, 2, 0, "span", 47);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -207,12 +208,12 @@ function MJAIAgentRunFormComponentExtended_Conditional_39_Template(rf, ctx) { if
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_40_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 47);
-    i0.ɵɵelement(2, "i", 48);
-    i0.ɵɵelementStart(3, "div", 49)(4, "div", 50);
+    i0.ɵɵelementStart(0, "div", 27)(1, "div", 49);
+    i0.ɵɵelement(2, "i", 50);
+    i0.ɵɵelementStart(3, "div", 51)(4, "div", 52);
     i0.ɵɵtext(5, "Configuration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 51)(7, "a", 52);
+    i0.ɵɵelementStart(6, "div", 53)(7, "a", 54);
     i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_40_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Configurations", ctx_r0.record.ConfigurationID)); });
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()()()();
@@ -221,10 +222,10 @@ function MJAIAgentRunFormComponentExtended_Conditional_40_Template(rf, ctx) { if
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.Configuration || "Unknown", " ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_56_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "as-split-area", 54)(1, "mj-ai-agent-run-step-detail", 56);
-    i0.ɵɵlistener("closePanel", function MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template_mj_ai_agent_run_step_detail_closePanel_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeJsonPanel()); })("navigateToActionLog", function MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template_mj_ai_agent_run_step_detail_navigateToActionLog_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.navigateToActionLog($event)); })("copyToClipboard", function MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template_mj_ai_agent_run_step_detail_copyToClipboard_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.copyToClipboard($event)); })("SaveAsWorkflowRequested", function MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template_mj_ai_agent_run_step_detail_SaveAsWorkflowRequested_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnSaveAsWorkflowRequested($event)); });
+    i0.ɵɵelementStart(0, "as-split-area", 56)(1, "mj-ai-agent-run-step-detail", 61);
+    i0.ɵɵlistener("closePanel", function MJAIAgentRunFormComponentExtended_Conditional_56_Conditional_4_Template_mj_ai_agent_run_step_detail_closePanel_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeJsonPanel()); })("navigateToActionLog", function MJAIAgentRunFormComponentExtended_Conditional_56_Conditional_4_Template_mj_ai_agent_run_step_detail_navigateToActionLog_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.navigateToActionLog($event)); })("copyToClipboard", function MJAIAgentRunFormComponentExtended_Conditional_56_Conditional_4_Template_mj_ai_agent_run_step_detail_copyToClipboard_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.copyToClipboard($event)); })("SaveAsWorkflowRequested", function MJAIAgentRunFormComponentExtended_Conditional_56_Conditional_4_Template_mj_ai_agent_run_step_detail_SaveAsWorkflowRequested_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnSaveAsWorkflowRequested($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -232,60 +233,70 @@ function MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template
     i0.ɵɵadvance();
     i0.ɵɵproperty("selectedTimelineItem", ctx_r0.selectedTimelineItem)("Provider", ctx_r0.ProviderToUse)("SavingWorkflow", ctx_r0.SavingWorkflow);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_56_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "as-split", 53)(2, "as-split-area", 54)(3, "mj-ai-agent-run-timeline", 55);
-    i0.ɵɵlistener("itemSelected", function MJAIAgentRunFormComponentExtended_Conditional_55_Template_mj_ai_agent_run_timeline_itemSelected_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectTimelineItem($event)); })("navigateToEntity", function MJAIAgentRunFormComponentExtended_Conditional_55_Template_mj_ai_agent_run_timeline_navigateToEntity_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToEntityRecord($event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(4, MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template, 2, 4, "as-split-area", 54);
+    i0.ɵɵelementStart(0, "div", 36)(1, "as-split", 55)(2, "as-split-area", 56)(3, "mj-ai-agent-run-timeline", 57);
+    i0.ɵɵlistener("itemSelected", function MJAIAgentRunFormComponentExtended_Conditional_56_Template_mj_ai_agent_run_timeline_itemSelected_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectTimelineItem($event)); })("navigateToEntity", function MJAIAgentRunFormComponentExtended_Conditional_56_Template_mj_ai_agent_run_timeline_navigateToEntity_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToEntityRecord($event)); });
     i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(4, MJAIAgentRunFormComponentExtended_Conditional_56_Conditional_4_Template, 2, 4, "as-split-area", 56);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 58)(6, "span");
+    i0.ɵɵtext(7, "Visualization and Analytics are desktop views for this run.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 59);
+    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_56_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.CopyPageLink()); });
+    i0.ɵɵelement(9, "i", 60);
+    i0.ɵɵtext(10, " Copy link ");
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("direction", ctx_r0.TimelineSplitDirection);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("size", ctx_r0.selectedTimelineItem ? 55 : 100);
     i0.ɵɵadvance();
     i0.ɵɵproperty("aiAgentRunId", ctx_r0.record.ID)("dataHelper", ctx_r0.dataHelper)("RunTree", ctx_r0.runTree);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.selectedTimelineItem ? 4 : -1);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_56_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-ai-agent-run-flow", 57);
+function MJAIAgentRunFormComponentExtended_Conditional_57_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-ai-agent-run-flow", 62);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("aiAgentRunId", ctx_r0.record.ID)("dataHelper", ctx_r0.dataHelper)("agentName", (ctx_r0.agent == null ? null : ctx_r0.agent.Name) || null)("runStatus", ctx_r0.record.Status || "")("agentIconClass", (ctx_r0.agent == null ? null : ctx_r0.agent.IconClass) || null)("agentLogoUrl", (ctx_r0.agent == null ? null : ctx_r0.agent.LogoURL) || null)("RunTree", ctx_r0.runTree);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_56_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵconditionalCreate(1, MJAIAgentRunFormComponentExtended_Conditional_56_Conditional_1_Template, 1, 7, "mj-ai-agent-run-flow", 57);
+function MJAIAgentRunFormComponentExtended_Conditional_57_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵconditionalCreate(1, MJAIAgentRunFormComponentExtended_Conditional_57_Conditional_1_Template, 1, 7, "mj-ai-agent-run-flow", 62);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.visualizationLoaded ? 1 : -1);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_57_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-ai-agent-run-analytics", 58, 0);
+function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-ai-agent-run-analytics", 63, 0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("agentRunId", ctx_r0.record.ID)("RunTree", ctx_r0.runTree);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_57_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵconditionalCreate(1, MJAIAgentRunFormComponentExtended_Conditional_57_Conditional_1_Template, 2, 2, "mj-ai-agent-run-analytics", 58);
+function MJAIAgentRunFormComponentExtended_Conditional_58_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵconditionalCreate(1, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_1_Template, 2, 2, "mj-ai-agent-run-analytics", 63);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.analyticsLoaded ? 1 : -1);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 33);
+function MJAIAgentRunFormComponentExtended_Conditional_59_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
     i0.ɵɵtext(1, " General Information ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 52);
-    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_14_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agent Runs", ctx_r0.record.ParentRunID)); });
+    i0.ɵɵelementStart(0, "a", 54);
+    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_14_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agent Runs", ctx_r0.record.ParentRunID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -293,15 +304,15 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_14_Templat
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.ParentRunID, " ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "None (Root)");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 52);
-    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_20_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agent Runs", ctx_r0.record.LastRunID)); });
+    i0.ɵɵelementStart(0, "a", 54);
+    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_20_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agent Runs", ctx_r0.record.LastRunID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -309,15 +320,15 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_20_Templat
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.LastRunID, " ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "None");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 52);
-    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_26_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: Conversations", ctx_r0.record.ConversationID)); });
+    i0.ɵɵelementStart(0, "a", 54);
+    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_26_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: Conversations", ctx_r0.record.ConversationID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -325,15 +336,15 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_26_Templat
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.ConversationID, " ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_32_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 52);
-    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_32_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: Users", ctx_r0.record.UserID)); });
+    i0.ɵɵelementStart(0, "a", 54);
+    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_32_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: Users", ctx_r0.record.UserID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -341,19 +352,19 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_32_Templat
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.User || "N/A", " ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_ng_template_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 67);
+function MJAIAgentRunFormComponentExtended_Conditional_59_ng_template_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
     i0.ɵɵtext(1, " Execution Settings ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_41_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 52);
-    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_41_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Models", ctx_r0.record.OverrideModelID)); });
+    i0.ɵɵelementStart(0, "a", 54);
+    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_41_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Models", ctx_r0.record.OverrideModelID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -361,15 +372,15 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_41_Templat
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.OverrideModel || "N/A", " ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_42_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_47_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 52);
-    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_47_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Vendors", ctx_r0.record.OverrideVendorID)); });
+    i0.ɵɵelementStart(0, "a", 54);
+    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_47_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Vendors", ctx_r0.record.OverrideVendorID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -377,35 +388,35 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_47_Templat
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.OverrideVendor || "N/A", " ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_48_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_ng_template_55_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 68);
+function MJAIAgentRunFormComponentExtended_Conditional_59_ng_template_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 73);
     i0.ɵɵtext(1, " Execution Status ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_65_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_65_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "In Progress");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 64);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_66_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 69);
     i0.ɵɵtext(1, "Yes");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_67_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 65);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_67_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 70);
     i0.ɵɵtext(1, "No");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_68_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66)(1, "label");
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_68_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71)(1, "label");
     i0.ɵɵtext(2, "Message");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 69);
+    i0.ɵɵelementStart(3, "div", 74);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -413,11 +424,11 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_68_Templat
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.record.Message);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_69_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66)(1, "label");
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_69_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71)(1, "label");
     i0.ɵɵtext(2, "Error Message");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 65);
+    i0.ɵɵelementStart(3, "div", 70);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -425,31 +436,31 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_69_Templat
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.record.ErrorMessage);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_ng_template_71_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 70);
+function MJAIAgentRunFormComponentExtended_Conditional_59_ng_template_71_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 75);
     i0.ɵɵtext(1, " Usage & Cost ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_103_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 74);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_103_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 79);
     i0.ɵɵtext(1, " Result ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_103_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-code-editor", 72);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_103_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-code-editor", 77);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngModel", ctx_r0.parsedResult)("language", "json")("readonly", true);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_103_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵelement(1, "i", 46);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_103_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Loading result data... ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_103_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 59);
-    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_103_ng_template_1_Template, 2, 0, "ng-template", 60);
-    i0.ɵɵelementStart(2, "div", 71);
-    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_103_Conditional_3_Template, 1, 3, "mj-code-editor", 72)(4, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_103_Conditional_4_Template, 3, 0, "div", 73);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_103_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 64);
+    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_103_ng_template_1_Template, 2, 0, "ng-template", 65);
+    i0.ɵɵelementStart(2, "div", 76);
+    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_103_Conditional_3_Template, 1, 3, "mj-code-editor", 77)(4, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_103_Conditional_4_Template, 3, 0, "div", 78);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -457,27 +468,27 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_103_Templa
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 3 : 4);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_104_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 75);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_104_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 80);
     i0.ɵɵtext(1, " Starting Payload ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_104_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-code-editor", 72);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_104_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-code-editor", 77);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngModel", ctx_r0.parsedStartingPayload)("language", "json")("readonly", true);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_104_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵelement(1, "i", 46);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_104_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Loading payload data... ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_104_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 59);
-    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_104_ng_template_1_Template, 2, 0, "ng-template", 60);
-    i0.ɵɵelementStart(2, "div", 71);
-    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_104_Conditional_3_Template, 1, 3, "mj-code-editor", 72)(4, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_104_Conditional_4_Template, 3, 0, "div", 73);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_104_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 64);
+    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_104_ng_template_1_Template, 2, 0, "ng-template", 65);
+    i0.ɵɵelementStart(2, "div", 76);
+    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_104_Conditional_3_Template, 1, 3, "mj-code-editor", 77)(4, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_104_Conditional_4_Template, 3, 0, "div", 78);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -485,27 +496,27 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_104_Templa
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 3 : 4);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_105_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 76);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_105_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 81);
     i0.ɵɵtext(1, " Execution Data ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_105_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-code-editor", 72);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_105_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-code-editor", 77);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngModel", ctx_r0.parsedData)("language", "json")("readonly", true);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_105_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵelement(1, "i", 46);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_105_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Loading execution data... ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_105_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 59);
-    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_105_ng_template_1_Template, 2, 0, "ng-template", 60);
-    i0.ɵɵelementStart(2, "div", 71);
-    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_105_Conditional_3_Template, 1, 3, "mj-code-editor", 72)(4, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_105_Conditional_4_Template, 3, 0, "div", 73);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_105_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 64);
+    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_105_ng_template_1_Template, 2, 0, "ng-template", 65);
+    i0.ɵɵelementStart(2, "div", 76);
+    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_105_Conditional_3_Template, 1, 3, "mj-code-editor", 77)(4, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_105_Conditional_4_Template, 3, 0, "div", 78);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -513,27 +524,27 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_105_Templa
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 3 : 4);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_106_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 77);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_106_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 82);
     i0.ɵɵtext(1, " Final Payload ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_106_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-code-editor", 72);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_106_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-code-editor", 77);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngModel", ctx_r0.parsedFinalPayload)("language", "json")("readonly", true);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_106_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵelement(1, "i", 46);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_106_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Loading final payload data... ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_106_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 59);
-    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_106_ng_template_1_Template, 2, 0, "ng-template", 60);
-    i0.ɵɵelementStart(2, "div", 71);
-    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_106_Conditional_3_Template, 1, 3, "mj-code-editor", 72)(4, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_106_Conditional_4_Template, 3, 0, "div", 73);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_106_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 64);
+    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_106_ng_template_1_Template, 2, 0, "ng-template", 65);
+    i0.ɵɵelementStart(2, "div", 76);
+    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_106_Conditional_3_Template, 1, 3, "mj-code-editor", 77)(4, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_106_Conditional_4_Template, 3, 0, "div", 78);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -541,27 +552,27 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_106_Templa
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 3 : 4);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_107_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 80);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_107_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 85);
     i0.ɵɵtext(1, " Payload Diff ");
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_107_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-deep-diff", 79);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_107_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-deep-diff", 84);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("oldValue", ctx_r0.startingPayloadObject)("newValue", ctx_r0.finalPayloadObject)("title", "")("showSummary", true)("showUnchanged", false)("expandAll", false)("maxDepth", 10)("maxStringLength", 200)("treatNullAsUndefined", true);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_107_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵelement(1, "i", 46);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_107_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Loading payload diff... ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_107_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 59);
-    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_107_ng_template_1_Template, 2, 0, "ng-template", 60);
-    i0.ɵɵelementStart(2, "div", 78);
-    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_107_Conditional_3_Template, 1, 9, "mj-deep-diff", 79)(4, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_107_Conditional_4_Template, 3, 0, "div", 73);
+function MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_107_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 64);
+    i0.ɵɵtemplate(1, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_107_ng_template_1_Template, 2, 0, "ng-template", 65);
+    i0.ɵɵelementStart(2, "div", 83);
+    i0.ɵɵconditionalCreate(3, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_107_Conditional_3_Template, 1, 9, "mj-deep-diff", 84)(4, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_107_Conditional_4_Template, 3, 0, "div", 78);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -569,125 +580,125 @@ function MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_107_Templa
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 3 : 4);
 } }
-function MJAIAgentRunFormComponentExtended_Conditional_58_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentRunFormComponentExtended_Conditional_59_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36)(1, "mj-accordion-panel", 59);
-    i0.ɵɵtemplate(2, MJAIAgentRunFormComponentExtended_Conditional_58_ng_template_2_Template, 2, 0, "ng-template", 60);
-    i0.ɵɵelementStart(3, "div", 61)(4, "div", 62)(5, "label");
+    i0.ɵɵelementStart(0, "div", 38)(1, "mj-accordion-panel", 64);
+    i0.ɵɵtemplate(2, MJAIAgentRunFormComponentExtended_Conditional_59_ng_template_2_Template, 2, 0, "ng-template", 65);
+    i0.ɵɵelementStart(3, "div", 66)(4, "div", 67)(5, "label");
     i0.ɵɵtext(6, "Agent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span")(8, "a", 52);
-    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_58_Template_a_click_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agents", ctx_r0.record.AgentID)); });
+    i0.ɵɵelementStart(7, "span")(8, "a", 54);
+    i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Conditional_59_Template_a_click_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agents", ctx_r0.record.AgentID)); });
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(10, "div", 62)(11, "label");
+    i0.ɵɵelementStart(10, "div", 67)(11, "label");
     i0.ɵɵtext(12, "Parent Run ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(13, "span");
-    i0.ɵɵconditionalCreate(14, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_14_Template, 2, 1, "a", 63);
-    i0.ɵɵconditionalCreate(15, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_15_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(14, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_14_Template, 2, 1, "a", 68);
+    i0.ɵɵconditionalCreate(15, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_15_Template, 2, 0, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 62)(17, "label");
+    i0.ɵɵelementStart(16, "div", 67)(17, "label");
     i0.ɵɵtext(18, "Last Run ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(19, "span");
-    i0.ɵɵconditionalCreate(20, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_20_Template, 2, 1, "a", 63);
-    i0.ɵɵconditionalCreate(21, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_21_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(20, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_20_Template, 2, 1, "a", 68);
+    i0.ɵɵconditionalCreate(21, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_21_Template, 2, 0, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 62)(23, "label");
+    i0.ɵɵelementStart(22, "div", 67)(23, "label");
     i0.ɵɵtext(24, "Conversation ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(25, "span");
-    i0.ɵɵconditionalCreate(26, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_26_Template, 2, 1, "a", 63);
-    i0.ɵɵconditionalCreate(27, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_27_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(26, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_26_Template, 2, 1, "a", 68);
+    i0.ɵɵconditionalCreate(27, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_27_Template, 2, 0, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(28, "div", 62)(29, "label");
+    i0.ɵɵelementStart(28, "div", 67)(29, "label");
     i0.ɵɵtext(30, "User");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(31, "span");
-    i0.ɵɵconditionalCreate(32, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_32_Template, 2, 1, "a", 63);
-    i0.ɵɵconditionalCreate(33, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_33_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(32, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_32_Template, 2, 1, "a", 68);
+    i0.ɵɵconditionalCreate(33, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_33_Template, 2, 0, "span");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(34, "mj-accordion-panel", 59);
-    i0.ɵɵtemplate(35, MJAIAgentRunFormComponentExtended_Conditional_58_ng_template_35_Template, 2, 0, "ng-template", 60);
-    i0.ɵɵelementStart(36, "div", 61)(37, "div", 62)(38, "label");
+    i0.ɵɵelementStart(34, "mj-accordion-panel", 64);
+    i0.ɵɵtemplate(35, MJAIAgentRunFormComponentExtended_Conditional_59_ng_template_35_Template, 2, 0, "ng-template", 65);
+    i0.ɵɵelementStart(36, "div", 66)(37, "div", 67)(38, "label");
     i0.ɵɵtext(39, "Override Model");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(40, "span");
-    i0.ɵɵconditionalCreate(41, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_41_Template, 2, 1, "a", 63);
-    i0.ɵɵconditionalCreate(42, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_42_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(41, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_41_Template, 2, 1, "a", 68);
+    i0.ɵɵconditionalCreate(42, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_42_Template, 2, 0, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div", 62)(44, "label");
+    i0.ɵɵelementStart(43, "div", 67)(44, "label");
     i0.ɵɵtext(45, "Override Vendor");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(46, "span");
-    i0.ɵɵconditionalCreate(47, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_47_Template, 2, 1, "a", 63);
-    i0.ɵɵconditionalCreate(48, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_48_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(47, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_47_Template, 2, 1, "a", 68);
+    i0.ɵɵconditionalCreate(48, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_48_Template, 2, 0, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(49, "div", 62)(50, "label");
+    i0.ɵɵelementStart(49, "div", 67)(50, "label");
     i0.ɵɵtext(51, "Verbose Logging");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(52, "span");
     i0.ɵɵtext(53);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(54, "mj-accordion-panel", 59);
-    i0.ɵɵtemplate(55, MJAIAgentRunFormComponentExtended_Conditional_58_ng_template_55_Template, 2, 0, "ng-template", 60);
-    i0.ɵɵelementStart(56, "div", 61)(57, "div", 62)(58, "label");
+    i0.ɵɵelementStart(54, "mj-accordion-panel", 64);
+    i0.ɵɵtemplate(55, MJAIAgentRunFormComponentExtended_Conditional_59_ng_template_55_Template, 2, 0, "ng-template", 65);
+    i0.ɵɵelementStart(56, "div", 66)(57, "div", 67)(58, "label");
     i0.ɵɵtext(59, "Status");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(60, "span", 18);
     i0.ɵɵtext(61);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(62, "div", 62)(63, "label");
+    i0.ɵɵelementStart(62, "div", 67)(63, "label");
     i0.ɵɵtext(64, "Success");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(65, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_65_Template, 2, 0, "span")(66, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_66_Template, 2, 0, "span", 64)(67, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_67_Template, 2, 0, "span", 65);
+    i0.ɵɵconditionalCreate(65, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_65_Template, 2, 0, "span")(66, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_66_Template, 2, 0, "span", 69)(67, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_67_Template, 2, 0, "span", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(68, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_68_Template, 5, 1, "div", 66);
-    i0.ɵɵconditionalCreate(69, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_69_Template, 5, 1, "div", 66);
+    i0.ɵɵconditionalCreate(68, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_68_Template, 5, 1, "div", 71);
+    i0.ɵɵconditionalCreate(69, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_69_Template, 5, 1, "div", 71);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(70, "mj-accordion-panel", 59);
-    i0.ɵɵtemplate(71, MJAIAgentRunFormComponentExtended_Conditional_58_ng_template_71_Template, 2, 0, "ng-template", 60);
-    i0.ɵɵelementStart(72, "div", 61)(73, "div", 62)(74, "label");
+    i0.ɵɵelementStart(70, "mj-accordion-panel", 64);
+    i0.ɵɵtemplate(71, MJAIAgentRunFormComponentExtended_Conditional_59_ng_template_71_Template, 2, 0, "ng-template", 65);
+    i0.ɵɵelementStart(72, "div", 66)(73, "div", 67)(74, "label");
     i0.ɵɵtext(75, "Total Tokens Used");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(76, "span");
     i0.ɵɵtext(77);
     i0.ɵɵpipe(78, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(79, "div", 62)(80, "label");
+    i0.ɵɵelementStart(79, "div", 67)(80, "label");
     i0.ɵɵtext(81, "Prompt Tokens");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(82, "span");
     i0.ɵɵtext(83);
     i0.ɵɵpipe(84, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(85, "div", 62)(86, "label");
+    i0.ɵɵelementStart(85, "div", 67)(86, "label");
     i0.ɵɵtext(87, "Completion Tokens");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(88, "span");
     i0.ɵɵtext(89);
     i0.ɵɵpipe(90, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(91, "div", 62)(92, "label");
+    i0.ɵɵelementStart(91, "div", 67)(92, "label");
     i0.ɵɵtext(93, "Total Cost");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(94, "span");
     i0.ɵɵtext(95);
     i0.ɵɵpipe(96, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(97, "div", 62)(98, "label");
+    i0.ɵɵelementStart(97, "div", 67)(98, "label");
     i0.ɵɵtext(99, "Total Prompt Iterations");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(100, "span");
     i0.ɵɵtext(101);
     i0.ɵɵpipe(102, "number");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(103, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_103_Template, 5, 2, "mj-accordion-panel", 59);
-    i0.ɵɵconditionalCreate(104, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_104_Template, 5, 2, "mj-accordion-panel", 59);
-    i0.ɵɵconditionalCreate(105, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_105_Template, 5, 2, "mj-accordion-panel", 59);
-    i0.ɵɵconditionalCreate(106, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_106_Template, 5, 2, "mj-accordion-panel", 59);
-    i0.ɵɵconditionalCreate(107, MJAIAgentRunFormComponentExtended_Conditional_58_Conditional_107_Template, 5, 2, "mj-accordion-panel", 59);
+    i0.ɵɵconditionalCreate(103, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_103_Template, 5, 2, "mj-accordion-panel", 64);
+    i0.ɵɵconditionalCreate(104, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_104_Template, 5, 2, "mj-accordion-panel", 64);
+    i0.ɵɵconditionalCreate(105, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_105_Template, 5, 2, "mj-accordion-panel", 64);
+    i0.ɵɵconditionalCreate(106, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_106_Template, 5, 2, "mj-accordion-panel", 64);
+    i0.ɵɵconditionalCreate(107, MJAIAgentRunFormComponentExtended_Conditional_59_Conditional_107_Template, 5, 2, "mj-accordion-panel", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -785,6 +796,10 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
         this.workflowPollTimer = null;
         // UI state
         this.ActiveTab = 'timeline';
+        /** Phone-width viewport, decided once at init. Visualization and Analytics are desktop views. */
+        this.IsPhone = false;
+        /** Stops following the breakpoint; set at init, called from ngOnDestroy. */
+        this.stopPhoneWatch = () => undefined;
         this.SelectedTimelineItem = null;
         this.JsonPanelExpanded = false;
         this.Loading = false;
@@ -836,6 +851,43 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
         /** True while a workflow is being saved via `WorkflowSaveOperation`. */
         this.SavingWorkflow = false;
     }
+    /** The timeline's detail pane sits beside the list on desktop and under it on a phone. */
+    get TimelineSplitDirection() {
+        return this.IsPhone ? 'vertical' : 'horizontal';
+    }
+    /** The views that work at phone width, as `mj-section-picker` items. */
+    get SectionPickerItems() {
+        return [
+            { Key: 'timeline', Title: 'Timeline', Icon: 'fas fa-stream' },
+            { Key: 'details', Title: 'Details', Icon: 'fas fa-info-circle' },
+        ];
+    }
+    /** A pick from the phone section sheet; only the phone views are accepted. */
+    OnSectionPicked(key) {
+        if (this.SectionPickerItems.some((i) => i.Key === key))
+            this.ChangeTab(key);
+    }
+    /**
+     * Phone defaults, applied at init and whenever the breakpoint is crossed: a run on Visualization or Analytics opens
+     * on the timeline instead, since those are desktop views (pan, zoom, charts).
+     */
+    ApplyPhoneDefaults(isPhone) {
+        this.IsPhone = isPhone;
+        if (isPhone && !this.SectionPickerItems.some((i) => i.Key === this.ActiveTab))
+            this.ActiveTab = 'timeline';
+    }
+    /**
+     * Re-reads the breakpoint and re-applies the phone defaults, so rotating a tablet or resizing
+     * below 768px on Visualization or Analytics lands on the timeline the picker names.
+     */
+    SyncPhoneViewport() {
+        this.ApplyPhoneDefaults(IsPhoneViewport());
+        this.cdr.markForCheck();
+    }
+    /** Copies this run's URL so it can be opened on a desktop. */
+    CopyPageLink() {
+        return this.CopyToClipboard(window.location.href);
+    }
     /** @deprecated Use {@link ActiveTab}. */
     get activeTab() {
         return this.ActiveTab;
@@ -1035,6 +1087,8 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
     }
     async ngOnInit() {
         await super.ngOnInit();
+        this.ApplyPhoneDefaults(IsPhoneViewport());
+        this.stopPhoneWatch = WatchPhoneViewport(() => this.SyncPhoneViewport());
         if (this.record && this.record.ID) {
             await Promise.all([
                 this.DataHelper.loadAgentRunData(this.record.ID),
@@ -1056,6 +1110,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this.stopPhoneWatch();
         this.destroy$.next();
         this.destroy$.complete();
         this.clearWorkflowPoll();
@@ -1906,7 +1961,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             let _t;
             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)", "FieldName", "AgentID", 1, "entity-link", 3, "click", "mjRecordLink", "DisplayName", "HandleClick"], [1, "fas", "fa-level-up-alt"], ["FieldName", "ParentRunID", 1, "parent-link", 3, "click", "mjRecordLink", "HandleClick"], ["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"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], ["direction", "horizontal", 2, "height", "100%"], [3, "size"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "dataHelper", "RunTree"], [3, "closePanel", "navigateToActionLog", "copyToClipboard", "SaveAsWorkflowRequested", "selectedTimelineItem", "Provider", "SavingWorkflow"], [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) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 60, vars: 37, 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, "phone-section-picker", 3, "ActiveKeyChange", "Items", "ActiveKey"], [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", "timeline-tab", 2, "height", "100%"], [1, "tab-content", 2, "height", "100%"], [1, "tab-content"], ["href", "javascript:void(0)", "FieldName", "AgentID", 1, "entity-link", 3, "click", "mjRecordLink", "DisplayName", "HandleClick"], [1, "fas", "fa-level-up-alt"], ["FieldName", "ParentRunID", 1, "parent-link", 3, "click", "mjRecordLink", "HandleClick"], ["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"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], [2, "height", "100%", 3, "direction"], [3, "size"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "dataHelper", "RunTree"], [1, "phone-desktop-note"], ["mjButton", "", "variant", "flat", "size", "sm", "type", "button", 3, "click"], ["aria-hidden", "true", 1, "fas", "fa-link"], [3, "closePanel", "navigateToActionLog", "copyToClipboard", "SaveAsWorkflowRequested", "selectedTimelineItem", "Provider", "SavingWorkflow"], [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);
             i0.ɵɵconditionalCreate(7, MJAIAgentRunFormComponentExtended_Conditional_7_Template, 1, 1, "i", 8);
@@ -1950,31 +2005,34 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(40, MJAIAgentRunFormComponentExtended_Conditional_40_Template, 9, 1, "div", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(41, "div", 28)(42, "button", 29);
-            i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Template_button_click_42_listener() { return ctx.changeTab("timeline"); });
-            i0.ɵɵelement(43, "i", 30);
-            i0.ɵɵtext(44, " Timeline ");
+            i0.ɵɵelementStart(41, "mj-section-picker", 28);
+            i0.ɵɵlistener("ActiveKeyChange", function MJAIAgentRunFormComponentExtended_Template_mj_section_picker_ActiveKeyChange_41_listener($event) { return ctx.OnSectionPicked($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(45, "button", 29);
-            i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Template_button_click_45_listener() { return ctx.changeTab("visualization"); });
-            i0.ɵɵelement(46, "i", 31);
-            i0.ɵɵtext(47, " Visualization ");
+            i0.ɵɵelementStart(42, "div", 29)(43, "button", 30);
+            i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Template_button_click_43_listener() { return ctx.changeTab("timeline"); });
+            i0.ɵɵelement(44, "i", 31);
+            i0.ɵɵtext(45, " Timeline ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(48, "button", 29);
-            i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Template_button_click_48_listener() { return ctx.changeTab("analytics"); });
-            i0.ɵɵelement(49, "i", 32);
-            i0.ɵɵtext(50, " Analytics ");
+            i0.ɵɵelementStart(46, "button", 30);
+            i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Template_button_click_46_listener() { return ctx.changeTab("visualization"); });
+            i0.ɵɵelement(47, "i", 32);
+            i0.ɵɵtext(48, " Visualization ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(51, "button", 29);
-            i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Template_button_click_51_listener() { return ctx.changeTab("details"); });
-            i0.ɵɵelement(52, "i", 33);
-            i0.ɵɵtext(53, " Details ");
+            i0.ɵɵelementStart(49, "button", 30);
+            i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Template_button_click_49_listener() { return ctx.changeTab("analytics"); });
+            i0.ɵɵelement(50, "i", 33);
+            i0.ɵɵtext(51, " Analytics ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(52, "button", 30);
+            i0.ɵɵlistener("click", function MJAIAgentRunFormComponentExtended_Template_button_click_52_listener() { return ctx.changeTab("details"); });
+            i0.ɵɵelement(53, "i", 34);
+            i0.ɵɵtext(54, " Details ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(54, "div", 34);
-            i0.ɵɵconditionalCreate(55, MJAIAgentRunFormComponentExtended_Conditional_55_Template, 5, 5, "div", 35);
-            i0.ɵɵconditionalCreate(56, MJAIAgentRunFormComponentExtended_Conditional_56_Template, 2, 1, "div", 35);
-            i0.ɵɵconditionalCreate(57, MJAIAgentRunFormComponentExtended_Conditional_57_Template, 2, 1, "div", 35);
-            i0.ɵɵconditionalCreate(58, MJAIAgentRunFormComponentExtended_Conditional_58_Template, 108, 48, "div", 36);
+            i0.ɵɵelementStart(55, "div", 35);
+            i0.ɵɵconditionalCreate(56, MJAIAgentRunFormComponentExtended_Conditional_56_Template, 11, 6, "div", 36);
+            i0.ɵɵconditionalCreate(57, MJAIAgentRunFormComponentExtended_Conditional_57_Template, 2, 1, "div", 37);
+            i0.ɵɵconditionalCreate(58, MJAIAgentRunFormComponentExtended_Conditional_58_Template, 2, 1, "div", 37);
+            i0.ɵɵconditionalCreate(59, MJAIAgentRunFormComponentExtended_Conditional_59_Template, 108, 48, "div", 38);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(6);
@@ -2002,7 +2060,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.WorkflowStillRunning ? 23 : -1);
             i0.ɵɵadvance(9);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(33, 32, ctx.record.StartedAt, "medium"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(33, 34, ctx.record.StartedAt, "medium"));
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.record.CompletedAt ? 34 : -1);
             i0.ɵɵadvance();
@@ -2017,6 +2075,8 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             i0.ɵɵconditional(ctx.record.EffortLevel ? 39 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.record.ConfigurationID ? 40 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Items", ctx.SectionPickerItems)("ActiveKey", ctx.ActiveTab);
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("active", ctx.activeTab === "timeline");
             i0.ɵɵadvance(3);
@@ -2026,14 +2086,14 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             i0.ɵɵadvance(3);
             i0.ɵɵclassProp("active", ctx.activeTab === "details");
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.activeTab === "timeline" ? 55 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "timeline" ? 56 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "visualization" ? 56 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "visualization" ? 57 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "analytics" ? 57 : -1);
+            i0.ɵɵconditional(ctx.activeTab === "analytics" ? 58 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === "details" ? 58 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i4.MjRecordLinkDirective, i5.CodeEditorComponent, i6.DeepDiffComponent, i7.SplitComponent, i7.SplitAreaComponent, i8.AIAgentRunTimelineComponent, i9.AIAgentRunAnalyticsComponent, i10.AIAgentRunStepDetailComponent, i11.AIAgentRunFlowComponent, i1.DecimalPipe, i1.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%], \n.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n\n.header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.header-info[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.meta-info[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  text-decoration: underline;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n\n.conversation-pill[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill[_ngcontent-%COMP%]   .pill-action[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill[_ngcontent-%COMP%]:hover   .pill-action[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n  padding: 4px 12px;\n  font-size: 11px;\n}\n\n\n.plan-mode-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n\n.configuration-bar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 1.2em;\n  color: var(--mj-text-muted);\n  width: 24px;\n  text-align: center;\n}\n\n.config-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.config-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-value[_ngcontent-%COMP%]   .entity-link[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value[_ngcontent-%COMP%]   .entity-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n.stat[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.stat[_ngcontent-%COMP%]   .value.success[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.stat[_ngcontent-%COMP%]   .value.error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.tabs[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n\n.content-area[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\n  overflow: auto;\n}\n\n\n.tab-content[_ngcontent-%COMP%]   mj-accordion-panel[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n}\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 20px;\n  margin-bottom: 16px;\n  flex-wrap: wrap;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.action-link[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\n.timeline-container[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.timeline-container[_ngcontent-%COMP%]    > .timeline[_ngcontent-%COMP%] {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.timeline[_ngcontent-%COMP%] {\n  position: relative;\n  padding-left: 40px;\n}\n\n.timeline[_ngcontent-%COMP%]::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[_ngcontent-%COMP%] {\n  position: relative;\n  margin-bottom: 24px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n  transform: translateX(4px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] {\n  transform: translateX(8px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%]   .timeline-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success);\n}\n\n.timeline-marker[data-color=\"error\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.timeline-marker[data-color=\"info\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.timeline-marker[data-color=\"warning\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.timeline-marker[data-color=\"secondary\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-text-muted);\n  color: var(--mj-text-muted);\n}\n\n.timeline-marker.small[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  font-size: 12px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.timeline-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.timeline-header[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-family: monospace;\n}\n\n.timeline-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.timeline-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .status[data-status=\"Completed\"][_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .status[data-status=\"Failed\"][_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .status[data-status=\"Running\"][_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .status[data-status=\"Paused\"][_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.duration[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.btn-expand[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n\n.timeline-children[_ngcontent-%COMP%] {\n  position: relative;\n  margin-top: 12px;\n  margin-bottom: 12px;\n}\n\n.timeline-children[_ngcontent-%COMP%]::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[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.child-item[_ngcontent-%COMP%]   .timeline-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-default);\n}\n\n\n.sub-run-timeline[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .timeline-marker[_ngcontent-%COMP%] {\n  border-width: 2px;\n}\n\n.sub-run-item[_ngcontent-%COMP%]   .timeline-content[_ngcontent-%COMP%] {\n  transition: all 0.2s ease;\n}\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.action-link[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n\n.details-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.error-message[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] {\n  padding: 20px;\n  max-height: 450px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.result-viewer[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  opacity: 0.3;\n  margin-bottom: 16px;\n}\n\n\n@media (max-width: 768px) {\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n  \n  .header-stats[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n  \n  .json-detail-pane[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n  \n  .timeline[_ngcontent-%COMP%] {\n    padding-left: 30px;\n  }\n  \n  .timeline-marker[_ngcontent-%COMP%] {\n    left: -25px;\n    width: 32px;\n    height: 32px;\n  }\n  \n  .timeline-content[_ngcontent-%COMP%] {\n    margin-left: 10px;\n  }\n}\n\n\n.entity-link[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  border-bottom-color: var(--mj-brand-primary-hover);\n}\n\n.entity-link[_ngcontent-%COMP%]:active {\n  color: var(--mj-brand-primary-hover);\n}\n\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.detail-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n.detail-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs[_ngcontent-%COMP%] {\n  \n  margin-top: 0;\n}\n\n\n.step-payload-diff[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%]   mj-deep-diff[_ngcontent-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n\n.detail-pane-content[_ngcontent-%COMP%]:not(.with-tabs)   .json-viewer[_ngcontent-%COMP%] {\n  margin-top: 16px;\n}\n\n\n.workflow-running-badge[_ngcontent-%COMP%] {\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}"] }); }
+            i0.ɵɵconditional(ctx.activeTab === "details" ? 59 : -1);
+        } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.MJSectionPickerComponent, i3.MJButtonDirective, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i4.MjRecordLinkDirective, i5.CodeEditorComponent, i6.DeepDiffComponent, i7.SplitComponent, i7.SplitAreaComponent, i8.AIAgentRunTimelineComponent, i9.AIAgentRunAnalyticsComponent, i10.AIAgentRunStepDetailComponent, i11.AIAgentRunFlowComponent, i1.DecimalPipe, i1.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%], \n.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n\n.header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.header-info[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.meta-info[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  text-decoration: underline;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n\n.conversation-pill[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill[_ngcontent-%COMP%]   .pill-action[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill[_ngcontent-%COMP%]:hover   .pill-action[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n  padding: 4px 12px;\n  font-size: 11px;\n}\n\n\n.plan-mode-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n\n.configuration-bar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 1.2em;\n  color: var(--mj-text-muted);\n  width: 24px;\n  text-align: center;\n}\n\n.config-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.config-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-value[_ngcontent-%COMP%]   .entity-link[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value[_ngcontent-%COMP%]   .entity-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n.stat[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.stat[_ngcontent-%COMP%]   .value.success[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.stat[_ngcontent-%COMP%]   .value.error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.phone-section-picker[_ngcontent-%COMP%], \n.phone-desktop-note[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.tabs[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n\n.content-area[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\n  overflow: auto;\n}\n\n\n.tab-content[_ngcontent-%COMP%]   mj-accordion-panel[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n}\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 20px;\n  margin-bottom: 16px;\n  flex-wrap: wrap;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.action-link[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\n.timeline-container[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.timeline-container[_ngcontent-%COMP%]    > .timeline[_ngcontent-%COMP%] {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.timeline[_ngcontent-%COMP%] {\n  position: relative;\n  padding-left: 40px;\n}\n\n.timeline[_ngcontent-%COMP%]::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[_ngcontent-%COMP%] {\n  position: relative;\n  margin-bottom: 24px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n  transform: translateX(4px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] {\n  transform: translateX(8px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%]   .timeline-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success);\n}\n\n.timeline-marker[data-color=\"error\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.timeline-marker[data-color=\"info\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.timeline-marker[data-color=\"warning\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.timeline-marker[data-color=\"secondary\"][_ngcontent-%COMP%] {\n  border-color: var(--mj-text-muted);\n  color: var(--mj-text-muted);\n}\n\n.timeline-marker.small[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  font-size: 12px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.timeline-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.timeline-header[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-family: monospace;\n}\n\n.timeline-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.timeline-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .status[data-status=\"Completed\"][_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .status[data-status=\"Failed\"][_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .status[data-status=\"Running\"][_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .status[data-status=\"Paused\"][_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.duration[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.btn-expand[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n\n.timeline-children[_ngcontent-%COMP%] {\n  position: relative;\n  margin-top: 12px;\n  margin-bottom: 12px;\n}\n\n.timeline-children[_ngcontent-%COMP%]::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[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.child-item[_ngcontent-%COMP%]   .timeline-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-default);\n}\n\n\n.sub-run-timeline[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .timeline-marker[_ngcontent-%COMP%] {\n  border-width: 2px;\n}\n\n.sub-run-item[_ngcontent-%COMP%]   .timeline-content[_ngcontent-%COMP%] {\n  transition: all 0.2s ease;\n}\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.action-link[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n\n.details-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.error-message[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] {\n  padding: 20px;\n  max-height: 450px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.result-viewer[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  opacity: 0.3;\n  margin-bottom: 16px;\n}\n\n\n@media (max-width: 768px) {\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n  \n  .header-stats[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  \n  .header-right[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n  \n  .json-detail-pane[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n  \n  .timeline[_ngcontent-%COMP%] {\n    padding-left: 30px;\n  }\n  \n  .timeline-marker[_ngcontent-%COMP%] {\n    left: -25px;\n    width: 32px;\n    height: 32px;\n  }\n  \n  .timeline-content[_ngcontent-%COMP%] {\n    margin-left: 10px;\n  }\n}\n\n\n.entity-link[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  border-bottom-color: var(--mj-brand-primary-hover);\n}\n\n.entity-link[_ngcontent-%COMP%]:active {\n  color: var(--mj-brand-primary-hover);\n}\n\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.detail-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n.detail-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs[_ngcontent-%COMP%] {\n  \n  margin-top: 0;\n}\n\n\n.step-payload-diff[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%]   mj-deep-diff[_ngcontent-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n\n.detail-pane-content[_ngcontent-%COMP%]:not(.with-tabs)   .json-viewer[_ngcontent-%COMP%] {\n  margin-top: 16px;\n}\n\n\n.workflow-running-badge[_ngcontent-%COMP%] {\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\n\n\n@media (max-width: 768px) {\n  .tabs[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .phone-section-picker[_ngcontent-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n    padding: 4px 8px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-sunken);\n  }\n\n  .timeline-tab[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .timeline-tab[_ngcontent-%COMP%]    > as-split[_ngcontent-%COMP%] {\n    flex: 1 1 auto;\n    min-height: 0;\n    height: auto !important;\n  }\n\n  .phone-desktop-note[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    flex-shrink: 0;\n    padding: 10px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n  }\n\n  .phone-desktop-note[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n    min-width: 0;\n  }\n\n  .header-left[_ngcontent-%COMP%], \n   .header-info[_ngcontent-%COMP%] {\n    min-width: 0;\n  }\n\n  .meta-info[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  .run-id[_ngcontent-%COMP%] {\n    overflow-wrap: anywhere;\n  }\n}"] }); }
 };
 MJAIAgentRunFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: AI Agent Runs')
@@ -2041,7 +2101,7 @@ MJAIAgentRunFormComponentExtended = __decorate([
 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)\"\n                     class=\"entity-link\"\n                     [mjRecordLink]=\"record\"\n                     FieldName=\"AgentID\"\n                     [DisplayName]=\"agent.Name\"\n                     [HandleClick]=\"false\"\n                     (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 [mjRecordLink]=\"record\"\n                     FieldName=\"ParentRunID\"\n                     [HandleClick]=\"false\"\n                     (click)=\"navigateToParentRun()\"\n                     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                  [SavingWorkflow]=\"SavingWorkflow\"\n                  (closePanel)=\"closeJsonPanel()\"\n                  (navigateToActionLog)=\"navigateToActionLog($event)\"\n                  (copyToClipboard)=\"copyToClipboard($event)\"\n                  (SaveAsWorkflowRequested)=\"OnSaveAsWorkflowRequested($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 (ShowResultPanel) {\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"] }]
+        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)\"\n                     class=\"entity-link\"\n                     [mjRecordLink]=\"record\"\n                     FieldName=\"AgentID\"\n                     [DisplayName]=\"agent.Name\"\n                     [HandleClick]=\"false\"\n                     (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 [mjRecordLink]=\"record\"\n                     FieldName=\"ParentRunID\"\n                     [HandleClick]=\"false\"\n                     (click)=\"navigateToParentRun()\"\n                     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    <!-- Phone: the strip becomes one button that opens the Sections sheet (Timeline, Details) -->\n    <mj-section-picker class=\"phone-section-picker\"\n                       [Items]=\"SectionPickerItems\"\n                       [ActiveKey]=\"ActiveTab\"\n                       (ActiveKeyChange)=\"OnSectionPicked($event)\"></mj-section-picker>\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 timeline-tab\" style=\"height: 100%;\">\n          <as-split [direction]=\"TimelineSplitDirection\" 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                  [SavingWorkflow]=\"SavingWorkflow\"\n                  (closePanel)=\"closeJsonPanel()\"\n                  (navigateToActionLog)=\"navigateToActionLog($event)\"\n                  (copyToClipboard)=\"copyToClipboard($event)\"\n                  (SaveAsWorkflowRequested)=\"OnSaveAsWorkflowRequested($event)\">\n                </mj-ai-agent-run-step-detail>\n              </as-split-area>\n            }\n          </as-split>\n          <!-- Phone only: the desktop-only views are named, with a link to open the run there -->\n          <div class=\"phone-desktop-note\">\n            <span>Visualization and Analytics are desktop views for this run.</span>\n            <button mjButton variant=\"flat\" size=\"sm\" type=\"button\" (click)=\"CopyPageLink()\">\n              <i class=\"fas fa-link\" aria-hidden=\"true\"></i> Copy link\n            </button>\n          </div>\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 (ShowResultPanel) {\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/* Phone section picker and desktop-views note: hidden until the 768px rule below */\n.phone-section-picker,\n.phone-desktop-note {\n  display: none;\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  /* With Plan Mode and \"Workflow still running\" both showing, the badges push Refresh off the edge */\n  .header-right {\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\n/* Phone (375px): the tab strip becomes one section-picker button (Timeline, Details); the\n   desktop-only views are named under the timeline with a link to open the run on a desktop. */\n@media (max-width: 768px) {\n  .tabs {\n    display: none;\n  }\n\n  .phone-section-picker {\n    display: block;\n    flex-shrink: 0;\n    padding: 4px 8px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-sunken);\n  }\n\n  .timeline-tab {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .timeline-tab > as-split {\n    flex: 1 1 auto;\n    min-height: 0;\n    height: auto !important;\n  }\n\n  .phone-desktop-note {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    flex-shrink: 0;\n    padding: 10px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n  }\n\n  .phone-desktop-note > span {\n    min-width: 0;\n  }\n\n  .header-left,\n  .header-info {\n    min-width: 0;\n  }\n\n  .meta-info {\n    flex-wrap: wrap;\n  }\n\n  .run-id {\n    overflow-wrap: anywhere;\n  }\n}\n"] }]
     }], null, { TimelineComponent: [{
             type: ViewChild,
             args: [AIAgentRunTimelineComponent]
@@ -2049,5 +2109,5 @@ export { MJAIAgentRunFormComponentExtended };
             type: ViewChild,
             args: [AIAgentRunAnalyticsComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIAgentRunFormComponentExtended, { className: "MJAIAgentRunFormComponentExtended", filePath: "src/lib/custom/ai-agent-run/ai-agent-run.component.ts", lineNumber: 49 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIAgentRunFormComponentExtended, { className: "MJAIAgentRunFormComponentExtended", filePath: "src/lib/custom/ai-agent-run/ai-agent-run.component.ts", lineNumber: 50 }); })();
 //# sourceMappingURL=ai-agent-run.component.js.map