@memberjunction/ng-dashboards 5.11.0 → 5.12.0

package/dist/AI/components/agents/agent-filter-panel.component.js

@@ -2,9 +2,10 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-trees";
 const _forTrack0 = ($index, $item) => $item.value;
-function AgentFilterPanelComponent_For_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 14);
+function AgentFilterPanelComponent_For_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -13,8 +14,8 @@ function AgentFilterPanelComponent_For_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(option_r1.text);
 } }
-function AgentFilterPanelComponent_For_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 14);
+function AgentFilterPanelComponent_For_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -23,8 +24,8 @@ function AgentFilterPanelComponent_For_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(option_r2.text);
 } }
-function AgentFilterPanelComponent_For_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 14);
+function AgentFilterPanelComponent_For_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -33,8 +34,8 @@ function AgentFilterPanelComponent_For_37_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(option_r3.text);
 } }
-function AgentFilterPanelComponent_For_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 14);
+function AgentFilterPanelComponent_For_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -43,8 +44,8 @@ function AgentFilterPanelComponent_For_44_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(option_r4.text);
 } }
-function AgentFilterPanelComponent_For_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 14);
+function AgentFilterPanelComponent_For_56_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -62,7 +63,8 @@ export class AgentFilterPanelComponent {
         parentAgent: 'all',
         status: 'all',
         executionMode: 'all',
-        exposeAsAction: 'all'
+        exposeAsAction: 'all',
+        categoryId: 'all'
     };
     filtersChange = new EventEmitter();
     filterChange = new EventEmitter();
@@ -90,6 +92,17 @@ export class AgentFilterPanelComponent {
         { text: 'Exposed as Action', value: 'true' },
         { text: 'Not Exposed', value: 'false' }
     ];
