@memberjunction/ng-dashboards 5.10.1 → 5.12.0

package/dist/AI/components/widgets/kpi-card.component.js

@@ -87,16 +87,16 @@ export class KPICardComponent {
     }
     getTrendColor() {
         if (!this.data.trend)
-            return '#999';
+            return 'var(--mj-text-disabled)';
         switch (this.data.trend.direction) {
             case 'up':
-                return '#4caf50';
+                return 'var(--mj-status-success)';
             case 'down':
-                return '#f44336';
+                return 'var(--mj-status-error)';
             case 'stable':
-                return '#999';
+                return 'var(--mj-text-disabled)';
             default:
-                return '#999';
+                return 'var(--mj-text-disabled)';
         }
     }
     static ɵfac = function KPICardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KPICardComponent)(); };
@@ -127,7 +127,7 @@ export class KPICardComponent {
             i0.ɵɵconditional(ctx.data.subtitle && !ctx.data.loading ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.data.trend && !ctx.data.loading ? 10 : -1);
-        } }, dependencies: [i1.LoadingComponent], styles: [".kpi-card[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 16px;\n      padding: 20px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n      border: 1px solid #e5e7eb;\n      border-left: 4px solid transparent;\n      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n      min-height: 130px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .kpi-card[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n      transform: translateY(-3px);\n      border-color: #c7d2fe;\n    }\n\n    .kpi-card--primary[_ngcontent-%COMP%] { border-left-color: #6366f1; }\n    .kpi-card--success[_ngcontent-%COMP%] { border-left-color: #10b981; }\n    .kpi-card--warning[_ngcontent-%COMP%] { border-left-color: #f59e0b; }\n    .kpi-card--danger[_ngcontent-%COMP%] { border-left-color: #ef4444; }\n    .kpi-card--info[_ngcontent-%COMP%] { border-left-color: #8b5cf6; }\n\n    .kpi-card__header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .kpi-card__icon[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 12px;\n      font-size: 15px;\n    }\n\n    .kpi-card--primary[_ngcontent-%COMP%]   .kpi-card__icon[_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    .kpi-card--success[_ngcontent-%COMP%]   .kpi-card__icon[_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    .kpi-card--warning[_ngcontent-%COMP%]   .kpi-card__icon[_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    .kpi-card--danger[_ngcontent-%COMP%]   .kpi-card__icon[_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    .kpi-card--info[_ngcontent-%COMP%]   .kpi-card__icon[_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    .kpi-card__title[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 700;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-card__content[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .kpi-card__value[_ngcontent-%COMP%] {\n      font-size: 26px;\n      font-weight: 700;\n      color: #1e293b;\n      margin-bottom: 4px;\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n    }\n\n    .kpi-card__subtitle[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #94a3b8;\n      margin-bottom: 6px;\n    }\n\n    .kpi-card__trend[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 11px;\n      gap: 4px;\n    }\n\n    .trend-percentage[_ngcontent-%COMP%] {\n      font-weight: 600;\n    }\n\n    .trend-period[_ngcontent-%COMP%] {\n      color: #94a3b8;\n    }\n\n    .kpi-card__loading[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 60px;\n    }\n\n    @media (max-width: 768px) {\n      .kpi-card[_ngcontent-%COMP%] {\n        min-height: 110px;\n        padding: 16px;\n      }\n\n      .kpi-card__value[_ngcontent-%COMP%] {\n        font-size: 22px;\n      }\n\n      .kpi-card__icon[_ngcontent-%COMP%] {\n        width: 32px;\n        height: 32px;\n        font-size: 13px;\n      }\n    }"] });
+        } }, dependencies: [i1.LoadingComponent], styles: [".kpi-card[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 16px;\n      padding: 20px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n      border: 1px solid var(--mj-border-default);\n      border-left: 4px solid transparent;\n      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n      min-height: 130px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .kpi-card[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n      transform: translateY(-3px);\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n    }\n\n    .kpi-card--primary[_ngcontent-%COMP%] { border-left-color: var(--mj-brand-primary); }\n    .kpi-card--success[_ngcontent-%COMP%] { border-left-color: var(--mj-status-success); }\n    .kpi-card--warning[_ngcontent-%COMP%] { border-left-color: var(--mj-status-warning); }\n    .kpi-card--danger[_ngcontent-%COMP%] { border-left-color: var(--mj-status-error); }\n    .kpi-card--info[_ngcontent-%COMP%] { border-left-color: var(--mj-brand-accent); }\n\n    .kpi-card__header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .kpi-card__icon[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 12px;\n      font-size: 15px;\n    }\n\n    .kpi-card--primary[_ngcontent-%COMP%]   .kpi-card__icon[_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    .kpi-card--success[_ngcontent-%COMP%]   .kpi-card__icon[_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    .kpi-card--warning[_ngcontent-%COMP%]   .kpi-card__icon[_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    .kpi-card--danger[_ngcontent-%COMP%]   .kpi-card__icon[_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    .kpi-card--info[_ngcontent-%COMP%]   .kpi-card__icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-accent) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-accent);\n    }\n\n    .kpi-card__title[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-card__content[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .kpi-card__value[_ngcontent-%COMP%] {\n      font-size: 26px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n    }\n\n    .kpi-card__subtitle[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .kpi-card__trend[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 11px;\n      gap: 4px;\n    }\n\n    .trend-percentage[_ngcontent-%COMP%] {\n      font-weight: 600;\n    }\n\n    .trend-period[_ngcontent-%COMP%] {\n      color: var(--mj-text-disabled);\n    }\n\n    .kpi-card__loading[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 60px;\n    }\n\n    @media (max-width: 768px) {\n      .kpi-card[_ngcontent-%COMP%] {\n        min-height: 110px;\n        padding: 16px;\n      }\n\n      .kpi-card__value[_ngcontent-%COMP%] {\n        font-size: 22px;\n      }\n\n      .kpi-card__icon[_ngcontent-%COMP%] {\n        width: 32px;\n        height: 32px;\n        font-size: 13px;\n      }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KPICardComponent, [{
         type: Component,
@@ -169,7 +169,7 @@ export class KPICardComponent {
         }
       </div>
     </div>
-    `, styles: ["\n    .kpi-card {\n      background: white;\n      border-radius: 16px;\n      padding: 20px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n      border: 1px solid #e5e7eb;\n      border-left: 4px solid transparent;\n      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n      min-height: 130px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .kpi-card:hover {\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n      transform: translateY(-3px);\n      border-color: #c7d2fe;\n    }\n\n    .kpi-card--primary { border-left-color: #6366f1; }\n    .kpi-card--success { border-left-color: #10b981; }\n    .kpi-card--warning { border-left-color: #f59e0b; }\n    .kpi-card--danger { border-left-color: #ef4444; }\n    .kpi-card--info { border-left-color: #8b5cf6; }\n\n    .kpi-card__header {\n      display: flex;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .kpi-card__icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 12px;\n      font-size: 15px;\n    }\n\n    .kpi-card--primary .kpi-card__icon {\n      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);\n      color: #6366f1;\n    }\n    .kpi-card--success .kpi-card__icon {\n      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);\n      color: #10b981;\n    }\n    .kpi-card--warning .kpi-card__icon {\n      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);\n      color: #f59e0b;\n    }\n    .kpi-card--danger .kpi-card__icon {\n      background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);\n      color: #ef4444;\n    }\n    .kpi-card--info .kpi-card__icon {\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    .kpi-card__title {\n      font-size: 11px;\n      font-weight: 700;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-card__content {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .kpi-card__value {\n      font-size: 26px;\n      font-weight: 700;\n      color: #1e293b;\n      margin-bottom: 4px;\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n    }\n\n    .kpi-card__subtitle {\n      font-size: 11px;\n      color: #94a3b8;\n      margin-bottom: 6px;\n    }\n\n    .kpi-card__trend {\n      display: flex;\n      align-items: center;\n      font-size: 11px;\n      gap: 4px;\n    }\n\n    .trend-percentage {\n      font-weight: 600;\n    }\n\n    .trend-period {\n      color: #94a3b8;\n    }\n\n    .kpi-card__loading {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 60px;\n    }\n\n    @media (max-width: 768px) {\n      .kpi-card {\n        min-height: 110px;\n        padding: 16px;\n      }\n\n      .kpi-card__value {\n        font-size: 22px;\n      }\n\n      .kpi-card__icon {\n        width: 32px;\n        height: 32px;\n        font-size: 13px;\n      }\n    }\n  "] }]
+    `, styles: ["\n    .kpi-card {\n      background: var(--mj-bg-surface);\n      border-radius: 16px;\n      padding: 20px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n      border: 1px solid var(--mj-border-default);\n      border-left: 4px solid transparent;\n      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n      min-height: 130px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .kpi-card:hover {\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n      transform: translateY(-3px);\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n    }\n\n    .kpi-card--primary { border-left-color: var(--mj-brand-primary); }\n    .kpi-card--success { border-left-color: var(--mj-status-success); }\n    .kpi-card--warning { border-left-color: var(--mj-status-warning); }\n    .kpi-card--danger { border-left-color: var(--mj-status-error); }\n    .kpi-card--info { border-left-color: var(--mj-brand-accent); }\n\n    .kpi-card__header {\n      display: flex;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .kpi-card__icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 12px;\n      font-size: 15px;\n    }\n\n    .kpi-card--primary .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n    .kpi-card--success .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n    .kpi-card--warning .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n    .kpi-card--danger .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n    .kpi-card--info .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-brand-accent) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-accent);\n    }\n\n    .kpi-card__title {\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-card__content {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .kpi-card__value {\n      font-size: 26px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n    }\n\n    .kpi-card__subtitle {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .kpi-card__trend {\n      display: flex;\n      align-items: center;\n      font-size: 11px;\n      gap: 4px;\n    }\n\n    .trend-percentage {\n      font-weight: 600;\n    }\n\n    .trend-period {\n      color: var(--mj-text-disabled);\n    }\n\n    .kpi-card__loading {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 60px;\n    }\n\n    @media (max-width: 768px) {\n      .kpi-card {\n        min-height: 110px;\n        padding: 16px;\n      }\n\n      .kpi-card__value {\n        font-size: 22px;\n      }\n\n      .kpi-card__icon {\n        width: 32px;\n        height: 32px;\n        font-size: 13px;\n      }\n    }\n  "] }]
     }], null, { data: [{
             type: Input
         }] }); })();

