@memberjunction/ng-dashboards 2.50.0 → 2.52.0

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

@@ -1,197 +1,315 @@
-import { Component, Output, EventEmitter } from '@angular/core';
-import { RunView } from '@memberjunction/core';
+import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { RunView, CompositeKey } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-layout";
 import * as i2 from "@memberjunction/ng-container-directives";
 import * as i3 from "./agent-filter-panel.component";
-import * as i4 from "./agent-editor.component";
 const _forTrack0 = ($index, $item) => $item.ID;
-function AgentConfigurationComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-agent-editor", 2);
-    i0.ɵɵlistener("close", function AgentConfigurationComponent_Conditional_1_Template_mj_agent_editor_close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAgentEditor()); })("openAgent", function AgentConfigurationComponent_Conditional_1_Template_mj_agent_editor_openAgent_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenAgentFromEditor($event)); })("openEntityRecord", function AgentConfigurationComponent_Conditional_1_Template_mj_agent_editor_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRecord($event.entityName, $event.recordId)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("agentId", ctx_r1.selectedAgentId);
-} }
-function AgentConfigurationComponent_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Hide Filters ");
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AgentConfigurationComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Show Filters ");
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "div", 19);
-    i0.ɵɵelement(3, "div", 20)(4, "div", 20)(5, "div", 20);
+function AgentConfigurationComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "div", 24);
+    i0.ɵɵelement(3, "div", 25)(4, "div", 25)(5, "div", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 21);
+    i0.ɵɵelementStart(6, "div", 26);
     i0.ɵɵtext(7, "Loading agents...");
     i0.ɵɵelementEnd()()();
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵelement(1, "i", 24);
+function AgentConfigurationComponent_Conditional_28_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵelement(1, "i", 4);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No agents found");
     i0.ɵɵelementEnd();
     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", 28);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createNewAgent()); });
+    i0.ɵɵelement(7, "i", 15);
+    i0.ɵɵtext(8, " Create New Agent ");
     i0.ɵɵelementEnd()();
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
-    i0.ɵɵtext(1, "\u2022 Exposed as Action");
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
+    i0.ɵɵelement(1, "i", 51);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const agent_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap("status-" + agent_r4.Status.toLowerCase());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", agent_r4.Status, " ");
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵtext(2, " Exposed ");
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 36);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 44);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const agent_r5 = i0.ɵɵnextContext().$implicit;
+    const agent_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(agent_r5.Description);
+    i0.ɵɵtextInterpolate(agent_r4.Description);
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 37);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 45);
     i0.ɵɵtext(1, "No description provided");
     i0.ɵɵelementEnd();
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵelement(1, "span", 44);
-    i0.ɵɵtext(2);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 54)(1, "span", 55);
+    i0.ɵɵtext(2, "Parent");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 56);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const agent_r4 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(agent_r4.Parent);
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 57);
+    i0.ɵɵtext(1, " Enabled ");
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 58);
+    i0.ɵɵtext(1, " Disabled ");
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 53);
+    i0.ɵɵtemplate(2, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template, 5, 1, "div", 54);
+    i0.ɵɵelementStart(3, "div", 54)(4, "span", 55);
+    i0.ɵɵtext(5, "Context Compression");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 56);
+    i0.ɵɵtemplate(7, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template, 2, 0)(8, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template, 2, 0);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const agent_r5 = i0.ɵɵnextContext().$implicit;
+    const agent_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" Parent: ", agent_r5.Parent, " ");
+    i0.ɵɵconditional(agent_r4.Parent ? 2 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(agent_r4.EnableContextCompression ? 7 : 8);
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Template_div_click_0_listener() { const agent_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentEditor(agent_r5.ID)); });
-    i0.ɵɵelementStart(1, "div", 27)(2, "div", 28)(3, "div", 29);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const agent_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r4)); });
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵtext(2, " Run ");
+    i0.ɵɵelementEnd();
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 33);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_div_click_1_listener() { const agent_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleAgentExpansion(agent_r4.ID)); });
+    i0.ɵɵelementStart(2, "div", 34)(3, "div", 35);
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 30)(6, "h4", 31);
+    i0.ɵɵelementStart(5, "div", 36)(6, "h4", 37);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 32)(9, "span", 33);
-    i0.ɵɵtext(10);
+    i0.ɵɵelementStart(8, "div", 38)(9, "span", 39);
+    i0.ɵɵelement(10, "i", 40);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(11, AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Conditional_11_Template, 2, 0, "span", 34);
+    i0.ɵɵtemplate(12, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_12_Template, 3, 3, "span", 41)(13, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_13_Template, 3, 0, "span", 39);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div");
-    i0.ɵɵtext(13);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 35);
-    i0.ɵɵtemplate(15, AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Conditional_15_Template, 2, 1, "p", 36)(16, AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Conditional_16_Template, 2, 0, "p", 37)(17, AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Conditional_17_Template, 3, 1, "div", 38);
+    i0.ɵɵelement(14, "i", 42);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 39);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Template_div_click_18_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(19, "button", 40);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Template_button_click_19_listener() { const agent_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentEditor(agent_r5.ID)); });
-    i0.ɵɵelement(20, "i", 41);
-    i0.ɵɵtext(21, " View ");
+    i0.ɵɵelementStart(15, "div", 43);
+    i0.ɵɵtemplate(16, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 1, "p", 44)(17, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 2, 0, "p", 45)(18, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Template, 9, 2, "div", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "button", 42);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Template_button_click_22_listener() { const agent_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentEditor(agent_r5.ID)); });
-    i0.ɵɵelement(23, "i", 43);
-    i0.ɵɵtext(24, " Configure ");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "div", 47)(20, "button", 48);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_button_click_20_listener() { const agent_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentRecord(agent_r4.ID)); });
+    i0.ɵɵelement(21, "i", 49);
+    i0.ɵɵtext(22, " Open ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(23, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template, 3, 0, "button", 50);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const agent_r5 = ctx.$implicit;
+    const agent_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(4);
-    i0.ɵɵclassMap(ctx_r1.getExecutionModeIcon(agent_r5.ExecutionMode));
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedAgentId === agent_r4.ID);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(agent_r5.Name);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r4));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getExecutionModeIcon(agent_r4.ExecutionMode));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(agent_r5.ExecutionMode);
+    i0.ɵɵtextInterpolate(agent_r4.Name);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", agent_r4.ExecutionMode, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(agent_r5.ExposeAsAction ? 11 : -1);
+    i0.ɵɵconditional(agent_r4.Status ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassMapInterpolate1("status-badge execution-mode-", agent_r5.ExecutionMode.toLowerCase(), "");
+    i0.ɵɵconditional(agent_r4.ExposeAsAction ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", agent_r5.ExecutionMode, " ");
+    i0.ɵɵclassProp("rotated", ctx_r1.expandedAgentId === agent_r4.ID);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(agent_r5.Description ? 15 : 16);
+    i0.ɵɵconditional(agent_r4.Description ? 16 : 17);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(agent_r5.Parent ? 17 : -1);
+    i0.ɵɵconditional(ctx_r1.expandedAgentId === agent_r4.ID ? 18 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(agent_r4.Status === "Active" ? 23 : -1);
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_For_2_Template, 25, 11, "div", 25, _forTrack0);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template, 24, 15, "div", 31, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.filteredAgents);
 } }
