@memberjunction/ng-dashboards 5.22.0 → 5.23.0

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

@@ -18,7 +18,7 @@ import * as i1 from "@memberjunction/ng-ai-test-harness";
 import * as i2 from "@memberjunction/ng-agents";
 import * as i3 from "@memberjunction/ng-shared";
 import * as i4 from "@angular/common";
-import * as i5 from "@progress/kendo-angular-layout";
+import * as i5 from "angular-split";
 import * as i6 from "@memberjunction/ng-shared-generic";
 import * as i7 from "./agent-filter-panel.component";
 import * as i8 from "../../../shared/pipes/highlight-search.pipe";
@@ -32,14 +32,25 @@ function AgentConfigurationComponent_Conditional_8_Template(rf, ctx) { if (rf &
 function AgentConfigurationComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Show Filters ");
 } }
-function AgentConfigurationComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "mj-loading", 28);
+function AgentConfigurationComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "as-split-area", 21)(1, "mj-agent-filter-panel", 26);
+    i0.ɵɵlistener("filtersChange", function AgentConfigurationComponent_Conditional_25_Template_mj_agent_filter_panel_filtersChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFiltersChange($event)); })("filterChange", function AgentConfigurationComponent_Conditional_25_Template_mj_agent_filter_panel_filterChange_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterChange()); })("resetFilters", function AgentConfigurationComponent_Conditional_25_Template_mj_agent_filter_panel_resetFilters_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResetFilters()); })("closePanel", function AgentConfigurationComponent_Conditional_25_Template_mj_agent_filter_panel_closePanel_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFilterPanel()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("size", 20)("minSize", 15)("maxSize", 30);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("agents", ctx_r1.agents)("filteredAgents", ctx_r1.filteredAgents)("filters", ctx_r1.currentFilters);
+} }
+function AgentConfigurationComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelement(1, "mj-loading", 27);
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29);
+function AgentConfigurationComponent_Conditional_29_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28);
     i0.ɵɵelement(1, "i", 5);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No agents found");
@@ -47,246 +58,246 @@ function AgentConfigurationComponent_Conditional_30_Conditional_0_Template(rf, c
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "No agents match your current filters. Try adjusting your search criteria or create a new agent.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 30);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createNewAgent()); });
+    i0.ɵɵelementStart(6, "button", 29);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createNewAgent()); });
     i0.ɵɵelement(7, "i", 18);
     i0.ɵɵtext(8, " Create New Agent ");
     i0.ɵɵelementEnd()();
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 39);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 38);
 } if (rf & 2) {
-    const agent_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("src", agent_r4.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r4.Name + " logo");
+    const agent_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", agent_r5.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r5.Name + " logo");
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_29_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 agent_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r4));
+    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r5));
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 55);
-    i0.ɵɵelement(1, "i", 56);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 54);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const agent_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap("status-" + agent_r4.Status.toLowerCase());
+    const agent_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap("status-" + agent_r5.Status.toLowerCase());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", agent_r4.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", agent_r5.Status, " ");
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "p", 49);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "p", 48);
     i0.ɵɵpipe(1, "highlightSearch");
 } if (rf & 2) {
-    const agent_r4 = i0.ɵɵnextContext().$implicit;
+    const agent_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, agent_r4.Description, ctx_r1.currentFilters.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, agent_r5.Description, ctx_r1.currentFilters.searchTerm), i0.ɵɵsanitizeHtml);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 50);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 49);
     i0.ɵɵtext(1, "No description provided");
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "span", 59);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57)(1, "span", 58);
     i0.ɵɵtext(2, "Parent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 60);
+    i0.ɵɵelementStart(3, "span", 59);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const agent_r4 = i0.ɵɵnextContext(2).$implicit;
+    const agent_r5 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(agent_r4.Parent);
+    i0.ɵɵtextInterpolate(agent_r5.Parent);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 61);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
     i0.ɵɵtext(1, " Enabled ");
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 62);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 61);
     i0.ɵɵtext(1, " Disabled ");
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51)(1, "div", 57);
-    i0.ɵɵconditionalCreate(2, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template, 5, 1, "div", 58);
-    i0.ɵɵelementStart(3, "div", 58)(4, "span", 59);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "div", 56);
+    i0.ɵɵconditionalCreate(2, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template, 5, 1, "div", 57);
+    i0.ɵɵelementStart(3, "div", 57)(4, "span", 58);
     i0.ɵɵtext(5, "Context Compression");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 60);
-    i0.ɵɵconditionalCreate(7, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template, 2, 0)(8, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template, 2, 0);
+    i0.ɵɵelementStart(6, "span", 59);
+    i0.ɵɵconditionalCreate(7, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template, 2, 0)(8, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template, 2, 0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const agent_r4 = i0.ɵɵnextContext().$implicit;
+    const agent_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(agent_r4.Parent ? 2 : -1);
+    i0.ɵɵconditional(agent_r5.Parent ? 2 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(agent_r4.EnableContextCompression ? 7 : 8);
+    i0.ɵɵconditional(agent_r5.EnableContextCompression ? 7 : 8);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 63);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_20_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const agent_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showAgentDetails(agent_r4, $event)); });
-    i0.ɵɵelement(1, "i", 64);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 62);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_20_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const agent_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showAgentDetails(agent_r5, $event)); });
+    i0.ɵɵelement(1, "i", 63);
     i0.ɵɵtext(2, " Details ");
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_21_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const agent_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.runAgent(agent_r4); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 66);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 64);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_21_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const agent_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.runAgent(agent_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "div", 36);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_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", 37)(3, "div", 38);
-    i0.ɵɵconditionalCreate(4, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_4_Template, 1, 2, "img", 39)(5, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_5_Template, 1, 2, "i", 40);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template_div_click_1_listener() { const agent_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleAgentExpansion(agent_r5.ID)); });
+    i0.ɵɵelementStart(2, "div", 36)(3, "div", 37);
+    i0.ɵɵconditionalCreate(4, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_4_Template, 1, 2, "img", 38)(5, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_5_Template, 1, 2, "i", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 41);
-    i0.ɵɵelement(7, "h4", 42);
+    i0.ɵɵelementStart(6, "div", 40);
+    i0.ɵɵelement(7, "h4", 41);
     i0.ɵɵpipe(8, "highlightSearch");
-    i0.ɵɵelementStart(9, "div", 43)(10, "span", 44);
-    i0.ɵɵelement(11, "i", 45);
+    i0.ɵɵelementStart(9, "div", 42)(10, "span", 43);
+    i0.ɵɵelement(11, "i", 44);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_13_Template, 3, 3, "span", 46);
+    i0.ɵɵconditionalCreate(13, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_13_Template, 3, 3, "span", 45);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(14, "i", 47);
+    i0.ɵɵelement(14, "i", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 48);
-    i0.ɵɵconditionalCreate(16, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 4, "p", 49)(17, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 2, 0, "p", 50);
-    i0.ɵɵconditionalCreate(18, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_18_Template, 9, 2, "div", 51);
+    i0.ɵɵelementStart(15, "div", 47);
+    i0.ɵɵconditionalCreate(16, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 4, "p", 48)(17, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 2, 0, "p", 49);
+    i0.ɵɵconditionalCreate(18, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_18_Template, 9, 2, "div", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 52);
-    i0.ɵɵconditionalCreate(20, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_20_Template, 3, 0, "button", 53);
-    i0.ɵɵconditionalCreate(21, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Conditional_21_Template, 3, 0, "button", 54);
+    i0.ɵɵelementStart(19, "div", 51);
+    i0.ɵɵconditionalCreate(20, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_20_Template, 3, 0, "button", 52);
+    i0.ɵɵconditionalCreate(21, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_21_Template, 3, 0, "button", 53);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const agent_r4 = ctx.$implicit;
+    const agent_r5 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedAgentId === agent_r4.ID);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedAgentId === agent_r5.ID);
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r4));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r5));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r4) ? 4 : 5);
+    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r5) ? 4 : 5);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(8, 14, agent_r4.Name, ctx_r1.currentFilters.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(8, 14, agent_r5.Name, ctx_r1.currentFilters.searchTerm), i0.ɵɵsanitizeHtml);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getAgentTypeName(agent_r4), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getAgentTypeName(agent_r5), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agent_r4.Status ? 13 : -1);
+    i0.ɵɵconditional(agent_r5.Status ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("rotated", ctx_r1.expandedAgentId === agent_r4.ID);
+    i0.ɵɵclassProp("rotated", ctx_r1.expandedAgentId === agent_r5.ID);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(agent_r4.Description ? 16 : 17);
+    i0.ɵɵconditional(agent_r5.Description ? 16 : 17);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.expandedAgentId === agent_r4.ID ? 18 : -1);
+    i0.ɵɵconditional(ctx_r1.expandedAgentId === agent_r5.ID ? 18 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.UserCanReadAgents ? 20 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agent_r4.Status === "Active" && ctx_r1.UserCanReadAgents ? 21 : -1);
+    i0.ɵɵconditional(agent_r5.Status === "Active" && ctx_r1.UserCanReadAgents ? 21 : -1);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_For_2_Template, 22, 17, "div", 34, _forTrack0);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template, 22, 17, "div", 33, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.filteredAgents);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_For_2_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_2_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_For_2_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 68);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_2_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 67);
 } if (rf & 2) {
-    const node_r7 = i0.ɵɵnextContext().$implicit;
+    const node_r8 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext(2);
-    const categoryNodeTpl_r8 = i0.ɵɵreference(3);
-    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTpl_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r7));
+    const categoryNodeTpl_r9 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTpl_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r8));
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_For_2_Conditional_0_Template, 1, 4, "ng-container");
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_2_Conditional_0_Template, 1, 4, "ng-container");
 } if (rf & 2) {
-    const node_r7 = ctx.$implicit;
+    const node_r8 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵconditional(ctx_r1.hasVisibleContent(node_r7) ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.hasVisibleContent(node_r8) ? 0 : -1);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 77);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 76);
 } if (rf & 2) {
-    const agent_r10 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("src", agent_r10.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r10.Name + " logo");
+    const agent_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", agent_r11.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r11.Name + " logo");
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const agent_r10 = i0.ɵɵnextContext().$implicit;
+    const agent_r11 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r10));
+    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r11));
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 83);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const agent_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.runAgent(agent_r10); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 66);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 82);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r12); const agent_r11 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.runAgent(agent_r11); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Template_div_click_0_listener() { const agent_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.showAgentDetails(agent_r10)); });
-    i0.ɵɵelementStart(1, "div", 76);
-    i0.ɵɵconditionalCreate(2, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_2_Template, 1, 2, "img", 77)(3, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_3_Template, 1, 2, "i", 40);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Template_div_click_0_listener() { const agent_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.showAgentDetails(agent_r11)); });
+    i0.ɵɵelementStart(1, "div", 75);
+    i0.ɵɵconditionalCreate(2, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_2_Template, 1, 2, "img", 76)(3, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_3_Template, 1, 2, "i", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 78)(5, "span", 79);
+    i0.ɵɵelementStart(4, "div", 77)(5, "span", 78);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 80);
+    i0.ɵɵelementStart(7, "span", 79);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "span", 81);
+    i0.ɵɵelementStart(9, "span", 80);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(11, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_11_Template, 2, 0, "button", 82);
+    i0.ɵɵconditionalCreate(11, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Conditional_11_Template, 2, 0, "button", 81);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const agent_r10 = ctx.$implicit;
+    const agent_r11 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r10));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r11));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r10) ? 2 : 3);
+    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r11) ? 2 : 3);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(agent_r10.Name);
+    i0.ɵɵtextInterpolate(agent_r11.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.getAgentTypeName(agent_r10));
+    i0.ɵɵtextInterpolate(ctx_r1.getAgentTypeName(agent_r11));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("status-" + (agent_r10.Status || "unknown").toLowerCase());
+    i0.ɵɵclassMap("status-" + (agent_r11.Status || "unknown").toLowerCase());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", agent_r10.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", agent_r11.Status, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agent_r10.Status === "Active" && ctx_r1.UserCanReadAgents ? 11 : -1);
+    i0.ɵɵconditional(agent_r11.Status === "Active" && ctx_r1.UserCanReadAgents ? 11 : -1);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 69);
-    i0.ɵɵelement(2, "i", 70);
-    i0.ɵɵelementStart(3, "span", 71);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 66)(1, "div", 68);
+    i0.ɵɵelement(2, "i", 69);
+    i0.ɵɵelementStart(3, "span", 70);
     i0.ɵɵtext(4, "Uncategorized");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 72);