package/dist/AI/components/widgets/kpi-card.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"kpi-card.component.js","sourceRoot":"","sources":["../../../../src/AI/components/widgets/kpi-card.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\n\nexport interface KPICardData {\n  title: string;\n  value: string | number;\n  subtitle?: string;\n  icon: string;\n  color: 'primary' | 'success' | 'warning' | 'danger' | 'info';\n  trend?: {\n    direction: 'up' | 'down' | 'stable';\n    percentage: number;\n    period: string;\n  };\n  loading?: boolean;\n}\n\n@Component({\n  standalone: false,\n  selector: 'app-kpi-card',\n  template: `\n    <div class=\"kpi-card\" [class]=\"'kpi-card--' + data.color\">\n      <div class=\"kpi-card__header\">\n        <div class=\"kpi-card__icon\">\n          <i [class]=\"'fa-solid ' + data.icon\"></i>\n        </div>\n        <div class=\"kpi-card__title\">{{ data.title }}</div>\n      </div>\n    \n      <div class=\"kpi-card__content\">\n        @if (!data.loading) {\n          <div class=\"kpi-card__value\">\n            {{ formatValue(data.value) }}\n          </div>\n        }\n        @if (data.loading) {\n          <div class=\"kpi-card__loading\">\n            <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n          </div>\n        }\n    \n        @if (data.subtitle && !data.loading) {\n          <div class=\"kpi-card__subtitle\">\n            {{ data.subtitle }}\n          </div>\n        }\n    \n        @if (data.trend && !data.loading) {\n          <div class=\"kpi-card__trend\">\n            <i [class]=\"getTrendIcon()\" [style.color]=\"getTrendColor()\"></i>\n            <span class=\"trend-percentage\" [style.color]=\"getTrendColor()\">\n              {{ data.trend.percentage }}%\n            </span>\n            <span class=\"trend-period\">{{ data.trend.period }}</span>\n          </div>\n        }\n      </div>\n    </div>\n    `,\n  styles: [`\n    .kpi-card {\n      background: white;\n      border-radius: 16px;\n      padding: 20px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n      border: 1px solid #e5e7eb;\n      border-left: 4px solid transparent;\n      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n      min-height: 130px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .kpi-card:hover {\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n      transform: translateY(-3px);\n      border-color: #c7d2fe;\n    }\n\n    .kpi-card--primary { border-left-color: #6366f1; }\n    .kpi-card--success { border-left-color: #10b981; }\n    .kpi-card--warning { border-left-color: #f59e0b; }\n    .kpi-card--danger { border-left-color: #ef4444; }\n    .kpi-card--info { border-left-color: #8b5cf6; }\n\n    .kpi-card__header {\n      display: flex;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .kpi-card__icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 12px;\n      font-size: 15px;\n    }\n\n    .kpi-card--primary .kpi-card__icon {\n      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);\n      color: #6366f1;\n    }\n    .kpi-card--success .kpi-card__icon {\n      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);\n      color: #10b981;\n    }\n    .kpi-card--warning .kpi-card__icon {\n      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);\n      color: #f59e0b;\n    }\n    .kpi-card--danger .kpi-card__icon {\n      background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);\n      color: #ef4444;\n    }\n    .kpi-card--info .kpi-card__icon {\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    .kpi-card__title {\n      font-size: 11px;\n      font-weight: 700;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-card__content {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .kpi-card__value {\n      font-size: 26px;\n      font-weight: 700;\n      color: #1e293b;\n      margin-bottom: 4px;\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n    }\n\n    .kpi-card__subtitle {\n      font-size: 11px;\n      color: #94a3b8;\n      margin-bottom: 6px;\n    }\n\n    .kpi-card__trend {\n      display: flex;\n      align-items: center;\n      font-size: 11px;\n      gap: 4px;\n    }\n\n    .trend-percentage {\n      font-weight: 600;\n    }\n\n    .trend-period {\n      color: #94a3b8;\n    }\n\n    .kpi-card__loading {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 60px;\n    }\n\n    @media (max-width: 768px) {\n      .kpi-card {\n        min-height: 110px;\n        padding: 16px;\n      }\n\n      .kpi-card__value {\n        font-size: 22px;\n      }\n\n      .kpi-card__icon {\n        width: 32px;\n        height: 32px;\n        font-size: 13px;\n      }\n    }\n  `]\n})\nexport class KPICardComponent implements OnInit {\n  @Input() data!: KPICardData;\n\n  ngOnInit() {\n    if (!this.data) {\n      throw new Error('KPICardComponent requires data input');\n    }\n  }\n\n  formatValue(value: string | number): string {\n    if (typeof value === 'number') {\n      // Format large numbers with appropriate suffixes\n      if (value >= 1000000) {\n        return (value / 1000000).toFixed(1) + 'M';\n      } else if (value >= 1000) {\n        return (value / 1000).toFixed(1) + 'K';\n      } else if (value % 1 !== 0) {\n        return value.toFixed(2);\n      }\n      return value.toString();\n    }\n    return value;\n  }\n\n  getTrendIcon(): string {\n    if (!this.data.trend) return '';\n    \n    switch (this.data.trend.direction) {\n      case 'up':\n        return 'fa-solid fa-arrow-up';\n      case 'down':\n        return 'fa-solid fa-arrow-down';\n      case 'stable':\n        return 'fa-solid fa-minus';\n      default:\n        return '';\n    }\n  }\n\n  getTrendColor(): string {\n    if (!this.data.trend) return '#999';\n    \n    switch (this.data.trend.direction) {\n      case 'up':\n        return '#4caf50';\n      case 'down':\n        return '#f44336';\n      case 'stable':\n        return '#999';\n      default:\n        return '#999';\n    }\n  }\n}"]}
+{"version":3,"file":"kpi-card.component.js","sourceRoot":"","sources":["../../../../src/AI/components/widgets/kpi-card.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\n\nexport interface KPICardData {\n  title: string;\n  value: string | number;\n  subtitle?: string;\n  icon: string;\n  color: 'primary' | 'success' | 'warning' | 'danger' | 'info';\n  trend?: {\n    direction: 'up' | 'down' | 'stable';\n    percentage: number;\n    period: string;\n  };\n  loading?: boolean;\n}\n\n@Component({\n  standalone: false,\n  selector: 'app-kpi-card',\n  template: `\n    <div class=\"kpi-card\" [class]=\"'kpi-card--' + data.color\">\n      <div class=\"kpi-card__header\">\n        <div class=\"kpi-card__icon\">\n          <i [class]=\"'fa-solid ' + data.icon\"></i>\n        </div>\n        <div class=\"kpi-card__title\">{{ data.title }}</div>\n      </div>\n    \n      <div class=\"kpi-card__content\">\n        @if (!data.loading) {\n          <div class=\"kpi-card__value\">\n            {{ formatValue(data.value) }}\n          </div>\n        }\n        @if (data.loading) {\n          <div class=\"kpi-card__loading\">\n            <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n          </div>\n        }\n    \n        @if (data.subtitle && !data.loading) {\n          <div class=\"kpi-card__subtitle\">\n            {{ data.subtitle }}\n          </div>\n        }\n    \n        @if (data.trend && !data.loading) {\n          <div class=\"kpi-card__trend\">\n            <i [class]=\"getTrendIcon()\" [style.color]=\"getTrendColor()\"></i>\n            <span class=\"trend-percentage\" [style.color]=\"getTrendColor()\">\n              {{ data.trend.percentage }}%\n            </span>\n            <span class=\"trend-period\">{{ data.trend.period }}</span>\n          </div>\n        }\n      </div>\n    </div>\n    `,\n  styles: [`\n    .kpi-card {\n      background: var(--mj-bg-surface);\n      border-radius: 16px;\n      padding: 20px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n      border: 1px solid var(--mj-border-default);\n      border-left: 4px solid transparent;\n      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n      min-height: 130px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .kpi-card:hover {\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n      transform: translateY(-3px);\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n    }\n\n    .kpi-card--primary { border-left-color: var(--mj-brand-primary); }\n    .kpi-card--success { border-left-color: var(--mj-status-success); }\n    .kpi-card--warning { border-left-color: var(--mj-status-warning); }\n    .kpi-card--danger { border-left-color: var(--mj-status-error); }\n    .kpi-card--info { border-left-color: var(--mj-brand-accent); }\n\n    .kpi-card__header {\n      display: flex;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .kpi-card__icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 12px;\n      font-size: 15px;\n    }\n\n    .kpi-card--primary .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n    .kpi-card--success .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n    .kpi-card--warning .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n    .kpi-card--danger .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n    .kpi-card--info .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-brand-accent) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-accent);\n    }\n\n    .kpi-card__title {\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-card__content {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .kpi-card__value {\n      font-size: 26px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n    }\n\n    .kpi-card__subtitle {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .kpi-card__trend {\n      display: flex;\n      align-items: center;\n      font-size: 11px;\n      gap: 4px;\n    }\n\n    .trend-percentage {\n      font-weight: 600;\n    }\n\n    .trend-period {\n      color: var(--mj-text-disabled);\n    }\n\n    .kpi-card__loading {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 60px;\n    }\n\n    @media (max-width: 768px) {\n      .kpi-card {\n        min-height: 110px;\n        padding: 16px;\n      }\n\n      .kpi-card__value {\n        font-size: 22px;\n      }\n\n      .kpi-card__icon {\n        width: 32px;\n        height: 32px;\n        font-size: 13px;\n      }\n    }\n  `]\n})\nexport class KPICardComponent implements OnInit {\n  @Input() data!: KPICardData;\n\n  ngOnInit() {\n    if (!this.data) {\n      throw new Error('KPICardComponent requires data input');\n    }\n  }\n\n  formatValue(value: string | number): string {\n    if (typeof value === 'number') {\n      // Format large numbers with appropriate suffixes\n      if (value >= 1000000) {\n        return (value / 1000000).toFixed(1) + 'M';\n      } else if (value >= 1000) {\n        return (value / 1000).toFixed(1) + 'K';\n      } else if (value % 1 !== 0) {\n        return value.toFixed(2);\n      }\n      return value.toString();\n    }\n    return value;\n  }\n\n  getTrendIcon(): string {\n    if (!this.data.trend) return '';\n    \n    switch (this.data.trend.direction) {\n      case 'up':\n        return 'fa-solid fa-arrow-up';\n      case 'down':\n        return 'fa-solid fa-arrow-down';\n      case 'stable':\n        return 'fa-solid fa-minus';\n      default:\n        return '';\n    }\n  }\n\n  getTrendColor(): string {\n    if (!this.data.trend) return 'var(--mj-text-disabled)';\n\n    switch (this.data.trend.direction) {\n      case 'up':\n        return 'var(--mj-status-success)';\n      case 'down':\n        return 'var(--mj-status-error)';\n      case 'stable':\n        return 'var(--mj-text-disabled)';\n      default:\n        return 'var(--mj-text-disabled)';\n    }\n  }\n}"]}

