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

package/dist/lib/custom/AIAgentSessions/ai-agent-session-form.component.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var MJAIAgentSessionFormComponentExtended_1;
 import { Component, inject } from '@angular/core';
 import { CompositeKey, RunView } from '@memberjunction/core';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
@@ -11,6 +12,7 @@ import { BaseFormComponent, CUSTOM_LAYOUT_TOOLBAR_CONFIG } from '@memberjunction
 import { SharedService, NavigationService } from '@memberjunction/ng-shared';
 import { ApplicationManager } from '@memberjunction/ng-base-application';
 import { MJAIAgentSessionFormComponent } from '../../generated/Entities/MJAIAgentSession/mjaiagentsession.form.component';
+import { JoinHeroSummary, CountLabel } from '../../shared/phone-hero';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
@@ -23,7 +25,7 @@ const _forTrack1 = ($index, $item) => $item.row.ID;
 const _forTrack2 = ($index, $item) => $item.ID;
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 10)(1, "a", 45);
+    i0.ɵɵelementStart(0, "span", 10)(1, "a", 47);
     i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_11_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("AI Agents", ctx_r1.record.AgentID)); });
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -36,8 +38,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_11_Temp
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "i", 46);
-    i0.ɵɵelementStart(1, "span", 10)(2, "a", 47);
+    i0.ɵɵelement(0, "i", 48);
+    i0.ɵɵelementStart(1, "span", 10)(2, "a", 49);
     i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_12_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("AI Agents", ctx_r1.TargetAgentID)); });
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -50,13 +52,13 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_12_Temp
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 48);
+    i0.ɵɵelementStart(0, "span", 50);
     i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_15_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.NavigateToConversation()); });
-    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelement(1, "i", 42);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "i", 49);
+    i0.ɵɵelement(4, "i", 51);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -106,7 +108,7 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_54_Temp
     i0.ɵɵelementStart(0, "div", 20)(1, "span", 21);
     i0.ɵɵtext(2, "Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 50);
+    i0.ɵɵelementStart(3, "span", 52);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "number");
     i0.ɵɵelementEnd()();
@@ -117,7 +119,7 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_54_Temp
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_62_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 51);
+    i0.ɵɵelementStart(0, "a", 53);
     i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_62_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("AI Agents", ctx_r1.TargetAgentID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -133,7 +135,7 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_63_Temp
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_77_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 51);
+    i0.ɵɵelementStart(0, "a", 53);
     i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_77_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("MJ: AI Agent Sessions", ctx_r1.record.LastSessionID)); });
     i0.ɵɵtext(1, " Resumed from prior session ");
     i0.ɵɵelementEnd();
@@ -143,8 +145,23 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_78_Temp
     i0.ɵɵtext(1, "None (new session)");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_83_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 38);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_79_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 54);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_79_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleHeroDetails()); });
+    i0.ɵɵelementStart(1, "span", 55);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i", 56);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("aria-expanded", ctx_r1.HeroDetailsOpen);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.HeroSummary);
+} }
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_85_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -152,8 +169,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_83_Temp
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.RunTree.length);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_87_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 38);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_89_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -161,8 +178,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_87_Temp
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.Channels.length);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_91_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 38);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_93_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -170,207 +187,207 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_91_Temp
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.Transcript.length);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_96_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 43);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 45);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_97_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 44);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_99_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 46);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Message", ctx_r1.LoadError);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 53);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 58);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 58);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 63);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 7);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 59);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 64);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 67);
-    i0.ɵɵelement(1, "i", 69);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 72);
+    i0.ɵɵelement(1, "i", 74);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "number");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r9 = i0.ɵɵnextContext().$implicit;
+    const node_r10 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, node_r9.tokens, "1.0-0"), " tok");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, node_r10.tokens, "1.0-0"), " tok");
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 67);
-    i0.ɵɵelement(1, "i", 70);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 72);
+    i0.ɵɵelement(1, "i", 75);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "number");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r9 = i0.ɵɵnextContext().$implicit;
+    const node_r10 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, node_r9.cost, "1.2-4"));
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, node_r10.cost, "1.2-4"));
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 56);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Template_div_click_0_listener() { const node_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord(node_r9.entityName, node_r9.id)); });
-    i0.ɵɵelementStart(1, "div", 57);
-    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_2_Template, 1, 0, "i", 58)(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_3_Template, 1, 0, "i", 7)(4, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_4_Template, 1, 0, "i", 59);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 60)(6, "div", 61)(7, "h4", 62);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 61);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Template_div_click_0_listener() { const node_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord(node_r10.entityName, node_r10.id)); });
+    i0.ɵɵelementStart(1, "div", 62);
+    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_2_Template, 1, 0, "i", 63)(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_3_Template, 1, 0, "i", 7)(4, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_4_Template, 1, 0, "i", 64);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 65)(6, "div", 66)(7, "h4", 67);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 63);
+    i0.ɵɵelementStart(9, "span", 68);
     i0.ɵɵtext(10);
     i0.ɵɵpipe(11, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 64);
+    i0.ɵɵelementStart(12, "div", 69);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 65)(15, "span", 66);
+    i0.ɵɵelementStart(14, "div", 70)(15, "span", 71);
     i0.ɵɵelement(16, "i", 15);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "span", 67);
-    i0.ɵɵelement(19, "i", 68);
+    i0.ɵɵelementStart(18, "span", 72);
+    i0.ɵɵelement(19, "i", 73);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(21, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_21_Template, 4, 4, "span", 67);
-    i0.ɵɵconditionalCreate(22, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_22_Template, 4, 4, "span", 67);
+    i0.ɵɵconditionalCreate(21, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_21_Template, 4, 4, "span", 72);
+    i0.ɵɵconditionalCreate(22, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Conditional_22_Template, 4, 4, "span", 72);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const node_r9 = ctx.$implicit;
+    const node_r10 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵstyleProp("margin-left", node_r9.depth * 36, "px");
-    i0.ɵɵclassProp("run-node--child", node_r9.depth > 0);
+    i0.ɵɵstyleProp("margin-left", node_r10.depth * 36, "px");
+    i0.ɵɵclassProp("run-node--child", node_r10.depth > 0);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("run-marker--coagent", node_r9.isCoAgentRun)("run-marker--prompt", node_r9.kind === "promptRun");
+    i0.ɵɵclassProp("run-marker--coagent", node_r10.isCoAgentRun)("run-marker--prompt", node_r10.kind === "promptRun");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r9.kind === "promptRun" ? 2 : node_r9.isCoAgentRun ? 3 : 4);
+    i0.ɵɵconditional(node_r10.kind === "promptRun" ? 2 : node_r10.isCoAgentRun ? 3 : 4);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(node_r9.title);
+    i0.ɵɵtextInterpolate(node_r10.title);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 18, node_r9.startedAt, "h:mm:ss a"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 18, node_r10.startedAt, "h:mm:ss a"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(node_r9.subtitle);
+    i0.ɵɵtextInterpolate(node_r10.subtitle);
     i0.ɵɵadvance(2);
-    i0.ɵɵattribute("data-status", node_r9.status);
+    i0.ɵɵattribute("data-status", node_r10.status);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.GetRunStatusIcon(node_r9.status));
+    i0.ɵɵproperty("ngClass", ctx_r1.GetRunStatusIcon(node_r10.status));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", node_r9.status, " ");
+    i0.ɵɵtextInterpolate1(" ", node_r10.status, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatDuration(node_r9.startedAt, node_r9.completedAt), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatDuration(node_r10.startedAt, node_r10.completedAt), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r9.tokens != null && node_r9.tokens > 0 ? 21 : -1);
+    i0.ɵɵconditional(node_r10.tokens != null && node_r10.tokens > 0 ? 21 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r9.cost != null && node_r9.cost > 0 ? 22 : -1);
+    i0.ɵɵconditional(node_r10.cost != null && node_r10.cost > 0 ? 22 : -1);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Template, 23, 21, "div", 55, _forTrack0);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_For_2_Template, 23, 21, "div", 60, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.RunTree);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52);
-    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_1_Template, 1, 0, "mj-empty-state", 53)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_Template, 3, 0, "div", 54);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_1_Template, 1, 0, "mj-empty-state", 58)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Conditional_2_Template, 3, 0, "div", 59);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.RunTree.length === 0 ? 1 : 2);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 71);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 76);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 77);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 82);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const channel_r11 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵattribute("data-transport", channel_r11.transportType);
+    const channel_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵattribute("data-transport", channel_r12.transportType);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(channel_r11.transportType);
+    i0.ɵɵtextInterpolate(channel_r12.transportType);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 31);
     i0.ɵɵtext(1, "\u2014");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
     i0.ɵɵpipe(1, "date");
 } if (rf & 2) {
-    const channel_r11 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(1, 1, channel_r11.row.DisconnectedAt, "h:mm:ss a"), " ");
+    const channel_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(1, 1, channel_r12.row.DisconnectedAt, "h:mm:ss a"), " ");
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 31);
     i0.ɵɵtext(1, "\u2014");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 75);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Template_tr_click_0_listener() { const channel_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("MJ: AI Agent Session Channels", channel_r11.row.ID)); });
-    i0.ɵɵelementStart(1, "td")(2, "span", 76);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 80);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Template_tr_click_0_listener() { const channel_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("MJ: AI Agent Session Channels", channel_r12.row.ID)); });
+    i0.ɵɵelementStart(1, "td")(2, "span", 81);
     i0.ɵɵelement(3, "i", 15);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "td");
-    i0.ɵɵconditionalCreate(6, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_6_Template, 2, 2, "span", 77)(7, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_7_Template, 2, 0, "span", 31);
+    i0.ɵɵconditionalCreate(6, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Conditional_6_Template, 2, 2, "span", 82)(7, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Conditional_7_Template, 2, 0, "span", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "td")(9, "span", 78);
+    i0.ɵɵelementStart(8, "td")(9, "span", 83);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "td", 79);
+    i0.ɵɵelementStart(11, "td", 84);
     i0.ɵɵtext(12);
     i0.ɵɵpipe(13, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "td", 79);
+    i0.ɵɵelementStart(14, "td", 84);
     i0.ɵɵtext(15);
     i0.ɵɵpipe(16, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "td", 79);
-    i0.ɵɵconditionalCreate(18, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_18_Template, 2, 4)(19, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_19_Template, 2, 0, "span", 31);
+    i0.ɵɵelementStart(17, "td", 84);
+    i0.ɵɵconditionalCreate(18, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Conditional_18_Template, 2, 4)(19, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Conditional_19_Template, 2, 0, "span", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "td", 80);
+    i0.ɵɵelementStart(20, "td", 85);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const channel_r11 = ctx.$implicit;
+    const channel_r12 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.GetChannelIcon(channel_r11.row.Channel));
+    i0.ɵɵproperty("ngClass", ctx_r1.GetChannelIcon(channel_r12.row.Channel));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", channel_r11.row.Channel, " ");
+    i0.ɵɵtextInterpolate1(" ", channel_r12.row.Channel, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(channel_r11.transportType ? 6 : 7);
+    i0.ɵɵconditional(channel_r12.transportType ? 6 : 7);
     i0.ɵɵadvance(3);
-    i0.ɵɵattribute("data-status", channel_r11.row.Status);
+    i0.ɵɵattribute("data-status", channel_r12.row.Status);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(channel_r11.row.Status);
+    i0.ɵɵtextInterpolate(channel_r12.row.Status);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(13, 10, channel_r11.row.__mj_CreatedAt, "h:mm:ss a"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(13, 10, channel_r12.row.__mj_CreatedAt, "h:mm:ss a"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(16, 13, channel_r11.row.LastActiveAt, "h:mm:ss a"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(16, 13, channel_r12.row.LastActiveAt, "h:mm:ss a"));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(channel_r11.row.DisconnectedAt ? 18 : 19);
+    i0.ɵɵconditional(channel_r12.row.DisconnectedAt ? 18 : 19);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", channel_r11.row.SocketUrl || "");
+    i0.ɵɵproperty("title", channel_r12.row.SocketUrl || "");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", channel_r11.row.SocketUrl || "\u2014", " ");
+    i0.ɵɵtextInterpolate1(" ", channel_r12.row.SocketUrl || "\u2014", " ");
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72)(1, "table", 73)(2, "thead")(3, "tr")(4, "th");
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 77)(1, "table", 78)(2, "thead")(3, "tr")(4, "th");
     i0.ɵɵtext(5, "Channel");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "th");
