npm - @memberjunction/ng-dashboards - Versions diffs - 2.54.0 → 2.56.0 - Mend

@memberjunction/ng-dashboards 2.54.0 → 2.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/dist/AI/components/agents/agent-configuration.component.js CHANGED Viewed

@@ -1,8 +1,10 @@
 import { Component, Output, EventEmitter, Input } from '@angular/core';
-import { RunView, CompositeKey } from '@memberjunction/core';
+import { RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-layout";
-import * as i2 from "./agent-filter-panel.component";
+import * as i1 from "@memberjunction/ng-core-entity-forms";
+import * as i2 from "@memberjunction/ng-ai-test-harness";
+import * as i3 from "@progress/kendo-angular-layout";
+import * as i4 from "./agent-filter-panel.component";
 const _forTrack0 = ($index, $item) => $item.ID;
 function AgentConfigurationComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Hide Filters ");
@@ -34,9 +36,22 @@ function AgentConfigurationComponent_Conditional_28_Conditional_0_Template(rf, c
     i0.ɵɵtext(8, " Create New Agent ");
     i0.ɵɵelementEnd()();
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 39);
-    i0.ɵɵelement(1, "i", 51);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 36);
+} if (rf & 2) {
+    const agent_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", agent_r4.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r4.Name + " logo");
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const agent_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r4));
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 41);
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -45,14 +60,14 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", agent_r4.Status, " ");
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 39);
-    i0.ɵɵelement(1, "i", 52);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 41);
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵtext(2, " Exposed ");
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 44);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 46);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -60,16 +75,16 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(agent_r4.Description);
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 45);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 47);
     i0.ɵɵtext(1, "No description provided");
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54)(1, "span", 55);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 56)(1, "span", 57);
     i0.ɵɵtext(2, "Parent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 56);
+    i0.ɵɵelementStart(3, "span", 58);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -77,22 +92,22 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(agent_r4.Parent);
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 57);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_19_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 59);
     i0.ɵɵtext(1, " Enabled ");
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 58);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_19_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
     i0.ɵɵtext(1, " Disabled ");
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46)(1, "div", 53);
-    i0.ɵɵtemplate(2, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template, 5, 1, "div", 54);
-    i0.ɵɵelementStart(3, "div", 54)(4, "span", 55);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48)(1, "div", 55);
+    i0.ɵɵtemplate(2, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_19_Conditional_2_Template, 5, 1, "div", 56);
+    i0.ɵɵelementStart(3, "div", 56)(4, "span", 57);
     i0.ɵɵtext(5, "Context Compression");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 56);
-    i0.ɵɵtemplate(7, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template, 2, 0)(8, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template, 2, 0);
+    i0.ɵɵelementStart(6, "span", 58);
+    i0.ɵɵtemplate(7, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_19_Conditional_7_Template, 2, 0)(8, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_19_Conditional_8_Template, 2, 0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const agent_r4 = i0.ɵɵnextContext().$implicit;
@@ -101,11 +116,11 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
     i0.ɵɵadvance(5);
     i0.ɵɵconditional(agent_r4.EnableContextCompression ? 7 : 8);
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 59);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const agent_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r4)); });
-    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const agent_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r4)); });
+    i0.ɵɵelement(1, "i", 62);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
 } }
@@ -114,28 +129,28 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
     i0.ɵɵelementStart(0, "div", 32)(1, "div", 33);
     i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_div_click_1_listener() { const agent_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleAgentExpansion(agent_r4.ID)); });
     i0.ɵɵelementStart(2, "div", 34)(3, "div", 35);
-    i0.ɵɵelement(4, "i");
+    i0.ɵɵtemplate(4, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_4_Template, 1, 2, "img", 36)(5, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_5_Template, 1, 2, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 36)(6, "h4", 37);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(6, "div", 38)(7, "h4", 39);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 38)(9, "span", 39);
-    i0.ɵɵelement(10, "i", 40);
-    i0.ɵɵtext(11);
+    i0.ɵɵelementStart(9, "div", 40)(10, "span", 41);
+    i0.ɵɵelement(11, "i", 42);
+    i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(12, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_12_Template, 3, 3, "span", 41)(13, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_13_Template, 3, 0, "span", 39);
+    i0.ɵɵtemplate(13, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_13_Template, 3, 3, "span", 43)(14, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_14_Template, 3, 0, "span", 41);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(14, "i", 42);
+    i0.ɵɵelement(15, "i", 44);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 43);
-    i0.ɵɵtemplate(16, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 1, "p", 44)(17, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 2, 0, "p", 45)(18, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Template, 9, 2, "div", 46);
+    i0.ɵɵelementStart(16, "div", 45);
+    i0.ɵɵtemplate(17, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 2, 1, "p", 46)(18, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Template, 2, 0, "p", 47)(19, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_19_Template, 9, 2, "div", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 47)(20, "button", 48);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_button_click_20_listener() { const agent_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentRecord(agent_r4.ID)); });
-    i0.ɵɵelement(21, "i", 49);
-    i0.ɵɵtext(22, " Open ");
+    i0.ɵɵelementStart(20, "div", 49)(21, "button", 50);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_button_click_21_listener() { const agent_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentRecord(agent_r4.ID)); });
+    i0.ɵɵelement(22, "i", 51);
+    i0.ɵɵtext(23, " Open ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(23, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template, 3, 0, "button", 50);
+    i0.ɵɵtemplate(24, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_24_Template, 3, 0, "button", 52);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const agent_r4 = ctx.$implicit;
@@ -144,35 +159,48 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
     i0.ɵɵadvance(3);
     i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r4));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getExecutionModeIcon(agent_r4.ExecutionMode));