+    /** TreeDropdown configuration for agent categories */
+    CategoryBranchConfig = {
+        EntityName: 'MJ: AI Agent Categories',
+        DisplayField: 'Name',
+        ParentIDField: 'ParentID',
+        DefaultIcon: 'fa-solid fa-folder',
+        OrderBy: 'Name ASC',
+        DescriptionField: 'Description'
+    };
+    /** Current category selection for the tree dropdown */
+    SelectedCategoryKey = null;
     async ngOnInit() {
         // Load agent types from AIEngineBase
         try {
@@ -122,6 +135,17 @@ export class AgentFilterPanelComponent {
         this.filtersChange.emit(this.filters);
         this.filterChange.emit();
     }
+    onCategoryChange(value) {
+        if (value && !Array.isArray(value)) {
+            const idValue = value.KeyValuePairs?.find(kv => kv.FieldName === 'ID')?.Value;
+            this.filters.categoryId = idValue ?? 'all';
+        }
+        else {
+            this.filters.categoryId = 'all';
+        }
+        this.SelectedCategoryKey = Array.isArray(value) ? null : value;
+        this.onFilterChange();
+    }
     resetAllFilters() {
         this.resetFilters.emit();
     }
@@ -129,7 +153,7 @@ export class AgentFilterPanelComponent {
         this.closePanel.emit();
     }
     static ɵfac = function AgentFilterPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AgentFilterPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentFilterPanelComponent, selectors: [["mj-agent-filter-panel"]], inputs: { agents: "agents", filteredAgents: "filteredAgents", filters: "filters" }, outputs: { filtersChange: "filtersChange", filterChange: "filterChange", resetFilters: "resetFilters", closePanel: "closePanel" }, standalone: false, decls: 56, vars: 8, consts: [[1, "filter-panel"], [1, "filter-panel-header"], [1, "filter-summary-inline"], [1, "summary-value"], [1, "summary-label"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-content"], [1, "filter-group"], [1, "filter-label"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search agents...", 1, "filter-input", 3, "ngModelChange", "input", "ngModel"], [1, "fa-solid", "fa-robot"], [1, "filter-select", 3, "ngModelChange", "ngModel"], [3, "value"], [1, "fa-solid", "fa-sitemap"], [1, "fa-solid", "fa-toggle-on"], [1, "fa-solid", "fa-list-ol"], [1, "fa-solid", "fa-share"], [1, "filter-actions"], ["title", "Reset all filters", 1, "reset-btn", 3, "click"], [1, "fa-solid", "fa-undo"]], template: function AgentFilterPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentFilterPanelComponent, selectors: [["mj-agent-filter-panel"]], inputs: { agents: "agents", filteredAgents: "filteredAgents", filters: "filters" }, outputs: { filtersChange: "filtersChange", filterChange: "filterChange", resetFilters: "resetFilters", closePanel: "closePanel" }, standalone: false, decls: 61, vars: 12, consts: [[1, "filter-panel"], [1, "filter-panel-header"], [1, "filter-summary-inline"], [1, "summary-value"], [1, "summary-label"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-content"], [1, "filter-group"], [1, "filter-label"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search agents...", 1, "filter-input", 3, "ngModelChange", "input", "ngModel"], [1, "fa-solid", "fa-folder-tree"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "All Categories", 3, "ValueChange", "BranchConfig", "Value", "Clearable", "EnableSearch"], [1, "fa-solid", "fa-robot"], [1, "filter-select", 3, "ngModelChange", "ngModel"], [3, "value"], [1, "fa-solid", "fa-sitemap"], [1, "fa-solid", "fa-toggle-on"], [1, "fa-solid", "fa-list-ol"], [1, "fa-solid", "fa-share"], [1, "filter-actions"], ["title", "Reset all filters", 1, "reset-btn", 3, "click"], [1, "fa-solid", "fa-undo"]], template: function AgentFilterPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3");
             i0.ɵɵtext(3, "Agent Filters");
             i0.ɵɵelementEnd();
@@ -153,53 +177,60 @@ export class AgentFilterPanelComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(17, "div", 8)(18, "label", 9);
             i0.ɵɵelement(19, "span", 12);
-            i0.ɵɵtext(20, " Type ");
+            i0.ɵɵtext(20, " Category ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "select", 13);
-            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_21_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.agentType, $event) || (ctx.filters.agentType = $event); return $event; });
-            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_21_listener() { return ctx.onFilterChange(); });
-            i0.ɵɵrepeaterCreate(22, AgentFilterPanelComponent_For_23_Template, 2, 2, "option", 14, _forTrack0);
+            i0.ɵɵelementStart(21, "mj-tree-dropdown", 13);
+            i0.ɵɵlistener("ValueChange", function AgentFilterPanelComponent_Template_mj_tree_dropdown_ValueChange_21_listener($event) { return ctx.onCategoryChange($event); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(24, "div", 8)(25, "label", 9);
-            i0.ɵɵelement(26, "span", 15);
-            i0.ɵɵtext(27, " Parent ");
+            i0.ɵɵelementStart(22, "div", 8)(23, "label", 9);
+            i0.ɵɵelement(24, "span", 14);
+            i0.ɵɵtext(25, " Type ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "select", 13);
-            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_28_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.parentAgent, $event) || (ctx.filters.parentAgent = $event); return $event; });
-            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_28_listener() { return ctx.onFilterChange(); });
-            i0.ɵɵrepeaterCreate(29, AgentFilterPanelComponent_For_30_Template, 2, 2, "option", 14, _forTrack0);
+            i0.ɵɵelementStart(26, "select", 15);
+            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_26_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.agentType, $event) || (ctx.filters.agentType = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_26_listener() { return ctx.onFilterChange(); });
+            i0.ɵɵrepeaterCreate(27, AgentFilterPanelComponent_For_28_Template, 2, 2, "option", 16, _forTrack0);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(31, "div", 8)(32, "label", 9);
-            i0.ɵɵelement(33, "span", 16);
-            i0.ɵɵtext(34, " Status ");
+            i0.ɵɵelementStart(29, "div", 8)(30, "label", 9);
+            i0.ɵɵelement(31, "span", 17);
+            i0.ɵɵtext(32, " Parent ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(35, "select", 13);
-            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_35_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.status, $event) || (ctx.filters.status = $event); return $event; });
-            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_35_listener() { return ctx.onFilterChange(); });
-            i0.ɵɵrepeaterCreate(36, AgentFilterPanelComponent_For_37_Template, 2, 2, "option", 14, _forTrack0);
+            i0.ɵɵelementStart(33, "select", 15);
+            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_33_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.parentAgent, $event) || (ctx.filters.parentAgent = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_33_listener() { return ctx.onFilterChange(); });
+            i0.ɵɵrepeaterCreate(34, AgentFilterPanelComponent_For_35_Template, 2, 2, "option", 16, _forTrack0);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(38, "div", 8)(39, "label", 9);
-            i0.ɵɵelement(40, "span", 17);
-            i0.ɵɵtext(41, " Execution Mode ");
+            i0.ɵɵelementStart(36, "div", 8)(37, "label", 9);
+            i0.ɵɵelement(38, "span", 18);
+            i0.ɵɵtext(39, " Status ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(42, "select", 13);
-            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_42_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.executionMode, $event) || (ctx.filters.executionMode = $event); return $event; });
-            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_42_listener() { return ctx.onFilterChange(); });
-            i0.ɵɵrepeaterCreate(43, AgentFilterPanelComponent_For_44_Template, 2, 2, "option", 14, _forTrack0);
+            i0.ɵɵelementStart(40, "select", 15);
+            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_40_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.status, $event) || (ctx.filters.status = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_40_listener() { return ctx.onFilterChange(); });
+            i0.ɵɵrepeaterCreate(41, AgentFilterPanelComponent_For_42_Template, 2, 2, "option", 16, _forTrack0);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(45, "div", 8)(46, "label", 9);
-            i0.ɵɵelement(47, "span", 18);
-            i0.ɵɵtext(48, " Action Exposure ");
+            i0.ɵɵelementStart(43, "div", 8)(44, "label", 9);
+            i0.ɵɵelement(45, "span", 19);
+            i0.ɵɵtext(46, " Execution Mode ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(49, "select", 13);
-            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_49_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.exposeAsAction, $event) || (ctx.filters.exposeAsAction = $event); return $event; });
-            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_49_listener() { return ctx.onFilterChange(); });
-            i0.ɵɵrepeaterCreate(50, AgentFilterPanelComponent_For_51_Template, 2, 2, "option", 14, _forTrack0);
+            i0.ɵɵelementStart(47, "select", 15);
+            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_47_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.executionMode, $event) || (ctx.filters.executionMode = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_47_listener() { return ctx.onFilterChange(); });
+            i0.ɵɵrepeaterCreate(48, AgentFilterPanelComponent_For_49_Template, 2, 2, "option", 16, _forTrack0);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(52, "div", 19)(53, "button", 20);
-            i0.ɵɵlistener("click", function AgentFilterPanelComponent_Template_button_click_53_listener() { return ctx.resetAllFilters(); });
-            i0.ɵɵelement(54, "span", 21);
-            i0.ɵɵtext(55, " Reset Filters ");
+            i0.ɵɵelementStart(50, "div", 8)(51, "label", 9);
+            i0.ɵɵelement(52, "span", 20);
+            i0.ɵɵtext(53, " Action Exposure ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(54, "select", 15);
+            i0.ɵɵtwoWayListener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_54_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.exposeAsAction, $event) || (ctx.filters.exposeAsAction = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function AgentFilterPanelComponent_Template_select_ngModelChange_54_listener() { return ctx.onFilterChange(); });
+            i0.ɵɵrepeaterCreate(55, AgentFilterPanelComponent_For_56_Template, 2, 2, "option", 16, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(57, "div", 21)(58, "button", 22);
+            i0.ɵɵlistener("click", function AgentFilterPanelComponent_Template_button_click_58_listener() { return ctx.resetAllFilters(); });
+            i0.ɵɵelement(59, "span", 23);
+            i0.ɵɵtext(60, " Reset Filters ");
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(6);
@@ -209,6 +240,8 @@ export class AgentFilterPanelComponent {
             i0.ɵɵadvance(8);
             i0.ɵɵtwoWayProperty("ngModel", ctx.filters.searchTerm);
             i0.ɵɵadvance(5);
+            i0.ɵɵproperty("BranchConfig", ctx.CategoryBranchConfig)("Value", ctx.SelectedCategoryKey)("Clearable", true)("EnableSearch", true);
+            i0.ɵɵadvance(5);
             i0.ɵɵtwoWayProperty("ngModel", ctx.filters.agentType);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.agentTypeOptions);
@@ -228,11 +261,11 @@ export class AgentFilterPanelComponent {
             i0.ɵɵtwoWayProperty("ngModel", ctx.filters.exposeAsAction);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.exposeAsActionOptions);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e5e7eb;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.filter-panel-header[_ngcontent-%COMP%] {\n  padding: 20px;\n  border-bottom: 1px solid #f1f5f9;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: #1e293b;\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n  border-radius: 20px;\n  border: 1px solid #c4b5fd;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: #6366f1;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-label[_ngcontent-%COMP%] {\n  color: #7c3aed;\n  font-weight: 500;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: #94a3b8;\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: #f1f5f9;\n  color: #475569;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6366f1;\n  width: 16px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%], \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid #e2e8f0;\n  border-radius: 10px;\n  font-size: 14px;\n  background: white;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: #334155;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]:focus, \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #6366f1;\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #94a3b8;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid #f1f5f9;\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border: 1px solid #e2e8f0;\n  border-radius: 10px;\n  color: #64748b;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);\n  border-color: #cbd5e1;\n  color: #475569;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: #f8fafc;\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: #cbd5e1;\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: #94a3b8;\n}"] });
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TreeDropdownComponent], styles: ["\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.filter-panel-header[_ngcontent-%COMP%] {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-label[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%], \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]:focus, \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentFilterPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-agent-filter-panel', template: "<div class=\"filter-panel\">\n  <div class=\"filter-panel-header\">\n    <h3>Agent Filters</h3>\n    <div class=\"filter-summary-inline\">\n      <span class=\"summary-value\">{{ filteredAgents.length }}</span>\n      <span class=\"summary-label\">of {{ agents.length }}</span>\n    </div>\n    <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n      <span class=\"fa-solid fa-times\"></span>\n    </button>\n  </div>\n  \n  <div class=\"filter-content\">\n    <!-- Search Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-search\"></span>\n        Name\n      </label>\n      <input \n        type=\"text\"\n        class=\"filter-input\"\n        [(ngModel)]=\"filters.searchTerm\"\n        (ngModelChange)=\"onFilterChange()\"\n        (input)=\"onFilterChange()\"\n        placeholder=\"Search agents...\">\n    </div>\n    \n    <!-- Agent Type Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-robot\"></span>\n        Type\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.agentType\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of agentTypeOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Parent Agent Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-sitemap\"></span>\n        Parent\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.parentAgent\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of parentAgentOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Status Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-toggle-on\"></span>\n        Status\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.status\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of statusOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Execution Mode Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-list-ol\"></span>\n        Execution Mode\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.executionMode\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of executionModeOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Expose As Action Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-share\"></span>\n        Action Exposure\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.exposeAsAction\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of exposeAsActionOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Reset Button -->\n    <div class=\"filter-actions\">\n      <button class=\"reset-btn\" (click)=\"resetAllFilters()\" title=\"Reset all filters\">\n        <span class=\"fa-solid fa-undo\"></span>\n        Reset Filters\n      </button>\n    </div>\n  </div>\n</div>", styles: ["/* Agent Filter Panel - World-Class Design */\n\n.filter-panel {\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e5e7eb;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Header */\n.filter-panel-header {\n  padding: 20px;\n  border-bottom: 1px solid #f1f5f9;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);\n}\n\n.filter-panel-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: #1e293b;\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header .filter-summary-inline {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n  border-radius: 20px;\n  border: 1px solid #c4b5fd;\n}\n\n.filter-panel-header .filter-summary-inline .summary-value {\n  font-weight: 700;\n  color: #6366f1;\n}\n\n.filter-panel-header .filter-summary-inline .summary-label {\n  color: #7c3aed;\n  font-weight: 500;\n}\n\n.filter-panel-header .close-btn {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: #94a3b8;\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header .close-btn:hover {\n  background: #f1f5f9;\n  color: #475569;\n}\n\n.filter-panel-header .close-btn .fa-solid {\n  font-size: 14px;\n}\n\n/* Content Area */\n.filter-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n/* Filter Groups */\n.filter-group {\n  margin-bottom: 24px;\n}\n\n.filter-group .filter-label {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group .filter-label .fa-solid {\n  font-size: 13px;\n  color: #6366f1;\n  width: 16px;\n}\n\n.filter-group .filter-input,\n.filter-group .filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid #e2e8f0;\n  border-radius: 10px;\n  font-size: 14px;\n  background: white;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: #334155;\n}\n\n.filter-group .filter-input:focus,\n.filter-group .filter-select:focus {\n  outline: none;\n  border-color: #6366f1;\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);\n}\n\n.filter-group .filter-input::placeholder {\n  color: #94a3b8;\n}\n\n.filter-group .filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Filter Actions */\n.filter-actions {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid #f1f5f9;\n}\n\n.filter-actions .reset-btn {\n  width: 100%;\n  padding: 12px 16px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border: 1px solid #e2e8f0;\n  border-radius: 10px;\n  color: #64748b;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions .reset-btn:hover {\n  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);\n  border-color: #cbd5e1;\n  color: #475569;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions .reset-btn .fa-solid {\n  font-size: 13px;\n}\n\n/* Scrollbar Styling */\n.filter-content::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content::-webkit-scrollbar-track {\n  background: #f8fafc;\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb {\n  background: #cbd5e1;\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb:hover {\n  background: #94a3b8;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-agent-filter-panel', template: "<div class=\"filter-panel\">\n  <div class=\"filter-panel-header\">\n    <h3>Agent Filters</h3>\n    <div class=\"filter-summary-inline\">\n      <span class=\"summary-value\">{{ filteredAgents.length }}</span>\n      <span class=\"summary-label\">of {{ agents.length }}</span>\n    </div>\n    <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n      <span class=\"fa-solid fa-times\"></span>\n    </button>\n  </div>\n  \n  <div class=\"filter-content\">\n    <!-- Search Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-search\"></span>\n        Name\n      </label>\n      <input \n        type=\"text\"\n        class=\"filter-input\"\n        [(ngModel)]=\"filters.searchTerm\"\n        (ngModelChange)=\"onFilterChange()\"\n        (input)=\"onFilterChange()\"\n        placeholder=\"Search agents...\">\n    </div>\n    \n    <!-- Category Filter (TreeDropdown) -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-folder-tree\"></span>\n        Category\n      </label>\n      <mj-tree-dropdown\n        [BranchConfig]=\"CategoryBranchConfig\"\n        [Value]=\"SelectedCategoryKey\"\n        SelectionMode=\"single\"\n        SelectableTypes=\"branch\"\n        Placeholder=\"All Categories\"\n        [Clearable]=\"true\"\n        [EnableSearch]=\"true\"\n        (ValueChange)=\"onCategoryChange($event)\">\n      </mj-tree-dropdown>\n    </div>\n\n    <!-- Agent Type Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-robot\"></span>\n        Type\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.agentType\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of agentTypeOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Parent Agent Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-sitemap\"></span>\n        Parent\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.parentAgent\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of parentAgentOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Status Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-toggle-on\"></span>\n        Status\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.status\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of statusOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Execution Mode Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-list-ol\"></span>\n        Execution Mode\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.executionMode\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of executionModeOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Expose As Action Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-share\"></span>\n        Action Exposure\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.exposeAsAction\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of exposeAsActionOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Reset Button -->\n    <div class=\"filter-actions\">\n      <button class=\"reset-btn\" (click)=\"resetAllFilters()\" title=\"Reset all filters\">\n        <span class=\"fa-solid fa-undo\"></span>\n        Reset Filters\n      </button>\n    </div>\n  </div>\n</div>", styles: ["/* Agent Filter Panel - World-Class Design */\n\n.filter-panel {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Header */\n.filter-panel-header {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header .filter-summary-inline {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.filter-panel-header .filter-summary-inline .summary-value {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header .filter-summary-inline .summary-label {\n  color: var(--mj-brand-primary-hover);\n  font-weight: 500;\n}\n\n.filter-panel-header .close-btn {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header .close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header .close-btn .fa-solid {\n  font-size: 14px;\n}\n\n/* Content Area */\n.filter-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n/* Filter Groups */\n.filter-group {\n  margin-bottom: 24px;\n}\n\n.filter-group .filter-label {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group .filter-label .fa-solid {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group .filter-input,\n.filter-group .filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group .filter-input:focus,\n.filter-group .filter-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-group .filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group .filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Filter Actions */\n.filter-actions {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions .reset-btn {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions .reset-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions .reset-btn .fa-solid {\n  font-size: 13px;\n}\n\n/* Scrollbar Styling */\n.filter-content::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n"] }]
     }], null, { agents: [{
             type: Input
         }], filteredAgents: [{
@@ -248,5 +281,5 @@ export class AgentFilterPanelComponent {
         }], closePanel: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentFilterPanelComponent, { className: "AgentFilterPanelComponent", filePath: "src/AI/components/agents/agent-filter-panel.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentFilterPanelComponent, { className: "AgentFilterPanelComponent", filePath: "src/AI/components/agents/agent-filter-panel.component.ts", lineNumber: 24 }); })();
 //# sourceMappingURL=agent-filter-panel.component.js.map

package/dist/AI/components/agents/agent-filter-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"agent-filter-panel.component.js","sourceRoot":"","sources":["../../../../src/AI/components/agents/agent-filter-panel.component.ts","../../../../src/AI/components/agents/agent-filter-panel.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';\nimport { MJAIAgentTypeEntity } from '@memberjunction/core-entities';\nimport { AIEngineBase } from '@memberjunction/ai-engine-base';\nimport { MJAIAgentEntityExtended } from '@memberjunction/ai-core-plus';\n\ninterface AgentFilter {\n  searchTerm: string;\n  agentType: string;\n  parentAgent: string;\n  status: string;\n  executionMode: string;\n  exposeAsAction: string;\n}\n\n@Component({\n  standalone: false,\n  selector: 'mj-agent-filter-panel',\n  templateUrl: './agent-filter-panel.component.html',\n  styleUrls: ['./agent-filter-panel.component.css']\n})\nexport class AgentFilterPanelComponent implements OnInit {\n  @Input() agents: MJAIAgentEntityExtended[] = [];\n  @Input() filteredAgents: MJAIAgentEntityExtended[] = [];\n  @Input() filters: AgentFilter = {\n    searchTerm: '',\n    agentType: 'all',\n    parentAgent: 'all',\n    status: 'all',\n    executionMode: 'all',\n    exposeAsAction: 'all'\n  };\n\n  @Output() filtersChange = new EventEmitter<AgentFilter>();\n  @Output() filterChange = new EventEmitter<void>();\n  @Output() resetFilters = new EventEmitter<void>();\n  @Output() closePanel = new EventEmitter<void>();\n\n  public agentTypeOptions: { text: string; value: string }[] = [\n    { text: 'All Types', value: 'all' }\n  ];\n\n  public parentAgentOptions: { text: string; value: string }[] = [\n    { text: 'All Agents', value: 'all' },\n    { text: 'No Parent', value: 'none' }\n  ];\n\n  public statusOptions = [\n    { text: 'All Statuses', value: 'all' },\n    { text: 'Active', value: 'active' },\n    { text: 'Inactive', value: 'inactive' }\n  ];\n\n  public executionModeOptions = [\n    { text: 'All Execution Modes', value: 'all' },\n    { text: 'Sequential', value: 'Sequential' },\n    { text: 'Parallel', value: 'Parallel' }\n  ];\n\n  public exposeAsActionOptions = [\n    { text: 'All Agents', value: 'all' },\n    { text: 'Exposed as Action', value: 'true' },\n    { text: 'Not Exposed', value: 'false' }\n  ];\n\n  async ngOnInit(): Promise<void> {\n    // Load agent types from AIEngineBase\n    try {\n      const aiEngine = AIEngineBase.Instance;\n      if (!aiEngine.Loaded) {\n        await aiEngine.Config();\n      }\n      \n      // Add agent types to options\n      const agentTypes = aiEngine.AgentTypes;\n      agentTypes.forEach((type: MJAIAgentTypeEntity) => {\n        this.agentTypeOptions.push({\n          text: type.Name,\n          value: type.ID\n        });\n      });\n\n      // Add parent agents to options (only those without parents themselves)\n      const parentAgents = this.agents.filter(agent => !agent.ParentID);\n      parentAgents.forEach(agent => {\n        this.parentAgentOptions.push({\n          text: agent.Name || 'Unnamed Agent',\n          value: agent.ID\n        });\n      });\n    } catch (error) {\n      console.error('Error loading agent metadata:', error);\n    }\n  }\n\n  public onFilterChange(): void {\n    this.filtersChange.emit(this.filters);\n    this.filterChange.emit();\n  }\n\n  public resetAllFilters(): void {\n    this.resetFilters.emit();\n  }\n\n  public toggleFilterPanel(): void {\n    this.closePanel.emit();\n  }\n}","<div class=\"filter-panel\">\n  <div class=\"filter-panel-header\">\n    <h3>Agent Filters</h3>\n    <div class=\"filter-summary-inline\">\n      <span class=\"summary-value\">{{ filteredAgents.length }}</span>\n      <span class=\"summary-label\">of {{ agents.length }}</span>\n    </div>\n    <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n      <span class=\"fa-solid fa-times\"></span>\n    </button>\n  </div>\n  \n  <div class=\"filter-content\">\n    <!-- Search Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-search\"></span>\n        Name\n      </label>\n      <input \n        type=\"text\"\n        class=\"filter-input\"\n        [(ngModel)]=\"filters.searchTerm\"\n        (ngModelChange)=\"onFilterChange()\"\n        (input)=\"onFilterChange()\"\n        placeholder=\"Search agents...\">\n    </div>\n    \n    <!-- Agent Type Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-robot\"></span>\n        Type\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.agentType\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of agentTypeOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Parent Agent Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-sitemap\"></span>\n        Parent\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.parentAgent\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of parentAgentOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Status Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-toggle-on\"></span>\n        Status\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.status\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of statusOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Execution Mode Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-list-ol\"></span>\n        Execution Mode\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.executionMode\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of executionModeOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Expose As Action Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-share\"></span>\n        Action Exposure\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.exposeAsAction\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of exposeAsActionOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Reset Button -->\n    <div class=\"filter-actions\">\n      <button class=\"reset-btn\" (click)=\"resetAllFilters()\" title=\"Reset all filters\">\n        <span class=\"fa-solid fa-undo\"></span>\n        Reset Filters\n      </button>\n    </div>\n  </div>\n</div>"]}
+{"version":3,"file":"agent-filter-panel.component.js","sourceRoot":"","sources":["../../../../src/AI/components/agents/agent-filter-panel.component.ts","../../../../src/AI/components/agents/agent-filter-panel.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';\nimport { CompositeKey } from '@memberjunction/core';\nimport { MJAIAgentTypeEntity } from '@memberjunction/core-entities';\nimport { AIEngineBase } from '@memberjunction/ai-engine-base';\nimport { MJAIAgentEntityExtended } from '@memberjunction/ai-core-plus';\nimport { TreeBranchConfig } from '@memberjunction/ng-trees';\n\ninterface AgentFilter {\n  searchTerm: string;\n  agentType: string;\n  parentAgent: string;\n  status: string;\n  executionMode: string;\n  exposeAsAction: string;\n  categoryId: string;\n}\n\n@Component({\n  standalone: false,\n  selector: 'mj-agent-filter-panel',\n  templateUrl: './agent-filter-panel.component.html',\n  styleUrls: ['./agent-filter-panel.component.css']\n})\nexport class AgentFilterPanelComponent implements OnInit {\n  @Input() agents: MJAIAgentEntityExtended[] = [];\n  @Input() filteredAgents: MJAIAgentEntityExtended[] = [];\n  @Input() filters: AgentFilter = {\n    searchTerm: '',\n    agentType: 'all',\n    parentAgent: 'all',\n    status: 'all',\n    executionMode: 'all',\n    exposeAsAction: 'all',\n    categoryId: 'all'\n  };\n\n  @Output() filtersChange = new EventEmitter<AgentFilter>();\n  @Output() filterChange = new EventEmitter<void>();\n  @Output() resetFilters = new EventEmitter<void>();\n  @Output() closePanel = new EventEmitter<void>();\n\n  public agentTypeOptions: { text: string; value: string }[] = [\n    { text: 'All Types', value: 'all' }\n  ];\n\n  public parentAgentOptions: { text: string; value: string }[] = [\n    { text: 'All Agents', value: 'all' },\n    { text: 'No Parent', value: 'none' }\n  ];\n\n  public statusOptions = [\n    { text: 'All Statuses', value: 'all' },\n    { text: 'Active', value: 'active' },\n    { text: 'Inactive', value: 'inactive' }\n  ];\n\n  public executionModeOptions = [\n    { text: 'All Execution Modes', value: 'all' },\n    { text: 'Sequential', value: 'Sequential' },\n    { text: 'Parallel', value: 'Parallel' }\n  ];\n\n  public exposeAsActionOptions = [\n    { text: 'All Agents', value: 'all' },\n    { text: 'Exposed as Action', value: 'true' },\n    { text: 'Not Exposed', value: 'false' }\n  ];\n\n  /** TreeDropdown configuration for agent categories */\n  public CategoryBranchConfig: TreeBranchConfig = {\n    EntityName: 'MJ: AI Agent Categories',\n    DisplayField: 'Name',\n    ParentIDField: 'ParentID',\n    DefaultIcon: 'fa-solid fa-folder',\n    OrderBy: 'Name ASC',\n    DescriptionField: 'Description'\n  };\n\n  /** Current category selection for the tree dropdown */\n  public SelectedCategoryKey: CompositeKey | null = null;\n\n  async ngOnInit(): Promise<void> {\n    // Load agent types from AIEngineBase\n    try {\n      const aiEngine = AIEngineBase.Instance;\n      if (!aiEngine.Loaded) {\n        await aiEngine.Config();\n      }\n      \n      // Add agent types to options\n      const agentTypes = aiEngine.AgentTypes;\n      agentTypes.forEach((type: MJAIAgentTypeEntity) => {\n        this.agentTypeOptions.push({\n          text: type.Name,\n          value: type.ID\n        });\n      });\n\n      // Add parent agents to options (only those without parents themselves)\n      const parentAgents = this.agents.filter(agent => !agent.ParentID);\n      parentAgents.forEach(agent => {\n        this.parentAgentOptions.push({\n          text: agent.Name || 'Unnamed Agent',\n          value: agent.ID\n        });\n      });\n    } catch (error) {\n      console.error('Error loading agent metadata:', error);\n    }\n  }\n\n  public onFilterChange(): void {\n    this.filtersChange.emit(this.filters);\n    this.filterChange.emit();\n  }\n\n  public onCategoryChange(value: CompositeKey | CompositeKey[] | null): void {\n    if (value && !Array.isArray(value)) {\n      const idValue = value.KeyValuePairs?.find(kv => kv.FieldName === 'ID')?.Value;\n      this.filters.categoryId = idValue ?? 'all';\n    } else {\n      this.filters.categoryId = 'all';\n    }\n    this.SelectedCategoryKey = Array.isArray(value) ? null : value;\n    this.onFilterChange();\n  }\n\n  public resetAllFilters(): void {\n    this.resetFilters.emit();\n  }\n\n  public toggleFilterPanel(): void {\n    this.closePanel.emit();\n  }\n}","<div class=\"filter-panel\">\n  <div class=\"filter-panel-header\">\n    <h3>Agent Filters</h3>\n    <div class=\"filter-summary-inline\">\n      <span class=\"summary-value\">{{ filteredAgents.length }}</span>\n      <span class=\"summary-label\">of {{ agents.length }}</span>\n    </div>\n    <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n      <span class=\"fa-solid fa-times\"></span>\n    </button>\n  </div>\n  \n  <div class=\"filter-content\">\n    <!-- Search Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-search\"></span>\n        Name\n      </label>\n      <input \n        type=\"text\"\n        class=\"filter-input\"\n        [(ngModel)]=\"filters.searchTerm\"\n        (ngModelChange)=\"onFilterChange()\"\n        (input)=\"onFilterChange()\"\n        placeholder=\"Search agents...\">\n    </div>\n    \n    <!-- Category Filter (TreeDropdown) -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-folder-tree\"></span>\n        Category\n      </label>\n      <mj-tree-dropdown\n        [BranchConfig]=\"CategoryBranchConfig\"\n        [Value]=\"SelectedCategoryKey\"\n        SelectionMode=\"single\"\n        SelectableTypes=\"branch\"\n        Placeholder=\"All Categories\"\n        [Clearable]=\"true\"\n        [EnableSearch]=\"true\"\n        (ValueChange)=\"onCategoryChange($event)\">\n      </mj-tree-dropdown>\n    </div>\n\n    <!-- Agent Type Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-robot\"></span>\n        Type\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.agentType\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of agentTypeOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Parent Agent Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-sitemap\"></span>\n        Parent\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.parentAgent\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of parentAgentOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Status Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-toggle-on\"></span>\n        Status\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.status\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of statusOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Execution Mode Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-list-ol\"></span>\n        Execution Mode\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.executionMode\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of executionModeOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Expose As Action Filter -->\n    <div class=\"filter-group\">\n      <label class=\"filter-label\">\n        <span class=\"fa-solid fa-share\"></span>\n        Action Exposure\n      </label>\n      <select \n        class=\"filter-select\"\n        [(ngModel)]=\"filters.exposeAsAction\"\n        (ngModelChange)=\"onFilterChange()\">\n        @for (option of exposeAsActionOptions; track option.value) {\n          <option [value]=\"option.value\">{{ option.text }}</option>\n        }\n      </select>\n    </div>\n    \n    <!-- Reset Button -->\n    <div class=\"filter-actions\">\n      <button class=\"reset-btn\" (click)=\"resetAllFilters()\" title=\"Reset all filters\">\n        <span class=\"fa-solid fa-undo\"></span>\n        Reset Filters\n      </button>\n    </div>\n  </div>\n</div>"]}

package/dist/AI/components/charts/performance-heatmap.component.d.ts

@@ -32,6 +32,7 @@ export declare class PerformanceHeatmapComponent implements OnInit, AfterViewIni
     private height;
     private margin;
     private defaultColorScheme;
+    private getColorScheme;
     selectedMetric: string;
     processedData: HeatmapData[];
     uniqueAgents: string[];

package/dist/AI/components/charts/performance-heatmap.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"performance-heatmap.component.d.ts","sourceRoot":"","sources":["../../../../src/AI/components/charts/performance-heatmap.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,aAAa,EAAa,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAGpI,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,qBA8Ma,2BAA4B,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS;IACpF,IAAI,EAAE,WAAW,EAAE,CAAM;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,aAAa,CAAM;IAEK,QAAQ,EAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC9B,cAAc,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE3F,OAAO,CAAC,GAAG,CAAsD;IACjE,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAAgD;IAG9D,OAAO,CAAC,kBAAkB,CAAuG;IAGjI,cAAc,SAAiB;IAC/B,aAAa,EAAE,WAAW,EAAE,CAAM;IAClC,YAAY,EAAE,MAAM,EAAE,CAAM;IAC5B,YAAY,EAAE,MAAM,EAAE,CAAM;IAC5B,QAAQ,SAAK;IACb,QAAQ,SAAK;IAEb,QAAQ;IAIR,eAAe;IAMf,WAAW,CAAC,OAAO,EAAE,aAAa;IAWlC,WAAW;IAIX,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,yBAAyB;IAYjC,OAAO,CAAC,gBAAgB;IAyBxB,WAAW;IAYX,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,SAAS;IA8DjB,OAAO,CAAC,QAAQ;IAkChB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,YAAY;IAqBpB,cAAc,IAAI,MAAM;IAYxB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;yCAlW7B,2BAA2B;2CAA3B,2BAA2B;CA6WvC"}
+{"version":3,"file":"performance-heatmap.component.d.ts","sourceRoot":"","sources":["../../../../src/AI/components/charts/performance-heatmap.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,aAAa,EAAa,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAGpI,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,qBA8Ma,2BAA4B,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS;IACpF,IAAI,EAAE,WAAW,EAAE,CAAM;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,aAAa,CAAM;IAEK,QAAQ,EAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC9B,cAAc,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE3F,OAAO,CAAC,GAAG,CAAsD;IACjE,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAAgD;IAG9D,OAAO,CAAC,kBAAkB,CAAgB;IAE1C,OAAO,CAAC,cAAc;IAqBtB,cAAc,SAAiB;IAC/B,aAAa,EAAE,WAAW,EAAE,CAAM;IAClC,YAAY,EAAE,MAAM,EAAE,CAAM;IAC5B,YAAY,EAAE,MAAM,EAAE,CAAM;IAC5B,QAAQ,SAAK;IACb,QAAQ,SAAK;IAEb,QAAQ;IAIR,eAAe;IAMf,WAAW,CAAC,OAAO,EAAE,aAAa;IAWlC,WAAW;IAIX,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,yBAAyB;IAYjC,OAAO,CAAC,gBAAgB;IAyBxB,WAAW;IAYX,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,SAAS;IA8DjB,OAAO,CAAC,QAAQ;IAkChB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,YAAY;IAqBpB,cAAc,IAAI,MAAM;IAYxB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;yCAzX7B,2BAA2B;2CAA3B,2BAA2B;CAoYvC"}

package/dist/AI/components/charts/performance-heatmap.component.js

@@ -17,7 +17,26 @@ export class PerformanceHeatmapComponent {
     height = 0;
     margin = { top: 40, right: 20, bottom: 60, left: 80 };
     // Chart configuration
-    defaultColorScheme = ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'];
+    defaultColorScheme = [];
+    getColorScheme() {
+        const style = getComputedStyle(document.documentElement);
+        const surface = style.getPropertyValue('--mj-bg-surface').trim() || '#ffffff';
+        const brandPrimary = style.getPropertyValue('--mj-brand-primary').trim() || '#0076b6';
+        // Build a 9-stop scale from surface white through brand primary to dark brand
+        const toSurface = d3.interpolateRgb(surface, brandPrimary);
+        const toDark = d3.interpolateRgb(brandPrimary, d3.rgb(brandPrimary).darker(2).formatHex());
+        return [
+            surface,
+            toSurface(0.15),
+            toSurface(0.3),
+            toSurface(0.5),
+            toSurface(0.7),
+            toSurface(0.85),
+            brandPrimary,
+            toDark(0.5),
+            toDark(1),
+        ];
+    }
     // Data processing
     selectedMetric = 'performance';
     processedData = [];
@@ -221,7 +240,10 @@ export class PerformanceHeatmapComponent {
         // Convert color to RGB and calculate luminance
         const rgb = d3.rgb(backgroundColor);
         const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
-        return luminance > 0.5 ? '#333' : '#fff';
+        const style = getComputedStyle(document.documentElement);
+        const darkText = style.getPropertyValue('--mj-text-primary').trim() || '#1e293b';
+        const lightText = style.getPropertyValue('--mj-text-inverse').trim() || '#ffffff';
+        return luminance > 0.5 ? darkText : lightText;
     }
     formatCellValue(value) {
         switch (this.selectedMetric) {
@@ -264,7 +286,7 @@ export class PerformanceHeatmapComponent {
             .attr('x1', '0%')
             .attr('x2', '100%');
         // Add color stops
-        const colorScheme = this.config.colorScheme || this.defaultColorScheme;
+        const colorScheme = this.config.colorScheme || this.getColorScheme();
         colorScheme.forEach((color, i) => {
             gradient.append('stop')
                 .attr('offset', `${(i / (colorScheme.length - 1)) * 100}%`)
@@ -371,7 +393,7 @@ export class PerformanceHeatmapComponent {
             i0.ɵɵtextInterpolate(ctx.formatLegendValue(ctx.minValue));
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.formatLegendValue(ctx.maxValue));
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: [".performance-heatmap[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n      flex-wrap: wrap;\n      gap: 12px;\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .chart-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n    }\n\n    .metric-selector[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .metric-selector[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .metric-selector[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 4px 8px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 11px;\n      background: white;\n    }\n\n    .chart-container[_ngcontent-%COMP%] {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n      min-height: 200px;\n    }\n\n    .chart-tooltip[_ngcontent-%COMP%] {\n      position: absolute;\n      background: rgba(0, 0, 0, 0.85);\n      color: white;\n      padding: 10px 12px;\n      border-radius: 4px;\n      font-size: 12px;\n      pointer-events: none;\n      z-index: 1000;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n      max-width: 250px;\n    }\n\n    .chart-legend[_ngcontent-%COMP%] {\n      margin-top: 16px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      font-size: 11px;\n    }\n\n    .legend-title[_ngcontent-%COMP%] {\n      color: #666;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .legend-gradient[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 16px;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .legend-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      min-width: 80px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    \n\n    [_nghost-%COMP%]     .heatmap-cell {\n      stroke: white;\n      stroke-width: 1;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    [_nghost-%COMP%]     .heatmap-cell:hover {\n      stroke: #333;\n      stroke-width: 2;\n    }\n\n    [_nghost-%COMP%]     .axis {\n      font-size: 10px;\n      color: #666;\n    }\n\n    [_nghost-%COMP%]     .axis path {\n      stroke: #ddd;\n    }\n\n    [_nghost-%COMP%]     .axis .tick line {\n      stroke: #ddd;\n    }\n\n    [_nghost-%COMP%]     .axis .tick text {\n      fill: #666;\n    }\n\n    [_nghost-%COMP%]     .axis-label {\n      font-size: 11px;\n      font-weight: 500;\n      fill: #333;\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: #999;\n      gap: 12px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: #ddd;\n    }\n\n    @media (max-width: 768px) {\n      .chart-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .chart-legend[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n      }\n      \n      .legend-gradient[_ngcontent-%COMP%] {\n        width: 100%;\n        max-width: 200px;\n      }\n    }"] });
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: [".performance-heatmap[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n      flex-wrap: wrap;\n      gap: 12px;\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .chart-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n    }\n\n    .metric-selector[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .metric-selector[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .metric-selector[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 4px 8px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 11px;\n      background: var(--mj-bg-surface);\n    }\n\n    .chart-container[_ngcontent-%COMP%] {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n      min-height: 200px;\n    }\n\n    .chart-tooltip[_ngcontent-%COMP%] {\n      position: absolute;\n      background: rgba(0, 0, 0, 0.85);\n      color: var(--mj-text-inverse);\n      padding: 10px 12px;\n      border-radius: 4px;\n      font-size: 12px;\n      pointer-events: none;\n      z-index: 1000;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n      max-width: 250px;\n    }\n\n    .chart-legend[_ngcontent-%COMP%] {\n      margin-top: 16px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      font-size: 11px;\n    }\n\n    .legend-title[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .legend-gradient[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 16px;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .legend-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      min-width: 80px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    \n\n    [_nghost-%COMP%]     .heatmap-cell {\n      stroke: var(--mj-bg-surface);\n      stroke-width: 1;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    [_nghost-%COMP%]     .heatmap-cell:hover {\n      stroke: var(--mj-text-primary);\n      stroke-width: 2;\n    }\n\n    [_nghost-%COMP%]     .axis {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    [_nghost-%COMP%]     .axis path {\n      stroke: var(--mj-border-default);\n    }\n\n    [_nghost-%COMP%]     .axis .tick line {\n      stroke: var(--mj-border-default);\n    }\n\n    [_nghost-%COMP%]     .axis .tick text {\n      fill: var(--mj-text-muted);\n    }\n\n    [_nghost-%COMP%]     .axis-label {\n      font-size: 11px;\n      font-weight: 500;\n      fill: var(--mj-text-primary);\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-disabled);\n      gap: 12px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: var(--mj-border-default);\n    }\n\n    @media (max-width: 768px) {\n      .chart-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .chart-legend[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n      }\n      \n      .legend-gradient[_ngcontent-%COMP%] {\n        width: 100%;\n        max-width: 200px;\n      }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PerformanceHeatmapComponent, [{
         type: Component,
@@ -405,7 +427,7 @@ export class PerformanceHeatmapComponent {
         </div>
       </div>
     </div>
-  `, styles: ["\n    .performance-heatmap {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n      flex-wrap: wrap;\n      gap: 12px;\n    }\n\n    .chart-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .chart-controls {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n    }\n\n    .metric-selector {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .metric-selector label {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .metric-selector select {\n      padding: 4px 8px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 11px;\n      background: white;\n    }\n\n    .chart-container {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n      min-height: 200px;\n    }\n\n    .chart-tooltip {\n      position: absolute;\n      background: rgba(0, 0, 0, 0.85);\n      color: white;\n      padding: 10px 12px;\n      border-radius: 4px;\n      font-size: 12px;\n      pointer-events: none;\n      z-index: 1000;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n      max-width: 250px;\n    }\n\n    .chart-legend {\n      margin-top: 16px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      font-size: 11px;\n    }\n\n    .legend-title {\n      color: #666;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .legend-gradient {\n      flex: 1;\n      height: 16px;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .legend-labels {\n      display: flex;\n      justify-content: space-between;\n      min-width: 80px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    /* Chart styles */\n    :host ::ng-deep .heatmap-cell {\n      stroke: white;\n      stroke-width: 1;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    :host ::ng-deep .heatmap-cell:hover {\n      stroke: #333;\n      stroke-width: 2;\n    }\n\n    :host ::ng-deep .axis {\n      font-size: 10px;\n      color: #666;\n    }\n\n    :host ::ng-deep .axis path {\n      stroke: #ddd;\n    }\n\n    :host ::ng-deep .axis .tick line {\n      stroke: #ddd;\n    }\n\n    :host ::ng-deep .axis .tick text {\n      fill: #666;\n    }\n\n    :host ::ng-deep .axis-label {\n      font-size: 11px;\n      font-weight: 500;\n      fill: #333;\n    }\n\n    .no-data {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: #999;\n      gap: 12px;\n    }\n\n    .no-data i {\n      font-size: 32px;\n      color: #ddd;\n    }\n\n    @media (max-width: 768px) {\n      .chart-header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .chart-legend {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n      }\n      \n      .legend-gradient {\n        width: 100%;\n        max-width: 200px;\n      }\n    }\n  "] }]
+  `, styles: ["\n    .performance-heatmap {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n      flex-wrap: wrap;\n      gap: 12px;\n    }\n\n    .chart-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .chart-controls {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n    }\n\n    .metric-selector {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .metric-selector label {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .metric-selector select {\n      padding: 4px 8px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 11px;\n      background: var(--mj-bg-surface);\n    }\n\n    .chart-container {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n      min-height: 200px;\n    }\n\n    .chart-tooltip {\n      position: absolute;\n      background: rgba(0, 0, 0, 0.85);\n      color: var(--mj-text-inverse);\n      padding: 10px 12px;\n      border-radius: 4px;\n      font-size: 12px;\n      pointer-events: none;\n      z-index: 1000;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n      max-width: 250px;\n    }\n\n    .chart-legend {\n      margin-top: 16px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      font-size: 11px;\n    }\n\n    .legend-title {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .legend-gradient {\n      flex: 1;\n      height: 16px;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .legend-labels {\n      display: flex;\n      justify-content: space-between;\n      min-width: 80px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    /* Chart styles */\n    :host ::ng-deep .heatmap-cell {\n      stroke: var(--mj-bg-surface);\n      stroke-width: 1;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    :host ::ng-deep .heatmap-cell:hover {\n      stroke: var(--mj-text-primary);\n      stroke-width: 2;\n    }\n\n    :host ::ng-deep .axis {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    :host ::ng-deep .axis path {\n      stroke: var(--mj-border-default);\n    }\n\n    :host ::ng-deep .axis .tick line {\n      stroke: var(--mj-border-default);\n    }\n\n    :host ::ng-deep .axis .tick text {\n      fill: var(--mj-text-muted);\n    }\n\n    :host ::ng-deep .axis-label {\n      font-size: 11px;\n      font-weight: 500;\n      fill: var(--mj-text-primary);\n    }\n\n    .no-data {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-disabled);\n      gap: 12px;\n    }\n\n    .no-data i {\n      font-size: 32px;\n      color: var(--mj-border-default);\n    }\n\n    @media (max-width: 768px) {\n      .chart-header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .chart-legend {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n      }\n      \n      .legend-gradient {\n        width: 100%;\n        max-width: 200px;\n      }\n    }\n  "] }]
     }], null, { data: [{
             type: Input
         }], title: [{