@memberjunction/ng-dashboards 4.0.0 → 4.2.0

package/README.md

@@ -1,16 +1,91 @@
 # @memberjunction/ng-dashboards
 
-Angular dashboard components for MemberJunction Explorer, providing comprehensive administrative interfaces for AI operations, entity management, and actions management.
-
-## Purpose and Overview
-
-The `@memberjunction/ng-dashboards` package provides a collection of sophisticated Angular dashboard components designed for the MemberJunction Explorer application. These dashboards offer administrative and monitoring capabilities for various aspects of the MemberJunction platform, including:
-
-- **AI Dashboard**: Manage AI models, prompts, agents, and monitor AI system execution
-- **Entity Admin Dashboard**: Visualize and manage database entities with ERD diagrams, filtering, and detailed entity information
-- **Actions Management Dashboard**: Configure, monitor, and manage system actions, executions, and scheduled tasks
+Comprehensive Angular dashboard components for MemberJunction Explorer, providing administrative interfaces for AI operations, entity management, actions, communication, testing, scheduling, credentials, API keys, version history, MCP servers, and more.
+
+## Overview
+
+This package provides a rich collection of dashboard components registered as `BaseResourceComponent` subclasses. Each dashboard is loaded dynamically within the Explorer shell based on application navigation configuration. Dashboards follow MemberJunction's engine-class pattern for data access (no Angular services for data) and use getter/setter state management for reactivity.
+
+```mermaid
+graph TD
+    BRC["BaseResourceComponent"] --> AID["AI Dashboard"]
+    BRC --> EAD["Entity Admin Dashboard"]
+    BRC --> ACT["Actions Dashboard"]
+    BRC --> COM["Communication Dashboard"]
+    BRC --> TST["Testing Dashboard"]
+    BRC --> SCH["Scheduling Dashboard"]
+    BRC --> CRD["Credentials Dashboard"]
+    BRC --> AK["API Keys Dashboard"]
+    BRC --> MCP["MCP Dashboard"]
+    BRC --> CS["Component Studio"]
+    BRC --> DE["Data Explorer"]
+    BRC --> VH["Version History"]
+    BRC --> QB["Query Browser"]
+    BRC --> DB["Dashboard Browser"]
+    BRC --> HD["Home Dashboard"]
+    BRC --> LST["Lists Dashboard"]
+
+    style BRC fill:#7c5295,stroke:#563a6b,color:#fff
+    style AID fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style EAD fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style ACT fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style COM fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style TST fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style SCH fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style CRD fill:#b8762f,stroke:#8a5722,color:#fff
+    style AK fill:#b8762f,stroke:#8a5722,color:#fff
+    style MCP fill:#b8762f,stroke:#8a5722,color:#fff
+    style CS fill:#b8762f,stroke:#8a5722,color:#fff
+    style DE fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style VH fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style QB fill:#b8762f,stroke:#8a5722,color:#fff
+    style DB fill:#b8762f,stroke:#8a5722,color:#fff
+    style HD fill:#7c5295,stroke:#563a6b,color:#fff
+    style LST fill:#2d6a9f,stroke:#1a4971,color:#fff
+```
 
-All dashboards extend the `BaseDashboard` class, providing consistent state management, lifecycle hooks, and communication patterns.
+## Dashboards
+
+### AI Dashboard
+- **Execution Monitoring**: Real-time AI execution tracking with KPI cards, time-series charts, and performance heatmaps
+- **Prompt Management**: Create, edit, and version AI prompts with model-prompt priority matrix
+- **Agent Configuration**: Configure AI agents with filtering and inline editing
+- **Model Management**: Manage AI model configurations
+- **System Configuration**: System-wide AI settings management
+
+### Actions Dashboard
+- **Action Explorer**: Tree-based action browser with category management
+- **Execution Monitoring**: Monitor action execution logs
+- **Scheduled Actions**: Manage scheduled action configurations
+- **Code Management**: View and manage action code
+- **Entity Integration**: Configure entity-action relationships
+- **Security Permissions**: Manage action-level permissions
+
+### Data Explorer
+- **Navigation Panel**: Tree-based entity browser
+- **View Selector**: Switch between entity views with filtering
+- **Filter Dialog**: Dynamic filter construction
+
+### Communication Dashboard
+- Monitor, logs, providers, runs, and template management for entity communications
+
+### Testing Dashboard
+- Test execution, analytics, review, and explorer views for MJ's testing framework
+
+### Scheduling Dashboard
+- Overview, jobs, and activity monitoring for scheduled tasks
+
+### Component Studio
+- Visual component builder with AI assistant, code editing, specs, and versioning
+
+### Additional Dashboards
+- **API Keys**: API key management with scopes, applications, and usage tracking
+- **Credentials**: Credential management with categories, types, and audit
+- **MCP (Model Context Protocol)**: MCP server management and testing
+- **Version History**: Labels, diffs, restore, and graph visualization
+- **Query Browser / Dashboard Browser**: Browse and manage queries and dashboards
+- **Lists**: List management with categories, operations, and Venn diagrams
+- **Home**: Default landing dashboard
 
 ## Installation
 
