@memberjunction/ng-dashboards 4.0.0 → 4.1.0

package/dist/APIKeys/api-scopes-panel.component.js

@@ -644,5 +644,5 @@ export class APIScopesPanelComponent {
     }], () => [{ type: i0.ChangeDetectorRef }], { ScopeUpdated: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIScopesPanelComponent, { className: "APIScopesPanelComponent", filePath: "src/apikeys/api-scopes-panel.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIScopesPanelComponent, { className: "APIScopesPanelComponent", filePath: "src/APIKeys/api-scopes-panel.component.ts", lineNumber: 22 }); })();
 //# sourceMappingURL=api-scopes-panel.component.js.map

package/dist/APIKeys/api-usage-panel.component.js

@@ -1012,5 +1012,5 @@ export class APIUsagePanelComponent {
         type: Component,
         args: [{ standalone: false, selector: 'mj-api-usage-panel', template: "<div class=\"usage-panel\">\n  @if (IsLoading) {\n    <mj-loading text=\"Loading usage analytics...\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"header-left\">\n        <h3 class=\"panel-title\">\n          <i class=\"fa-solid fa-chart-line\"></i>\n          API Usage Analytics\n        </h3>\n        <p class=\"panel-subtitle\">Monitor API key usage, performance, and trends</p>\n      </div>\n      <div class=\"time-filters\">\n        <button class=\"time-btn\" [class.active]=\"TimeRange === 'day'\"\n        (click)=\"setTimeRange('day')\">24 Hours</button>\n        <button class=\"time-btn\" [class.active]=\"TimeRange === 'week'\"\n        (click)=\"setTimeRange('week')\">7 Days</button>\n        <button class=\"time-btn\" [class.active]=\"TimeRange === 'month'\"\n        (click)=\"setTimeRange('month')\">30 Days</button>\n        <button class=\"time-btn\" [class.active]=\"TimeRange === 'all'\"\n        (click)=\"setTimeRange('all')\">All Time</button>\n      </div>\n    </div>\n    <!-- Summary KPIs -->\n    <div class=\"kpi-grid\">\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon requests\">\n          <i class=\"fa-solid fa-arrow-right-arrow-left\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{formatNumber(TotalRequests)}}</div>\n          <div class=\"kpi-label\">Total Requests</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\" [class.success]=\"SuccessRate >= 95\">\n        <div class=\"kpi-icon success-rate\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{SuccessRate}}%</div>\n          <div class=\"kpi-label\">Success Rate</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\" [class.warning]=\"TotalErrors > 0\">\n        <div class=\"kpi-icon errors\">\n          <i class=\"fa-solid fa-circle-exclamation\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{formatNumber(TotalErrors)}}</div>\n          <div class=\"kpi-label\">Errors</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon response-time\">\n          <i class=\"fa-solid fa-gauge-high\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{AvgResponseTime}}ms</div>\n          <div class=\"kpi-label\">Avg Response Time</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon keys\">\n          <i class=\"fa-solid fa-key\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{UniqueKeys}}</div>\n          <div class=\"kpi-label\">Active Keys</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon endpoints\">\n          <i class=\"fa-solid fa-code-branch\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{UniqueEndpoints}}</div>\n          <div class=\"kpi-label\">Unique Endpoints</div>\n        </div>\n      </div>\n    </div>\n    <!-- Usage Chart -->\n    <div class=\"chart-section\">\n      <div class=\"chart-header\">\n        <h4>Request Volume</h4>\n        <div class=\"chart-legend\">\n          <span class=\"legend-item\">\n            <span class=\"legend-color requests\"></span> Requests\n          </span>\n          <span class=\"legend-item\">\n            <span class=\"legend-color errors\"></span> Errors\n          </span>\n        </div>\n      </div>\n      @if (TimeBuckets.length > 0) {\n        <div class=\"chart-container\">\n          <div class=\"chart-bars\">\n            @for (bucket of TimeBuckets; track bucket) {\n              <div class=\"bar-group\" [title]=\"bucket.requests + ' requests, ' + bucket.errors + ' errors'\">\n                <div class=\"bar-wrapper\">\n                  <div class=\"bar requests-bar\"\n                    [style.height.%]=\"getBarHeight(bucket.requests)\">\n                    @if (bucket.errors > 0) {\n                      <div class=\"bar errors-bar\"\n                        [style.height.%]=\"getErrorBarHeight(bucket)\"\n                        >\n                      </div>\n                    }\n                  </div>\n                </div>\n                <div class=\"bar-label\">{{bucket.label}}</div>\n              </div>\n            }\n          </div>\n          <div class=\"chart-y-axis\">\n            <span>{{formatNumber(MaxRequests)}}</span>\n            <span>{{formatNumber(Math.round(MaxRequests / 2))}}</span>\n            <span>0</span>\n          </div>\n        </div>\n      }\n      @if (TimeBuckets.length === 0) {\n        <div class=\"empty-chart\">\n          <i class=\"fa-solid fa-chart-area\"></i>\n          <span>No usage data available</span>\n        </div>\n      }\n    </div>\n    <!-- Breakdown Grid -->\n    <div class=\"breakdown-grid\">\n      <!-- Top Endpoints -->\n      <div class=\"breakdown-card\">\n        <div class=\"breakdown-header\">\n          <h4>\n            <i class=\"fa-solid fa-code-branch\"></i>\n            Top Endpoints\n          </h4>\n        </div>\n        <div class=\"breakdown-content\">\n          @if (TopEndpoints.length > 0) {\n            <div class=\"endpoint-list\">\n              @for (ep of TopEndpoints; track ep) {\n                <div class=\"endpoint-item\"\n                  (click)=\"drillDownEndpoint(ep)\">\n                  <div class=\"endpoint-info\">\n                    <span class=\"method-badge\" [ngClass]=\"getMethodClass(ep.method)\">\n                      {{ep.method}}\n                    </span>\n                    <span class=\"endpoint-path\">{{ep.endpoint}}</span>\n                  </div>\n                  <div class=\"endpoint-stats\">\n                    <span class=\"endpoint-requests\">{{formatNumber(ep.requests)}}</span>\n                    <span class=\"endpoint-time\">{{ep.avgResponseTime}}ms</span>\n                    <span class=\"endpoint-error\" [class.has-errors]=\"ep.errorRate > 0\">\n                      {{ep.errorRate}}% err\n                    </span>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n          @if (TopEndpoints.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-code-branch\"></i>\n              <span>No endpoint data</span>\n            </div>\n          }\n        </div>\n      </div>\n      <!-- Top Keys -->\n      <div class=\"breakdown-card\">\n        <div class=\"breakdown-header\">\n          <h4>\n            <i class=\"fa-solid fa-key\"></i>\n            Most Active Keys\n          </h4>\n        </div>\n        <div class=\"breakdown-content\">\n          @if (TopKeys.length > 0) {\n            <div class=\"key-list\">\n              @for (key of TopKeys; track key) {\n                <div class=\"key-item\"\n                  (click)=\"drillDownKey(key)\">\n                  <div class=\"key-info\">\n                    <span class=\"key-label\">{{key.label}}</span>\n                    <span class=\"key-last-used\">{{formatDate(key.lastUsed)}}</span>\n                  </div>\n                  <div class=\"key-requests\">{{formatNumber(key.requests)}}</div>\n                </div>\n              }\n            </div>\n          }\n          @if (TopKeys.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-key\"></i>\n              <span>No key data</span>\n            </div>\n          }\n        </div>\n      </div>\n      <!-- Status Distribution -->\n      <div class=\"breakdown-card\">\n        <div class=\"breakdown-header\">\n          <h4>\n            <i class=\"fa-solid fa-circle-half-stroke\"></i>\n            Status Distribution\n          </h4>\n        </div>\n        <div class=\"breakdown-content\">\n          @if (StatusGroups.length > 0) {\n            <div class=\"status-distribution\">\n              <div class=\"status-bar\">\n                @for (group of StatusGroups; track group) {\n                  <div class=\"status-segment\"\n                    [style.width.%]=\"group.percentage\"\n                    [style.backgroundColor]=\"group.color\"\n                    [title]=\"group.label + ': ' + group.count + ' (' + group.percentage + '%)'\">\n                  </div>\n                }\n              </div>\n              <div class=\"status-legend\">\n                @for (group of StatusGroups; track group) {\n                  <div class=\"status-legend-item\">\n                    <span class=\"status-color\" [style.backgroundColor]=\"group.color\"></span>\n                    <span class=\"status-label\">{{group.label}}</span>\n                    <span class=\"status-count\">{{formatNumber(group.count)}} ({{group.percentage}}%)</span>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          @if (StatusGroups.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-circle-half-stroke\"></i>\n              <span>No status data</span>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <!-- Recent Logs -->\n    <div class=\"logs-section\">\n      <div class=\"logs-header\">\n        <h4>\n          <i class=\"fa-solid fa-list\"></i>\n          Recent Requests\n        </h4>\n      </div>\n      @if (RecentLogs.length > 0) {\n        <div class=\"logs-table\">\n          <div class=\"logs-table-header\">\n            <span class=\"col-time\">Time</span>\n            <span class=\"col-key\">API Key</span>\n            <span class=\"col-method\">Method</span>\n            <span class=\"col-endpoint\">Endpoint</span>\n            <span class=\"col-status\">Status</span>\n            <span class=\"col-duration\">Duration</span>\n          </div>\n          <div class=\"logs-table-body\">\n            @for (log of RecentLogs; track log) {\n              <div class=\"log-row\">\n                <span class=\"col-time\">{{formatDate(log.timestamp)}}</span>\n                <span class=\"col-key\">{{log.keyLabel}}</span>\n                <span class=\"col-method\">\n                  <span class=\"method-badge\" [ngClass]=\"getMethodClass(log.method)\">\n                    {{log.method}}\n                  </span>\n                </span>\n                <span class=\"col-endpoint\">{{log.endpoint}}</span>\n                <span class=\"col-status\" [ngClass]=\"getStatusClass(log.statusCode)\">\n                  {{log.statusCode}}\n                </span>\n                <span class=\"col-duration\">{{log.responseTime}}ms</span>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @if (RecentLogs.length === 0) {\n        <div class=\"empty-state large\">\n          <i class=\"fa-solid fa-inbox\"></i>\n          <span>No requests logged yet</span>\n          <p>API usage will appear here once keys are used</p>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Drill-down Panel -->\n  @if (ShowLogsPanel) {\n    <kendo-window\n      [width]=\"800\"\n      [minWidth]=\"600\"\n      [height]=\"500\"\n      [minHeight]=\"400\"\n      [resizable]=\"true\"\n      [draggable]=\"true\"\n      [top]=\"80\"\n      (close)=\"closeLogsPanel()\">\n      <kendo-window-titlebar>\n        <div class=\"drilldown-title\">\n          <i class=\"fa-solid fa-magnifying-glass-chart\"></i>\n          <span>Request Details</span>\n          @if (LogsFilter.endpoint) {\n            <span class=\"filter-badge\">\n              {{LogsFilter.endpoint}}\n            </span>\n          }\n          @if (LogsFilter.keyId) {\n            <span class=\"filter-badge\">\n              Key: {{KeyMap.get(LogsFilter.keyId) || 'Unknown'}}\n            </span>\n          }\n        </div>\n        <button kendoButton fillMode=\"flat\" (click)=\"closeLogsPanel()\" class=\"window-close-btn\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </kendo-window-titlebar>\n      <div class=\"drilldown-content\">\n        @if (IsLoadingLogs) {\n          <mj-loading text=\"Loading requests...\"></mj-loading>\n        }\n        @if (!IsLoadingLogs) {\n          <div class=\"drilldown-logs\">\n            <div class=\"logs-table\">\n              <div class=\"logs-table-header\">\n                <span class=\"col-time\">Time</span>\n                <span class=\"col-key\">API Key</span>\n                <span class=\"col-method\">Method</span>\n                <span class=\"col-endpoint\">Endpoint</span>\n                <span class=\"col-status\">Status</span>\n                <span class=\"col-duration\">Duration</span>\n              </div>\n              <div class=\"logs-table-body scrollable\">\n                @for (log of RecentLogs; track log) {\n                  <div class=\"log-row\">\n                    <span class=\"col-time\">{{formatDate(log.timestamp)}}</span>\n                    <span class=\"col-key\">{{log.keyLabel}}</span>\n                    <span class=\"col-method\">\n                      <span class=\"method-badge\" [ngClass]=\"getMethodClass(log.method)\">\n                        {{log.method}}\n                      </span>\n                    </span>\n                    <span class=\"col-endpoint\">{{log.endpoint}}</span>\n                    <span class=\"col-status\" [ngClass]=\"getStatusClass(log.statusCode)\">\n                      {{log.statusCode}}\n                    </span>\n                    <span class=\"col-duration\">{{log.responseTime}}ms</span>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </kendo-window>\n  }\n</div>\n", styles: [".usage-panel {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 24px;\n    background: #f8fafc;\n    min-height: 100%;\n}\n\n/* Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 24px;\n    flex-wrap: wrap;\n}\n\n.header-left {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0;\n    font-size: 24px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.panel-title i {\n    color: #6366f1;\n}\n\n.panel-subtitle {\n    margin: 0;\n    font-size: 14px;\n    color: #6b7280;\n}\n\n/* Time Filters */\n.time-filters {\n    display: flex;\n    gap: 4px;\n    background: white;\n    padding: 4px;\n    border-radius: 10px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.time-btn {\n    padding: 8px 16px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.time-btn:hover {\n    color: #374151;\n    background: #f3f4f6;\n}\n\n.time-btn.active {\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n/* KPI Grid */\n.kpi-grid {\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    gap: 16px;\n}\n\n.kpi-card {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 18px 20px;\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    transition: all 0.2s ease;\n}\n\n.kpi-card:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n}\n\n.kpi-card.success {\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n}\n\n.kpi-card.warning {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n}\n\n.kpi-icon {\n    width: 44px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    font-size: 18px;\n}\n\n.kpi-icon.requests {\n    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\n    color: #2563eb;\n}\n\n.kpi-icon.success-rate {\n    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);\n    color: #059669;\n}\n\n.kpi-icon.errors {\n    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n    color: #dc2626;\n}\n\n.kpi-icon.response-time {\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    color: #4f46e5;\n}\n\n.kpi-icon.keys {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    color: #d97706;\n}\n\n.kpi-icon.endpoints {\n    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n    color: #7c3aed;\n}\n\n.kpi-content {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.kpi-value {\n    font-size: 22px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.kpi-label {\n    font-size: 12px;\n    color: #6b7280;\n}\n\n/* Chart Section */\n.chart-section {\n    background: white;\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.chart-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.chart-header h4 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.chart-legend {\n    display: flex;\n    gap: 16px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n}\n\n.legend-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.requests {\n    background: #6366f1;\n}\n\n.legend-color.errors {\n    background: #ef4444;\n}\n\n.chart-container {\n    display: flex;\n    height: 200px;\n    gap: 8px;\n}\n\n.chart-bars {\n    flex: 1;\n    display: flex;\n    align-items: flex-end;\n    gap: 4px;\n    padding-bottom: 24px;\n}\n\n.bar-group {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n}\n\n.bar-wrapper {\n    width: 100%;\n    height: 160px;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n}\n\n.bar {\n    width: 100%;\n    max-width: 32px;\n    border-radius: 4px 4px 0 0;\n    transition: all 0.3s ease;\n    position: relative;\n}\n\n.bar.requests-bar {\n    background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%);\n}\n\n.bar.requests-bar:hover {\n    background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);\n}\n\n.bar.errors-bar {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background: #ef4444;\n    border-radius: 0;\n}\n\n.bar-label {\n    margin-top: 8px;\n    font-size: 10px;\n    color: #9ca3af;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 100%;\n}\n\n.chart-y-axis {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding-bottom: 24px;\n    font-size: 10px;\n    color: #9ca3af;\n    text-align: right;\n    min-width: 40px;\n}\n\n.empty-chart {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 200px;\n    color: #9ca3af;\n}\n\n.empty-chart i {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n/* Breakdown Grid */\n.breakdown-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 20px;\n}\n\n.breakdown-card {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.breakdown-header {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.breakdown-header h4 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.breakdown-header h4 i {\n    color: #6b7280;\n}\n\n.breakdown-content {\n    padding: 12px;\n    max-height: 280px;\n    overflow-y: auto;\n}\n\n/* Endpoint List */\n.endpoint-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.endpoint-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.endpoint-item:hover {\n    background: #f3f4f6;\n}\n\n.endpoint-info {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1;\n}\n\n.method-badge {\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.method-get { background: #dbeafe; color: #2563eb; }\n.method-post { background: #d1fae5; color: #059669; }\n.method-put { background: #fef3c7; color: #d97706; }\n.method-delete { background: #fee2e2; color: #dc2626; }\n.method-other { background: #f3f4f6; color: #6b7280; }\n\n.endpoint-path {\n    font-size: 12px;\n    font-family: 'Fira Code', monospace;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.endpoint-stats {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 11px;\n    flex-shrink: 0;\n}\n\n.endpoint-requests {\n    font-weight: 600;\n    color: #6366f1;\n}\n\n.endpoint-time {\n    color: #6b7280;\n}\n\n.endpoint-error {\n    color: #10b981;\n}\n\n.endpoint-error.has-errors {\n    color: #ef4444;\n    font-weight: 500;\n}\n\n/* Key List */\n.key-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.key-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.key-item:hover {\n    background: #f3f4f6;\n}\n\n.key-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.key-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-last-used {\n    font-size: 11px;\n    color: #9ca3af;\n}\n\n.key-requests {\n    font-size: 14px;\n    font-weight: 600;\n    color: #6366f1;\n}\n\n/* Status Distribution */\n.status-distribution {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.status-bar {\n    display: flex;\n    height: 24px;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #f3f4f6;\n}\n\n.status-segment {\n    transition: all 0.3s ease;\n}\n\n.status-segment:hover {\n    filter: brightness(1.1);\n}\n\n.status-legend {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.status-legend-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n\n.status-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.status-label {\n    flex: 1;\n    color: #374151;\n}\n\n.status-count {\n    color: #6b7280;\n    font-weight: 500;\n}\n\n/* Logs Section */\n.logs-section {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.logs-header {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.logs-header h4 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.logs-header h4 i {\n    color: #6b7280;\n}\n\n.logs-table {\n    width: 100%;\n}\n\n.logs-table-header {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    background: #f3f4f6;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.logs-table-body {\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.logs-table-body.scrollable {\n    max-height: 380px;\n}\n\n.log-row {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    border-bottom: 1px solid #f3f4f6;\n    font-size: 13px;\n    align-items: center;\n    transition: background 0.2s ease;\n}\n\n.log-row:hover {\n    background: #f9fafb;\n}\n\n.col-time {\n    color: #6b7280;\n    font-size: 12px;\n}\n\n.col-key {\n    color: #374151;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-endpoint {\n    font-family: 'Fira Code', monospace;\n    font-size: 12px;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-status {\n    font-weight: 600;\n    text-align: center;\n}\n\n.col-status.status-success { color: #10b981; }\n.col-status.status-info { color: #3b82f6; }\n.col-status.status-warning { color: #f59e0b; }\n.col-status.status-error { color: #ef4444; }\n\n.col-duration {\n    color: #6b7280;\n    text-align: right;\n}\n\n/* Empty States */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 20px;\n    color: #9ca3af;\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.empty-state.large {\n    padding: 48px 24px;\n}\n\n.empty-state.large i {\n    font-size: 48px;\n}\n\n.empty-state p {\n    margin: 8px 0 0 0;\n    font-size: 12px;\n}\n\n/* Drill-down Window */\n.drilldown-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 15px;\n}\n\n.drilldown-title i {\n    color: #6366f1;\n}\n\n.filter-badge {\n    padding: 4px 10px;\n    background: #e0e7ff;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #4f46e5;\n}\n\n.window-close-btn {\n    margin-left: auto;\n    color: #9ca3af;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn:hover {\n    color: #374151;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.drilldown-content {\n    height: 100%;\n    overflow: hidden;\n}\n\n.drilldown-logs {\n    height: 100%;\n}\n\n/* Kendo Window Styling */\n:host ::ng-deep kendo-window {\n    border-radius: 12px !important;\n    overflow: hidden;\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;\n}\n\n:host ::ng-deep kendo-window .k-window-content {\n    padding: 0 !important;\n}\n\n:host ::ng-deep kendo-window-titlebar {\n    padding: 16px 20px !important;\n    background: #f9fafb !important;\n    border-bottom: 1px solid #e5e7eb !important;\n}\n\n/* Responsive */\n@media (max-width: 1400px) {\n    .kpi-grid {\n        grid-template-columns: repeat(3, 1fr);\n    }\n}\n\n@media (max-width: 1200px) {\n    .breakdown-grid {\n        grid-template-columns: 1fr 1fr;\n    }\n}\n\n@media (max-width: 900px) {\n    .kpi-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .breakdown-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header,\n    .log-row {\n        grid-template-columns: 80px 100px 60px 1fr 60px;\n    }\n\n    .col-duration {\n        display: none;\n    }\n}\n\n@media (max-width: 600px) {\n    .panel-header {\n        flex-direction: column;\n    }\n\n    .time-filters {\n        width: 100%;\n        justify-content: center;\n    }\n\n    .kpi-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header,\n    .log-row {\n        grid-template-columns: 1fr 60px;\n    }\n\n    .col-key,\n    .col-method,\n    .col-endpoint {\n        display: none;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIUsagePanelComponent, { className: "APIUsagePanelComponent", filePath: "src/apikeys/api-usage-panel.component.ts", lineNumber: 61 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIUsagePanelComponent, { className: "APIUsagePanelComponent", filePath: "src/APIKeys/api-usage-panel.component.ts", lineNumber: 61 }); })();
 //# sourceMappingURL=api-usage-panel.component.js.map

package/dist/Actions/components/actions-list-view.component.js

@@ -559,5 +559,5 @@ export class ActionsListViewComponent {
     }], () => [], { openEntityRecord: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsListViewComponent, { className: "ActionsListViewComponent", filePath: "src/actions/components/actions-list-view.component.ts", lineNumber: 19 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsListViewComponent, { className: "ActionsListViewComponent", filePath: "src/Actions/components/actions-list-view.component.ts", lineNumber: 19 }); })();
 //# sourceMappingURL=actions-list-view.component.js.map

package/dist/Actions/components/actions-overview.component.js

@@ -629,5 +629,5 @@ export { ActionsOverviewComponent };
         type: Component,
         args: [{ standalone: false, selector: 'mj-actions-overview', template: "<div class=\"actions-overview\" >\n  <!-- Header with search and filters -->\n  <div class=\"overview-header\">\n    <div class=\"filters-row\">\n      <div class=\"search-container\">\n        <kendo-textbox \n          placeholder=\"Search actions...\" \n          [value]=\"searchTerm$.value\"\n          (valueChange)=\"onSearchChange($event)\">\n          <ng-template kendoTextBoxPrefixTemplate>\n            <i class=\"fa-solid fa-search\"></i>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      \n      <div class=\"filter-container\">\n        <kendo-dropdownlist \n          [data]=\"[\n            { text: 'All Statuses', value: 'all' },\n            { text: 'Active', value: 'Active' },\n            { text: 'Pending', value: 'Pending' },\n            { text: 'Disabled', value: 'Disabled' }\n          ]\"\n          textField=\"text\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          [value]=\"selectedStatus$.value\"\n          (valueChange)=\"onStatusFilterChange($event)\">\n        </kendo-dropdownlist>\n      </div>\n      \n      <div class=\"filter-container\">\n        <kendo-dropdownlist \n          [data]=\"[\n            { text: 'All Types', value: 'all' },\n            { text: 'AI Generated', value: 'Generated' },\n            { text: 'Custom', value: 'Custom' }\n          ]\"\n          textField=\"text\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          [value]=\"selectedType$.value\"\n          (valueChange)=\"onTypeFilterChange($event)\">\n        </kendo-dropdownlist>\n      </div>\n    </div>\n  </div>\n\n  <!-- Metrics Cards -->\n  <div class=\"metrics-grid\">\n    <div class=\"metric-card primary clickable\" (click)=\"onTotalActionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-cogs\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalActions }}</div>\n        <div class=\"metric-label\">Total Actions</div>\n        <div class=\"metric-breakdown\">\n          <span class=\"active\">{{ metrics.activeActions }} Active</span>\n          <span class=\"pending\">{{ metrics.pendingActions }} Pending</span>\n          <span class=\"disabled\">{{ metrics.disabledActions }} Disabled</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"metric-card success clickable\" (click)=\"onExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n        <div class=\"metric-label\">Total Executions</div>\n        <div class=\"metric-breakdown\">\n          <span class=\"recent\">{{ metrics.recentExecutions }} in last 24h</span>\n          <span class=\"success-rate\">{{ metrics.successRate }}% success rate</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"metric-card info clickable\" (click)=\"onCategoriesClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-sitemap\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalCategories }}</div>\n        <div class=\"metric-label\">Categories</div>\n        <div class=\"metric-breakdown\">\n          <span>Organized structure</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"metric-card warning clickable\" (click)=\"onAIGeneratedClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-robot\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.aiGeneratedActions }}</div>\n        <div class=\"metric-label\">AI Generated</div>\n        <div class=\"metric-breakdown\">\n          <span class=\"custom\">{{ metrics.customActions }} Custom</span>\n        </div>\n      </div>\n    </div>\n    \n    <div class=\"metric-card gallery clickable\" (click)=\"onActionGalleryClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-th\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">\n          <i class=\"fa-solid fa-sparkles\"></i>\n        </div>\n        <div class=\"metric-label\">Action Gallery</div>\n        <div class=\"metric-breakdown\">\n          <span>Visual action browser</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Content Grid -->\n  <div class=\"content-grid\">\n    <!-- Category Statistics -->\n    <div class=\"panel category-stats\">\n      <div class=\"panel-header\">\n        <h3><i class=\"fa-solid fa-chart-bar\"></i> Category Performance</h3>\n      </div>\n      <div class=\"panel-content\">\n        @if (categoryStats.length > 0) {\n          <div class=\"category-list\">\n            @for (category of categoryStats; track category.categoryId) {\n              <div class=\"category-item\" (click)=\"openCategory(category.categoryId)\">\n                <div class=\"category-info\">\n                  <div class=\"category-name\">{{ category.categoryName }}</div>\n                  <div class=\"category-metrics\">\n                    <span class=\"metric\">{{ category.actionCount }} actions</span>\n                    <span class=\"metric\">{{ category.executionCount }} executions</span>\n                    <span class=\"metric success-rate\">{{ category.successRate }}% success</span>\n                  </div>\n                </div>\n                <div class=\"category-chart\">\n                  <div class=\"progress-bar\">\n                    <div class=\"progress-fill\" [style.width.%]=\"category.successRate\"></div>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-chart-bar\"></i>\n            <p>No category statistics available</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Recent Actions -->\n    <div class=\"panel recent-actions\">\n      <div class=\"panel-header\">\n        <h3><i class=\"fa-solid fa-clock\"></i> Recent Actions</h3>\n      </div>\n      <div class=\"panel-content\">\n        @if (recentActions.length > 0) {\n          <div class=\"actions-list\">\n            @for (action of recentActions; track action.ID) {\n              <div class=\"action-item\" (click)=\"openAction(action)\">\n                <div class=\"action-icon\">\n                  <i [class]=\"getActionIcon(action)\"></i>\n                </div>\n                <div class=\"action-info\">\n                  <div class=\"action-name\">{{ action.Name }}</div>\n                  <div class=\"action-description\">{{ action.Description || 'No description' }}</div>\n                </div>\n                <div class=\"action-status\">\n                  <kendo-chip \n                    [themeColor]=\"getStatusColor(action.Status)\"\n                    [size]=\"'small'\">\n                    {{ action.Status }}\n                  </kendo-chip>\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-cogs\"></i>\n            <p>No recent actions found</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Recent Executions -->\n    <div class=\"panel recent-executions\">\n      <div class=\"panel-header\">\n        <h3><i class=\"fa-solid fa-history\"></i> Recent Executions</h3>\n      </div>\n      <div class=\"panel-content\">\n        @if (recentExecutions.length > 0) {\n          <div class=\"executions-list\">\n            @for (execution of recentExecutions; track execution.ID) {\n              <div class=\"execution-item\" [class.expanded]=\"execution.isExpanded\">\n                <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(execution)\">\n                  <div class=\"execution-time\">\n                    {{ execution.StartedAt | date:'MMM d, HH:mm' }}\n                  </div>\n                  <div class=\"execution-info\">\n                    <div class=\"execution-action\">{{ execution.Action || 'Action ID: ' + execution.ActionID }}</div>\n                    <div class=\"execution-user\">{{ execution.User || 'User ID: ' + execution.UserID }}</div>\n                  </div>\n                  <div class=\"execution-result\">\n                    <kendo-chip \n                      [themeColor]=\"isExecutionSuccess(execution) ? 'success' : 'error'\"\n                      [size]=\"'small'\">\n                      {{ execution.ResultCode || 'Unknown' }}\n                    </kendo-chip>\n                  </div>\n                  <div class=\"execution-expand-icon\">\n                    <i [class]=\"execution.isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                  </div>\n                </div>\n                @if (execution.isExpanded) {\n                  <div class=\"execution-details\">\n                    <div class=\"params-section\">\n                      <h5><i class=\"fa-solid fa-sliders\"></i> Parameters</h5>\n                      <mj-code-editor \n                        [ngModel]=\"formatJsonParams(execution.Params)\"\n                        [readonly]=\"true\"\n                        [language]=\"'json'\"\n                        [lineWrapping]=\"true\"\n                        style=\"height: 150px; width: 100%;\">\n                      </mj-code-editor>\n                    </div>\n                    <div class=\"execution-actions\">\n                      <button kendoButton \n                        themeColor=\"primary\" \n                        size=\"small\"\n                        (click)=\"openExecution(execution)\">\n                        <i class=\"fa-solid fa-external-link\"></i> Open Details\n                      </button>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-history\"></i>\n            <p>No recent executions found</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (isLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n    </div>\n  }\n</div>", styles: [".actions-overview {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n  position: relative; /* Required for scoped loading overlay */\n}\n.actions-overview .overview-header .filters-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.actions-overview .overview-header .filters-row .search-container {\n  flex: 1;\n  min-width: 200px;\n}\n.actions-overview .overview-header .filters-row .search-container kendo-textbox {\n  width: 100%;\n}\n.actions-overview .overview-header .filters-row .filter-container {\n  min-width: 150px;\n}\n.actions-overview .overview-header .filters-row .filter-container kendo-dropdownlist {\n  width: 100%;\n}\n.actions-overview .metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1.5rem;\n}\n.actions-overview .metrics-grid .metric-card {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.5rem;\n  border-radius: 0.75rem;\n  background: var(--kendo-color-surface);\n  border: 1px solid var(--kendo-color-border);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  transition: all 0.2s ease;\n}\n.actions-overview .metrics-grid .metric-card.clickable {\n  cursor: pointer;\n}\n.actions-overview .metrics-grid .metric-card.clickable:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n.actions-overview .metrics-grid .metric-card .metric-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 0.5rem;\n  font-size: 1.25rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-icon i {\n  color: white;\n}\n.actions-overview .metrics-grid .metric-card .metric-content {\n  flex: 1;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-value {\n  font-size: 1.75rem;\n  font-weight: 700;\n  line-height: 1;\n  margin-bottom: 0.25rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-label {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--kendo-color-subtle);\n  margin-bottom: 0.5rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  font-size: 0.75rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span {\n  color: var(--kendo-color-subtle);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.active {\n  color: var(--kendo-color-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.pending {\n  color: var(--kendo-color-warning);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.disabled {\n  color: var(--kendo-color-error);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.recent {\n  color: var(--kendo-color-info);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.success-rate {\n  color: var(--kendo-color-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.custom {\n  color: var(--kendo-color-primary);\n}\n.actions-overview .metrics-grid .metric-card.primary .metric-icon {\n  background: var(--kendo-color-primary);\n}\n.actions-overview .metrics-grid .metric-card.success .metric-icon {\n  background: var(--kendo-color-success);\n}\n.actions-overview .metrics-grid .metric-card.info .metric-icon {\n  background: var(--kendo-color-info);\n}\n.actions-overview .metrics-grid .metric-card.warning .metric-icon {\n  background: var(--kendo-color-warning);\n}\n.actions-overview .metrics-grid .metric-card.gallery .metric-icon {\n  background: linear-gradient(135deg, var(--kendo-color-primary), var(--kendo-color-secondary));\n}\n.actions-overview .content-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: auto auto;\n  gap: 1.5rem;\n  flex: 1;\n}\n.actions-overview .content-grid .panel {\n  background: var(--kendo-color-surface);\n  border: 1px solid var(--kendo-color-border);\n  border-radius: 0.75rem;\n  overflow: hidden;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.actions-overview .content-grid .panel .panel-header {\n  padding: 1rem 1.5rem;\n  background: var(--kendo-color-app-surface);\n  border-bottom: 1px solid var(--kendo-color-border);\n}\n.actions-overview .content-grid .panel .panel-header h3 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview .content-grid .panel .panel-header h3 i {\n  color: var(--kendo-color-primary);\n}\n.actions-overview .content-grid .panel .panel-content {\n  padding: 1.5rem;\n  height: calc(100% - 60px);\n  overflow-y: auto;\n}\n.actions-overview .content-grid .category-stats .category-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid var(--kendo-color-border);\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item:hover {\n  background: var(--kendo-color-base-hover);\n  border-color: var(--kendo-color-primary);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info {\n  flex: 1;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-name {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics {\n  display: flex;\n  gap: 1rem;\n  font-size: 0.75rem;\n  color: var(--kendo-color-subtle);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics .metric.success-rate {\n  color: var(--kendo-color-success);\n  font-weight: 600;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart {\n  width: 60px;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar {\n  height: 6px;\n  background: var(--kendo-color-border);\n  border-radius: 3px;\n  overflow: hidden;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar .progress-fill {\n  height: 100%;\n  background: var(--kendo-color-success);\n  transition: width 0.3s ease;\n}\n.actions-overview .content-grid .recent-actions .actions-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid var(--kendo-color-border);\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item:hover {\n  background: var(--kendo-color-base-hover);\n  border-color: var(--kendo-color-primary);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 0.375rem;\n  background: var(--kendo-color-primary-subtle);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon i {\n  color: var(--kendo-color-primary);\n  font-size: 1rem;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info {\n  flex: 1;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-name {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-description {\n  font-size: 0.75rem;\n  color: var(--kendo-color-subtle);\n  line-height: 1.3;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-status {\n  flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions {\n  grid-column: 1/-1;\n}\n.actions-overview .content-grid .recent-executions .executions-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item {\n  border: 1px solid var(--kendo-color-border);\n  border-radius: 0.5rem;\n  transition: all 0.2s ease;\n  margin-bottom: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item.expanded {\n  border-color: var(--kendo-color-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  cursor: pointer;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header:hover {\n  background: var(--kendo-color-base-hover);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-time {\n  font-size: 0.75rem;\n  color: var(--kendo-color-subtle);\n  font-weight: 600;\n  min-width: 80px;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info {\n  flex: 1;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-action {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n  font-size: 0.875rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-user {\n  font-size: 0.75rem;\n  color: var(--kendo-color-subtle);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-result {\n  flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-expand-icon {\n  color: var(--kendo-color-subtle);\n  font-size: 0.75rem;\n  margin-left: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details {\n  padding: 1rem;\n  background: var(--kendo-color-base-subtle);\n  border-top: 1px solid var(--kendo-color-border);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section {\n  margin-bottom: 1rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 {\n  margin: 0 0 0.5rem 0;\n  font-size: 0.875rem;\n  color: var(--kendo-color-subtle);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 i {\n  font-size: 0.75rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .execution-actions {\n  display: flex;\n  justify-content: flex-end;\n}\n.actions-overview .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n  text-align: center;\n  color: var(--kendo-color-subtle);\n}\n.actions-overview .empty-state i {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.actions-overview .empty-state p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.actions-overview .loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .actions-overview .content-grid {\n    grid-template-columns: 1fr;\n  }\n  .actions-overview .content-grid .recent-executions {\n    grid-column: 1;\n  }\n}\n@media (max-width: 768px) {\n  .actions-overview {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .actions-overview .metrics-grid {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n  .actions-overview .overview-header .filters-row {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .actions-overview .overview-header .filters-row .search-container,\n  .actions-overview .overview-header .filters-row .filter-container {\n    min-width: unset;\n  }\n}\n"] }]
     }], () => [{ type: i1.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsOverviewComponent, { className: "ActionsOverviewComponent", filePath: "src/actions/components/actions-overview.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsOverviewComponent, { className: "ActionsOverviewComponent", filePath: "src/Actions/components/actions-overview.component.ts", lineNumber: 43 }); })();
 //# sourceMappingURL=actions-overview.component.js.map

package/dist/Actions/components/categories-list-view.component.js

@@ -285,5 +285,5 @@ export class CategoriesListViewComponent {
     }], () => [], { openEntityRecord: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CategoriesListViewComponent, { className: "CategoriesListViewComponent", filePath: "src/actions/components/categories-list-view.component.ts", lineNumber: 302 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CategoriesListViewComponent, { className: "CategoriesListViewComponent", filePath: "src/Actions/components/categories-list-view.component.ts", lineNumber: 302 }); })();
 //# sourceMappingURL=categories-list-view.component.js.map

package/dist/Actions/components/code-management.component.js

@@ -55,5 +55,5 @@ export { CodeManagementComponent };
     </div>
   `, styles: ["\n    .code-management-placeholder {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n\n      .placeholder-content {\n        text-align: center;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          opacity: 0.5;\n        }\n\n        h3 {\n          margin: 0 0 0.5rem 0;\n          font-size: 1.25rem;\n          font-weight: 600;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  "] }]
     }], () => [{ type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CodeManagementComponent, { className: "CodeManagementComponent", filePath: "src/actions/components/code-management.component.ts", lineNumber: 52 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CodeManagementComponent, { className: "CodeManagementComponent", filePath: "src/Actions/components/code-management.component.ts", lineNumber: 52 }); })();
 //# sourceMappingURL=code-management.component.js.map

package/dist/Actions/components/entity-integration.component.js

@@ -55,5 +55,5 @@ export { EntityIntegrationComponent };
     </div>
   `, styles: ["\n    .entity-integration-placeholder {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n\n      .placeholder-content {\n        text-align: center;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          opacity: 0.5;\n        }\n\n        h3 {\n          margin: 0 0 0.5rem 0;\n          font-size: 1.25rem;\n          font-weight: 600;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  "] }]
     }], () => [{ type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityIntegrationComponent, { className: "EntityIntegrationComponent", filePath: "src/actions/components/entity-integration.component.ts", lineNumber: 52 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityIntegrationComponent, { className: "EntityIntegrationComponent", filePath: "src/Actions/components/entity-integration.component.ts", lineNumber: 52 }); })();
 //# sourceMappingURL=entity-integration.component.js.map