+    i0.ɵɵelementStart(5, "span", 71);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 73);
-    i0.ɵɵrepeaterCreate(8, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_For_9_Template, 12, 9, "div", 74, _forTrack0);
+    i0.ɵɵelementStart(7, "div", 72);
+    i0.ɵɵrepeaterCreate(8, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_For_9_Template, 12, 9, "div", 73, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -295,10 +306,10 @@ function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.uncategorizedAgents);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_For_2_Template, 1, 1, null, null, _forTrack1);
-    i0.ɵɵconditionalCreate(3, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Conditional_3_Template, 10, 1, "div", 67);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_2_Template, 1, 1, null, null, _forTrack1);
+    i0.ɵɵconditionalCreate(3, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Conditional_3_Template, 10, 1, "div", 66);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -307,234 +318,234 @@ function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.uncategorizedAgents.length > 0 ? 3 : -1);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 77);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 76);
 } if (rf & 2) {
-    const agent_r15 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("src", agent_r15.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r15.Name + " logo");
+    const agent_r16 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", agent_r16.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r16.Name + " logo");
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const agent_r15 = i0.ɵɵnextContext().$implicit;
+    const agent_r16 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(6);
-    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r15));
+    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r16));
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 83);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const agent_r15 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(6); ctx_r1.runAgent(agent_r15); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 66);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 82);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r17); const agent_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(6); ctx_r1.runAgent(agent_r16); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Template_div_click_0_listener() { const agent_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.showAgentDetails(agent_r15)); });
-    i0.ɵɵelementStart(1, "div", 76);
-    i0.ɵɵconditionalCreate(2, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_2_Template, 1, 2, "img", 77)(3, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_3_Template, 1, 2, "i", 40);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Template_div_click_0_listener() { const agent_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.showAgentDetails(agent_r16)); });
+    i0.ɵɵelementStart(1, "div", 75);
+    i0.ɵɵconditionalCreate(2, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_2_Template, 1, 2, "img", 76)(3, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_3_Template, 1, 2, "i", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 78)(5, "span", 79);
+    i0.ɵɵelementStart(4, "div", 77)(5, "span", 78);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 80);
+    i0.ɵɵelementStart(7, "span", 79);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "span", 81);
+    i0.ɵɵelementStart(9, "span", 80);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(11, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_11_Template, 2, 0, "button", 82);
+    i0.ɵɵconditionalCreate(11, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Conditional_11_Template, 2, 0, "button", 81);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const agent_r15 = ctx.$implicit;
+    const agent_r16 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r15));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r16));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r15) ? 2 : 3);
+    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r16) ? 2 : 3);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(agent_r15.Name);
+    i0.ɵɵtextInterpolate(agent_r16.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.getAgentTypeName(agent_r15));
+    i0.ɵɵtextInterpolate(ctx_r1.getAgentTypeName(agent_r16));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("status-" + (agent_r15.Status || "unknown").toLowerCase());
+    i0.ɵɵclassMap("status-" + (agent_r16.Status || "unknown").toLowerCase());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", agent_r15.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", agent_r16.Status, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agent_r15.Status === "Active" && ctx_r1.UserCanReadAgents ? 11 : -1);
+    i0.ɵɵconditional(agent_r16.Status === "Active" && ctx_r1.UserCanReadAgents ? 11 : -1);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Template, 12, 9, "div", 74, _forTrack0);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_For_2_Template, 12, 9, "div", 73, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r16 = i0.ɵɵnextContext(2);
-    const node_r13 = ctx_r16.$implicit;
-    const depth_r18 = ctx_r16.depth;
-    i0.ɵɵstyleProp("padding-left", (depth_r18 + 1) * 24, "px");
+    const ctx_r17 = i0.ɵɵnextContext(2);
+    const node_r14 = ctx_r17.$implicit;
+    const depth_r19 = ctx_r17.depth;
+    i0.ɵɵstyleProp("padding-left", (depth_r19 + 1) * 24, "px");
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(node_r13.Agents);
+    i0.ɵɵrepeater(node_r14.Agents);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_For_2_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_For_2_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵtemplate(1, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_For_2_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 68);
+    i0.ɵɵtemplate(1, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_For_2_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const child_r19 = i0.ɵɵnextContext().$implicit;
-    const depth_r18 = i0.ɵɵnextContext(2).depth;
+    const child_r20 = i0.ɵɵnextContext().$implicit;
+    const depth_r19 = i0.ɵɵnextContext(2).depth;
     i0.ɵɵnextContext();
-    const categoryNodeTpl_r8 = i0.ɵɵreference(3);
-    i0.ɵɵstyleProp("padding-left", (depth_r18 + 1) * 24, "px");
+    const categoryNodeTpl_r9 = i0.ɵɵreference(3);
+    i0.ɵɵstyleProp("padding-left", (depth_r19 + 1) * 24, "px");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTpl_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(4, _c1, child_r19, depth_r18 + 1));
+    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTpl_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction2(4, _c1, child_r20, depth_r19 + 1));
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_For_2_Conditional_0_Template, 2, 7, "div", 88);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_For_2_Conditional_0_Template, 2, 7, "div", 87);
 } if (rf & 2) {
-    const child_r19 = ctx.$implicit;
+    const child_r20 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵconditional(ctx_r1.hasVisibleContent(child_r19) ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.hasVisibleContent(child_r20) ? 0 : -1);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Conditional_0_Template, 3, 2, "div", 87);
-    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_For_2_Template, 1, 1, null, null, _forTrack1);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Conditional_0_Template, 3, 2, "div", 86);
+    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_For_2_Template, 1, 1, null, null, _forTrack1);
 } if (rf & 2) {
-    const node_r13 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵconditional(node_r13.Agents.length > 0 ? 0 : -1);
+    const node_r14 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵconditional(node_r14.Agents.length > 0 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(node_r13.Children);
+    i0.ɵɵrepeater(node_r14.Children);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 84);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Template_div_click_1_listener() { const node_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleCategoryNode(node_r13)); });
-    i0.ɵɵelement(2, "i", 85)(3, "i", 86);
-    i0.ɵɵelementStart(4, "span", 71);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 66)(1, "div", 83);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Template_div_click_1_listener() { const node_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleCategoryNode(node_r14)); });
+    i0.ɵɵelement(2, "i", 84)(3, "i", 85);
+    i0.ɵɵelementStart(4, "span", 70);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 72);
+    i0.ɵɵelementStart(6, "span", 71);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Conditional_8_Template, 3, 1);
+    i0.ɵɵconditionalCreate(8, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Conditional_8_Template, 3, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r13 = ctx.$implicit;
-    const depth_r18 = ctx.depth;
+    const node_r14 = ctx.$implicit;
+    const depth_r19 = ctx.depth;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("depth-" + depth_r18);
+    i0.ɵɵclassMap("depth-" + depth_r19);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-right", !node_r13.Expanded)("fa-chevron-down", node_r13.Expanded);
+    i0.ɵɵclassProp("fa-chevron-right", !node_r14.Expanded)("fa-chevron-down", node_r14.Expanded);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-folder", !node_r13.Expanded)("fa-folder-open", node_r13.Expanded);
+    i0.ɵɵclassProp("fa-folder", !node_r14.Expanded)("fa-folder-open", node_r14.Expanded);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(node_r13.Category.Name);
+    i0.ɵɵtextInterpolate(node_r14.Category.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.getAgentCount(node_r13));
+    i0.ɵɵtextInterpolate(ctx_r1.getAgentCount(node_r14));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r13.Expanded ? 8 : -1);
+    i0.ɵɵconditional(node_r14.Expanded ? 8 : -1);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 95);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 94);
 } if (rf & 2) {
-    const agent_r21 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("src", agent_r21.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r21.Name + " logo");
+    const agent_r22 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", agent_r22.LogoURL, i0.ɵɵsanitizeUrl)("alt", agent_r22.Name + " logo");
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const agent_r21 = i0.ɵɵnextContext().$implicit;
+    const agent_r22 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r21));
+    i0.ɵɵclassMap(ctx_r1.getAgentIcon(agent_r22));
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 96);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 95);
     i0.ɵɵpipe(1, "highlightSearch");
 } if (rf & 2) {
-    const agent_r21 = i0.ɵɵnextContext().$implicit;
+    const agent_r22 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, agent_r21.Description, ctx_r1.currentFilters.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, agent_r22.Description, ctx_r1.currentFilters.searchTerm), i0.ɵɵsanitizeHtml);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 101);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r22); const agent_r21 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showAgentDetails(agent_r21)); });
-    i0.ɵɵelement(1, "i", 64);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 100);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const agent_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.showAgentDetails(agent_r22)); });
+    i0.ɵɵelement(1, "i", 63);
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 83);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const agent_r21 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r21)); });
-    i0.ɵɵelement(1, "i", 66);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 82);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const agent_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r22)); });
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 93)(3, "div", 94);
-    i0.ɵɵconditionalCreate(4, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_4_Template, 1, 2, "img", 95)(5, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_5_Template, 1, 2, "i", 40);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 92)(3, "div", 93);
+    i0.ɵɵconditionalCreate(4, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_4_Template, 1, 2, "img", 94)(5, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_5_Template, 1, 2, "i", 39);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div");
-    i0.ɵɵelement(7, "div", 42);
+    i0.ɵɵelement(7, "div", 41);
     i0.ɵɵpipe(8, "highlightSearch");