@@ -18,350 +93,38 @@ All dashboards extend the `BaseDashboard` class, providing consistent state mana
 npm install @memberjunction/ng-dashboards
 ```
 
-## Dependencies
-
-### Peer Dependencies
-- `@angular/common`: 18.0.2
-- `@angular/core`: 18.0.2
-- `@angular/forms`: 18.0.2
+## Key Dependencies
 
-### Core Dependencies
-- `@memberjunction/core`: Core MemberJunction utilities and types
-- `@memberjunction/core-entities`: Entity definitions and extended types
-- `@memberjunction/templates-base-types`: Template system base types
-- `@memberjunction/ng-container-directives`: Container directive utilities
-- `@memberjunction/ng-notifications`: Notification system components
-- `@progress/kendo-angular-*`: Kendo UI components for Angular
-- `codemirror`: Code editor integration
-- `d3`: Data visualization library
-- `rxjs`: Reactive extensions for Angular
+| Dependency | Purpose |
+|---|---|
+| `@memberjunction/core`, `@memberjunction/core-entities` | Entity metadata and data access |
+| `@memberjunction/ng-base-application` | BaseResourceComponent base |
+| `@memberjunction/ng-shared`, `@memberjunction/ng-shared-generic` | Shared services, loading indicators |
+| `@memberjunction/ng-dashboard-viewer` | Dashboard rendering |
+| `@memberjunction/ng-query-viewer` | Query execution and display |
+| `@progress/kendo-angular-*` | Kendo UI components |
+| `d3` | Data visualization |
+| `codemirror` | Code editing |
 
 ## Usage
 
-### 1. Import the Module
-
 ```typescript
 import { DashboardsModule } from '@memberjunction/ng-dashboards';
 
 @NgModule({
-  imports: [
-    // ... other imports
-    DashboardsModule
-  ]
-})
-export class YourModule { }
-```
-
-### 2. Using the AI Dashboard
-
-```typescript
-import { Component } from '@angular/core';
-import { DashboardConfig } from '@memberjunction/ng-dashboards';
-
-@Component({
-  template: `
-    <mj-ai-dashboard 
-      [Config]="dashboardConfig"
-      (LoadingComplete)="onLoadingComplete()"
-      (Error)="onError($event)"
-      (UserStateChanged)="onStateChanged($event)"
-      (OpenEntityRecord)="onOpenRecord($event)">
-    </mj-ai-dashboard>
-  `
-})
-export class AIManagementComponent {
-  dashboardConfig: DashboardConfig = {
-    dashboard: dashboardEntity, // DashboardEntityExtended instance
-    userState: savedUserState    // Optional: Previously saved state
-  };
-
-  onLoadingComplete() {
-    console.log('AI Dashboard loaded');
-  }
-
-  onError(error: Error) {
-    console.error('Dashboard error:', error);
-  }
-
-  onStateChanged(state: any) {
-    // Save user state for persistence
-    localStorage.setItem('ai-dashboard-state', JSON.stringify(state));
-  }
-
-  onOpenRecord(event: {EntityName: string, RecordPKey: CompositeKey}) {
-    // Handle opening entity records
-  }
-}
-```
-
-### 3. Using the Entity Admin Dashboard
-
-```typescript
-@Component({
-  template: `
-    <mj-entity-admin-dashboard 
-      [Config]="dashboardConfig"
-      (LoadingComplete)="onLoadingComplete()"
-      (UserStateChanged)="onStateChanged($event)">
-    </mj-entity-admin-dashboard>
-  `
-})
-export class EntityAdminComponent {
-  dashboardConfig: DashboardConfig = {
-    dashboard: dashboardEntity
-  };
-}
-```
-
-### 4. Using the Actions Management Dashboard
-
-```typescript
-@Component({
-  template: `
-    <mj-actions-management-dashboard 
-      [Config]="dashboardConfig"
-      (LoadingComplete)="onLoadingComplete()"
-      (UserStateChanged)="onStateChanged($event)">
-    </mj-actions-management-dashboard>
-  `
-})
-export class ActionsManagementComponent {
-  dashboardConfig: DashboardConfig = {
-    dashboard: dashboardEntity
-  };
-}
-```
-
-## API Documentation
-
-### BaseDashboard Class
-
-All dashboards extend the `BaseDashboard` abstract class, which provides:
-
-#### Inputs
-- `Config: DashboardConfig` - Dashboard configuration including entity and optional user state
-
-#### Outputs
-- `LoadingComplete: EventEmitter<void>` - Emitted when dashboard has finished loading
-- `Error: EventEmitter<Error>` - Emitted when an error occurs
-- `UserStateChanged: EventEmitter<any>` - Emitted when dashboard state changes (for persistence)
-- `Interaction: EventEmitter<any>` - General interaction events
-- `OpenEntityRecord: EventEmitter<{EntityName: string, RecordPKey: CompositeKey}>` - Request to open an entity record
-
-#### Methods
-- `Refresh(): void` - Reload dashboard data
-- `SetVisible(visible: boolean): void` - Notify dashboard of visibility changes
-
-### AI Dashboard Components
-
-The AI Dashboard includes the following sub-components:
-
-- **ModelManagementComponent**: Manage AI models and configurations
-- **PromptManagementComponent**: Create and manage AI prompts
-- **AgentConfigurationComponent**: Configure AI agents
-- **ExecutionMonitoringComponent**: Monitor AI system execution
-- **SystemConfigurationComponent**: Configure system-wide AI settings
-
-### Entity Admin Dashboard Components
-
-- **ERDCompositeComponent**: Main ERD visualization and management
-- **EntityFilterPanelComponent**: Filter entities by various criteria
-- **EntityDetailsComponent**: Detailed entity information display
-- **ERDDiagramComponent**: Interactive entity relationship diagram
-
-### Actions Management Dashboard Components
-
-- **ActionsOverviewComponent**: Overview of all system actions
-- **ExecutionMonitoringComponent**: Monitor action executions
-- **ScheduledActionsComponent**: Manage scheduled actions
-- **CodeManagementComponent**: Manage action code
-- **EntityIntegrationComponent**: Configure entity integrations
-- **SecurityPermissionsComponent**: Manage action permissions
-
-## Configuration Options
-
-### DashboardConfig Interface
-
-```typescript
-interface DashboardConfig {
-  dashboard: DashboardEntityExtended;  // Dashboard entity from MemberJunction
-  userState?: any;                     // Optional saved user state
-}
-```
-
-### State Management
-
-Each dashboard maintains its own state structure that can be persisted and restored. The state management pattern follows these principles:
-
-1. **State Initialization**: When a dashboard loads, the `loadData()` method checks for user state in the `Config` property and applies it
-2. **State Changes**: Components emit state changes via `UserStateChanged` events with debouncing to prevent excessive updates
-3. **State Persistence**: Parent components should listen to `UserStateChanged` events and persist the state as needed
-4. **State Restoration**: Pass previously saved state through the `Config.userState` property when initializing the dashboard
-
-#### How State Loading Works
-
-When a dashboard component initializes:
-
-```typescript
-// In the dashboard's loadData() method
-loadData(): void {
-  // Check if we have user state in the Config and apply it
-  if (this.Config?.userState) {
-    this.loadUserState(this.Config.userState);
-  }
-  
-  // Continue with other initialization...
-  this.LoadingComplete.emit();
-}
-```
-
-The `loadUserState()` method then applies the saved state to the component and its sub-components:
-
-```typescript
-// Example from AIDashboardComponent
-public loadUserState(state: Partial<AIDashboardState>): void {
-  if (state.activeTab) {
-    this.activeTab = state.activeTab;
-  }
-  
-  // Store sub-component states for when they're rendered
-  if (state.executionMonitoringState) {
-    this.executionMonitoringState = state.executionMonitoringState;
-  }
-  // ... other state properties
-}
-```
-
-#### AI Dashboard State
-```typescript
-interface AIDashboardState {
-  activeTab: string;
-  modelManagementState: any;
-  promptManagementState: any;
-  agentConfigurationState: any;
-  executionMonitoringState: ExecutionMonitoringState;
-  systemConfigurationState: any;
-}
-
-// ExecutionMonitoringState includes detailed UI state
-interface ExecutionMonitoringState {
-  selectedTimeRange: string;
-  refreshInterval: number;
-  panelStates: {
-    cost: boolean;
-    efficiency: boolean;
-    executions: boolean;
-  };
-  drillDownTabs: Array<{
-    id: string;
-    title: string;
-    type: string;
-    timestamp?: string;
-    metric?: string;
-  }>;
-  activeTabId: string;
-  splitterSizes?: number[];
-}
-```
-
-#### Entity Admin Dashboard State
-```typescript
-interface DashboardState {
-  filterPanelVisible: boolean;
-  filterPanelWidth: number;
-  filters: any;
-  selectedEntityId: string | null;
-  zoomLevel: number;
-  panPosition: { x: number; y: number };
-  fieldsSectionExpanded: boolean;
-  relationshipsSectionExpanded: boolean;
-}
-```
-
-#### Example: Complete State Management Implementation
-
-```typescript
-// Parent component that uses the AI Dashboard
-@Component({
-  template: `
-    <mj-ai-dashboard 
-      [Config]="dashboardConfig"
-      (UserStateChanged)="onStateChanged($event)">
-    </mj-ai-dashboard>
-  `
+  imports: [DashboardsModule]
 })