package/dist/AI/components/widgets/live-execution-widget.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"live-execution-widget.component.d.ts","sourceRoot":"","sources":["../../../../src/AI/components/widgets/live-execution-widget.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;;AAE1E,qBA2Xa,4BAA6B,YAAW,MAAM,EAAE,SAAS;IAC3D,UAAU,EAAE,aAAa,EAAE,CAAM;IACjC,UAAU,SAAK;IACd,cAAc,8BAAqC;IAE7D,OAAO,UAAS;IAChB,aAAa,SAAoB;IAEjC,QAAQ;IAER,WAAW;IAEX,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,MAAM;IAInE,mBAAmB,IAAI,OAAO;IAI9B,cAAc,IAAI,MAAM;IAIxB,gBAAgB,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM;IAQlD,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAarC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM;IAgBzC,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAI3C,aAAa,IAAI,IAAI;IAKrB,gBAAgB,CAAC,SAAS,EAAE,aAAa,GAAG,IAAI;IAIhD,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;yCA1E3B,4BAA4B;2CAA5B,4BAA4B;CA6ExC"}
+{"version":3,"file":"live-execution-widget.component.d.ts","sourceRoot":"","sources":["../../../../src/AI/components/widgets/live-execution-widget.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;;AAE1E,qBAyWa,4BAA6B,YAAW,MAAM,EAAE,SAAS;IAC3D,UAAU,EAAE,aAAa,EAAE,CAAM;IACjC,UAAU,SAAK;IACd,cAAc,8BAAqC;IAE7D,OAAO,UAAS;IAChB,aAAa,SAAoB;IAEjC,QAAQ;IAER,WAAW;IAEX,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,MAAM;IAInE,mBAAmB,IAAI,OAAO;IAI9B,cAAc,IAAI,MAAM;IAIxB,gBAAgB,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM;IAQlD,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAarC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM;IAgBzC,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAI3C,aAAa,IAAI,IAAI;IAKrB,gBAAgB,CAAC,SAAS,EAAE,aAAa,GAAG,IAAI;IAIhD,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;yCA1E3B,4BAA4B;2CAA5B,4BAA4B;CA6ExC"}

package/dist/AI/components/widgets/live-execution-widget.component.js

@@ -173,7 +173,7 @@ export class LiveExecutionWidgetComponent {
         return `$${amount.toFixed(4)}`;
     }
     static ɵfac = function LiveExecutionWidgetComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LiveExecutionWidgetComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LiveExecutionWidgetComponent, selectors: [["app-live-execution-widget"]], inputs: { executions: "executions", maxVisible: "maxVisible" }, outputs: { executionClick: "executionClick" }, standalone: false, decls: 9, vars: 4, consts: [[1, "live-execution-widget"], [1, "widget-header"], [1, "widget-title"], [1, "fa-solid", "fa-bolt"], [1, "active-count"], [1, "execution-list"], [1, "no-executions"], [1, "execution-item", 3, "class"], [1, "show-more"], [1, "execution-item", 3, "click"], [1, "execution-icon"], [1, "execution-info"], [1, "execution-name"], [1, "execution-meta"], [1, "execution-type"], [1, "execution-duration"], [1, "execution-cost"], [1, "execution-status"], [1, "progress-ring"], [1, "status-indicator"], ["width", "24", "height", "24"], ["cx", "12", "cy", "12", "r", "10", "fill", "none", "stroke", "#e0e0e0", "stroke-width", "2"], ["cx", "12", "cy", "12", "r", "10", "fill", "none", "stroke", "#2196f3", "stroke-width", "2", "stroke-linecap", "round", 1, "progress-circle"], [1, "progress-text"], [1, "show-more-btn", 3, "click"], [1, "fa-solid", "fa-circle-check"]], template: function LiveExecutionWidgetComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LiveExecutionWidgetComponent, selectors: [["app-live-execution-widget"]], inputs: { executions: "executions", maxVisible: "maxVisible" }, outputs: { executionClick: "executionClick" }, standalone: false, decls: 9, vars: 4, consts: [[1, "live-execution-widget"], [1, "widget-header"], [1, "widget-title"], [1, "fa-solid", "fa-bolt"], [1, "active-count"], [1, "execution-list"], [1, "no-executions"], [1, "execution-item", 3, "class"], [1, "show-more"], [1, "execution-item", 3, "click"], [1, "execution-icon"], [1, "execution-info"], [1, "execution-name"], [1, "execution-meta"], [1, "execution-type"], [1, "execution-duration"], [1, "execution-cost"], [1, "execution-status"], [1, "progress-ring"], [1, "status-indicator"], ["width", "24", "height", "24"], ["cx", "12", "cy", "12", "r", "10", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "2"], ["cx", "12", "cy", "12", "r", "10", "fill", "none", "stroke", "var(--mj-brand-primary)", "stroke-width", "2", "stroke-linecap", "round", 1, "progress-circle"], [1, "progress-text"], [1, "show-more-btn", 3, "click"], [1, "fa-solid", "fa-circle-check"]], template: function LiveExecutionWidgetComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3", 2);
             i0.ɵɵelement(3, "i", 3);
             i0.ɵɵtext(4, " Live Executions ");
@@ -190,7 +190,7 @@ export class LiveExecutionWidgetComponent {
             i0.ɵɵtextInterpolate1(" ", ctx.getActiveCount(), " active ");
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.executions.length > 0 ? 7 : 8);
-        } }, styles: [".live-execution-widget[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      height: 400px;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .widget-header[_ngcontent-%COMP%] {\n      padding: 20px 20px 16px;\n      border-bottom: 1px solid #f0f0f0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .widget-title[_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    .widget-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .active-count[_ngcontent-%COMP%] {\n      background: #e3f2fd;\n      color: #2196f3;\n      padding: 4px 12px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      transition: all 0.3s ease;\n    }\n\n    .active-count.pulsing[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_pulse 2s infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0% { opacity: 1; }\n      50% { opacity: 0.7; }\n      100% { opacity: 1; }\n    }\n\n    .execution-list[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .execution-item[_ngcontent-%COMP%] {\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border-left: 3px solid transparent;\n    }\n\n    .execution-item[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .execution-item--running[_ngcontent-%COMP%] {\n      border-left-color: #2196f3;\n      background: rgba(33, 150, 243, 0.02);\n    }\n\n    .execution-item--completed[_ngcontent-%COMP%] {\n      border-left-color: #4caf50;\n    }\n\n    .execution-item--failed[_ngcontent-%COMP%] {\n      border-left-color: #f44336;\n      background: rgba(244, 67, 54, 0.02);\n    }\n\n    .execution-icon[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .execution-item--running[_ngcontent-%COMP%]   .execution-icon[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .execution-item--completed[_ngcontent-%COMP%]   .execution-icon[_ngcontent-%COMP%] {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .execution-item--failed[_ngcontent-%COMP%]   .execution-icon[_ngcontent-%COMP%] {\n      background: rgba(244, 67, 54, 0.1);\n      color: #f44336;\n    }\n\n    .execution-info[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .execution-name[_ngcontent-%COMP%] {\n      font-weight: 500;\n      color: #333;\n      font-size: 14px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin-bottom: 4px;\n    }\n\n    .execution-meta[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 11px;\n      color: #666;\n    }\n\n    .execution-type[_ngcontent-%COMP%] {\n      background: #f0f0f0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-weight: 500;\n    }\n\n    .execution-duration[_ngcontent-%COMP%] {\n      color: #999;\n    }\n\n    .execution-cost[_ngcontent-%COMP%] {\n      color: #ff9800;\n      font-weight: 500;\n    }\n\n    .execution-status[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .progress-ring[_ngcontent-%COMP%] {\n      position: relative;\n      width: 24px;\n      height: 24px;\n    }\n\n    .progress-circle[_ngcontent-%COMP%] {\n      transform: rotate(-90deg);\n      transform-origin: center;\n      transition: stroke-dashoffset 0.3s ease;\n    }\n\n    .progress-text[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      font-weight: 600;\n      color: #2196f3;\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n    }\n\n    .status-indicator--running[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: white;\n      animation: _ngcontent-%COMP%_pulse 2s infinite;\n    }\n\n    .status-indicator--completed[_ngcontent-%COMP%] {\n      background: #4caf50;\n      color: white;\n    }\n\n    .status-indicator--failed[_ngcontent-%COMP%] {\n      background: #f44336;\n      color: white;\n    }\n\n    .show-more[_ngcontent-%COMP%] {\n      padding: 12px 20px;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .show-more-btn[_ngcontent-%COMP%] {\n      width: 100%;\n      background: none;\n      border: none;\n      color: #2196f3;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s ease;\n    }\n\n    .show-more-btn[_ngcontent-%COMP%]:hover {\n      background: rgba(33, 150, 243, 0.1);\n    }\n\n    .no-executions[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: #999;\n      gap: 12px;\n    }\n\n    .no-executions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: #ddd;\n    }\n\n    .no-executions[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    \n\n    .execution-list[_ngcontent-%COMP%]::-webkit-scrollbar {\n      width: 4px;\n    }\n\n    .execution-list[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n      background: #f1f1f1;\n    }\n\n    .execution-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: #ccc;\n      border-radius: 2px;\n    }\n\n    .execution-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n      background: #999;\n    }\n\n    @media (max-width: 768px) {\n      .execution-item[_ngcontent-%COMP%] {\n        padding: 10px 16px;\n      }\n      \n      .execution-meta[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n      }\n    }"] });
+        } }, styles: [".live-execution-widget[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      height: 400px;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .widget-header[_ngcontent-%COMP%] {\n      padding: 20px 20px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .widget-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    .widget-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .active-count[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      padding: 4px 12px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      transition: all 0.3s ease;\n    }\n\n    .active-count.pulsing[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_pulse 2s infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0% { opacity: 1; }\n      50% { opacity: 0.7; }\n      100% { opacity: 1; }\n    }\n\n    .execution-list[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .execution-item[_ngcontent-%COMP%] {\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border-left: 3px solid transparent;\n    }\n\n    .execution-item[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .execution-item--running[_ngcontent-%COMP%] {\n      border-left-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-item--completed[_ngcontent-%COMP%] {\n      border-left-color: var(--mj-status-success);\n    }\n\n    .execution-item--failed[_ngcontent-%COMP%] {\n      border-left-color: var(--mj-status-error);\n      background: color-mix(in srgb, var(--mj-status-error) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-icon[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .execution-item--running[_ngcontent-%COMP%]   .execution-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .execution-item--completed[_ngcontent-%COMP%]   .execution-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .execution-item--failed[_ngcontent-%COMP%]   .execution-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .execution-info[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .execution-name[_ngcontent-%COMP%] {\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin-bottom: 4px;\n    }\n\n    .execution-meta[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .execution-type[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-weight: 500;\n    }\n\n    .execution-duration[_ngcontent-%COMP%] {\n      color: var(--mj-text-disabled);\n    }\n\n    .execution-cost[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n      font-weight: 500;\n    }\n\n    .execution-status[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .progress-ring[_ngcontent-%COMP%] {\n      position: relative;\n      width: 24px;\n      height: 24px;\n    }\n\n    .progress-circle[_ngcontent-%COMP%] {\n      transform: rotate(-90deg);\n      transform-origin: center;\n      transition: stroke-dashoffset 0.3s ease;\n    }\n\n    .progress-text[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      font-weight: 600;\n      color: var(--mj-brand-primary);\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n    }\n\n    .status-indicator--running[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      animation: _ngcontent-%COMP%_pulse 2s infinite;\n    }\n\n    .status-indicator--completed[_ngcontent-%COMP%] {\n      background: var(--mj-status-success);\n      color: var(--mj-text-inverse);\n    }\n\n    .status-indicator--failed[_ngcontent-%COMP%] {\n      background: var(--mj-status-error);\n      color: var(--mj-text-inverse);\n    }\n\n    .show-more[_ngcontent-%COMP%] {\n      padding: 12px 20px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .show-more-btn[_ngcontent-%COMP%] {\n      width: 100%;\n      background: none;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s ease;\n    }\n\n    .show-more-btn[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .no-executions[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-disabled);\n      gap: 12px;\n    }\n\n    .no-executions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: var(--mj-border-default);\n    }\n\n    .no-executions[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    @media (max-width: 768px) {\n      .execution-item[_ngcontent-%COMP%] {\n        padding: 10px 16px;\n      }\n\n      .execution-meta[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n      }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LiveExecutionWidgetComponent, [{
         type: Component,
@@ -240,7 +240,7 @@ export class LiveExecutionWidgetComponent {
                   cy="12"
                   r="10"
                   fill="none"
-                  stroke="#e0e0e0"
+                  stroke="var(--mj-border-default)"
                   stroke-width="2"
                 />
                 <circle
@@ -248,7 +248,7 @@ export class LiveExecutionWidgetComponent {
                   cy="12"
                   r="10"
                   fill="none"
-                  stroke="#2196f3"
+                  stroke="var(--mj-brand-primary)"
                   stroke-width="2"
                   stroke-linecap="round"
                   [style.stroke-dasharray]="circumference"
@@ -286,7 +286,7 @@ export class LiveExecutionWidgetComponent {
         </div>
       }
     </div>
-  `, styles: ["\n    .live-execution-widget {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      height: 400px;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .widget-header {\n      padding: 20px 20px 16px;\n      border-bottom: 1px solid #f0f0f0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .widget-title {\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    .widget-title i {\n      color: #2196f3;\n    }\n\n    .active-count {\n      background: #e3f2fd;\n      color: #2196f3;\n      padding: 4px 12px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      transition: all 0.3s ease;\n    }\n\n    .active-count.pulsing {\n      animation: pulse 2s infinite;\n    }\n\n    @keyframes pulse {\n      0% { opacity: 1; }\n      50% { opacity: 0.7; }\n      100% { opacity: 1; }\n    }\n\n    .execution-list {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .execution-item {\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border-left: 3px solid transparent;\n    }\n\n    .execution-item:hover {\n      background: #f8f9fa;\n    }\n\n    .execution-item--running {\n      border-left-color: #2196f3;\n      background: rgba(33, 150, 243, 0.02);\n    }\n\n    .execution-item--completed {\n      border-left-color: #4caf50;\n    }\n\n    .execution-item--failed {\n      border-left-color: #f44336;\n      background: rgba(244, 67, 54, 0.02);\n    }\n\n    .execution-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .execution-item--running .execution-icon {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .execution-item--completed .execution-icon {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .execution-item--failed .execution-icon {\n      background: rgba(244, 67, 54, 0.1);\n      color: #f44336;\n    }\n\n    .execution-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .execution-name {\n      font-weight: 500;\n      color: #333;\n      font-size: 14px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin-bottom: 4px;\n    }\n\n    .execution-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 11px;\n      color: #666;\n    }\n\n    .execution-type {\n      background: #f0f0f0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-weight: 500;\n    }\n\n    .execution-duration {\n      color: #999;\n    }\n\n    .execution-cost {\n      color: #ff9800;\n      font-weight: 500;\n    }\n\n    .execution-status {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .progress-ring {\n      position: relative;\n      width: 24px;\n      height: 24px;\n    }\n\n    .progress-circle {\n      transform: rotate(-90deg);\n      transform-origin: center;\n      transition: stroke-dashoffset 0.3s ease;\n    }\n\n    .progress-text {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      font-weight: 600;\n      color: #2196f3;\n    }\n\n    .status-indicator {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n    }\n\n    .status-indicator--running {\n      background: #2196f3;\n      color: white;\n      animation: pulse 2s infinite;\n    }\n\n    .status-indicator--completed {\n      background: #4caf50;\n      color: white;\n    }\n\n    .status-indicator--failed {\n      background: #f44336;\n      color: white;\n    }\n\n    .show-more {\n      padding: 12px 20px;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .show-more-btn {\n      width: 100%;\n      background: none;\n      border: none;\n      color: #2196f3;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s ease;\n    }\n\n    .show-more-btn:hover {\n      background: rgba(33, 150, 243, 0.1);\n    }\n\n    .no-executions {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: #999;\n      gap: 12px;\n    }\n\n    .no-executions i {\n      font-size: 32px;\n      color: #ddd;\n    }\n\n    .no-executions p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    /* Custom scrollbar */\n    .execution-list::-webkit-scrollbar {\n      width: 4px;\n    }\n\n    .execution-list::-webkit-scrollbar-track {\n      background: #f1f1f1;\n    }\n\n    .execution-list::-webkit-scrollbar-thumb {\n      background: #ccc;\n      border-radius: 2px;\n    }\n\n    .execution-list::-webkit-scrollbar-thumb:hover {\n      background: #999;\n    }\n\n    @media (max-width: 768px) {\n      .execution-item {\n        padding: 10px 16px;\n      }\n      \n      .execution-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n      }\n    }\n  "] }]
+  `, styles: ["\n    .live-execution-widget {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      height: 400px;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .widget-header {\n      padding: 20px 20px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .widget-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    .widget-title i {\n      color: var(--mj-brand-primary);\n    }\n\n    .active-count {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      padding: 4px 12px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      transition: all 0.3s ease;\n    }\n\n    .active-count.pulsing {\n      animation: pulse 2s infinite;\n    }\n\n    @keyframes pulse {\n      0% { opacity: 1; }\n      50% { opacity: 0.7; }\n      100% { opacity: 1; }\n    }\n\n    .execution-list {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .execution-item {\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border-left: 3px solid transparent;\n    }\n\n    .execution-item:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .execution-item--running {\n      border-left-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-item--completed {\n      border-left-color: var(--mj-status-success);\n    }\n\n    .execution-item--failed {\n      border-left-color: var(--mj-status-error);\n      background: color-mix(in srgb, var(--mj-status-error) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .execution-item--running .execution-icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .execution-item--completed .execution-icon {\n      background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .execution-item--failed .execution-icon {\n      background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .execution-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .execution-name {\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin-bottom: 4px;\n    }\n\n    .execution-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .execution-type {\n      background: var(--mj-bg-surface-sunken);\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-weight: 500;\n    }\n\n    .execution-duration {\n      color: var(--mj-text-disabled);\n    }\n\n    .execution-cost {\n      color: var(--mj-status-warning);\n      font-weight: 500;\n    }\n\n    .execution-status {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .progress-ring {\n      position: relative;\n      width: 24px;\n      height: 24px;\n    }\n\n    .progress-circle {\n      transform: rotate(-90deg);\n      transform-origin: center;\n      transition: stroke-dashoffset 0.3s ease;\n    }\n\n    .progress-text {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      font-weight: 600;\n      color: var(--mj-brand-primary);\n    }\n\n    .status-indicator {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n    }\n\n    .status-indicator--running {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      animation: pulse 2s infinite;\n    }\n\n    .status-indicator--completed {\n      background: var(--mj-status-success);\n      color: var(--mj-text-inverse);\n    }\n\n    .status-indicator--failed {\n      background: var(--mj-status-error);\n      color: var(--mj-text-inverse);\n    }\n\n    .show-more {\n      padding: 12px 20px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .show-more-btn {\n      width: 100%;\n      background: none;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s ease;\n    }\n\n    .show-more-btn:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .no-executions {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-disabled);\n      gap: 12px;\n    }\n\n    .no-executions i {\n      font-size: 32px;\n      color: var(--mj-border-default);\n    }\n\n    .no-executions p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    @media (max-width: 768px) {\n      .execution-item {\n        padding: 10px 16px;\n      }\n\n      .execution-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n      }\n    }\n  "] }]
     }], null, { executions: [{
             type: Input
         }], maxVisible: [{
@@ -294,5 +294,5 @@ export class LiveExecutionWidgetComponent {
         }], executionClick: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LiveExecutionWidgetComponent, { className: "LiveExecutionWidgetComponent", filePath: "src/AI/components/widgets/live-execution-widget.component.ts", lineNumber: 383 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LiveExecutionWidgetComponent, { className: "LiveExecutionWidgetComponent", filePath: "src/AI/components/widgets/live-execution-widget.component.ts", lineNumber: 365 }); })();
 //# sourceMappingURL=live-execution-widget.component.js.map

