@memberjunction/ng-core-entity-forms 5.43.0 → 5.45.0

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

@@ -170,38 +170,26 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_96_Temp
     i0.ɵɵelement(0, "mj-loading", 43);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_97_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵelement(1, "i", 49);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 44);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.LoadError);
+    i0.ɵɵproperty("Message", ctx_r1.LoadError);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵelement(1, "i", 53);
-    i0.ɵɵelementStart(2, "h4");
-    i0.ɵɵtext(3, "No Runs");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5, "No agent runs have been recorded for this session yet.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 50);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 57);
+    i0.ɵɵelement(0, "i", 55);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_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", 58);
+    i0.ɵɵelement(0, "i", 56);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 66);
-    i0.ɵɵelement(1, "i", 68);
+    i0.ɵɵelementStart(0, "span", 64);
+    i0.ɵɵelement(1, "i", 66);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "number");
     i0.ɵɵelementEnd();
@@ -211,8 +199,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, node_r9.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", 66);
-    i0.ɵɵelement(1, "i", 69);
+    i0.ɵɵelementStart(0, "span", 64);
+    i0.ɵɵelement(1, "i", 67);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "number");
     i0.ɵɵelementEnd();
@@ -223,31 +211,31 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
 } }
 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", 55);
+    i0.ɵɵelementStart(0, "div", 53);
     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", 56);
-    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_2_Template, 1, 0, "i", 57)(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", 58);
+    i0.ɵɵelementStart(1, "div", 54);
+    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_2_Template, 1, 0, "i", 55)(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", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 59)(6, "div", 60)(7, "h4", 61);
+    i0.ɵɵelementStart(5, "div", 57)(6, "div", 58)(7, "h4", 59);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 62);
+    i0.ɵɵelementStart(9, "span", 60);
     i0.ɵɵtext(10);
     i0.ɵɵpipe(11, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 63);
+    i0.ɵɵelementStart(12, "div", 61);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 64)(15, "span", 65);
+    i0.ɵɵelementStart(14, "div", 62)(15, "span", 63);
     i0.ɵɵelement(16, "i", 15);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "span", 66);
-    i0.ɵɵelement(19, "i", 67);
+    i0.ɵɵelementStart(18, "span", 64);
+    i0.ɵɵelement(19, "i", 65);
     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", 66);
-    i0.ɵɵconditionalCreate(22, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_22_Template, 4, 4, "span", 66);
+    i0.ɵɵconditionalCreate(21, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_21_Template, 4, 4, "span", 64);
+    i0.ɵɵconditionalCreate(22, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Conditional_22_Template, 4, 4, "span", 64);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const node_r9 = ctx.$implicit;
@@ -278,8 +266,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵconditional(node_r9.cost != null && node_r9.cost > 0 ? 22 : -1);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Template, 23, 21, "div", 54, _forTrack0);
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_For_2_Template, 23, 21, "div", 52, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -287,8 +275,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵrepeater(ctx_r1.RunTree);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_1_Template, 6, 0, "div", 51)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_Template, 3, 0, "div", 52);
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_1_Template, 1, 0, "mj-empty-state", 50)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Conditional_2_Template, 3, 0, "div", 51);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -296,17 +284,10 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     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.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵelement(1, "i", 71);
-    i0.ɵɵelementStart(2, "h4");
-    i0.ɵɵtext(3, "No Channels");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5, "No channel instances were attached to this session.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 68);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 76);
+    i0.ɵɵelementStart(0, "span", 74);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -334,30 +315,30 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
 } }
 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", 74);
+    i0.ɵɵelementStart(0, "tr", 72);
     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", 75);
+    i0.ɵɵelementStart(1, "td")(2, "span", 73);
     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", 76)(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_98_Conditional_1_Conditional_2_For_20_Conditional_6_Template, 2, 2, "span", 74)(7, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Conditional_7_Template, 2, 0, "span", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "td")(9, "span", 77);
+    i0.ɵɵelementStart(8, "td")(9, "span", 75);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "td", 78);
+    i0.ɵɵelementStart(11, "td", 76);
     i0.ɵɵtext(12);
     i0.ɵɵpipe(13, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "td", 78);
+    i0.ɵɵelementStart(14, "td", 76);
     i0.ɵɵtext(15);
     i0.ɵɵpipe(16, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "td", 78);
+    i0.ɵɵelementStart(17, "td", 76);
     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.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "td", 79);
+    i0.ɵɵelementStart(20, "td", 77);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -385,7 +366,7 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵtextInterpolate1(" ", channel_r11.row.SocketUrl || "\u2014", " ");
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70)(1, "table", 72)(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵelementStart(0, "div", 69)(1, "table", 70)(2, "thead")(3, "tr")(4, "th");
     i0.ɵɵtext(5, "Channel");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "th");
