npm - @memberjunction/ng-dashboards - Versions diffs - 5.10.1 → 5.12.0 - Mend

@memberjunction/ng-dashboards 5.10.1 → 5.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (231) hide show

package/dist/AI/components/execution-monitoring.component.js CHANGED Viewed

@@ -1492,7 +1492,7 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
             i0.ɵɵconditional(ctx.panelStates.executions ? 79 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.selectedExecution ? 80 : -1);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.SplitterComponent, i4.SplitterPaneComponent, i5.LoadingComponent, i6.KPICardComponent, i7.LiveExecutionWidgetComponent, i8.TimeSeriesChartComponent, i9.PerformanceHeatmapComponent, i10.AsyncPipe, i10.TitleCasePipe, i10.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n      padding: 0;\n      background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading[_ngcontent-%COMP%] {\n      overflow: hidden;\n    }\n\n    \n\n    .loading-overlay[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255, 255, 255, 0.7);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    \n\n    .monitoring-header[_ngcontent-%COMP%] {\n      background: white;\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid #e0e6ed;\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: #1e293b;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #6366f1;\n      font-size: 22px;\n    }\n\n    .monitoring-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: #64748b;\n      font-weight: 500;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 8px 14px;\n      border: 1px solid #e2e8f0;\n      border-radius: 8px;\n      font-size: 13px;\n      background: #f8fafc;\n      color: #1e293b;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #f1f5f9;\n      border-color: #cbd5e1;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: #6366f1;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]   option[_ngcontent-%COMP%] {\n      background: white;\n      color: #1e293b;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]   i.spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard[_ngcontent-%COMP%] {\n      padding: 20px;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid rgba(99, 102, 241, 0.08);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);\n    }\n\n    \n\n    [_nghost-%COMP%]     .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 10px;\n    }\n\n    \n\n    .cost-chart-container[_ngcontent-%COMP%], .efficiency-chart-container[_ngcontent-%COMP%], .status-container[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      margin-bottom: 16px;\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #1e293b;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #6366f1;\n    }\n\n    .cost-bars[_ngcontent-%COMP%], .efficiency-items[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info[_ngcontent-%COMP%] {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .cost-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #8b5cf6;\n      font-weight: 600;\n    }\n\n    .cost-bar-container[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #666;\n      min-width: 80px;\n      text-align: right;\n    }\n\n    \n\n    .efficiency-item[_ngcontent-%COMP%] {\n      padding: 12px 0;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .efficiency-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #6366f1;\n      font-weight: 600;\n    }\n\n    .token-breakdown[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar[_ngcontent-%COMP%] {\n      height: 8px;\n      background: rgba(99, 102, 241, 0.1);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment[_ngcontent-%COMP%] {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input[_ngcontent-%COMP%] {\n      background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);\n    }\n\n    .token-segment--output[_ngcontent-%COMP%] {\n      background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);\n    }\n\n    .token-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: #666;\n    }\n\n    .input-label[_ngcontent-%COMP%] {\n      color: #6366f1;\n      font-weight: 500;\n    }\n\n    .output-label[_ngcontent-%COMP%] {\n      color: #8b5cf6;\n      font-weight: 500;\n    }\n\n    .cost-per-token[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #999;\n      margin-top: 4px;\n    }\n\n    \n\n    .status-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .status-icon[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);\n      color: #10b981;\n    }\n\n    .status-icon--warning[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);\n      color: #f59e0b;\n    }\n\n    .status-icon--info[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);\n      color: #6366f1;\n    }\n\n    .status-icon--primary[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.15) 100%);\n      color: #8b5cf6;\n    }\n\n    .status-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .status-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .status-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n      margin: 2px 0;\n    }\n\n    .status-subtitle[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #999;\n    }\n\n    \n\n    .execution-modal[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%] {\n      padding: 20px;\n      border-bottom: 1px solid #f0f0f0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]:hover {\n      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      color: #333;\n    }\n\n    .execution-modal-body[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      border-bottom: 1px solid #f0f0f0;\n      padding-bottom: 6px;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #333;\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);\n      color: #10b981;\n    }\n\n    .status-badge--running[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);\n      color: #6366f1;\n    }\n\n    .status-badge--failed[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);\n      color: #ef4444;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background: #fff3e0;\n      border: 1px solid #ffcc02;\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: #e65100;\n      font-family: monospace;\n    }\n\n    .child-executions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution[_ngcontent-%COMP%] {\n      background: #f8f9fa;\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .child-type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      background: #e0e0e0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: #666;\n    }\n\n    .child-status[_ngcontent-%COMP%] {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: #666;\n    }\n\n    .loading-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    \n\n    .drill-down-container[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid rgba(99, 102, 241, 0.1);\n      background: linear-gradient(180deg, #f8f9ff 0%, #f3f4f6 100%);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: #64748b;\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item[_ngcontent-%COMP%]:hover {\n      background: rgba(99, 102, 241, 0.05);\n      color: #6366f1;\n    }\n\n    .tab-item.active[_ngcontent-%COMP%] {\n      background: white;\n      color: #6366f1;\n      border-bottom-color: #6366f1;\n      font-weight: 600;\n    }\n\n    .tab-title[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close[_ngcontent-%COMP%]:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: #333;\n    }\n\n    .tab-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane[_ngcontent-%COMP%] {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .trends-chart[_ngcontent-%COMP%]   app-time-series-chart[_ngcontent-%COMP%] {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    \n\n    .tab-pane.trends-chart[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n    .executions-drill-down[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp[_ngcontent-%COMP%] {\n      color: #666;\n      background: #f0f0f0;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px rgba(99, 102, 241, 0.25);\n    }\n\n    .loading-spinner[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: #666;\n      gap: 12px;\n    }\n\n    .executions-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: #f8f9fa;\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .table-cell[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #333;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(71, 85, 105, 0.1) 100%);\n      color: #64748b;\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);\n      color: #6366f1;\n    }\n\n    .type-badge--agent[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);\n      color: #10b981;\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: #999;\n      gap: 16px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: #ddd;\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    \n\n    .model-detail[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .info-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 14px;\n      color: #333;\n      font-weight: 500;\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%] {\n      color: #4caf50;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%]::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: #4caf50;\n      border-radius: 50%;\n    }\n\n    .model-description[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: #f8f9fa;\n      border-radius: 8px;\n    }\n\n    .model-description[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .model-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: #666;\n      line-height: 1.5;\n    }\n\n    \n\n    .clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    \n\n    .analysis-panels[_ngcontent-%COMP%] {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: linear-gradient(180deg, #f8f9ff 0%, #f3f4f6 100%);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%] {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);\n      background: white;\n      overflow: hidden;\n      border: 1px solid rgba(99, 102, 241, 0.08);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      padding: 14px 18px;\n      background: linear-gradient(180deg, #fafbff 0%, #f8f9fc 100%);\n      border-bottom: 1px solid rgba(99, 102, 241, 0.08);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: linear-gradient(180deg, #f0f1ff 0%, #e8e9ff 100%);\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: #1e293b;\n      font-size: 14px;\n    }\n\n    .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #6366f1;\n      width: 18px;\n    }\n\n    .panel-toggle-icon[_ngcontent-%COMP%] {\n      color: #6366f1;\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      padding: 18px;\n      border-top: 1px solid rgba(99, 102, 241, 0.05);\n      animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%]   app-live-execution-widget[_ngcontent-%COMP%] {\n      height: 300px;\n      display: block;\n    }\n\n    \n\n    @media (max-width: 1200px) {\n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 400px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels[_ngcontent-%COMP%] {\n        padding: 8px;\n      }\n      \n      .analysis-panel[_ngcontent-%COMP%] {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .monitoring-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 350px;\n      }\n      \n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      \n\n      [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 5px;\n      }\n      \n      .tab-header[_ngcontent-%COMP%] {\n        overflow-x: auto;\n      }\n      \n      .tab-item[_ngcontent-%COMP%] {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row[_ngcontent-%COMP%] {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%] {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%]:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: #666;\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down[_ngcontent-%COMP%], \n   .model-detail[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-content[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-header[_ngcontent-%COMP%] {\n        padding: 10px 12px;\n      }\n      \n      .panel-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n      }\n    }"], changeDetection: 0 });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.SplitterComponent, i4.SplitterPaneComponent, i5.LoadingComponent, i6.KPICardComponent, i7.LiveExecutionWidgetComponent, i8.TimeSeriesChartComponent, i9.PerformanceHeatmapComponent, i10.AsyncPipe, i10.TitleCasePipe, i10.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n      padding: 0;\n      background: var(--mj-bg-surface-card);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading[_ngcontent-%COMP%] {\n      overflow: hidden;\n    }\n\n    \n\n    .loading-overlay[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    \n\n    .monitoring-header[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid var(--mj-border-default);\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 22px;\n    }\n\n    .monitoring-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 8px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]   option[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]   i.spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard[_ngcontent-%COMP%] {\n      padding: 20px;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    \n\n    [_nghost-%COMP%]     .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 10px;\n    }\n\n    \n\n    .cost-chart-container[_ngcontent-%COMP%], .efficiency-chart-container[_ngcontent-%COMP%], .status-container[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      margin-bottom: 16px;\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .cost-bars[_ngcontent-%COMP%], .efficiency-items[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info[_ngcontent-%COMP%] {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .cost-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .cost-bar-container[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: var(--mj-brand-primary);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n      min-width: 80px;\n      text-align: right;\n    }\n\n    \n\n    .efficiency-item[_ngcontent-%COMP%] {\n      padding: 12px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .efficiency-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .token-breakdown[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar[_ngcontent-%COMP%] {\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment[_ngcontent-%COMP%] {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n    }\n\n    .token-segment--output[_ngcontent-%COMP%] {\n      background: var(--mj-brand-accent);\n    }\n\n    .token-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .input-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .output-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-accent);\n      font-weight: 500;\n    }\n\n    .cost-per-token[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n      margin-top: 4px;\n    }\n\n    \n\n    .status-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .status-icon[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-icon--warning[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .status-icon--info[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-icon--primary[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .status-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .status-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 2px 0;\n    }\n\n    .status-subtitle[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n    }\n\n    \n\n    .execution-modal[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%] {\n      padding: 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .execution-modal-body[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      border-bottom: 1px solid var(--mj-border-default);\n      padding-bottom: 6px;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-badge--running[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-badge--failed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-status-error);\n      font-family: monospace;\n    }\n\n    .child-executions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .child-type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      background: var(--mj-border-default);\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: var(--mj-text-muted);\n    }\n\n    .child-status[_ngcontent-%COMP%] {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .loading-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    \n\n    .drill-down-container[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      background: var(--mj-bg-surface-card);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .tab-item.active[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      border-bottom-color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .tab-title[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close[_ngcontent-%COMP%]:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: var(--mj-text-primary);\n    }\n\n    .tab-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane[_ngcontent-%COMP%] {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .trends-chart[_ngcontent-%COMP%]   app-time-series-chart[_ngcontent-%COMP%] {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    \n\n    .tab-pane.trends-chart[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n    .executions-drill-down[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .drill-down-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .loading-spinner[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: var(--mj-text-muted);\n      gap: 12px;\n    }\n\n    .executions-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: var(--mj-bg-surface-card);\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-cell[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-primary);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n      color: var(--mj-text-muted);\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .type-badge--agent[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: var(--mj-text-disabled);\n      gap: 16px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: var(--mj-border-default);\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    \n\n    .model-detail[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .info-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%] {\n      color: var(--mj-status-success);\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%]::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n    }\n\n    .model-description[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n    }\n\n    .model-description[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .model-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n    }\n\n    \n\n    .clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    \n\n    .analysis-panels[_ngcontent-%COMP%] {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%] {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      width: 18px;\n    }\n\n    .panel-toggle-icon[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      padding: 18px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%]   app-live-execution-widget[_ngcontent-%COMP%] {\n      height: 300px;\n      display: block;\n    }\n\n    \n\n    @media (max-width: 1200px) {\n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 400px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels[_ngcontent-%COMP%] {\n        padding: 8px;\n      }\n      \n      .analysis-panel[_ngcontent-%COMP%] {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .monitoring-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 350px;\n      }\n      \n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      \n\n      [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 5px;\n      }\n      \n      .tab-header[_ngcontent-%COMP%] {\n        overflow-x: auto;\n      }\n      \n      .tab-item[_ngcontent-%COMP%] {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row[_ngcontent-%COMP%] {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%] {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%]:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: var(--mj-text-muted);\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down[_ngcontent-%COMP%], \n   .model-detail[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-content[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-header[_ngcontent-%COMP%] {\n        padding: 10px 12px;\n      }\n      \n      .panel-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n      }\n    }"], changeDetection: 0 });
 };
 ExecutionMonitoringComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIMonitorResource')