package/dist/AI/components/widgets/live-execution-widget.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"live-execution-widget.component.js","sourceRoot":"","sources":["../../../../src/AI/components/widgets/live-execution-widget.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';\nimport { LiveExecution } from '../../services/ai-instrumentation.service';\n\n@Component({\n  standalone: false,\n  selector: 'app-live-execution-widget',\n  template: `\n    <div class=\"live-execution-widget\">\n      <div class=\"widget-header\">\n        <h3 class=\"widget-title\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          Live Executions\n        </h3>\n        <div class=\"active-count\" [class.pulsing]=\"hasActiveExecutions()\">\n          {{ getActiveCount() }} active\n        </div>\n      </div>\n\n      @if (executions.length > 0) {\n        <div class=\"execution-list\">\n          @for (execution of executions.slice(0, maxVisible); track execution.id) {\n            <div \n              class=\"execution-item\"\n              [class]=\"'execution-item--' + execution.status\"\n              (click)=\"onExecutionClick(execution)\"\n            >\n          <div class=\"execution-icon\">\n            <i [class]=\"getExecutionIcon(execution)\"></i>\n          </div>\n          \n          <div class=\"execution-info\">\n            <div class=\"execution-name\">{{ execution.name }}</div>\n            <div class=\"execution-meta\">\n              <span class=\"execution-type\">{{ execution.type }}</span>\n              <span class=\"execution-duration\">{{ formatDuration(execution.duration) }}</span>\n              @if (execution.cost) {\n                <span class=\"execution-cost\">\n                  {{ formatCurrency(execution.cost) }}\n                </span>\n              }\n            </div>\n          </div>\n\n          <div class=\"execution-status\">\n            @if (execution.status === 'running' && execution.progress) {\n              <div class=\"progress-ring\">\n              <svg width=\"24\" height=\"24\">\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                  fill=\"none\"\n                  stroke=\"#e0e0e0\"\n                  stroke-width=\"2\"\n                />\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                  fill=\"none\"\n                  stroke=\"#2196f3\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  [style.stroke-dasharray]=\"circumference\"\n                  [style.stroke-dashoffset]=\"getProgressOffset(execution.progress)\"\n                  class=\"progress-circle\"\n                />\n              </svg>\n                <span class=\"progress-text\">{{ execution.progress.toFixed(0) }}%</span>\n              </div>\n            }\n            \n            <div class=\"status-indicator\" [class]=\"'status-indicator--' + execution.status\">\n              <i [class]=\"getStatusIcon(execution.status)\"></i>\n            </div>\n          </div>\n            </div>\n          }\n\n          @if (executions.length > maxVisible) {\n            <div class=\"show-more\">\n          <button \n            class=\"show-more-btn\"\n            (click)=\"toggleShowAll()\"\n          >\n              {{ showAll ? 'Show Less' : 'Show All (' + executions.length + ')' }}\n              <i [class]=\"showAll ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n            </button>\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"no-executions\">\n          <i class=\"fa-solid fa-circle-check\"></i>\n          <p>No recent executions</p>\n        </div>\n      }\n    </div>\n  `,\n  styles: [`\n    .live-execution-widget {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      height: 400px;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .widget-header {\n      padding: 20px 20px 16px;\n      border-bottom: 1px solid #f0f0f0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .widget-title {\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    .widget-title i {\n      color: #2196f3;\n    }\n\n    .active-count {\n      background: #e3f2fd;\n      color: #2196f3;\n      padding: 4px 12px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      transition: all 0.3s ease;\n    }\n\n    .active-count.pulsing {\n      animation: pulse 2s infinite;\n    }\n\n    @keyframes pulse {\n      0% { opacity: 1; }\n      50% { opacity: 0.7; }\n      100% { opacity: 1; }\n    }\n\n    .execution-list {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .execution-item {\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border-left: 3px solid transparent;\n    }\n\n    .execution-item:hover {\n      background: #f8f9fa;\n    }\n\n    .execution-item--running {\n      border-left-color: #2196f3;\n      background: rgba(33, 150, 243, 0.02);\n    }\n\n    .execution-item--completed {\n      border-left-color: #4caf50;\n    }\n\n    .execution-item--failed {\n      border-left-color: #f44336;\n      background: rgba(244, 67, 54, 0.02);\n    }\n\n    .execution-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .execution-item--running .execution-icon {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .execution-item--completed .execution-icon {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .execution-item--failed .execution-icon {\n      background: rgba(244, 67, 54, 0.1);\n      color: #f44336;\n    }\n\n    .execution-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .execution-name {\n      font-weight: 500;\n      color: #333;\n      font-size: 14px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin-bottom: 4px;\n    }\n\n    .execution-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 11px;\n      color: #666;\n    }\n\n    .execution-type {\n      background: #f0f0f0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-weight: 500;\n    }\n\n    .execution-duration {\n      color: #999;\n    }\n\n    .execution-cost {\n      color: #ff9800;\n      font-weight: 500;\n    }\n\n    .execution-status {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .progress-ring {\n      position: relative;\n      width: 24px;\n      height: 24px;\n    }\n\n    .progress-circle {\n      transform: rotate(-90deg);\n      transform-origin: center;\n      transition: stroke-dashoffset 0.3s ease;\n    }\n\n    .progress-text {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      font-weight: 600;\n      color: #2196f3;\n    }\n\n    .status-indicator {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n    }\n\n    .status-indicator--running {\n      background: #2196f3;\n      color: white;\n      animation: pulse 2s infinite;\n    }\n\n    .status-indicator--completed {\n      background: #4caf50;\n      color: white;\n    }\n\n    .status-indicator--failed {\n      background: #f44336;\n      color: white;\n    }\n\n    .show-more {\n      padding: 12px 20px;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .show-more-btn {\n      width: 100%;\n      background: none;\n      border: none;\n      color: #2196f3;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s ease;\n    }\n\n    .show-more-btn:hover {\n      background: rgba(33, 150, 243, 0.1);\n    }\n\n    .no-executions {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: #999;\n      gap: 12px;\n    }\n\n    .no-executions i {\n      font-size: 32px;\n      color: #ddd;\n    }\n\n    .no-executions p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    /* Custom scrollbar */\n    .execution-list::-webkit-scrollbar {\n      width: 4px;\n    }\n\n    .execution-list::-webkit-scrollbar-track {\n      background: #f1f1f1;\n    }\n\n    .execution-list::-webkit-scrollbar-thumb {\n      background: #ccc;\n      border-radius: 2px;\n    }\n\n    .execution-list::-webkit-scrollbar-thumb:hover {\n      background: #999;\n    }\n\n    @media (max-width: 768px) {\n      .execution-item {\n        padding: 10px 16px;\n      }\n      \n      .execution-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n      }\n    }\n  `]\n})\nexport class LiveExecutionWidgetComponent implements OnInit, OnDestroy {\n  @Input() executions: LiveExecution[] = [];\n  @Input() maxVisible = 8;\n  @Output() executionClick = new EventEmitter<LiveExecution>();\n\n  showAll = false;\n  circumference = 2 * Math.PI * 10; // r=10\n\n  ngOnInit() {}\n\n  ngOnDestroy() {}\n\n  trackByExecutionId(index: number, execution: LiveExecution): string {\n    return execution.id;\n  }\n\n  hasActiveExecutions(): boolean {\n    return this.executions.some(e => e.status === 'running');\n  }\n\n  getActiveCount(): number {\n    return this.executions.filter(e => e.status === 'running').length;\n  }\n\n  getExecutionIcon(execution: LiveExecution): string {\n    if (execution.type === 'agent') {\n      return 'fa-solid fa-robot';\n    } else {\n      return 'fa-solid fa-comment-dots';\n    }\n  }\n\n  getStatusIcon(status: string): string {\n    switch (status) {\n      case 'running':\n        return 'fa-solid fa-play';\n      case 'completed':\n        return 'fa-solid fa-check';\n      case 'failed':\n        return 'fa-solid fa-times';\n      default:\n        return 'fa-solid fa-question';\n    }\n  }\n\n  formatDuration(duration?: number): string {\n    if (!duration) return '0s';\n    \n    const seconds = Math.floor(duration / 1000);\n    const minutes = Math.floor(seconds / 60);\n    const hours = Math.floor(minutes / 60);\n\n    if (hours > 0) {\n      return `${hours}h ${minutes % 60}m`;\n    } else if (minutes > 0) {\n      return `${minutes}m ${seconds % 60}s`;\n    } else {\n      return `${seconds}s`;\n    }\n  }\n\n  getProgressOffset(progress: number): number {\n    return this.circumference - (progress / 100) * this.circumference;\n  }\n\n  toggleShowAll(): void {\n    this.showAll = !this.showAll;\n    this.maxVisible = this.showAll ? this.executions.length : 8;\n  }\n\n  onExecutionClick(execution: LiveExecution): void {\n    this.executionClick.emit(execution);\n  }\n\n  formatCurrency(amount: number): string {\n    return `$${amount.toFixed(4)}`;\n  }\n}"]}
+{"version":3,"file":"live-execution-widget.component.js","sourceRoot":"","sources":["../../../../src/AI/components/widgets/live-execution-widget.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';\nimport { LiveExecution } from '../../services/ai-instrumentation.service';\n\n@Component({\n  standalone: false,\n  selector: 'app-live-execution-widget',\n  template: `\n    <div class=\"live-execution-widget\">\n      <div class=\"widget-header\">\n        <h3 class=\"widget-title\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          Live Executions\n        </h3>\n        <div class=\"active-count\" [class.pulsing]=\"hasActiveExecutions()\">\n          {{ getActiveCount() }} active\n        </div>\n      </div>\n\n      @if (executions.length > 0) {\n        <div class=\"execution-list\">\n          @for (execution of executions.slice(0, maxVisible); track execution.id) {\n            <div \n              class=\"execution-item\"\n              [class]=\"'execution-item--' + execution.status\"\n              (click)=\"onExecutionClick(execution)\"\n            >\n          <div class=\"execution-icon\">\n            <i [class]=\"getExecutionIcon(execution)\"></i>\n          </div>\n          \n          <div class=\"execution-info\">\n            <div class=\"execution-name\">{{ execution.name }}</div>\n            <div class=\"execution-meta\">\n              <span class=\"execution-type\">{{ execution.type }}</span>\n              <span class=\"execution-duration\">{{ formatDuration(execution.duration) }}</span>\n              @if (execution.cost) {\n                <span class=\"execution-cost\">\n                  {{ formatCurrency(execution.cost) }}\n                </span>\n              }\n            </div>\n          </div>\n\n          <div class=\"execution-status\">\n            @if (execution.status === 'running' && execution.progress) {\n              <div class=\"progress-ring\">\n              <svg width=\"24\" height=\"24\">\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                  fill=\"none\"\n                  stroke=\"var(--mj-border-default)\"\n                  stroke-width=\"2\"\n                />\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                  fill=\"none\"\n                  stroke=\"var(--mj-brand-primary)\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  [style.stroke-dasharray]=\"circumference\"\n                  [style.stroke-dashoffset]=\"getProgressOffset(execution.progress)\"\n                  class=\"progress-circle\"\n                />\n              </svg>\n                <span class=\"progress-text\">{{ execution.progress.toFixed(0) }}%</span>\n              </div>\n            }\n            \n            <div class=\"status-indicator\" [class]=\"'status-indicator--' + execution.status\">\n              <i [class]=\"getStatusIcon(execution.status)\"></i>\n            </div>\n          </div>\n            </div>\n          }\n\n          @if (executions.length > maxVisible) {\n            <div class=\"show-more\">\n          <button \n            class=\"show-more-btn\"\n            (click)=\"toggleShowAll()\"\n          >\n              {{ showAll ? 'Show Less' : 'Show All (' + executions.length + ')' }}\n              <i [class]=\"showAll ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n            </button>\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"no-executions\">\n          <i class=\"fa-solid fa-circle-check\"></i>\n          <p>No recent executions</p>\n        </div>\n      }\n    </div>\n  `,\n  styles: [`\n    .live-execution-widget {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      height: 400px;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .widget-header {\n      padding: 20px 20px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .widget-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    .widget-title i {\n      color: var(--mj-brand-primary);\n    }\n\n    .active-count {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      padding: 4px 12px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      transition: all 0.3s ease;\n    }\n\n    .active-count.pulsing {\n      animation: pulse 2s infinite;\n    }\n\n    @keyframes pulse {\n      0% { opacity: 1; }\n      50% { opacity: 0.7; }\n      100% { opacity: 1; }\n    }\n\n    .execution-list {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .execution-item {\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border-left: 3px solid transparent;\n    }\n\n    .execution-item:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .execution-item--running {\n      border-left-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-item--completed {\n      border-left-color: var(--mj-status-success);\n    }\n\n    .execution-item--failed {\n      border-left-color: var(--mj-status-error);\n      background: color-mix(in srgb, var(--mj-status-error) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .execution-item--running .execution-icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .execution-item--completed .execution-icon {\n      background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .execution-item--failed .execution-icon {\n      background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .execution-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .execution-name {\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin-bottom: 4px;\n    }\n\n    .execution-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .execution-type {\n      background: var(--mj-bg-surface-sunken);\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-weight: 500;\n    }\n\n    .execution-duration {\n      color: var(--mj-text-disabled);\n    }\n\n    .execution-cost {\n      color: var(--mj-status-warning);\n      font-weight: 500;\n    }\n\n    .execution-status {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .progress-ring {\n      position: relative;\n      width: 24px;\n      height: 24px;\n    }\n\n    .progress-circle {\n      transform: rotate(-90deg);\n      transform-origin: center;\n      transition: stroke-dashoffset 0.3s ease;\n    }\n\n    .progress-text {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      font-weight: 600;\n      color: var(--mj-brand-primary);\n    }\n\n    .status-indicator {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n    }\n\n    .status-indicator--running {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      animation: pulse 2s infinite;\n    }\n\n    .status-indicator--completed {\n      background: var(--mj-status-success);\n      color: var(--mj-text-inverse);\n    }\n\n    .status-indicator--failed {\n      background: var(--mj-status-error);\n      color: var(--mj-text-inverse);\n    }\n\n    .show-more {\n      padding: 12px 20px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .show-more-btn {\n      width: 100%;\n      background: none;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s ease;\n    }\n\n    .show-more-btn:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .no-executions {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-disabled);\n      gap: 12px;\n    }\n\n    .no-executions i {\n      font-size: 32px;\n      color: var(--mj-border-default);\n    }\n\n    .no-executions p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    @media (max-width: 768px) {\n      .execution-item {\n        padding: 10px 16px;\n      }\n\n      .execution-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n      }\n    }\n  `]\n})\nexport class LiveExecutionWidgetComponent implements OnInit, OnDestroy {\n  @Input() executions: LiveExecution[] = [];\n  @Input() maxVisible = 8;\n  @Output() executionClick = new EventEmitter<LiveExecution>();\n\n  showAll = false;\n  circumference = 2 * Math.PI * 10; // r=10\n\n  ngOnInit() {}\n\n  ngOnDestroy() {}\n\n  trackByExecutionId(index: number, execution: LiveExecution): string {\n    return execution.id;\n  }\n\n  hasActiveExecutions(): boolean {\n    return this.executions.some(e => e.status === 'running');\n  }\n\n  getActiveCount(): number {\n    return this.executions.filter(e => e.status === 'running').length;\n  }\n\n  getExecutionIcon(execution: LiveExecution): string {\n    if (execution.type === 'agent') {\n      return 'fa-solid fa-robot';\n    } else {\n      return 'fa-solid fa-comment-dots';\n    }\n  }\n\n  getStatusIcon(status: string): string {\n    switch (status) {\n      case 'running':\n        return 'fa-solid fa-play';\n      case 'completed':\n        return 'fa-solid fa-check';\n      case 'failed':\n        return 'fa-solid fa-times';\n      default:\n        return 'fa-solid fa-question';\n    }\n  }\n\n  formatDuration(duration?: number): string {\n    if (!duration) return '0s';\n    \n    const seconds = Math.floor(duration / 1000);\n    const minutes = Math.floor(seconds / 60);\n    const hours = Math.floor(minutes / 60);\n\n    if (hours > 0) {\n      return `${hours}h ${minutes % 60}m`;\n    } else if (minutes > 0) {\n      return `${minutes}m ${seconds % 60}s`;\n    } else {\n      return `${seconds}s`;\n    }\n  }\n\n  getProgressOffset(progress: number): number {\n    return this.circumference - (progress / 100) * this.circumference;\n  }\n\n  toggleShowAll(): void {\n    this.showAll = !this.showAll;\n    this.maxVisible = this.showAll ? this.executions.length : 8;\n  }\n\n  onExecutionClick(execution: LiveExecution): void {\n    this.executionClick.emit(execution);\n  }\n\n  formatCurrency(amount: number): string {\n    return `$${amount.toFixed(4)}`;\n  }\n}"]}