package/dist/Actions/components/execution-monitoring.component.js

@@ -607,5 +607,5 @@ export { ExecutionMonitoringComponent };
         type: Component,
         args: [{ standalone: false, selector: 'mj-execution-monitoring', template: "<div class=\"execution-monitoring\" >\n  <!-- Header with filters -->\n  <div class=\"monitoring-header\">\n    <div class=\"header-title\">\n      <h3><i class=\"fa-solid fa-chart-line\"></i> Execution Monitoring</h3>\n      <button kendoButton [primary]=\"true\" [icon]=\"'refresh'\" (click)=\"refreshData()\" class=\"refresh-btn\">\n        Refresh\n      </button>\n    </div>\n    \n    <div class=\"filters-row\">\n      <div class=\"search-container\">\n        <kendo-textbox \n          placeholder=\"Search executions...\" \n          [value]=\"searchTerm$.value\"\n          (valueChange)=\"onSearchChange($event)\">\n          <ng-template kendoTextBoxPrefixTemplate>\n            <i class=\"fa-solid fa-search\"></i>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      \n      <div class=\"filter-group\">\n        <kendo-dropdownlist \n          [data]=\"timeRangeOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          [value]=\"selectedTimeRange$.value\"\n          (valueChange)=\"onTimeRangeChange($event)\">\n        </kendo-dropdownlist>\n        \n        <kendo-dropdownlist \n          [data]=\"resultOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          [value]=\"selectedResult$.value\"\n          (valueChange)=\"onResultFilterChange($event)\">\n        </kendo-dropdownlist>\n        \n        <kendo-dropdownlist \n          [data]=\"actionOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          [value]=\"selectedAction$.value\"\n          (valueChange)=\"onActionFilterChange($event)\">\n        </kendo-dropdownlist>\n      </div>\n    </div>\n  </div>\n\n  <!-- Metrics Summary -->\n  <div class=\"metrics-summary\">\n    <div class=\"metric-card total clickable\" (click)=\"onTotalExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n        <div class=\"metric-label\">Total Executions</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card success clickable\" (click)=\"onSuccessRateClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ getSuccessRate() }}%</div>\n        <div class=\"metric-label\">Success Rate</div>\n        <div class=\"metric-detail\">{{ metrics.successfulExecutions }}/{{ metrics.totalExecutions }}</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card error clickable\" (click)=\"onFailedExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-exclamation-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.failedExecutions }}</div>\n        <div class=\"metric-label\">Failed Executions</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card duration\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-clock\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.averageDuration }}s</div>\n        <div class=\"metric-label\">Avg Duration</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card activity\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-calendar-day\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.executionsToday }}</div>\n        <div class=\"metric-label\">Today</div>\n        <div class=\"metric-detail\">{{ metrics.executionsThisWeek }} this week</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card running clickable\" (click)=\"onRunningExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.currentlyRunning }}</div>\n        <div class=\"metric-label\">Currently Running</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Execution Trends Chart -->\n  <div class=\"trends-section\">\n    <div class=\"section-header\">\n      <h4><i class=\"fa-solid fa-chart-area\"></i> 7-Day Execution Trends</h4>\n    </div>\n    <div class=\"trends-chart\">\n      @if (executionTrends.length > 0) {\n        <div class=\"trend-bars\">\n          @for (trend of executionTrends; track trend.date) {\n            <div class=\"trend-bar\">\n              <div class=\"bar-container\">\n                <div class=\"bar-success\" [style.height.%]=\"trend.total > 0 ? (trend.successful / trend.total) * 100 : 0\"></div>\n                <div class=\"bar-failed\" [style.height.%]=\"trend.total > 0 ? (trend.failed / trend.total) * 100 : 0\"></div>\n              </div>\n              <div class=\"bar-label\">{{ trend.date | date:'MMM d' }}</div>\n              <div class=\"bar-total\">{{ trend.total }}</div>\n            </div>\n          }\n        </div>\n        <div class=\"chart-legend\">\n          <div class=\"legend-item\">\n            <div class=\"legend-color success\"></div>\n            <span>Successful</span>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-color failed\"></div>\n            <span>Failed</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"empty-chart\">\n          <i class=\"fa-solid fa-chart-area\"></i>\n          <p>No execution trends available</p>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Execution List -->\n  <div class=\"executions-section\">\n    <div class=\"section-header\">\n      <h4><i class=\"fa-solid fa-list\"></i> Recent Executions</h4>\n      <div class=\"results-count\">{{ filteredExecutions.length }} executions</div>\n    </div>\n    \n    <div class=\"executions-list\">\n      @if (filteredExecutions.length > 0) {\n        @for (execution of filteredExecutions; track execution.ID) {\n          <div class=\"execution-item\" (click)=\"openExecution(execution)\">\n            <div class=\"execution-status\">\n              <i [class]=\"getResultIcon(execution.ResultCode)\"></i>\n            </div>\n            \n            <div class=\"execution-main\">\n              <div class=\"execution-action\" (click)=\"openAction(execution.ActionID!); $event.stopPropagation()\">\n                {{ getActionName(execution.ActionID!) }}\n              </div>\n              <div class=\"execution-details\">\n                <span class=\"execution-time\">{{ execution.StartedAt | date:'MMM d, HH:mm:ss' }}</span>\n                <span class=\"execution-user\">{{ execution.UserID }}</span>\n                <span class=\"execution-duration\">{{ getDuration(execution) }}</span>\n              </div>\n            </div>\n            \n            <div class=\"execution-result\">\n              <kendo-chip \n                [themeColor]=\"getResultColor(execution.ResultCode)\"\n                [size]=\"'small'\">\n                {{ execution.ResultCode || 'Unknown' }}\n              </kendo-chip>\n            </div>\n            \n            <div class=\"execution-actions\">\n              <button kendoButton \n                [fillMode]=\"'flat'\" \n                [icon]=\"'more-vertical'\"\n                (click)=\"$event.stopPropagation()\">\n              </button>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-search\"></i>\n          <h5>No executions found</h5>\n          <p>Try adjusting your filters or search terms</p>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (isLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n    </div>\n  }\n</div>", styles: [".execution-monitoring {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n}\n.execution-monitoring .monitoring-header .header-title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n.execution-monitoring .monitoring-header .header-title h3 {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .monitoring-header .header-title h3 i {\n  color: var(--kendo-color-primary);\n}\n.execution-monitoring .monitoring-header .header-title .refresh-btn {\n  gap: 0.5rem;\n}\n.execution-monitoring .monitoring-header .filters-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.execution-monitoring .monitoring-header .filters-row .search-container {\n  flex: 1;\n  min-width: 200px;\n}\n.execution-monitoring .monitoring-header .filters-row .search-container kendo-textbox {\n  width: 100%;\n}\n.execution-monitoring .monitoring-header .filters-row .filter-group {\n  display: flex;\n  gap: 0.75rem;\n}\n.execution-monitoring .monitoring-header .filters-row .filter-group kendo-dropdownlist {\n  min-width: 140px;\n}\n.execution-monitoring .metrics-summary {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n}\n.execution-monitoring .metrics-summary .metric-card {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.25rem;\n  border-radius: 0.75rem;\n  background: var(--kendo-color-surface);\n  border: 1px solid var(--kendo-color-border);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  transition: all 0.2s ease;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable {\n  cursor: pointer;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n.execution-monitoring .metrics-summary .metric-card .metric-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 0.5rem;\n  font-size: 1rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-icon i {\n  color: white;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content {\n  flex: 1;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n  font-size: 1.5rem;\n  font-weight: 700;\n  line-height: 1;\n  margin-bottom: 0.25rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--kendo-color-subtle);\n  margin-bottom: 0.125rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-detail {\n  font-size: 0.625rem;\n  color: var(--kendo-color-subtle);\n}\n.execution-monitoring .metrics-summary .metric-card.total .metric-icon {\n  background: var(--kendo-color-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.success .metric-icon {\n  background: var(--kendo-color-success);\n}\n.execution-monitoring .metrics-summary .metric-card.error .metric-icon {\n  background: var(--kendo-color-error);\n}\n.execution-monitoring .metrics-summary .metric-card.duration .metric-icon {\n  background: var(--kendo-color-info);\n}\n.execution-monitoring .metrics-summary .metric-card.activity .metric-icon {\n  background: var(--kendo-color-warning);\n}\n.execution-monitoring .metrics-summary .metric-card.running .metric-icon {\n  background: var(--kendo-color-secondary);\n}\n.execution-monitoring .trends-section {\n  background: var(--kendo-color-surface);\n  border: 1px solid var(--kendo-color-border);\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header {\n  margin-bottom: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header h4 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .trends-section .section-header h4 i {\n  color: var(--kendo-color-primary);\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars {\n  display: flex;\n  align-items: end;\n  gap: 1rem;\n  height: 120px;\n  margin-bottom: 1rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-height: 80px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n  background: var(--kendo-color-border);\n  position: relative;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-success {\n  background: var(--kendo-color-success);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-failed {\n  background: var(--kendo-color-error);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-label {\n  font-size: 0.625rem;\n  color: var(--kendo-color-subtle);\n  font-weight: 600;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-total {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--kendo-color-on-app-surface);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend {\n  display: flex;\n  justify-content: center;\n  gap: 1.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color {\n  width: 12px;\n  height: 12px;\n  border-radius: 2px;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.success {\n  background: var(--kendo-color-success);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.failed {\n  background: var(--kendo-color-error);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 120px;\n  color: var(--kendo-color-subtle);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart i {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n  opacity: 0.5;\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring .executions-section {\n  flex: 1;\n  min-height: 0;\n  background: var(--kendo-color-surface);\n  border: 1px solid var(--kendo-color-border);\n  border-radius: 0.75rem;\n  display: flex;\n  flex-direction: column;\n}\n.execution-monitoring .executions-section .section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1.5rem 1.5rem 0;\n  margin-bottom: 1rem;\n}\n.execution-monitoring .executions-section .section-header h4 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .executions-section .section-header h4 i {\n  color: var(--kendo-color-primary);\n}\n.execution-monitoring .executions-section .section-header .results-count {\n  font-size: 0.75rem;\n  color: var(--kendo-color-subtle);\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid var(--kendo-color-border);\n  border-radius: 0.5rem;\n  margin-bottom: 0.75rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover {\n  background: var(--kendo-color-base-hover);\n  border-color: var(--kendo-color-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i {\n  font-size: 1rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-check-circle {\n  color: var(--kendo-color-success);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-exclamation-circle {\n  color: var(--kendo-color-error);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-spinner {\n  color: var(--kendo-color-warning);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-info-circle, .execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-question {\n  color: var(--kendo-color-info);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main {\n  flex: 1;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n  color: var(--kendo-color-primary);\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action:hover {\n  color: var(--kendo-color-primary-darker);\n  text-decoration: underline;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details {\n  display: flex;\n  gap: 1rem;\n  font-size: 0.75rem;\n  color: var(--kendo-color-subtle);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-time {\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-user {\n  color: var(--kendo-color-info);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-duration {\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-result {\n  flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions {\n  flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions button {\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover .execution-actions button {\n  opacity: 1;\n}\n.execution-monitoring .executions-section .executions-list .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n  color: var(--kendo-color-subtle);\n}\n.execution-monitoring .executions-section .executions-list .empty-state i {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.execution-monitoring .executions-section .executions-list .empty-state h5 {\n  margin: 0 0 0.5rem 0;\n  font-size: 1rem;\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .empty-state p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring .loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .execution-monitoring .metrics-summary {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  .execution-monitoring .monitoring-header .filters-row .filter-group {\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 768px) {\n  .execution-monitoring {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .execution-monitoring .metrics-summary {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.75rem;\n  }\n  .execution-monitoring .metrics-summary .metric-card {\n    padding: 1rem;\n  }\n  .execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n    font-size: 1.25rem;\n  }\n  .execution-monitoring .monitoring-header .header-title {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 1rem;\n  }\n  .execution-monitoring .monitoring-header .filters-row {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .execution-monitoring .monitoring-header .filters-row .search-container,\n  .execution-monitoring .monitoring-header .filters-row .filter-group {\n    min-width: unset;\n  }\n  .execution-monitoring .monitoring-header .filters-row .filter-group {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 0.5rem;\n  }\n  .execution-monitoring .trends-section .trends-chart .trend-bars {\n    gap: 0.5rem;\n  }\n}\n"] }]
     }], () => [{ type: i1.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/actions/components/execution-monitoring.component.ts", lineNumber: 35 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/Actions/components/execution-monitoring.component.ts", lineNumber: 35 }); })();
 //# sourceMappingURL=execution-monitoring.component.js.map