-export class AIManagementComponent implements OnInit {
-  dashboardConfig: DashboardConfig;
-  
-  ngOnInit() {
-    // Load saved state from your persistence layer
-    const savedState = this.loadSavedState();
-    
-    // Configure dashboard with saved state
-    this.dashboardConfig = {
-      dashboard: this.dashboardEntity,
-      userState: savedState  // This will be applied in loadData()
-    };
-  }
-  
-  onStateChanged(state: AIDashboardState) {
-    // Save state changes with debouncing handled by the dashboard
-    this.saveState(state);
-  }
-  
-  private loadSavedState(): AIDashboardState | null {
-    // Load from localStorage, database, or other persistence
-    const saved = localStorage.getItem('ai-dashboard-state');
-    return saved ? JSON.parse(saved) : null;
-  }
-  
-  private saveState(state: AIDashboardState): void {
-    // Save to your persistence layer
-    localStorage.setItem('ai-dashboard-state', JSON.stringify(state));
-  }
-}
+export class AppModule {}
 ```
 
-## Integration with MemberJunction
-
-The dashboards are designed to work seamlessly with other MemberJunction packages:
-
-1. **Entity System**: Uses `@memberjunction/core-entities` for entity definitions
-2. **Metadata System**: Leverages MemberJunction metadata for dynamic UI generation
-3. **Template System**: Integrates with `@memberjunction/templates-base-types`
-4. **Global Registry**: Uses `@RegisterClass` decorator for component registration
+All dashboard components are registered via `@RegisterClass(BaseResourceComponent, 'ClassName')` and are loaded dynamically based on application navigation configuration. They do not need to be referenced directly in templates.
 
-## Build and Development
-
-### Building the Package
+## Build
 
 ```bash