@@ -407,7 +388,7 @@ 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", 73, _forTrack1);
+    i0.ɵɵrepeaterCreate(19, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_For_20_Template, 22, 16, "tr", 71, _forTrack1);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -415,8 +396,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵrepeater(ctx_r1.Channels);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_1_Template, 6, 0, "div", 51)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_Template, 21, 0, "div", 70);
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_1_Template, 1, 0, "mj-empty-state", 68)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Conditional_2_Template, 21, 0, "div", 69);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -424,23 +405,16 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     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.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵelement(1, "i", 81);
-    i0.ɵɵelementStart(2, "h4");
-    i0.ɵɵtext(3, "No Transcript");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5, "No conversation messages were stamped with this session.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 78);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 85);
+    i0.ɵɵelement(0, "i", 83);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 86);
+    i0.ɵɵelement(0, "i", 84);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 58);
+    i0.ɵɵelement(0, "i", 56);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
@@ -455,16 +429,16 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵtextInterpolate1(" ", turn_r12.Agent || "Agent", " ");
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 84);
-    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_2_Template, 1, 0, "i", 85)(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_3_Template, 1, 0, "i", 86)(4, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_4_Template, 1, 0, "i", 58);
+    i0.ɵɵelementStart(0, "div", 81)(1, "div", 82);
+    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_2_Template, 1, 0, "i", 83)(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_3_Template, 1, 0, "i", 84)(4, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Conditional_4_Template, 1, 0, "i", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 87)(6, "div", 88);
+    i0.ɵɵelementStart(5, "div", 85)(6, "div", 86);
     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", 89);
+    i0.ɵɵelementStart(9, "span", 87);
     i0.ɵɵtext(10);
     i0.ɵɵpipe(11, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 90);
+    i0.ɵɵelementStart(12, "div", 88);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -480,8 +454,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵtextInterpolate(turn_r12.Message);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 80);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Template, 14, 11, "div", 82, _forTrack2);
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_For_2_Template, 14, 11, "div", 80, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -489,8 +463,8 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     i0.ɵɵrepeater(ctx_r1.Transcript);
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_1_Template, 6, 0, "div", 51)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_Template, 3, 0, "div", 80);
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_1_Template, 1, 0, "mj-empty-state", 78)(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Conditional_2_Template, 3, 0, "div", 79);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -534,14 +508,14 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     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", 98);
+    i0.ɵɵelement(0, "i", 96);
     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", 91);
-    i0.ɵɵtemplate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_55_ng_template_1_Template, 2, 0, "ng-template", 92);
-    i0.ɵɵelementStart(2, "div", 96);
-    i0.ɵɵelement(3, "mj-code-editor", 97);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 89);
+    i0.ɵɵtemplate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_55_ng_template_1_Template, 2, 0, "ng-template", 90);
+    i0.ɵɵelementStart(2, "div", 94);
+    i0.ɵɵelement(3, "mj-code-editor", 95);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -551,67 +525,67 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
 } }
 function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "mj-accordion-panel", 91);
-    i0.ɵɵtemplate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_ng_template_2_Template, 2, 0, "ng-template", 92);
-    i0.ɵɵelementStart(3, "div", 93)(4, "div", 94)(5, "label");
+    i0.ɵɵelementStart(0, "div", 49)(1, "mj-accordion-panel", 89);
+    i0.ɵɵtemplate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_ng_template_2_Template, 2, 0, "ng-template", 90);
+    i0.ɵɵelementStart(3, "div", 91)(4, "div", 92)(5, "label");
     i0.ɵɵtext(6, "ID");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 78);
+    i0.ɵɵelementStart(7, "span", 76);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 94)(10, "label");
+    i0.ɵɵelementStart(9, "div", 92)(10, "label");
     i0.ɵɵtext(11, "Agent (Co-Agent)");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(12, "span")(13, "a", 23);
     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.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 94)(16, "label");
+    i0.ɵɵelementStart(15, "div", 92)(16, "label");
     i0.ɵɵtext(17, "User");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(18, "span")(19, "a", 23);
     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.ɵɵtext(20);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 94)(22, "label");
+    i0.ɵɵelementStart(21, "div", 92)(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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 94)(28, "label");
+    i0.ɵɵelementStart(27, "div", 92)(28, "label");
     i0.ɵɵtext(29, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 95);