@@ -392,97 +409,97 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵtext(17, "Socket");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(18, "tbody");
-    i0.ɵɵrepeaterCreate(19, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Template, 22, 16, "tr", 74, _forTrack1);
+    i0.ɵɵrepeaterCreate(19, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_For_20_Template, 22, 16, "tr", 79, _forTrack1);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(19);
     i0.ɵɵrepeater(ctx_r1.Channels);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52);
-    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_1_Template, 1, 0, "mj-empty-state", 71)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_Template, 21, 0, "div", 72);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_1_Template, 1, 0, "mj-empty-state", 76)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Conditional_2_Template, 21, 0, "div", 77);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.Channels.length === 0 ? 1 : 2);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 81);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 86);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 86);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 91);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 87);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 92);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 59);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 64);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const turn_r12 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵtextInterpolate1(" ", turn_r12.User || "User", " ");
+    const turn_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", turn_r13.User || "User", " ");
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const turn_r12 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵtextInterpolate1(" ", turn_r12.Agent || "Agent", " ");
+    const turn_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", turn_r13.Agent || "Agent", " ");
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85);
-    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_2_Template, 1, 0, "i", 86)(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_3_Template, 1, 0, "i", 87)(4, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_4_Template, 1, 0, "i", 59);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89)(1, "div", 90);
+    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_2_Template, 1, 0, "i", 91)(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_3_Template, 1, 0, "i", 92)(4, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_4_Template, 1, 0, "i", 64);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 88)(6, "div", 89);
-    i0.ɵɵconditionalCreate(7, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_7_Template, 1, 1)(8, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_8_Template, 1, 1);
-    i0.ɵɵelementStart(9, "span", 90);
+    i0.ɵɵelementStart(5, "div", 93)(6, "div", 94);
+    i0.ɵɵconditionalCreate(7, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_7_Template, 1, 1)(8, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Conditional_8_Template, 1, 1);
+    i0.ɵɵelementStart(9, "span", 95);
     i0.ɵɵtext(10);
     i0.ɵɵpipe(11, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 91);
+    i0.ɵɵelementStart(12, "div", 96);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const turn_r12 = ctx.$implicit;
-    i0.ɵɵclassProp("turn--user", turn_r12.Role === "User")("turn--error", turn_r12.Role === "Error");
+    const turn_r13 = ctx.$implicit;
+    i0.ɵɵclassProp("turn--user", turn_r13.Role === "User")("turn--error", turn_r13.Role === "Error");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(turn_r12.Role === "User" ? 2 : turn_r12.Role === "Error" ? 3 : 4);
+    i0.ɵɵconditional(turn_r13.Role === "User" ? 2 : turn_r13.Role === "Error" ? 3 : 4);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(turn_r12.Role === "User" ? 7 : 8);
+    i0.ɵɵconditional(turn_r13.Role === "User" ? 7 : 8);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 8, turn_r12.__mj_CreatedAt, "h:mm:ss a"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 8, turn_r13.__mj_CreatedAt, "h:mm:ss a"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(turn_r12.Message);
+    i0.ɵɵtextInterpolate(turn_r13.Message);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 82);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Template, 14, 11, "div", 83, _forTrack2);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_For_2_Template, 14, 11, "div", 88, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.Transcript);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52);
-    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_1_Template, 1, 0, "mj-empty-state", 81)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_Template, 3, 0, "div", 82);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_1_Template, 1, 0, "mj-empty-state", 86)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Conditional_2_Template, 3, 0, "div", 87);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.Transcript.length === 0 ? 1 : 2);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 41);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 43);
     i0.ɵɵtext(1, " Session Record ");
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 51);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_25_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("MJ: Conversations", ctx_r1.record.ConversationID)); });
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 53);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_25_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("MJ: Conversations", ctx_r1.record.ConversationID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -490,15 +507,15 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.record.Conversation || ctx_r1.record.ConversationID, " ");
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 51);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_36_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("MJ: AI Agent Sessions", ctx_r1.record.LastSessionID)); });
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 53);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_36_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("MJ: AI Agent Sessions", ctx_r1.record.LastSessionID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -506,20 +523,20 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.record.LastSessionID, " ");
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_37_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "None (root)");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_55_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 99);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_55_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 104);
     i0.ɵɵtext(1, " Config (Session State JSON) ");
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_55_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 92);
-    i0.ɵɵtemplate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_55_ng_template_1_Template, 2, 0, "ng-template", 93);
-    i0.ɵɵelementStart(2, "div", 97);
-    i0.ɵɵelement(3, "mj-code-editor", 98);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 97);
+    i0.ɵɵtemplate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_55_ng_template_1_Template, 2, 0, "ng-template", 98);
+    i0.ɵɵelementStart(2, "div", 102);
+    i0.ɵɵelement(3, "mj-code-editor", 103);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -527,69 +544,69 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngModel", ctx_r1.PrettyConfig)("language", "json")("readonly", true);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52)(1, "mj-accordion-panel", 92);
-    i0.ɵɵtemplate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_ng_template_2_Template, 2, 0, "ng-template", 93);
-    i0.ɵɵelementStart(3, "div", 94)(4, "div", 95)(5, "label");
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 57)(1, "mj-accordion-panel", 97);
+    i0.ɵɵtemplate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_ng_template_2_Template, 2, 0, "ng-template", 98);
+    i0.ɵɵelementStart(3, "div", 99)(4, "div", 100)(5, "label");
     i0.ɵɵtext(6, "ID");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 79);
+    i0.ɵɵelementStart(7, "span", 84);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 95)(10, "label");
+    i0.ɵɵelementStart(9, "div", 100)(10, "label");
     i0.ɵɵtext(11, "Agent (Co-Agent)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span")(13, "a", 51);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Template_a_click_13_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("AI Agents", ctx_r1.record.AgentID)); });
+    i0.ɵɵelementStart(12, "span")(13, "a", 53);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Template_a_click_13_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("AI Agents", ctx_r1.record.AgentID)); });
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 95)(16, "label");
+    i0.ɵɵelementStart(15, "div", 100)(16, "label");
     i0.ɵɵtext(17, "User");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "span")(19, "a", 51);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Template_a_click_19_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("Users", ctx_r1.record.UserID)); });
+    i0.ɵɵelementStart(18, "span")(19, "a", 53);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Template_a_click_19_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenEntityRecord("Users", ctx_r1.record.UserID)); });
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 95)(22, "label");
+    i0.ɵɵelementStart(21, "div", 100)(22, "label");
     i0.ɵɵtext(23, "Conversation");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(24, "span");
-    i0.ɵɵconditionalCreate(25, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_25_Template, 2, 1, "a", 30)(26, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_26_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(25, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_25_Template, 2, 1, "a", 30)(26, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_26_Template, 2, 0, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 95)(28, "label");
+    i0.ɵɵelementStart(27, "div", 100)(28, "label");
     i0.ɵɵtext(29, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 96);
+    i0.ɵɵelementStart(30, "span", 101);
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 95)(33, "label");
+    i0.ɵɵelementStart(32, "div", 100)(33, "label");
     i0.ɵɵtext(34, "Prior Session");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(35, "span");
-    i0.ɵɵconditionalCreate(36, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_36_Template, 2, 1, "a", 30)(37, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_37_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(36, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_36_Template, 2, 1, "a", 30)(37, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_37_Template, 2, 0, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(38, "div", 95)(39, "label");
+    i0.ɵɵelementStart(38, "div", 100)(39, "label");
     i0.ɵɵtext(40, "Host Instance");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(41, "span", 79);
+    i0.ɵɵelementStart(41, "span", 84);
     i0.ɵɵtext(42);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div", 95)(44, "label");
+    i0.ɵɵelementStart(43, "div", 100)(44, "label");
     i0.ɵɵtext(45, "Last Active At");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(46, "span");
     i0.ɵɵtext(47);
     i0.ɵɵpipe(48, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(49, "div", 95)(50, "label");
+    i0.ɵɵelementStart(49, "div", 100)(50, "label");
     i0.ɵɵtext(51, "Closed At");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(52, "span");
     i0.ɵɵtext(53);
     i0.ɵɵpipe(54, "date");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(55, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_55_Template, 4, 4, "mj-accordion-panel", 92);
+    i0.ɵɵconditionalCreate(55, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Conditional_55_Template, 4, 4, "mj-accordion-panel", 97);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -618,11 +635,11 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.record.Config_ ? 55 : -1);
 } }
