@memberjunction/ng-dashboards 2.133.0 → 3.0.0

package/dist/AI/ai-dashboard.component.d.ts

@@ -0,0 +1,62 @@
+import { AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { BaseDashboard } from '../generic/base-dashboard';
+import * as i0 from "@angular/core";
+interface AIDashboardState {
+    activeTab: string;
+    modelManagementState: any;
+    promptManagementState: any;
+    agentConfigurationState: any;
+    executionMonitoringState: any;
+    systemConfigurationState: any;
+}
+export declare class AIDashboardComponent extends BaseDashboard implements AfterViewInit, OnDestroy {
+    private cdr;
+    isLoading: boolean;
+    activeTab: string;
+    selectedIndex: number;
+    modelManagementState: any;
+    promptManagementState: any;
+    agentConfigurationState: any;
+    systemConfigurationState: any;
+    executionMonitoringState: any;
+    private visitedTabs;
+    navigationItems: string[];
+    navigationConfig: {
+        text: string;
+        icon: string;
+        selected: boolean;
+    }[];
+    get navigationConfigForKendo(): {
+        text: string;
+        icon: string;
+        selected: boolean;
+    }[];
+    private stateChangeSubject;
+    constructor(cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onTabChange(tabId: string): void;
+    hasVisited(tabId: string): boolean;
+    onNavigationChange(event: any): void;
+    private setupStateManagement;
+    private emitStateChange;
+    onModelManagementStateChange(state: any): void;
+    onPromptManagementStateChange(state: any): void;
+    onAgentConfigurationStateChange(state: any): void;
+    onSystemConfigurationStateChange(state: any): void;
+    onExecutionMonitoringStateChange(state: any): void;
+    loadUserState(state: Partial<AIDashboardState>): void;
+    onOpenEntityRecord(data: {
+        entityName: string;
+        recordId: string;
+    } | Event): void;
+    initDashboard(): void;
+    loadData(): void;
+    getCurrentTabLabel(): string;
+    private updateNavigationSelection;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AIDashboardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AIDashboardComponent, "mj-ai-dashboard", never, {}, {}, never, never, false, never>;
+}
+export declare function LoadAIDashboard(): void;
+export {};
+//# sourceMappingURL=ai-dashboard.component.d.ts.map

package/dist/AI/ai-dashboard.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-dashboard.component.d.ts","sourceRoot":"","sources":["../../src/AI/ai-dashboard.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,aAAa,EAAE,SAAS,EAAa,iBAAiB,EAA2B,MAAM,eAAe,CAAC;AAC3H,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAO1D,UAAU,gBAAgB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,EAAE,GAAG,CAAC;IAC1B,qBAAqB,EAAE,GAAG,CAAC;IAC3B,uBAAuB,EAAE,GAAG,CAAC;IAC7B,wBAAwB,EAAE,GAAG,CAAC;IAC9B,wBAAwB,EAAE,GAAG,CAAC;CAC/B;AAED,qBAOa,oBAAqB,SAAQ,aAAc,YAAW,aAAa,EAAE,SAAS;IAwC7E,OAAO,CAAC,GAAG;IAtChB,SAAS,UAAS;IAClB,SAAS,SAAgB;IACzB,aAAa,SAAK;IAGlB,oBAAoB,EAAE,GAAG,CAAQ;IACjC,qBAAqB,EAAE,GAAG,CAAQ;IAClC,uBAAuB,EAAE,GAAG,CAAQ;IACpC,wBAAwB,EAAE,GAAG,CAAQ;IACrC,wBAAwB,EAAE,GAAG,CAAQ;IAG5C,OAAO,CAAC,WAAW,CAAqB;IAGjC,eAAe,EAAE,MAAM,EAAE,CAA2D;IAGpF,gBAAgB;;;;QAMrB;IAEF,IAAW,wBAAwB;;;;QAQlC;IAED,OAAO,CAAC,kBAAkB,CAAmC;gBAEzC,GAAG,EAAE,iBAAiB;IAM1C,eAAe,IAAI,IAAI;IAWvB,WAAW,IAAI,IAAI;IAIZ,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAwBhC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIlC,kBAAkB,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAoB3C,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,eAAe;IAahB,4BAA4B,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAK9C,6BAA6B,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAK/C,+BAA+B,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAKjD,gCAAgC,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAKlD,gCAAgC,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAKlD,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAqCrD,kBAAkB,CAAC,IAAI,EAAE;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,GAAG,IAAI;IAarF,aAAa,IAAI,IAAI;IAYrB,QAAQ,IAAI,IAAI;IAgBT,kBAAkB,IAAI,MAAM;IAMnC,OAAO,CAAC,yBAAyB;yCAhPtB,oBAAoB;2CAApB,oBAAoB;CAsPhC;AAED,wBAAgB,eAAe,SAE9B"}

package/dist/AI/ai-dashboard.component.js

@@ -0,0 +1,338 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BaseDashboard } from '../generic/base-dashboard';
+import { RegisterClass } from '@memberjunction/global';
+import { CompositeKey } from '@memberjunction/core';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { SharedService } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "./components/models/model-management-v2.component";
+import * as i3 from "./components/prompts/prompt-management-v2.component";
+import * as i4 from "./components/agents/agent-configuration.component";
+import * as i5 from "./components/execution-monitoring.component";
+import * as i6 from "./components/system/system-configuration.component";
+function AIDashboardComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 4)(2, "div", 5);
+    i0.ɵɵelement(3, "div", 6)(4, "div", 6)(5, "div", 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 7);
+    i0.ɵɵtext(7, "Loading AI Dashboard...");
+    i0.ɵɵelementEnd()()();
+} }
+function AIDashboardComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-model-management-v2", 12);
+    i0.ɵɵlistener("openEntityRecord", function AIDashboardComponent_Conditional_3_Conditional_2_Template_app_model_management_v2_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); })("stateChange", function AIDashboardComponent_Conditional_3_Conditional_2_Template_app_model_management_v2_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onModelManagementStateChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("initialState", ctx_r1.modelManagementState);
+} }
+function AIDashboardComponent_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-prompt-management-v2", 13);
+    i0.ɵɵlistener("openEntityRecord", function AIDashboardComponent_Conditional_3_Conditional_3_Template_app_prompt_management_v2_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); })("stateChange", function AIDashboardComponent_Conditional_3_Conditional_3_Template_app_prompt_management_v2_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPromptManagementStateChange($event)); });
+    i0.ɵɵelementEnd();
+} }
+function AIDashboardComponent_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-agent-configuration", 12);
+    i0.ɵɵlistener("openEntityRecord", function AIDashboardComponent_Conditional_3_Conditional_4_Template_app_agent_configuration_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); })("stateChange", function AIDashboardComponent_Conditional_3_Conditional_4_Template_app_agent_configuration_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAgentConfigurationStateChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("initialState", ctx_r1.agentConfigurationState);
+} }
+function AIDashboardComponent_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-execution-monitoring", 12);
+    i0.ɵɵlistener("openEntityRecord", function AIDashboardComponent_Conditional_3_Conditional_5_Template_app_execution_monitoring_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); })("stateChange", function AIDashboardComponent_Conditional_3_Conditional_5_Template_app_execution_monitoring_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onExecutionMonitoringStateChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("initialState", ctx_r1.executionMonitoringState);
+} }
+function AIDashboardComponent_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-system-configuration", 13);
+    i0.ɵɵlistener("openEntityRecord", function AIDashboardComponent_Conditional_3_Conditional_6_Template_app_system_configuration_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); })("stateChange", function AIDashboardComponent_Conditional_3_Conditional_6_Template_app_system_configuration_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSystemConfigurationStateChange($event)); });
+    i0.ɵɵelementEnd();
+} }
+function AIDashboardComponent_Conditional_3_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function AIDashboardComponent_Conditional_3_For_9_Template_div_click_0_listener() { const $index_r8 = i0.ɵɵrestoreView(_r7).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTabChange(ctx_r1.navigationItems[$index_r8])); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const navItem_r9 = ctx.$implicit;
+    i0.ɵɵclassProp("active", navItem_r9.selected);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(navItem_r9.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(navItem_r9.text);
+} }
+function AIDashboardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 8);
+    i0.ɵɵtemplate(2, AIDashboardComponent_Conditional_3_Conditional_2_Template, 1, 1, "app-model-management-v2", 9)(3, AIDashboardComponent_Conditional_3_Conditional_3_Template, 1, 0, "app-prompt-management-v2")(4, AIDashboardComponent_Conditional_3_Conditional_4_Template, 1, 1, "app-agent-configuration", 9)(5, AIDashboardComponent_Conditional_3_Conditional_5_Template, 1, 1, "app-execution-monitoring", 9)(6, AIDashboardComponent_Conditional_3_Conditional_6_Template, 1, 0, "app-system-configuration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 10);
+    i0.ɵɵrepeaterCreate(8, AIDashboardComponent_Conditional_3_For_9_Template, 4, 5, "div", 11, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.activeTab === "models" && ctx_r1.hasVisited("models") ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.activeTab === "prompts" && ctx_r1.hasVisited("prompts") ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.activeTab === "agents" && ctx_r1.hasVisited("agents") ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.activeTab === "monitoring" && ctx_r1.hasVisited("monitoring") ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.activeTab === "config" && ctx_r1.hasVisited("config") ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.navigationConfig);
+} }
+let AIDashboardComponent = class AIDashboardComponent extends BaseDashboard {
+    cdr;
+    isLoading = false;
+    activeTab = 'monitoring'; // Default tab changed to monitoring
+    selectedIndex = 0; // Track selected navigation index - default to monitoring (index 0)
+    // Component states
+    modelManagementState = null;
+    promptManagementState = null;
+    agentConfigurationState = null;
+    systemConfigurationState = null;
+    executionMonitoringState = null;
+    // Track which tabs have been visited for lazy loading
+    visitedTabs = new Set();
+    // Navigation items for bottom navigation - reordered with monitoring first
+    navigationItems = ['monitoring', 'prompts', 'agents', 'models', 'config'];
+    // Navigation configuration as a property to avoid change detection issues
+    navigationConfig = [
+        { text: 'Monitor', icon: 'fa-solid fa-chart-line', selected: false },
+        { text: 'Prompts', icon: 'fa-solid fa-comment-dots', selected: false },
+        { text: 'Agents', icon: 'fa-solid fa-robot', selected: false },
+        { text: 'Models', icon: 'fa-solid fa-microchip', selected: false },
+        { text: 'Config', icon: 'fa-solid fa-cogs', selected: false }
+    ];
+    get navigationConfigForKendo() {
+        return [
+            { text: 'Monitor', icon: 'chart-line', selected: this.activeTab === 'monitoring' },
+            { text: 'Prompts', icon: 'comment', selected: this.activeTab === 'prompts' },
+            { text: 'Agents', icon: 'user', selected: this.activeTab === 'agents' },
+            { text: 'Models', icon: 'gear', selected: this.activeTab === 'models' },
+            { text: 'Config', icon: 'cog', selected: this.activeTab === 'config' }
+        ];
+    }
+    stateChangeSubject = new Subject();
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.setupStateManagement();
+        this.updateNavigationSelection();
+    }
+    ngAfterViewInit() {
+        // Initialize the dashboard after view init
+        // Mark the initial tab as visited
+        this.visitedTabs.add(this.activeTab);
+        this.updateNavigationSelection();
+        this.emitStateChange();
+        // Force change detection to ensure view is stable
+        this.cdr.detectChanges();
+    }
+    ngOnDestroy() {
+        this.stateChangeSubject.complete();
+    }
+    onTabChange(tabId) {
+        this.activeTab = tabId;
+        const index = this.navigationItems.indexOf(tabId);
+        // Update selectedIndex immediately
+        this.selectedIndex = index >= 0 ? index : 0;
+        // Update navigation selection
+        this.updateNavigationSelection();
+        // Defer only the resize operation
+        setTimeout(() => {
+            // Invoke manual resize after tab change to fix rendering issues
+            // TODO: Remove this when resize issues are properly fixed
+            SharedService.Instance.InvokeManualResize();
+        }, 100); // Give a bit more time for the DOM to update
+        this.visitedTabs.add(tabId); // Mark tab as visited
+        this.emitStateChange();
+        // Trigger change detection
+        this.cdr.markForCheck();
+    }
+    hasVisited(tabId) {
+        return this.visitedTabs.has(tabId);
+    }
+    onNavigationChange(event) {
+        // Legacy method for Kendo navigation - kept for compatibility
+        const index = event.index;
+        if (index >= 0 && index < this.navigationItems.length) {
+            this.selectedIndex = index;
+            this.activeTab = this.navigationItems[index];
+            this.updateNavigationSelection();
+            this.emitStateChange();
+            // Invoke manual resize after navigation change
+            // TODO: Remove this when resize issues are properly fixed
+            setTimeout(() => {
+                SharedService.Instance.InvokeManualResize();
+            }, 100);
+            // Trigger change detection
+            this.cdr.markForCheck();
+        }
+    }
+    setupStateManagement() {
+        // Debounced state change emissions
+        this.stateChangeSubject.pipe(debounceTime(50)).subscribe(state => {
+            this.UserStateChanged.emit(state);
+        });
+    }
+    emitStateChange() {
+        const state = {
+            activeTab: this.activeTab,
+            modelManagementState: this.modelManagementState || {},
+            promptManagementState: this.promptManagementState || {},
+            agentConfigurationState: this.agentConfigurationState || {},
+            executionMonitoringState: this.executionMonitoringState || {},
+            systemConfigurationState: this.systemConfigurationState || {}
+        };
+        this.stateChangeSubject.next(state);
+    }
+    onModelManagementStateChange(state) {
+        this.modelManagementState = state;
+        this.emitStateChange();
+    }
+    onPromptManagementStateChange(state) {
+        this.promptManagementState = state;
+        this.emitStateChange();
+    }
+    onAgentConfigurationStateChange(state) {
+        this.agentConfigurationState = state;
+        this.emitStateChange();
+    }
+    onSystemConfigurationStateChange(state) {
+        this.systemConfigurationState = state;
+        this.emitStateChange();
+    }
+    onExecutionMonitoringStateChange(state) {
+        this.executionMonitoringState = state;
+        this.emitStateChange();
+    }
+    loadUserState(state) {
+        if (state.activeTab) {
+            this.activeTab = state.activeTab;
+            const index = this.navigationItems.indexOf(state.activeTab);
+            // Update selectedIndex immediately - ensure we don't set to -1
+            this.selectedIndex = index >= 0 ? index : 0;
+            // Mark the tab as visited
+            this.visitedTabs.add(state.activeTab);
+            // Update navigation selection
+            this.updateNavigationSelection();
+        }
+        // Store component states for when they're rendered
+        if (state.modelManagementState) {
+            this.modelManagementState = state.modelManagementState;
+        }
+        if (state.executionMonitoringState) {
+            this.executionMonitoringState = state.executionMonitoringState;
+        }
+        if (state.promptManagementState) {
+            this.promptManagementState = state.promptManagementState;
+        }
+        if (state.agentConfigurationState) {
+            this.agentConfigurationState = state.agentConfigurationState;
+        }
+        if (state.systemConfigurationState) {
+            this.systemConfigurationState = state.systemConfigurationState;
+        }
+        // Trigger change detection for OnPush strategy
+        this.cdr.markForCheck();
+    }
+    // Handle entity record opening from sub-components
+    onOpenEntityRecord(data) {
+        // Type guard to check if it's the correct event type
+        if (data && typeof data === 'object' && 'entityName' in data && 'recordId' in data) {
+            const entityData = data;
+            const compositeKey = new CompositeKey([{ FieldName: 'ID', Value: entityData.recordId }]);
+            this.OpenEntityRecord.emit({
+                EntityName: entityData.entityName,
+                RecordPKey: compositeKey
+            });
+        }
+    }
+    // Required BaseDashboard methods
+    initDashboard() {
+        try {
+            this.isLoading = true;
+            // Initialize AI dashboard components
+        }
+        catch (error) {
+            console.error('Error initializing AI dashboard:', error);
+            this.Error.emit(new Error('Failed to initialize AI dashboard. Please try again.'));
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    loadData() {
+        // Load any initial data needed for the AI dashboard
+        // Check if we have user state in the Config and apply it
+        if (this.Config?.userState) {
+            // Wrap in setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError
+            setTimeout(() => {
+                if (this.Config?.userState) {
+                    this.loadUserState(this.Config.userState);
+                }
+            }, 0);
+        }
+        // Emit loading complete event
+        this.LoadingComplete.emit();
+    }
+    getCurrentTabLabel() {
+        const tabIndex = this.navigationItems.indexOf(this.activeTab);
+        const labels = ['Monitor', 'Prompts', 'Agents', 'Models', 'Config'];
+        return tabIndex >= 0 ? labels[tabIndex] : 'AI Administration';
+    }
+    updateNavigationSelection() {
+        // Update the selected state for navigation items
+        this.navigationConfig.forEach((item, index) => {
+            item.selected = this.navigationItems[index] === this.activeTab;
+        });
+    }
+    static ɵfac = function AIDashboardComponent_Factory(t) { return new (t || AIDashboardComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIDashboardComponent, selectors: [["mj-ai-dashboard"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 2, consts: [[1, "ai-dashboard-container"], ["kendoDialogContainer", ""], [1, "loading-container"], [1, "dashboard-content-wrapper"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "dashboard-content"], [3, "initialState"], [1, "ai-dashboard-nav"], [1, "nav-item", 3, "active"], [3, "openEntityRecord", "stateChange", "initialState"], [3, "openEntityRecord", "stateChange"], [1, "nav-item", 3, "click"]], template: function AIDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "div", 1);
+            i0.ɵɵtemplate(2, AIDashboardComponent_Conditional_2_Template, 8, 0, "div", 2)(3, AIDashboardComponent_Conditional_3_Template, 10, 5, "div", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading ? 3 : -1);
+        } }, dependencies: [i1.DialogContainerDirective, i2.ModelManagementV2Component, i3.PromptManagementV2Component, i4.AgentConfigurationComponent, i5.ExecutionMonitoringComponent, i6.SystemConfigurationComponent], styles: [".ai-dashboard-container[_ngcontent-%COMP%] {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n  }\n\n  .current-tab-info {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n\n  .header-controls {\n    display: flex;\n    gap: 8px;\n\n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n\n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n\n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n\n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n\n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n\n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.dashboard-content-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.dashboard-content[_ngcontent-%COMP%] {\n  overflow: hidden;\n  flex: 1;\n  margin-bottom: 60px;\n}\n\n.ai-dashboard-nav[_ngcontent-%COMP%] {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  flex-shrink: 0;\n  display: flex;\n  background: white;\n  border-top: 1px solid #e0e0e0;\n  padding: 0;\n\n  .nav-item {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #666;\n    font-size: 12px;\n    border-right: 1px solid #e0e0e0;\n\n    &:last-child {\n      border-right: none;\n    }\n\n    &:hover {\n      background-color: #f5f5f5;\n      color: #2196f3;\n    }\n\n    &.active {\n      background-color: #e3f2fd;\n      color: #2196f3;\n      font-weight: 600;\n\n      i {\n        color: #2196f3;\n      }\n    }\n\n    i {\n      font-size: 18px;\n      margin-bottom: 4px;\n      color: inherit;\n    }\n\n    span {\n      font-size: 11px;\n      text-align: center;\n      line-height: 1.2;\n    }\n  }\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n\n  &:nth-child(1) {\n    border-top-color: #2196f3;\n    animation-delay: 0s;\n  }\n\n  &:nth-child(2) {\n    border-top-color: #9c27b0;\n    animation-delay: 0.3s;\n    transform: scale(0.8);\n  }\n\n  &:nth-child(3) {\n    border-top-color: #ff6b35;\n    animation-delay: 0.6s;\n    transform: scale(0.6);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}"], changeDetection: 0 });
+};
+AIDashboardComponent = __decorate([
+    RegisterClass(BaseDashboard, 'AIDashboard')
+], AIDashboardComponent);
+export { AIDashboardComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIDashboardComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-ai-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-dashboard-container\">\n  <!-- Dialog container for Kendo dialogs -->\n  <div kendoDialogContainer></div>\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"loading-spinner\">\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n        </div>\n        <div class=\"loading-text\">Loading AI Dashboard...</div>\n      </div>\n    </div>\n  }\n  \n  @if (!isLoading) {\n    <div class=\"dashboard-content-wrapper\">\n      <div class=\"dashboard-content\">\n        @if (activeTab === 'models' && hasVisited('models')) {\n          <app-model-management-v2\n            [initialState]=\"modelManagementState\"\n            (openEntityRecord)=\"onOpenEntityRecord($event)\"\n            (stateChange)=\"onModelManagementStateChange($event)\"\n            >\n          </app-model-management-v2>\n        }\n        \n        @if (activeTab === 'prompts' && hasVisited('prompts')) {\n          <app-prompt-management-v2\n            (openEntityRecord)=\"onOpenEntityRecord($event)\"\n            (stateChange)=\"onPromptManagementStateChange($event)\"\n            >\n          </app-prompt-management-v2>\n        }\n        \n        @if (activeTab === 'agents' && hasVisited('agents')) {\n          <app-agent-configuration\n            [initialState]=\"agentConfigurationState\"\n            (openEntityRecord)=\"onOpenEntityRecord($event)\"\n            (stateChange)=\"onAgentConfigurationStateChange($event)\"\n            >\n          </app-agent-configuration>\n        }\n        \n        @if (activeTab === 'monitoring' && hasVisited('monitoring')) {\n          <app-execution-monitoring\n            [initialState]=\"executionMonitoringState\"\n            (openEntityRecord)=\"onOpenEntityRecord($event)\"\n            (stateChange)=\"onExecutionMonitoringStateChange($event)\"\n            >\n          </app-execution-monitoring>\n        }\n        \n        @if (activeTab === 'config' && hasVisited('config')) {\n          <app-system-configuration\n            (openEntityRecord)=\"onOpenEntityRecord($event)\"\n            (stateChange)=\"onSystemConfigurationStateChange($event)\"\n            >\n          </app-system-configuration>\n        }\n      </div>\n      \n      <div class=\"ai-dashboard-nav\">\n        @for (navItem of navigationConfig; track $index) {\n          <div \n            class=\"nav-item\"\n            [class.active]=\"navItem.selected\"\n            (click)=\"onTabChange(navigationItems[$index])\">\n            <i [class]=\"navItem.icon\"></i>\n            <span>{{ navItem.text }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [".ai-dashboard-container {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n  }\n\n  .current-tab-info {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n\n  .header-controls {\n    display: flex;\n    gap: 8px;\n\n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n\n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n\n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n\n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n\n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n\n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n\n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.dashboard-content-wrapper {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.dashboard-content {\n  overflow: hidden;\n  flex: 1;\n  margin-bottom: 60px;\n}\n\n.ai-dashboard-nav {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  flex-shrink: 0;\n  display: flex;\n  background: white;\n  border-top: 1px solid #e0e0e0;\n  padding: 0;\n\n  .nav-item {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #666;\n    font-size: 12px;\n    border-right: 1px solid #e0e0e0;\n\n    &:last-child {\n      border-right: none;\n    }\n\n    &:hover {\n      background-color: #f5f5f5;\n      color: #2196f3;\n    }\n\n    &.active {\n      background-color: #e3f2fd;\n      color: #2196f3;\n      font-weight: 600;\n\n      i {\n        color: #2196f3;\n      }\n    }\n\n    i {\n      font-size: 18px;\n      margin-bottom: 4px;\n      color: inherit;\n    }\n\n    span {\n      font-size: 11px;\n      text-align: center;\n      line-height: 1.2;\n    }\n  }\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s linear infinite;\n\n  &:nth-child(1) {\n    border-top-color: #2196f3;\n    animation-delay: 0s;\n  }\n\n  &:nth-child(2) {\n    border-top-color: #9c27b0;\n    animation-delay: 0.3s;\n    transform: scale(0.8);\n  }\n\n  &:nth-child(3) {\n    border-top-color: #ff6b35;\n    animation-delay: 0.6s;\n    transform: scale(0.6);\n  }\n}\n\n.loading-text {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIDashboardComponent, { className: "AIDashboardComponent" }); })();
+export function LoadAIDashboard() {
+    // Prevents tree-shaking
+}
+//# sourceMappingURL=ai-dashboard.component.js.map

package/dist/AI/ai-dashboard.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-dashboard.component.js","sourceRoot":"","sources":["../../src/AI/ai-dashboard.component.ts","../../src/AI/ai-dashboard.component.html"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAA0D,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC3H,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;;;;;;;;ICAlD,AADF,AADF,8BAA+B,aACA,aACE;IAG3B,AADA,AADA,yBAAgC,aACA,aACA;IAClC,iBAAM;IACN,8BAA0B;IAAA,uCAAuB;IAErD,AADE,AADmD,iBAAM,EACnD,EACF;;;;IAOA,mDAIG;IADD,AADA,oPAAoB,iCAA0B,KAAC,6NAChC,2CAAoC,KAAC;IAEtD,iBAA0B;;;IAJxB,0DAAqC;;;;IAQvC,oDAGG;IADD,AADA,qPAAoB,iCAA0B,KAAC,8NAChC,4CAAqC,KAAC;IAEvD,iBAA2B;;;;IAI3B,mDAIG;IADD,AADA,oPAAoB,iCAA0B,KAAC,6NAChC,8CAAuC,KAAC;IAEzD,iBAA0B;;;IAJxB,6DAAwC;;;;IAQ1C,oDAIG;IADD,AADA,qPAAoB,iCAA0B,KAAC,8NAChC,+CAAwC,KAAC;IAE1D,iBAA2B;;;IAJzB,8DAAyC;;;;IAQ3C,oDAGG;IADD,AADA,qPAAoB,iCAA0B,KAAC,8NAChC,+CAAwC,KAAC;IAE1D,iBAA2B;;;;IAM3B,+BAGiD;IAA/C,qNAAS,qDAAoC,KAAC;IAC9C,oBAA8B;IAC9B,4BAAM;IAAA,YAAkB;IAC1B,AAD0B,iBAAO,EAC3B;;;IAJJ,6CAAiC;IAE9B,cAAsB;IAAtB,8BAAsB;IACnB,eAAkB;IAAlB,qCAAkB;;;IApD9B,AADF,8BAAuC,aACN;IAoC7B,AATA,AATA,AARA,AATA,+GAAsD,gGASE,kGAQF,mGASQ,gGASR;IAOxD,iBAAM;IAEN,+BAA8B;IAC5B,qHAQC;IAEL,AADE,iBAAM,EACF;;;IAvDF,eAOC;IAPD,uFAOC;IAED,cAMC;IAND,yFAMC;IAED,cAOC;IAPD,uFAOC;IAED,cAOC;IAPD,+FAOC;IAED,cAMC;IAND,uFAMC;IAID,eAQC;IARD,sCAQC;;ADhDF,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,aAAa;IAwCjC;IAtCb,SAAS,GAAG,KAAK,CAAC;IAClB,SAAS,GAAG,YAAY,CAAC,CAAC,oCAAoC;IAC9D,aAAa,GAAG,CAAC,CAAC,CAAC,oEAAoE;IAE9F,mBAAmB;IACZ,oBAAoB,GAAQ,IAAI,CAAC;IACjC,qBAAqB,GAAQ,IAAI,CAAC;IAClC,uBAAuB,GAAQ,IAAI,CAAC;IACpC,wBAAwB,GAAQ,IAAI,CAAC;IACrC,wBAAwB,GAAQ,IAAI,CAAC;IAE5C,sDAAsD;IAC9C,WAAW,GAAG,IAAI,GAAG,EAAU,CAAC;IAExC,2EAA2E;IACpE,eAAe,GAAa,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAE3F,0EAA0E;IACnE,gBAAgB,GAAG;QACxB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,wBAAwB,EAAE,QAAQ,EAAE,KAAK,EAAE;QACpE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,0BAA0B,EAAE,QAAQ,EAAE,KAAK,EAAE;QACtE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC9D,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,uBAAuB,EAAE,QAAQ,EAAE,KAAK,EAAE;QAClE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAE,QAAQ,EAAE,KAAK,EAAE;KAC9D,CAAC;IAEF,IAAW,wBAAwB;QACjC,OAAO;YACL,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY,EAAE;YAClF,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE;YAC5E,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;YACvE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;YACvE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;SACvE,CAAC;IACJ,CAAC;IAEO,kBAAkB,GAAG,IAAI,OAAO,EAAoB,CAAC;IAE7D,YAAoB,GAAsB;QACxC,KAAK,EAAE,CAAC;QADU,QAAG,GAAH,GAAG,CAAmB;QAExC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAED,eAAe;QACb,2CAA2C;QAC3C,kCAAkC;QAClC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrC,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,kDAAkD;QAClD,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC3B,CAAC;IAED,WAAW;QACT,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,CAAC;IACrC,CAAC;IAEM,WAAW,CAAC,KAAa;QAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAElD,mCAAmC;QACnC,IAAI,CAAC,aAAa,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAE5C,8BAA8B;QAC9B,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAEjC,kCAAkC;QAClC,UAAU,CAAC,GAAG,EAAE;YACd,gEAAgE;YAChE,0DAA0D;YAC1D,aAAa,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC;QAC9C,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,6CAA6C;QAEtD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,sBAAsB;QACnD,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,2BAA2B;QAC3B,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAEM,UAAU,CAAC,KAAa;QAC7B,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAEM,kBAAkB,CAAC,KAAU;QAClC,8DAA8D;QAC9D,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QAC1B,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;YACtD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YAC7C,IAAI,CAAC,yBAAyB,EAAE,CAAC;YACjC,IAAI,CAAC,eAAe,EAAE,CAAC;YAEvB,+CAA+C;YAC/C,0DAA0D;YAC1D,UAAU,CAAC,GAAG,EAAE;gBACd,aAAa,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC;YAC9C,CAAC,EAAE,GAAG,CAAC,CAAC;YAER,2BAA2B;YAC3B,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,oBAAoB;QAC1B,mCAAmC;QACnC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAC1B,YAAY,CAAC,EAAE,CAAC,CACjB,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAClB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,MAAM,KAAK,GAAqB;YAC9B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,IAAI,EAAE;YACrD,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,IAAI,EAAE;YACvD,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,IAAI,EAAE;YAC3D,wBAAwB,EAAE,IAAI,CAAC,wBAAwB,IAAI,EAAE;YAC7D,wBAAwB,EAAE,IAAI,CAAC,wBAAwB,IAAI,EAAE;SAC9D,CAAC;QAEF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;IAEM,4BAA4B,CAAC,KAAU;QAC5C,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAClC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEM,6BAA6B,CAAC,KAAU;QAC7C,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;QACnC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEM,+BAA+B,CAAC,KAAU;QAC/C,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QACrC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEM,gCAAgC,CAAC,KAAU;QAChD,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC;QACtC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEM,gCAAgC,CAAC,KAAU;QAChD,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC;QACtC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEM,aAAa,CAAC,KAAgC;QACnD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;YACjC,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAE5D,+DAA+D;YAC/D,IAAI,CAAC,aAAa,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAE5C,0BAA0B;YAC1B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAEtC,8BAA8B;YAC9B,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACnC,CAAC;QAED,mDAAmD;QACnD,IAAI,KAAK,CAAC,oBAAoB,EAAE,CAAC;YAC/B,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;QACzD,CAAC;QACD,IAAI,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACnC,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,CAAC;QACjE,CAAC;QACD,IAAI,KAAK,CAAC,qBAAqB,EAAE,CAAC;YAChC,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC;QAC3D,CAAC;QACD,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC;YAClC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC,uBAAuB,CAAC;QAC/D,CAAC;QACD,IAAI,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACnC,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,CAAC;QACjE,CAAC;QAED,+CAA+C;QAC/C,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAED,mDAAmD;IAC5C,kBAAkB,CAAC,IAAoD;QAC5E,qDAAqD;QACrD,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,YAAY,IAAI,IAAI,IAAI,UAAU,IAAI,IAAI,EAAE,CAAC;YACnF,MAAM,UAAU,GAAG,IAA8C,CAAC;YAClE,MAAM,YAAY,GAAG,IAAI,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;YACzF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,UAAU,EAAE,UAAU,CAAC,UAAU;gBACjC,UAAU,EAAE,YAAY;aACzB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,iCAAiC;IACjC,aAAa;QACX,IAAI,CAAC;YACH,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,qCAAqC;QACvC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,kCAAkC,EAAE,KAAK,CAAC,CAAC;YACzD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC,CAAC;QACrF,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAED,QAAQ;QACN,oDAAoD;QACpD,yDAAyD;QACzD,IAAI,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC;YAC3B,0EAA0E;YAC1E,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC;oBAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBAC5C,CAAC;YACH,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;QAED,8BAA8B;QAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC;IAEM,kBAAkB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC9D,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACpE,OAAO,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAChE,CAAC;IAEO,yBAAyB;QAC/B,iDAAiD;QACjD,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC;QACjE,CAAC,CAAC,CAAC;IACL,CAAC;8EArPU,oBAAoB;6DAApB,oBAAoB;YCxBjC,8BAAoC;YAElC,yBAAgC;YAchC,AAbA,6EAAiB,iEAaC;YA4DpB,iBAAM;;YAzEJ,eAWC;YAXD,wCAWC;YAED,cA2DC;YA3DD,yCA2DC;;;ADnDU,oBAAoB;IADhC,aAAa,CAAC,aAAa,EAAE,aAAa,CAAC;GAC/B,oBAAoB,CAsPhC;;iFAtPY,oBAAoB;cAPhC,SAAS;2BACE,iBAAiB,mBAGV,uBAAuB,CAAC,MAAM;;kFAGpC,oBAAoB;AAwPjC,MAAM,UAAU,eAAe;IAC7B,wBAAwB;AAC1B,CAAC"}

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

@@ -913,7 +913,7 @@ let AgentConfigurationComponent = class AgentConfigurationComponent extends Base
     async GetResourceIconClass(data) {
         return 'fa-solid fa-robot';
     }
-    static ɵfac = function AgentConfigurationComponent_Factory(t) { return new (t || AgentConfigurationComponent)(i0.ɵɵdirectiveInject(i1.AITestHarnessDialogService), i0.ɵɵdirectiveInject(i2.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function AgentConfigurationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AgentConfigurationComponent)(i0.ɵɵdirectiveInject(i1.AITestHarnessDialogService), i0.ɵɵdirectiveInject(i2.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 32, vars: 22, consts: [[1, "agent-configuration-container"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-robot"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "item-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Create New Agent", 1, "control-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "main-content"], ["orientation", "horizontal", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "agents", "filteredAgents", "filters"], [3, "resizable", "scrollable"], [1, "agents-content"], [1, "loading-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], ["text", "Loading agents...", "size", "large"], [1, "empty-state"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "agents-grid"], [1, "agents-list"], [1, "agent-card", 3, "expanded"], [1, "agent-card"], [1, "card-header", 3, "click"], [1, "agent-info"], [1, "agent-icon"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-details"], [1, "agent-name"], [1, "agent-meta"], [1, "meta-item"], [1, "fa-solid", "fa-microchip"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "agent-description"], [1, "agent-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "View Details", 1, "action-btn"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "fa-solid", "fa-bolt"], [1, "agent-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-check", 2, "color", "#28a745"], [1, "fa-solid", "fa-times", 2, "color", "#dc3545"], ["type", "button", "title", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "agents-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "agent-name-cell"], [1, "agent-icon-small"], [1, "agent-logo-small", 3, "src", "alt"], [1, "agent-description-small"], [1, "status-badge"], [1, "execution-mode"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], ["type", "button", "title", "Run Agent", 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-logo", 3, "src", "alt"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "feature-badge"], [1, "detail-section-title"], [1, "fa-solid", "fa-cog"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "secondary"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], [1, "fa-solid", "fa-check", 2, "color", "#10b981"], [1, "fa-solid", "fa-times", 2, "color", "#ef4444"], ["type", "button", 1, "detail-action-btn", "secondary", 3, "click"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2", 3);
             i0.ɵɵelement(4, "i", 4);
@@ -987,5 +987,5 @@ export { AgentConfigurationComponent };
         type: Component,
         args: [{ selector: 'app-agent-configuration', template: "<div class=\"agent-configuration-container\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <h2 class=\"dashboard-title\">\n        <i class=\"fa-solid fa-robot\"></i>\n        Agent Configuration\n      </h2>\n      <button \n        type=\"button\" \n        class=\"filter-toggle-btn\"\n        (click)=\"toggleFilterPanel()\"\n        title=\"Toggle Filters\">\n        <i class=\"fa-solid fa-filter\"></i>\n        @if (filterPanelVisible) {\n          Hide Filters\n        } @else {\n          Show Filters\n        }\n      </button>\n      <span class=\"item-count\">{{ filteredAgents.length }} agents</span>\n    </div>\n    \n    <div class=\"header-controls\">\n      <div class=\"view-toggle\">\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'grid'\"\n          (click)=\"setViewMode('grid')\"\n          title=\"Grid View\">\n          <i class=\"fa-solid fa-grip\"></i>\n        </button>\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'list'\"\n          (click)=\"setViewMode('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n      </div>\n      \n      <button \n        type=\"button\" \n        class=\"control-btn primary\"\n        (click)=\"createNewAgent()\"\n        title=\"Create New Agent\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Agent\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <div class=\"main-content\" >\n    <kendo-splitter \n      class=\"main-splitter\"\n      orientation=\"horizontal\"\n      (layoutChange)=\"onMainSplitterChange($event)\"\n      >\n      \n      <!-- Filter Panel (Left) -->\n      <kendo-splitter-pane \n        [size]=\"filterPanelVisible ? '320px' : '0px'\"\n        [collapsible]=\"false\"\n        [resizable]=\"filterPanelVisible\"\n        [scrollable]=\"false\"\n        [hidden]=\"!filterPanelVisible\">\n        <mj-agent-filter-panel\n          [agents]=\"agents\"\n          [filteredAgents]=\"filteredAgents\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-agent-filter-panel>\n      </kendo-splitter-pane>\n      \n      <!-- Agents List Panel -->\n      <kendo-splitter-pane\n        [resizable]=\"true\"\n        [scrollable]=\"true\">\n        <div class=\"agents-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading agents...\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Agents Display -->\n          @if (!isLoading) {\n            @if (filteredAgents.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-robot\"></i>\n                <h3>No agents found</h3>\n                <p>No agents match your current filters. Try adjusting your search criteria or create a new agent.</p>\n                <button \n                  type=\"button\" \n                  class=\"empty-state-btn\"\n                  (click)=\"createNewAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create New Agent\n                </button>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"agents-grid\">\n                  @for (agent of filteredAgents; track agent.ID) {\n                    <div class=\"agent-card\" [class.expanded]=\"expandedAgentId === agent.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleAgentExpansion(agent.ID)\">\n                        <div class=\"agent-info\">\n                          <div class=\"agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                            @if (hasLogoURL(agent)) {\n                              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo\">\n                            } @else {\n                              <i [class]=\"getAgentIcon(agent)\"></i>\n                            }\n                          </div>\n                          <div class=\"agent-details\">\n                            <h4 class=\"agent-name\">{{ agent.Name }}</h4>\n                            <div class=\"agent-meta\">\n                              <span class=\"meta-item\">\n                                <i class=\"fa-solid fa-microchip\"></i>\n                                {{ agent.ExecutionMode }}\n                              </span>\n                              @if (agent.Status) {\n                                <span class=\"meta-item\" [class]=\"'status-' + agent.Status.toLowerCase()\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  {{ agent.Status }}\n                                </span>\n                              }\n                              @if (agent.ExposeAsAction) {\n                                <span class=\"meta-item\">\n                                  <i class=\"fa-solid fa-bolt\"></i>\n                                  Exposed\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                        \n                        <i class=\"fa-solid fa-chevron-down expand-icon\" \n                           [class.rotated]=\"expandedAgentId === agent.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (agent.Description) {\n                          <p class=\"agent-description\">{{ agent.Description }}</p>\n                        } @else {\n                          <p class=\"agent-description text-muted\">No description provided</p>\n                        }\n                        \n                        <!-- Expandable Content -->\n                        @if (expandedAgentId === agent.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"agent-stats\">\n                              @if (agent.Parent) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Parent</span>\n                                  <span class=\"stat-value\">{{ agent.Parent }}</span>\n                                </div>\n                              }\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Context Compression</span>\n                                <span class=\"stat-value\">\n                                  @if (agent.EnableContextCompression) {\n                                    <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Enabled\n                                  } @else {\n                                    <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> Disabled\n                                  }\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        @if (UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn\"\n                            (click)=\"showAgentDetails(agent, $event)\"\n                            title=\"View Details\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                            Details\n                          </button>\n                        }\n\n                        @if (agent.Status === 'Active' && UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"runAgent(agent); $event.stopPropagation()\"\n                            title=\"Run Agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              \n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"agents-list\">\n                  <table class=\"agents-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"sortBy('Name')\"\n                            [class.sorted]=\"sortColumn === 'Name'\"\n                            [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (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('ExecutionMode')\"\n                            [class.sorted]=\"sortColumn === 'ExecutionMode'\"\n                            [class.desc]=\"sortColumn === 'ExecutionMode' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Execution Mode\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (agent of filteredAgents; track agent.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"agent-name-cell\">\n                              <div class=\"agent-icon-small\" [style.background-color]=\"getAgentIconColor(agent)\">\n                                @if (hasLogoURL(agent)) {\n                                  <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo-small\">\n                                } @else {\n                                  <i [class]=\"getAgentIcon(agent)\"></i>\n                                }\n                              </div>\n                              <div>\n                                <div class=\"agent-name\">{{ agent.Name }}</div>\n                                @if (agent.Description) {\n                                  <div class=\"agent-description-small\">{{ agent.Description }}</div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status || 'Unknown' }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"execution-mode\">\n                              <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n                              {{ agent.ExecutionMode }}\n                            </span>\n                          </td>\n                          <td>\n                            <div class=\"table-actions\">\n                              @if (UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small\"\n                                  (click)=\"showAgentDetails(agent)\"\n                                  title=\"View Details\">\n                                  <i class=\"fa-solid fa-eye\"></i>\n                                </button>\n                              }\n                              @if (agent.Status === 'Active' && UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small primary\"\n                                  (click)=\"runAgent(agent)\"\n                                  title=\"Run Agent\">\n                                  <i class=\"fa-solid fa-play\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n        </div>\n      </kendo-splitter-pane>\n    </kendo-splitter>\n  </div>\n\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedAgent) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\" [style.background-color]=\"getAgentIconColor(selectedAgent)\">\n            @if (hasLogoURL(selectedAgent)) {\n              <img [src]=\"selectedAgent.LogoURL\" [alt]=\"selectedAgent.Name + ' logo'\" class=\"detail-logo\">\n            } @else {\n              <i [class]=\"getAgentIcon(selectedAgent)\"></i>\n            }\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedAgent.Name }}</h3>\n            <span class=\"detail-subtitle\">{{ getAgentTypeName(selectedAgent) }}</span>\n          </div>\n        </div>\n        <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Panel Content -->\n      <div class=\"detail-panel-content\">\n        <!-- Status Section -->\n        <div class=\"detail-section\">\n          <div class=\"detail-badges\">\n            <span class=\"status-badge\" [class]=\"'status-' + (selectedAgent.Status || 'unknown').toLowerCase()\">\n              <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n              {{ selectedAgent.Status || 'Unknown' }}\n            </span>\n            @if (selectedAgent.ExposeAsAction) {\n              <span class=\"feature-badge\">\n                <i class=\"fa-solid fa-bolt\"></i>\n                Exposed as Action\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedAgent.Description) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-align-left\"></i>\n              Description\n            </h4>\n            <p class=\"detail-description\">{{ selectedAgent.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Details -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Configuration\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Execution Mode</span>\n              <span class=\"detail-value\">\n                <i [class]=\"getExecutionModeIcon(selectedAgent.ExecutionMode)\"></i>\n                {{ selectedAgent.ExecutionMode }}\n              </span>\n            </div>\n            @if (getParentAgentName(selectedAgent)) {\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Parent Agent</span>\n                <span class=\"detail-value\">{{ getParentAgentName(selectedAgent) }}</span>\n              </div>\n            }\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Compression</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.EnableContextCompression) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Enabled\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> Disabled\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Exposed as Action</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.ExposeAsAction) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Yes\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> No\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Model Selection</span>\n              <span class=\"detail-value\">{{ selectedAgent.ModelSelectionMode }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Timestamps -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-clock\"></i>\n            Timestamps\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Created</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_CreatedAt | date:'medium' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_UpdatedAt | date:'medium' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        @if (selectedAgent.Status === 'Active') {\n          <button\n            type=\"button\"\n            class=\"detail-action-btn secondary\"\n            (click)=\"runAgent(selectedAgent)\">\n            <i class=\"fa-solid fa-play\"></i>\n            Run Agent\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openAgentFromPanel()\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- AI Agent Test Harness - Now handled by service with minimize support -->", styles: ["/* ============================================\n   AI Agents Dashboard - World-Class Design\n   Clean white header with indigo/purple accents\n   ============================================ */\n\n/* Container */\n.agent-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/* Dashboard Header - Clean White Style */\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.item-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/* Main Content */\n.main-content {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n/* Splitter Styling */\nkendo-splitter {\n  background: transparent;\n}\n\n:host ::ng-deep .k-splitter {\n  border: none;\n  background: transparent;\n}\n\n:host ::ng-deep .k-splitbar {\n  background: #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/* Filter Panel Styles - used by child component */\n\n/* Agents Content */\n.agents-content {\n  height: 100%;\n  overflow-y: auto;\n  padding: 28px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e8f0fe 100%);\n}\n\n/* Grid View */\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.agent-card {\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid #e2e8f0;\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.agent-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.agent-card:hover {\n  box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.25);\n  transform: translateY(-4px);\n  border-color: #c7d2fe;\n}\n\n.agent-card:hover::before {\n  opacity: 1;\n}\n\n.agent-card.expanded {\n  box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.3);\n  border-color: #a5b4fc;\n}\n\n.agent-card.expanded::before {\n  opacity: 1;\n}\n\n.card-header {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid #f1f5f9;\n  transition: background-color 0.2s;\n}\n\n.card-header:hover {\n  background-color: #fafbfc;\n}\n\n.agent-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.agent-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.agent-icon i {\n  color: white;\n  font-size: 24px;\n}\n\n.agent-icon .agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.agent-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: #1e293b;\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: #64748b;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #f1f5f9;\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item i {\n  font-size: 11px;\n  color: #6366f1;\n}\n\n.meta-item.status-active {\n  color: #059669;\n  background: #d1fae5;\n}\n\n.meta-item.status-active i {\n  color: #059669;\n}\n\n.meta-item.status-pending {\n  color: #d97706;\n  background: #fef3c7;\n}\n\n.meta-item.status-pending i {\n  color: #d97706;\n}\n\n.meta-item.status-disabled,\n.meta-item.status-inactive {\n  color: #64748b;\n  background: #e2e8f0;\n}\n\n.meta-item.status-disabled i,\n.meta-item.status-inactive i {\n  color: #64748b;\n}\n\n.expand-icon {\n  font-size: 16px;\n  color: #94a3b8;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: #6366f1;\n  background: #f1f5f9;\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: #6366f1;\n}\n\n.card-body {\n  padding: 0 24px 24px 24px;\n}\n\n.agent-description {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: #64748b;\n}\n\n.agent-description.text-muted {\n  font-style: italic;\n  color: #94a3b8;\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid #e2e8f0;\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.agent-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\n  background: 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.5px;\n}\n\n.stat-value {\n  font-size: 15px;\n  color: #1e293b;\n  font-weight: 600;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 18px 24px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-top: 1px solid #e2e8f0;\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: white;\n  border: 2px solid #e2e8f0;\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #475569;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn:hover {\n  background: #f8fafc;\n  border-color: #6366f1;\n  color: #6366f1;\n  transform: translateY(-1px);\n}\n\n.action-btn-primary {\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  border-color: transparent;\n  color: white;\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.action-btn-primary:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);\n}\n\n/* List View */\n.agents-list {\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid #e2e8f0;\n  overflow: hidden;\n}\n\n.agents-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table thead {\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-bottom: 2px solid #e2e8f0;\n}\n\n.agents-table th {\n  padding: 16px 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.agents-table th:hover {\n  background: #e2e8f0;\n  color: #6366f1;\n}\n\n.agents-table th.sorted {\n  color: #6366f1;\n  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n}\n\n.sort-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sort-icon {\n  font-size: 10px;\n  color: #94a3b8;\n  transition: all 0.2s ease;\n}\n\n.agents-table th:hover .sort-icon {\n  color: #6366f1;\n}\n\n.agents-table th.sorted .sort-icon {\n  color: #6366f1;\n}\n\n.agents-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.agents-table tbody tr {\n  border-bottom: 1px solid #f1f5f9;\n  transition: background-color 0.2s;\n}\n\n.agents-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.agents-table tbody tr:hover {\n  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);\n}\n\n.agents-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: #475569;\n}\n\n.agent-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.agent-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);\n}\n\n.agent-icon-small i {\n  color: white;\n  font-size: 18px;\n}\n\n.agent-icon-small .agent-logo-small {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 10px;\n}\n\n.agent-name-cell .agent-name {\n  font-weight: 600;\n  color: #1e293b;\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.agent-description-small {\n  font-size: 13px;\n  color: #64748b;\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge i {\n  font-size: 8px;\n}\n\n.status-badge.status-active {\n  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);\n  color: #047857;\n}\n\n.status-badge.status-pending {\n  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n  color: #b45309;\n}\n\n.status-badge.status-disabled,\n.status-badge.status-inactive {\n  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);\n  color: #475569;\n}\n\n.status-badge.status-unknown {\n  background: #f1f5f9;\n  color: #64748b;\n}\n\n.execution-mode {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #475569;\n}\n\n.execution-mode i {\n  color: #6366f1;\n}\n\n.table-actions {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small {\n  background: white;\n  border: 2px solid #e2e8f0;\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: #475569;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: #f8fafc;\n  border-color: #6366f1;\n  color: #6366f1;\n}\n\n.action-btn-small.primary {\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  border-color: transparent;\n  color: white;\n  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);\n}\n\n.action-btn-small.primary:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 100px 32px;\n  color: #64748b;\n}\n\n.empty-state i {\n  font-size: 80px;\n  background: linear-gradient(135deg, #c7d2fe 0%, #ddd6fe 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: #1e293b;\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: #64748b;\n}\n\n.empty-state-btn {\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  color: white;\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);\n}\n\n.empty-state-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls {\n    justify-content: center;\n  }\n\n  .agents-content {\n    padding: 16px;\n  }\n\n  .agents-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .agent-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 18px;\n  }\n\n  .card-body {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n/* =============================================\n   Detail Panel - Slide-in Overlay\n   ============================================= */\n\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(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-icon .detail-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: #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 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-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 i {\n  font-size: 13px;\n}\n\n.detail-code-block {\n  background: #1e293b;\n  color: #e2e8f0;\n  padding: 16px;\n  border-radius: 10px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 13px;\n  line-height: 1.6;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: 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-grid {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
     }], () => [{ type: i1.AITestHarnessDialogService }, { type: i2.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber: 36 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent" }); })();
 //# sourceMappingURL=agent-configuration.component.js.map