@memberjunction/ng-dashboards 2.127.0 → 2.129.0

package/dist/AI/components/system/system-configuration.component.js

@@ -5,29 +5,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component } from '@angular/core';
-import { RunView, LogError, LogStatus, CompositeKey } from '@memberjunction/core';
+import { LogError, LogStatus, CompositeKey } from '@memberjunction/core';
+import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { RegisterClass } from '@memberjunction/global';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
-import * as i2 from "@progress/kendo-angular-layout";
-import * as i3 from "@memberjunction/ng-shared-generic";
-import * as i4 from "./system-config-filter-panel.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-layout";
+import * as i4 from "@memberjunction/ng-shared-generic";
+import * as i5 from "./system-config-filter-panel.component";
 const _forTrack0 = ($index, $item) => $item.ID;
-function SystemConfigurationComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function SystemConfigurationComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Hide Filters ");
 } }
-function SystemConfigurationComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function SystemConfigurationComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Show Filters ");
 } }
-function SystemConfigurationComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵelement(1, "mj-loading", 19);
+function SystemConfigurationComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "mj-loading", 26);
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "p", 20);
-    i0.ɵɵelement(2, "i", 21);
+function SystemConfigurationComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "p", 27);
+    i0.ɵɵelement(2, "i", 28);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -35,9 +37,9 @@ function SystemConfigurationComponent_Conditional_23_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.error, " ");
 } }
-function SystemConfigurationComponent_Conditional_24_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵelement(1, "i", 24);
+function SystemConfigurationComponent_Conditional_29_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵelement(1, "i", 4);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No configurations found");
     i0.ɵɵelementEnd();
@@ -45,14 +47,14 @@ function SystemConfigurationComponent_Conditional_24_Conditional_0_Template(rf,
     i0.ɵɵtext(5, "No AI configurations match your current filters. Try adjusting your search criteria or create a new configuration.");
     i0.ɵɵelementEnd()();
 } }
-function SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
-    i0.ɵɵelement(1, "i", 44);
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵtext(2, " Default ");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 34);
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 44);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -60,82 +62,539 @@ function SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Conditi
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(config_r3.Description);
 } }
-function SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 35);
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 45);
     i0.ɵɵtext(1, "No description provided");
     i0.ɵɵelementEnd();
 } }
-function SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 41);
-    i0.ɵɵelement(1, "i", 44);
-    i0.ɵɵtext(2, " Set Default ");
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 64);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_22_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const config_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); ctx_r0.onOpenPrompt(config_r3.DefaultPromptForContextCompressionID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 65)(2, "div", 66);
+    i0.ɵɵelement(3, "i", 67);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 68)(5, "span", 69);
+    i0.ɵɵtext(6, "Context Compression");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 70);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelement(9, "i", 71);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(config_r3.compressionPrompt.Name);
 } }
-function SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 26)(2, "div", 27)(3, "div", 28);
-    i0.ɵɵelement(4, "i");
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵtext(1, "No compression prompt configured");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 29)(6, "h4", 30);
-    i0.ɵɵtext(7);
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 64);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_24_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const config_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); ctx_r0.onOpenPrompt(config_r3.DefaultPromptForContextSummarizationID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 65)(2, "div", 66);
+    i0.ɵɵelement(3, "i", 72);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 68)(5, "span", 69);
+    i0.ɵɵtext(6, "Context Summarization");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 70);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelement(9, "i", 71);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(config_r3.summarizationPrompt.Name);
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵtext(1, "No summarization prompt configured");
+    i0.ɵɵelementEnd();
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_For_6_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_For_6_Template_div_click_0_listener($event) { const param_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(7); ctx_r0.onOpenParam(param_r7); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 77)(2, "div", 78);
+    i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 31);
-    i0.ɵɵtemplate(9, SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Conditional_9_Template, 3, 0, "span", 32);
+    i0.ɵɵelementStart(4, "div", 79)(5, "span", 80);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 81);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(10, "div");
+    i0.ɵɵelementStart(9, "span", 82);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const param_r7 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(7);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(ctx_r0.getParamTypeIcon(param_r7.Type));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(param_r7.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(param_r7.Type);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.formatParamValue(param_r7));
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 63)(1, "h5", 58);
+    i0.ɵɵelement(2, "i", 73);
+    i0.ɵɵtext(3, " Configuration Parameters ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 74);
+    i0.ɵɵrepeaterCreate(5, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_For_6_Template, 11, 5, "div", 75, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const config_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵrepeater(config_r3.params);
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 63)(1, "h5", 58);
+    i0.ɵɵelement(2, "i", 73);
+    i0.ɵɵtext(3, " Configuration Parameters ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 83);
+    i0.ɵɵtext(5, "No parameters configured");
+    i0.ɵɵelementEnd()();
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 53)(2, "div", 54)(3, "span", 55);
+    i0.ɵɵtext(4, "Parameters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 56);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 54)(8, "span", 55);
+    i0.ɵɵtext(9, "Created");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 56);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 33);
-    i0.ɵɵtemplate(13, SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Conditional_13_Template, 2, 1, "p", 34)(14, SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Conditional_14_Template, 2, 0, "p", 35);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 36);
-    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Template_div_click_15_listener($event) { i0.ɵɵrestoreView(_r2); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(16, "button", 37);
-    i0.ɵɵelement(17, "i", 38);
-    i0.ɵɵtext(18, " View ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "button", 39);
-    i0.ɵɵelement(20, "i", 40);
-    i0.ɵɵtext(21, " Configure ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(22, SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Conditional_22_Template, 3, 0, "button", 41);
-    i0.ɵɵelementStart(23, "button", 42);
-    i0.ɵɵelement(24, "i", 43);
-    i0.ɵɵtext(25, " Delete ");
+    i0.ɵɵelementStart(12, "div", 54)(13, "span", 55);
+    i0.ɵɵtext(14, "Updated");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span", 56);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "div", 57)(18, "h5", 58);
+    i0.ɵɵelement(19, "i", 59);
+    i0.ɵɵtext(20, " Linked Prompts ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 60);
+    i0.ɵɵtemplate(22, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_22_Template, 10, 1, "div", 61)(23, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_23_Template, 2, 0, "div", 62)(24, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_24_Template, 10, 1, "div", 61)(25, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_25_Template, 2, 0, "div", 62);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(26, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_26_Template, 7, 0, "div", 63)(27, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Conditional_27_Template, 6, 0, "div", 63);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate((config_r3.params == null ? null : config_r3.params.length) || 0);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.formatDate(config_r3.__mj_CreatedAt));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.formatDate(config_r3.__mj_UpdatedAt));
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(config_r3.compressionPrompt ? 22 : 23);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(config_r3.summarizationPrompt ? 24 : 25);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(config_r3.params && config_r3.params.length > 0 ? 26 : 27);
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 33)(1, "div", 34);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template_div_click_1_listener() { const config_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleExpanded(config_r3)); });
+    i0.ɵɵelementStart(2, "div", 35)(3, "div", 36);
+    i0.ɵɵelement(4, "i", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 37)(6, "h4", 38);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 39);
+    i0.ɵɵtemplate(9, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_9_Template, 3, 0, "span", 40);
+    i0.ɵɵelementStart(10, "span", 41);
+    i0.ɵɵelement(11, "i");
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelement(13, "i", 42);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 43);
+    i0.ɵɵtemplate(15, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_15_Template, 2, 1, "p", 44)(16, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 0, "p", 45)(17, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 28, 6, "div", 46);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 47);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template_div_click_18_listener($event) { i0.ɵɵrestoreView(_r2); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(19, "button", 48);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template_button_click_19_listener($event) { const config_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.showConfigDetails(config_r3, $event)); });
+    i0.ɵɵelement(20, "i", 49);
+    i0.ɵɵtext(21, " Details ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "button", 50);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template_button_click_22_listener() { const config_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onOpenConfiguration(config_r3)); });
+    i0.ɵɵelement(23, "i", 51);
+    i0.ɵɵtext(24, " Configure ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const config_r3 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(4);
-    i0.ɵɵclassMap(ctx_r0.getConfigIcon());
-    i0.ɵɵadvance(3);
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("expanded", config_r3.isExpanded);
+    i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(config_r3.Name);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(config_r3.IsDefault ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassMapInterpolate1("status-badge status-", config_r3.Status.toLowerCase(), "");
+    i0.ɵɵproperty("ngClass", ctx_r0.getStatusClass(config_r3.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.getStatusIcon(config_r3.Status));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", config_r3.Status, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("rotated", config_r3.isExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(config_r3.Description ? 15 : 16);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(config_r3.Description ? 13 : 14);
-    i0.ɵɵadvance(9);
-    i0.ɵɵconditional(!config_r3.IsDefault ? 22 : -1);
+    i0.ɵɵconditional(config_r3.isExpanded ? 17 : -1);
 } }
-function SystemConfigurationComponent_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵrepeaterCreate(1, SystemConfigurationComponent_Conditional_24_Conditional_1_For_2_Template, 26, 10, "div", 25, _forTrack0);
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵrepeaterCreate(1, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_For_2_Template, 25, 12, "div", 32, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.filteredConfigurations);
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 91);
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵtext(2, " Default ");
+    i0.ɵɵelementEnd();
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(config_r10.Description);
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 88)(3, "div", 89);
+    i0.ɵɵelement(4, "i", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div")(6, "div", 90);
+    i0.ɵɵtext(7);
+    i0.ɵɵtemplate(8, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Conditional_8_Template, 3, 0, "span", 91);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Conditional_9_Template, 2, 1, "div", 92);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "td")(11, "span", 41);
+    i0.ɵɵelement(12, "i");
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "td");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "td");
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "td")(19, "div", 93)(20, "button", 94);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Template_button_click_20_listener() { const config_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.showConfigDetails(config_r10)); });
+    i0.ɵɵelement(21, "i", 49);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "button", 95);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Template_button_click_22_listener() { const config_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onOpenConfiguration(config_r10)); });
+    i0.ɵɵelement(23, "i", 51);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const config_r10 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1(" ", config_r10.Name, " ");
     i0.ɵɵadvance();