-function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Template, 3, 1, "div", 52);
-    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Template, 3, 1, "div", 52);
-    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Template, 3, 1, "div", 52);
-    i0.ɵɵconditionalCreate(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Template, 56, 18, "div", 52);
+function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_0_Template, 3, 1, "div", 57);
+    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_1_Template, 3, 1, "div", 57);
+    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_2_Template, 3, 1, "div", 57);
+    i0.ɵɵconditionalCreate(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Conditional_3_Template, 56, 18, "div", 57);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.ActiveTab === "runs" ? 0 : -1);
@@ -718,37 +735,44 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Template(rf, ctx) {
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(76, "div", 29);
     i0.ɵɵconditionalCreate(77, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_77_Template, 2, 0, "a", 30)(78, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_78_Template, 2, 0, "span", 31);
-    i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(79, "div", 35)(80, "button", 36);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Template_button_click_80_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ChangeTab("runs")); });
-    i0.ɵɵelement(81, "i", 37);
-    i0.ɵɵtext(82, " Runs ");
-    i0.ɵɵconditionalCreate(83, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_83_Template, 2, 1, "span", 38);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(84, "button", 36);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Template_button_click_84_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ChangeTab("channels")); });
-    i0.ɵɵelement(85, "i", 39);
-    i0.ɵɵtext(86, " Channels ");
-    i0.ɵɵconditionalCreate(87, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_87_Template, 2, 1, "span", 38);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(88, "button", 36);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Template_button_click_88_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ChangeTab("transcript")); });
-    i0.ɵɵelement(89, "i", 40);
-    i0.ɵɵtext(90, " Transcript ");
-    i0.ɵɵconditionalCreate(91, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_91_Template, 2, 1, "span", 38);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(92, "button", 36);
-    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Template_button_click_92_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ChangeTab("details")); });
-    i0.ɵɵelement(93, "i", 41);
-    i0.ɵɵtext(94, " Details ");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵconditionalCreate(79, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_79_Template, 4, 2, "button", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(80, "mj-section-picker", 36);
+    i0.ɵɵlistener("ActiveKeyChange", function MJAIAgentSessionFormComponentExtended_Conditional_0_Template_mj_section_picker_ActiveKeyChange_80_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSectionPicked($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(81, "div", 37)(82, "button", 38);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Template_button_click_82_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ChangeTab("runs")); });
+    i0.ɵɵelement(83, "i", 39);
+    i0.ɵɵtext(84, " Runs ");
+    i0.ɵɵconditionalCreate(85, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_85_Template, 2, 1, "span", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(86, "button", 38);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Template_button_click_86_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ChangeTab("channels")); });
+    i0.ɵɵelement(87, "i", 41);
+    i0.ɵɵtext(88, " Channels ");
+    i0.ɵɵconditionalCreate(89, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_89_Template, 2, 1, "span", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(90, "button", 38);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Template_button_click_90_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ChangeTab("transcript")); });
+    i0.ɵɵelement(91, "i", 42);
+    i0.ɵɵtext(92, " Transcript ");
+    i0.ɵɵconditionalCreate(93, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_93_Template, 2, 1, "span", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(94, "button", 38);
+    i0.ɵɵlistener("click", function MJAIAgentSessionFormComponentExtended_Conditional_0_Template_button_click_94_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ChangeTab("details")); });
+    i0.ɵɵelement(95, "i", 43);
+    i0.ɵɵtext(96, " Details ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(95, "div", 42);
-    i0.ɵɵconditionalCreate(96, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_96_Template, 1, 0, "mj-loading", 43)(97, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_97_Template, 1, 1, "mj-empty-state", 44)(98, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Template, 4, 4);
+    i0.ɵɵelementStart(97, "div", 44);
+    i0.ɵɵconditionalCreate(98, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Template, 1, 0, "mj-loading", 45)(99, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_99_Template, 1, 1, "mj-empty-state", 46)(100, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_100_Template, 4, 4);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Record", ctx_r1.record)("FormComponent", ctx_r1)("ToolbarConfig", ctx_r1.ToolbarConfig)("WidthMode", "full-width");
-    i0.ɵɵadvance(11);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("hero-view", !ctx_r1.EditMode)("hero-compact", !ctx_r1.EditMode && !ctx_r1.HeroDetailsOpen);
+    i0.ɵɵadvance(9);
     i0.ɵɵconditional(ctx_r1.record.AgentID ? 11 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.TargetAgentID ? 12 : -1);
@@ -767,7 +791,7 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.User);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(35, 36, ctx_r1.record.__mj_CreatedAt, "medium"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(35, 43, ctx_r1.record.__mj_CreatedAt, "medium"));
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.record.ClosedAt ? 36 : 37);
     i0.ɵɵadvance(6);
@@ -786,22 +810,26 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Template(rf, ctx) {
     i0.ɵɵtextInterpolate(ctx_r1.record.HostInstanceID || "\u2014");
     i0.ɵɵadvance(7);
     i0.ɵɵconditional(ctx_r1.record.LastSessionID ? 77 : 78);
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r1.EditMode && ctx_r1.HeroSummary ? 79 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Items", ctx_r1.SectionPickerItems)("ActiveKey", ctx_r1.ActiveTab);
+    i0.ɵɵadvance(2);
     i0.ɵɵclassProp("active", ctx_r1.ActiveTab === "runs");
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.RunTree.length > 0 ? 83 : -1);
+    i0.ɵɵconditional(ctx_r1.RunTree.length > 0 ? 85 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("active", ctx_r1.ActiveTab === "channels");
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.Channels.length > 0 ? 87 : -1);
+    i0.ɵɵconditional(ctx_r1.Channels.length > 0 ? 89 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("active", ctx_r1.ActiveTab === "transcript");
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.Transcript.length > 0 ? 91 : -1);
+    i0.ɵɵconditional(ctx_r1.Transcript.length > 0 ? 93 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("active", ctx_r1.ActiveTab === "details");
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.Loading ? 96 : ctx_r1.LoadError ? 97 : 98);
+    i0.ɵɵconditional(ctx_r1.Loading ? 98 : ctx_r1.LoadError ? 99 : 100);
 } }
 /**
  * Custom form for 'MJ: AI Agent Sessions' — the observability surface for
@@ -812,6 +840,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Template(rf, ctx) {
 let MJAIAgentSessionFormComponentExtended = class MJAIAgentSessionFormComponentExtended extends MJAIAgentSessionFormComponent {
     constructor() {
         super(...arguments);
+        /** Phone hero (6A): whether the summary line is expanded to show the rest of the hero. */
+        this.HeroDetailsOpen = false;
         /** Hide the generated-section controls — this form has a fully custom layout. */
         this.ToolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
         // UI state
@@ -833,6 +863,22 @@ let MJAIAgentSessionFormComponentExtended = class MJAIAgentSessionFormComponentE
         this.navigationService = inject(NavigationService);
         this.appManager = inject(ApplicationManager);
     }
+    static { MJAIAgentSessionFormComponentExtended_1 = this; }
+    /** Toggles the phone hero between its compact identity row and the full hero. */
+    ToggleHeroDetails() {
+        this.HeroDetailsOpen = !this.HeroDetailsOpen;
+        this.cdr.markForCheck();
+    }
+    /** The phone hero's one-line summary of what the compact hero leaves out. */
+    get HeroSummary() {
+        const agent = this.TargetAgentName ? `${this.record.Agent} → ${this.TargetAgentName}` : this.record.Agent;
+        return JoinHeroSummary([
+            agent,
+            this.SessionDuration,
+            CountLabel(this.Channels.length, 'channel'),
+            this.DelegatedRunCount > 0 ? CountLabel(this.DelegatedRunCount, 'delegated run') : null,
+        ]);
+    }
     /** Sessions read best full-width, like the agent-run form. */
     getDefaultFormWidthMode() { return 'full-width'; }
     /** Custom-layout form owns its entire body; suppress auto-filled relationship sections. */
@@ -1039,6 +1085,23 @@ let MJAIAgentSessionFormComponentExtended = class MJAIAgentSessionFormComponentE
     ChangeTab(tab) {
         this.ActiveTab = tab;
     }