package/dist/AI/index.d.ts

@@ -8,4 +8,5 @@ export * from './components/widgets/kpi-card.component';
 export * from './components/widgets/live-execution-widget.component';
 export * from './components/charts/time-series-chart.component';
 export * from './components/charts/performance-heatmap.component';
+export * from './components/requests/agent-requests-resource.component';
 //# sourceMappingURL=index.d.ts.map

package/dist/AI/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AI/index.ts"],"names":[],"mappings":"AACA,cAAc,uCAAuC,CAAC;AAGtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kDAAkD,CAAC;AACjE,cAAc,mDAAmD,CAAC;AAClE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oDAAoD,CAAC;AAGnE,cAAc,yCAAyC,CAAC;AACxD,cAAc,sDAAsD,CAAC;AACrE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AI/index.ts"],"names":[],"mappings":"AACA,cAAc,uCAAuC,CAAC;AAGtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kDAAkD,CAAC;AACjE,cAAc,mDAAmD,CAAC;AAClE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oDAAoD,CAAC;AAGnE,cAAc,yCAAyC,CAAC;AACxD,cAAc,sDAAsD,CAAC;AACrE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC;AAGlE,cAAc,yDAAyD,CAAC"}

package/dist/AI/index.js

@@ -11,4 +11,6 @@ export * from './components/widgets/kpi-card.component';
 export * from './components/widgets/live-execution-widget.component';
 export * from './components/charts/time-series-chart.component';
 export * from './components/charts/performance-heatmap.component';