-function AgentConfigurationComponent_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_0_Template, 6, 0, "div", 22)(1, AgentConfigurationComponent_Conditional_2_Conditional_19_Conditional_1_Template, 3, 0, "div", 23);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.filteredAgents.length === 0 ? 0 : 1);
+    const agent_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(agent_r7.Description);
 } }
-function AgentConfigurationComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "button", 5);
-    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFilterPanel()); });
-    i0.ɵɵelement(3, "i", 6);
-    i0.ɵɵtemplate(4, AgentConfigurationComponent_Conditional_2_Conditional_4_Template, 1, 0)(5, AgentConfigurationComponent_Conditional_2_Conditional_5_Template, 1, 0);
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 70);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const agent_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r7)); });
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementEnd();
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 62)(3, "div", 63);
+    i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 7);
+    i0.ɵɵelementStart(5, "div")(6, "div", 37);
     i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 8)(9, "button", 9);
-    i0.ɵɵelement(10, "i", 10);
-    i0.ɵɵtext(11, " New Agent ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(8, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_8_Template, 2, 1, "div", 64);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 11)(13, "kendo-splitter", 12);
-    i0.ɵɵlistener("layoutChange", function AgentConfigurationComponent_Conditional_2_Template_kendo_splitter_layoutChange_13_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMainSplitterChange($event)); });
-    i0.ɵɵelementStart(14, "kendo-splitter-pane", 13)(15, "mj-agent-filter-panel", 14);
-    i0.ɵɵlistener("filtersChange", function AgentConfigurationComponent_Conditional_2_Template_mj_agent_filter_panel_filtersChange_15_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFiltersChange($event)); })("filterChange", function AgentConfigurationComponent_Conditional_2_Template_mj_agent_filter_panel_filterChange_15_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterChange()); })("resetFilters", function AgentConfigurationComponent_Conditional_2_Template_mj_agent_filter_panel_resetFilters_15_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResetFilters()); })("closePanel", function AgentConfigurationComponent_Conditional_2_Template_mj_agent_filter_panel_closePanel_15_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFilterPanel()); });
+    i0.ɵɵelementStart(9, "td")(10, "span", 65);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "kendo-splitter-pane", 15)(17, "div", 16);
-    i0.ɵɵtemplate(18, AgentConfigurationComponent_Conditional_2_Conditional_18_Template, 8, 0, "div", 17)(19, AgentConfigurationComponent_Conditional_2_Conditional_19_Template, 2, 1);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(12, "td")(13, "span", 66);
+    i0.ɵɵelement(14, "i");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "td")(17, "div", 67)(18, "button", 68);
+    i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template_button_click_18_listener() { const agent_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentRecord(agent_r7.ID)); });
+    i0.ɵɵelement(19, "i", 49);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(20, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template, 2, 0, "button", 69);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.filterPanelVisible ? 4 : 5);
+    const agent_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r1.filteredAgents.length, " agents");
-    i0.ɵɵadvance(7);
-    i0.ɵɵproperty("size", ctx_r1.filterPanelVisible ? "320px" : "0px")("collapsible", false)("resizable", ctx_r1.filterPanelVisible)("scrollable", false)("hidden", !ctx_r1.filterPanelVisible);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getAgentIconColor(agent_r7));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("agents", ctx_r1.agents)("filteredAgents", ctx_r1.filteredAgents)("filters", ctx_r1.currentFilters);
+    i0.ɵɵclassMap(ctx_r1.getExecutionModeIcon(agent_r7.ExecutionMode));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(agent_r7.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("resizable", true)("scrollable", false);
+    i0.ɵɵconditional(agent_r7.Description ? 8 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.isLoading ? 18 : -1);
+    i0.ɵɵclassMap("status-" + (agent_r7.Status || "unknown").toLowerCase());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.isLoading ? 19 : -1);
+    i0.ɵɵtextInterpolate1(" ", agent_r7.Status || "Unknown", " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(ctx_r1.getExecutionModeIcon(agent_r7.ExecutionMode));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", agent_r7.ExecutionMode, " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(agent_r7.Status === "Active" ? 20 : -1);
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30)(1, "table", 61)(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵtext(5, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "th");
+    i0.ɵɵtext(7, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th");
+    i0.ɵɵtext(9, "Execution Mode");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th");
+    i0.ɵɵtext(11, "Actions");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "tbody");
+    i0.ɵɵrepeaterCreate(13, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template, 21, 13, "tr", null, _forTrack0);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(13);
+    i0.ɵɵrepeater(ctx_r1.filteredAgents);
+} }
+function AgentConfigurationComponent_Conditional_28_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_Template, 3, 0, "div", 29)(1, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template, 15, 0, "div", 30);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.viewMode === "grid" ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.viewMode === "list" ? 1 : -1);
+} }
+function AgentConfigurationComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, AgentConfigurationComponent_Conditional_28_Conditional_0_Template, 9, 0, "div", 27)(1, AgentConfigurationComponent_Conditional_28_Conditional_1_Template, 2, 2);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.filteredAgents.length === 0 ? 0 : 1);
 } }
 export class AgentConfigurationComponent {
+    initialState = null;
     openEntityRecord = new EventEmitter();
     stateChange = new EventEmitter();
     isLoading = false;
     filterPanelVisible = true;
-    showEditor = false;
-    selectedAgentId = null;
+    viewMode = 'grid';
+    expandedAgentId = null;
     agents = [];
     filteredAgents = [];
     currentFilters = {
         searchTerm: '',
+        agentType: 'all',
+        parentAgent: 'all',
+        status: 'all',
         executionMode: 'all',
         exposeAsAction: 'all'
     };
+    constructor() { }
     ngOnInit() {
+        if (this.initialState) {
+            this.applyInitialState(this.initialState);
+        }
         this.loadAgents();
     }
+    ngOnDestroy() {
+        // Clean up if needed
+    }
+    applyInitialState(state) {
+        if (state.filterPanelVisible !== undefined) {
+            this.filterPanelVisible = state.filterPanelVisible;
+        }
+        if (state.viewMode) {
+            this.viewMode = state.viewMode;
+        }
+        if (state.expandedAgentId) {
+            this.expandedAgentId = state.expandedAgentId;
+        }
+        if (state.currentFilters) {
+            this.currentFilters = { ...this.currentFilters, ...state.currentFilters };
+        }
+    }
     async loadAgents() {
         try {
             this.isLoading = true;
@@ -229,6 +347,9 @@ export class AgentConfigurationComponent {
     onResetFilters() {
         this.currentFilters = {
             searchTerm: '',
+            agentType: 'all',
+            parentAgent: 'all',
+            status: 'all',
             executionMode: 'all',
             exposeAsAction: 'all'
         };
@@ -236,12 +357,35 @@ export class AgentConfigurationComponent {
     }
     applyFilters() {
         let filtered = [...this.agents];
-        // Apply search filter
+        // Apply search filter (name contains)
         if (this.currentFilters.searchTerm) {
             const searchTerm = this.currentFilters.searchTerm.toLowerCase();
             filtered = filtered.filter(agent => (agent.Name || '').toLowerCase().includes(searchTerm) ||
                 (agent.Description || '').toLowerCase().includes(searchTerm));
         }
+        // Apply agent type filter
+        if (this.currentFilters.agentType !== 'all') {
+            filtered = filtered.filter(agent => agent.TypeID === this.currentFilters.agentType);
+        }
+        // Apply parent agent filter
+        if (this.currentFilters.parentAgent !== 'all') {
+            if (this.currentFilters.parentAgent === 'none') {
+                filtered = filtered.filter(agent => !agent.ParentID);
+            }
+            else {
+                filtered = filtered.filter(agent => agent.ParentID === this.currentFilters.parentAgent);
+            }
+        }
+        // Apply status filter
+        if (this.currentFilters.status !== 'all') {
+            const wantActive = this.currentFilters.status === 'active';
+            if (wantActive) {
+                filtered = filtered.filter(agent => agent.Status === 'Active');
+            }
+            else {
+                filtered = filtered.filter(agent => agent.Status !== 'Active');
+            }
+        }
         // Apply execution mode filter
         if (this.currentFilters.executionMode !== 'all') {
             filtered = filtered.filter(agent => agent.ExecutionMode === this.currentFilters.executionMode);
@@ -256,10 +400,38 @@ export class AgentConfigurationComponent {
     emitStateChange() {
         const state = {
             filterPanelVisible: this.filterPanelVisible,
-            filters: this.currentFilters
+            viewMode: this.viewMode,
+            expandedAgentId: this.expandedAgentId,
+            currentFilters: this.currentFilters,
+            agentCount: this.filteredAgents.length
         };
         this.stateChange.emit(state);
     }
+    setViewMode(mode) {
+        this.viewMode = mode;
+        this.emitStateChange();
+    }
+    toggleAgentExpansion(agentId) {
+        this.expandedAgentId = this.expandedAgentId === agentId ? null : agentId;
+    }
+    openAgentRecord(agentId) {
+        this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: agentId });
+    }
+    createNewAgent() {
+        // Emit event to open a new agent form
+        const compositeKey = new CompositeKey([]);
+        this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: '' });
+    }
+    async runAgent(agent) {
+        // Emit event to open test harness for the agent
+        this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: agent.ID });
+    }
+    getAgentIconColor(agent) {
+        // Generate a consistent color based on agent properties
+        const colors = ['#17a2b8', '#28a745', '#ffc107', '#dc3545', '#6c757d', '#007bff'];
+        const index = (agent.Name?.charCodeAt(0) || 0) % colors.length;
+        return colors[index];
+    }
     onOpenRecord(entityName, recordId) {
         this.openEntityRecord.emit({ entityName: entityName, recordId: recordId });
     }
@@ -277,36 +449,72 @@ export class AgentConfigurationComponent {
             default: return 'fa-solid fa-robot';
         }
     }
-    openAgentEditor(agentId) {
-        this.selectedAgentId = agentId;
-        this.showEditor = true;
-    }
-    closeAgentEditor() {
-        this.showEditor = false;
-        this.selectedAgentId = null;
-    }
-    onOpenAgentFromEditor(agentId) {
-        this.selectedAgentId = agentId;
-        // Editor stays open, just switches to different agent
-    }
     static ɵfac = function AgentConfigurationComponent_Factory(t) { return new (t || AgentConfigurationComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 3, vars: 3, consts: [["mjFillContainer", "", 1, "agent-configuration-container", 3, "rightMargin", "bottomMargin"], ["mjFillContainer", "", 3, "agentId"], ["mjFillContainer", "", 3, "close", "openAgent", "openEntityRecord", "agentId"], [1, "dashboard-header"], [1, "header-info"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "agent-count"], [1, "header-controls"], ["type", "button", "title", "Create New Agent", 1, "control-btn"], [1, "fa-solid", "fa-plus"], ["mjFillContainer", "", 1, "main-content"], ["orientation", "horizontal", "mjFillContainer", "", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "agents", "filteredAgents", "filters"], [3, "resizable", "scrollable"], [1, "agents-content"], [1, "loading-container"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "empty-state"], [1, "agents-grid"], [1, "fa-solid", "fa-robot"], [1, "agent-card"], [1, "agent-card", 3, "click"], [1, "card-header"], [1, "agent-info"], [1, "agent-icon"], [1, "agent-details"], [1, "agent-name"], [1, "agent-meta"], [1, "agent-type"], [1, "agent-category"], [1, "card-body"], [1, "agent-description"], [1, "agent-description", "text-muted"], [1, "agent-parent"], [1, "card-actions", 3, "click"], ["type", "button", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-edit"], [1, "fa-solid", "fa-link"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, AgentConfigurationComponent_Conditional_1_Template, 1, 1, "mj-agent-editor", 1)(2, AgentConfigurationComponent_Conditional_2_Template, 20, 14);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], inputs: { initialState: "initialState" }, outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 29, vars: 20, consts: [["mjFillContainer", "", 1, "agent-configuration-container", 3, "rightMargin", "bottomMargin"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-robot"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "item-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Create New Agent", 1, "control-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjFillContainer", "", 1, "main-content"], ["orientation", "horizontal", "mjFillContainer", "", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "agents", "filteredAgents", "filters"], [3, "resizable", "scrollable"], [1, "agents-content"], [1, "loading-container"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "empty-state"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "agents-grid"], [1, "agents-list"], [1, "agent-card", 3, "expanded"], [1, "agent-card"], [1, "card-header", 3, "click"], [1, "agent-info"], [1, "agent-icon"], [1, "agent-details"], [1, "agent-name"], [1, "agent-meta"], [1, "meta-item"], [1, "fa-solid", "fa-microchip"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "agent-description"], [1, "agent-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "Open Agent", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "fa-solid", "fa-bolt"], [1, "agent-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-check", 2, "color", "#28a745"], [1, "fa-solid", "fa-times", 2, "color", "#dc3545"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "agents-table"], [1, "agent-name-cell"], [1, "agent-icon-small"], [1, "agent-description-small"], [1, "status-badge"], [1, "execution-mode"], [1, "table-actions"], ["type", "button", "title", "Open Agent", 1, "action-btn-small", 3, "click"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary", 3, "click"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵtext(5, " Agent Configuration ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "button", 5);
+            i0.ɵɵlistener("click", function AgentConfigurationComponent_Template_button_click_6_listener() { return ctx.toggleFilterPanel(); });
+            i0.ɵɵelement(7, "i", 6);
+            i0.ɵɵtemplate(8, AgentConfigurationComponent_Conditional_8_Template, 1, 0)(9, AgentConfigurationComponent_Conditional_9_Template, 1, 0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "span", 7);
+            i0.ɵɵtext(11);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "div", 8)(13, "div", 9)(14, "button", 10);
+            i0.ɵɵlistener("click", function AgentConfigurationComponent_Template_button_click_14_listener() { return ctx.setViewMode("grid"); });
+            i0.ɵɵelement(15, "i", 11);
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "button", 12);
+            i0.ɵɵlistener("click", function AgentConfigurationComponent_Template_button_click_16_listener() { return ctx.setViewMode("list"); });
+            i0.ɵɵelement(17, "i", 13);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(18, "button", 14);
+            i0.ɵɵlistener("click", function AgentConfigurationComponent_Template_button_click_18_listener() { return ctx.createNewAgent(); });
+            i0.ɵɵelement(19, "i", 15);
+            i0.ɵɵtext(20, " New Agent ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(21, "div", 16)(22, "kendo-splitter", 17);
+            i0.ɵɵlistener("layoutChange", function AgentConfigurationComponent_Template_kendo_splitter_layoutChange_22_listener($event) { return ctx.onMainSplitterChange($event); });
+            i0.ɵɵelementStart(23, "kendo-splitter-pane", 18)(24, "mj-agent-filter-panel", 19);
+            i0.ɵɵlistener("filtersChange", function AgentConfigurationComponent_Template_mj_agent_filter_panel_filtersChange_24_listener($event) { return ctx.onFiltersChange($event); })("filterChange", function AgentConfigurationComponent_Template_mj_agent_filter_panel_filterChange_24_listener() { return ctx.onFilterChange(); })("resetFilters", function AgentConfigurationComponent_Template_mj_agent_filter_panel_resetFilters_24_listener() { return ctx.onResetFilters(); })("closePanel", function AgentConfigurationComponent_Template_mj_agent_filter_panel_closePanel_24_listener() { return ctx.toggleFilterPanel(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(25, "kendo-splitter-pane", 20)(26, "div", 21);
+            i0.ɵɵtemplate(27, AgentConfigurationComponent_Conditional_27_Template, 8, 0, "div", 22)(28, AgentConfigurationComponent_Conditional_28_Template, 2, 1);
+            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("rightMargin", 8)("bottomMargin", 8);
+            i0.ɵɵadvance(8);
+            i0.ɵɵconditional(ctx.filterPanelVisible ? 8 : 9);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("", ctx.filteredAgents.length, " agents");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.viewMode === "grid");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.viewMode === "list");
+            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", false);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 27 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showEditor && ctx.selectedAgentId ? 1 : 2);
-        } }, dependencies: [i1.SplitterComponent, i1.SplitterPaneComponent, i2.FillContainer, i3.AgentFilterPanelComponent, i4.AgentEditorComponent], styles: [".agent-configuration-container[_ngcontent-%COMP%] {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  \n  .filter-toggle-btn {\n    padding: 6px 10px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    cursor: pointer;\n    font-size: 11px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: #555;\n    \n    &:hover {\n      background-color: #f0f0f0;\n      border-color: #2196f3;\n      color: #2196f3;\n    }\n    \n    .fa-solid {\n      font-size: 10px;\n    }\n  }\n  \n  .agent-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      .fa-solid {\n        font-size: 11px;\n      }\n    }\n  }\n}\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n.agents-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 0 16px;\n}\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  \n  .spinner-ring {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: #2196f3;\n    animation: _ngcontent-%COMP%_loading-pulse 1.5s ease-in-out infinite;\n    \n    &:nth-child(2) {\n      animation-delay: 0.2s;\n    }\n    \n    &:nth-child(3) {\n      animation-delay: 0.4s;\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_loading-pulse {\n  0%, 80%, 100% {\n    opacity: 0.3;\n    transform: scale(0.8);\n  }\n  40% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  text-align: center;\n  background: #fafafa;\n  border-radius: 6px;\n  margin: 24px 0;\n  \n  .fa-solid {\n    font-size: 48px;\n    color: #ddd;\n    margin-bottom: 16px;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 500;\n    color: #666;\n  }\n  \n  p {\n    margin: 0;\n    font-size: 14px;\n    color: #999;\n    max-width: 400px;\n    line-height: 1.4;\n  }\n}\n\n.agents-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 16px;\n  padding: 16px 0;\n}\n\n.agent-card[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 16px;\n  transition: all 0.2s ease;\n  height: fit-content;\n  cursor: pointer;\n  \n  &:hover {\n    border-color: #2196f3;\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);\n    transform: translateY(-1px);\n  }\n  \n  .card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n    \n    .agent-info {\n      display: flex;\n      gap: 12px;\n      flex: 1;\n      min-width: 0;\n      \n      .agent-icon {\n        width: 32px;\n        height: 32px;\n        border-radius: 6px;\n        background: rgba(33, 150, 243, 0.1);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        \n        .fa-solid {\n          font-size: 14px;\n          color: #2196f3;\n        }\n      }\n      \n      .agent-details {\n        flex: 1;\n        min-width: 0;\n        \n        .agent-name {\n          margin: 0 0 4px 0;\n          font-size: 14px;\n          font-weight: 500;\n          color: #333;\n          line-height: 1.3;\n        }\n        \n        .agent-meta {\n          font-size: 11px;\n          color: #666;\n          \n          .agent-type {\n            font-weight: 500;\n          }\n          \n          .agent-category {\n            color: #999;\n          }\n        }\n      }\n    }\n    \n    .status-badge {\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n      flex-shrink: 0;\n      \n      &.status-active {\n        background: #e8f5e8;\n        color: #2e7d32;\n      }\n      \n      &.status-training {\n        background: #fff3e0;\n        color: #f57c00;\n      }\n      \n      &.status-disabled {\n        background: #ffebee;\n        color: #c62828;\n      }\n      \n      &.status-draft {\n        background: #f5f5f5;\n        color: #666;\n      }\n    }\n  }\n  \n  .card-body {\n    margin-bottom: 16px;\n    \n    .agent-description {\n      margin: 0;\n      font-size: 12px;\n      color: #666;\n      line-height: 1.4;\n      \n      &.text-muted {\n        font-style: italic;\n        color: #999;\n      }\n    }\n  }\n  \n  .card-actions {\n    border-top: 1px solid #f0f0f0;\n    padding-top: 12px;\n    display: flex;\n    gap: 8px;\n    \n    .action-btn {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      background: white;\n      cursor: pointer;\n      font-size: 11px;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f5f5f5;\n        border-color: #bbb;\n      }\n      \n      &.action-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      &.action-btn-danger {\n        background-color: #f44336;\n        border-color: #f44336;\n        color: white;\n        \n        &:hover {\n          background-color: #d32f2f;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 10px;\n      }\n    }\n  }\n}"] });
+            i0.ɵɵconditional(!ctx.isLoading ? 28 : -1);
+        } }, dependencies: [i1.SplitterComponent, i1.SplitterPaneComponent, i2.FillContainer, i3.AgentFilterPanelComponent], styles: ["\n\n.agent-configuration-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f5f7fa;\n}\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n  background: white;\n  padding: 16px 24px;\n  border-bottom: 1px solid #e0e6ed;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dashboard-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #17a2b8;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: #e9ecef;\n  border-color: #ced4da;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  color: #6c757d;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f8f9fa;\n  border-radius: 6px;\n  padding: 2px;\n  border: 1px solid #dee2e6;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 6px 12px;\n  border-radius: 4px;\n  color: #6c757d;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 16px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: #495057;\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #17a2b8;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.agents-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: #f5f7fa;\n}\n\n\n\n.agents-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n  gap: 20px;\n}\n\n.agent-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  transition: all 0.3s ease;\n  overflow: hidden;\n}\n\n.agent-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  transform: translateY(-2px);\n}\n\n.agent-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n}\n\n.agent-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  font-size: 20px;\n}\n\n.agent-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  margin-bottom: 6px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n  color: #28a745;\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.meta-item.status-disabled[_ngcontent-%COMP%] {\n  color: #6c757d;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6c757d;\n  transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 20px 20px 20px;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n  margin: 16px 0 0 0;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #6c757d;\n}\n\n.agent-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: #adb5bd;\n}\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #f0f4f8;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.agent-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #495057;\n  font-weight: 500;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  background: #f8f9fa;\n  border-top: 1px solid #e0e6ed;\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n\n\n.agents-list[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  overflow: hidden;\n}\n\n.agents-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 600;\n  color: #495057;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n}\n\n.agents-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 16px;\n  font-size: 14px;\n  color: #495057;\n}\n\n.agent-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.agent-icon-small[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  font-size: 16px;\n}\n\n.agent-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n  margin-top: 2px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.status-unknown[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  color: #6c757d;\n}\n\n.execution-mode[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 80px 20px;\n  color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: #dee2e6;\n  margin-bottom: 24px;\n  display: block;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: #495057;\n  font-weight: 600;\n  margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 24px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%] {\n  background: #17a2b8;\n  color: white;\n  border: none;\n  padding: 10px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%]:hover {\n  background: #1485a3;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-bottom: 16px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 3px solid #17a2b8;\n  border-color: #17a2b8 transparent #17a2b8 transparent;\n  animation: _ngcontent-%COMP%_spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  animation-delay: -0.45s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  animation-delay: -0.3s;\n}\n\n@keyframes _ngcontent-%COMP%_spinner-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: #6c757d;\n  font-size: 14px;\n}\n\n\n\n@media (max-width: 768px) {\n  .dashboard-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n  }\n  \n  .header-info[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  \n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  \n  .agents-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .agent-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentConfigurationComponent, [{
         type: Component,
-        args: [{ selector: 'app-agent-configuration', template: "<div class=\"agent-configuration-container\" mjFillContainer [rightMargin]=\"8\" [bottomMargin]=\"8\">\n  \n  <!-- Agent Editor Modal -->\n  @if (showEditor && selectedAgentId) {\n    <mj-agent-editor\n      [agentId]=\"selectedAgentId\"\n      (close)=\"closeAgentEditor()\"\n      (openAgent)=\"onOpenAgentFromEditor($event)\"\n      (openEntityRecord)=\"onOpenRecord($event.entityName, $event.recordId)\"\n      mjFillContainer>\n    </mj-agent-editor>\n  } @else {\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\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=\"agent-count\">{{ filteredAgents.length }} agents</span>\n    </div>\n    \n    <div class=\"header-controls\">\n      <button \n        type=\"button\" \n        class=\"control-btn\"\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\" mjFillContainer>\n    <kendo-splitter \n      class=\"main-splitter\"\n      orientation=\"horizontal\"\n      (layoutChange)=\"onMainSplitterChange($event)\"\n      mjFillContainer>\n      \n      <!-- Filter Panel (Left) -->\n      <kendo-splitter-pane \n        [size]=\"filterPanelVisible ? '320px' : '0px'\"\n        [collapsible]=\"false\"\n        [resizable]=\"filterPanelVisible\"\n        [scrollable]=\"false\"\n        [hidden]=\"!filterPanelVisible\">\n        <mj-agent-filter-panel\n          [agents]=\"agents\"\n          [filteredAgents]=\"filteredAgents\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-agent-filter-panel>\n      </kendo-splitter-pane>\n      \n      <!-- Agents List Panel -->\n      <kendo-splitter-pane \n        [resizable]=\"true\"\n        [scrollable]=\"false\">\n        <div class=\"agents-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <div class=\"loading-content\">\n                <div class=\"loading-spinner\">\n                  <div class=\"spinner-ring\"></div>\n                  <div class=\"spinner-ring\"></div>\n                  <div class=\"spinner-ring\"></div>\n                </div>\n                <div class=\"loading-text\">Loading agents...</div>\n              </div>\n            </div>\n          }\n\n          <!-- Agents List -->\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              </div>\n            } @else {\n              <div class=\"agents-grid\">\n                @for (agent of filteredAgents; track agent.ID) {\n                  <div class=\"agent-card\" (click)=\"openAgentEditor(agent.ID)\">\n                    <!-- Card Header -->\n                    <div class=\"card-header\">\n                      <div class=\"agent-info\">\n                        <div class=\"agent-icon\">\n                          <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n                        </div>\n                        <div class=\"agent-details\">\n                          <h4 class=\"agent-name\">{{ agent.Name }}</h4>\n                          <div class=\"agent-meta\">\n                            <span class=\"agent-type\">{{ agent.ExecutionMode }}</span>\n                            @if (agent.ExposeAsAction) {\n                              <span class=\"agent-category\">\u2022 Exposed as Action</span>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                      \n                      <div class=\"status-badge execution-mode-{{ agent.ExecutionMode.toLowerCase() }}\">\n                        {{ agent.ExecutionMode }}\n                      </div>\n                    </div>\n\n                    <!-- Card Body -->\n                    <div class=\"card-body\">\n                      @if (agent.Description) {\n                        <p class=\"agent-description\">{{ agent.Description }}</p>\n                      } @else {\n                        <p class=\"agent-description text-muted\">No description provided</p>\n                      }\n                      \n                      @if (agent.Parent) {\n                        <div class=\"agent-parent\">\n                          <span class=\"fa-solid fa-link\"></span>\n                          Parent: {{ agent.Parent }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Card Actions -->\n                    <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n                      <button \n                        type=\"button\" \n                        class=\"action-btn\"\n                        (click)=\"openAgentEditor(agent.ID)\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        View\n                      </button>\n                      \n                      <button \n                        type=\"button\" \n                        class=\"action-btn action-btn-primary\"\n                        (click)=\"openAgentEditor(agent.ID)\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                        Configure\n                      </button>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </kendo-splitter-pane>\n    </kendo-splitter>\n  </div>\n  }\n</div>", styles: [".agent-configuration-container {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  \n  .filter-toggle-btn {\n    padding: 6px 10px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    cursor: pointer;\n    font-size: 11px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: #555;\n    \n    &:hover {\n      background-color: #f0f0f0;\n      border-color: #2196f3;\n      color: #2196f3;\n    }\n    \n    .fa-solid {\n      font-size: 10px;\n    }\n  }\n  \n  .agent-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      .fa-solid {\n        font-size: 11px;\n      }\n    }\n  }\n}\n\n.main-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n.agents-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 0 16px;\n}\n\n.loading-container, .error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n}\n\n.loading-spinner {\n  display: flex;\n  gap: 4px;\n  \n  .spinner-ring {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: #2196f3;\n    animation: loading-pulse 1.5s ease-in-out infinite;\n    \n    &:nth-child(2) {\n      animation-delay: 0.2s;\n    }\n    \n    &:nth-child(3) {\n      animation-delay: 0.4s;\n    }\n  }\n}\n\n@keyframes loading-pulse {\n  0%, 80%, 100% {\n    opacity: 0.3;\n    transform: scale(0.8);\n  }\n  40% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.loading-text {\n  font-size: 12px;\n  color: #666;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  text-align: center;\n  background: #fafafa;\n  border-radius: 6px;\n  margin: 24px 0;\n  \n  .fa-solid {\n    font-size: 48px;\n    color: #ddd;\n    margin-bottom: 16px;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 500;\n    color: #666;\n  }\n  \n  p {\n    margin: 0;\n    font-size: 14px;\n    color: #999;\n    max-width: 400px;\n    line-height: 1.4;\n  }\n}\n\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 16px;\n  padding: 16px 0;\n}\n\n.agent-card {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 16px;\n  transition: all 0.2s ease;\n  height: fit-content;\n  cursor: pointer;\n  \n  &:hover {\n    border-color: #2196f3;\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);\n    transform: translateY(-1px);\n  }\n  \n  .card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n    \n    .agent-info {\n      display: flex;\n      gap: 12px;\n      flex: 1;\n      min-width: 0;\n      \n      .agent-icon {\n        width: 32px;\n        height: 32px;\n        border-radius: 6px;\n        background: rgba(33, 150, 243, 0.1);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        \n        .fa-solid {\n          font-size: 14px;\n          color: #2196f3;\n        }\n      }\n      \n      .agent-details {\n        flex: 1;\n        min-width: 0;\n        \n        .agent-name {\n          margin: 0 0 4px 0;\n          font-size: 14px;\n          font-weight: 500;\n          color: #333;\n          line-height: 1.3;\n        }\n        \n        .agent-meta {\n          font-size: 11px;\n          color: #666;\n          \n          .agent-type {\n            font-weight: 500;\n          }\n          \n          .agent-category {\n            color: #999;\n          }\n        }\n      }\n    }\n    \n    .status-badge {\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n      flex-shrink: 0;\n      \n      &.status-active {\n        background: #e8f5e8;\n        color: #2e7d32;\n      }\n      \n      &.status-training {\n        background: #fff3e0;\n        color: #f57c00;\n      }\n      \n      &.status-disabled {\n        background: #ffebee;\n        color: #c62828;\n      }\n      \n      &.status-draft {\n        background: #f5f5f5;\n        color: #666;\n      }\n    }\n  }\n  \n  .card-body {\n    margin-bottom: 16px;\n    \n    .agent-description {\n      margin: 0;\n      font-size: 12px;\n      color: #666;\n      line-height: 1.4;\n      \n      &.text-muted {\n        font-style: italic;\n        color: #999;\n      }\n    }\n  }\n  \n  .card-actions {\n    border-top: 1px solid #f0f0f0;\n    padding-top: 12px;\n    display: flex;\n    gap: 8px;\n    \n    .action-btn {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      background: white;\n      cursor: pointer;\n      font-size: 11px;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f5f5f5;\n        border-color: #bbb;\n      }\n      \n      &.action-btn-primary {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n        \n        &:hover {\n          background-color: #1976d2;\n        }\n      }\n      \n      &.action-btn-danger {\n        background-color: #f44336;\n        border-color: #f44336;\n        color: white;\n        \n        &:hover {\n          background-color: #d32f2f;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 10px;\n      }\n    }\n  }\n}"] }]
-    }], null, { openEntityRecord: [{
+        args: [{ selector: 'app-agent-configuration', template: "<div class=\"agent-configuration-container\" mjFillContainer [rightMargin]=\"8\" [bottomMargin]=\"8\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <h2 class=\"dashboard-title\">\n        <i class=\"fa-solid fa-robot\"></i>\n        Agent Configuration\n      </h2>\n      <button \n        type=\"button\" \n        class=\"filter-toggle-btn\"\n        (click)=\"toggleFilterPanel()\"\n        title=\"Toggle Filters\">\n        <i class=\"fa-solid fa-filter\"></i>\n        @if (filterPanelVisible) {\n          Hide Filters\n        } @else {\n          Show Filters\n        }\n      </button>\n      <span class=\"item-count\">{{ filteredAgents.length }} agents</span>\n    </div>\n    \n    <div class=\"header-controls\">\n      <div class=\"view-toggle\">\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'grid'\"\n          (click)=\"setViewMode('grid')\"\n          title=\"Grid View\">\n          <i class=\"fa-solid fa-grip\"></i>\n        </button>\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'list'\"\n          (click)=\"setViewMode('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n      </div>\n      \n      <button \n        type=\"button\" \n        class=\"control-btn primary\"\n        (click)=\"createNewAgent()\"\n        title=\"Create New Agent\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Agent\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <div class=\"main-content\" mjFillContainer>\n    <kendo-splitter \n      class=\"main-splitter\"\n      orientation=\"horizontal\"\n      (layoutChange)=\"onMainSplitterChange($event)\"\n      mjFillContainer>\n      \n      <!-- Filter Panel (Left) -->\n      <kendo-splitter-pane \n        [size]=\"filterPanelVisible ? '320px' : '0px'\"\n        [collapsible]=\"false\"\n        [resizable]=\"filterPanelVisible\"\n        [scrollable]=\"false\"\n        [hidden]=\"!filterPanelVisible\">\n        <mj-agent-filter-panel\n          [agents]=\"agents\"\n          [filteredAgents]=\"filteredAgents\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-agent-filter-panel>\n      </kendo-splitter-pane>\n      \n      <!-- Agents List Panel -->\n      <kendo-splitter-pane \n        [resizable]=\"true\"\n        [scrollable]=\"false\">\n        <div class=\"agents-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <div class=\"loading-content\">\n                <div class=\"loading-spinner\">\n                  <div class=\"spinner-ring\"></div>\n                  <div class=\"spinner-ring\"></div>\n                  <div class=\"spinner-ring\"></div>\n                </div>\n                <div class=\"loading-text\">Loading agents...</div>\n              </div>\n            </div>\n          }\n\n          <!-- Agents Display -->\n          @if (!isLoading) {\n            @if (filteredAgents.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-robot\"></i>\n                <h3>No agents found</h3>\n                <p>No agents match your current filters. Try adjusting your search criteria or create a new agent.</p>\n                <button \n                  type=\"button\" \n                  class=\"empty-state-btn\"\n                  (click)=\"createNewAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create New Agent\n                </button>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"agents-grid\">\n                  @for (agent of filteredAgents; track agent.ID) {\n                    <div class=\"agent-card\" [class.expanded]=\"expandedAgentId === agent.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleAgentExpansion(agent.ID)\">\n                        <div class=\"agent-info\">\n                          <div class=\"agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                            <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n                          </div>\n                          <div class=\"agent-details\">\n                            <h4 class=\"agent-name\">{{ agent.Name }}</h4>\n                            <div class=\"agent-meta\">\n                              <span class=\"meta-item\">\n                                <i class=\"fa-solid fa-microchip\"></i>\n                                {{ agent.ExecutionMode }}\n                              </span>\n                              @if (agent.Status) {\n                                <span class=\"meta-item\" [class]=\"'status-' + agent.Status.toLowerCase()\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  {{ agent.Status }}\n                                </span>\n                              }\n                              @if (agent.ExposeAsAction) {\n                                <span class=\"meta-item\">\n                                  <i class=\"fa-solid fa-bolt\"></i>\n                                  Exposed\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                        \n                        <i class=\"fa-solid fa-chevron-down expand-icon\" \n                           [class.rotated]=\"expandedAgentId === agent.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (agent.Description) {\n                          <p class=\"agent-description\">{{ agent.Description }}</p>\n                        } @else {\n                          <p class=\"agent-description text-muted\">No description provided</p>\n                        }\n                        \n                        <!-- Expandable Content -->\n                        @if (expandedAgentId === agent.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"agent-stats\">\n                              @if (agent.Parent) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Parent</span>\n                                  <span class=\"stat-value\">{{ agent.Parent }}</span>\n                                </div>\n                              }\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Context Compression</span>\n                                <span class=\"stat-value\">\n                                  @if (agent.EnableContextCompression) {\n                                    <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Enabled\n                                  } @else {\n                                    <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> Disabled\n                                  }\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        <button \n                          type=\"button\" \n                          class=\"action-btn\"\n                          (click)=\"openAgentRecord(agent.ID)\"\n                          title=\"Open Agent\">\n                          <i class=\"fa-solid fa-external-link-alt\"></i>\n                          Open\n                        </button>\n                        \n                        @if (agent.Status === 'Active') {\n                          <button \n                            type=\"button\" \n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"runAgent(agent)\"\n                            title=\"Run Agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              \n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"agents-list\">\n                  <table class=\"agents-table\">\n                    <thead>\n                      <tr>\n                        <th>Name</th>\n                        <th>Status</th>\n                        <th>Execution Mode</th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (agent of filteredAgents; track agent.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"agent-name-cell\">\n                              <div class=\"agent-icon-small\" [style.background-color]=\"getAgentIconColor(agent)\">\n                                <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n                              </div>\n                              <div>\n                                <div class=\"agent-name\">{{ agent.Name }}</div>\n                                @if (agent.Description) {\n                                  <div class=\"agent-description-small\">{{ agent.Description }}</div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status || 'Unknown' }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"execution-mode\">\n                              <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n                              {{ agent.ExecutionMode }}\n                            </span>\n                          </td>\n                          <td>\n                            <div class=\"table-actions\">\n                              <button \n                                type=\"button\" \n                                class=\"action-btn-small\"\n                                (click)=\"openAgentRecord(agent.ID)\"\n                                title=\"Open Agent\">\n                                <i class=\"fa-solid fa-external-link-alt\"></i>\n                              </button>\n                              @if (agent.Status === 'Active') {\n                                <button \n                                  type=\"button\" \n                                  class=\"action-btn-small primary\"\n                                  (click)=\"runAgent(agent)\"\n                                  title=\"Run Agent\">\n                                  <i class=\"fa-solid fa-play\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n        </div>\n      </kendo-splitter-pane>\n    </kendo-splitter>\n  </div>\n</div>", styles: ["/* Agent Configuration Component - Modern Design */\n.agent-configuration-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f5f7fa;\n}\n\n/* Dashboard Header */\n.dashboard-header {\n  background: white;\n  padding: 16px 24px;\n  border-bottom: 1px solid #e0e6ed;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.dashboard-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dashboard-title i {\n  color: #17a2b8;\n}\n\n.filter-toggle-btn {\n  background: #f8f9fa;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-toggle-btn:hover {\n  background: #e9ecef;\n  border-color: #ced4da;\n}\n\n.item-count {\n  color: #6c757d;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.header-controls {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  background: #f8f9fa;\n  border-radius: 6px;\n  padding: 2px;\n  border: 1px solid #dee2e6;\n}\n\n.view-btn {\n  background: transparent;\n  border: none;\n  padding: 6px 12px;\n  border-radius: 4px;\n  color: #6c757d;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 16px;\n}\n\n.view-btn:hover {\n  color: #495057;\n}\n\n.view-btn.active {\n  background: white;\n  color: #17a2b8;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.control-btn.primary {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.control-btn.primary:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n/* Main Content */\n.main-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.agents-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: #f5f7fa;\n}\n\n/* Grid View */\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n  gap: 20px;\n}\n\n.agent-card {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  transition: all 0.3s ease;\n  overflow: hidden;\n}\n\n.agent-card:hover {\n  box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  transform: translateY(-2px);\n}\n\n.agent-card.expanded {\n  box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header {\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n}\n\n.agent-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon i {\n  color: white;\n  font-size: 20px;\n}\n\n.agent-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  margin-bottom: 6px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.meta-item i {\n  font-size: 12px;\n}\n\n.meta-item.status-active {\n  color: #28a745;\n}\n\n.meta-item.status-pending {\n  color: #ffc107;\n}\n\n.meta-item.status-disabled {\n  color: #6c757d;\n}\n\n.expand-icon {\n  font-size: 14px;\n  color: #6c757d;\n  transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n}\n\n.card-body {\n  padding: 0 20px 20px 20px;\n}\n\n.agent-description {\n  margin: 16px 0 0 0;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #6c757d;\n}\n\n.agent-description.text-muted {\n  font-style: italic;\n  color: #adb5bd;\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #f0f4f8;\n  animation: slideDown 0.3s ease;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.agent-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value {\n  font-size: 14px;\n  color: #495057;\n  font-weight: 500;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 16px 20px;\n  background: #f8f9fa;\n  border-top: 1px solid #e0e6ed;\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-primary {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-primary:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n/* List View */\n.agents-list {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  border: 1px solid #e0e6ed;\n  overflow: hidden;\n}\n\n.agents-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table thead {\n  background: #f8f9fa;\n  border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table th {\n  padding: 12px 16px;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 600;\n  color: #495057;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.agents-table tbody tr {\n  border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table tbody tr:hover {\n  background: #f8f9fa;\n}\n\n.agents-table td {\n  padding: 16px;\n  font-size: 14px;\n  color: #495057;\n}\n\n.agent-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.agent-icon-small {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.agent-icon-small i {\n  color: white;\n  font-size: 16px;\n}\n\n.agent-description-small {\n  font-size: 13px;\n  color: #6c757d;\n  margin-top: 2px;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge.status-pending {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge.status-disabled {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.status-unknown {\n  background: #f8f9fa;\n  color: #6c757d;\n}\n\n.execution-mode {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.table-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n}\n\n.action-btn-small.primary {\n  background: #17a2b8;\n  border-color: #17a2b8;\n  color: white;\n}\n\n.action-btn-small.primary:hover {\n  background: #1485a3;\n  border-color: #1485a3;\n}\n\n/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 80px 20px;\n  color: #6c757d;\n}\n\n.empty-state i {\n  font-size: 64px;\n  color: #dee2e6;\n  margin-bottom: 24px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: #495057;\n  font-weight: 600;\n  margin-bottom: 12px;\n}\n\n.empty-state p {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 24px;\n}\n\n.empty-state-btn {\n  background: #17a2b8;\n  color: white;\n  border: none;\n  padding: 10px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty-state-btn:hover {\n  background: #1485a3;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n.loading-content {\n  text-align: center;\n}\n\n.loading-spinner {\n  display: inline-block;\n  margin-bottom: 16px;\n}\n\n.spinner-ring {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 3px solid #17a2b8;\n  border-color: #17a2b8 transparent #17a2b8 transparent;\n  animation: spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring:nth-child(2) {\n  animation-delay: -0.45s;\n}\n\n.spinner-ring:nth-child(3) {\n  animation-delay: -0.3s;\n}\n\n@keyframes spinner-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text {\n  color: #6c757d;\n  font-size: 14px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n  }\n  \n  .header-info {\n    justify-content: space-between;\n  }\n  \n  .header-controls {\n    justify-content: space-between;\n  }\n  \n  .agents-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .agent-stats {\n    grid-template-columns: 1fr;\n  }\n}"] }]
+    }], () => [], { initialState: [{
+            type: Input
+        }], openEntityRecord: [{
             type: Output
         }], stateChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber: 16 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber: 19 }); })();
 //# sourceMappingURL=agent-configuration.component.js.map