package/dist/Actions/components/executions-list-view.component.js

@@ -28,5 +28,5 @@ export class ExecutionsListViewComponent {
     }], null, { openEntityRecord: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionsListViewComponent, { className: "ExecutionsListViewComponent", filePath: "src/actions/components/executions-list-view.component.ts", lineNumber: 48 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionsListViewComponent, { className: "ExecutionsListViewComponent", filePath: "src/Actions/components/executions-list-view.component.ts", lineNumber: 48 }); })();
 //# sourceMappingURL=executions-list-view.component.js.map

package/dist/Actions/components/explorer/action-breadcrumb.component.js

@@ -135,5 +135,5 @@ export class ActionBreadcrumbComponent {
         }], CategorySelect: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionBreadcrumbComponent, { className: "ActionBreadcrumbComponent", filePath: "src/actions/components/explorer/action-breadcrumb.component.ts", lineNumber: 25 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionBreadcrumbComponent, { className: "ActionBreadcrumbComponent", filePath: "src/Actions/components/explorer/action-breadcrumb.component.ts", lineNumber: 25 }); })();
 //# sourceMappingURL=action-breadcrumb.component.js.map

package/dist/Actions/components/explorer/action-card.component.js

@@ -407,5 +407,5 @@ export class ActionCardComponent {
         }], CategoryClick: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionCardComponent, { className: "ActionCardComponent", filePath: "src/actions/components/explorer/action-card.component.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionCardComponent, { className: "ActionCardComponent", filePath: "src/Actions/components/explorer/action-card.component.ts", lineNumber: 28 }); })();
 //# sourceMappingURL=action-card.component.js.map

package/dist/Actions/components/explorer/action-explorer.component.js

@@ -519,5 +519,5 @@ export { ActionExplorerComponent };
             type: ViewChild,
             args: [ActionTreePanelComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionExplorerComponent, { className: "ActionExplorerComponent", filePath: "src/actions/components/explorer/action-explorer.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionExplorerComponent, { className: "ActionExplorerComponent", filePath: "src/Actions/components/explorer/action-explorer.component.ts", lineNumber: 33 }); })();
 //# sourceMappingURL=action-explorer.component.js.map

package/dist/Actions/components/explorer/action-list-item.component.js

@@ -206,5 +206,5 @@ export class ActionListItemComponent {
         }], CategoryClick: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionListItemComponent, { className: "ActionListItemComponent", filePath: "src/actions/components/explorer/action-list-item.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionListItemComponent, { className: "ActionListItemComponent", filePath: "src/Actions/components/explorer/action-list-item.component.ts", lineNumber: 18 }); })();
 //# sourceMappingURL=action-list-item.component.js.map

package/dist/Actions/components/explorer/action-toolbar.component.js

@@ -480,5 +480,5 @@ export class ActionToolbarComponent {
         }], RefreshClick: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionToolbarComponent, { className: "ActionToolbarComponent", filePath: "src/actions/components/explorer/action-toolbar.component.ts", lineNumber: 34 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionToolbarComponent, { className: "ActionToolbarComponent", filePath: "src/Actions/components/explorer/action-toolbar.component.ts", lineNumber: 34 }); })();
 //# sourceMappingURL=action-toolbar.component.js.map