+    i0.ɵɵconditional(config_r10.IsDefault ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(config_r10.Description ? 9 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.getStatusClass(config_r10.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.getStatusIcon(config_r10.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", config_r10.Status, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate((config_r10.params == null ? null : config_r10.params.length) || 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.formatDate(config_r10.__mj_UpdatedAt));
+} }
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 31)(1, "table", 84)(2, "thead")(3, "tr")(4, "th", 85);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.sortBy("Name")); });
+    i0.ɵɵelementStart(5, "span", 86);
+    i0.ɵɵtext(6, " Configuration ");
+    i0.ɵɵelement(7, "i", 87);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "th", 85);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template_th_click_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.sortBy("Status")); });
+    i0.ɵɵelementStart(9, "span", 86);
+    i0.ɵɵtext(10, " Status ");
+    i0.ɵɵelement(11, "i", 87);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "th", 85);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template_th_click_12_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.sortBy("Parameters")); });
+    i0.ɵɵelementStart(13, "span", 86);
+    i0.ɵɵtext(14, " Parameters ");
+    i0.ɵɵelement(15, "i", 87);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "th", 85);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template_th_click_16_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.sortBy("Updated")); });
+    i0.ɵɵelementStart(17, "span", 86);
+    i0.ɵɵtext(18, " Updated ");
+    i0.ɵɵelement(19, "i", 87);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "th");
+    i0.ɵɵtext(21, "Actions");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(22, "tbody");
+    i0.ɵɵrepeaterCreate(23, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_For_24_Template, 24, 9, "tr", null, _forTrack0);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("sorted", ctx_r0.sortColumn === "Name")("desc", ctx_r0.sortColumn === "Name" && ctx_r0.sortDirection === "desc");
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("sorted", ctx_r0.sortColumn === "Status")("desc", ctx_r0.sortColumn === "Status" && ctx_r0.sortDirection === "desc");
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("sorted", ctx_r0.sortColumn === "Parameters")("desc", ctx_r0.sortColumn === "Parameters" && ctx_r0.sortDirection === "desc");
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("sorted", ctx_r0.sortColumn === "Updated")("desc", ctx_r0.sortColumn === "Updated" && ctx_r0.sortDirection === "desc");
+    i0.ɵɵadvance(7);
     i0.ɵɵrepeater(ctx_r0.filteredConfigurations);
 } }
-function SystemConfigurationComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SystemConfigurationComponent_Conditional_24_Conditional_0_Template, 6, 0, "div", 22)(1, SystemConfigurationComponent_Conditional_24_Conditional_1_Template, 3, 0, "div", 23);
+function SystemConfigurationComponent_Conditional_29_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_0_Template, 3, 0, "div", 30)(1, SystemConfigurationComponent_Conditional_29_Conditional_1_Conditional_1_Template, 25, 16, "div", 31);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.viewMode === "grid" ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.viewMode === "list" ? 1 : -1);
+} }
+function SystemConfigurationComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SystemConfigurationComponent_Conditional_29_Conditional_0_Template, 6, 0, "div", 29)(1, SystemConfigurationComponent_Conditional_29_Conditional_1_Template, 2, 2);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r0.filteredConfigurations.length === 0 ? 0 : 1);
 } }
+function SystemConfigurationComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 96);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_30_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeDetailPanel()); });
+    i0.ɵɵelementEnd();
+} }
+function SystemConfigurationComponent_Conditional_32_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 107);
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵtext(2, " Default Configuration ");
+    i0.ɵɵelementEnd();
+} }
+function SystemConfigurationComponent_Conditional_32_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 105)(1, "h4", 108);
+    i0.ɵɵelement(2, "i", 119);
+    i0.ɵɵtext(3, " Description ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 120);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.selectedConfig.Description);
+} }
+function SystemConfigurationComponent_Conditional_32_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.selectedConfig.compressionPrompt.Name, " ");
+} }
+function SystemConfigurationComponent_Conditional_32_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 115);
+    i0.ɵɵtext(1, "Not configured");
+    i0.ɵɵelementEnd();
+} }
+function SystemConfigurationComponent_Conditional_32_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.selectedConfig.summarizationPrompt.Name, " ");
+} }
+function SystemConfigurationComponent_Conditional_32_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 115);
+    i0.ɵɵtext(1, "Not configured");
+    i0.ɵɵelementEnd();
+} }
+function SystemConfigurationComponent_Conditional_32_Conditional_51_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 122)(1, "div", 77);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementStart(3, "span", 80);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "span", 82);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const param_r13 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r0.getParamTypeIcon(param_r13.Type));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(param_r13.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.formatParamValue(param_r13));
+} }
+function SystemConfigurationComponent_Conditional_32_Conditional_51_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 123);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" +", ctx_r0.selectedConfig.params.length - 5, " more parameters ");
+} }
+function SystemConfigurationComponent_Conditional_32_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 105)(1, "h4", 108);
+    i0.ɵɵelement(2, "i", 73);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 121);
+    i0.ɵɵrepeaterCreate(5, SystemConfigurationComponent_Conditional_32_Conditional_51_For_6_Template, 7, 4, "div", 122, _forTrack0);
+    i0.ɵɵtemplate(7, SystemConfigurationComponent_Conditional_32_Conditional_51_Conditional_7_Template, 2, 1, "div", 123);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" Parameters (", ctx_r0.selectedConfig.params.length, ") ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.selectedConfig.params.slice(0, 5));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.selectedConfig.params.length > 5 ? 7 : -1);
+} }
+function SystemConfigurationComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 97)(1, "div", 98)(2, "div", 99);
+    i0.ɵɵelement(3, "i", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 100)(5, "h3");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 101);
+    i0.ɵɵtext(8, "AI Configuration");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "button", 102);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_32_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeDetailPanel()); });
+    i0.ɵɵelement(10, "i", 103);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 104)(12, "div", 105)(13, "div", 106)(14, "span", 41);
+    i0.ɵɵelement(15, "i");
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(17, SystemConfigurationComponent_Conditional_32_Conditional_17_Template, 3, 0, "span", 107);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(18, SystemConfigurationComponent_Conditional_32_Conditional_18_Template, 6, 1, "div", 105);
+    i0.ɵɵelementStart(19, "div", 105)(20, "h4", 108);
+    i0.ɵɵelement(21, "i", 109);
+    i0.ɵɵtext(22, " Overview ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "div", 110)(24, "div", 111)(25, "span", 112);
+    i0.ɵɵtext(26, "Parameters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "span", 113);
+    i0.ɵɵtext(28);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(29, "div", 111)(30, "span", 112);
+    i0.ɵɵtext(31, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "span", 113);
+    i0.ɵɵtext(33);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(34, "div", 105)(35, "h4", 108);
+    i0.ɵɵelement(36, "i", 59);
+    i0.ɵɵtext(37, " Linked Prompts ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(38, "div", 114)(39, "div", 111)(40, "span", 112);
+    i0.ɵɵtext(41, "Context Compression");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "span", 113);
+    i0.ɵɵtemplate(43, SystemConfigurationComponent_Conditional_32_Conditional_43_Template, 1, 1)(44, SystemConfigurationComponent_Conditional_32_Conditional_44_Template, 2, 0, "span", 115);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(45, "div", 111)(46, "span", 112);
+    i0.ɵɵtext(47, "Context Summarization");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(48, "span", 113);
+    i0.ɵɵtemplate(49, SystemConfigurationComponent_Conditional_32_Conditional_49_Template, 1, 1)(50, SystemConfigurationComponent_Conditional_32_Conditional_50_Template, 2, 0, "span", 115);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(51, SystemConfigurationComponent_Conditional_32_Conditional_51_Template, 8, 2, "div", 105);
+    i0.ɵɵelementStart(52, "div", 105)(53, "h4", 108);
+    i0.ɵɵelement(54, "i", 116);
+    i0.ɵɵtext(55, " Timestamps ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(56, "div", 110)(57, "div", 111)(58, "span", 112);
+    i0.ɵɵtext(59, "Created");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(60, "span", 113);
+    i0.ɵɵtext(61);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(62, "div", 111)(63, "span", 112);
+    i0.ɵɵtext(64, "Updated");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(65, "span", 113);
+    i0.ɵɵtext(66);
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(67, "div", 117)(68, "button", 118);
+    i0.ɵɵlistener("click", function SystemConfigurationComponent_Conditional_32_Template_button_click_68_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openConfigFromPanel()); });
+    i0.ɵɵelement(69, "i", 51);
+    i0.ɵɵtext(70, " Open Full Record ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.selectedConfig.Name);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("ngClass", ctx_r0.getStatusClass(ctx_r0.selectedConfig.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.getStatusIcon(ctx_r0.selectedConfig.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.selectedConfig.Status, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.selectedConfig.IsDefault ? 17 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.selectedConfig.Description ? 18 : -1);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate((ctx_r0.selectedConfig.params == null ? null : ctx_r0.selectedConfig.params.length) || 0);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.selectedConfig.Status);
+    i0.ɵɵadvance(10);
+    i0.ɵɵconditional(ctx_r0.selectedConfig.compressionPrompt ? 43 : 44);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r0.selectedConfig.summarizationPrompt ? 49 : 50);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.selectedConfig.params && ctx_r0.selectedConfig.params.length > 0 ? 51 : -1);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r0.formatDate(ctx_r0.selectedConfig.__mj_CreatedAt));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.formatDate(ctx_r0.selectedConfig.__mj_UpdatedAt));
+} }
 /**
  * Tree-shaking prevention function - ensures component is included in builds
  */