+    /** The tab strip as `mj-section-picker` items: strip order, a count only where the tab has rows. */
+    get SectionPickerItems() {
+        const count = (n) => (n > 0 ? n : null);
+        return [
+            { Key: 'runs', Title: 'Runs', Icon: 'fas fa-diagram-project', Count: count(this.RunTree.length) },
+            { Key: 'channels', Title: 'Channels', Icon: 'fas fa-plug', Count: count(this.Channels.length) },
+            { Key: 'transcript', Title: 'Transcript', Icon: 'fas fa-comments', Count: count(this.Transcript.length) },
+            { Key: 'details', Title: 'Details', Icon: 'fas fa-info-circle', Count: null },
+        ];
+    }
+    /** A pick from the phone section sheet; goes through ChangeTab. An unknown key is ignored. */
+    OnSectionPicked(key) {
+        const tab = MJAIAgentSessionFormComponentExtended_1.phoneTabs.find((t) => t === key);
+        if (tab)
+            this.ChangeTab(tab);
+    }
+    static { this.phoneTabs = ['runs', 'channels', 'transcript', 'details']; }
     GetStatusIcon(status) {
         switch (status) {
             case 'Active': return 'fa-tower-broadcast';
@@ -1154,19 +1217,19 @@ let MJAIAgentSessionFormComponentExtended = class MJAIAgentSessionFormComponentE
         });
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJAIAgentSessionFormComponentExtended_BaseFactory; return function MJAIAgentSessionFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJAIAgentSessionFormComponentExtended_BaseFactory || (ɵMJAIAgentSessionFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJAIAgentSessionFormComponentExtended)))(__ngFactoryType__ || MJAIAgentSessionFormComponentExtended); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAIAgentSessionFormComponentExtended, selectors: [["mj-ai-agent-session-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[3, "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form", "ai-agent-session-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [1, "fas", "fa-tower-broadcast"], [1, "header-info"], [1, "meta-info"], [1, "agent-name"], [1, "run-id"], ["title", "Open conversation in Chat app", 1, "conversation-pill"], [1, "header-right"], [1, "status-badge"], [1, "fas", 3, "ngClass"], [1, "header-actions"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fas", "fa-sync-alt"], [1, "header-stats"], [1, "stat"], [1, "label"], [1, "value"], ["href", "javascript:void(0)", "FieldName", "UserID", 1, "entity-link", 3, "click", "mjRecordLink", "HandleClick"], [1, "configuration-bar"], [1, "config-item"], [1, "fas", "fa-bullseye"], [1, "config-content"], [1, "config-label"], [1, "config-value"], ["href", "javascript:void(0)", 1, "entity-link"], [1, "muted"], [1, "fas", "fa-server"], [1, "config-value", "mono"], [1, "fas", "fa-link"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-diagram-project"], [1, "tab-count"], [1, "fas", "fa-plug"], [1, "fas", "fa-comments"], [1, "fas", "fa-info-circle"], [1, "content-area"], ["text", "Loading session data...", "size", "medium"], ["Variant", "error", 3, "Message"], ["href", "javascript:void(0)", "FieldName", "AgentID", 1, "entity-link", 3, "click", "mjRecordLink", "HandleClick"], [1, "fas", "fa-arrow-right-long", "target-arrow"], ["href", "javascript:void(0)", "mjRecordLink", "", 1, "entity-link", 3, "click", "EntityName", "RecordID", "DisplayName", "HandleClick"], ["title", "Open conversation in Chat app", 1, "conversation-pill", 3, "click"], [1, "fas", "fa-external-link-alt", "pill-action"], [1, "value", "success"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], [1, "tab-content"], ["Icon", "fa-solid fa-diagram-project", "Title", "No Runs", "Message", "No agent runs have been recorded for this session yet."], [1, "run-tree"], ["title", "Open record", 1, "run-node", 3, "run-node--child", "margin-left"], ["title", "Open record", 1, "run-node", 3, "click"], [1, "run-marker"], [1, "fas", "fa-microchip"], [1, "fas", "fa-robot"], [1, "run-body"], [1, "run-headrow"], [1, "run-title"], [1, "run-time"], [1, "run-sub"], [1, "run-foot"], [1, "run-status"], [1, "run-chip"], [1, "fas", "fa-clock"], [1, "fas", "fa-coins"], [1, "fas", "fa-dollar-sign"], ["Icon", "fa-solid fa-plug", "Title", "No Channels", "Message", "No channel instances were attached to this session."], [1, "channels-grid-wrap"], [1, "channels-grid"], ["title", "Open record"], ["title", "Open record", 3, "click"], [1, "cell-strong"], [1, "transport-pill"], [1, "channel-status-pill"], [1, "mono"], [1, "mono", "socket-cell", 3, "title"], ["Icon", "fa-solid fa-comments", "Title", "No Transcript", "Message", "No conversation messages were stamped with this session."], [1, "transcript-thread"], [1, "turn", 3, "turn--user", "turn--error"], [1, "turn"], [1, "turn-avatar"], [1, "fas", "fa-user"], [1, "fas", "fa-triangle-exclamation"], [1, "turn-main"], [1, "turn-meta"], [1, "turn-time"], [1, "turn-bubble"], [3, "Expanded"], ["mjAccordionTitle", ""], [1, "details-grid"], [1, "detail-item"], [1, "status-badge", "small"], [1, "config-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], [1, "fas", "fa-code"]], template: function MJAIAgentSessionFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MJAIAgentSessionFormComponentExtended_Conditional_0_Template, 99, 39, "mj-record-form-container", 0);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAIAgentSessionFormComponentExtended, selectors: [["mj-ai-agent-session-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[3, "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form", "ai-agent-session-form"], [1, "header", "phone-hero"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [1, "fas", "fa-tower-broadcast"], [1, "header-info"], [1, "meta-info", "phone-hero-detail"], [1, "agent-name"], [1, "run-id"], ["title", "Open conversation in Chat app", 1, "conversation-pill"], [1, "header-right"], [1, "status-badge"], [1, "fas", 3, "ngClass"], [1, "header-actions", "phone-hero-detail"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fas", "fa-sync-alt"], [1, "header-stats", "phone-hero-detail", "phone-hero-stats"], [1, "stat"], [1, "label"], [1, "value"], ["href", "javascript:void(0)", "FieldName", "UserID", 1, "entity-link", 3, "click", "mjRecordLink", "HandleClick"], [1, "configuration-bar", "phone-hero-detail"], [1, "config-item"], [1, "fas", "fa-bullseye"], [1, "config-content"], [1, "config-label"], [1, "config-value"], ["href", "javascript:void(0)", 1, "entity-link"], [1, "muted"], [1, "fas", "fa-server"], [1, "config-value", "mono"], [1, "fas", "fa-link"], ["type", "button", 1, "phone-hero-summary"], [1, "phone-section-picker", 3, "ActiveKeyChange", "Items", "ActiveKey"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-diagram-project"], [1, "tab-count"], [1, "fas", "fa-plug"], [1, "fas", "fa-comments"], [1, "fas", "fa-info-circle"], [1, "content-area"], ["text", "Loading session data...", "size", "medium"], ["Variant", "error", 3, "Message"], ["href", "javascript:void(0)", "FieldName", "AgentID", 1, "entity-link", 3, "click", "mjRecordLink", "HandleClick"], [1, "fas", "fa-arrow-right-long", "target-arrow"], ["href", "javascript:void(0)", "mjRecordLink", "", 1, "entity-link", 3, "click", "EntityName", "RecordID", "DisplayName", "HandleClick"], ["title", "Open conversation in Chat app", 1, "conversation-pill", 3, "click"], [1, "fas", "fa-external-link-alt", "pill-action"], [1, "value", "success"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], ["type", "button", 1, "phone-hero-summary", 3, "click"], [1, "phone-hero-summary-text"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "tab-content"], ["Icon", "fa-solid fa-diagram-project", "Title", "No Runs", "Message", "No agent runs have been recorded for this session yet."], [1, "run-tree"], ["title", "Open record", 1, "run-node", 3, "run-node--child", "margin-left"], ["title", "Open record", 1, "run-node", 3, "click"], [1, "run-marker"], [1, "fas", "fa-microchip"], [1, "fas", "fa-robot"], [1, "run-body"], [1, "run-headrow"], [1, "run-title"], [1, "run-time"], [1, "run-sub"], [1, "run-foot"], [1, "run-status"], [1, "run-chip"], [1, "fas", "fa-clock"], [1, "fas", "fa-coins"], [1, "fas", "fa-dollar-sign"], ["Icon", "fa-solid fa-plug", "Title", "No Channels", "Message", "No channel instances were attached to this session."], [1, "channels-grid-wrap"], [1, "channels-grid"], ["title", "Open record"], ["title", "Open record", 3, "click"], [1, "cell-strong"], [1, "transport-pill"], [1, "channel-status-pill"], [1, "mono"], [1, "mono", "socket-cell", 3, "title"], ["Icon", "fa-solid fa-comments", "Title", "No Transcript", "Message", "No conversation messages were stamped with this session."], [1, "transcript-thread"], [1, "turn", 3, "turn--user", "turn--error"], [1, "turn"], [1, "turn-avatar"], [1, "fas", "fa-user"], [1, "fas", "fa-triangle-exclamation"], [1, "turn-main"], [1, "turn-meta"], [1, "turn-time"], [1, "turn-bubble"], [3, "Expanded"], ["mjAccordionTitle", ""], [1, "details-grid"], [1, "detail-item"], [1, "status-badge", "small"], [1, "config-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], [1, "fas", "fa-code"]], template: function MJAIAgentSessionFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MJAIAgentSessionFormComponentExtended_Conditional_0_Template, 101, 46, "mj-record-form-container", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.record ? 0 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.MJEmptyStateComponent, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i4.MjRecordFormContainerComponent, i4.MjRecordLinkDirective, i5.CodeEditorComponent, i6.LoadingComponent, i1.DecimalPipe, i1.DatePipe], styles: [".ai-agent-session-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}\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  align-items: center;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  flex-wrap: wrap;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.target-arrow[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\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}\n\n.conversation-pill[_ngcontent-%COMP%]   .pill-action[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.6;\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=\"Active\"][_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=\"Idle\"][_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=\"Closed\"][_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.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  flex-wrap: wrap;\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.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  flex-wrap: wrap;\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.muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n}\n\n.mono[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 13px;\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.tab-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 1px 7px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.tab.active[_ngcontent-%COMP%]   .tab-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  padding: 20px;\n}\n\n.tab-content[_ngcontent-%COMP%]   mj-accordion-panel[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n}\n\n\n.run-tree[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 1000px;\n}\n\n.run-node[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 14px;\n  align-items: flex-start;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 14px 18px;\n  box-shadow: var(--mj-shadow-sm);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-node[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n  transform: translateX(2px);\n}\n\n.run-node--child[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n.run-marker[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n.run-marker--coagent[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.run-marker--prompt[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.run-body[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.run-headrow[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.run-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.run-time[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.run-sub[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.run-foot[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.run-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.run-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.run-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.run-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.run-status[data-status=\"Cancelled\"][_ngcontent-%COMP%], \n.run-status[data-status=\"AwaitingFeedback\"][_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.run-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 12px;\n  padding: 2px 10px;\n}\n\n\n.channels-grid-wrap[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  overflow: auto;\n}\n\n.channels-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13.5px;\n}\n\n.channels-grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 10px 14px;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n}\n\n.channels-grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  vertical-align: middle;\n}\n\n.channels-grid[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.channels-grid[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.channels-grid[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n  border-bottom: none;\n}\n\n.cell-strong[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.cell-strong[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.transport-pill[_ngcontent-%COMP%], \n.channel-status-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.transport-pill[data-transport=\"WebRTC\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.transport-pill[data-transport=\"WebSocket\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Connected\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Connecting\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Paused\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.socket-cell[_ngcontent-%COMP%] {\n  max-width: 220px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.transcript-thread[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 860px;\n  margin: 0 auto;\n}\n\n.turn[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n}\n\n.turn--user[_ngcontent-%COMP%] {\n  flex-direction: row-reverse;\n}\n\n.turn-avatar[_ngcontent-%COMP%] {\n  width: 34px;\n  height: 34px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\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) 25%, transparent);\n}\n\n.turn--user[_ngcontent-%COMP%]   .turn-avatar[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-border-default);\n}\n\n.turn--error[_ngcontent-%COMP%]   .turn-avatar[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 25%, transparent);\n}\n\n.turn-main[_ngcontent-%COMP%] {\n  max-width: 70%;\n  min-width: 0;\n}\n\n.turn--user[_ngcontent-%COMP%]   .turn-main[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n\n.turn-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.turn-time[_ngcontent-%COMP%] {\n  font-weight: 400;\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.turn-bubble[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  border-top-left-radius: 4px;\n  padding: 10px 14px;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.turn--user[_ngcontent-%COMP%]   .turn-bubble[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 12px;\n  border-top-right-radius: 4px;\n}\n\n.turn--error[_ngcontent-%COMP%]   .turn-bubble[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 25%, transparent);\n  color: var(--mj-status-error-text);\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[_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.config-viewer[_ngcontent-%COMP%] {\n  padding: 20px;\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  cursor: pointer;\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\n@media (max-width: 768px) {\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .turn-main[_ngcontent-%COMP%] {\n    max-width: 90%;\n  }\n}"] }); }
+        } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.MJEmptyStateComponent, i3.MJSectionPickerComponent, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i4.MjRecordFormContainerComponent, i4.MjRecordLinkDirective, i5.CodeEditorComponent, i6.LoadingComponent, i1.DecimalPipe, i1.DatePipe], styles: [".ai-agent-session-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}\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  align-items: center;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  flex-wrap: wrap;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.target-arrow[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\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}\n\n.conversation-pill[_ngcontent-%COMP%]   .pill-action[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.6;\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=\"Active\"][_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=\"Idle\"][_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=\"Closed\"][_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.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  flex-wrap: wrap;\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.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  flex-wrap: wrap;\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.muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n}\n\n.mono[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 13px;\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.tab-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 1px 7px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.tab.active[_ngcontent-%COMP%]   .tab-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  padding: 20px;\n}\n\n.tab-content[_ngcontent-%COMP%]   mj-accordion-panel[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n}\n\n\n.run-tree[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 1000px;\n}\n\n.run-node[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 14px;\n  align-items: flex-start;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 14px 18px;\n  box-shadow: var(--mj-shadow-sm);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-node[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n  transform: translateX(2px);\n}\n\n.run-node--child[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n.run-marker[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n.run-marker--coagent[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.run-marker--prompt[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.run-body[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.run-headrow[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.run-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.run-time[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.run-sub[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.run-foot[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.run-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.run-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.run-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.run-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.run-status[data-status=\"Cancelled\"][_ngcontent-%COMP%], \n.run-status[data-status=\"AwaitingFeedback\"][_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.run-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 12px;\n  padding: 2px 10px;\n}\n\n\n.channels-grid-wrap[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  overflow: auto;\n}\n\n.channels-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13.5px;\n}\n\n.channels-grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 10px 14px;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n}\n\n.channels-grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  vertical-align: middle;\n}\n\n.channels-grid[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.channels-grid[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.channels-grid[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n  border-bottom: none;\n}\n\n.cell-strong[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.cell-strong[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.transport-pill[_ngcontent-%COMP%], \n.channel-status-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.transport-pill[data-transport=\"WebRTC\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.transport-pill[data-transport=\"WebSocket\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Connected\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Connecting\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Paused\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.socket-cell[_ngcontent-%COMP%] {\n  max-width: 220px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.transcript-thread[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 860px;\n  margin: 0 auto;\n}\n\n.turn[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n}\n\n.turn--user[_ngcontent-%COMP%] {\n  flex-direction: row-reverse;\n}\n\n.turn-avatar[_ngcontent-%COMP%] {\n  width: 34px;\n  height: 34px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\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) 25%, transparent);\n}\n\n.turn--user[_ngcontent-%COMP%]   .turn-avatar[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-border-default);\n}\n\n.turn--error[_ngcontent-%COMP%]   .turn-avatar[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 25%, transparent);\n}\n\n.turn-main[_ngcontent-%COMP%] {\n  max-width: 70%;\n  min-width: 0;\n}\n\n.turn--user[_ngcontent-%COMP%]   .turn-main[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n\n.turn-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.turn-time[_ngcontent-%COMP%] {\n  font-weight: 400;\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.turn-bubble[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  border-top-left-radius: 4px;\n  padding: 10px 14px;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.turn--user[_ngcontent-%COMP%]   .turn-bubble[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 12px;\n  border-top-right-radius: 4px;\n}\n\n.turn--error[_ngcontent-%COMP%]   .turn-bubble[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 25%, transparent);\n  color: var(--mj-status-error-text);\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[_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.config-viewer[_ngcontent-%COMP%] {\n  padding: 20px;\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  cursor: pointer;\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\n@media (max-width: 768px) {\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .turn-main[_ngcontent-%COMP%] {\n    max-width: 90%;\n  }\n}\n\n\n.phone-section-picker[_ngcontent-%COMP%] {\n  display: none;\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  .header.phone-hero.hero-view[_ngcontent-%COMP%]   .header-content[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .header.phone-hero.hero-view[_ngcontent-%COMP%]   .header-left[_ngcontent-%COMP%] {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n.phone-hero-summary[_ngcontent-%COMP%], \n.phone-hero-only[_ngcontent-%COMP%] {\n    display: none;\n}\n\n@media (max-width: 768px) {\n    .phone-hero[_ngcontent-%COMP%] {\n        padding: 12px !important;\n    }\n\n    \n    .phone-hero.hero-compact[_ngcontent-%COMP%]   .phone-hero-detail[_ngcontent-%COMP%], \n   .phone-hero.hero-view[_ngcontent-%COMP%]   .phone-hero-hide[_ngcontent-%COMP%] {\n        display: none !important;\n    }\n\n    .phone-hero-only[_ngcontent-%COMP%] {\n        display: inline-flex;\n    }\n\n    \n    .phone-hero[_ngcontent-%COMP%]   .phone-hero-stats[_ngcontent-%COMP%] {\n        display: grid !important;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    .phone-hero-status[_ngcontent-%COMP%] {\n        align-items: center;\n        gap: 4px;\n        margin-left: 8px;\n        padding: 2px 8px;\n        border-radius: var(--mj-radius-full, 999px);\n        color: var(--mj-text-secondary);\n        background: var(--mj-bg-surface-sunken);\n        font-size: var(--mj-text-xs);\n        font-weight: var(--mj-font-semibold);\n        vertical-align: middle;\n        white-space: nowrap;\n    }\n\n    \n    .phone-hero-status[data-status=\"running\"][_ngcontent-%COMP%] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n    .phone-hero-status[data-status=\"success\"][_ngcontent-%COMP%] { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); }\n    .phone-hero-status[data-status=\"error\"][_ngcontent-%COMP%]   { color: var(--mj-status-error-text);   background: var(--mj-status-error-bg); }\n    .phone-hero-status[data-status=\"info\"][_ngcontent-%COMP%]    { color: var(--mj-status-info-text);    background: var(--mj-status-info-bg); }\n\n    .phone-hero-top[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n    }\n\n    .phone-hero-actions[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .phone-hero[_ngcontent-%COMP%]   .phone-hero-run[_ngcontent-%COMP%] {\n        width: 100%;\n        min-height: 44px;\n        justify-content: center;\n    }\n\n    \n\n    .phone-hero-summary[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        min-height: 44px;\n        margin-top: 8px;\n        padding: 0 4px;\n        border: 0;\n        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: var(--mj-text-sm);\n        text-align: left;\n        cursor: pointer;\n        opacity: 0.85;\n    }\n\n    .phone-hero-summary[_ngcontent-%COMP%]:focus-visible {\n        outline: none;\n        box-shadow: var(--mj-focus-ring);\n    }\n\n    .phone-hero-summary-text[_ngcontent-%COMP%] {\n        flex: 1 1 auto;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .phone-hero-summary[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        transition: transform 0.15s ease;\n    }\n\n    .phone-hero-summary[aria-expanded=\"true\"][_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        transform: rotate(180deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .phone-hero-summary[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        transition: none;\n    }\n}"] }); }
 };