-    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r4) ? 4 : 5);
+    i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(agent_r4.Name);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", agent_r4.ExecutionMode, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agent_r4.Status ? 12 : -1);
+    i0.ɵɵconditional(agent_r4.Status ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agent_r4.ExposeAsAction ? 13 : -1);
+    i0.ɵɵconditional(agent_r4.ExposeAsAction ? 14 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("rotated", ctx_r1.expandedAgentId === agent_r4.ID);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(agent_r4.Description ? 16 : 17);
+    i0.ɵɵconditional(agent_r4.Description ? 17 : 18);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.expandedAgentId === agent_r4.ID ? 18 : -1);
+    i0.ɵɵconditional(ctx_r1.expandedAgentId === agent_r4.ID ? 19 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(agent_r4.Status === "Active" ? 23 : -1);
+    i0.ɵɵconditional(agent_r4.Status === "Active" ? 24 : -1);
 } }
 function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template, 24, 15, "div", 31, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template, 25, 14, "div", 31, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.filteredAgents);
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 66);
+} if (rf & 2) {
+    const agent_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", agent_r7.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r7.Name + " logo");
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const agent_r7 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r7));
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 67);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -180,35 +208,35 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(agent_r7.Description);
 } }
-function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 70);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const agent_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r7)); });
-    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(0, "button", 73);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const agent_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r7)); });
+    i0.ɵɵelement(1, "i", 62);
     i0.ɵɵelementEnd();
 } }
 function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 62)(3, "div", 63);
-    i0.ɵɵelement(4, "i");
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 64)(3, "div", 65);
+    i0.ɵɵtemplate(4, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_4_Template, 1, 2, "img", 66)(5, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_5_Template, 1, 2, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div")(6, "div", 37);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(6, "div")(7, "div", 39);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_8_Template, 2, 1, "div", 64);
+    i0.ɵɵtemplate(9, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_9_Template, 2, 1, "div", 67);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "td")(10, "span", 65);
-    i0.ɵɵtext(11);
+    i0.ɵɵelementStart(10, "td")(11, "span", 68);
+    i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "td")(13, "span", 66);
-    i0.ɵɵelement(14, "i");
-    i0.ɵɵtext(15);
+    i0.ɵɵelementStart(13, "td")(14, "span", 69);
+    i0.ɵɵelement(15, "i");
+    i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "td")(17, "div", 67)(18, "button", 68);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template_button_click_18_listener() { const agent_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentRecord(agent_r7.ID)); });
-    i0.ɵɵelement(19, "i", 49);
+    i0.ɵɵelementStart(17, "td")(18, "div", 70)(19, "button", 71);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template_button_click_19_listener() { const agent_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentRecord(agent_r7.ID)); });
+    i0.ɵɵelement(20, "i", 51);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(20, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template, 2, 0, "button", 69);
+    i0.ɵɵtemplate(21, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_21_Template, 2, 0, "button", 72);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const agent_r7 = ctx.$implicit;
@@ -216,11 +244,11 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_
     i0.ɵɵadvance(3);
     i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r7));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getExecutionModeIcon(agent_r7.ExecutionMode));
-    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r7) ? 4 : 5);
+    i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(agent_r7.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agent_r7.Description ? 8 : -1);
+    i0.ɵɵconditional(agent_r7.Description ? 9 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵclassMap("status-" + (agent_r7.Status || "unknown").toLowerCase());
     i0.ɵɵadvance();
@@ -230,10 +258,10 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", agent_r7.ExecutionMode, " ");
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(agent_r7.Status === "Active" ? 20 : -1);
+    i0.ɵɵconditional(agent_r7.Status === "Active" ? 21 : -1);
 } }
 function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30)(1, "table", 61)(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵelementStart(0, "div", 30)(1, "table", 63)(2, "thead")(3, "tr")(4, "th");
     i0.ɵɵtext(5, "Name");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "th");
@@ -246,7 +274,7 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_
     i0.ɵɵtext(11, "Actions");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(12, "tbody");
-    i0.ɵɵrepeaterCreate(13, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template, 21, 13, "tr", null, _forTrack0);
+    i0.ɵɵrepeaterCreate(13, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template, 22, 12, "tr", null, _forTrack0);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -268,6 +296,9 @@ function AgentConfigurationComponent_Conditional_28_Template(rf, ctx) { if (rf &
     i0.ɵɵconditional(ctx_r1.filteredAgents.length === 0 ? 0 : 1);
 } }
 export class AgentConfigurationComponent {
+    newAgentDialogService;
+    viewContainerRef;
+    testHarnessService;
     initialState = null;
     openEntityRecord = new EventEmitter();
     stateChange = new EventEmitter();
@@ -285,7 +316,12 @@ export class AgentConfigurationComponent {
         executionMode: 'all',
         exposeAsAction: 'all'
     };
-    constructor() { }
+    selectedAgentForTest = null;
+    constructor(newAgentDialogService, viewContainerRef, testHarnessService) {
+        this.newAgentDialogService = newAgentDialogService;
+        this.viewContainerRef = viewContainerRef;
+        this.testHarnessService = testHarnessService;
+    }
     ngOnInit() {
         if (this.initialState) {
             this.applyInitialState(this.initialState);
@@ -317,9 +353,10 @@ export class AgentConfigurationComponent {
                 EntityName: 'AI Agents',
                 ExtraFilter: '',
                 OrderBy: 'Name',
-                MaxRows: 1000
+                MaxRows: 1000,
+                ResultType: 'entity_object'
             });
-            this.agents = result.Results;
+            this.agents = result.Results || [];
             this.filteredAgents = [...this.agents];
         }
         catch (error) {
@@ -417,13 +454,20 @@ export class AgentConfigurationComponent {
         this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: agentId });
     }
     createNewAgent() {
-        // Emit event to open a new agent form
-        const compositeKey = new CompositeKey([]);
-        this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: '' });
+        this.newAgentDialogService.openForNewAgent(this.viewContainerRef).subscribe(result => {
+            if (result.action === 'created' && result.agent) {
+                // Reload the agents list to show the new agent
+                this.loadAgents();
+            }
+        });
+    }
+    runAgent(agent) {
+        // Use the test harness service for window management features
+        this.testHarnessService.openForAgent(agent.ID);
     }