-    i0.ɵɵconditionalCreate(9, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_9_Template, 2, 4, "div", 96);
+    i0.ɵɵconditionalCreate(9, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_9_Template, 2, 4, "div", 95);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(10, "td")(11, "span", 97);
+    i0.ɵɵelementStart(10, "td")(11, "span", 96);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "td")(14, "span", 98);
+    i0.ɵɵelementStart(13, "td")(14, "span", 97);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "td")(17, "div", 99);
-    i0.ɵɵconditionalCreate(18, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_18_Template, 2, 0, "button", 100);
-    i0.ɵɵconditionalCreate(19, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Conditional_19_Template, 2, 0, "button", 82);
+    i0.ɵɵelementStart(16, "td")(17, "div", 98);
+    i0.ɵɵconditionalCreate(18, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_18_Template, 2, 0, "button", 99);
+    i0.ɵɵconditionalCreate(19, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Conditional_19_Template, 2, 0, "button", 81);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const agent_r21 = ctx.$implicit;
+    const agent_r22 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r21));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r22));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r21) ? 4 : 5);
+    i0.ɵɵconditional(ctx_r1.hasLogoURL(agent_r22) ? 4 : 5);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(8, 11, agent_r21.Name, ctx_r1.currentFilters.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(8, 11, agent_r22.Name, ctx_r1.currentFilters.searchTerm), i0.ɵɵsanitizeHtml);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(agent_r21.Description ? 9 : -1);
+    i0.ɵɵconditional(agent_r22.Description ? 9 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getAgentTypeName(agent_r21), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getAgentTypeName(agent_r22), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap("status-" + (agent_r21.Status || "unknown").toLowerCase());
+    i0.ɵɵclassMap("status-" + (agent_r22.Status || "unknown").toLowerCase());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", agent_r21.Status || "Unknown", " ");
+    i0.ɵɵtextInterpolate1(" ", agent_r22.Status || "Unknown", " ");
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.UserCanReadAgents ? 18 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agent_r21.Status === "Active" && ctx_r1.UserCanReadAgents ? 19 : -1);
+    i0.ɵɵconditional(agent_r22.Status === "Active" && ctx_r1.UserCanReadAgents ? 19 : -1);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 33)(1, "table", 89)(2, "thead")(3, "tr")(4, "th", 90);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Name")); });
-    i0.ɵɵelementStart(5, "span", 91);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 32)(1, "table", 88)(2, "thead")(3, "tr")(4, "th", 89);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Name")); });
+    i0.ɵɵelementStart(5, "span", 90);
     i0.ɵɵtext(6, " Name ");
-    i0.ɵɵelement(7, "i", 92);
+    i0.ɵɵelement(7, "i", 91);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(8, "th");
     i0.ɵɵtext(9, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "th", 90);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_Template_th_click_10_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Status")); });
-    i0.ɵɵelementStart(11, "span", 91);
+    i0.ɵɵelementStart(10, "th", 89);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_Template_th_click_10_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortBy("Status")); });
+    i0.ɵɵelementStart(11, "span", 90);
     i0.ɵɵtext(12, " Status ");
-    i0.ɵɵelement(13, "i", 92);
+    i0.ɵɵelement(13, "i", 91);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(14, "th");
     i0.ɵɵtext(15, "Actions");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(16, "tbody");
-    i0.ɵɵrepeaterCreate(17, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_For_18_Template, 20, 14, "tr", null, _forTrack0);
+    i0.ɵɵrepeaterCreate(17, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_For_18_Template, 20, 14, "tr", null, _forTrack0);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -545,11 +556,11 @@ function AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_
     i0.ɵɵadvance(7);
     i0.ɵɵrepeater(ctx_r1.filteredAgents);
 } }
-function AgentConfigurationComponent_Conditional_30_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_0_Template, 3, 0, "div", 31);
-    i0.ɵɵconditionalCreate(1, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_1_Template, 4, 1, "div", 32);
-    i0.ɵɵtemplate(2, AgentConfigurationComponent_Conditional_30_Conditional_1_ng_template_2_Template, 9, 13, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵconditionalCreate(4, AgentConfigurationComponent_Conditional_30_Conditional_1_Conditional_4_Template, 19, 8, "div", 33);
+function AgentConfigurationComponent_Conditional_29_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_Template, 3, 0, "div", 30);
+    i0.ɵɵconditionalCreate(1, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template, 4, 1, "div", 31);
+    i0.ɵɵtemplate(2, AgentConfigurationComponent_Conditional_29_Conditional_1_ng_template_2_Template, 9, 13, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵconditionalCreate(4, AgentConfigurationComponent_Conditional_29_Conditional_1_Conditional_4_Template, 19, 8, "div", 32);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.viewMode === "grid" ? 0 : -1);
@@ -558,42 +569,42 @@ function AgentConfigurationComponent_Conditional_30_Conditional_1_Template(rf, c
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.viewMode === "list" ? 4 : -1);
 } }
-function AgentConfigurationComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_30_Conditional_0_Template, 9, 0, "div", 29)(1, AgentConfigurationComponent_Conditional_30_Conditional_1_Template, 5, 3);
+function AgentConfigurationComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, AgentConfigurationComponent_Conditional_29_Conditional_0_Template, 9, 0, "div", 28)(1, AgentConfigurationComponent_Conditional_29_Conditional_1_Template, 5, 3);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r1.filteredAgents.length === 0 ? 0 : 1);
 } }
-function AgentConfigurationComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 102);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_31_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
+function AgentConfigurationComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_30_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 106);
+function AgentConfigurationComponent_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 105);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("src", ctx_r1.selectedAgent.LogoURL, i0.ɵɵsanitizeUrl)("alt", ctx_r1.selectedAgent.Name + " logo");
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_32_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵclassMap(ctx_r1.getAgentIcon(ctx_r1.selectedAgent));
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 114);
-    i0.ɵɵelement(1, "i", 126);
+function AgentConfigurationComponent_Conditional_32_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 113);
+    i0.ɵɵelement(1, "i", 125);
     i0.ɵɵtext(2, " Exposed as Action ");
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 112)(1, "h4", 115);
-    i0.ɵɵelement(2, "i", 127);
+function AgentConfigurationComponent_Conditional_32_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 111)(1, "h4", 114);
+    i0.ɵɵelement(2, "i", 126);
     i0.ɵɵtext(3, " Description ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 128);
+    i0.ɵɵelementStart(4, "p", 127);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -601,11 +612,11 @@ function AgentConfigurationComponent_Conditional_33_Conditional_19_Template(rf,
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.selectedAgent.Description);
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 118)(1, "span", 119);
+function AgentConfigurationComponent_Conditional_32_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 117)(1, "span", 118);
     i0.ɵɵtext(2, "Parent Agent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 120);
+    i0.ɵɵelementStart(3, "span", 119);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -613,105 +624,105 @@ function AgentConfigurationComponent_Conditional_33_Conditional_31_Template(rf,
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.getParentAgentName(ctx_r1.selectedAgent));
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 129);
+function AgentConfigurationComponent_Conditional_32_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 128);
     i0.ɵɵtext(1, " Enabled ");
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 130);
+function AgentConfigurationComponent_Conditional_32_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 129);
     i0.ɵɵtext(1, " Disabled ");
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_42_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 129);
+function AgentConfigurationComponent_Conditional_32_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 128);
     i0.ɵɵtext(1, " Yes ");
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 130);
+function AgentConfigurationComponent_Conditional_32_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 129);
     i0.ɵɵtext(1, " No ");
 } }