-MJAIAgentSessionFormComponentExtended = __decorate([
+MJAIAgentSessionFormComponentExtended = MJAIAgentSessionFormComponentExtended_1 = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: AI Agent Sessions')
 ], MJAIAgentSessionFormComponentExtended);
 export { MJAIAgentSessionFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIAgentSessionFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-agent-session-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"ToolbarConfig\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n\n  <div class=\"record-form ai-agent-session-form\">\n    <!-- Header (mirrors the AI Agent Run form header) -->\n    <div class=\"header\">\n      <div class=\"header-content\">\n        <div class=\"header-left\">\n          <div class=\"icon-wrapper\">\n            <i class=\"fas fa-tower-broadcast\"></i>\n          </div>\n          <div class=\"header-info\">\n            <h2>AI Agent Session</h2>\n            <div class=\"meta-info\">\n              @if (record.AgentID) {\n                <span class=\"agent-name\">\n                  <a href=\"javascript:void(0)\"\n                     class=\"entity-link\"\n                     [mjRecordLink]=\"record\"\n                     FieldName=\"AgentID\"\n                     [HandleClick]=\"false\"\n                     (click)=\"OpenEntityRecord('AI Agents', record.AgentID)\">\n                    {{ record.Agent || 'Agent' }}\n                  </a>\n                </span>\n              }\n              @if (TargetAgentID) {\n                <i class=\"fas fa-arrow-right-long target-arrow\"></i>\n                <span class=\"agent-name\">\n                  <a href=\"javascript:void(0)\"\n                     class=\"entity-link\"\n                     mjRecordLink\n                     [EntityName]=\"'MJ: AI Agents'\"\n                     [RecordID]=\"TargetAgentID\"\n                     [DisplayName]=\"TargetAgentName || 'Target agent'\"\n                     [HandleClick]=\"false\"\n                     (click)=\"OpenEntityRecord('AI Agents', TargetAgentID)\">\n                    {{ TargetAgentName || 'Target agent' }}\n                  </a>\n                </span>\n              }\n              <span class=\"run-id\">{{ ShortSessionId }}</span>\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>{{ record.Conversation || '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          <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n            <i class=\"fas\" [ngClass]=\"GetStatusIcon(record.Status)\"></i>\n            {{ record.Status }}\n          </div>\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\n      <div class=\"header-stats\">\n        <div class=\"stat\">\n          <span class=\"label\">User</span>\n          <span class=\"value\">\n            <a href=\"javascript:void(0)\"\n               class=\"entity-link\"\n               [mjRecordLink]=\"record\"\n               FieldName=\"UserID\"\n               [HandleClick]=\"false\"\n               (click)=\"OpenEntityRecord('Users', record.UserID)\">{{ record.User }}</a>\n          </span>\n        </div>\n        <div class=\"stat\">\n          <span class=\"label\">Started</span>\n          <span class=\"value\">{{ record.__mj_CreatedAt | date:'medium' }}</span>\n        </div>\n        @if (record.ClosedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Closed</span>\n            <span class=\"value\">{{ record.ClosedAt | date:'medium' }}</span>\n          </div>\n        } @else {\n          <div class=\"stat\">\n            <span class=\"label\">Last Active</span>\n            <span class=\"value\">{{ record.LastActiveAt | date:'medium' }}</span>\n          </div>\n        }\n        <div class=\"stat\">\n          <span class=\"label\">Duration</span>\n          <span class=\"value\">{{ SessionDuration }}</span>\n        </div>\n        <div class=\"stat\">\n          <span class=\"label\">Channels</span>\n          <span class=\"value\">{{ Channels.length }}</span>\n        </div>\n        <div class=\"stat\">\n          <span class=\"label\">Delegated Runs</span>\n          <span class=\"value\">{{ DelegatedRunCount }}</span>\n        </div>\n        @if (SessionTokens != null && SessionTokens > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Tokens</span>\n            <span class=\"value\">{{ SessionTokens | number:'1.0-0' }}</span>\n          </div>\n        }\n        @if (SessionCost != null && SessionCost > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Cost</span>\n            <span class=\"value success\">${{ SessionCost | number:'1.2-4' }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Config bar: target agent / host instance / continuation -->\n      <div class=\"configuration-bar\">\n        <div class=\"config-item\">\n          <i class=\"fas fa-bullseye\"></i>\n          <div class=\"config-content\">\n            <div class=\"config-label\">Target Agent</div>\n            <div class=\"config-value\">\n              @if (TargetAgentID) {\n                <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('AI Agents', TargetAgentID)\">\n                  {{ TargetAgentName || 'Unknown' }}\n                </a>\n              } @else {\n                <span class=\"muted\">None</span>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"config-item\">\n          <i class=\"fas fa-server\"></i>\n          <div class=\"config-content\">\n            <div class=\"config-label\">Host Instance</div>\n            <div class=\"config-value mono\">{{ record.HostInstanceID || '\u2014' }}</div>\n          </div>\n        </div>\n        <div class=\"config-item\">\n          <i class=\"fas fa-link\"></i>\n          <div class=\"config-content\">\n            <div class=\"config-label\">Continuation</div>\n            <div class=\"config-value\">\n              @if (record.LastSessionID) {\n                <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('MJ: AI Agent Sessions', record.LastSessionID)\">\n                  Resumed from prior session\n                </a>\n              } @else {\n                <span class=\"muted\">None (new session)</span>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"tabs\">\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'runs'\" (click)=\"ChangeTab('runs')\">\n        <i class=\"fas fa-diagram-project\"></i> Runs\n        @if (RunTree.length > 0) { <span class=\"tab-count\">{{ RunTree.length }}</span> }\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'channels'\" (click)=\"ChangeTab('channels')\">\n        <i class=\"fas fa-plug\"></i> Channels\n        @if (Channels.length > 0) { <span class=\"tab-count\">{{ Channels.length }}</span> }\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'transcript'\" (click)=\"ChangeTab('transcript')\">\n        <i class=\"fas fa-comments\"></i> Transcript\n        @if (Transcript.length > 0) { <span class=\"tab-count\">{{ Transcript.length }}</span> }\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      @if (Loading) {\n        <mj-loading text=\"Loading session data...\" size=\"medium\"></mj-loading>\n      } @else if (LoadError) {\n        <mj-empty-state\n          Variant=\"error\"\n          [Message]=\"LoadError\" />\n      } @else {\n\n        <!-- Runs tab: the session's delegated run tree -->\n        @if (ActiveTab === 'runs') {\n          <div class=\"tab-content\">\n            @if (RunTree.length === 0) {\n              <mj-empty-state\n                Icon=\"fa-solid fa-diagram-project\"\n                Title=\"No Runs\"\n                Message=\"No agent runs have been recorded for this session yet.\" />\n            } @else {\n              <div class=\"run-tree\">\n                @for (node of RunTree; track node.id) {\n                  <div class=\"run-node\"\n                       [class.run-node--child]=\"node.depth > 0\"\n                       [style.margin-left.px]=\"node.depth * 36\"\n                       (click)=\"OpenEntityRecord(node.entityName, node.id)\"\n                       title=\"Open record\">\n                    <div class=\"run-marker\"\n                         [class.run-marker--coagent]=\"node.isCoAgentRun\"\n                         [class.run-marker--prompt]=\"node.kind === 'promptRun'\">\n                      @if (node.kind === 'promptRun') {\n                        <i class=\"fas fa-microchip\"></i>\n                      } @else if (node.isCoAgentRun) {\n                        <i class=\"fas fa-tower-broadcast\"></i>\n                      } @else {\n                        <i class=\"fas fa-robot\"></i>\n                      }\n                    </div>\n                    <div class=\"run-body\">\n                      <div class=\"run-headrow\">\n                        <h4 class=\"run-title\">{{ node.title }}</h4>\n                        <span class=\"run-time\">{{ node.startedAt | date:'h:mm:ss a' }}</span>\n                      </div>\n                      <div class=\"run-sub\">{{ node.subtitle }}</div>\n                      <div class=\"run-foot\">\n                        <span class=\"run-status\" [attr.data-status]=\"node.status\">\n                          <i class=\"fas\" [ngClass]=\"GetRunStatusIcon(node.status)\"></i> {{ node.status }}\n                        </span>\n                        <span class=\"run-chip\">\n                          <i class=\"fas fa-clock\"></i> {{ FormatDuration(node.startedAt, node.completedAt) }}\n                        </span>\n                        @if (node.tokens != null && node.tokens > 0) {\n                          <span class=\"run-chip\"><i class=\"fas fa-coins\"></i> {{ node.tokens | number:'1.0-0' }} tok</span>\n                        }\n                        @if (node.cost != null && node.cost > 0) {\n                          <span class=\"run-chip\"><i class=\"fas fa-dollar-sign\"></i> {{ node.cost | number:'1.2-4' }}</span>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Channels tab -->\n        @if (ActiveTab === 'channels') {\n          <div class=\"tab-content\">\n            @if (Channels.length === 0) {\n              <mj-empty-state\n                Icon=\"fa-solid fa-plug\"\n                Title=\"No Channels\"\n                Message=\"No channel instances were attached to this session.\" />\n            } @else {\n              <div class=\"channels-grid-wrap\">\n                <table class=\"channels-grid\">\n                  <thead>\n                    <tr>\n                      <th>Channel</th>\n                      <th>Transport</th>\n                      <th>Status</th>\n                      <th>Connected</th>\n                      <th>Last Active</th>\n                      <th>Disconnected</th>\n                      <th>Socket</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (channel of Channels; track channel.row.ID) {\n                      <tr (click)=\"OpenEntityRecord('MJ: AI Agent Session Channels', channel.row.ID)\" title=\"Open record\">\n                        <td>\n                          <span class=\"cell-strong\">\n                            <i class=\"fas\" [ngClass]=\"GetChannelIcon(channel.row.Channel)\"></i>\n                            {{ channel.row.Channel }}\n                          </span>\n                        </td>\n                        <td>\n                          @if (channel.transportType) {\n                            <span class=\"transport-pill\" [attr.data-transport]=\"channel.transportType\">{{ channel.transportType }}</span>\n                          } @else {\n                            <span class=\"muted\">\u2014</span>\n                          }\n                        </td>\n                        <td>\n                          <span class=\"channel-status-pill\" [attr.data-status]=\"channel.row.Status\">{{ channel.row.Status }}</span>\n                        </td>\n                        <td class=\"mono\">{{ channel.row.__mj_CreatedAt | date:'h:mm:ss a' }}</td>\n                        <td class=\"mono\">{{ channel.row.LastActiveAt | date:'h:mm:ss a' }}</td>\n                        <td class=\"mono\">\n                          @if (channel.row.DisconnectedAt) {\n                            {{ channel.row.DisconnectedAt | date:'h:mm:ss a' }}\n                          } @else {\n                            <span class=\"muted\">\u2014</span>\n                          }\n                        </td>\n                        <td class=\"mono socket-cell\" [title]=\"channel.row.SocketUrl || ''\">\n                          {{ channel.row.SocketUrl || '\u2014' }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Transcript tab -->\n        @if (ActiveTab === 'transcript') {\n          <div class=\"tab-content\">\n            @if (Transcript.length === 0) {\n              <mj-empty-state\n                Icon=\"fa-solid fa-comments\"\n                Title=\"No Transcript\"\n                Message=\"No conversation messages were stamped with this session.\" />\n            } @else {\n              <div class=\"transcript-thread\">\n                @for (turn of Transcript; track turn.ID) {\n                  <div class=\"turn\" [class.turn--user]=\"turn.Role === 'User'\" [class.turn--error]=\"turn.Role === 'Error'\">\n                    <div class=\"turn-avatar\">\n                      @if (turn.Role === 'User') {\n                        <i class=\"fas fa-user\"></i>\n                      } @else if (turn.Role === 'Error') {\n                        <i class=\"fas fa-triangle-exclamation\"></i>\n                      } @else {\n                        <i class=\"fas fa-robot\"></i>\n                      }\n                    </div>\n                    <div class=\"turn-main\">\n                      <div class=\"turn-meta\">\n                        @if (turn.Role === 'User') {\n                          {{ turn.User || 'User' }}\n                        } @else {\n                          {{ turn.Agent || 'Agent' }}\n                        }\n                        <span class=\"turn-time\">{{ turn.__mj_CreatedAt | date:'h:mm:ss a' }}</span>\n                      </div>\n                      <div class=\"turn-bubble\">{{ turn.Message }}</div>\n                    </div>\n                  </div>\n                }\n              </div>\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> Session Record\n              </ng-template>\n              <div class=\"details-grid\">\n                <div class=\"detail-item\">\n                  <label>ID</label>\n                  <span class=\"mono\">{{ record.ID }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Agent (Co-Agent)</label>\n                  <span>\n                    <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('AI Agents', record.AgentID)\">\n                      {{ record.Agent || 'N/A' }}\n                    </a>\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>User</label>\n                  <span>\n                    <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('Users', record.UserID)\">\n                      {{ record.User }}\n                    </a>\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Conversation</label>\n                  <span>\n                    @if (record.ConversationID) {\n                      <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('MJ: Conversations', record.ConversationID)\">\n                        {{ record.Conversation || record.ConversationID }}\n                      </a>\n                    } @else {\n                      <span>N/A</span>\n                    }\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Status</label>\n                  <span class=\"status-badge small\" [attr.data-status]=\"record.Status\">{{ record.Status }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Prior Session</label>\n                  <span>\n                    @if (record.LastSessionID) {\n                      <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('MJ: AI Agent Sessions', record.LastSessionID)\">\n                        {{ record.LastSessionID }}\n                      </a>\n                    } @else {\n                      <span>None (root)</span>\n                    }\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Host Instance</label>\n                  <span class=\"mono\">{{ record.HostInstanceID || 'N/A' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Last Active At</label>\n                  <span>{{ record.LastActiveAt | date:'medium' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Closed At</label>\n                  <span>{{ record.ClosedAt ? (record.ClosedAt | date:'medium') : 'Still open' }}</span>\n                </div>\n              </div>\n            </mj-accordion-panel>\n\n            @if (record.Config_) {\n              <mj-accordion-panel [Expanded]=\"false\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fas fa-code\"></i> Config (Session State JSON)\n                </ng-template>\n                <div class=\"config-viewer\">\n                  <mj-code-editor\n                    [ngModel]=\"PrettyConfig\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                </div>\n              </mj-accordion-panel>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</mj-record-form-container>\n}\n", styles: [".ai-agent-session-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n/* \u2500\u2500 Header (mirrors the AI Agent Run form) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\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}\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  align-items: center;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  flex-wrap: wrap;\n}\n\n.agent-name {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.target-arrow {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.run-id {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\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}\n\n.conversation-pill .pill-action {\n  font-size: 9px;\n  opacity: 0.6;\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=\"Active\"] {\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=\"Idle\"] {\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=\"Closed\"] {\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.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  flex-wrap: wrap;\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.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  flex-wrap: wrap;\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.muted {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n}\n\n.mono {\n  font-family: monospace;\n  font-size: 13px;\n}\n\n/* \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\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.tab-count {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 1px 7px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.tab.active .tab-count {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500 Content area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content {\n  padding: 20px;\n}\n\n.tab-content mj-accordion-panel {\n  display: block;\n  margin-bottom: 8px;\n}\n\n/* \u2500\u2500 Run tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.run-tree {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 1000px;\n}\n\n.run-node {\n  display: flex;\n  gap: 14px;\n  align-items: flex-start;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 14px 18px;\n  box-shadow: var(--mj-shadow-sm);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-node:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n  transform: translateX(2px);\n}\n\n.run-node--child {\n  background: var(--mj-bg-surface-card);\n}\n\n.run-marker {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n.run-marker--coagent {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.run-marker--prompt {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.run-body {\n  flex: 1;\n  min-width: 0;\n}\n\n.run-headrow {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.run-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.run-time {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.run-sub {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.run-foot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.run-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.run-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.run-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.run-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.run-status[data-status=\"Cancelled\"],\n.run-status[data-status=\"AwaitingFeedback\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.run-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 12px;\n  padding: 2px 10px;\n}\n\n/* \u2500\u2500 Channels grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.channels-grid-wrap {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  overflow: auto;\n}\n\n.channels-grid {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13.5px;\n}\n\n.channels-grid th {\n  text-align: left;\n  padding: 10px 14px;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n}\n\n.channels-grid td {\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  vertical-align: middle;\n}\n\n.channels-grid tbody tr {\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.channels-grid tbody tr:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.channels-grid tbody tr:last-child td {\n  border-bottom: none;\n}\n\n.cell-strong {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.cell-strong i {\n  color: var(--mj-brand-primary);\n}\n\n.transport-pill,\n.channel-status-pill {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.transport-pill[data-transport=\"WebRTC\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.transport-pill[data-transport=\"WebSocket\"] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Connected\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Connecting\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Paused\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.socket-cell {\n  max-width: 220px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* \u2500\u2500 Transcript \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.transcript-thread {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 860px;\n  margin: 0 auto;\n}\n\n.turn {\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n}\n\n.turn--user {\n  flex-direction: row-reverse;\n}\n\n.turn-avatar {\n  width: 34px;\n  height: 34px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\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) 25%, transparent);\n}\n\n.turn--user .turn-avatar {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-border-default);\n}\n\n.turn--error .turn-avatar {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 25%, transparent);\n}\n\n.turn-main {\n  max-width: 70%;\n  min-width: 0;\n}\n\n.turn--user .turn-main {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n\n.turn-meta {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.turn-time {\n  font-weight: 400;\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.turn-bubble {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  border-top-left-radius: 4px;\n  padding: 10px 14px;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.turn--user .turn-bubble {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 12px;\n  border-top-right-radius: 4px;\n}\n\n.turn--error .turn-bubble {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 25%, transparent);\n  color: var(--mj-status-error-text);\n}\n\n/* \u2500\u2500 Details tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\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 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.config-viewer {\n  padding: 20px;\n}\n\n/* \u2500\u2500 Shared entity link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\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  cursor: pointer;\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/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .turn-main {\n    max-width: 90%;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-ai-agent-session-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"ToolbarConfig\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n\n  <div class=\"record-form ai-agent-session-form\">\n    <!-- Header (mirrors the AI Agent Run form header) -->\n    <div class=\"header phone-hero\" [class.hero-view]=\"!EditMode\" [class.hero-compact]=\"!EditMode && !HeroDetailsOpen\">\n      <div class=\"header-content\">\n        <div class=\"header-left\">\n          <div class=\"icon-wrapper\">\n            <i class=\"fas fa-tower-broadcast\"></i>\n          </div>\n          <div class=\"header-info\">\n            <h2>AI Agent Session</h2>\n            <div class=\"meta-info phone-hero-detail\">\n              @if (record.AgentID) {\n                <span class=\"agent-name\">\n                  <a href=\"javascript:void(0)\"\n                     class=\"entity-link\"\n                     [mjRecordLink]=\"record\"\n                     FieldName=\"AgentID\"\n                     [HandleClick]=\"false\"\n                     (click)=\"OpenEntityRecord('AI Agents', record.AgentID)\">\n                    {{ record.Agent || 'Agent' }}\n                  </a>\n                </span>\n              }\n              @if (TargetAgentID) {\n                <i class=\"fas fa-arrow-right-long target-arrow\"></i>\n                <span class=\"agent-name\">\n                  <a href=\"javascript:void(0)\"\n                     class=\"entity-link\"\n                     mjRecordLink\n                     [EntityName]=\"'MJ: AI Agents'\"\n                     [RecordID]=\"TargetAgentID\"\n                     [DisplayName]=\"TargetAgentName || 'Target agent'\"\n                     [HandleClick]=\"false\"\n                     (click)=\"OpenEntityRecord('AI Agents', TargetAgentID)\">\n                    {{ TargetAgentName || 'Target agent' }}\n                  </a>\n                </span>\n              }\n              <span class=\"run-id\">{{ ShortSessionId }}</span>\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>{{ record.Conversation || '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          <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n            <i class=\"fas\" [ngClass]=\"GetStatusIcon(record.Status)\"></i>\n            {{ record.Status }}\n          </div>\n          <div class=\"header-actions phone-hero-detail\">\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\n      <div class=\"header-stats phone-hero-detail phone-hero-stats\">\n        <div class=\"stat\">\n          <span class=\"label\">User</span>\n          <span class=\"value\">\n            <a href=\"javascript:void(0)\"\n               class=\"entity-link\"\n               [mjRecordLink]=\"record\"\n               FieldName=\"UserID\"\n               [HandleClick]=\"false\"\n               (click)=\"OpenEntityRecord('Users', record.UserID)\">{{ record.User }}</a>\n          </span>\n        </div>\n        <div class=\"stat\">\n          <span class=\"label\">Started</span>\n          <span class=\"value\">{{ record.__mj_CreatedAt | date:'medium' }}</span>\n        </div>\n        @if (record.ClosedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Closed</span>\n            <span class=\"value\">{{ record.ClosedAt | date:'medium' }}</span>\n          </div>\n        } @else {\n          <div class=\"stat\">\n            <span class=\"label\">Last Active</span>\n            <span class=\"value\">{{ record.LastActiveAt | date:'medium' }}</span>\n          </div>\n        }\n        <div class=\"stat\">\n          <span class=\"label\">Duration</span>\n          <span class=\"value\">{{ SessionDuration }}</span>\n        </div>\n        <div class=\"stat\">\n          <span class=\"label\">Channels</span>\n          <span class=\"value\">{{ Channels.length }}</span>\n        </div>\n        <div class=\"stat\">\n          <span class=\"label\">Delegated Runs</span>\n          <span class=\"value\">{{ DelegatedRunCount }}</span>\n        </div>\n        @if (SessionTokens != null && SessionTokens > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Tokens</span>\n            <span class=\"value\">{{ SessionTokens | number:'1.0-0' }}</span>\n          </div>\n        }\n        @if (SessionCost != null && SessionCost > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Cost</span>\n            <span class=\"value success\">${{ SessionCost | number:'1.2-4' }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Config bar: target agent / host instance / continuation -->\n      <div class=\"configuration-bar phone-hero-detail\">\n        <div class=\"config-item\">\n          <i class=\"fas fa-bullseye\"></i>\n          <div class=\"config-content\">\n            <div class=\"config-label\">Target Agent</div>\n            <div class=\"config-value\">\n              @if (TargetAgentID) {\n                <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('AI Agents', TargetAgentID)\">\n                  {{ TargetAgentName || 'Unknown' }}\n                </a>\n              } @else {\n                <span class=\"muted\">None</span>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"config-item\">\n          <i class=\"fas fa-server\"></i>\n          <div class=\"config-content\">\n            <div class=\"config-label\">Host Instance</div>\n            <div class=\"config-value mono\">{{ record.HostInstanceID || '\u2014' }}</div>\n          </div>\n        </div>\n        <div class=\"config-item\">\n          <i class=\"fas fa-link\"></i>\n          <div class=\"config-content\">\n            <div class=\"config-label\">Continuation</div>\n            <div class=\"config-value\">\n              @if (record.LastSessionID) {\n                <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('MJ: AI Agent Sessions', record.LastSessionID)\">\n                  Resumed from prior session\n                </a>\n              } @else {\n                <span class=\"muted\">None (new session)</span>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n      @if (!EditMode && HeroSummary) {\n        <button type=\"button\" class=\"phone-hero-summary\" [attr.aria-expanded]=\"HeroDetailsOpen\" (click)=\"ToggleHeroDetails()\">\n          <span class=\"phone-hero-summary-text\">{{ HeroSummary }}</span>\n          <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n\n    <!-- Phone: the strip becomes one button that opens the Sections sheet -->\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 === 'runs'\" (click)=\"ChangeTab('runs')\">\n        <i class=\"fas fa-diagram-project\"></i> Runs\n        @if (RunTree.length > 0) { <span class=\"tab-count\">{{ RunTree.length }}</span> }\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'channels'\" (click)=\"ChangeTab('channels')\">\n        <i class=\"fas fa-plug\"></i> Channels\n        @if (Channels.length > 0) { <span class=\"tab-count\">{{ Channels.length }}</span> }\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'transcript'\" (click)=\"ChangeTab('transcript')\">\n        <i class=\"fas fa-comments\"></i> Transcript\n        @if (Transcript.length > 0) { <span class=\"tab-count\">{{ Transcript.length }}</span> }\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      @if (Loading) {\n        <mj-loading text=\"Loading session data...\" size=\"medium\"></mj-loading>\n      } @else if (LoadError) {\n        <mj-empty-state\n          Variant=\"error\"\n          [Message]=\"LoadError\" />\n      } @else {\n\n        <!-- Runs tab: the session's delegated run tree -->\n        @if (ActiveTab === 'runs') {\n          <div class=\"tab-content\">\n            @if (RunTree.length === 0) {\n              <mj-empty-state\n                Icon=\"fa-solid fa-diagram-project\"\n                Title=\"No Runs\"\n                Message=\"No agent runs have been recorded for this session yet.\" />\n            } @else {\n              <div class=\"run-tree\">\n                @for (node of RunTree; track node.id) {\n                  <div class=\"run-node\"\n                       [class.run-node--child]=\"node.depth > 0\"\n                       [style.margin-left.px]=\"node.depth * 36\"\n                       (click)=\"OpenEntityRecord(node.entityName, node.id)\"\n                       title=\"Open record\">\n                    <div class=\"run-marker\"\n                         [class.run-marker--coagent]=\"node.isCoAgentRun\"\n                         [class.run-marker--prompt]=\"node.kind === 'promptRun'\">\n                      @if (node.kind === 'promptRun') {\n                        <i class=\"fas fa-microchip\"></i>\n                      } @else if (node.isCoAgentRun) {\n                        <i class=\"fas fa-tower-broadcast\"></i>\n                      } @else {\n                        <i class=\"fas fa-robot\"></i>\n                      }\n                    </div>\n                    <div class=\"run-body\">\n                      <div class=\"run-headrow\">\n                        <h4 class=\"run-title\">{{ node.title }}</h4>\n                        <span class=\"run-time\">{{ node.startedAt | date:'h:mm:ss a' }}</span>\n                      </div>\n                      <div class=\"run-sub\">{{ node.subtitle }}</div>\n                      <div class=\"run-foot\">\n                        <span class=\"run-status\" [attr.data-status]=\"node.status\">\n                          <i class=\"fas\" [ngClass]=\"GetRunStatusIcon(node.status)\"></i> {{ node.status }}\n                        </span>\n                        <span class=\"run-chip\">\n                          <i class=\"fas fa-clock\"></i> {{ FormatDuration(node.startedAt, node.completedAt) }}\n                        </span>\n                        @if (node.tokens != null && node.tokens > 0) {\n                          <span class=\"run-chip\"><i class=\"fas fa-coins\"></i> {{ node.tokens | number:'1.0-0' }} tok</span>\n                        }\n                        @if (node.cost != null && node.cost > 0) {\n                          <span class=\"run-chip\"><i class=\"fas fa-dollar-sign\"></i> {{ node.cost | number:'1.2-4' }}</span>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Channels tab -->\n        @if (ActiveTab === 'channels') {\n          <div class=\"tab-content\">\n            @if (Channels.length === 0) {\n              <mj-empty-state\n                Icon=\"fa-solid fa-plug\"\n                Title=\"No Channels\"\n                Message=\"No channel instances were attached to this session.\" />\n            } @else {\n              <div class=\"channels-grid-wrap\">\n                <table class=\"channels-grid\">\n                  <thead>\n                    <tr>\n                      <th>Channel</th>\n                      <th>Transport</th>\n                      <th>Status</th>\n                      <th>Connected</th>\n                      <th>Last Active</th>\n                      <th>Disconnected</th>\n                      <th>Socket</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (channel of Channels; track channel.row.ID) {\n                      <tr (click)=\"OpenEntityRecord('MJ: AI Agent Session Channels', channel.row.ID)\" title=\"Open record\">\n                        <td>\n                          <span class=\"cell-strong\">\n                            <i class=\"fas\" [ngClass]=\"GetChannelIcon(channel.row.Channel)\"></i>\n                            {{ channel.row.Channel }}\n                          </span>\n                        </td>\n                        <td>\n                          @if (channel.transportType) {\n                            <span class=\"transport-pill\" [attr.data-transport]=\"channel.transportType\">{{ channel.transportType }}</span>\n                          } @else {\n                            <span class=\"muted\">\u2014</span>\n                          }\n                        </td>\n                        <td>\n                          <span class=\"channel-status-pill\" [attr.data-status]=\"channel.row.Status\">{{ channel.row.Status }}</span>\n                        </td>\n                        <td class=\"mono\">{{ channel.row.__mj_CreatedAt | date:'h:mm:ss a' }}</td>\n                        <td class=\"mono\">{{ channel.row.LastActiveAt | date:'h:mm:ss a' }}</td>\n                        <td class=\"mono\">\n                          @if (channel.row.DisconnectedAt) {\n                            {{ channel.row.DisconnectedAt | date:'h:mm:ss a' }}\n                          } @else {\n                            <span class=\"muted\">\u2014</span>\n                          }\n                        </td>\n                        <td class=\"mono socket-cell\" [title]=\"channel.row.SocketUrl || ''\">\n                          {{ channel.row.SocketUrl || '\u2014' }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Transcript tab -->\n        @if (ActiveTab === 'transcript') {\n          <div class=\"tab-content\">\n            @if (Transcript.length === 0) {\n              <mj-empty-state\n                Icon=\"fa-solid fa-comments\"\n                Title=\"No Transcript\"\n                Message=\"No conversation messages were stamped with this session.\" />\n            } @else {\n              <div class=\"transcript-thread\">\n                @for (turn of Transcript; track turn.ID) {\n                  <div class=\"turn\" [class.turn--user]=\"turn.Role === 'User'\" [class.turn--error]=\"turn.Role === 'Error'\">\n                    <div class=\"turn-avatar\">\n                      @if (turn.Role === 'User') {\n                        <i class=\"fas fa-user\"></i>\n                      } @else if (turn.Role === 'Error') {\n                        <i class=\"fas fa-triangle-exclamation\"></i>\n                      } @else {\n                        <i class=\"fas fa-robot\"></i>\n                      }\n                    </div>\n                    <div class=\"turn-main\">\n                      <div class=\"turn-meta\">\n                        @if (turn.Role === 'User') {\n                          {{ turn.User || 'User' }}\n                        } @else {\n                          {{ turn.Agent || 'Agent' }}\n                        }\n                        <span class=\"turn-time\">{{ turn.__mj_CreatedAt | date:'h:mm:ss a' }}</span>\n                      </div>\n                      <div class=\"turn-bubble\">{{ turn.Message }}</div>\n                    </div>\n                  </div>\n                }\n              </div>\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> Session Record\n              </ng-template>\n              <div class=\"details-grid\">\n                <div class=\"detail-item\">\n                  <label>ID</label>\n                  <span class=\"mono\">{{ record.ID }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Agent (Co-Agent)</label>\n                  <span>\n                    <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('AI Agents', record.AgentID)\">\n                      {{ record.Agent || 'N/A' }}\n                    </a>\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>User</label>\n                  <span>\n                    <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('Users', record.UserID)\">\n                      {{ record.User }}\n                    </a>\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Conversation</label>\n                  <span>\n                    @if (record.ConversationID) {\n                      <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('MJ: Conversations', record.ConversationID)\">\n                        {{ record.Conversation || record.ConversationID }}\n                      </a>\n                    } @else {\n                      <span>N/A</span>\n                    }\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Status</label>\n                  <span class=\"status-badge small\" [attr.data-status]=\"record.Status\">{{ record.Status }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Prior Session</label>\n                  <span>\n                    @if (record.LastSessionID) {\n                      <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"OpenEntityRecord('MJ: AI Agent Sessions', record.LastSessionID)\">\n                        {{ record.LastSessionID }}\n                      </a>\n                    } @else {\n                      <span>None (root)</span>\n                    }\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Host Instance</label>\n                  <span class=\"mono\">{{ record.HostInstanceID || 'N/A' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Last Active At</label>\n                  <span>{{ record.LastActiveAt | date:'medium' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Closed At</label>\n                  <span>{{ record.ClosedAt ? (record.ClosedAt | date:'medium') : 'Still open' }}</span>\n                </div>\n              </div>\n            </mj-accordion-panel>\n\n            @if (record.Config_) {\n              <mj-accordion-panel [Expanded]=\"false\">\n                <ng-template mjAccordionTitle>\n                  <i class=\"fas fa-code\"></i> Config (Session State JSON)\n                </ng-template>\n                <div class=\"config-viewer\">\n                  <mj-code-editor\n                    [ngModel]=\"PrettyConfig\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                </div>\n              </mj-accordion-panel>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</mj-record-form-container>\n}\n", styles: [".ai-agent-session-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n/* \u2500\u2500 Header (mirrors the AI Agent Run form) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\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}\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  align-items: center;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  flex-wrap: wrap;\n}\n\n.agent-name {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.target-arrow {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.run-id {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\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}\n\n.conversation-pill .pill-action {\n  font-size: 9px;\n  opacity: 0.6;\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=\"Active\"] {\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=\"Idle\"] {\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=\"Closed\"] {\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.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  flex-wrap: wrap;\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.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  flex-wrap: wrap;\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.muted {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n}\n\n.mono {\n  font-family: monospace;\n  font-size: 13px;\n}\n\n/* \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\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.tab-count {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 1px 7px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.tab.active .tab-count {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500 Content area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content {\n  padding: 20px;\n}\n\n.tab-content mj-accordion-panel {\n  display: block;\n  margin-bottom: 8px;\n}\n\n/* \u2500\u2500 Run tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.run-tree {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 1000px;\n}\n\n.run-node {\n  display: flex;\n  gap: 14px;\n  align-items: flex-start;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 14px 18px;\n  box-shadow: var(--mj-shadow-sm);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-node:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-border-default));\n  transform: translateX(2px);\n}\n\n.run-node--child {\n  background: var(--mj-bg-surface-card);\n}\n\n.run-marker {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n.run-marker--coagent {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.run-marker--prompt {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.run-body {\n  flex: 1;\n  min-width: 0;\n}\n\n.run-headrow {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.run-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.run-time {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.run-sub {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.run-foot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.run-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.run-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.run-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.run-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.run-status[data-status=\"Cancelled\"],\n.run-status[data-status=\"AwaitingFeedback\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.run-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 12px;\n  padding: 2px 10px;\n}\n\n/* \u2500\u2500 Channels grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.channels-grid-wrap {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  overflow: auto;\n}\n\n.channels-grid {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13.5px;\n}\n\n.channels-grid th {\n  text-align: left;\n  padding: 10px 14px;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n}\n\n.channels-grid td {\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  vertical-align: middle;\n}\n\n.channels-grid tbody tr {\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.channels-grid tbody tr:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.channels-grid tbody tr:last-child td {\n  border-bottom: none;\n}\n\n.cell-strong {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.cell-strong i {\n  color: var(--mj-brand-primary);\n}\n\n.transport-pill,\n.channel-status-pill {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.transport-pill[data-transport=\"WebRTC\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.transport-pill[data-transport=\"WebSocket\"] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Connected\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Connecting\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.channel-status-pill[data-status=\"Paused\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.socket-cell {\n  max-width: 220px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* \u2500\u2500 Transcript \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.transcript-thread {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 860px;\n  margin: 0 auto;\n}\n\n.turn {\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n}\n\n.turn--user {\n  flex-direction: row-reverse;\n}\n\n.turn-avatar {\n  width: 34px;\n  height: 34px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\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) 25%, transparent);\n}\n\n.turn--user .turn-avatar {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-border-default);\n}\n\n.turn--error .turn-avatar {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 25%, transparent);\n}\n\n.turn-main {\n  max-width: 70%;\n  min-width: 0;\n}\n\n.turn--user .turn-main {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n\n.turn-meta {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.turn-time {\n  font-weight: 400;\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.turn-bubble {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  border-top-left-radius: 4px;\n  padding: 10px 14px;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.turn--user .turn-bubble {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 12px;\n  border-top-right-radius: 4px;\n}\n\n.turn--error .turn-bubble {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 25%, transparent);\n  color: var(--mj-status-error-text);\n}\n\n/* \u2500\u2500 Details tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\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 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.config-viewer {\n  padding: 20px;\n}\n\n/* \u2500\u2500 Shared entity link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\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  cursor: pointer;\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/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .turn-main {\n    max-width: 90%;\n  }\n}\n\n/* Phone section picker: hidden until the 768px rule swaps it in for the tab strip */\n.phone-section-picker {\n  display: none;\n}\n\n/* Phone (375px): the tab strip becomes one section-picker button (same pattern as the other\n   forms), and the 6A hero keeps the status beside the title on one identity row. */\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  .header.phone-hero.hero-view .header-content {\n    flex-direction: row;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .header.phone-hero.hero-view .header-left {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n}\n", "/* ============================================\n   PHONE HERO (design call 6A), shared by the custom forms that own a hero.\n   Under 768px the hero keeps icon, name, status and the primary action. Anything tagged\n   .phone-hero-detail hides while the hero is compact and comes back when the summary line is\n   tapped. Edit mode is untouched: the host only gets .hero-compact / .hero-view in view mode.\n   Host:    .phone-hero [class.hero-view]=\"!EditMode\" [class.hero-compact]=\"!EditMode && !HeroDetailsOpen\"\n   Tags:    .phone-hero-detail  hidden while compact\n            .phone-hero-hide    hidden in view mode (said elsewhere on the phone hero)\n            .phone-hero-only    shown only on phones\n            .phone-hero-top     a title + action row that stacks\n            .phone-hero-actions / .phone-hero-run   the primary action, full width at 44px\n            .phone-hero-stats   a metric row that reflows to a 2-up grid when the hero is expanded\n            .phone-hero-status  a status chip in the identity row (with .phone-hero-only)\n   ============================================ */\n.phone-hero-summary,\n.phone-hero-only {\n    display: none;\n}\n\n@media (max-width: 768px) {\n    .phone-hero {\n        padding: 12px !important;\n    }\n\n    /* !important: several heroes carry inline display/padding styles on these rows */\n    .phone-hero.hero-compact .phone-hero-detail,\n    .phone-hero.hero-view .phone-hero-hide {\n        display: none !important;\n    }\n\n    .phone-hero-only {\n        display: inline-flex;\n    }\n\n    /* Lower specificity than the compact rule above, so a compact hero still hides it */\n    .phone-hero .phone-hero-stats {\n        display: grid !important;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    .phone-hero-status {\n        align-items: center;\n        gap: 4px;\n        margin-left: 8px;\n        padding: 2px 8px;\n        border-radius: var(--mj-radius-full, 999px);\n        color: var(--mj-text-secondary);\n        background: var(--mj-bg-surface-sunken);\n        font-size: var(--mj-text-xs);\n        font-weight: var(--mj-font-semibold);\n        vertical-align: middle;\n        white-space: nowrap;\n    }\n\n    /* data-status comes from RunStatusKind(); the -text / -bg pairs keep contrast in both themes */\n    .phone-hero-status[data-status=\"running\"] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n    .phone-hero-status[data-status=\"success\"] { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); }\n    .phone-hero-status[data-status=\"error\"]   { color: var(--mj-status-error-text);   background: var(--mj-status-error-bg); }\n    .phone-hero-status[data-status=\"info\"]    { color: var(--mj-status-info-text);    background: var(--mj-status-info-bg); }\n\n    .phone-hero-top {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n    }\n\n    .phone-hero-actions {\n        width: 100%;\n    }\n\n    .phone-hero .phone-hero-run {\n        width: 100%;\n        min-height: 44px;\n        justify-content: center;\n    }\n\n    /* Inherits the hero's text colour, so it reads on light heroes and on the brand-blue\n       Queries hero alike; a muted token would be grey on blue. */\n    .phone-hero-summary {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        min-height: 44px;\n        margin-top: 8px;\n        padding: 0 4px;\n        border: 0;\n        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: var(--mj-text-sm);\n        text-align: left;\n        cursor: pointer;\n        opacity: 0.85;\n    }\n\n    .phone-hero-summary:focus-visible {\n        outline: none;\n        box-shadow: var(--mj-focus-ring);\n    }\n\n    .phone-hero-summary-text {\n        flex: 1 1 auto;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .phone-hero-summary > i {\n        flex-shrink: 0;\n        transition: transform 0.15s ease;\n    }\n\n    .phone-hero-summary[aria-expanded=\"true\"] > i {\n        transform: rotate(180deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .phone-hero-summary > i {\n        transition: none;\n    }\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIAgentSessionFormComponentExtended, { className: "MJAIAgentSessionFormComponentExtended", filePath: "src/lib/custom/AIAgentSessions/ai-agent-session-form.component.ts", lineNumber: 118 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIAgentSessionFormComponentExtended, { className: "MJAIAgentSessionFormComponentExtended", filePath: "src/lib/custom/AIAgentSessions/ai-agent-session-form.component.ts", lineNumber: 120 }); })();
 //# sourceMappingURL=ai-agent-session-form.component.js.map