-    async runAgent(agent) {
-        // Emit event to open test harness for the agent
-        this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: agent.ID });
+    closeTestHarness() {
+        // No longer needed - window manages its own closure
+        this.selectedAgentForTest = null;
     }
     getAgentIconColor(agent) {
         // Generate a consistent color based on agent properties
@@ -448,8 +492,25 @@ export class AgentConfigurationComponent {
             default: return 'fa-solid fa-robot';
         }
     }
-    static ɵfac = function AgentConfigurationComponent_Factory(t) { return new (t || AgentConfigurationComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], inputs: { initialState: "initialState" }, outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 29, vars: 18, consts: [[1, "agent-configuration-container"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-robot"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "item-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Create New Agent", 1, "control-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "main-content"], ["orientation", "horizontal", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "agents", "filteredAgents", "filters"], [3, "resizable", "scrollable"], [1, "agents-content"], [1, "loading-container"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "empty-state"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "agents-grid"], [1, "agents-list"], [1, "agent-card", 3, "expanded"], [1, "agent-card"], [1, "card-header", 3, "click"], [1, "agent-info"], [1, "agent-icon"], [1, "agent-details"], [1, "agent-name"], [1, "agent-meta"], [1, "meta-item"], [1, "fa-solid", "fa-microchip"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "agent-description"], [1, "agent-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "Open Agent", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "fa-solid", "fa-bolt"], [1, "agent-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-check", 2, "color", "#28a745"], [1, "fa-solid", "fa-times", 2, "color", "#dc3545"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "agents-table"], [1, "agent-name-cell"], [1, "agent-icon-small"], [1, "agent-description-small"], [1, "status-badge"], [1, "execution-mode"], [1, "table-actions"], ["type", "button", "title", "Open Agent", 1, "action-btn-small", 3, "click"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary", 3, "click"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
+    /**
+     * Gets the agent's display icon
+     * Prioritizes LogoURL, falls back to IconClass, then default robot icon
+     */
+    getAgentIcon(agent) {
+        if (agent?.LogoURL) {
+            // LogoURL is used in img tag, not here
+            return '';
+        }
+        return agent?.IconClass || 'fa-solid fa-robot';
+    }
+    /**
+     * Checks if the agent has a logo URL (for image display)
+     */
+    hasLogoURL(agent) {
+        return !!agent?.LogoURL;
+    }
+    static ɵfac = function AgentConfigurationComponent_Factory(t) { return new (t || AgentConfigurationComponent)(i0.ɵɵdirectiveInject(i1.NewAgentDialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2.AITestHarnessDialogService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], inputs: { initialState: "initialState" }, outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 29, vars: 18, consts: [[1, "agent-configuration-container"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-robot"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "item-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Create New Agent", 1, "control-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "main-content"], ["orientation", "horizontal", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "agents", "filteredAgents", "filters"], [3, "resizable", "scrollable"], [1, "agents-content"], [1, "loading-container"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "empty-state"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "agents-grid"], [1, "agents-list"], [1, "agent-card", 3, "expanded"], [1, "agent-card"], [1, "card-header", 3, "click"], [1, "agent-info"], [1, "agent-icon"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-details"], [1, "agent-name"], [1, "agent-meta"], [1, "meta-item"], [1, "fa-solid", "fa-microchip"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "agent-description"], [1, "agent-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "Open Agent", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "fa-solid", "fa-bolt"], [1, "agent-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-check", 2, "color", "#28a745"], [1, "fa-solid", "fa-times", 2, "color", "#dc3545"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "agents-table"], [1, "agent-name-cell"], [1, "agent-icon-small"], [1, "agent-logo-small", 3, "src", "alt"], [1, "agent-description-small"], [1, "status-badge"], [1, "execution-mode"], [1, "table-actions"], ["type", "button", "title", "Open Agent", 1, "action-btn-small", 3, "click"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary", 3, "click"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2", 3);
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵtext(5, " Agent Configuration ");
@@ -502,17 +563,17 @@ export class AgentConfigurationComponent {
             i0.ɵɵconditional(ctx.isLoading ? 27 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading ? 28 : -1);
-        } }, dependencies: [i1.SplitterComponent, i1.SplitterPaneComponent, i2.AgentFilterPanelComponent], styles: ["\n\n.agent-configuration-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f5f7fa;\n}\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n  background: white;\n  padding: 16px 24px;\n  border-bottom: 1px solid #e0e6ed;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dashboard-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #17a2b8;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: #e9ecef;\n  border-color: #ced4da;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  color: #6c757d;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f8f9fa;\n  border-radius: 6px;\n  padding: 2px;\n  border: 1px solid #dee2e6;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 6px 12px;\n  border-radius: 4px;\n  color: #6c757d;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 16px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: #495057;\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #17a2b8;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.agents-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: #f5f7fa;\n}\n\n\n\n.agents-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n  gap: 20px;\n}\n\n.agent-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  transition: all 0.3s ease;\n  overflow: hidden;\n}\n\n.agent-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  transform: translateY(-2px);\n}\n\n.agent-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n}\n\n.agent-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  font-size: 20px;\n}\n\n.agent-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  margin-bottom: 6px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n  color: #28a745;\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.meta-item.status-disabled[_ngcontent-%COMP%] {\n  color: #6c757d;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6c757d;\n  transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 20px 20px 20px;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n  margin: 16px 0 0 0;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #6c757d;\n}\n\n.agent-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: #adb5bd;\n}\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #f0f4f8;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.agent-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #495057;\n  font-weight: 500;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  background: #f8f9fa;\n  border-top: 1px solid #e0e6ed;\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n\n\n.agents-list[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  overflow: hidden;\n}\n\n.agents-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 600;\n  color: #495057;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n}\n\n.agents-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 16px;\n  font-size: 14px;\n  color: #495057;\n}\n\n.agent-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.agent-icon-small[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  font-size: 16px;\n}\n\n.agent-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n  margin-top: 2px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.status-unknown[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  color: #6c757d;\n}\n\n.execution-mode[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 80px 20px;\n  color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: #dee2e6;\n  margin-bottom: 24px;\n  display: block;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: #495057;\n  font-weight: 600;\n  margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 24px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  color: white;\n  border: none;\n  padding: 10px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-bottom: 16px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 3px solid #17a2b8;\n  border-color: #17a2b8 transparent #17a2b8 transparent;\n  animation: _ngcontent-%COMP%_spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  animation-delay: -0.45s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  animation-delay: -0.3s;\n}\n\n@keyframes _ngcontent-%COMP%_spinner-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: #6c757d;\n  font-size: 14px;\n}\n\n\n\n@media (max-width: 768px) {\n  .dashboard-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n  }\n  \n  .header-info[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  \n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  \n  .agents-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .agent-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
+        } }, dependencies: [i3.SplitterComponent, i3.SplitterPaneComponent, i4.AgentFilterPanelComponent], styles: ["\n\n.agent-configuration-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f5f7fa;\n}\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n  background: white;\n  padding: 16px 24px;\n  border-bottom: 1px solid #e0e6ed;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dashboard-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #17a2b8;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: #e9ecef;\n  border-color: #ced4da;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  color: #6c757d;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f8f9fa;\n  border-radius: 6px;\n  padding: 2px;\n  border: 1px solid #dee2e6;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 6px 12px;\n  border-radius: 4px;\n  color: #6c757d;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 16px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: #495057;\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #17a2b8;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.agents-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: #f5f7fa;\n}\n\n\n\n.agents-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n  gap: 20px;\n}\n\n.agent-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  transition: all 0.3s ease;\n  overflow: hidden;\n}\n\n.agent-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  transform: translateY(-2px);\n}\n\n.agent-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n}\n\n.agent-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  font-size: 20px;\n}\n\n.agent-icon[_ngcontent-%COMP%]   .agent-logo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 10px;\n}\n\n.agent-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  margin-bottom: 6px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n  color: #28a745;\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.meta-item.status-disabled[_ngcontent-%COMP%] {\n  color: #6c757d;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6c757d;\n  transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 20px 20px 20px;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n  margin: 16px 0 0 0;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #6c757d;\n}\n\n.agent-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: #adb5bd;\n}\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #f0f4f8;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.agent-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #495057;\n  font-weight: 500;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  background: #f8f9fa;\n  border-top: 1px solid #e0e6ed;\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n\n\n.agents-list[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  overflow: hidden;\n}\n\n.agents-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 600;\n  color: #495057;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n}\n\n.agents-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 16px;\n  font-size: 14px;\n  color: #495057;\n}\n\n.agent-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.agent-icon-small[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  font-size: 16px;\n}\n\n.agent-icon-small[_ngcontent-%COMP%]   .agent-logo-small[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 8px;\n}\n\n.agent-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n  margin-top: 2px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.status-unknown[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  color: #6c757d;\n}\n\n.execution-mode[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 80px 20px;\n  color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: #dee2e6;\n  margin-bottom: 24px;\n  display: block;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: #495057;\n  font-weight: 600;\n  margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 24px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  color: white;\n  border: none;\n  padding: 10px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-bottom: 16px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 3px solid #17a2b8;\n  border-color: #17a2b8 transparent #17a2b8 transparent;\n  animation: _ngcontent-%COMP%_spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  animation-delay: -0.45s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  animation-delay: -0.3s;\n}\n\n@keyframes _ngcontent-%COMP%_spinner-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: #6c757d;\n  font-size: 14px;\n}\n\n\n\n@media (max-width: 768px) {\n  .dashboard-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n  }\n  \n  .header-info[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  \n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  \n  .agents-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .agent-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentConfigurationComponent, [{
         type: Component,
-        args: [{ selector: 'app-agent-configuration', template: "<div class=\"agent-configuration-container\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <h2 class=\"dashboard-title\">\n        <i class=\"fa-solid fa-robot\"></i>\n        Agent Configuration\n      </h2>\n      <button \n        type=\"button\" \n        class=\"filter-toggle-btn\"\n        (click)=\"toggleFilterPanel()\"\n        title=\"Toggle Filters\">\n        <i class=\"fa-solid fa-filter\"></i>\n        @if (filterPanelVisible) {\n          Hide Filters\n        } @else {\n          Show Filters\n        }\n      </button>\n      <span class=\"item-count\">{{ filteredAgents.length }} agents</span>\n    </div>\n    \n    <div class=\"header-controls\">\n      <div class=\"view-toggle\">\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'grid'\"\n          (click)=\"setViewMode('grid')\"\n          title=\"Grid View\">\n          <i class=\"fa-solid fa-grip\"></i>\n        </button>\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'list'\"\n          (click)=\"setViewMode('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n      </div>\n      \n      <button \n        type=\"button\" \n        class=\"control-btn primary\"\n        (click)=\"createNewAgent()\"\n        title=\"Create New Agent\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Agent\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <div class=\"main-content\" >\n    <kendo-splitter \n      class=\"main-splitter\"\n      orientation=\"horizontal\"\n      (layoutChange)=\"onMainSplitterChange($event)\"\n      >\n      \n      <!-- Filter Panel (Left) -->\n      <kendo-splitter-pane \n        [size]=\"filterPanelVisible ? '320px' : '0px'\"\n        [collapsible]=\"false\"\n        [resizable]=\"filterPanelVisible\"\n        [scrollable]=\"false\"\n        [hidden]=\"!filterPanelVisible\">\n        <mj-agent-filter-panel\n          [agents]=\"agents\"\n          [filteredAgents]=\"filteredAgents\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-agent-filter-panel>\n      </kendo-splitter-pane>\n      \n      <!-- Agents List Panel -->\n      <kendo-splitter-pane \n        [resizable]=\"true\"\n        [scrollable]=\"false\">\n        <div class=\"agents-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <div class=\"loading-content\">\n                <div class=\"loading-spinner\">\n                  <div class=\"spinner-ring\"></div>\n                  <div class=\"spinner-ring\"></div>\n                  <div class=\"spinner-ring\"></div>\n                </div>\n                <div class=\"loading-text\">Loading agents...</div>\n              </div>\n            </div>\n          }\n\n          <!-- Agents Display -->\n          @if (!isLoading) {\n            @if (filteredAgents.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-robot\"></i>\n                <h3>No agents found</h3>\n                <p>No agents match your current filters. Try adjusting your search criteria or create a new agent.</p>\n                <button \n                  type=\"button\" \n                  class=\"empty-state-btn\"\n                  (click)=\"createNewAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create New Agent\n                </button>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"agents-grid\">\n                  @for (agent of filteredAgents; track agent.ID) {\n                    <div class=\"agent-card\" [class.expanded]=\"expandedAgentId === agent.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleAgentExpansion(agent.ID)\">\n                        <div class=\"agent-info\">\n                          <div class=\"agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                            <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n                          </div>\n                          <div class=\"agent-details\">\n                            <h4 class=\"agent-name\">{{ agent.Name }}</h4>\n                            <div class=\"agent-meta\">\n                              <span class=\"meta-item\">\n                                <i class=\"fa-solid fa-microchip\"></i>\n                                {{ agent.ExecutionMode }}\n                              </span>\n                              @if (agent.Status) {\n                                <span class=\"meta-item\" [class]=\"'status-' + agent.Status.toLowerCase()\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  {{ agent.Status }}\n                                </span>\n                              }\n                              @if (agent.ExposeAsAction) {\n                                <span class=\"meta-item\">\n                                  <i class=\"fa-solid fa-bolt\"></i>\n                                  Exposed\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                        \n                        <i class=\"fa-solid fa-chevron-down expand-icon\" \n                           [class.rotated]=\"expandedAgentId === agent.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (agent.Description) {\n                          <p class=\"agent-description\">{{ agent.Description }}</p>\n                        } @else {\n                          <p class=\"agent-description text-muted\">No description provided</p>\n                        }\n                        \n                        <!-- Expandable Content -->\n                        @if (expandedAgentId === agent.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"agent-stats\">\n                              @if (agent.Parent) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Parent</span>\n                                  <span class=\"stat-value\">{{ agent.Parent }}</span>\n                                </div>\n                              }\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Context Compression</span>\n                                <span class=\"stat-value\">\n                                  @if (agent.EnableContextCompression) {\n                                    <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Enabled\n                                  } @else {\n                                    <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> Disabled\n                                  }\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        <button \n                          type=\"button\" \n                          class=\"action-btn\"\n                          (click)=\"openAgentRecord(agent.ID)\"\n                          title=\"Open Agent\">\n                          <i class=\"fa-solid fa-external-link-alt\"></i>\n                          Open\n                        </button>\n                        \n                        @if (agent.Status === 'Active') {\n                          <button \n                            type=\"button\" \n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"runAgent(agent)\"\n                            title=\"Run Agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              \n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"agents-list\">\n                  <table class=\"agents-table\">\n                    <thead>\n                      <tr>\n                        <th>Name</th>\n                        <th>Status</th>\n                        <th>Execution Mode</th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (agent of filteredAgents; track agent.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"agent-name-cell\">\n                              <div class=\"agent-icon-small\" [style.background-color]=\"getAgentIconColor(agent)\">\n                                <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n                              </div>\n                              <div>\n                                <div class=\"agent-name\">{{ agent.Name }}</div>\n                                @if (agent.Description) {\n                                  <div class=\"agent-description-small\">{{ agent.Description }}</div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status || 'Unknown' }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"execution-mode\">\n                              <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n                              {{ agent.ExecutionMode }}\n                            </span>\n                          </td>\n                          <td>\n                            <div class=\"table-actions\">\n                              <button \n                                type=\"button\" \n                                class=\"action-btn-small\"\n                                (click)=\"openAgentRecord(agent.ID)\"\n                                title=\"Open Agent\">\n                                <i class=\"fa-solid fa-external-link-alt\"></i>\n                              </button>\n                              @if (agent.Status === 'Active') {\n                                <button \n                                  type=\"button\" \n                                  class=\"action-btn-small primary\"\n                                  (click)=\"runAgent(agent)\"\n                                  title=\"Run Agent\">\n                                  <i class=\"fa-solid fa-play\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n        </div>\n      </kendo-splitter-pane>\n    </kendo-splitter>\n  </div>\n</div>", styles: ["/* Agent Configuration Component - Modern Design */\n.agent-configuration-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f5f7fa;\n}\n\n/* Dashboard Header */\n.dashboard-header {\n  background: white;\n  padding: 16px 24px;\n  border-bottom: 1px solid #e0e6ed;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.dashboard-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dashboard-title i {\n  color: #17a2b8;\n}\n\n.filter-toggle-btn {\n  background: #f8f9fa;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-toggle-btn:hover {\n  background: #e9ecef;\n  border-color: #ced4da;\n}\n\n.item-count {\n  color: #6c757d;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.header-controls {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  background: #f8f9fa;\n  border-radius: 6px;\n  padding: 2px;\n  border: 1px solid #dee2e6;\n}\n\n.view-btn {\n  background: transparent;\n  border: none;\n  padding: 6px 12px;\n  border-radius: 4px;\n  color: #6c757d;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 16px;\n}\n\n.view-btn:hover {\n  color: #495057;\n}\n\n.view-btn.active {\n  background: white;\n  color: #17a2b8;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.control-btn.primary {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.control-btn.primary:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n/* Main Content */\n.main-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.agents-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: #f5f7fa;\n}\n\n/* Grid View */\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n  gap: 20px;\n}\n\n.agent-card {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  transition: all 0.3s ease;\n  overflow: hidden;\n}\n\n.agent-card:hover {\n  box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  transform: translateY(-2px);\n}\n\n.agent-card.expanded {\n  box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header {\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n}\n\n.agent-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon i {\n  color: white;\n  font-size: 20px;\n}\n\n.agent-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  margin-bottom: 6px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.meta-item i {\n  font-size: 12px;\n}\n\n.meta-item.status-active {\n  color: #28a745;\n}\n\n.meta-item.status-pending {\n  color: #ffc107;\n}\n\n.meta-item.status-disabled {\n  color: #6c757d;\n}\n\n.expand-icon {\n  font-size: 14px;\n  color: #6c757d;\n  transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n}\n\n.card-body {\n  padding: 0 20px 20px 20px;\n}\n\n.agent-description {\n  margin: 16px 0 0 0;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #6c757d;\n}\n\n.agent-description.text-muted {\n  font-style: italic;\n  color: #adb5bd;\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #f0f4f8;\n  animation: slideDown 0.3s ease;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.agent-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value {\n  font-size: 14px;\n  color: #495057;\n  font-weight: 500;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 16px 20px;\n  background: #f8f9fa;\n  border-top: 1px solid #e0e6ed;\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-primary {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-primary:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n/* List View */\n.agents-list {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  overflow: hidden;\n}\n\n.agents-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table thead {\n  background: #f8f9fa;\n  border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table th {\n  padding: 12px 16px;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 600;\n  color: #495057;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.agents-table tbody tr {\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table tbody tr:hover {\n  background: #f8f9fa;\n}\n\n.agents-table td {\n  padding: 16px;\n  font-size: 14px;\n  color: #495057;\n}\n\n.agent-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.agent-icon-small {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon-small i {\n  color: white;\n  font-size: 16px;\n}\n\n.agent-description-small {\n  font-size: 13px;\n  color: #6c757d;\n  margin-top: 2px;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge.status-pending {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge.status-disabled {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.status-unknown {\n  background: #f8f9fa;\n  color: #6c757d;\n}\n\n.execution-mode {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.table-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-small.primary {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-small.primary:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 80px 20px;\n  color: #6c757d;\n}\n\n.empty-state i {\n  font-size: 64px;\n  color: #dee2e6;\n  margin-bottom: 24px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: #495057;\n  font-weight: 600;\n  margin-bottom: 12px;\n}\n\n.empty-state p {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 24px;\n}\n\n.empty-state-btn {\n  background: #17a2b8;\n  color: white;\n  border: none;\n  padding: 10px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty-state-btn:hover {\n  background: #1485a3;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n.loading-content {\n  text-align: center;\n}\n\n.loading-spinner {\n  display: inline-block;\n  margin-bottom: 16px;\n}\n\n.spinner-ring {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 3px solid #17a2b8;\n  border-color: #17a2b8 transparent #17a2b8 transparent;\n  animation: spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring:nth-child(2) {\n  animation-delay: -0.45s;\n}\n\n.spinner-ring:nth-child(3) {\n  animation-delay: -0.3s;\n}\n\n@keyframes spinner-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text {\n  color: #6c757d;\n  font-size: 14px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n  }\n  \n  .header-info {\n    justify-content: space-between;\n  }\n  \n  .header-controls {\n    justify-content: space-between;\n  }\n  \n  .agents-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .agent-stats {\n    grid-template-columns: 1fr;\n  }\n}"] }]
-    }], () => [], { initialState: [{
+        args: [{ selector: 'app-agent-configuration', template: "<div class=\"agent-configuration-container\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <h2 class=\"dashboard-title\">\n        <i class=\"fa-solid fa-robot\"></i>\n        Agent Configuration\n      </h2>\n      <button \n        type=\"button\" \n        class=\"filter-toggle-btn\"\n        (click)=\"toggleFilterPanel()\"\n        title=\"Toggle Filters\">\n        <i class=\"fa-solid fa-filter\"></i>\n        @if (filterPanelVisible) {\n          Hide Filters\n        } @else {\n          Show Filters\n        }\n      </button>\n      <span class=\"item-count\">{{ filteredAgents.length }} agents</span>\n    </div>\n    \n    <div class=\"header-controls\">\n      <div class=\"view-toggle\">\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'grid'\"\n          (click)=\"setViewMode('grid')\"\n          title=\"Grid View\">\n          <i class=\"fa-solid fa-grip\"></i>\n        </button>\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'list'\"\n          (click)=\"setViewMode('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n      </div>\n      \n      <button \n        type=\"button\" \n        class=\"control-btn primary\"\n        (click)=\"createNewAgent()\"\n        title=\"Create New Agent\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Agent\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <div class=\"main-content\" >\n    <kendo-splitter \n      class=\"main-splitter\"\n      orientation=\"horizontal\"\n      (layoutChange)=\"onMainSplitterChange($event)\"\n      >\n      \n      <!-- Filter Panel (Left) -->\n      <kendo-splitter-pane \n        [size]=\"filterPanelVisible ? '320px' : '0px'\"\n        [collapsible]=\"false\"\n        [resizable]=\"filterPanelVisible\"\n        [scrollable]=\"false\"\n        [hidden]=\"!filterPanelVisible\">\n        <mj-agent-filter-panel\n          [agents]=\"agents\"\n          [filteredAgents]=\"filteredAgents\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-agent-filter-panel>\n      </kendo-splitter-pane>\n      \n      <!-- Agents List Panel -->\n      <kendo-splitter-pane \n        [resizable]=\"true\"\n        [scrollable]=\"false\">\n        <div class=\"agents-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <div class=\"loading-content\">\n                <div class=\"loading-spinner\">\n                  <div class=\"spinner-ring\"></div>\n                  <div class=\"spinner-ring\"></div>\n                  <div class=\"spinner-ring\"></div>\n                </div>\n                <div class=\"loading-text\">Loading agents...</div>\n              </div>\n            </div>\n          }\n\n          <!-- Agents Display -->\n          @if (!isLoading) {\n            @if (filteredAgents.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-robot\"></i>\n                <h3>No agents found</h3>\n                <p>No agents match your current filters. Try adjusting your search criteria or create a new agent.</p>\n                <button \n                  type=\"button\" \n                  class=\"empty-state-btn\"\n                  (click)=\"createNewAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create New Agent\n                </button>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"agents-grid\">\n                  @for (agent of filteredAgents; track agent.ID) {\n                    <div class=\"agent-card\" [class.expanded]=\"expandedAgentId === agent.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleAgentExpansion(agent.ID)\">\n                        <div class=\"agent-info\">\n                          <div class=\"agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                            @if (hasLogoURL(agent)) {\n                              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo\">\n                            } @else {\n                              <i [class]=\"getAgentIcon(agent)\"></i>\n                            }\n                          </div>\n                          <div class=\"agent-details\">\n                            <h4 class=\"agent-name\">{{ agent.Name }}</h4>\n                            <div class=\"agent-meta\">\n                              <span class=\"meta-item\">\n                                <i class=\"fa-solid fa-microchip\"></i>\n                                {{ agent.ExecutionMode }}\n                              </span>\n                              @if (agent.Status) {\n                                <span class=\"meta-item\" [class]=\"'status-' + agent.Status.toLowerCase()\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  {{ agent.Status }}\n                                </span>\n                              }\n                              @if (agent.ExposeAsAction) {\n                                <span class=\"meta-item\">\n                                  <i class=\"fa-solid fa-bolt\"></i>\n                                  Exposed\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                        \n                        <i class=\"fa-solid fa-chevron-down expand-icon\" \n                           [class.rotated]=\"expandedAgentId === agent.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (agent.Description) {\n                          <p class=\"agent-description\">{{ agent.Description }}</p>\n                        } @else {\n                          <p class=\"agent-description text-muted\">No description provided</p>\n                        }\n                        \n                        <!-- Expandable Content -->\n                        @if (expandedAgentId === agent.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"agent-stats\">\n                              @if (agent.Parent) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Parent</span>\n                                  <span class=\"stat-value\">{{ agent.Parent }}</span>\n                                </div>\n                              }\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Context Compression</span>\n                                <span class=\"stat-value\">\n                                  @if (agent.EnableContextCompression) {\n                                    <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Enabled\n                                  } @else {\n                                    <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> Disabled\n                                  }\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        <button \n                          type=\"button\" \n                          class=\"action-btn\"\n                          (click)=\"openAgentRecord(agent.ID)\"\n                          title=\"Open Agent\">\n                          <i class=\"fa-solid fa-external-link-alt\"></i>\n                          Open\n                        </button>\n                        \n                        @if (agent.Status === 'Active') {\n                          <button \n                            type=\"button\" \n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"runAgent(agent)\"\n                            title=\"Run Agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              \n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"agents-list\">\n                  <table class=\"agents-table\">\n                    <thead>\n                      <tr>\n                        <th>Name</th>\n                        <th>Status</th>\n                        <th>Execution Mode</th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (agent of filteredAgents; track agent.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"agent-name-cell\">\n                              <div class=\"agent-icon-small\" [style.background-color]=\"getAgentIconColor(agent)\">\n                                @if (hasLogoURL(agent)) {\n                                  <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo-small\">\n                                } @else {\n                                  <i [class]=\"getAgentIcon(agent)\"></i>\n                                }\n                              </div>\n                              <div>\n                                <div class=\"agent-name\">{{ agent.Name }}</div>\n                                @if (agent.Description) {\n                                  <div class=\"agent-description-small\">{{ agent.Description }}</div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status || 'Unknown' }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"execution-mode\">\n                              <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n                              {{ agent.ExecutionMode }}\n                            </span>\n                          </td>\n                          <td>\n                            <div class=\"table-actions\">\n                              <button \n                                type=\"button\" \n                                class=\"action-btn-small\"\n                                (click)=\"openAgentRecord(agent.ID)\"\n                                title=\"Open Agent\">\n                                <i class=\"fa-solid fa-external-link-alt\"></i>\n                              </button>\n                              @if (agent.Status === 'Active') {\n                                <button \n                                  type=\"button\" \n                                  class=\"action-btn-small primary\"\n                                  (click)=\"runAgent(agent)\"\n                                  title=\"Run Agent\">\n                                  <i class=\"fa-solid fa-play\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n        </div>\n      </kendo-splitter-pane>\n    </kendo-splitter>\n  </div>\n</div>\n\n<!-- AI Agent Test Harness - Now handled by service with minimize support -->", styles: ["/* Agent Configuration Component - Modern Design */\n.agent-configuration-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f5f7fa;\n}\n\n/* Dashboard Header */\n.dashboard-header {\n  background: white;\n  padding: 16px 24px;\n  border-bottom: 1px solid #e0e6ed;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.dashboard-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dashboard-title i {\n  color: #17a2b8;\n}\n\n.filter-toggle-btn {\n  background: #f8f9fa;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-toggle-btn:hover {\n  background: #e9ecef;\n  border-color: #ced4da;\n}\n\n.item-count {\n  color: #6c757d;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.header-controls {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  background: #f8f9fa;\n  border-radius: 6px;\n  padding: 2px;\n  border: 1px solid #dee2e6;\n}\n\n.view-btn {\n  background: transparent;\n  border: none;\n  padding: 6px 12px;\n  border-radius: 4px;\n  color: #6c757d;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 16px;\n}\n\n.view-btn:hover {\n  color: #495057;\n}\n\n.view-btn.active {\n  background: white;\n  color: #17a2b8;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.control-btn.primary {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.control-btn.primary:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n/* Main Content */\n.main-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.agents-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: #f5f7fa;\n}\n\n/* Grid View */\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n  gap: 20px;\n}\n\n.agent-card {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  transition: all 0.3s ease;\n  overflow: hidden;\n}\n\n.agent-card:hover {\n  box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  transform: translateY(-2px);\n}\n\n.agent-card.expanded {\n  box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header {\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n}\n\n.agent-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon i {\n  color: white;\n  font-size: 20px;\n}\n\n.agent-icon .agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 10px;\n}\n\n.agent-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  margin-bottom: 6px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.meta-item i {\n  font-size: 12px;\n}\n\n.meta-item.status-active {\n  color: #28a745;\n}\n\n.meta-item.status-pending {\n  color: #ffc107;\n}\n\n.meta-item.status-disabled {\n  color: #6c757d;\n}\n\n.expand-icon {\n  font-size: 14px;\n  color: #6c757d;\n  transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n}\n\n.card-body {\n  padding: 0 20px 20px 20px;\n}\n\n.agent-description {\n  margin: 16px 0 0 0;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #6c757d;\n}\n\n.agent-description.text-muted {\n  font-style: italic;\n  color: #adb5bd;\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #f0f4f8;\n  animation: slideDown 0.3s ease;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.agent-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value {\n  font-size: 14px;\n  color: #495057;\n  font-weight: 500;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 16px 20px;\n  background: #f8f9fa;\n  border-top: 1px solid #e0e6ed;\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-primary {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-primary:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n/* List View */\n.agents-list {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  overflow: hidden;\n}\n\n.agents-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table thead {\n  background: #f8f9fa;\n  border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table th {\n  padding: 12px 16px;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 600;\n  color: #495057;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.agents-table tbody tr {\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table tbody tr:hover {\n  background: #f8f9fa;\n}\n\n.agents-table td {\n  padding: 16px;\n  font-size: 14px;\n  color: #495057;\n}\n\n.agent-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.agent-icon-small {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon-small i {\n  color: white;\n  font-size: 16px;\n}\n\n.agent-icon-small .agent-logo-small {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 8px;\n}\n\n.agent-description-small {\n  font-size: 13px;\n  color: #6c757d;\n  margin-top: 2px;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge.status-pending {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge.status-disabled {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.status-unknown {\n  background: #f8f9fa;\n  color: #6c757d;\n}\n\n.execution-mode {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.table-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-small.primary {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-small.primary:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 80px 20px;\n  color: #6c757d;\n}\n\n.empty-state i {\n  font-size: 64px;\n  color: #dee2e6;\n  margin-bottom: 24px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: #495057;\n  font-weight: 600;\n  margin-bottom: 12px;\n}\n\n.empty-state p {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 24px;\n}\n\n.empty-state-btn {\n  background: #17a2b8;\n  color: white;\n  border: none;\n  padding: 10px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty-state-btn:hover {\n  background: #1485a3;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n.loading-content {\n  text-align: center;\n}\n\n.loading-spinner {\n  display: inline-block;\n  margin-bottom: 16px;\n}\n\n.spinner-ring {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 3px solid #17a2b8;\n  border-color: #17a2b8 transparent #17a2b8 transparent;\n  animation: spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring:nth-child(2) {\n  animation-delay: -0.45s;\n}\n\n.spinner-ring:nth-child(3) {\n  animation-delay: -0.3s;\n}\n\n@keyframes spinner-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text {\n  color: #6c757d;\n  font-size: 14px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n  }\n  \n  .header-info {\n    justify-content: space-between;\n  }\n  \n  .header-controls {\n    justify-content: space-between;\n  }\n  \n  .agents-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .agent-stats {\n    grid-template-columns: 1fr;\n  }\n}"] }]
+    }], () => [{ type: i1.NewAgentDialogService }, { type: i0.ViewContainerRef }, { type: i2.AITestHarnessDialogService }], { initialState: [{
             type: Input
         }], openEntityRecord: [{
             type: Output
         }], stateChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber: 19 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=agent-configuration.component.js.map