package/dist/Actions/components/explorer/action-tree-panel.component.js

@@ -451,5 +451,5 @@ export class ActionTreePanelComponent {
             type: HostListener,
             args: ['document:mouseup']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionTreePanelComponent, { className: "ActionTreePanelComponent", filePath: "src/actions/components/explorer/action-tree-panel.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionTreePanelComponent, { className: "ActionTreePanelComponent", filePath: "src/Actions/components/explorer/action-tree-panel.component.ts", lineNumber: 33 }); })();
 //# sourceMappingURL=action-tree-panel.component.js.map

package/dist/Actions/components/explorer/new-action-panel.component.js

@@ -355,5 +355,5 @@ export class NewActionPanelComponent {
         }], Close: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewActionPanelComponent, { className: "NewActionPanelComponent", filePath: "src/actions/components/explorer/new-action-panel.component.ts", lineNumber: 39 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewActionPanelComponent, { className: "NewActionPanelComponent", filePath: "src/Actions/components/explorer/new-action-panel.component.ts", lineNumber: 39 }); })();
 //# sourceMappingURL=new-action-panel.component.js.map

package/dist/Actions/components/explorer/new-category-panel.component.js

@@ -278,5 +278,5 @@ export class NewCategoryPanelComponent {
         }], Close: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewCategoryPanelComponent, { className: "NewCategoryPanelComponent", filePath: "src/actions/components/explorer/new-category-panel.component.ts", lineNumber: 36 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewCategoryPanelComponent, { className: "NewCategoryPanelComponent", filePath: "src/Actions/components/explorer/new-category-panel.component.ts", lineNumber: 36 }); })();
 //# sourceMappingURL=new-category-panel.component.js.map