-function AgentConfigurationComponent_Conditional_33_Conditional_67_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 131);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_33_Conditional_67_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.runAgent(ctx_r1.selectedAgent)); });
-    i0.ɵɵelement(1, "i", 66);
+function AgentConfigurationComponent_Conditional_32_Conditional_67_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 130);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_32_Conditional_67_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.runAgent(ctx_r1.selectedAgent)); });
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵtext(2, " Run Agent ");
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 103)(1, "div", 104)(2, "div", 105);
-    i0.ɵɵconditionalCreate(3, AgentConfigurationComponent_Conditional_33_Conditional_3_Template, 1, 2, "img", 106)(4, AgentConfigurationComponent_Conditional_33_Conditional_4_Template, 1, 2, "i", 40);
+function AgentConfigurationComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 102)(1, "div", 103)(2, "div", 104);
+    i0.ɵɵconditionalCreate(3, AgentConfigurationComponent_Conditional_32_Conditional_3_Template, 1, 2, "img", 105)(4, AgentConfigurationComponent_Conditional_32_Conditional_4_Template, 1, 2, "i", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 107)(6, "h3");
+    i0.ɵɵelementStart(5, "div", 106)(6, "h3");
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 108);
+    i0.ɵɵelementStart(8, "span", 107);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(10, "button", 109);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_33_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
-    i0.ɵɵelement(11, "i", 110);
+    i0.ɵɵelementStart(10, "button", 108);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_32_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
+    i0.ɵɵelement(11, "i", 109);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 111)(13, "div", 112)(14, "div", 113)(15, "span", 98);
-    i0.ɵɵelement(16, "i", 56);
+    i0.ɵɵelementStart(12, "div", 110)(13, "div", 111)(14, "div", 112)(15, "span", 97);
+    i0.ɵɵelement(16, "i", 55);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(18, AgentConfigurationComponent_Conditional_33_Conditional_18_Template, 3, 0, "span", 114);
+    i0.ɵɵconditionalCreate(18, AgentConfigurationComponent_Conditional_32_Conditional_18_Template, 3, 0, "span", 113);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(19, AgentConfigurationComponent_Conditional_33_Conditional_19_Template, 6, 1, "div", 112);
-    i0.ɵɵelementStart(20, "div", 112)(21, "h4", 115);
-    i0.ɵɵelement(22, "i", 116);
+    i0.ɵɵconditionalCreate(19, AgentConfigurationComponent_Conditional_32_Conditional_19_Template, 6, 1, "div", 111);
+    i0.ɵɵelementStart(20, "div", 111)(21, "h4", 114);
+    i0.ɵɵelement(22, "i", 115);
     i0.ɵɵtext(23, " Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 117)(25, "div", 118)(26, "span", 119);
+    i0.ɵɵelementStart(24, "div", 116)(25, "div", 117)(26, "span", 118);
     i0.ɵɵtext(27, "Execution Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "span", 120);
+    i0.ɵɵelementStart(28, "span", 119);
     i0.ɵɵelement(29, "i");
     i0.ɵɵtext(30);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(31, AgentConfigurationComponent_Conditional_33_Conditional_31_Template, 5, 1, "div", 118);
-    i0.ɵɵelementStart(32, "div", 118)(33, "span", 119);
+    i0.ɵɵconditionalCreate(31, AgentConfigurationComponent_Conditional_32_Conditional_31_Template, 5, 1, "div", 117);
+    i0.ɵɵelementStart(32, "div", 117)(33, "span", 118);
     i0.ɵɵtext(34, "Context Compression");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "span", 120);
-    i0.ɵɵconditionalCreate(36, AgentConfigurationComponent_Conditional_33_Conditional_36_Template, 2, 0)(37, AgentConfigurationComponent_Conditional_33_Conditional_37_Template, 2, 0);
+    i0.ɵɵelementStart(35, "span", 119);
+    i0.ɵɵconditionalCreate(36, AgentConfigurationComponent_Conditional_32_Conditional_36_Template, 2, 0)(37, AgentConfigurationComponent_Conditional_32_Conditional_37_Template, 2, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(38, "div", 118)(39, "span", 119);
+    i0.ɵɵelementStart(38, "div", 117)(39, "span", 118);
     i0.ɵɵtext(40, "Exposed as Action");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(41, "span", 120);
-    i0.ɵɵconditionalCreate(42, AgentConfigurationComponent_Conditional_33_Conditional_42_Template, 2, 0)(43, AgentConfigurationComponent_Conditional_33_Conditional_43_Template, 2, 0);
+    i0.ɵɵelementStart(41, "span", 119);
+    i0.ɵɵconditionalCreate(42, AgentConfigurationComponent_Conditional_32_Conditional_42_Template, 2, 0)(43, AgentConfigurationComponent_Conditional_32_Conditional_43_Template, 2, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 118)(45, "span", 119);
+    i0.ɵɵelementStart(44, "div", 117)(45, "span", 118);
     i0.ɵɵtext(46, "Model Selection");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "span", 120);
+    i0.ɵɵelementStart(47, "span", 119);
     i0.ɵɵtext(48);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(49, "div", 112)(50, "h4", 115);
-    i0.ɵɵelement(51, "i", 121);
+    i0.ɵɵelementStart(49, "div", 111)(50, "h4", 114);
+    i0.ɵɵelement(51, "i", 120);
     i0.ɵɵtext(52, " Timestamps ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(53, "div", 117)(54, "div", 118)(55, "span", 119);
+    i0.ɵɵelementStart(53, "div", 116)(54, "div", 117)(55, "span", 118);
     i0.ɵɵtext(56, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(57, "span", 120);
+    i0.ɵɵelementStart(57, "span", 119);
     i0.ɵɵtext(58);
     i0.ɵɵpipe(59, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(60, "div", 118)(61, "span", 119);
+    i0.ɵɵelementStart(60, "div", 117)(61, "span", 118);
     i0.ɵɵtext(62, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(63, "span", 120);
+    i0.ɵɵelementStart(63, "span", 119);
     i0.ɵɵtext(64);
     i0.ɵɵpipe(65, "date");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(66, "div", 122);
-    i0.ɵɵconditionalCreate(67, AgentConfigurationComponent_Conditional_33_Conditional_67_Template, 3, 0, "button", 123);
-    i0.ɵɵelementStart(68, "button", 124);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_33_Template_button_click_68_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openAgentFromPanel()); });
-    i0.ɵɵelement(69, "i", 125);
+    i0.ɵɵelementStart(66, "div", 121);
+    i0.ɵɵconditionalCreate(67, AgentConfigurationComponent_Conditional_32_Conditional_67_Template, 3, 0, "button", 122);
+    i0.ɵɵelementStart(68, "button", 123);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_32_Template_button_click_68_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openAgentFromPanel()); });
+    i0.ɵɵelement(69, "i", 124);
     i0.ɵɵtext(70, " Open Full Record ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -1003,8 +1014,6 @@ let AgentConfigurationComponent = class AgentConfigurationComponent extends Base
         }
         finally {
             this.isLoading = false;
-            // force change detection to update the view
-            this.cdr.detectChanges();
         }
     }
     toggleFilterPanel() {
@@ -1416,7 +1425,7 @@ let AgentConfigurationComponent = class AgentConfigurationComponent extends Base
         return 'fa-solid fa-robot';
     }
     static ɵfac = function AgentConfigurationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AgentConfigurationComponent)(i0.ɵɵdirectiveInject(i1.AITestHarnessDialogService), i0.ɵɵdirectiveInject(i2.CreateAgentService), i0.ɵɵdirectiveInject(i3.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 34, vars: 24, consts: [["categoryNodeTpl", ""], [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", "Category Tree View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-folder-tree"], ["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, "detail-panel-overlay"], [1, "detail-panel"], ["text", "Loading agents...", "size", "large"], [1, "empty-state"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "agents-grid"], [1, "agents-tree"], [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", 3, "innerHTML"], [1, "agent-meta"], [1, "meta-item", "type-badge"], [1, "fa-solid", "fa-tag"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "agent-description", 3, "innerHTML"], [1, "agent-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "View Details", 1, "action-btn"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary"], [1, "meta-item"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [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", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "tree-category-group"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "tree-category-header", "depth-0"], [1, "fa-solid", "fa-folder-open", "tree-folder-icon"], [1, "tree-category-name"], [1, "tree-category-count"], [1, "tree-agent-list"], [1, "tree-agent-row"], [1, "tree-agent-row", 3, "click"], [1, "tree-agent-icon"], [1, "tree-agent-logo", 3, "src", "alt"], [1, "tree-agent-info"], [1, "tree-agent-name"], [1, "tree-agent-type"], [1, "tree-agent-status"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary", 3, "click"], [1, "tree-category-header", 3, "click"], [1, "fa-solid", "tree-chevron"], [1, "fa-solid", "tree-folder-icon"], [1, "tree-agent-list", 3, "padding-left"], [3, "padding-left"], [1, "agents-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "agent-name-cell"], [1, "agent-icon-small"], [1, "agent-logo-small", 3, "src", "alt"], [1, "agent-description-small", 3, "innerHTML"], [1, "type-badge"], [1, "status-badge"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], [1, "detail-panel-overlay", 3, "click"], [1, "detail-panel-header"], [1, "detail-panel-title"], [1, "detail-icon"], [1, "detail-logo", 3, "src", "alt"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "feature-badge"], [1, "detail-section-title"], [1, "fa-solid", "fa-cog"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "secondary"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], [1, "fa-solid", "fa-check", 2, "color", "#10b981"], [1, "fa-solid", "fa-times", 2, "color", "#ef4444"], ["type", "button", 1, "detail-action-btn", "secondary", 3, "click"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 33, vars: 15, consts: [["categoryNodeTpl", ""], [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", "Category Tree View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-folder-tree"], ["type", "button", "title", "Create New Agent", 1, "control-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "main-content"], ["direction", "horizontal", 1, "main-splitter"], [3, "size", "minSize", "maxSize"], [1, "agents-content"], [1, "loading-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "agents", "filteredAgents", "filters"], ["text", "Loading agents...", "size", "large"], [1, "empty-state"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "agents-grid"], [1, "agents-tree"], [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", 3, "innerHTML"], [1, "agent-meta"], [1, "meta-item", "type-badge"], [1, "fa-solid", "fa-tag"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "agent-description", 3, "innerHTML"], [1, "agent-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "View Details", 1, "action-btn"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary"], [1, "meta-item"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [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", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "tree-category-group"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "tree-category-header", "depth-0"], [1, "fa-solid", "fa-folder-open", "tree-folder-icon"], [1, "tree-category-name"], [1, "tree-category-count"], [1, "tree-agent-list"], [1, "tree-agent-row"], [1, "tree-agent-row", 3, "click"], [1, "tree-agent-icon"], [1, "tree-agent-logo", 3, "src", "alt"], [1, "tree-agent-info"], [1, "tree-agent-name"], [1, "tree-agent-type"], [1, "tree-agent-status"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary", 3, "click"], [1, "tree-category-header", 3, "click"], [1, "fa-solid", "tree-chevron"], [1, "fa-solid", "tree-folder-icon"], [1, "tree-agent-list", 3, "padding-left"], [3, "padding-left"], [1, "agents-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "agent-name-cell"], [1, "agent-icon-small"], [1, "agent-logo-small", 3, "src", "alt"], [1, "agent-description-small", 3, "innerHTML"], [1, "type-badge"], [1, "status-badge"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], [1, "detail-panel-overlay", 3, "click"], [1, "detail-panel-header"], [1, "detail-panel-title"], [1, "detail-icon"], [1, "detail-logo", 3, "src", "alt"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "feature-badge"], [1, "detail-section-title"], [1, "fa-solid", "fa-cog"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "secondary"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], [1, "fa-solid", "fa-check", 2, "color", "#10b981"], [1, "fa-solid", "fa-times", 2, "color", "#ef4444"], ["type", "button", 1, "detail-action-btn", "secondary", 3, "click"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "h2", 4);
             i0.ɵɵelement(4, "i", 5);
             i0.ɵɵtext(5, " Agent Configuration ");
@@ -1446,18 +1455,15 @@ let AgentConfigurationComponent = class AgentConfigurationComponent extends Base
             i0.ɵɵelement(21, "i", 18);
             i0.ɵɵtext(22, " New Agent ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(23, "div", 19)(24, "kendo-splitter", 20);
-            i0.ɵɵlistener("layoutChange", function AgentConfigurationComponent_Template_kendo_splitter_layoutChange_24_listener($event) { return ctx.onMainSplitterChange($event); });
-            i0.ɵɵelementStart(25, "kendo-splitter-pane", 21)(26, "mj-agent-filter-panel", 22);
-            i0.ɵɵlistener("filtersChange", function AgentConfigurationComponent_Template_mj_agent_filter_panel_filtersChange_26_listener($event) { return ctx.onFiltersChange($event); })("filterChange", function AgentConfigurationComponent_Template_mj_agent_filter_panel_filterChange_26_listener() { return ctx.onFilterChange(); })("resetFilters", function AgentConfigurationComponent_Template_mj_agent_filter_panel_resetFilters_26_listener() { return ctx.onResetFilters(); })("closePanel", function AgentConfigurationComponent_Template_mj_agent_filter_panel_closePanel_26_listener() { return ctx.toggleFilterPanel(); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(27, "kendo-splitter-pane", 23)(28, "div", 24);
-            i0.ɵɵconditionalCreate(29, AgentConfigurationComponent_Conditional_29_Template, 2, 0, "div", 25);
-            i0.ɵɵconditionalCreate(30, AgentConfigurationComponent_Conditional_30_Template, 2, 1);
+            i0.ɵɵelementStart(23, "div", 19)(24, "as-split", 20);
+            i0.ɵɵconditionalCreate(25, AgentConfigurationComponent_Conditional_25_Template, 2, 6, "as-split-area", 21);
+            i0.ɵɵelementStart(26, "as-split-area")(27, "div", 22);
+            i0.ɵɵconditionalCreate(28, AgentConfigurationComponent_Conditional_28_Template, 2, 0, "div", 23);
+            i0.ɵɵconditionalCreate(29, AgentConfigurationComponent_Conditional_29_Template, 2, 1);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(31, AgentConfigurationComponent_Conditional_31_Template, 1, 0, "div", 26);
-            i0.ɵɵelementStart(32, "div", 27);
-            i0.ɵɵconditionalCreate(33, AgentConfigurationComponent_Conditional_33_Template, 71, 26);
+            i0.ɵɵconditionalCreate(30, AgentConfigurationComponent_Conditional_30_Template, 1, 0, "div", 24);
+            i0.ɵɵelementStart(31, "div", 25);
+            i0.ɵɵconditionalCreate(32, AgentConfigurationComponent_Conditional_32_Template, 71, 26);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(8);
@@ -1471,22 +1477,18 @@ let AgentConfigurationComponent = class AgentConfigurationComponent extends Base
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("active", ctx.viewMode === "tree");
             i0.ɵɵadvance(7);
-            i0.ɵɵproperty("size", ctx.filterPanelVisible ? "320px" : "0px")("collapsible", false)("resizable", ctx.filterPanelVisible)("scrollable", false)("hidden", !ctx.filterPanelVisible);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("agents", ctx.agents)("filteredAgents", ctx.filteredAgents)("filters", ctx.currentFilters);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("resizable", true)("scrollable", true);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 29 : -1);
+            i0.ɵɵconditional(ctx.filterPanelVisible ? 25 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.isLoading ? 28 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 30 : -1);
+            i0.ɵɵconditional(!ctx.isLoading ? 29 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.detailPanelVisible ? 31 : -1);
+            i0.ɵɵconditional(ctx.detailPanelVisible ? 30 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("visible", ctx.detailPanelVisible);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.selectedAgent ? 33 : -1);
-        } }, dependencies: [i4.NgTemplateOutlet, i5.SplitterComponent, i5.SplitterPaneComponent, i6.LoadingComponent, i7.AgentFilterPanelComponent, i4.DatePipe, i8.HighlightSearchPipe], styles: ["\n\n\n\n\n\n\n\n.agent-configuration-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n\nkendo-splitter[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n[_nghost-%COMP%]     .k-splitter {\n  border: none;\n  background: transparent;\n}\n\n[_nghost-%COMP%]     .k-splitbar {\n  background: var(--mj-border-default);\n  width: 6px;\n}\n\n[_nghost-%COMP%]     .k-splitbar:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n[_nghost-%COMP%]     .k-pane {\n  overflow: hidden;\n}\n\n\n\n\n\n\n.agents-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 28px;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.agents-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.agent-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.agent-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.agent-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.agent-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n.agent-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.agent-card.expanded[_ngcontent-%COMP%]::before {\n  opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 24px;\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 var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-hover);\n}\n\n.agent-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.agent-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.agent-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.agent-icon[_ngcontent-%COMP%]   .agent-logo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\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: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-700);\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-disabled[_ngcontent-%COMP%], \n.meta-item.status-inactive[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-disabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.meta-item.status-inactive[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n.type-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.type-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n\n\n.meta-item.type-badge[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.meta-item.type-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 24px 24px 24px;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.agent-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: _ngcontent-%COMP%_slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\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(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.agents-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.agents-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.agents-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.agents-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.sort-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: all 0.2s ease;\n}\n\n.agents-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table[_ngcontent-%COMP%]   th.sorted.desc[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.agents-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.agent-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.agent-icon-small[_ngcontent-%COMP%] {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.agent-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\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: 10px;\n}\n\n.agent-name-cell[_ngcontent-%COMP%]   .agent-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.agent-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 8px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%], \n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.execution-mode[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.execution-mode[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.table-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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\n\n@media (max-width: 768px) {\n  .dashboard-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: center;\n  }\n\n  .agents-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .agents-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .agent-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .card-body[_ngcontent-%COMP%] {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n\n\n\n\n\n.detail-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.25s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n  right: 0;\n}\n\n\n\n.detail-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-icon[_ngcontent-%COMP%]   .detail-logo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.detail-title-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n\n\n.detail-panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.detail-code-block[_ngcontent-%COMP%] {\n  background: var(--mj-text-primary);\n  color: var(--mj-border-default);\n  padding: 16px;\n  border-radius: 10px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 13px;\n  line-height: 1.6;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n@media (max-width: 520px) {\n  .detail-panel[_ngcontent-%COMP%] {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n\n[_nghost-%COMP%]     .search-highlight, \n.search-highlight[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n\n\n\n\n\n\n.agents-tree[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n}\n\n.tree-category-group[_ngcontent-%COMP%] {\n  margin-bottom: 2px;\n}\n\n.tree-category-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n\n.tree-category-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.tree-chevron[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  width: 12px;\n  text-align: center;\n  transition: transform 0.15s ease;\n}\n\n.tree-folder-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.tree-category-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  flex: 1;\n}\n\n.tree-category-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n\n\n.tree-agent-list[_ngcontent-%COMP%] {\n  padding-left: 24px;\n}\n\n.tree-agent-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.tree-agent-row[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.tree-agent-icon[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.tree-agent-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-inverse);\n}\n\n.tree-agent-logo[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  object-fit: cover;\n}\n\n.tree-agent-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.tree-agent-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tree-agent-type[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.tree-agent-status[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  padding: 2px 8px;\n  border-radius: 4px;\n  white-space: nowrap;\n}\n\n.tree-agent-status.status-active[_ngcontent-%COMP%] {\n  color: var(--mj-status-success-text);\n  background: var(--mj-status-success-bg);\n}\n\n.tree-agent-status.status-disabled[_ngcontent-%COMP%], \n.tree-agent-status.status-inactive[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tree-agent-status.status-pending[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning-text);\n  background: var(--mj-status-warning-bg);\n}"] });
+            i0.ɵɵconditional(ctx.selectedAgent ? 32 : -1);
+        } }, dependencies: [i4.NgTemplateOutlet, i5.SplitComponent, i5.SplitAreaComponent, i6.LoadingComponent, i7.AgentFilterPanelComponent, i4.DatePipe, i8.HighlightSearchPipe], styles: ["\n\n\n\n\n\n\n\n.agent-configuration-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n\nas-split[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n\n\n\n\n\n.agents-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 28px;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.agents-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.agent-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.agent-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.agent-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.agent-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n.agent-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.agent-card.expanded[_ngcontent-%COMP%]::before {\n  opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 24px;\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 var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-hover);\n}\n\n.agent-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.agent-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.agent-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.agent-icon[_ngcontent-%COMP%]   .agent-logo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\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: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-700);\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-disabled[_ngcontent-%COMP%], \n.meta-item.status-inactive[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-disabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.meta-item.status-inactive[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n.type-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.type-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n\n\n.meta-item.type-badge[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.meta-item.type-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 24px 24px 24px;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.agent-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: _ngcontent-%COMP%_slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\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(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.agents-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.agents-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.agents-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.agents-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.sort-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: all 0.2s ease;\n}\n\n.agents-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table[_ngcontent-%COMP%]   th.sorted.desc[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.agents-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.agent-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.agent-icon-small[_ngcontent-%COMP%] {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.agent-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\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: 10px;\n}\n\n.agent-name-cell[_ngcontent-%COMP%]   .agent-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.agent-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 8px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%], \n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.execution-mode[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.execution-mode[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.table-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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\n\n@media (max-width: 768px) {\n  .dashboard-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: center;\n  }\n\n  .agents-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .agents-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .agent-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .card-body[_ngcontent-%COMP%] {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n\n\n\n\n\n.detail-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.25s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n  right: 0;\n}\n\n\n\n.detail-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-icon[_ngcontent-%COMP%]   .detail-logo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.detail-title-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n\n\n.detail-panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.detail-code-block[_ngcontent-%COMP%] {\n  background: var(--mj-text-primary);\n  color: var(--mj-border-default);\n  padding: 16px;\n  border-radius: 10px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 13px;\n  line-height: 1.6;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n@media (max-width: 520px) {\n  .detail-panel[_ngcontent-%COMP%] {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n\n[_nghost-%COMP%]     .search-highlight, \n.search-highlight[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n\n\n\n\n\n\n.agents-tree[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n}\n\n.tree-category-group[_ngcontent-%COMP%] {\n  margin-bottom: 2px;\n}\n\n.tree-category-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n\n.tree-category-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.tree-chevron[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  width: 12px;\n  text-align: center;\n  transition: transform 0.15s ease;\n}\n\n.tree-folder-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.tree-category-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  flex: 1;\n}\n\n.tree-category-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n\n\n.tree-agent-list[_ngcontent-%COMP%] {\n  padding-left: 24px;\n}\n\n.tree-agent-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.tree-agent-row[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.tree-agent-icon[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.tree-agent-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-inverse);\n}\n\n.tree-agent-logo[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  object-fit: cover;\n}\n\n.tree-agent-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.tree-agent-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tree-agent-type[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.tree-agent-status[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  padding: 2px 8px;\n  border-radius: 4px;\n  white-space: nowrap;\n}\n\n.tree-agent-status.status-active[_ngcontent-%COMP%] {\n  color: var(--mj-status-success-text);\n  background: var(--mj-status-success-bg);\n}\n\n.tree-agent-status.status-disabled[_ngcontent-%COMP%], \n.tree-agent-status.status-inactive[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tree-agent-status.status-pending[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning-text);\n  background: var(--mj-status-warning-bg);\n}"] });
 };
 AgentConfigurationComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIAgentsResource')