+    i0.ɵɵelementStart(30, "span", 93);
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 94)(33, "label");
+    i0.ɵɵelementStart(32, "div", 92)(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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(38, "div", 94)(39, "label");
+    i0.ɵɵelementStart(38, "div", 92)(39, "label");
     i0.ɵɵtext(40, "Host Instance");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(41, "span", 78);
+    i0.ɵɵelementStart(41, "span", 76);
     i0.ɵɵtext(42);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div", 94)(44, "label");
+    i0.ɵɵelementStart(43, "div", 92)(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", 94)(50, "label");
+    i0.ɵɵelementStart(49, "div", 92)(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", 91);
+    i0.ɵɵconditionalCreate(55, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Conditional_55_Template, 4, 4, "mj-accordion-panel", 89);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -641,10 +615,10 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Cond
     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", 50);
-    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Template, 3, 1, "div", 50);
-    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Template, 3, 1, "div", 50);
-    i0.ɵɵconditionalCreate(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Template, 56, 18, "div", 50);
+    i0.ɵɵconditionalCreate(0, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_0_Template, 3, 1, "div", 49);
+    i0.ɵɵconditionalCreate(1, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_1_Template, 3, 1, "div", 49);
+    i0.ɵɵconditionalCreate(2, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_2_Template, 3, 1, "div", 49);
+    i0.ɵɵconditionalCreate(3, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Conditional_3_Template, 56, 18, "div", 49);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.ActiveTab === "runs" ? 0 : -1);
@@ -765,7 +739,7 @@ function MJAIAgentSessionFormComponentExtended_Conditional_0_Template(rf, ctx) {
     i0.ɵɵtext(94, " 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, 4, 1, "div", 44)(98, MJAIAgentSessionFormComponentExtended_Conditional_0_Conditional_98_Template, 4, 4);
+    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.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -1172,11 +1146,11 @@ 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)", 1, "entity-link", 3, "click"], [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"], [1, "error-state"], [1, "fas", "fa-arrow-right-long", "target-arrow"], ["title", "Open conversation in Chat app", 1, "conversation-pill", 3, "click"], [1, "fas", "fa-external-link-alt", "pill-action"], [1, "value", "success"], [1, "fas", "fa-exclamation-triangle", "fa-2x"], [1, "tab-content"], [1, "empty-state"], [1, "run-tree"], [1, "fas", "fa-diagram-project", "fa-2x"], ["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"], [1, "channels-grid-wrap"], [1, "fas", "fa-plug", "fa-2x"], [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"], [1, "transcript-thread"], [1, "fas", "fa-comments", "fa-2x"], [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) {
+    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)", 1, "entity-link", 3, "click"], [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"], [1, "fas", "fa-arrow-right-long", "target-arrow"], ["title", "Open conversation in Chat app", 1, "conversation-pill", 3, "click"], [1, "fas", "fa-external-link-alt", "pill-action"], [1, "value", "success"], [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, 37, "mj-record-form-container", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.record ? 0 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i4.MjRecordFormContainerComponent, 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\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\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\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.empty-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  opacity: 0.3;\n  margin-bottom: 16px;\n}\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\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\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\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\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\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.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i4.MjRecordFormContainerComponent, 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\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\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\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\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\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\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\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\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\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}"] }); }
 };
 MJAIAgentSessionFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: AI Agent Sessions')
@@ -1184,7 +1158,7 @@ MJAIAgentSessionFormComponentExtended = __decorate([
 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)\" class=\"entity-link\" (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)\" class=\"entity-link\" (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)\" class=\"entity-link\" (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        <div class=\"error-state\">\n          <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n          <p>{{ LoadError }}</p>\n        </div>\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              <div class=\"empty-state\">\n                <i class=\"fas fa-diagram-project fa-2x\"></i>\n                <h4>No Runs</h4>\n                <p>No agent runs have been recorded for this session yet.</p>\n              </div>\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              <div class=\"empty-state\">\n                <i class=\"fas fa-plug fa-2x\"></i>\n                <h4>No Channels</h4>\n                <p>No channel instances were attached to this session.</p>\n              </div>\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              <div class=\"empty-state\">\n                <i class=\"fas fa-comments fa-2x\"></i>\n                <h4>No Transcript</h4>\n                <p>No conversation messages were stamped with this session.</p>\n              </div>\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.empty-state,\n.error-state {\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i,\n.error-state i {\n  opacity: 0.3;\n  margin-bottom: 16px;\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\">\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)\" class=\"entity-link\" (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)\" class=\"entity-link\" (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)\" class=\"entity-link\" (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"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIAgentSessionFormComponentExtended, { className: "MJAIAgentSessionFormComponentExtended", filePath: "src/lib/custom/AIAgentSessions/ai-agent-session-form.component.ts", lineNumber: 118 }); })();
 //# sourceMappingURL=ai-agent-session-form.component.js.map