-# From the package directory
-npm run build
-
-# From the repository root
-turbo build --filter="@memberjunction/ng-dashboards"
+cd packages/Angular/Explorer/dashboards && npm run build
 ```
 
-### Development Mode
-
-The package includes TypeScript configuration for Angular compilation:
-- Uses Angular compiler (`ngc`) for building
-- Outputs to `./dist` directory
-- Generates type definitions
-
-## Special Considerations
-
-1. **Tree Shaking**: The package includes special tree-shaking prevention calls in `public-api.ts` to ensure all dashboard components are included in builds
-
-2. **Icon Libraries**: Uses Font Awesome icons throughout the UI. Ensure Font Awesome is properly configured in your application
-
-3. **State Persistence**: Dashboard state changes are emitted via `UserStateChanged` events - implement persistence in the parent component
-
-4. **Navigation**: AI and Actions dashboards use bottom navigation patterns with icon-based navigation
-
-5. **Responsive Design**: Dashboards are designed to work across different screen sizes with collapsible panels and responsive layouts
-
 ## License
 
-ISC
+ISC

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

@@ -1133,5 +1133,5 @@ export { AgentConfigurationComponent };
         type: Component,
         args: [{ standalone: false, selector: 'app-agent-configuration', template: "<div class=\"agent-configuration-container\">\n  <!-- Header -->\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <h2 class=\"dashboard-title\">\n        <i class=\"fa-solid fa-robot\"></i>\n        Agent Configuration\n      </h2>\n      <button \n        type=\"button\" \n        class=\"filter-toggle-btn\"\n        (click)=\"toggleFilterPanel()\"\n        title=\"Toggle Filters\">\n        <i class=\"fa-solid fa-filter\"></i>\n        @if (filterPanelVisible) {\n          Hide Filters\n        } @else {\n          Show Filters\n        }\n      </button>\n      <span class=\"item-count\">{{ filteredAgents.length }} agents</span>\n    </div>\n    \n    <div class=\"header-controls\">\n      <div class=\"view-toggle\">\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'grid'\"\n          (click)=\"setViewMode('grid')\"\n          title=\"Grid View\">\n          <i class=\"fa-solid fa-grip\"></i>\n        </button>\n        <button \n          type=\"button\" \n          class=\"view-btn\"\n          [class.active]=\"viewMode === 'list'\"\n          (click)=\"setViewMode('list')\"\n          title=\"List View\">\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n      </div>\n      \n      <button \n        type=\"button\" \n        class=\"control-btn primary\"\n        (click)=\"createNewAgent()\"\n        title=\"Create New Agent\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Agent\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Content with Splitter -->\n  <div class=\"main-content\" >\n    <kendo-splitter \n      class=\"main-splitter\"\n      orientation=\"horizontal\"\n      (layoutChange)=\"onMainSplitterChange($event)\"\n      >\n      \n      <!-- Filter Panel (Left) -->\n      <kendo-splitter-pane \n        [size]=\"filterPanelVisible ? '320px' : '0px'\"\n        [collapsible]=\"false\"\n        [resizable]=\"filterPanelVisible\"\n        [scrollable]=\"false\"\n        [hidden]=\"!filterPanelVisible\">\n        <mj-agent-filter-panel\n          [agents]=\"agents\"\n          [filteredAgents]=\"filteredAgents\"\n          [filters]=\"currentFilters\"\n          (filtersChange)=\"onFiltersChange($event)\"\n          (filterChange)=\"onFilterChange()\"\n          (resetFilters)=\"onResetFilters()\"\n          (closePanel)=\"toggleFilterPanel()\">\n        </mj-agent-filter-panel>\n      </kendo-splitter-pane>\n      \n      <!-- Agents List Panel -->\n      <kendo-splitter-pane\n        [resizable]=\"true\"\n        [scrollable]=\"true\">\n        <div class=\"agents-content\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading agents...\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Agents Display -->\n          @if (!isLoading) {\n            @if (filteredAgents.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-robot\"></i>\n                <h3>No agents found</h3>\n                <p>No agents match your current filters. Try adjusting your search criteria or create a new agent.</p>\n                <button \n                  type=\"button\" \n                  class=\"empty-state-btn\"\n                  (click)=\"createNewAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create New Agent\n                </button>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"agents-grid\">\n                  @for (agent of filteredAgents; track agent.ID) {\n                    <div class=\"agent-card\" [class.expanded]=\"expandedAgentId === agent.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleAgentExpansion(agent.ID)\">\n                        <div class=\"agent-info\">\n                          <div class=\"agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                            @if (hasLogoURL(agent)) {\n                              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo\">\n                            } @else {\n                              <i [class]=\"getAgentIcon(agent)\"></i>\n                            }\n                          </div>\n                          <div class=\"agent-details\">\n                            <h4 class=\"agent-name\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></h4>\n                            <div class=\"agent-meta\">\n                              <span class=\"meta-item type-badge\">\n                                <i class=\"fa-solid fa-tag\"></i>\n                                {{ getAgentTypeName(agent) }}\n                              </span>\n                              @if (agent.Status) {\n                                <span class=\"meta-item\" [class]=\"'status-' + agent.Status.toLowerCase()\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  {{ agent.Status }}\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                        \n                        <i class=\"fa-solid fa-chevron-down expand-icon\" \n                           [class.rotated]=\"expandedAgentId === agent.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (agent.Description) {\n                          <p class=\"agent-description\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></p>\n                        } @else {\n                          <p class=\"agent-description text-muted\">No description provided</p>\n                        }\n                        \n                        <!-- Expandable Content -->\n                        @if (expandedAgentId === agent.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"agent-stats\">\n                              @if (agent.Parent) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Parent</span>\n                                  <span class=\"stat-value\">{{ agent.Parent }}</span>\n                                </div>\n                              }\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Context Compression</span>\n                                <span class=\"stat-value\">\n                                  @if (agent.EnableContextCompression) {\n                                    <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Enabled\n                                  } @else {\n                                    <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> Disabled\n                                  }\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        @if (UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn\"\n                            (click)=\"showAgentDetails(agent, $event)\"\n                            title=\"View Details\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                            Details\n                          </button>\n                        }\n\n                        @if (agent.Status === 'Active' && UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"runAgent(agent); $event.stopPropagation()\"\n                            title=\"Run Agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              \n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"agents-list\">\n                  <table class=\"agents-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"sortBy('Name')\"\n                            [class.sorted]=\"sortColumn === 'Name'\"\n                            [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Type</th>\n                        <th (click)=\"sortBy('Status')\"\n                            [class.sorted]=\"sortColumn === 'Status'\"\n                            [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Status\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (agent of filteredAgents; track agent.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"agent-name-cell\">\n                              <div class=\"agent-icon-small\" [style.background-color]=\"getAgentIconColor(agent)\">\n                                @if (hasLogoURL(agent)) {\n                                  <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo-small\">\n                                } @else {\n                                  <i [class]=\"getAgentIcon(agent)\"></i>\n                                }\n                              </div>\n                              <div>\n                                <div class=\"agent-name\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></div>\n                                @if (agent.Description) {\n                                  <div class=\"agent-description-small\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"type-badge\">\n                              {{ getAgentTypeName(agent) }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status || 'Unknown' }}\n                            </span>\n                          </td>\n                          <td>\n                            <div class=\"table-actions\">\n                              @if (UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small\"\n                                  (click)=\"showAgentDetails(agent)\"\n                                  title=\"View Details\">\n                                  <i class=\"fa-solid fa-eye\"></i>\n                                </button>\n                              }\n                              @if (agent.Status === 'Active' && UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small primary\"\n                                  (click)=\"runAgent(agent)\"\n                                  title=\"Run Agent\">\n                                  <i class=\"fa-solid fa-play\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n        </div>\n      </kendo-splitter-pane>\n    </kendo-splitter>\n  </div>\n\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedAgent) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\" [style.background-color]=\"getAgentIconColor(selectedAgent)\">\n            @if (hasLogoURL(selectedAgent)) {\n              <img [src]=\"selectedAgent.LogoURL\" [alt]=\"selectedAgent.Name + ' logo'\" class=\"detail-logo\">\n            } @else {\n              <i [class]=\"getAgentIcon(selectedAgent)\"></i>\n            }\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedAgent.Name }}</h3>\n            <span class=\"detail-subtitle\">{{ getAgentTypeName(selectedAgent) }}</span>\n          </div>\n        </div>\n        <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Panel Content -->\n      <div class=\"detail-panel-content\">\n        <!-- Status and Type Section -->\n        <div class=\"detail-section\">\n          <div class=\"detail-badges\">\n            <span class=\"status-badge\" [class]=\"'status-' + (selectedAgent.Status || 'unknown').toLowerCase()\">\n              <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n              {{ selectedAgent.Status || 'Unknown' }}\n            </span>\n            @if (selectedAgent.ExposeAsAction) {\n              <span class=\"feature-badge\">\n                <i class=\"fa-solid fa-bolt\"></i>\n                Exposed as Action\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedAgent.Description) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-align-left\"></i>\n              Description\n            </h4>\n            <p class=\"detail-description\">{{ selectedAgent.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Details -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Configuration\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Execution Mode</span>\n              <span class=\"detail-value\">\n                <i [class]=\"getExecutionModeIcon(selectedAgent.ExecutionMode)\"></i>\n                {{ selectedAgent.ExecutionMode }}\n              </span>\n            </div>\n            @if (getParentAgentName(selectedAgent)) {\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Parent Agent</span>\n                <span class=\"detail-value\">{{ getParentAgentName(selectedAgent) }}</span>\n              </div>\n            }\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Compression</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.EnableContextCompression) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Enabled\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> Disabled\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Exposed as Action</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.ExposeAsAction) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Yes\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> No\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Model Selection</span>\n              <span class=\"detail-value\">{{ selectedAgent.ModelSelectionMode }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Timestamps -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-clock\"></i>\n            Timestamps\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Created</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_CreatedAt | date:'medium' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_UpdatedAt | date:'medium' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        @if (selectedAgent.Status === 'Active') {\n          <button\n            type=\"button\"\n            class=\"detail-action-btn secondary\"\n            (click)=\"runAgent(selectedAgent)\">\n            <i class=\"fa-solid fa-play\"></i>\n            Run Agent\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openAgentFromPanel()\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- AI Agent Test Harness - Now handled by service with minimize support -->", styles: ["/* ============================================\n   AI Agents Dashboard - World-Class Design\n   Clean white header with 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/* Type Badge - for Agent Type display */\n.type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n  color: #4f46e5;\n  border: 1px solid #c7d2fe;\n}\n\n.type-badge i {\n  font-size: 11px;\n  color: #6366f1;\n}\n\n/* Type badge in meta context (grid view) */\n.meta-item.type-badge {\n  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n  color: #4f46e5;\n  border: 1px solid #c7d2fe;\n}\n\n.meta-item.type-badge i {\n  color: #6366f1;\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\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n  background-color: #fef08a;\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n"] }]
     }], () => [{ type: i1.AITestHarnessDialogService }, { type: i2.CreateAgentService }, { type: i3.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/ai/components/agents/agent-configuration.component.ts", lineNumber: 44 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber: 44 }); })();
 //# sourceMappingURL=agent-configuration.component.js.map

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

@@ -796,5 +796,5 @@ export class AgentEditorComponent {
             type: ViewChild,
             args: ['hierarchyChart', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentEditorComponent, { className: "AgentEditorComponent", filePath: "src/ai/components/agents/agent-editor.component.ts", lineNumber: 31 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentEditorComponent, { className: "AgentEditorComponent", filePath: "src/AI/components/agents/agent-editor.component.ts", lineNumber: 31 }); })();
 //# sourceMappingURL=agent-editor.component.js.map

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

@@ -248,5 +248,5 @@ export class AgentFilterPanelComponent {
         }], closePanel: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentFilterPanelComponent, { className: "AgentFilterPanelComponent", filePath: "src/ai/components/agents/agent-filter-panel.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentFilterPanelComponent, { className: "AgentFilterPanelComponent", filePath: "src/AI/components/agents/agent-filter-panel.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=agent-filter-panel.component.js.map

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

@@ -422,5 +422,5 @@ export class PerformanceHeatmapComponent {
             type: ViewChild,
             args: ['legendGradient', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceHeatmapComponent, { className: "PerformanceHeatmapComponent", filePath: "src/ai/components/charts/performance-heatmap.component.ts", lineNumber: 227 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceHeatmapComponent, { className: "PerformanceHeatmapComponent", filePath: "src/AI/components/charts/performance-heatmap.component.ts", lineNumber: 227 }); })();
 //# sourceMappingURL=performance-heatmap.component.js.map

package/dist/AI/components/charts/time-series-chart.component.js

@@ -596,5 +596,5 @@ export class TimeSeriesChartComponent {
             type: ViewChild,
             args: ['tooltip', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimeSeriesChartComponent, { className: "TimeSeriesChartComponent", filePath: "src/ai/components/charts/time-series-chart.component.ts", lineNumber: 205 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimeSeriesChartComponent, { className: "TimeSeriesChartComponent", filePath: "src/AI/components/charts/time-series-chart.component.ts", lineNumber: 205 }); })();
 //# sourceMappingURL=time-series-chart.component.js.map