@@ -1494,7 +1496,7 @@ AgentConfigurationComponent = __decorate([
 export { AgentConfigurationComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentConfigurationComponent, [{
         type: Component,
-        args: [{ standalone: false, 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        <button\n          type=\"button\"\n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'tree'\"\n          (click)=\"setViewMode('tree')\"\n          title=\"Category Tree View\">\n          <i class=\"fa-solid fa-folder-tree\"></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]=\"true\">\n        <div class=\"agents-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading agents...\" size=\"large\"></mj-loading>\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\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></h4>\n                            <div class=\"agent-meta\">\n                              <span class=\"meta-item type-badge\">\n                                <i class=\"fa-solid fa-tag\"></i>\n                                {{ getAgentTypeName(agent) }}\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                            </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\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></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                        @if (UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn\"\n                            (click)=\"showAgentDetails(agent, $event)\"\n                            title=\"View Details\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                            Details\n                          </button>\n                        }\n\n                        @if (agent.Status === 'Active' && UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"runAgent(agent); $event.stopPropagation()\"\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              <!-- Tree View (Mac Finder style) -->\n              @if (viewMode === 'tree') {\n                <div class=\"agents-tree\">\n                  @for (node of categoryTree; track node.Category.ID) {\n                    @if (hasVisibleContent(node)) {\n                      <ng-container *ngTemplateOutlet=\"categoryNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\n                    }\n                  }\n\n                  <!-- Uncategorized agents -->\n                  @if (uncategorizedAgents.length > 0) {\n                    <div class=\"tree-category-group\">\n                      <div class=\"tree-category-header depth-0\">\n                        <i class=\"fa-solid fa-folder-open tree-folder-icon\"></i>\n                        <span class=\"tree-category-name\">Uncategorized</span>\n                        <span class=\"tree-category-count\">{{ uncategorizedAgents.length }}</span>\n                      </div>\n                      <div class=\"tree-agent-list\">\n                        @for (agent of uncategorizedAgents; track agent.ID) {\n                          <div class=\"tree-agent-row\" (click)=\"showAgentDetails(agent)\">\n                            <div class=\"tree-agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                              @if (hasLogoURL(agent)) {\n                                <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"tree-agent-logo\">\n                              } @else {\n                                <i [class]=\"getAgentIcon(agent)\"></i>\n                              }\n                            </div>\n                            <div class=\"tree-agent-info\">\n                              <span class=\"tree-agent-name\">{{ agent.Name }}</span>\n                              <span class=\"tree-agent-type\">{{ getAgentTypeName(agent) }}</span>\n                            </div>\n                            <span class=\"tree-agent-status\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status }}\n                            </span>\n                            @if (agent.Status === 'Active' && UserCanReadAgents) {\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small primary\"\n                                (click)=\"runAgent(agent); $event.stopPropagation()\"\n                                title=\"Run Agent\">\n                                <i class=\"fa-solid fa-play\"></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n\n              <!-- Recursive category node template -->\n              <ng-template #categoryNodeTpl let-node let-depth=\"depth\">\n                <div class=\"tree-category-group\">\n                  <div class=\"tree-category-header\" [class]=\"'depth-' + depth\" (click)=\"toggleCategoryNode(node)\">\n                    <i class=\"fa-solid tree-chevron\"\n                       [class.fa-chevron-right]=\"!node.Expanded\"\n                       [class.fa-chevron-down]=\"node.Expanded\"></i>\n                    <i class=\"fa-solid tree-folder-icon\"\n                       [class.fa-folder]=\"!node.Expanded\"\n                       [class.fa-folder-open]=\"node.Expanded\"></i>\n                    <span class=\"tree-category-name\">{{ node.Category.Name }}</span>\n                    <span class=\"tree-category-count\">{{ getAgentCount(node) }}</span>\n                  </div>\n\n                  @if (node.Expanded) {\n                    <!-- Agents directly in this category -->\n                    @if (node.Agents.length > 0) {\n                      <div class=\"tree-agent-list\" [style.padding-left.px]=\"(depth + 1) * 24\">\n                        @for (agent of node.Agents; track agent.ID) {\n                          <div class=\"tree-agent-row\" (click)=\"showAgentDetails(agent)\">\n                            <div class=\"tree-agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                              @if (hasLogoURL(agent)) {\n                                <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"tree-agent-logo\">\n                              } @else {\n                                <i [class]=\"getAgentIcon(agent)\"></i>\n                              }\n                            </div>\n                            <div class=\"tree-agent-info\">\n                              <span class=\"tree-agent-name\">{{ agent.Name }}</span>\n                              <span class=\"tree-agent-type\">{{ getAgentTypeName(agent) }}</span>\n                            </div>\n                            <span class=\"tree-agent-status\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status }}\n                            </span>\n                            @if (agent.Status === 'Active' && UserCanReadAgents) {\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small primary\"\n                                (click)=\"runAgent(agent); $event.stopPropagation()\"\n                                title=\"Run Agent\">\n                                <i class=\"fa-solid fa-play\"></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    <!-- Child categories -->\n                    @for (child of node.Children; track child.Category.ID) {\n                      @if (hasVisibleContent(child)) {\n                        <div [style.padding-left.px]=\"(depth + 1) * 24\">\n                          <ng-container *ngTemplateOutlet=\"categoryNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </ng-template>\n\n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"agents-list\">\n                  <table class=\"agents-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"sortBy('Name')\"\n                            [class.sorted]=\"sortColumn === 'Name'\"\n                            [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Type</th>\n                        <th (click)=\"sortBy('Status')\"\n                            [class.sorted]=\"sortColumn === 'Status'\"\n                            [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Status\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </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\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></div>\n                                @if (agent.Description) {\n                                  <div class=\"agent-description-small\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"type-badge\">\n                              {{ getAgentTypeName(agent) }}\n                            </span>\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                            <div class=\"table-actions\">\n                              @if (UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small\"\n                                  (click)=\"showAgentDetails(agent)\"\n                                  title=\"View Details\">\n                                  <i class=\"fa-solid fa-eye\"></i>\n                                </button>\n                              }\n                              @if (agent.Status === 'Active' && UserCanReadAgents) {\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\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedAgent) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\" [style.background-color]=\"getAgentIconColor(selectedAgent)\">\n            @if (hasLogoURL(selectedAgent)) {\n              <img [src]=\"selectedAgent.LogoURL\" [alt]=\"selectedAgent.Name + ' logo'\" class=\"detail-logo\">\n            } @else {\n              <i [class]=\"getAgentIcon(selectedAgent)\"></i>\n            }\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedAgent.Name }}</h3>\n            <span class=\"detail-subtitle\">{{ getAgentTypeName(selectedAgent) }}</span>\n          </div>\n        </div>\n        <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Panel Content -->\n      <div class=\"detail-panel-content\">\n        <!-- Status and Type Section -->\n        <div class=\"detail-section\">\n          <div class=\"detail-badges\">\n            <span class=\"status-badge\" [class]=\"'status-' + (selectedAgent.Status || 'unknown').toLowerCase()\">\n              <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n              {{ selectedAgent.Status || 'Unknown' }}\n            </span>\n            @if (selectedAgent.ExposeAsAction) {\n              <span class=\"feature-badge\">\n                <i class=\"fa-solid fa-bolt\"></i>\n                Exposed as Action\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedAgent.Description) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-align-left\"></i>\n              Description\n            </h4>\n            <p class=\"detail-description\">{{ selectedAgent.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Details -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Configuration\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Execution Mode</span>\n              <span class=\"detail-value\">\n                <i [class]=\"getExecutionModeIcon(selectedAgent.ExecutionMode)\"></i>\n                {{ selectedAgent.ExecutionMode }}\n              </span>\n            </div>\n            @if (getParentAgentName(selectedAgent)) {\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Parent Agent</span>\n                <span class=\"detail-value\">{{ getParentAgentName(selectedAgent) }}</span>\n              </div>\n            }\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Compression</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.EnableContextCompression) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Enabled\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> Disabled\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Exposed as Action</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.ExposeAsAction) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Yes\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> No\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Model Selection</span>\n              <span class=\"detail-value\">{{ selectedAgent.ModelSelectionMode }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Timestamps -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-clock\"></i>\n            Timestamps\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Created</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_CreatedAt | date:'medium' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_UpdatedAt | date:'medium' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        @if (selectedAgent.Status === 'Active') {\n          <button\n            type=\"button\"\n            class=\"detail-action-btn secondary\"\n            (click)=\"runAgent(selectedAgent)\">\n            <i class=\"fa-solid fa-play\"></i>\n            Run Agent\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openAgentFromPanel()\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- AI Agent Test Harness - Now handled by service with minimize support -->", styles: ["/* ============================================\n   AI Agents Dashboard - World-Class Design\n   Clean white header with brand blue accents\n   ============================================ */\n\n/* Container */\n.agent-configuration-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* Dashboard Header - Clean White Style */\n.dashboard-header {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title i {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.filter-toggle-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.item-count {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n  font-size: 14px;\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* Main Content */\n.main-content {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n/* Splitter Styling */\nkendo-splitter {\n  background: transparent;\n}\n\n:host ::ng-deep .k-splitter {\n  border: none;\n  background: transparent;\n}\n\n:host ::ng-deep .k-splitbar {\n  background: var(--mj-border-default);\n  width: 6px;\n}\n\n:host ::ng-deep .k-splitbar:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n:host ::ng-deep .k-pane {\n  overflow: hidden;\n}\n\n/* Filter Panel Styles - used by child component */\n\n/* Agents Content */\n.agents-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 28px;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Grid View */\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.agent-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.agent-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.agent-card:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.agent-card:hover::before {\n  opacity: 1;\n}\n\n.agent-card.expanded {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.agent-card.expanded::before {\n  opacity: 1;\n}\n\n.card-header {\n  padding: 24px;\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 var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header:hover {\n  background-color: var(--mj-bg-surface-hover);\n}\n\n.agent-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.agent-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.agent-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.agent-icon .agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.agent-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active i {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending {\n  color: var(--mj-color-warning-700);\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-pending i {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-disabled,\n.meta-item.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-disabled i,\n.meta-item.status-inactive i {\n  color: var(--mj-text-muted);\n}\n\n/* Type Badge - for Agent Type display */\n.type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.type-badge i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n/* Type badge in meta context (grid view) */\n.meta-item.type-badge {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.meta-item.type-badge i {\n  color: var(--mj-brand-primary);\n}\n\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body {\n  padding: 0 24px 24px 24px;\n}\n\n.agent-description {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.agent-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\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(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* List View */\n.agents-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.agents-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table thead {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.agents-table th {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.agents-table th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.sort-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sort-icon {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: all 0.2s ease;\n}\n\n.agents-table th:hover .sort-icon {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted .sort-icon {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.agents-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.agents-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.agents-table tbody tr:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.agents-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.agent-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.agent-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.agent-icon-small i {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n}\n\n.agent-icon-small .agent-logo-small {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 10px;\n}\n\n.agent-name-cell .agent-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.agent-description-small {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge i {\n  font-size: 8px;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-disabled,\n.status-badge.status-inactive {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.execution-mode {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.execution-mode i {\n  color: var(--mj-brand-primary);\n}\n\n.table-actions {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls {\n    justify-content: center;\n  }\n\n  .agents-content {\n    padding: 16px;\n  }\n\n  .agents-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .agent-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 18px;\n  }\n\n  .card-body {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n/* =============================================\n   Detail Panel - Slide-in Overlay\n   ============================================= */\n\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: fadeIn 0.25s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible {\n  right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-icon .detail-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section {\n  margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge i {\n  font-size: 11px;\n}\n\n.detail-section-title {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value i {\n  font-size: 13px;\n}\n\n.detail-code-block {\n  background: var(--mj-text-primary);\n  color: var(--mj-border-default);\n  padding: 16px;\n  border-radius: 10px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 13px;\n  line-height: 1.6;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.detail-action-btn.primary {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Detail Panel Responsive */\n@media (max-width: 520px) {\n  .detail-panel {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n\n/* ============================================\n   Tree View - Mac Finder Style\n   ============================================ */\n\n.agents-tree {\n  padding: 8px 16px;\n}\n\n.tree-category-group {\n  margin-bottom: 2px;\n}\n\n.tree-category-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n\n.tree-category-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.tree-chevron {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  width: 12px;\n  text-align: center;\n  transition: transform 0.15s ease;\n}\n\n.tree-folder-icon {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.tree-category-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  flex: 1;\n}\n\n.tree-category-count {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n/* Agent rows within tree */\n.tree-agent-list {\n  padding-left: 24px;\n}\n\n.tree-agent-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.tree-agent-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.tree-agent-icon {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.tree-agent-icon i {\n  font-size: 12px;\n  color: var(--mj-text-inverse);\n}\n\n.tree-agent-logo {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  object-fit: cover;\n}\n\n.tree-agent-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.tree-agent-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tree-agent-type {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.tree-agent-status {\n  font-size: 11px;\n  font-weight: 500;\n  padding: 2px 8px;\n  border-radius: 4px;\n  white-space: nowrap;\n}\n\n.tree-agent-status.status-active {\n  color: var(--mj-status-success-text);\n  background: var(--mj-status-success-bg);\n}\n\n.tree-agent-status.status-disabled,\n.tree-agent-status.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tree-agent-status.status-pending {\n  color: var(--mj-status-warning-text);\n  background: var(--mj-status-warning-bg);\n}\n"] }]
+        args: [{ standalone: false, 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        <button\n          type=\"button\"\n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'tree'\"\n          (click)=\"setViewMode('tree')\"\n          title=\"Category Tree View\">\n          <i class=\"fa-solid fa-folder-tree\"></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    <as-split direction=\"horizontal\" class=\"main-splitter\">\n\n      <!-- Filter Panel (Left) -->\n      @if (filterPanelVisible) {\n      <as-split-area [size]=\"20\" [minSize]=\"15\" [maxSize]=\"30\">\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      </as-split-area>\n      }\n\n      <!-- Agents List Panel -->\n      <as-split-area>\n        <div class=\"agents-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading agents...\" size=\"large\"></mj-loading>\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\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></h4>\n                            <div class=\"agent-meta\">\n                              <span class=\"meta-item type-badge\">\n                                <i class=\"fa-solid fa-tag\"></i>\n                                {{ getAgentTypeName(agent) }}\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                            </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\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></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                        @if (UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn\"\n                            (click)=\"showAgentDetails(agent, $event)\"\n                            title=\"View Details\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                            Details\n                          </button>\n                        }\n\n                        @if (agent.Status === 'Active' && UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"runAgent(agent); $event.stopPropagation()\"\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              <!-- Tree View (Mac Finder style) -->\n              @if (viewMode === 'tree') {\n                <div class=\"agents-tree\">\n                  @for (node of categoryTree; track node.Category.ID) {\n                    @if (hasVisibleContent(node)) {\n                      <ng-container *ngTemplateOutlet=\"categoryNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\n                    }\n                  }\n\n                  <!-- Uncategorized agents -->\n                  @if (uncategorizedAgents.length > 0) {\n                    <div class=\"tree-category-group\">\n                      <div class=\"tree-category-header depth-0\">\n                        <i class=\"fa-solid fa-folder-open tree-folder-icon\"></i>\n                        <span class=\"tree-category-name\">Uncategorized</span>\n                        <span class=\"tree-category-count\">{{ uncategorizedAgents.length }}</span>\n                      </div>\n                      <div class=\"tree-agent-list\">\n                        @for (agent of uncategorizedAgents; track agent.ID) {\n                          <div class=\"tree-agent-row\" (click)=\"showAgentDetails(agent)\">\n                            <div class=\"tree-agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                              @if (hasLogoURL(agent)) {\n                                <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"tree-agent-logo\">\n                              } @else {\n                                <i [class]=\"getAgentIcon(agent)\"></i>\n                              }\n                            </div>\n                            <div class=\"tree-agent-info\">\n                              <span class=\"tree-agent-name\">{{ agent.Name }}</span>\n                              <span class=\"tree-agent-type\">{{ getAgentTypeName(agent) }}</span>\n                            </div>\n                            <span class=\"tree-agent-status\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status }}\n                            </span>\n                            @if (agent.Status === 'Active' && UserCanReadAgents) {\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small primary\"\n                                (click)=\"runAgent(agent); $event.stopPropagation()\"\n                                title=\"Run Agent\">\n                                <i class=\"fa-solid fa-play\"></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n\n              <!-- Recursive category node template -->\n              <ng-template #categoryNodeTpl let-node let-depth=\"depth\">\n                <div class=\"tree-category-group\">\n                  <div class=\"tree-category-header\" [class]=\"'depth-' + depth\" (click)=\"toggleCategoryNode(node)\">\n                    <i class=\"fa-solid tree-chevron\"\n                       [class.fa-chevron-right]=\"!node.Expanded\"\n                       [class.fa-chevron-down]=\"node.Expanded\"></i>\n                    <i class=\"fa-solid tree-folder-icon\"\n                       [class.fa-folder]=\"!node.Expanded\"\n                       [class.fa-folder-open]=\"node.Expanded\"></i>\n                    <span class=\"tree-category-name\">{{ node.Category.Name }}</span>\n                    <span class=\"tree-category-count\">{{ getAgentCount(node) }}</span>\n                  </div>\n\n                  @if (node.Expanded) {\n                    <!-- Agents directly in this category -->\n                    @if (node.Agents.length > 0) {\n                      <div class=\"tree-agent-list\" [style.padding-left.px]=\"(depth + 1) * 24\">\n                        @for (agent of node.Agents; track agent.ID) {\n                          <div class=\"tree-agent-row\" (click)=\"showAgentDetails(agent)\">\n                            <div class=\"tree-agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                              @if (hasLogoURL(agent)) {\n                                <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"tree-agent-logo\">\n                              } @else {\n                                <i [class]=\"getAgentIcon(agent)\"></i>\n                              }\n                            </div>\n                            <div class=\"tree-agent-info\">\n                              <span class=\"tree-agent-name\">{{ agent.Name }}</span>\n                              <span class=\"tree-agent-type\">{{ getAgentTypeName(agent) }}</span>\n                            </div>\n                            <span class=\"tree-agent-status\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status }}\n                            </span>\n                            @if (agent.Status === 'Active' && UserCanReadAgents) {\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small primary\"\n                                (click)=\"runAgent(agent); $event.stopPropagation()\"\n                                title=\"Run Agent\">\n                                <i class=\"fa-solid fa-play\"></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    <!-- Child categories -->\n                    @for (child of node.Children; track child.Category.ID) {\n                      @if (hasVisibleContent(child)) {\n                        <div [style.padding-left.px]=\"(depth + 1) * 24\">\n                          <ng-container *ngTemplateOutlet=\"categoryNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </ng-template>\n\n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"agents-list\">\n                  <table class=\"agents-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"sortBy('Name')\"\n                            [class.sorted]=\"sortColumn === 'Name'\"\n                            [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Type</th>\n                        <th (click)=\"sortBy('Status')\"\n                            [class.sorted]=\"sortColumn === 'Status'\"\n                            [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Status\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </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\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></div>\n                                @if (agent.Description) {\n                                  <div class=\"agent-description-small\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"type-badge\">\n                              {{ getAgentTypeName(agent) }}\n                            </span>\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                            <div class=\"table-actions\">\n                              @if (UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small\"\n                                  (click)=\"showAgentDetails(agent)\"\n                                  title=\"View Details\">\n                                  <i class=\"fa-solid fa-eye\"></i>\n                                </button>\n                              }\n                              @if (agent.Status === 'Active' && UserCanReadAgents) {\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      </as-split-area>\n    </as-split>\n  </div>\n\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedAgent) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\" [style.background-color]=\"getAgentIconColor(selectedAgent)\">\n            @if (hasLogoURL(selectedAgent)) {\n              <img [src]=\"selectedAgent.LogoURL\" [alt]=\"selectedAgent.Name + ' logo'\" class=\"detail-logo\">\n            } @else {\n              <i [class]=\"getAgentIcon(selectedAgent)\"></i>\n            }\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedAgent.Name }}</h3>\n            <span class=\"detail-subtitle\">{{ getAgentTypeName(selectedAgent) }}</span>\n          </div>\n        </div>\n        <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Panel Content -->\n      <div class=\"detail-panel-content\">\n        <!-- Status and Type Section -->\n        <div class=\"detail-section\">\n          <div class=\"detail-badges\">\n            <span class=\"status-badge\" [class]=\"'status-' + (selectedAgent.Status || 'unknown').toLowerCase()\">\n              <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n              {{ selectedAgent.Status || 'Unknown' }}\n            </span>\n            @if (selectedAgent.ExposeAsAction) {\n              <span class=\"feature-badge\">\n                <i class=\"fa-solid fa-bolt\"></i>\n                Exposed as Action\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedAgent.Description) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-align-left\"></i>\n              Description\n            </h4>\n            <p class=\"detail-description\">{{ selectedAgent.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Details -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Configuration\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Execution Mode</span>\n              <span class=\"detail-value\">\n                <i [class]=\"getExecutionModeIcon(selectedAgent.ExecutionMode)\"></i>\n                {{ selectedAgent.ExecutionMode }}\n              </span>\n            </div>\n            @if (getParentAgentName(selectedAgent)) {\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Parent Agent</span>\n                <span class=\"detail-value\">{{ getParentAgentName(selectedAgent) }}</span>\n              </div>\n            }\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Compression</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.EnableContextCompression) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Enabled\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> Disabled\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Exposed as Action</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.ExposeAsAction) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Yes\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> No\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Model Selection</span>\n              <span class=\"detail-value\">{{ selectedAgent.ModelSelectionMode }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Timestamps -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-clock\"></i>\n            Timestamps\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Created</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_CreatedAt | date:'medium' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_UpdatedAt | date:'medium' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        @if (selectedAgent.Status === 'Active') {\n          <button\n            type=\"button\"\n            class=\"detail-action-btn secondary\"\n            (click)=\"runAgent(selectedAgent)\">\n            <i class=\"fa-solid fa-play\"></i>\n            Run Agent\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openAgentFromPanel()\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- AI Agent Test Harness - Now handled by service with minimize support -->", styles: ["/* ============================================\n   AI Agents Dashboard - World-Class Design\n   Clean white header with brand blue accents\n   ============================================ */\n\n/* Container */\n.agent-configuration-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* Dashboard Header - Clean White Style */\n.dashboard-header {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title i {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.filter-toggle-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.item-count {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n  font-size: 14px;\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* Main Content */\n.main-content {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n/* Splitter Styling */\nas-split {\n  background: transparent;\n}\n\n/* Filter Panel Styles - used by child component */\n\n/* Agents Content */\n.agents-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 28px;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Grid View */\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.agent-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.agent-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.agent-card:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.agent-card:hover::before {\n  opacity: 1;\n}\n\n.agent-card.expanded {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.agent-card.expanded::before {\n  opacity: 1;\n}\n\n.card-header {\n  padding: 24px;\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 var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header:hover {\n  background-color: var(--mj-bg-surface-hover);\n}\n\n.agent-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.agent-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.agent-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.agent-icon .agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.agent-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active i {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending {\n  color: var(--mj-color-warning-700);\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-pending i {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-disabled,\n.meta-item.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-disabled i,\n.meta-item.status-inactive i {\n  color: var(--mj-text-muted);\n}\n\n/* Type Badge - for Agent Type display */\n.type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.type-badge i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n/* Type badge in meta context (grid view) */\n.meta-item.type-badge {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.meta-item.type-badge i {\n  color: var(--mj-brand-primary);\n}\n\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body {\n  padding: 0 24px 24px 24px;\n}\n\n.agent-description {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.agent-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\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(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* List View */\n.agents-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.agents-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table thead {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.agents-table th {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.agents-table th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.sort-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sort-icon {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: all 0.2s ease;\n}\n\n.agents-table th:hover .sort-icon {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted .sort-icon {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.agents-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.agents-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.agents-table tbody tr:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.agents-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.agent-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.agent-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.agent-icon-small i {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n}\n\n.agent-icon-small .agent-logo-small {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 10px;\n}\n\n.agent-name-cell .agent-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.agent-description-small {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge i {\n  font-size: 8px;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-disabled,\n.status-badge.status-inactive {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.execution-mode {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.execution-mode i {\n  color: var(--mj-brand-primary);\n}\n\n.table-actions {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls {\n    justify-content: center;\n  }\n\n  .agents-content {\n    padding: 16px;\n  }\n\n  .agents-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .agent-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 18px;\n  }\n\n  .card-body {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n/* =============================================\n   Detail Panel - Slide-in Overlay\n   ============================================= */\n\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: fadeIn 0.25s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible {\n  right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-icon .detail-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section {\n  margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge i {\n  font-size: 11px;\n}\n\n.detail-section-title {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value i {\n  font-size: 13px;\n}\n\n.detail-code-block {\n  background: var(--mj-text-primary);\n  color: var(--mj-border-default);\n  padding: 16px;\n  border-radius: 10px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 13px;\n  line-height: 1.6;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.detail-action-btn.primary {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Detail Panel Responsive */\n@media (max-width: 520px) {\n  .detail-panel {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n\n/* ============================================\n   Tree View - Mac Finder Style\n   ============================================ */\n\n.agents-tree {\n  padding: 8px 16px;\n}\n\n.tree-category-group {\n  margin-bottom: 2px;\n}\n\n.tree-category-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n\n.tree-category-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.tree-chevron {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  width: 12px;\n  text-align: center;\n  transition: transform 0.15s ease;\n}\n\n.tree-folder-icon {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.tree-category-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  flex: 1;\n}\n\n.tree-category-count {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n/* Agent rows within tree */\n.tree-agent-list {\n  padding-left: 24px;\n}\n\n.tree-agent-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.tree-agent-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.tree-agent-icon {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.tree-agent-icon i {\n  font-size: 12px;\n  color: var(--mj-text-inverse);\n}\n\n.tree-agent-logo {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  object-fit: cover;\n}\n\n.tree-agent-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.tree-agent-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tree-agent-type {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.tree-agent-status {\n  font-size: 11px;\n  font-weight: 500;\n  padding: 2px 8px;\n  border-radius: 4px;\n  white-space: nowrap;\n}\n\n.tree-agent-status.status-active {\n  color: var(--mj-status-success-text);\n  background: var(--mj-status-success-bg);\n}\n\n.tree-agent-status.status-disabled,\n.tree-agent-status.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tree-agent-status.status-pending {\n  color: var(--mj-status-warning-text);\n  background: var(--mj-status-warning-bg);\n}\n"] }]
     }], () => [{ type: i1.AITestHarnessDialogService }, { type: i2.CreateAgentService }, { type: i3.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber: 61 }); })();
 //# sourceMappingURL=agent-configuration.component.js.map