@@ -148,41 +607,71 @@ export function LoadAIConfigResource() {
  */
 let SystemConfigurationComponent = class SystemConfigurationComponent extends BaseResourceComponent {
     navigationService;
+    cdr;
     isLoading = false;
     error = null;
     filterPanelVisible = true;
+    viewMode = 'grid';
     configurations = [];
     filteredConfigurations = [];
+    allParams = [];
+    allPrompts = [];
     currentFilters = {
         searchTerm: '',
         status: 'all',
         isDefault: 'all'
     };
-    constructor(navigationService) {
+    // Sorting
+    sortColumn = 'Name';
+    sortDirection = 'asc';
+    // Detail panel
+    selectedConfig = null;
+    detailPanelVisible = false;
+    // Stats
+    totalConfigs = 0;
+    activeConfigs = 0;
+    defaultConfig = null;
+    constructor(navigationService, cdr) {
         super();
         this.navigationService = navigationService;
+        this.cdr = cdr;
     }
     ngOnInit() {
         this.loadData();
-        this.NotifyLoadComplete();
     }
     async loadData() {
         try {
             this.isLoading = true;
             this.error = null;
-            const rv = new RunView();
-            const result = await rv.RunView({
-                EntityName: 'MJ: AI Configurations',
-                OrderBy: 'Name'
+            this.cdr.detectChanges();
+            // Ensure AIEngineBase is configured (no-op if already loaded)
+            await AIEngineBase.Instance.Config(false);
+            // Get cached data from AIEngineBase
+            const configs = AIEngineBase.Instance.Configurations;
+            const params = AIEngineBase.Instance.ConfigurationParams;
+            const prompts = AIEngineBase.Instance.Prompts;
+            // Create extended configurations with associated data
+            this.configurations = configs.map(config => {
+                const extended = config;
+                extended.params = params.filter(p => p.ConfigurationID === config.ID);
+                extended.isExpanded = false;
+                // Find linked prompts
+                if (config.DefaultPromptForContextCompressionID) {
+                    extended.compressionPrompt = prompts.find(p => p.ID === config.DefaultPromptForContextCompressionID) || null;
+                }
+                if (config.DefaultPromptForContextSummarizationID) {
+                    extended.summarizationPrompt = prompts.find(p => p.ID === config.DefaultPromptForContextSummarizationID) || null;
+                }
+                return extended;
             });
-            if (result && result.Success && result.Results) {
-                this.configurations = result.Results;
-                this.applyFilters();
-                LogStatus('AI Configurations loaded successfully');
-            }
-            else {
-                throw new Error('Failed to load AI configurations');
-            }
+            this.allParams = params;
+            this.allPrompts = prompts;
+            // Calculate stats
+            this.totalConfigs = this.configurations.length;
+            this.activeConfigs = this.configurations.filter(c => c.Status === 'Active').length;
+            this.defaultConfig = this.configurations.find(c => c.IsDefault) || null;
+            this.applyFilters();
+            LogStatus('AI Configurations loaded successfully');
         }
         catch (error) {
             this.error = 'Failed to load AI configurations. Please try again.';
@@ -190,13 +679,18 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
         }
         finally {
             this.isLoading = false;
+            this.NotifyLoadComplete();
+            this.cdr.detectChanges();
         }
     }
     toggleFilterPanel() {
         this.filterPanelVisible = !this.filterPanelVisible;
     }
-    onMainSplitterChange(event) {
-        // No longer need to emit state changes
+    setViewMode(mode) {
+        this.viewMode = mode;
+    }
+    toggleExpanded(config) {
+        config.isExpanded = !config.isExpanded;
     }
     onFiltersChange(filters) {
         this.currentFilters = { ...filters };
@@ -219,7 +713,9 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
         if (this.currentFilters.searchTerm) {
             const searchTerm = this.currentFilters.searchTerm.toLowerCase();
             filtered = filtered.filter(config => config.Name.toLowerCase().includes(searchTerm) ||
-                (config.Description || '').toLowerCase().includes(searchTerm));
+                (config.Description || '').toLowerCase().includes(searchTerm) ||
+                (config.params?.some(p => p.Name.toLowerCase().includes(searchTerm) ||
+                    (p.Description || '').toLowerCase().includes(searchTerm))));
         }
         // Apply status filter
         if (this.currentFilters.status !== 'all') {
@@ -230,76 +726,239 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
             const isDefault = this.currentFilters.isDefault === 'true';
             filtered = filtered.filter(config => config.IsDefault === isDefault);
         }
-        this.filteredConfigurations = filtered;
+        // Apply sorting
+        this.filteredConfigurations = this.applySorting(filtered);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Sort the configurations by the specified column
+     */
+    sortBy(column) {
+        if (this.sortColumn === column) {
+            // Toggle direction if same column
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            // New column, default to ascending
+            this.sortColumn = column;
+            this.sortDirection = 'asc';
+        }
+        this.applyFilters();
+    }
+    /**
+     * Apply sorting to the filtered list
+     */
+    applySorting(configs) {
+        return configs.sort((a, b) => {
+            let valueA;
+            let valueB;
+            switch (this.sortColumn) {
+                case 'Name':
+                    valueA = a.Name;
+                    valueB = b.Name;
+                    break;
+                case 'Status':
+                    valueA = a.Status;
+                    valueB = b.Status;
+                    break;
+                case 'Parameters':
+                    valueA = a.params?.length || 0;
+                    valueB = b.params?.length || 0;
+                    break;
+                case 'Updated':
+                    valueA = a.__mj_UpdatedAt ? new Date(a.__mj_UpdatedAt).getTime() : 0;
+                    valueB = b.__mj_UpdatedAt ? new Date(b.__mj_UpdatedAt).getTime() : 0;
+                    break;
+                default:
+                    valueA = a.Name;
+                    valueB = b.Name;
+            }
+            // Handle numeric comparison
+            if (typeof valueA === 'number' && typeof valueB === 'number') {
+                const comparison = valueA - valueB;
+                return this.sortDirection === 'desc' ? -comparison : comparison;
+            }
+            // Handle string/other comparison
+            const strA = (valueA ?? '').toString().toLowerCase();
+            const strB = (valueB ?? '').toString().toLowerCase();
+            const comparison = strA.localeCompare(strB);
+            return this.sortDirection === 'desc' ? -comparison : comparison;
+        });
     }
-    onOpenEntityRecord(entityName, recordId) {
-        const compositeKey = new CompositeKey([{ FieldName: 'ID', Value: recordId }]);
-        this.navigationService.OpenEntityRecord(entityName, compositeKey);
+    onOpenConfiguration(config) {
+        const compositeKey = new CompositeKey([{ FieldName: 'ID', Value: config.ID }]);
+        this.navigationService.OpenEntityRecord('MJ: AI Configurations', compositeKey);
     }
-    getStatusColor(status) {
+    onOpenPrompt(promptId) {
+        const compositeKey = new CompositeKey([{ FieldName: 'ID', Value: promptId }]);
+        this.navigationService.OpenEntityRecord('AI Prompts', compositeKey);
+    }
+    onOpenParam(param) {
+        const compositeKey = new CompositeKey([{ FieldName: 'ID', Value: param.ID }]);
+        this.navigationService.OpenEntityRecord('MJ: AI Configuration Params', compositeKey);
+    }
+    /**
+     * Show the detail panel for a configuration
+     */
+    showConfigDetails(config, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.selectedConfig = config;
+        this.detailPanelVisible = true;
+    }
+    /**
+     * Close the detail panel
+     */
+    closeDetailPanel() {
+        this.detailPanelVisible = false;
+        // Delay clearing selectedConfig for smoother animation
+        setTimeout(() => {
+            if (!this.detailPanelVisible) {
+                this.selectedConfig = null;
+            }
+        }, 300);
+    }
+    /**
+     * Open the full entity record from the detail panel
+     */
+    openConfigFromPanel() {
+        if (this.selectedConfig) {
+            this.onOpenConfiguration(this.selectedConfig);
+        }
+    }
+    getStatusClass(status) {
+        switch (status) {
+            case 'Active': return 'status-active';
+            case 'Preview': return 'status-preview';
+            case 'Inactive': return 'status-inactive';
+            case 'Deprecated': return 'status-deprecated';
+            default: return 'status-unknown';
+        }
+    }
+    getStatusIcon(status) {
         switch (status) {
-            case 'Active': return 'success';
-            case 'Preview': return 'warning';
-            case 'Inactive': return 'error';
-            case 'Deprecated': return 'error';
-            default: return 'info';
+            case 'Active': return 'fa-solid fa-circle-check';
+            case 'Preview': return 'fa-solid fa-flask';
+            case 'Inactive': return 'fa-solid fa-circle-pause';
+            case 'Deprecated': return 'fa-solid fa-triangle-exclamation';
+            default: return 'fa-solid fa-circle-question';
         }
     }
-    getConfigIcon() {
-        return 'fa-solid fa-cogs';
+    getParamTypeIcon(type) {
+        switch (type) {
+            case 'string': return 'fa-solid fa-font';
+            case 'number': return 'fa-solid fa-hashtag';
+            case 'boolean': return 'fa-solid fa-toggle-on';
+            case 'date': return 'fa-solid fa-calendar';
+            case 'object': return 'fa-solid fa-brackets-curly';
+            default: return 'fa-solid fa-code';
+        }
+    }
+    formatParamValue(param) {
+        if (!param.Value)
+            return '(not set)';
+        switch (param.Type) {
+            case 'boolean':
+                return param.Value === 'true' ? 'Yes' : 'No';
+            case 'object':
+                try {
+                    return JSON.stringify(JSON.parse(param.Value), null, 2).substring(0, 50) + '...';
+                }
+                catch {
+                    return param.Value.substring(0, 50) + '...';
+                }
+            default:
+                return param.Value.length > 50 ? param.Value.substring(0, 50) + '...' : param.Value;
+        }
+    }
+    formatDate(date) {
+        if (!date)
+            return 'N/A';
+        return new Date(date).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
     }
     // BaseResourceComponent abstract method implementations
-    async GetResourceDisplayName(data) {
-        return 'Configuration';
+    async GetResourceDisplayName(_data) {
+        return 'AI Configuration';
     }
-    async GetResourceIconClass(data) {
-        return 'fa-solid fa-cogs';
+    async GetResourceIconClass(_data) {
+        return 'fa-solid fa-sliders';
     }
-    static ɵfac = function SystemConfigurationComponent_Factory(t) { return new (t || SystemConfigurationComponent)(i0.ɵɵdirectiveInject(i1.NavigationService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SystemConfigurationComponent, selectors: [["app-system-configuration"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 15, consts: [[1, "system-configuration-container"], [1, "dashboard-header"], [1, "header-info"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "config-count"], [1, "header-controls"], ["type", "button", "title", "Refresh", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], ["type", "button", "title", "Create New Configuration", 1, "control-btn"], [1, "fa-solid", "fa-plus"], [1, "main-content"], ["orientation", "horizontal", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "configurations", "filteredConfigurations", "filters"], [3, "resizable", "scrollable"], [1, "configurations-content"], [1, "loading-container"], [1, "error-container"], ["text", "Loading configurations...", "size", "large"], [1, "error-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "empty-state"], [1, "configurations-grid"], [1, "fa-solid", "fa-cogs"], [1, "config-card"], [1, "card-header"], [1, "config-info"], [1, "config-icon"], [1, "config-details"], [1, "config-name"], [1, "config-meta"], [1, "default-badge"], [1, "card-body"], [1, "config-description"], [1, "config-description", "text-muted"], [1, "card-actions", 3, "click"], ["type", "button", 1, "action-btn"], [1, "fa-solid", "fa-eye"], ["type", "button", 1, "action-btn", "action-btn-primary"], [1, "fa-solid", "fa-edit"], ["type", "button", 1, "action-btn", "action-btn-warning"], ["type", "button", 1, "action-btn", "action-btn-danger"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-star"]], template: function SystemConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
-            i0.ɵɵlistener("click", function SystemConfigurationComponent_Template_button_click_3_listener() { return ctx.toggleFilterPanel(); });
+    static ɵfac = function SystemConfigurationComponent_Factory(t) { return new (t || SystemConfigurationComponent)(i0.ɵɵdirectiveInject(i1.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SystemConfigurationComponent, selectors: [["app-system-configuration"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 33, vars: 27, consts: [[1, "system-configuration-container"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-sliders"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "config-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grid-2"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Refresh", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "main-content"], ["orientation", "horizontal", 1, "main-splitter"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "configurations", "filteredConfigurations", "filters"], [3, "resizable", "scrollable"], [1, "configurations-content"], [1, "loading-container"], [1, "error-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], ["text", "Loading AI configurations...", "size", "large"], [1, "error-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "empty-state"], [1, "configurations-grid"], [1, "configurations-list"], [1, "config-card", 3, "expanded"], [1, "config-card"], [1, "card-header", 3, "click"], [1, "config-info"], [1, "config-icon"], [1, "config-details"], [1, "config-name"], [1, "config-meta"], [1, "default-badge"], [1, "status-badge", 3, "ngClass"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "config-description"], [1, "config-description", "text-muted"], [1, "expanded-content"], [1, "card-actions", 3, "click"], ["type", "button", "title", "View Details", 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-star"], [1, "config-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "prompts-section"], [1, "section-title"], [1, "fa-solid", "fa-message-lines"], [1, "prompt-links"], [1, "prompt-link"], [1, "no-prompt"], [1, "params-section"], [1, "prompt-link", 3, "click"], [1, "prompt-link-info"], [1, "prompt-link-icon"], [1, "fa-solid", "fa-compress"], [1, "prompt-link-details"], [1, "prompt-link-label"], [1, "prompt-link-name"], [1, "fa-solid", "fa-arrow-right", "prompt-link-arrow"], [1, "fa-solid", "fa-file-lines"], [1, "fa-solid", "fa-gear"], [1, "params-grid"], [1, "param-item"], [1, "param-item", 3, "click"], [1, "param-info"], [1, "param-type-icon"], [1, "param-details"], [1, "param-name"], [1, "param-type"], [1, "param-value"], [1, "no-params"], [1, "configurations-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "config-name-cell"], [1, "config-icon-small"], [1, "config-name-text"], [1, "default-badge", 2, "margin-left", "8px"], [1, "config-description-small"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], ["type", "button", 1, "action-btn-small", "primary", 3, "click"], [1, "detail-panel-overlay", 3, "click"], [1, "detail-panel-header"], [1, "detail-panel-title"], [1, "detail-icon"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "feature-badge", "default"], [1, "detail-section-title"], [1, "fa-solid", "fa-chart-bar"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "detail-grid", "single-column"], [1, "muted"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], [1, "detail-params-list"], [1, "detail-param-item"], [1, "params-more"]], template: function SystemConfigurationComponent_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.ɵɵtemplate(5, SystemConfigurationComponent_Conditional_5_Template, 1, 0)(6, SystemConfigurationComponent_Conditional_6_Template, 1, 0);
+            i0.ɵɵtext(5, " AI Configuration ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "button", 5);
+            i0.ɵɵlistener("click", function SystemConfigurationComponent_Template_button_click_6_listener() { return ctx.toggleFilterPanel(); });
+            i0.ɵɵelement(7, "i", 6);
+            i0.ɵɵtemplate(8, SystemConfigurationComponent_Conditional_8_Template, 1, 0)(9, SystemConfigurationComponent_Conditional_9_Template, 1, 0);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "span", 5);
-            i0.ɵɵtext(8);
+            i0.ɵɵelementStart(10, "span", 7);
+            i0.ɵɵtext(11);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "div", 6)(10, "button", 7);
-            i0.ɵɵlistener("click", function SystemConfigurationComponent_Template_button_click_10_listener() { return ctx.loadData(); });
-            i0.ɵɵelement(11, "i", 8);
-            i0.ɵɵtext(12, " Refresh ");
+            i0.ɵɵelementStart(12, "div", 8)(13, "div", 9)(14, "button", 10);
+            i0.ɵɵlistener("click", function SystemConfigurationComponent_Template_button_click_14_listener() { return ctx.setViewMode("grid"); });
+            i0.ɵɵelement(15, "i", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "button", 9);
-            i0.ɵɵelement(14, "i", 10);
-            i0.ɵɵtext(15, " New Configuration ");
+            i0.ɵɵelementStart(16, "button", 12);
+            i0.ɵɵlistener("click", function SystemConfigurationComponent_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 SystemConfigurationComponent_Template_button_click_18_listener() { return ctx.loadData(); });
+            i0.ɵɵelement(19, "i", 15);
+            i0.ɵɵtext(20, " Refresh ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(16, "div", 11)(17, "kendo-splitter", 12);
-            i0.ɵɵlistener("layoutChange", function SystemConfigurationComponent_Template_kendo_splitter_layoutChange_17_listener($event) { return ctx.onMainSplitterChange($event); });
-            i0.ɵɵelementStart(18, "kendo-splitter-pane", 13)(19, "mj-system-config-filter-panel", 14);
-            i0.ɵɵlistener("filtersChange", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_filtersChange_19_listener($event) { return ctx.onFiltersChange($event); })("filterChange", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_filterChange_19_listener() { return ctx.onFilterChange(); })("resetFilters", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_resetFilters_19_listener() { return ctx.onResetFilters(); })("closePanel", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_closePanel_19_listener() { return ctx.toggleFilterPanel(); });
+            i0.ɵɵelementStart(21, "div", 16)(22, "kendo-splitter", 17)(23, "kendo-splitter-pane", 18)(24, "mj-system-config-filter-panel", 19);
+            i0.ɵɵlistener("filtersChange", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_filtersChange_24_listener($event) { return ctx.onFiltersChange($event); })("filterChange", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_filterChange_24_listener() { return ctx.onFilterChange(); })("resetFilters", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_resetFilters_24_listener() { return ctx.onResetFilters(); })("closePanel", function SystemConfigurationComponent_Template_mj_system_config_filter_panel_closePanel_24_listener() { return ctx.toggleFilterPanel(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(25, "kendo-splitter-pane", 20)(26, "div", 21);
+            i0.ɵɵtemplate(27, SystemConfigurationComponent_Conditional_27_Template, 2, 0, "div", 22)(28, SystemConfigurationComponent_Conditional_28_Template, 4, 1, "div", 23)(29, SystemConfigurationComponent_Conditional_29_Template, 2, 1);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵtemplate(30, SystemConfigurationComponent_Conditional_30_Template, 1, 0, "div", 24);
+            i0.ɵɵelementStart(31, "div", 25);
+            i0.ɵɵtemplate(32, SystemConfigurationComponent_Conditional_32_Template, 71, 14);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(20, "kendo-splitter-pane", 15)(21, "div", 16);
-            i0.ɵɵtemplate(22, SystemConfigurationComponent_Conditional_22_Template, 2, 0, "div", 17)(23, SystemConfigurationComponent_Conditional_23_Template, 4, 1, "div", 18)(24, SystemConfigurationComponent_Conditional_24_Template, 2, 1);
-            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(5);
-            i0.ɵɵconditional(ctx.filterPanelVisible ? 5 : 6);
+            i0.ɵɵadvance(8);
+            i0.ɵɵconditional(ctx.filterPanelVisible ? 8 : 9);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate2(" ", ctx.filteredConfigurations.length, " of ", ctx.configurations.length, " configurations ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1("", ctx.filteredConfigurations.length, " configurations");
-            i0.ɵɵadvance(10);
+            i0.ɵɵclassProp("active", ctx.viewMode === "grid");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.viewMode === "list");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("fa-spin", ctx.isLoading);
+            i0.ɵɵadvance(4);
             i0.ɵɵproperty("size", ctx.filterPanelVisible ? "320px" : "0px")("collapsible", false)("resizable", ctx.filterPanelVisible)("scrollable", false)("hidden", !ctx.filterPanelVisible);
             i0.ɵɵadvance();
             i0.ɵɵproperty("configurations", ctx.configurations)("filteredConfigurations", ctx.filteredConfigurations)("filters", ctx.currentFilters);
             i0.ɵɵadvance();
             i0.ɵɵproperty("resizable", true)("scrollable", false);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 22 : -1);
+            i0.ɵɵconditional(ctx.isLoading ? 27 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 28 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 29 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.detailPanelVisible ? 30 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.error ? 23 : -1);
+            i0.ɵɵclassProp("visible", ctx.detailPanelVisible);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 24 : -1);
-        } }, dependencies: [i2.SplitterComponent, i2.SplitterPaneComponent, i3.LoadingComponent, i4.SystemConfigFilterPanelComponent], styles: [".config-content[_ngcontent-%COMP%] {\n  padding: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n}\n\n.config-cards-container[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\n  margin-top: 20px;\n}\n\n.config-card[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  transition: box-shadow 0.2s ease;\n  position: relative;\n}\n.config-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.config-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 12px;\n  gap: 10px;\n}\n\n.config-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 16px;\n  color: #333;\n  margin: 0;\n  flex: 1;\n}\n\n.config-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.default-badge[_ngcontent-%COMP%] {\n  background: #007bff;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  text-transform: uppercase;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n}\n.status-badge.active[_ngcontent-%COMP%] {\n  background: #d4edda;\n  color: #155724;\n  border: 1px solid #c3e6cb;\n}\n.status-badge.inactive[_ngcontent-%COMP%] {\n  background: #f8d7da;\n  color: #721c24;\n  border: 1px solid #f5c6cb;\n}\n.status-badge.deprecated[_ngcontent-%COMP%] {\n  background: #fff3cd;\n  color: #856404;\n  border: 1px solid #ffeaa7;\n}\n.status-badge.preview[_ngcontent-%COMP%] {\n  background: #e2e3e5;\n  color: #383d41;\n  border: 1px solid #d6d8db;\n}\n\n.config-description[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  line-height: 1.5;\n  margin: 0;\n  margin-bottom: 16px;\n}\n\n.config-meta[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 12px;\n  color: #888;\n  border-top: 1px solid #f0f0f0;\n  padding-top: 12px;\n}\n\n.config-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  background: #f8f9fa;\n  padding: 2px 6px;\n  border-radius: 3px;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n  width: 100%;\n}\n.main-splitter[_ngcontent-%COMP%]   .k-pane[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.no-configs-message[_ngcontent-%COMP%] {\n  text-align: center;\n  color: #666;\n  font-style: italic;\n  margin-top: 50px;\n  font-size: 16px;\n}\n\n.loading-message[_ngcontent-%COMP%] {\n  text-align: center;\n  color: #666;\n  margin-top: 50px;\n  font-size: 16px;\n}"] });
+            i0.ɵɵconditional(ctx.selectedConfig ? 32 : -1);
+        } }, dependencies: [i2.NgClass, i3.SplitterComponent, i3.SplitterPaneComponent, i4.LoadingComponent, i5.SystemConfigFilterPanelComponent], styles: ["\n\n\n\n\n\n\n.system-configuration-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\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 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: #1e293b;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6366f1;\n  font-size: 22px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  border: 1px solid #dee2e6;\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);\n  border-color: #ced4da;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6366f1;\n  font-size: 14px;\n}\n\n.config-count[_ngcontent-%COMP%] {\n  color: #6c757d;\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: #f8f9fa;\n  border-radius: 20px;\n  border: 1px solid #e9ecef;\n}\n\n.header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f8f9fa;\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid #dee2e6;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: #6c757d;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: #495057;\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #6366f1;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n  border-color: #4f46e5;\n  color: white;\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n.configurations-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: transparent;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.error-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n  border: 1px solid #fecaca;\n  border-radius: 12px;\n  color: #dc2626;\n  font-size: 15px;\n  font-weight: 500;\n}\n\n.error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n}\n\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: 72px;\n  color: #d1d5db;\n  margin-bottom: 24px;\n  display: block;\n  opacity: 0.8;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: #374151;\n  font-size: 22px;\n  font-weight: 600;\n  margin: 0 0 12px 0;\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 28px;\n  color: #6b7280;\n}\n\n\n\n\n\n.configurations-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n  gap: 24px;\n}\n\n\n\n\n\n.config-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid #e5e7eb;\n  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.config-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n  transform: translateY(-4px);\n  border-color: #c7d2fe;\n}\n\n.config-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n.config-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);\n}\n\n.config-card.expanded[_ngcontent-%COMP%]::before {\n  opacity: 1;\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid #f3f4f6;\n  transition: background 0.2s ease;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background: #fafbfc;\n}\n\n.config-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.config-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.config-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  font-size: 24px;\n}\n\n.config-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.config-name[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: #1f2937;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  letter-spacing: -0.02em;\n}\n\n.config-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  transition: all 0.2s ease;\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);\n  color: #166534;\n  border: 1px solid #86efac;\n}\n\n.status-badge.status-preview[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n  color: #92400e;\n  border: 1px solid #fcd34d;\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\n  color: #4b5563;\n  border: 1px solid #d1d5db;\n}\n\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n  color: #991b1b;\n  border: 1px solid #fca5a5;\n}\n\n\n\n.default-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n  color: #5b21b6;\n  border: 1px solid #c4b5fd;\n}\n\n.default-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #7c3aed;\n}\n\n\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #9ca3af;\n  transition: all 0.3s ease;\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%]:hover {\n  color: #6366f1;\n  background: #f3f4f6;\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n  color: #6366f1;\n}\n\n\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 24px 20px 24px;\n}\n\n.config-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: #6b7280;\n}\n\n.config-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: #9ca3af;\n}\n\n\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid #f3f4f6;\n  animation: _ngcontent-%COMP%_slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.config-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n  margin-bottom: 20px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-radius: 12px;\n  border: 1px solid #e2e8f0;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #334155;\n  font-weight: 600;\n}\n\n\n\n.prompts-section[_ngcontent-%COMP%] {\n  margin-top: 20px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  color: #475569;\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n  margin: 0 0 12px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6366f1;\n  font-size: 14px;\n}\n\n.prompt-links[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.prompt-link[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover {\n  background: #f8fafc;\n  border-color: #c7d2fe;\n  transform: translateX(4px);\n}\n\n.prompt-link-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\n  color: #2563eb;\n  flex-shrink: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.prompt-link-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.prompt-link-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1e293b;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-link-arrow[_ngcontent-%COMP%] {\n  color: #94a3b8;\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover   .prompt-link-arrow[_ngcontent-%COMP%] {\n  color: #6366f1;\n  transform: translateX(4px);\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #94a3b8;\n  font-style: italic;\n  padding: 12px 16px;\n  background: #f8fafc;\n  border-radius: 10px;\n  border: 1px dashed #e2e8f0;\n}\n\n\n\n.params-section[_ngcontent-%COMP%] {\n  margin-top: 20px;\n}\n\n.params-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.param-item[_ngcontent-%COMP%]:hover {\n  background: #f8fafc;\n  border-color: #c7d2fe;\n}\n\n.param-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.param-type-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n  color: #7c3aed;\n  flex-shrink: 0;\n}\n\n.param-type-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.param-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.param-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1e293b;\n}\n\n.param-type[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #64748b;\n  margin-top: 2px;\n}\n\n.param-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #475569;\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: #f1f5f9;\n  padding: 4px 10px;\n  border-radius: 6px;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.no-params[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #94a3b8;\n  font-style: italic;\n  padding: 12px 16px;\n  background: #f8fafc;\n  border-radius: 10px;\n  border: 1px dashed #e2e8f0;\n  text-align: center;\n}\n\n\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 16px 24px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-top: 1px solid #e5e7eb;\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e5e7eb;\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #475569;\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: #f8fafc;\n  border-color: #cbd5e1;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n  border-color: #4f46e5;\n  color: white;\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n.action-btn-warning[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  border-color: #f59e0b;\n  color: #78350f;\n}\n\n.action-btn-warning[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);\n}\n\n.action-btn-danger[_ngcontent-%COMP%] {\n  color: #dc2626;\n  border-color: #fecaca;\n}\n\n.action-btn-danger[_ngcontent-%COMP%]:hover {\n  background: #fef2f2;\n  border-color: #dc2626;\n}\n\n\n\n\n\n.configurations-list[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid #e5e7eb;\n  overflow: hidden;\n}\n\n.configurations-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.configurations-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-bottom: 2px solid #e5e7eb;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 14px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: #475569;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background: #e2e8f0;\n  color: #6366f1;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child {\n  cursor: default;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child:hover {\n  background: transparent;\n  color: #475569;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%] {\n  color: #6366f1;\n  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n}\n\n.configurations-table[_ngcontent-%COMP%]   th.sorted.desc[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.configurations-table[_ngcontent-%COMP%]   .sort-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.configurations-table[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.configurations-table[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: #6366f1;\n}\n\n.configurations-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid #f1f5f9;\n  transition: background 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: #fafbfc;\n}\n\n.configurations-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.configurations-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: #475569;\n}\n\n.config-name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.config-icon-small[_ngcontent-%COMP%] {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  flex-shrink: 0;\n}\n\n.config-icon-small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  font-size: 16px;\n}\n\n.config-name-text[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: #1e293b;\n}\n\n.config-description-small[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #64748b;\n  margin-top: 4px;\n  max-width: 300px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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 #e5e7eb;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #475569;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n  background: #f8fafc;\n  border-color: #cbd5e1;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n  border-color: #4f46e5;\n  color: white;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n  .configurations-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\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    flex-wrap: wrap;\n  }\n\n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n\n  .configurations-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .config-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    padding: 20px;\n  }\n\n  .config-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n  }\n\n  .config-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n}\n\n\n\n\n\nkendo-splitter[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n[_nghost-%COMP%]     .k-splitter {\n  border: none;\n  background: transparent;\n}\n\n[_nghost-%COMP%]     .k-splitbar {\n  background: #e5e7eb;\n  width: 6px;\n}\n\n[_nghost-%COMP%]     .k-splitbar:hover {\n  background: #c7d2fe;\n}\n\n[_nghost-%COMP%]     .k-pane {\n  overflow: hidden;\n}\n\n\n\n\n\n\n.detail-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(15, 23, 42, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.25s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: white;\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n  right: 0;\n}\n\n\n\n.detail-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-bottom: 1px solid #e2e8f0;\n  flex-shrink: 0;\n}\n\n.detail-panel-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n  font-size: 24px;\n}\n\n.detail-title-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: #1e293b;\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #64748b;\n  font-weight: 500;\n}\n\n.detail-panel-close[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e2e8f0;\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #64748b;\n}\n\n.detail-panel-close[_ngcontent-%COMP%]:hover {\n  background: #f8fafc;\n  border-color: #cbd5e1;\n  color: #1e293b;\n}\n\n\n\n.detail-panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n  color: #4f46e5;\n}\n\n.feature-badge.default[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n  color: #5b21b6;\n}\n\n.feature-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6366f1;\n  font-size: 14px;\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: #475569;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column[_ngcontent-%COMP%] {\n  grid-template-columns: 1fr;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-radius: 12px;\n  border: 1px solid #e2e8f0;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #1e293b;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {\n  color: #94a3b8;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n.detail-params-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-param-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-radius: 10px;\n  border: 1px solid #e2e8f0;\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #7c3aed;\n  font-size: 14px;\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1e293b;\n}\n\n.detail-param-item[_ngcontent-%COMP%]   .param-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #475569;\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: white;\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid #e2e8f0;\n  max-width: 150px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.params-more[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6366f1;\n  font-weight: 600;\n  text-align: center;\n  padding: 10px;\n  background: #eef2ff;\n  border-radius: 8px;\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-top: 1px solid #e2e8f0;\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n  background: white;\n  border: 2px solid #e2e8f0;\n  color: #475569;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n  border-color: #6366f1;\n  color: #6366f1;\n  background: #fafbff;\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  border: 2px solid transparent;\n  color: white;\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);\n}\n\n\n\n@media (max-width: 520px) {\n  .detail-panel[_ngcontent-%COMP%] {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible[_ngcontent-%COMP%] {\n    right: 0;\n  }\n\n  .detail-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
 };
 SystemConfigurationComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIConfigResource')
@@ -307,7 +966,7 @@ SystemConfigurationComponent = __decorate([
 export { SystemConfigurationComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SystemConfigurationComponent, [{
         type: Component,
-        args: [{ selector: 'app-system-configuration', template: "<div class=\"system-configuration-container\">\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=\"config-count\">{{ filteredConfigurations.length }} configurations</span>\n    </div>\n    \n    <div class=\"header-controls\">\n      <button \n        type=\"button\" \n        class=\"control-btn\"\n        (click)=\"loadData()\"\n        title=\"Refresh\">\n        <i class=\"fa-solid fa-refresh\"></i>\n        Refresh\n      </button>\n      <button \n        type=\"button\" \n        class=\"control-btn\"\n        title=\"Create New Configuration\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Configuration\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <div class=\"main-content\">\n    <kendo-splitter \n      class=\"main-splitter\"\n      orientation=\"horizontal\"\n      (layoutChange)=\"onMainSplitterChange($event)\"\n      >\n      \n      <!-- Filter Panel (Left) -->\n      <kendo-splitter-pane \n        [size]=\"filterPanelVisible ? '320px' : '0px'\"\n        [collapsible]=\"false\"\n        [resizable]=\"filterPanelVisible\"\n        [scrollable]=\"false\"\n        [hidden]=\"!filterPanelVisible\">\n        <mj-system-config-filter-panel\n          [configurations]=\"configurations\"\n          [filteredConfigurations]=\"filteredConfigurations\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-system-config-filter-panel>\n      </kendo-splitter-pane>\n      \n      <!-- Configurations List Panel -->\n      <kendo-splitter-pane \n        [resizable]=\"true\"\n        [scrollable]=\"false\">\n        <div class=\"configurations-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading configurations...\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Error State -->\n          @if (error) {\n            <div class=\"error-container\">\n              <p class=\"error-message\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                {{ error }}\n              </p>\n            </div>\n          }\n\n          <!-- Configurations List -->\n          @if (!isLoading && !error) {\n            @if (filteredConfigurations.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-cogs\"></i>\n                <h3>No configurations found</h3>\n                <p>No AI configurations match your current filters. Try adjusting your search criteria or create a new configuration.</p>\n              </div>\n            } @else {\n              <div class=\"configurations-grid\">\n                @for (config of filteredConfigurations; track config.ID) {\n                  <div class=\"config-card\">\n                    <!-- Card Header -->\n                    <div class=\"card-header\">\n                      <div class=\"config-info\">\n                        <div class=\"config-icon\">\n                          <i [class]=\"getConfigIcon()\"></i>\n                        </div>\n                        <div class=\"config-details\">\n                          <h4 class=\"config-name\">{{ config.Name }}</h4>\n                          <div class=\"config-meta\">\n                            @if (config.IsDefault) {\n                              <span class=\"default-badge\">\n                                <i class=\"fa-solid fa-star\"></i>\n                                Default\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                      \n                      <div class=\"status-badge status-{{ config.Status.toLowerCase() }}\">\n                        {{ config.Status }}\n                      </div>\n                    </div>\n\n                    <!-- Card Body -->\n                    <div class=\"card-body\">\n                      @if (config.Description) {\n                        <p class=\"config-description\">{{ config.Description }}</p>\n                      } @else {\n                        <p class=\"config-description text-muted\">No description provided</p>\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                        <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                        <i class=\"fa-solid fa-edit\"></i>\n                        Configure\n                      </button>\n                      \n                      @if (!config.IsDefault) {\n                        <button \n                          type=\"button\" \n                          class=\"action-btn action-btn-warning\">\n                          <i class=\"fa-solid fa-star\"></i>\n                          Set Default\n                        </button>\n                      }\n                      \n                      <button \n                        type=\"button\" \n                        class=\"action-btn action-btn-danger\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                        Delete\n                      </button>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </kendo-splitter-pane>\n    </kendo-splitter>\n  </div>\n</div>", styles: [".config-content {\n  padding: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n}\n\n.config-cards-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\n  margin-top: 20px;\n}\n\n.config-card {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  transition: box-shadow 0.2s ease;\n  position: relative;\n}\n.config-card:hover {\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.config-card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 12px;\n  gap: 10px;\n}\n\n.config-name {\n  font-weight: 600;\n  font-size: 16px;\n  color: #333;\n  margin: 0;\n  flex: 1;\n}\n\n.config-badges {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.default-badge {\n  background: #007bff;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  text-transform: uppercase;\n}\n\n.status-badge {\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n}\n.status-badge.active {\n  background: #d4edda;\n  color: #155724;\n  border: 1px solid #c3e6cb;\n}\n.status-badge.inactive {\n  background: #f8d7da;\n  color: #721c24;\n  border: 1px solid #f5c6cb;\n}\n.status-badge.deprecated {\n  background: #fff3cd;\n  color: #856404;\n  border: 1px solid #ffeaa7;\n}\n.status-badge.preview {\n  background: #e2e3e5;\n  color: #383d41;\n  border: 1px solid #d6d8db;\n}\n\n.config-description {\n  color: #666;\n  font-size: 14px;\n  line-height: 1.5;\n  margin: 0;\n  margin-bottom: 16px;\n}\n\n.config-meta {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 12px;\n  color: #888;\n  border-top: 1px solid #f0f0f0;\n  padding-top: 12px;\n}\n\n.config-id {\n  font-family: monospace;\n  background: #f8f9fa;\n  padding: 2px 6px;\n  border-radius: 3px;\n}\n\n.main-splitter {\n  height: 100%;\n  width: 100%;\n}\n.main-splitter .k-pane {\n  overflow: hidden;\n}\n\n.no-configs-message {\n  text-align: center;\n  color: #666;\n  font-style: italic;\n  margin-top: 50px;\n  font-size: 16px;\n}\n\n.loading-message {\n  text-align: center;\n  color: #666;\n  margin-top: 50px;\n  font-size: 16px;\n}\n"] }]
-    }], () => [{ type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SystemConfigurationComponent, { className: "SystemConfigurationComponent", filePath: "src/AI/components/system/system-configuration.component.ts", lineNumber: 30 }); })();
+        args: [{ selector: 'app-system-configuration', template: "<div class=\"system-configuration-container\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <h2 class=\"dashboard-title\">\n        <i class=\"fa-solid fa-sliders\"></i>\n        AI 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=\"config-count\">\n        {{ filteredConfigurations.length }} of {{ configurations.length }} configurations\n      </span>\n    </div>\n\n    <div class=\"header-controls\">\n      <!-- View Toggle -->\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-grid-2\"></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\"\n        (click)=\"loadData()\"\n        [disabled]=\"isLoading\"\n        title=\"Refresh\">\n        <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n        Refresh\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <div class=\"main-content\">\n    <kendo-splitter\n      class=\"main-splitter\"\n      orientation=\"horizontal\">\n\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-system-config-filter-panel\n          [configurations]=\"configurations\"\n          [filteredConfigurations]=\"filteredConfigurations\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-system-config-filter-panel>\n      </kendo-splitter-pane>\n\n      <!-- Configurations List Panel -->\n      <kendo-splitter-pane\n        [resizable]=\"true\"\n        [scrollable]=\"false\">\n        <div class=\"configurations-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading AI configurations...\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Error State -->\n          @if (error && !isLoading) {\n            <div class=\"error-container\">\n              <p class=\"error-message\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                {{ error }}\n              </p>\n            </div>\n          }\n\n          <!-- Configurations Content -->\n          @if (!isLoading && !error) {\n            @if (filteredConfigurations.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-sliders\"></i>\n                <h3>No configurations found</h3>\n                <p>No AI configurations match your current filters. Try adjusting your search criteria or create a new configuration.</p>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"configurations-grid\">\n                  @for (config of filteredConfigurations; track config.ID) {\n                    <div class=\"config-card\" [class.expanded]=\"config.isExpanded\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleExpanded(config)\">\n                        <div class=\"config-info\">\n                          <div class=\"config-icon\">\n                            <i class=\"fa-solid fa-sliders\"></i>\n                          </div>\n                          <div class=\"config-details\">\n                            <h4 class=\"config-name\">{{ config.Name }}</h4>\n                            <div class=\"config-meta\">\n                              @if (config.IsDefault) {\n                                <span class=\"default-badge\">\n                                  <i class=\"fa-solid fa-star\"></i>\n                                  Default\n                                </span>\n                              }\n                              <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n                                <i [class]=\"getStatusIcon(config.Status)\"></i>\n                                {{ config.Status }}\n                              </span>\n                            </div>\n                          </div>\n                        </div>\n\n                        <i class=\"fa-solid fa-chevron-down expand-icon\"\n                           [class.rotated]=\"config.isExpanded\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (config.Description) {\n                          <p class=\"config-description\">{{ config.Description }}</p>\n                        } @else {\n                          <p class=\"config-description text-muted\">No description provided</p>\n                        }\n\n                        <!-- Expanded Content -->\n                        @if (config.isExpanded) {\n                          <div class=\"expanded-content\">\n                            <!-- Stats Grid -->\n                            <div class=\"config-stats\">\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Parameters</span>\n                                <span class=\"stat-value\">{{ config.params?.length || 0 }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Created</span>\n                                <span class=\"stat-value\">{{ formatDate(config.__mj_CreatedAt) }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Updated</span>\n                                <span class=\"stat-value\">{{ formatDate(config.__mj_UpdatedAt) }}</span>\n                              </div>\n                            </div>\n\n                            <!-- Linked Prompts -->\n                            <div class=\"prompts-section\">\n                              <h5 class=\"section-title\">\n                                <i class=\"fa-solid fa-message-lines\"></i>\n                                Linked Prompts\n                              </h5>\n                              <div class=\"prompt-links\">\n                                @if (config.compressionPrompt) {\n                                  <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextCompressionID!); $event.stopPropagation()\">\n                                    <div class=\"prompt-link-info\">\n                                      <div class=\"prompt-link-icon\">\n                                        <i class=\"fa-solid fa-compress\"></i>\n                                      </div>\n                                      <div class=\"prompt-link-details\">\n                                        <span class=\"prompt-link-label\">Context Compression</span>\n                                        <span class=\"prompt-link-name\">{{ config.compressionPrompt.Name }}</span>\n                                      </div>\n                                    </div>\n                                    <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n                                  </div>\n                                } @else {\n                                  <div class=\"no-prompt\">No compression prompt configured</div>\n                                }\n\n                                @if (config.summarizationPrompt) {\n                                  <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextSummarizationID!); $event.stopPropagation()\">\n                                    <div class=\"prompt-link-info\">\n                                      <div class=\"prompt-link-icon\">\n                                        <i class=\"fa-solid fa-file-lines\"></i>\n                                      </div>\n                                      <div class=\"prompt-link-details\">\n                                        <span class=\"prompt-link-label\">Context Summarization</span>\n                                        <span class=\"prompt-link-name\">{{ config.summarizationPrompt.Name }}</span>\n                                      </div>\n                                    </div>\n                                    <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n                                  </div>\n                                } @else {\n                                  <div class=\"no-prompt\">No summarization prompt configured</div>\n                                }\n                              </div>\n                            </div>\n\n                            <!-- Configuration Parameters -->\n                            @if (config.params && config.params.length > 0) {\n                              <div class=\"params-section\">\n                                <h5 class=\"section-title\">\n                                  <i class=\"fa-solid fa-gear\"></i>\n                                  Configuration Parameters\n                                </h5>\n                                <div class=\"params-grid\">\n                                  @for (param of config.params; track param.ID) {\n                                    <div class=\"param-item\" (click)=\"onOpenParam(param); $event.stopPropagation()\">\n                                      <div class=\"param-info\">\n                                        <div class=\"param-type-icon\">\n                                          <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n                                        </div>\n                                        <div class=\"param-details\">\n                                          <span class=\"param-name\">{{ param.Name }}</span>\n                                          <span class=\"param-type\">{{ param.Type }}</span>\n                                        </div>\n                                      </div>\n                                      <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n                                    </div>\n                                  }\n                                </div>\n                              </div>\n                            } @else {\n                              <div class=\"params-section\">\n                                <h5 class=\"section-title\">\n                                  <i class=\"fa-solid fa-gear\"></i>\n                                  Configuration Parameters\n                                </h5>\n                                <div class=\"no-params\">No parameters configured</div>\n                              </div>\n                            }\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)=\"showConfigDetails(config, $event)\"\n                          title=\"View Details\">\n                          <i class=\"fa-solid fa-eye\"></i>\n                          Details\n                        </button>\n\n                        <button\n                          type=\"button\"\n                          class=\"action-btn action-btn-primary\"\n                          (click)=\"onOpenConfiguration(config)\">\n                          <i class=\"fa-solid fa-edit\"></i>\n                          Configure\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n\n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"configurations-list\">\n                  <table class=\"configurations-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"sortBy('Name')\"\n                            [class.sorted]=\"sortColumn === 'Name'\"\n                            [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Configuration\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Status')\"\n                            [class.sorted]=\"sortColumn === 'Status'\"\n                            [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Status\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Parameters')\"\n                            [class.sorted]=\"sortColumn === 'Parameters'\"\n                            [class.desc]=\"sortColumn === 'Parameters' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Parameters\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"sortBy('Updated')\"\n                            [class.sorted]=\"sortColumn === 'Updated'\"\n                            [class.desc]=\"sortColumn === 'Updated' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Updated\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (config of filteredConfigurations; track config.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"config-name-cell\">\n                              <div class=\"config-icon-small\">\n                                <i class=\"fa-solid fa-sliders\"></i>\n                              </div>\n                              <div>\n                                <div class=\"config-name-text\">\n                                  {{ config.Name }}\n                                  @if (config.IsDefault) {\n                                    <span class=\"default-badge\" style=\"margin-left: 8px;\">\n                                      <i class=\"fa-solid fa-star\"></i>\n                                      Default\n                                    </span>\n                                  }\n                                </div>\n                                @if (config.Description) {\n                                  <div class=\"config-description-small\">{{ config.Description }}</div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n                              <i [class]=\"getStatusIcon(config.Status)\"></i>\n                              {{ config.Status }}\n                            </span>\n                          </td>\n                          <td>{{ config.params?.length || 0 }}</td>\n                          <td>{{ formatDate(config.__mj_UpdatedAt) }}</td>\n                          <td>\n                            <div class=\"table-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small\"\n                                (click)=\"showConfigDetails(config)\"\n                                title=\"View Details\">\n                                <i class=\"fa-solid fa-eye\"></i>\n                              </button>\n                              <button\n                                type=\"button\"\n                                class=\"action-btn-small primary\"\n                                (click)=\"onOpenConfiguration(config)\">\n                                <i class=\"fa-solid fa-edit\"></i>\n                              </button>\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n        </div>\n      </kendo-splitter-pane>\n    </kendo-splitter>\n  </div>\n\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedConfig) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\">\n            <i class=\"fa-solid fa-sliders\"></i>\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedConfig.Name }}</h3>\n            <span class=\"detail-subtitle\">AI Configuration</span>\n          </div>\n        </div>\n        <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Panel Content -->\n      <div class=\"detail-panel-content\">\n        <!-- Status Section -->\n        <div class=\"detail-section\">\n          <div class=\"detail-badges\">\n            <span class=\"status-badge\" [ngClass]=\"getStatusClass(selectedConfig.Status)\">\n              <i [class]=\"getStatusIcon(selectedConfig.Status)\"></i>\n              {{ selectedConfig.Status }}\n            </span>\n            @if (selectedConfig.IsDefault) {\n              <span class=\"feature-badge default\">\n                <i class=\"fa-solid fa-star\"></i>\n                Default Configuration\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedConfig.Description) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-align-left\"></i>\n              Description\n            </h4>\n            <p class=\"detail-description\">{{ selectedConfig.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Stats -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-chart-bar\"></i>\n            Overview\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Parameters</span>\n              <span class=\"detail-value\">{{ selectedConfig.params?.length || 0 }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Status</span>\n              <span class=\"detail-value\">{{ selectedConfig.Status }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Linked Prompts -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-message-lines\"></i>\n            Linked Prompts\n          </h4>\n          <div class=\"detail-grid single-column\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Compression</span>\n              <span class=\"detail-value\">\n                @if (selectedConfig.compressionPrompt) {\n                  {{ selectedConfig.compressionPrompt.Name }}\n                } @else {\n                  <span class=\"muted\">Not configured</span>\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Summarization</span>\n              <span class=\"detail-value\">\n                @if (selectedConfig.summarizationPrompt) {\n                  {{ selectedConfig.summarizationPrompt.Name }}\n                } @else {\n                  <span class=\"muted\">Not configured</span>\n                }\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Parameters Preview -->\n        @if (selectedConfig.params && selectedConfig.params.length > 0) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-gear\"></i>\n              Parameters ({{ selectedConfig.params.length }})\n            </h4>\n            <div class=\"detail-params-list\">\n              @for (param of selectedConfig.params.slice(0, 5); track param.ID) {\n                <div class=\"detail-param-item\">\n                  <div class=\"param-info\">\n                    <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n                    <span class=\"param-name\">{{ param.Name }}</span>\n                  </div>\n                  <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n                </div>\n              }\n              @if (selectedConfig.params.length > 5) {\n                <div class=\"params-more\">\n                  +{{ selectedConfig.params.length - 5 }} more parameters\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Timestamps -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-clock\"></i>\n            Timestamps\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Created</span>\n              <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_CreatedAt) }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_UpdatedAt) }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openConfigFromPanel()\">\n          <i class=\"fa-solid fa-edit\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/* AI Configuration Dashboard - World-Class Design */\n\n/* ============================================================================\n   CONTAINER & LAYOUT\n   ============================================================================ */\n.system-configuration-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* ============================================================================\n   HEADER\n   ============================================================================ */\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 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: #1e293b;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.dashboard-title i {\n  color: #6366f1;\n  font-size: 22px;\n}\n\n.filter-toggle-btn {\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  border: 1px solid #dee2e6;\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.filter-toggle-btn:hover {\n  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);\n  border-color: #ced4da;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn i {\n  color: #6366f1;\n  font-size: 14px;\n}\n\n.config-count {\n  color: #6c757d;\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: #f8f9fa;\n  border-radius: 20px;\n  border: 1px solid #e9ecef;\n}\n\n.header-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  background: #f8f9fa;\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid #dee2e6;\n}\n\n.view-btn {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: #6c757d;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn:hover {\n  color: #495057;\n}\n\n.view-btn.active {\n  background: white;\n  color: #6366f1;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn {\n  background: white;\n  border: 1px solid #dee2e6;\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: #f8f9fa;\n  border-color: #ced4da;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n  font-size: 14px;\n}\n\n.control-btn.primary {\n  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n  border-color: #4f46e5;\n  color: white;\n}\n\n.control-btn.primary:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n/* ============================================================================\n   MAIN CONTENT AREA\n   ============================================================================ */\n.main-content {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n.configurations-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 24px;\n  background: transparent;\n}\n\n/* ============================================================================\n   LOADING STATE\n   ============================================================================ */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n}\n\n/* ============================================================================\n   ERROR STATE\n   ============================================================================ */\n.error-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.error-message {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n  border: 1px solid #fecaca;\n  border-radius: 12px;\n  color: #dc2626;\n  font-size: 15px;\n  font-weight: 500;\n}\n\n.error-message i {\n  font-size: 20px;\n}\n\n/* ============================================================================\n   EMPTY STATE\n   ============================================================================ */\n.empty-state {\n  text-align: center;\n  padding: 80px 20px;\n  color: #6c757d;\n}\n\n.empty-state i {\n  font-size: 72px;\n  color: #d1d5db;\n  margin-bottom: 24px;\n  display: block;\n  opacity: 0.8;\n}\n\n.empty-state h3 {\n  color: #374151;\n  font-size: 22px;\n  font-weight: 600;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 15px;\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0 auto 28px;\n  color: #6b7280;\n}\n\n/* ============================================================================\n   CONFIGURATION GRID\n   ============================================================================ */\n.configurations-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n  gap: 24px;\n}\n\n/* ============================================================================\n   CONFIGURATION CARD\n   ============================================================================ */\n.config-card {\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid #e5e7eb;\n  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.config-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.config-card:hover {\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n  transform: translateY(-4px);\n  border-color: #c7d2fe;\n}\n\n.config-card:hover::before {\n  opacity: 1;\n}\n\n.config-card.expanded {\n  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);\n}\n\n.config-card.expanded::before {\n  opacity: 1;\n}\n\n/* Card Header */\n.card-header {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid #f3f4f6;\n  transition: background 0.2s ease;\n}\n\n.card-header:hover {\n  background: #fafbfc;\n}\n\n.config-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.config-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.config-icon i {\n  color: white;\n  font-size: 24px;\n}\n\n.config-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.config-name {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: #1f2937;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  letter-spacing: -0.02em;\n}\n\n.config-meta {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n/* Status Badge */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  transition: all 0.2s ease;\n}\n\n.status-badge i {\n  font-size: 11px;\n}\n\n.status-badge.status-active {\n  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);\n  color: #166534;\n  border: 1px solid #86efac;\n}\n\n.status-badge.status-preview {\n  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n  color: #92400e;\n  border: 1px solid #fcd34d;\n}\n\n.status-badge.status-inactive {\n  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\n  color: #4b5563;\n  border: 1px solid #d1d5db;\n}\n\n.status-badge.status-deprecated {\n  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n  color: #991b1b;\n  border: 1px solid #fca5a5;\n}\n\n/* Default Badge */\n.default-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n  color: #5b21b6;\n  border: 1px solid #c4b5fd;\n}\n\n.default-badge i {\n  font-size: 11px;\n  color: #7c3aed;\n}\n\n/* Expand Icon */\n.expand-icon {\n  font-size: 16px;\n  color: #9ca3af;\n  transition: all 0.3s ease;\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: #6366f1;\n  background: #f3f4f6;\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: #6366f1;\n}\n\n/* Card Body */\n.card-body {\n  padding: 0 24px 20px 24px;\n}\n\n.config-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: #6b7280;\n}\n\n.config-description.text-muted {\n  font-style: italic;\n  color: #9ca3af;\n}\n\n/* ============================================================================\n   EXPANDED CONTENT\n   ============================================================================ */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid #f3f4f6;\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Stats Grid */\n.config-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n  margin-bottom: 20px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-radius: 12px;\n  border: 1px solid #e2e8f0;\n}\n\n.stat-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.stat-value {\n  font-size: 14px;\n  color: #334155;\n  font-weight: 600;\n}\n\n/* Prompts Section */\n.prompts-section {\n  margin-top: 20px;\n}\n\n.section-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: #475569;\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n  margin: 0 0 12px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title i {\n  color: #6366f1;\n  font-size: 14px;\n}\n\n.prompt-links {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.prompt-link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.prompt-link:hover {\n  background: #f8fafc;\n  border-color: #c7d2fe;\n  transform: translateX(4px);\n}\n\n.prompt-link-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\n  color: #2563eb;\n  flex-shrink: 0;\n}\n\n.prompt-link-icon i {\n  font-size: 14px;\n}\n\n.prompt-link-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-link-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.prompt-link-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1e293b;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.prompt-link-arrow {\n  color: #94a3b8;\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n\n.prompt-link:hover .prompt-link-arrow {\n  color: #6366f1;\n  transform: translateX(4px);\n}\n\n.no-prompt {\n  font-size: 13px;\n  color: #94a3b8;\n  font-style: italic;\n  padding: 12px 16px;\n  background: #f8fafc;\n  border-radius: 10px;\n  border: 1px dashed #e2e8f0;\n}\n\n/* Parameters Section */\n.params-section {\n  margin-top: 20px;\n}\n\n.params-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.param-item:hover {\n  background: #f8fafc;\n  border-color: #c7d2fe;\n}\n\n.param-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.param-type-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n  color: #7c3aed;\n  flex-shrink: 0;\n}\n\n.param-type-icon i {\n  font-size: 13px;\n}\n\n.param-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.param-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1e293b;\n}\n\n.param-type {\n  font-size: 12px;\n  color: #64748b;\n  margin-top: 2px;\n}\n\n.param-value {\n  font-size: 13px;\n  color: #475569;\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: #f1f5f9;\n  padding: 4px 10px;\n  border-radius: 6px;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.no-params {\n  font-size: 13px;\n  color: #94a3b8;\n  font-style: italic;\n  padding: 12px 16px;\n  background: #f8fafc;\n  border-radius: 10px;\n  border: 1px dashed #e2e8f0;\n  text-align: center;\n}\n\n/* ============================================================================\n   CARD ACTIONS\n   ============================================================================ */\n.card-actions {\n  padding: 16px 24px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-top: 1px solid #e5e7eb;\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: white;\n  border: 1px solid #e5e7eb;\n  padding: 8px 16px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #475569;\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-btn:hover {\n  background: #f8fafc;\n  border-color: #cbd5e1;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn i {\n  font-size: 12px;\n}\n\n.action-btn-primary {\n  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n  border-color: #4f46e5;\n  color: white;\n}\n\n.action-btn-primary:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n.action-btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  border-color: #f59e0b;\n  color: #78350f;\n}\n\n.action-btn-warning:hover {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);\n}\n\n.action-btn-danger {\n  color: #dc2626;\n  border-color: #fecaca;\n}\n\n.action-btn-danger:hover {\n  background: #fef2f2;\n  border-color: #dc2626;\n}\n\n/* ============================================================================\n   LIST VIEW\n   ============================================================================ */\n.configurations-list {\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n  border: 1px solid #e5e7eb;\n  overflow: hidden;\n}\n\n.configurations-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.configurations-table thead {\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-bottom: 2px solid #e5e7eb;\n}\n\n.configurations-table th {\n  padding: 14px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: #475569;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.configurations-table th:hover {\n  background: #e2e8f0;\n  color: #6366f1;\n}\n\n.configurations-table th:last-child {\n  cursor: default;\n}\n\n.configurations-table th:last-child:hover {\n  background: transparent;\n  color: #475569;\n}\n\n.configurations-table th.sorted {\n  color: #6366f1;\n  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n}\n\n.configurations-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.configurations-table .sort-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.configurations-table .sort-icon {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.configurations-table th:hover .sort-icon {\n  opacity: 0.5;\n}\n\n.configurations-table th.sorted .sort-icon {\n  opacity: 1;\n  color: #6366f1;\n}\n\n.configurations-table tbody tr {\n  border-bottom: 1px solid #f1f5f9;\n  transition: background 0.2s ease;\n}\n\n.configurations-table tbody tr:hover {\n  background: #fafbfc;\n}\n\n.configurations-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.configurations-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: #475569;\n}\n\n.config-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.config-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  flex-shrink: 0;\n}\n\n.config-icon-small i {\n  color: white;\n  font-size: 16px;\n}\n\n.config-name-text {\n  font-weight: 600;\n  color: #1e293b;\n}\n\n.config-description-small {\n  font-size: 13px;\n  color: #64748b;\n  margin-top: 4px;\n  max-width: 300px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.table-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn-small {\n  background: white;\n  border: 1px solid #e5e7eb;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #475569;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.action-btn-small:hover {\n  background: #f8fafc;\n  border-color: #cbd5e1;\n}\n\n.action-btn-small.primary {\n  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n  border-color: #4f46e5;\n  color: white;\n}\n\n.action-btn-small.primary:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n}\n\n/* ============================================================================\n   RESPONSIVE DESIGN\n   ============================================================================ */\n@media (max-width: 1024px) {\n  .configurations-grid {\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n  }\n}\n\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    flex-wrap: wrap;\n  }\n\n  .header-controls {\n    justify-content: space-between;\n  }\n\n  .configurations-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .config-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 20px;\n  }\n\n  .config-icon {\n    width: 48px;\n    height: 48px;\n  }\n\n  .config-icon i {\n    font-size: 20px;\n  }\n\n  .card-actions {\n    flex-wrap: wrap;\n  }\n}\n\n/* ============================================================================\n   SPLITTER CUSTOMIZATION\n   ============================================================================ */\nkendo-splitter {\n  background: transparent;\n}\n\n:host ::ng-deep .k-splitter {\n  border: none;\n  background: transparent;\n}\n\n:host ::ng-deep .k-splitbar {\n  background: #e5e7eb;\n  width: 6px;\n}\n\n:host ::ng-deep .k-splitbar:hover {\n  background: #c7d2fe;\n}\n\n:host ::ng-deep .k-pane {\n  overflow: hidden;\n}\n\n/* ============================================================================\n   DETAIL PANEL - SLIDE-IN OVERLAY\n   ============================================================================ */\n\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(15, 23, 42, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: fadeIn 0.25s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: white;\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible {\n  right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-bottom: 1px solid #e2e8f0;\n  flex-shrink: 0;\n}\n\n.detail-panel-title {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.detail-icon i {\n  color: white;\n  font-size: 24px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: #1e293b;\n}\n\n.detail-subtitle {\n  font-size: 13px;\n  color: #64748b;\n  font-weight: 500;\n}\n\n.detail-panel-close {\n  background: white;\n  border: 1px solid #e2e8f0;\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #64748b;\n}\n\n.detail-panel-close:hover {\n  background: #f8fafc;\n  border-color: #cbd5e1;\n  color: #1e293b;\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section {\n  margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n  color: #4f46e5;\n}\n\n.feature-badge.default {\n  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n  color: #5b21b6;\n}\n\n.feature-badge i {\n  font-size: 11px;\n}\n\n.detail-section-title {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title i {\n  color: #6366f1;\n  font-size: 14px;\n}\n\n.detail-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: #475569;\n}\n\n.detail-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column {\n  grid-template-columns: 1fr;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-radius: 12px;\n  border: 1px solid #e2e8f0;\n}\n\n.detail-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: #64748b;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 14px;\n  color: #1e293b;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value .muted {\n  color: #94a3b8;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.detail-value i {\n  font-size: 13px;\n}\n\n/* Detail Params List */\n.detail-params-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-param-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-radius: 10px;\n  border: 1px solid #e2e8f0;\n}\n\n.detail-param-item .param-info {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.detail-param-item .param-info i {\n  color: #7c3aed;\n  font-size: 14px;\n}\n\n.detail-param-item .param-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1e293b;\n}\n\n.detail-param-item .param-value {\n  font-size: 12px;\n  color: #475569;\n  font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n  background: white;\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid #e2e8f0;\n  max-width: 150px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.params-more {\n  font-size: 12px;\n  color: #6366f1;\n  font-weight: 600;\n  text-align: center;\n  padding: 10px;\n  background: #eef2ff;\n  border-radius: 8px;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-top: 1px solid #e2e8f0;\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary {\n  background: white;\n  border: 2px solid #e2e8f0;\n  color: #475569;\n}\n\n.detail-action-btn.secondary:hover {\n  border-color: #6366f1;\n  color: #6366f1;\n  background: #fafbff;\n}\n\n.detail-action-btn.primary {\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  border: 2px solid transparent;\n  color: white;\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.detail-action-btn.primary:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);\n}\n\n/* Detail Panel Responsive */\n@media (max-width: 520px) {\n  .detail-panel {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible {\n    right: 0;\n  }\n\n  .detail-grid {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
+    }], () => [{ type: i1.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SystemConfigurationComponent, { className: "SystemConfigurationComponent", filePath: "src/AI/components/system/system-configuration.component.ts", lineNumber: 39 }); })();
 //# sourceMappingURL=system-configuration.component.js.map