package/dist/Actions/components/scheduled-actions.component.js

@@ -55,5 +55,5 @@ export { ScheduledActionsComponent };
     </div>
   `, styles: ["\n    .scheduled-actions-placeholder {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n\n      .placeholder-content {\n        text-align: center;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          opacity: 0.5;\n        }\n\n        h3 {\n          margin: 0 0 0.5rem 0;\n          font-size: 1.25rem;\n          font-weight: 600;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  "] }]
     }], () => [{ type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ScheduledActionsComponent, { className: "ScheduledActionsComponent", filePath: "src/actions/components/scheduled-actions.component.ts", lineNumber: 52 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ScheduledActionsComponent, { className: "ScheduledActionsComponent", filePath: "src/Actions/components/scheduled-actions.component.ts", lineNumber: 52 }); })();
 //# sourceMappingURL=scheduled-actions.component.js.map

package/dist/Actions/components/security-permissions.component.js

@@ -55,5 +55,5 @@ export { SecurityPermissionsComponent };
     </div>
   `, styles: ["\n    .security-permissions-placeholder {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n\n      .placeholder-content {\n        text-align: center;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          opacity: 0.5;\n        }\n\n        h3 {\n          margin: 0 0 0.5rem 0;\n          font-size: 1.25rem;\n          font-weight: 600;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  "] }]
     }], () => [{ type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SecurityPermissionsComponent, { className: "SecurityPermissionsComponent", filePath: "src/actions/components/security-permissions.component.ts", lineNumber: 52 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SecurityPermissionsComponent, { className: "SecurityPermissionsComponent", filePath: "src/Actions/components/security-permissions.component.ts", lineNumber: 52 }); })();
 //# sourceMappingURL=security-permissions.component.js.map