@@ -2019,7 +2019,7 @@ export { ExecutionMonitoringComponent };
         </div>
       }
     </div>
-  `, styles: ["\n    .execution-monitoring {\n      padding: 0;\n      background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading {\n      overflow: hidden;\n    }\n\n    /* Loading Overlay */\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255, 255, 255, 0.7);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    /* === Dashboard Header - Clean White Style === */\n    .monitoring-header {\n      background: white;\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid #e0e6ed;\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-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    .monitoring-title i {\n      color: #6366f1;\n      font-size: 22px;\n    }\n\n    .monitoring-controls {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control label {\n      color: #64748b;\n      font-weight: 500;\n    }\n\n    .time-range-control select {\n      padding: 8px 14px;\n      border: 1px solid #e2e8f0;\n      border-radius: 8px;\n      font-size: 13px;\n      background: #f8fafc;\n      color: #1e293b;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control select:hover:not(:disabled) {\n      background: #f1f5f9;\n      border-color: #cbd5e1;\n    }\n\n    .time-range-control select:focus {\n      outline: none;\n      border-color: #6366f1;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .time-range-control select:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control select option {\n      background: white;\n      color: #1e293b;\n    }\n\n    .refresh-btn {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n    }\n\n    .refresh-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn i.spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard {\n      padding: 20px;\n    }\n\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section {\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid rgba(99, 102, 241, 0.08);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section:hover {\n      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);\n    }\n\n    /* Ensure splitter panes take full height */\n    :host ::ng-deep .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    :host ::ng-deep .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 10px;\n    }\n\n    /* Cost Analysis Styles */\n    .cost-chart-container, .efficiency-chart-container, .status-container {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header {\n      margin-bottom: 16px;\n    }\n\n    .chart-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #1e293b;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title i {\n      color: #6366f1;\n    }\n\n    .cost-bars, .efficiency-items {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .cost-bar-item:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .cost-value {\n      font-size: 11px;\n      color: #8b5cf6;\n      font-weight: 600;\n    }\n\n    .cost-bar-container {\n      flex: 1;\n      height: 8px;\n      background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar {\n      height: 100%;\n      background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info {\n      font-size: 10px;\n      color: #666;\n      min-width: 80px;\n      text-align: right;\n    }\n\n    /* Token Efficiency Styles */\n    .efficiency-item {\n      padding: 12px 0;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .efficiency-item:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio {\n      font-size: 11px;\n      color: #6366f1;\n      font-weight: 600;\n    }\n\n    .token-breakdown {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar {\n      height: 8px;\n      background: rgba(99, 102, 241, 0.1);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input {\n      background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);\n    }\n\n    .token-segment--output {\n      background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);\n    }\n\n    .token-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: #666;\n    }\n\n    .input-label {\n      color: #6366f1;\n      font-weight: 500;\n    }\n\n    .output-label {\n      color: #8b5cf6;\n      font-weight: 500;\n    }\n\n    .cost-per-token {\n      font-size: 10px;\n      color: #999;\n      margin-top: 4px;\n    }\n\n    /* System Status Styles */\n    .status-metrics {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .status-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success {\n      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);\n      color: #10b981;\n    }\n\n    .status-icon--warning {\n      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);\n      color: #f59e0b;\n    }\n\n    .status-icon--info {\n      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);\n      color: #6366f1;\n    }\n\n    .status-icon--primary {\n      background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.15) 100%);\n      color: #8b5cf6;\n    }\n\n    .status-info {\n      flex: 1;\n    }\n\n    .status-label {\n      font-size: 12px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .status-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n      margin: 2px 0;\n    }\n\n    .status-subtitle {\n      font-size: 10px;\n      color: #999;\n    }\n\n    /* Execution Modal Styles */\n    .execution-modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content {\n      background: white;\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header {\n      padding: 20px;\n      border-bottom: 1px solid #f0f0f0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);\n    }\n\n    .open-record-btn:hover {\n      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n    }\n\n    .open-record-btn i {\n      font-size: 12px;\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn:hover {\n      color: #333;\n    }\n\n    .execution-modal-body {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      border-bottom: 1px solid #f0f0f0;\n      padding-bottom: 6px;\n    }\n\n    .detail-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item label {\n      font-size: 11px;\n      color: #666;\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item span {\n      font-size: 13px;\n      color: #333;\n    }\n\n    .status-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed {\n      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);\n      color: #10b981;\n    }\n\n    .status-badge--running {\n      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);\n      color: #6366f1;\n    }\n\n    .status-badge--failed {\n      background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);\n      color: #ef4444;\n    }\n\n    .error-message {\n      background: #fff3e0;\n      border: 1px solid #ffcc02;\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: #e65100;\n      font-family: monospace;\n    }\n\n    .child-executions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution {\n      background: #f8f9fa;\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .child-type {\n      font-size: 10px;\n      background: #e0e0e0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: #666;\n    }\n\n    .child-status {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: #666;\n    }\n\n    .loading-details {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    /* Drill-down Tab Styles */\n    .drill-down-container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header {\n      display: flex;\n      border-bottom: 1px solid rgba(99, 102, 241, 0.1);\n      background: linear-gradient(180deg, #f8f9ff 0%, #f3f4f6 100%);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: #64748b;\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item:hover {\n      background: rgba(99, 102, 241, 0.05);\n      color: #6366f1;\n    }\n\n    .tab-item.active {\n      background: white;\n      color: #6366f1;\n      border-bottom-color: #6366f1;\n      font-weight: 600;\n    }\n\n    .tab-title {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: #333;\n    }\n\n    .tab-content {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart {\n      padding: 0;\n    }\n\n    .trends-chart app-time-series-chart {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    /* Ensure chart fits within tab pane */\n    .tab-pane.trends-chart {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* Drill-down specific styles */\n    .executions-drill-down {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .drill-down-header h4 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp {\n      color: #666;\n      background: #f0f0f0;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px rgba(99, 102, 241, 0.25);\n    }\n\n    .loading-spinner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: #666;\n      gap: 12px;\n    }\n\n    .executions-table {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: #f8f9fa;\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row:hover {\n      background: #f8f9fa;\n    }\n\n    .table-cell {\n      font-size: 12px;\n      color: #333;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge {\n      background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(71, 85, 105, 0.1) 100%);\n      color: #64748b;\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt {\n      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);\n      color: #6366f1;\n    }\n\n    .type-badge--agent {\n      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);\n      color: #10b981;\n    }\n\n    .no-data {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: #999;\n      gap: 16px;\n    }\n\n    .no-data i {\n      font-size: 48px;\n      color: #ddd;\n    }\n\n    .no-data p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    /* Model detail styles */\n    .model-detail {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .info-item label {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item span {\n      font-size: 14px;\n      color: #333;\n      font-weight: 500;\n    }\n\n    .status-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active {\n      color: #4caf50;\n    }\n\n    .status-indicator.active::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: #4caf50;\n      border-radius: 50%;\n    }\n\n    .model-description {\n      padding: 20px;\n      background: #f8f9fa;\n      border-radius: 8px;\n    }\n\n    .model-description h5 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .model-description p {\n      margin: 0;\n      font-size: 13px;\n      color: #666;\n      line-height: 1.5;\n    }\n\n    /* Clickable KPI cards */\n    .clickable {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Collapsible Panel Styles */\n    .analysis-panels {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: linear-gradient(180deg, #f8f9ff 0%, #f3f4f6 100%);\n    }\n\n    .analysis-panel {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);\n      background: white;\n      overflow: hidden;\n      border: 1px solid rgba(99, 102, 241, 0.08);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel:hover {\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);\n    }\n\n    .analysis-panel:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header {\n      padding: 14px 18px;\n      background: linear-gradient(180deg, #fafbff 0%, #f8f9fc 100%);\n      border-bottom: 1px solid rgba(99, 102, 241, 0.08);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header:hover {\n      background: linear-gradient(180deg, #f0f1ff 0%, #e8e9ff 100%);\n    }\n\n    .panel-title {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: #1e293b;\n      font-size: 14px;\n    }\n\n    .panel-title i {\n      color: #6366f1;\n      width: 18px;\n    }\n\n    .panel-toggle-icon {\n      color: #6366f1;\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content {\n      padding: 18px;\n      border-top: 1px solid rgba(99, 102, 241, 0.05);\n      animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel {\n      padding: 0;\n    }\n\n    .live-executions-panel app-live-execution-widget {\n      height: 300px;\n      display: block;\n    }\n\n    /* Responsive Design */\n    @media (max-width: 1200px) {\n      .dashboard-splitter {\n        min-height: 400px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels {\n        padding: 8px;\n      }\n      \n      .analysis-panel {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring {\n        padding: 12px;\n      }\n      \n      .monitoring-header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter {\n        min-height: 350px;\n      }\n      \n      .kpi-grid {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      /* Reduce padding on smaller screens */\n      :host ::ng-deep .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 5px;\n      }\n      \n      .tab-header {\n        overflow-x: auto;\n      }\n      \n      .tab-item {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: #666;\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down,\n      .model-detail {\n        padding: 12px;\n      }\n      \n      .panel-content {\n        padding: 12px;\n      }\n      \n      .panel-header {\n        padding: 10px 12px;\n      }\n      \n      .panel-title {\n        font-size: 13px;\n      }\n    }\n  "] }]
+  `, styles: ["\n    .execution-monitoring {\n      padding: 0;\n      background: var(--mj-bg-surface-card);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading {\n      overflow: hidden;\n    }\n\n    /* Loading Overlay */\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    /* === Dashboard Header - Clean White Style === */\n    .monitoring-header {\n      background: var(--mj-bg-surface);\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid var(--mj-border-default);\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title i {\n      color: var(--mj-brand-primary);\n      font-size: 22px;\n    }\n\n    .monitoring-controls {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control label {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .time-range-control select {\n      padding: 8px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control select:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .time-range-control select:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .time-range-control select:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control select option {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .refresh-btn {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .refresh-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn i.spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard {\n      padding: 20px;\n    }\n\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section:hover {\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    /* Ensure splitter panes take full height */\n    :host ::ng-deep .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    :host ::ng-deep .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 10px;\n    }\n\n    /* Cost Analysis Styles */\n    .cost-chart-container, .efficiency-chart-container, .status-container {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header {\n      margin-bottom: 16px;\n    }\n\n    .chart-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title i {\n      color: var(--mj-brand-primary);\n    }\n\n    .cost-bars, .efficiency-items {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cost-bar-item:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .cost-value {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .cost-bar-container {\n      flex: 1;\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar {\n      height: 100%;\n      background: var(--mj-brand-primary);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n      min-width: 80px;\n      text-align: right;\n    }\n\n    /* Token Efficiency Styles */\n    .efficiency-item {\n      padding: 12px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .efficiency-item:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .token-breakdown {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar {\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input {\n      background: var(--mj-brand-primary);\n    }\n\n    .token-segment--output {\n      background: var(--mj-brand-accent);\n    }\n\n    .token-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .input-label {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .output-label {\n      color: var(--mj-brand-accent);\n      font-weight: 500;\n    }\n\n    .cost-per-token {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n      margin-top: 4px;\n    }\n\n    /* System Status Styles */\n    .status-metrics {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .status-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-icon--warning {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .status-icon--info {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-icon--primary {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-info {\n      flex: 1;\n    }\n\n    .status-label {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .status-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 2px 0;\n    }\n\n    .status-subtitle {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n    }\n\n    /* Execution Modal Styles */\n    .execution-modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header {\n      padding: 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .open-record-btn:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .open-record-btn i {\n      font-size: 12px;\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .execution-modal-body {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      border-bottom: 1px solid var(--mj-border-default);\n      padding-bottom: 6px;\n    }\n\n    .detail-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item label {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item span {\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .status-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-badge--running {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-badge--failed {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .error-message {\n      background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-status-error);\n      font-family: monospace;\n    }\n\n    .child-executions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution {\n      background: var(--mj-bg-surface-card);\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .child-type {\n      font-size: 10px;\n      background: var(--mj-border-default);\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: var(--mj-text-muted);\n    }\n\n    .child-status {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .loading-details {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    /* Drill-down Tab Styles */\n    .drill-down-container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header {\n      display: flex;\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      background: var(--mj-bg-surface-card);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .tab-item.active {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      border-bottom-color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .tab-title {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: var(--mj-text-primary);\n    }\n\n    .tab-content {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart {\n      padding: 0;\n    }\n\n    .trends-chart app-time-series-chart {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    /* Ensure chart fits within tab pane */\n    .tab-pane.trends-chart {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* Drill-down specific styles */\n    .executions-drill-down {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .drill-down-header h4 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp {\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .loading-spinner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: var(--mj-text-muted);\n      gap: 12px;\n    }\n\n    .executions-table {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: var(--mj-bg-surface-card);\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-cell {\n      font-size: 12px;\n      color: var(--mj-text-primary);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge {\n      background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n      color: var(--mj-text-muted);\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .type-badge--agent {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .no-data {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: var(--mj-text-disabled);\n      gap: 16px;\n    }\n\n    .no-data i {\n      font-size: 48px;\n      color: var(--mj-border-default);\n    }\n\n    .no-data p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    /* Model detail styles */\n    .model-detail {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .info-item label {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item span {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .status-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active {\n      color: var(--mj-status-success);\n    }\n\n    .status-indicator.active::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n    }\n\n    .model-description {\n      padding: 20px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n    }\n\n    .model-description h5 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .model-description p {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n    }\n\n    /* Clickable KPI cards */\n    .clickable {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Collapsible Panel Styles */\n    .analysis-panels {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n    }\n\n    .analysis-panel {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel:hover {\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    .analysis-panel:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header {\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-title {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .panel-title i {\n      color: var(--mj-brand-primary);\n      width: 18px;\n    }\n\n    .panel-toggle-icon {\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content {\n      padding: 18px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel {\n      padding: 0;\n    }\n\n    .live-executions-panel app-live-execution-widget {\n      height: 300px;\n      display: block;\n    }\n\n    /* Responsive Design */\n    @media (max-width: 1200px) {\n      .dashboard-splitter {\n        min-height: 400px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels {\n        padding: 8px;\n      }\n      \n      .analysis-panel {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring {\n        padding: 12px;\n      }\n      \n      .monitoring-header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter {\n        min-height: 350px;\n      }\n      \n      .kpi-grid {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      /* Reduce padding on smaller screens */\n      :host ::ng-deep .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 5px;\n      }\n      \n      .tab-header {\n        overflow-x: auto;\n      }\n      \n      .tab-item {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: var(--mj-text-muted);\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down,\n      .model-detail {\n        padding: 12px;\n      }\n      \n      .panel-content {\n        padding: 12px;\n      }\n      \n      .panel-header {\n        padding: 10px 12px;\n      }\n      \n      .panel-title {\n        font-size: 13px;\n      }\n    }\n  "] }]
     }], () => [{ type: i1.AIInstrumentationService }, { type: i2.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/AI/components/execution-monitoring.component.ts", lineNumber: 1786 }); })();
 //# sourceMappingURL=execution-monitoring.component.js.map