+// Agent Requests
+export * from './components/requests/agent-requests-resource.component';
 //# sourceMappingURL=index.js.map

package/dist/AI/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/AI/index.ts"],"names":[],"mappings":"AAAA,WAAW;AACX,cAAc,uCAAuC,CAAC;AAEtD,kBAAkB;AAClB,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kDAAkD,CAAC;AACjE,cAAc,mDAAmD,CAAC;AAClE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oDAAoD,CAAC;AAEnE,oBAAoB;AACpB,cAAc,yCAAyC,CAAC;AACxD,cAAc,sDAAsD,CAAC;AACrE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC","sourcesContent":["// Services\nexport * from './services/ai-instrumentation.service';\n\n// Main Components\nexport * from './components/execution-monitoring.component';\nexport * from './components/prompts/prompt-management.component';\nexport * from './components/agents/agent-configuration.component';\nexport * from './components/models/model-management.component';\nexport * from './components/system/system-configuration.component';\n\n// Widget Components\nexport * from './components/widgets/kpi-card.component';\nexport * from './components/widgets/live-execution-widget.component';\nexport * from './components/charts/time-series-chart.component';\nexport * from './components/charts/performance-heatmap.component';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/AI/index.ts"],"names":[],"mappings":"AAAA,WAAW;AACX,cAAc,uCAAuC,CAAC;AAEtD,kBAAkB;AAClB,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kDAAkD,CAAC;AACjE,cAAc,mDAAmD,CAAC;AAClE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oDAAoD,CAAC;AAEnE,oBAAoB;AACpB,cAAc,yCAAyC,CAAC;AACxD,cAAc,sDAAsD,CAAC;AACrE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC;AAElE,iBAAiB;AACjB,cAAc,yDAAyD,CAAC","sourcesContent":["// Services\nexport * from './services/ai-instrumentation.service';\n\n// Main Components\nexport * from './components/execution-monitoring.component';\nexport * from './components/prompts/prompt-management.component';\nexport * from './components/agents/agent-configuration.component';\nexport * from './components/models/model-management.component';\nexport * from './components/system/system-configuration.component';\n\n// Widget Components\nexport * from './components/widgets/kpi-card.component';\nexport * from './components/widgets/live-execution-widget.component';\nexport * from './components/charts/time-series-chart.component';\nexport * from './components/charts/performance-heatmap.component';\n\n// Agent Requests\nexport * from './components/requests/agent-requests-resource.component';"]}