package/dist/Communication/communication-dashboard.component.js

@@ -260,5 +260,5 @@ export { CommunicationDashboardComponent };
         type: Component,
         args: [{ standalone: false, selector: 'mj-communication-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"communication-dashboard-container\">\n  <!-- TOOLBAR -->\n  <div class=\"studio-toolbar\">\n    <div class=\"toolbar-brand\">\n      <div class=\"brand-icon\"><i class=\"fa-solid fa-satellite-dish\"></i></div>\n      <span class=\"brand-label\">Communications</span>\n    </div>\n    <div class=\"toolbar-divider\"></div>\n    <div class=\"toolbar-spacer\"></div>\n    <button class=\"tb-btn\" (click)=\"onRefresh()\">\n      <i class=\"fa-solid fa-rotate\" [class.spinning]=\"isRefreshing\"></i> Refresh\n    </button>\n  </div>\n\n  <!-- BODY -->\n  <div class=\"dashboard-body\">\n    <!-- SIDEBAR -->\n    <div class=\"sidebar\">\n      <div class=\"sidebar-section-label\">Dashboard</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'monitor'\"\n        (click)=\"onTabChange('monitor')\">\n        <i class=\"fa-solid fa-chart-line\"></i>\n        <span>Monitor</span>\n      </div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'logs'\"\n        (click)=\"onTabChange('logs')\">\n        <i class=\"fa-solid fa-list-ul\"></i>\n        <span>Message Logs</span>\n      </div>\n\n      <div class=\"sidebar-section-label\">Configuration</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'providers'\"\n        (click)=\"onTabChange('providers')\">\n        <i class=\"fa-solid fa-server\"></i>\n        <span>Providers</span>\n      </div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'templates'\"\n        (click)=\"onTabChange('templates')\">\n        <i class=\"fa-solid fa-file-lines\"></i>\n        <span>Templates</span>\n      </div>\n\n      <div class=\"sidebar-section-label\">Operations</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'runs'\"\n        (click)=\"onTabChange('runs')\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n        <span>Bulk Runs</span>\n      </div>\n\n      <div class=\"sidebar-footer\">\n        <div class=\"nav-item\" [class.selected]=\"activeTab === 'settings'\"\n          (click)=\"onTabChange('settings')\">\n          <i class=\"fa-solid fa-gear\"></i>\n          <span>Settings</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- MAIN CONTENT -->\n    <div class=\"main-content\">\n      <div class=\"tab-container\">\n        @switch (activeTab) {\n          @case ('monitor') {\n            <div class=\"tab-content\">\n              @if (hasVisited('monitor')) {\n                <mj-communication-monitor-resource></mj-communication-monitor-resource>\n              }\n            </div>\n          }\n          @case ('logs') {\n            <div class=\"tab-content\">\n              @if (hasVisited('logs')) {\n                <mj-communication-logs-resource></mj-communication-logs-resource>\n              }\n            </div>\n          }\n          @case ('providers') {\n            <div class=\"tab-content\">\n              @if (hasVisited('providers')) {\n                <mj-communication-providers-resource></mj-communication-providers-resource>\n              }\n            </div>\n          }\n          @case ('templates') {\n            <div class=\"tab-content\">\n              @if (hasVisited('templates')) {\n                <mj-communication-templates-resource></mj-communication-templates-resource>\n              }\n            </div>\n          }\n          @case ('runs') {\n            <div class=\"tab-content\">\n              @if (hasVisited('runs')) {\n                <mj-communication-runs-resource></mj-communication-runs-resource>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/* ============================================================ */\n/* MD3 COMMUNICATION DASHBOARD                                  */\n/* ============================================================ */\n.communication-dashboard-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    background: var(--mat-sys-surface-container);\n    color: var(--mat-sys-on-surface);\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    overflow: hidden;\n}\n\n/* ============================================================ */\n/* TOOLBAR                                                      */\n/* ============================================================ */\n.studio-toolbar {\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    background: var(--mat-sys-surface-container-lowest);\n    border-bottom: 1px solid var(--mat-sys-outline-variant);\n    min-height: 48px;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.toolbar-brand {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 0 8px;\n}\n\n.brand-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: var(--mat-sys-corner-small, 8px);\n    background: linear-gradient(135deg, var(--mat-sys-primary-container), color-mix(in srgb, var(--mat-sys-primary-container) 60%, var(--mat-sys-primary)));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mat-sys-primary);\n    font-size: 14px;\n}\n\n.brand-label {\n    font-weight: 700;\n    font-size: 14px;\n    color: var(--mat-sys-on-surface);\n    letter-spacing: -0.01em;\n}\n\n.toolbar-divider {\n    width: 1px;\n    height: 24px;\n    background: var(--mat-sys-outline-variant);\n    margin: 0 4px;\n}\n\n.toolbar-spacer {\n    flex: 1;\n}\n\n.tb-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mat-sys-outline-variant);\n    border-radius: var(--mat-sys-corner-extra-small, 4px);\n    background: var(--mat-sys-surface-container-lowest);\n    color: var(--mat-sys-on-surface-variant);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-family: inherit;\n}\n\n.tb-btn:hover {\n    background: var(--mat-sys-surface-container-high);\n    border-color: var(--mat-sys-outline);\n    color: var(--mat-sys-on-surface);\n}\n\n.tb-btn i {\n    font-size: 12px;\n}\n\n@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.spinning {\n    animation: spin 1s linear infinite;\n}\n\n/* ============================================================ */\n/* BODY LAYOUT                                                  */\n/* ============================================================ */\n.dashboard-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* ============================================================ */\n/* SIDEBAR                                                      */\n/* ============================================================ */\n.sidebar {\n    width: 220px;\n    background: var(--mat-sys-surface-container-lowest);\n    border-right: 1px solid var(--mat-sys-outline-variant);\n    padding: 12px 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex-shrink: 0;\n}\n\n.sidebar-section-label {\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    color: var(--mat-sys-on-surface-variant);\n    padding: 12px 12px 6px;\n}\n\n.nav-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: var(--mat-sys-corner-small, 8px);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    color: var(--mat-sys-on-surface-variant);\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.nav-item:hover {\n    background: var(--mat-sys-surface-container);\n    color: var(--mat-sys-on-surface);\n}\n\n.nav-item.selected {\n    background: var(--mat-sys-primary-container);\n    color: var(--mat-sys-on-primary-container);\n    font-weight: 600;\n}\n\n.nav-item i {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n}\n\n.sidebar-footer {\n    margin-top: auto;\n    padding-top: 8px;\n    border-top: 1px solid var(--mat-sys-outline-variant);\n}\n\n/* ============================================================ */\n/* MAIN CONTENT                                                 */\n/* ============================================================ */\n.main-content {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mat-sys-surface-container);\n}\n\n.tab-container {\n    height: 100%;\n}\n\n.tab-content {\n    height: 100%;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationDashboardComponent, { className: "CommunicationDashboardComponent", filePath: "src/communication/communication-dashboard.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationDashboardComponent, { className: "CommunicationDashboardComponent", filePath: "src/Communication/communication-dashboard.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=communication-dashboard.component.js.map

package/dist/Communication/communication-logs-resource.component.js

@@ -376,5 +376,5 @@ export { CommunicationLogsResourceComponent };
     </div>
     `, styles: ["\n    .logs-wrapper {\n        height: 100%;\n        padding: 24px;\n        background: var(--mat-sys-surface-container);\n    }\n    .card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    /* TOOLBAR */\n    .logs-toolbar {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n        background: var(--mat-sys-surface-container-low);\n        flex-shrink: 0;\n    }\n    .search-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        flex: 1;\n        max-width: 400px;\n        padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container-lowest);\n        transition: border-color 0.15s, box-shadow 0.15s;\n    }\n    .search-input-wrapper:focus-within {\n        border-color: var(--mat-sys-primary);\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n    }\n    .search-input-wrapper i { color: var(--mat-sys-on-surface-variant); font-size: 12px; }\n    .search-input-wrapper input {\n        flex: 1; border: none; outline: none;\n        background: transparent; font-size: 12px;\n        font-family: inherit; color: var(--mat-sys-on-surface);\n    }\n    .search-input-wrapper input::placeholder { color: var(--mat-sys-on-surface-variant); }\n\n    .filter-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 4px 10px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: 16px;\n        background: var(--mat-sys-surface-container-lowest);\n        font-size: 11px; font-weight: 500;\n        color: var(--mat-sys-on-surface-variant);\n        cursor: pointer; transition: all 0.15s;\n    }\n    .filter-chip:hover {\n        border-color: var(--mat-sys-outline);\n        background: var(--mat-sys-surface-container);\n    }\n    .filter-chip.active {\n        border-color: var(--mat-sys-primary);\n        background: var(--mat-sys-primary-container);\n        color: var(--mat-sys-on-primary-container);\n    }\n    .filter-chip i { font-size: 10px; }\n\n    .toolbar-spacer { flex: 1; }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn:hover {\n        background: var(--mat-sys-surface-container-high);\n        border-color: var(--mat-sys-outline);\n        color: var(--mat-sys-on-surface);\n    }\n    .tb-btn i { font-size: 12px; }\n\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    /* TABLE */\n    .table-wrapper { flex: 1; overflow-y: auto; }\n\n    .log-table {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 12px;\n    }\n    .log-table thead {\n        background: var(--mat-sys-surface-container-low);\n        position: sticky; top: 0; z-index: 1;\n    }\n    .log-table th {\n        padding: 10px 16px;\n        text-align: left;\n        font-weight: 700; font-size: 10px;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n        white-space: nowrap;\n    }\n    .log-table td {\n        padding: 12px 16px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        color: var(--mat-sys-on-surface);\n        vertical-align: middle;\n    }\n    .log-table tbody tr { transition: background 0.15s; }\n    .log-table tbody tr:hover { background: var(--mat-sys-surface-container-low); }\n\n    .log-status-badge {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        padding: 3px 10px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n    }\n    .log-status-badge.complete { background: #d4f8e0; color: #1b873f; }\n    .log-status-badge.failed { background: #ffdce0; color: #cf222e; }\n    .log-status-badge.pending { background: #fff0c7; color: #9a6700; }\n    .log-status-badge.in-progress { background: #ddf4ff; color: #0969da; }\n\n    .log-direction {\n        display: flex; align-items: center;\n        gap: 4px; font-size: 11px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .log-direction i { font-size: 10px; }\n    .log-direction.sending i { color: var(--mat-sys-primary); }\n    .log-direction.receiving i { color: #1b873f; }\n\n    .log-provider-badge {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 3px 10px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container);\n        font-weight: 500;\n    }\n\n    .log-error-text {\n        color: #cf222e;\n        max-width: 200px;\n        overflow: hidden; text-overflow: ellipsis;\n        white-space: nowrap; font-size: 11px;\n        display: block;\n    }\n    .no-error { color: var(--mat-sys-on-surface-variant); }\n\n    .no-data { padding: 0 !important; }\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationLogsResourceComponent, { className: "CommunicationLogsResourceComponent", filePath: "src/communication/communication-logs-resource.component.ts", lineNumber: 273 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationLogsResourceComponent, { className: "CommunicationLogsResourceComponent", filePath: "src/Communication/communication-logs-resource.component.ts", lineNumber: 273 }); })();
 //# sourceMappingURL=communication-logs-resource.component.js.map

package/dist/Communication/communication-monitor-resource.component.js

@@ -661,5 +661,5 @@ export { CommunicationMonitorResourceComponent };
     </div>
     `, styles: ["\n    /* ============================================================ */\n    /* MD3 MONITOR RESOURCE                                        */\n    /* ============================================================ */\n    .monitor-wrapper {\n        height: 100%;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .monitor-container {\n        padding: 24px;\n        min-height: 100%;\n        max-width: 1600px;\n        margin: 0 auto;\n    }\n\n    /* KPI STRIP */\n    .kpi-strip {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 16px;\n        margin-bottom: 24px;\n    }\n    .kpi-card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 20px;\n        display: flex;\n        align-items: flex-start;\n        gap: 16px;\n        transition: all 0.15s ease;\n        position: relative;\n        overflow: hidden;\n    }\n    .kpi-card:hover {\n        box-shadow: var(--mat-sys-elevation-1);\n        border-color: var(--mat-sys-outline);\n    }\n    .kpi-card::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 3px;\n    }\n    .kpi-card.sent::before { background: var(--mat-sys-primary); }\n    .kpi-card.delivered::before { background: #1b873f; }\n    .kpi-card.pending::before { background: #9a6700; }\n    .kpi-card.failed::before { background: #cf222e; }\n\n    .kpi-icon {\n        width: 44px; height: 44px;\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent .kpi-icon { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .kpi-card.delivered .kpi-icon { background: #d4f8e0; color: #1b873f; }\n    .kpi-card.pending .kpi-icon { background: #fff0c7; color: #9a6700; }\n    .kpi-card.failed .kpi-icon { background: #ffdce0; color: #cf222e; }\n\n    .kpi-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }\n    .kpi-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .kpi-value {\n        font-size: 28px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n        letter-spacing: -0.02em; line-height: 1.1;\n    }\n    .kpi-delta {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        margin-top: 4px; padding: 2px 8px;\n        border-radius: 10px; width: fit-content;\n    }\n    .kpi-delta.up { background: #d4f8e0; color: #1b873f; }\n    .kpi-delta.down { background: #ffdce0; color: #cf222e; }\n    .kpi-delta.neutral { background: var(--mat-sys-surface-container); color: var(--mat-sys-on-surface-variant); }\n\n    .delivery-bar {\n        height: 6px; margin-top: 10px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill {\n        height: 100%; border-radius: 3px;\n        background: #1b873f; transition: width 0.6s ease;\n    }\n\n    /* CONTENT GRID */\n    .content-grid {\n        display: grid;\n        grid-template-columns: 1.6fr 1fr;\n        gap: 16px;\n        margin-bottom: 16px;\n    }\n\n    .card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n    }\n    .card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px;\n    }\n    .card-body { padding: 16px 20px; }\n    .card-body.no-padding { padding: 0; }\n\n    .chart-container-inner {\n        padding: 16px 20px;\n        min-height: 300px;\n    }\n\n    /* ACTIVITY FEED */\n    .activity-feed { max-height: 370px; overflow-y: auto; }\n    .activity-item {\n        display: flex; align-items: center; gap: 12px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item:last-child { border-bottom: none; }\n    .activity-item:hover { background: var(--mat-sys-surface-container-low); }\n\n    .activity-icon {\n        width: 34px; height: 34px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .activity-icon.sms { background: #e8f5e9; color: #2e7d32; }\n    .activity-icon.error { background: #ffdce0; color: #cf222e; }\n\n    .activity-body { flex: 1; min-width: 0; }\n    .activity-title {\n        font-size: 12px; font-weight: 600;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta {\n        font-size: 11px; color: var(--mat-sys-on-surface-variant); margin-top: 1px;\n        display: block;\n    }\n    .activity-status {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        flex-shrink: 0;\n    }\n    .activity-status.complete { background: #d4f8e0; color: #1b873f; }\n    .activity-status.failed { background: #ffdce0; color: #cf222e; }\n    .activity-status.pending { background: #fff0c7; color: #9a6700; }\n\n    /* PROVIDER HEALTH */\n    .provider-health-list { display: flex; flex-direction: column; }\n    .provider-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease;\n    }\n    .provider-row:last-child { border-bottom: none; }\n    .provider-row:hover { background: var(--mat-sys-surface-container-low); }\n\n    .provider-status-dot {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mat-sys-outline);\n    }\n    .provider-status-dot.active { background: #1b873f; }\n\n    .provider-logo {\n        width: 36px; height: 36px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid { color: #1A82E2; }\n    .provider-logo.twilio { color: #F22F46; }\n    .provider-logo.gmail { color: #EA4335; }\n    .provider-logo.msgraph { color: #0078D4; }\n\n    .provider-info { flex: 1; }\n    .provider-name { font-size: 13px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .provider-type { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .provider-health-bar {\n        width: 80px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .provider-health-fill {\n        height: 100%; border-radius: 3px;\n        transition: width 0.4s ease;\n    }\n    .provider-health-fill.excellent { background: #1b873f; }\n    .provider-health-fill.good { background: #66bb6a; }\n    .provider-health-fill.warning { background: #9a6700; }\n    .provider-health-fill.critical { background: #cf222e; }\n\n    .provider-rate {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent { color: #1b873f; }\n    .provider-rate.good { color: #66bb6a; }\n    .provider-rate.warning { color: #9a6700; }\n    .provider-rate.critical { color: #cf222e; }\n\n    /* CHANNEL BREAKDOWN */\n    .channel-breakdown { display: flex; flex-direction: column; }\n    .channel-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n    }\n    .channel-row:last-child { border-bottom: none; }\n    .channel-icon {\n        width: 32px; height: 32px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .channel-icon.sms { background: #e8f5e9; color: #2e7d32; }\n\n    .channel-info { flex: 1; }\n    .channel-name { font-size: 12px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .channel-count { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .channel-bar-wrapper {\n        width: 100px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .channel-bar-fill { height: 100%; border-radius: 3px; }\n    .channel-pct {\n        font-size: 12px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        min-width: 36px; text-align: right;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 40px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n\n    @media (max-width: 1200px) {\n        .kpi-strip { grid-template-columns: repeat(2, 1fr); }\n        .content-grid { grid-template-columns: 1fr; }\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/communication/communication-monitor-resource.component.ts", lineNumber: 479 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/Communication/communication-monitor-resource.component.ts", lineNumber: 479 }); })();
 //# sourceMappingURL=communication-monitor-resource.component.js.map

package/dist/Communication/communication-providers-resource.component.js

@@ -372,5 +372,5 @@ export { CommunicationProvidersResourceComponent };
     </div>
     `, styles: ["\n    .providers-wrapper {\n        height: 100%;\n        padding: 24px;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .providers-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-start;\n        margin-bottom: 20px;\n    }\n    .providers-header h2 {\n        margin: 0;\n        font-size: 18px;\n        font-weight: 800;\n        color: var(--mat-sys-on-surface);\n    }\n    .providers-header p {\n        margin: 4px 0 0;\n        font-size: 13px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 8px 16px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 600;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn.primary {\n        background: var(--mat-sys-primary);\n        color: var(--mat-sys-on-primary, #fff);\n        border-color: var(--mat-sys-primary);\n    }\n    .tb-btn.primary:hover { filter: brightness(1.1); }\n\n    .loading-state {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 0;\n    }\n\n    /* GRID */\n    .providers-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n        gap: 16px;\n    }\n    .provider-card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n        transition: all 0.15s ease;\n    }\n    .provider-card:hover {\n        box-shadow: 0 2px 6px 2px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);\n        border-color: var(--mat-sys-outline);\n    }\n    .provider-card.disabled { opacity: 0.65; }\n\n    .provider-card-header {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        padding: 20px 20px 16px;\n    }\n    .provider-card-logo {\n        width: 48px; height: 48px;\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 22px; flex-shrink: 0;\n        background: var(--mat-sys-surface-container);\n    }\n    .provider-card-logo.sendgrid { background: #E8F4FD; color: #1A82E2; }\n    .provider-card-logo.twilio { background: #FEECEE; color: #F22F46; }\n    .provider-card-logo.gmail { background: #FEECED; color: #EA4335; }\n    .provider-card-logo.msgraph { background: #E6F0FA; color: #0078D4; }\n\n    .provider-card-title { flex: 1; min-width: 0; }\n    .provider-card-name {\n        font-size: 15px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .provider-card-desc {\n        font-size: 12px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 2px;\n    }\n    .provider-card-status {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        padding: 3px 10px; border-radius: 10px;\n        flex-shrink: 0;\n    }\n    .provider-card-status.active { background: #d4f8e0; color: #1b873f; }\n    .provider-card-status.disabled { background: var(--mat-sys-surface-container-high); color: var(--mat-sys-on-surface-variant); }\n\n    .provider-card-body { padding: 0 20px 16px; }\n\n    .provider-capabilities {\n        display: flex; flex-wrap: wrap;\n        gap: 6px; margin-bottom: 16px;\n    }\n    .capability-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 4px 10px;\n        border-radius: 12px; font-size: 11px; font-weight: 500;\n    }\n    .capability-chip.supported { background: #d4f8e0; color: #1b873f; }\n    .capability-chip.unsupported {\n        background: var(--mat-sys-surface-container);\n        color: var(--mat-sys-outline);\n        text-decoration: line-through;\n    }\n\n    .provider-card-stats {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 12px; padding: 12px;\n        background: var(--mat-sys-surface-container-low);\n        border-radius: var(--mat-sys-corner-small, 8px);\n    }\n    .provider-stat { text-align: center; }\n    .provider-stat-value {\n        font-size: 16px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n    }\n    .provider-stat-label {\n        font-size: 10px;\n        color: var(--mat-sys-on-surface-variant);\n        text-transform: uppercase; letter-spacing: 0.3px;\n    }\n\n    .provider-card-footer {\n        display: flex;\n        border-top: 1px solid var(--mat-sys-outline-variant);\n    }\n    .provider-card-footer button {\n        flex: 1; padding: 12px;\n        border: none; background: transparent;\n        font-size: 12px; font-weight: 600;\n        color: var(--mat-sys-primary);\n        cursor: pointer; transition: background 0.15s;\n        font-family: inherit;\n        display: flex; align-items: center;\n        justify-content: center; gap: 6px;\n    }\n    .provider-card-footer button:hover {\n        background: var(--mat-sys-surface-container-low);\n    }\n    .provider-card-footer button + button {\n        border-left: 1px solid var(--mat-sys-outline-variant);\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationProvidersResourceComponent, { className: "CommunicationProvidersResourceComponent", filePath: "src/communication/communication-providers-resource.component.ts", lineNumber: 276 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationProvidersResourceComponent, { className: "CommunicationProvidersResourceComponent", filePath: "src/Communication/communication-providers-resource.component.ts", lineNumber: 276 }); })();
 //# sourceMappingURL=communication-providers-resource.component.js.map

package/dist/Communication/communication-runs-resource.component.js

@@ -296,5 +296,5 @@ export { CommunicationRunsResourceComponent };
     </div>
     `, styles: ["\n    .runs-wrapper {\n        height: 100%;\n        padding: 24px;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n    }\n    .card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mat-sys-on-surface-variant); font-size: 12px;\n    }\n    .header-actions { display: flex; gap: 8px; }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn:hover {\n        background: var(--mat-sys-surface-container-high);\n        border-color: var(--mat-sys-outline);\n        color: var(--mat-sys-on-surface);\n    }\n    .tb-btn i { font-size: 12px; }\n\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    .card-body.no-padding { padding: 0; }\n\n    /* SUMMARY */\n    .runs-summary {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 16px;\n        padding: 20px;\n    }\n    .run-stat-card {\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 16px 20px;\n        text-align: center;\n    }\n    .run-stat-card.info { background: #ddf4ff; }\n    .run-stat-card.success { background: #d4f8e0; }\n    .run-stat-card.neutral { background: var(--mat-sys-surface-container-low); }\n\n    .run-stat-value {\n        font-size: 24px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n    }\n    .run-stat-card.info .run-stat-value { color: #0969da; }\n    .run-stat-card.success .run-stat-value { color: #1b873f; }\n\n    .run-stat-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 2px;\n    }\n\n    /* TIMELINE */\n    .run-timeline { padding: 8px 20px 20px; }\n    .run-entry {\n        display: flex; gap: 16px;\n        padding: 16px 0;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        align-items: flex-start;\n    }\n    .run-entry:last-child { border-bottom: none; }\n\n    .run-timeline-dot {\n        width: 12px; height: 12px;\n        border-radius: 50%;\n        margin-top: 4px; flex-shrink: 0;\n    }\n    .run-timeline-dot.complete { background: #1b873f; }\n    .run-timeline-dot.failed { background: #cf222e; }\n    .run-timeline-dot.in-progress {\n        background: #0969da;\n        animation: pulse-dot 1.5s ease-in-out infinite;\n    }\n    .run-timeline-dot.pending { background: #9a6700; }\n\n    @keyframes pulse-dot {\n        0%, 100% { box-shadow: 0 0 0 0 rgba(9,105,218,0.4); }\n        50% { box-shadow: 0 0 0 6px rgba(9,105,218,0); }\n    }\n\n    .run-entry-content { flex: 1; }\n    .run-entry-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .run-entry-title {\n        font-size: 13px; font-weight: 600;\n        color: var(--mat-sys-on-surface);\n    }\n    .run-status-badge {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n    }\n    .run-status-badge.complete { background: #d4f8e0; color: #1b873f; }\n    .run-status-badge.failed { background: #ffdce0; color: #cf222e; }\n    .run-status-badge.pending { background: #fff0c7; color: #9a6700; }\n    .run-status-badge.in-progress { background: #ddf4ff; color: #0969da; }\n\n    .run-entry-meta {\n        font-size: 11px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 4px;\n        display: flex; align-items: center; gap: 12px;\n    }\n    .run-entry-meta span {\n        display: flex; align-items: center; gap: 4px;\n    }\n    .run-entry-meta i { font-size: 10px; }\n\n    .run-entry-comments {\n        font-size: 12px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 6px;\n        font-style: italic;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationRunsResourceComponent, { className: "CommunicationRunsResourceComponent", filePath: "src/communication/communication-runs-resource.component.ts", lineNumber: 238 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationRunsResourceComponent, { className: "CommunicationRunsResourceComponent", filePath: "src/Communication/communication-runs-resource.component.ts", lineNumber: 238 }); })();
 //# sourceMappingURL=communication-runs-resource.component.js.map

package/dist/Communication/communication-templates-resource.component.js

@@ -384,5 +384,5 @@ export { CommunicationTemplatesResourceComponent };
     </div>
     `, styles: ["\n    .templates-wrapper {\n        height: 100%;\n        padding: 24px;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n\n    /* HEADER */\n    .templates-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-start;\n        margin-bottom: 20px;\n    }\n    .templates-header h2 {\n        margin: 0;\n        font-size: 18px;\n        font-weight: 800;\n        color: var(--mat-sys-on-surface);\n    }\n    .templates-header p {\n        margin: 4px 0 0;\n        font-size: 13px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .header-actions {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n    .search-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container-lowest);\n        transition: border-color 0.15s, box-shadow 0.15s;\n        min-width: 220px;\n    }\n    .search-input-wrapper:focus-within {\n        border-color: var(--mat-sys-primary);\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n    }\n    .search-input-wrapper i { color: var(--mat-sys-on-surface-variant); font-size: 12px; }\n    .search-input-wrapper input {\n        flex: 1; border: none; outline: none;\n        background: transparent; font-size: 12px;\n        font-family: inherit; color: var(--mat-sys-on-surface);\n    }\n    .search-input-wrapper input::placeholder { color: var(--mat-sys-on-surface-variant); }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 8px 16px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 600;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn.primary {\n        background: var(--mat-sys-primary);\n        color: var(--mat-sys-on-primary, #fff);\n        border-color: var(--mat-sys-primary);\n    }\n    .tb-btn.primary:hover { filter: brightness(1.1); }\n\n    .loading-state {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 0;\n    }\n\n    /* CATEGORY FILTERS */\n    .category-filters {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n        margin-bottom: 20px;\n    }\n    .filter-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 5px 14px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: 16px;\n        background: var(--mat-sys-surface-container-lowest);\n        font-size: 12px; font-weight: 500;\n        color: var(--mat-sys-on-surface-variant);\n        cursor: pointer; transition: all 0.15s;\n    }\n    .filter-chip:hover {\n        border-color: var(--mat-sys-outline);\n        background: var(--mat-sys-surface-container);\n    }\n    .filter-chip.active {\n        border-color: var(--mat-sys-primary);\n        background: var(--mat-sys-primary-container);\n        color: var(--mat-sys-on-primary-container);\n    }\n\n    /* GRID */\n    .templates-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 16px;\n    }\n\n    .template-card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 20px;\n        cursor: pointer;\n        transition: all 0.15s ease;\n    }\n    .template-card:hover {\n        box-shadow: 0 2px 6px 2px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);\n        border-color: var(--mat-sys-outline);\n    }\n\n    .template-card-header {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-bottom: 12px;\n    }\n    .template-icon {\n        width: 40px; height: 40px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-primary-container);\n        color: var(--mat-sys-on-primary-container);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .template-title-area { flex: 1; min-width: 0; }\n    .template-name {\n        font-size: 14px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .template-category {\n        font-size: 11px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 2px;\n    }\n\n    .template-description {\n        font-size: 12px;\n        color: var(--mat-sys-on-surface-variant);\n        line-height: 1.5;\n        margin-bottom: 12px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n\n    .template-meta {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .template-content-types {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n    }\n    .content-type-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 3px 8px;\n        border-radius: 10px; font-size: 10px; font-weight: 500;\n        background: var(--mat-sys-surface-container);\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .content-type-chip.empty {\n        font-style: italic;\n    }\n    .template-updated {\n        font-size: 10px;\n        color: var(--mat-sys-on-surface-variant);\n        white-space: nowrap;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        grid-column: 1 / -1;\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 64px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationTemplatesResourceComponent, { className: "CommunicationTemplatesResourceComponent", filePath: "src/communication/communication-templates-resource.component.ts", lineNumber: 311 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationTemplatesResourceComponent, { className: "CommunicationTemplatesResourceComponent", filePath: "src/Communication/communication-templates-resource.component.ts", lineNumber: 311 }); })();
 //# sourceMappingURL=communication-templates-resource.component.js.map

package/dist/ComponentStudio/component-studio-dashboard.component.js

@@ -988,5 +988,5 @@ export { ComponentStudioDashboardComponent };
             type: HostListener,
             args: ['document:click', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/componentstudio/component-studio-dashboard.component.ts", lineNumber: 54 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 54 }); })();
 //# sourceMappingURL=component-studio-dashboard.component.js.map

package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js

@@ -396,5 +396,5 @@ export class AIAssistantPanelComponent {
             type: ViewChild,
             args: ['chatInput']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAssistantPanelComponent, { className: "AIAssistantPanelComponent", filePath: "src/componentstudio/components/ai-assistant/ai-assistant-panel.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAssistantPanelComponent, { className: "AIAssistantPanelComponent", filePath: "src/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.ts", lineNumber: 43 }); })();
 //# sourceMappingURL=ai-assistant-panel.component.js.map