@memberjunction/ng-dashboards 5.34.1 → 5.36.0

package/dist/AI/components/analytics/ai-analytics-resource.component.js

@@ -15,106 +15,122 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * Persists the active section and filter state via UserInfoEngine settings
  * with debounced writes.
  */
-import { Component, ChangeDetectorRef, inject } from '@angular/core';
+import { Component, ChangeDetectorRef, ViewChild, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { RegisterClass } from '@memberjunction/global';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import * as i0 from "@angular/core";
-import * as i1 from "./executive-summary/executive-summary.component";
-import * as i2 from "./prompt-runs/prompt-run-analysis.component";
-import * as i3 from "./agent-runs/agent-run-analysis.component";
-import * as i4 from "./model-performance/model-performance.component";
-import * as i5 from "./cost-budget/cost-budget.component";
-import * as i6 from "./error-analysis/error-analysis.component";
-import * as i7 from "./usage-patterns/usage-patterns.component";
-const _forTrack0 = ($index, $item) => $item.Key;
-function AIAnalyticsResourceComponent_For_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 7);
-} }
-function AIAnalyticsResourceComponent_For_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+import * as i1 from "@memberjunction/ng-ui-components";
+import * as i2 from "./executive-summary/executive-summary.component";
+import * as i3 from "./prompt-runs/prompt-run-analysis.component";
+import * as i4 from "./agent-runs/agent-run-analysis.component";
+import * as i5 from "./model-performance/model-performance.component";
+import * as i6 from "./cost-budget/cost-budget.component";
+import * as i7 from "./error-analysis/error-analysis.component";
+import * as i8 from "./usage-patterns/usage-patterns.component";
+const _c0 = ["executiveSummary"];
+const _c1 = ["promptRuns"];
+const _forTrack0 = ($index, $item) => $item.value;
+function AIAnalyticsResourceComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function AIAnalyticsResourceComponent_For_7_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const item_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSectionChange(item_r2.Key)); });
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
+    i0.ɵɵelementStart(0, "mj-filter-popover", 16);
+    i0.ɵɵlistener("ClearAllRequested", function AIAnalyticsResourceComponent_Conditional_7_Template_mj_filter_popover_ClearAllRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.resetPopoverFilters()); });
+    i0.ɵɵelementStart(1, "mj-filter-panel", 17);
+    i0.ɵɵlistener("ValuesChange", function AIAnalyticsResourceComponent_Conditional_7_Template_mj_filter_panel_ValuesChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAnalyticsFilterValuesChange($event)); })("Reset", function AIAnalyticsResourceComponent_Conditional_7_Template_mj_filter_panel_Reset_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.resetPopoverFilters()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("active", ctx_r2.ActiveSection === item_r2.Key);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ActiveCount", ctx_r1.ActiveFilterCount)("ShowClearAll", ctx_r1.ActiveFilterCount > 0);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r2.Icon);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r2.Label);
+    i0.ɵɵproperty("Fields", ctx_r1.analyticsFilterFields)("Values", ctx_r1.analyticsFilterValues);
 } }
-function AIAnalyticsResourceComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, AIAnalyticsResourceComponent_For_7_Conditional_0_Template, 1, 0, "div", 7)(1, AIAnalyticsResourceComponent_For_7_Conditional_1_Template, 4, 5, "button", 8);
+function AIAnalyticsResourceComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵtwoWayListener("selectedChange", function AIAnalyticsResourceComponent_Conditional_8_Template_button_selectedChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.compareActive, $event) || (ctx_r1.compareActive = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("selectedChange", function AIAnalyticsResourceComponent_Conditional_8_Template_button_selectedChange_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCompare()); });
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵtext(2, " Compare ");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    i0.ɵɵconditional(item_r2.Key === "divider" ? 0 : 1);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("toggleable", true);
+    i0.ɵɵtwoWayProperty("selected", ctx_r1.compareActive);
 } }
-function AIAnalyticsResourceComponent_Case_9_Template(rf, ctx) { if (rf & 1) {
+function AIAnalyticsResourceComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-analytics-executive-summary", 10);
-    i0.ɵɵlistener("TimeRangeChange", function AIAnalyticsResourceComponent_Case_9_Template_app_analytics_executive_summary_TimeRangeChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnTimeRangeChange($event)); })("FiltersChange", function AIAnalyticsResourceComponent_Case_9_Template_app_analytics_executive_summary_FiltersChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnFiltersChange($event)); })("SectionNavigate", function AIAnalyticsResourceComponent_Case_9_Template_app_analytics_executive_summary_SectionNavigate_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSectionChange($event)); });
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function AIAnalyticsResourceComponent_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnExportClicked()); });
+    i0.ɵɵelement(1, "i", 21);
+    i0.ɵɵtext(2, " Export ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("TimeRange", ctx_r2.CurrentTimeRange)("Filters", ctx_r2.CurrentFilters);
 } }
-function AIAnalyticsResourceComponent_Case_10_Template(rf, ctx) { if (rf & 1) {
+function AIAnalyticsResourceComponent_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-analytics-prompt-runs", 11);
-    i0.ɵɵlistener("TimeRangeChange", function AIAnalyticsResourceComponent_Case_10_Template_app_analytics_prompt_runs_TimeRangeChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnTimeRangeChange($event)); })("FiltersChange", function AIAnalyticsResourceComponent_Case_10_Template_app_analytics_prompt_runs_FiltersChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnFiltersChange($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("TimeRange", ctx_r2.CurrentTimeRange)("Filters", ctx_r2.CurrentFilters);
-} }
-function AIAnalyticsResourceComponent_Case_11_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-analytics-agent-runs", 12);
-    i0.ɵɵlistener("TimeRangeChange", function AIAnalyticsResourceComponent_Case_11_Template_app_analytics_agent_runs_TimeRangeChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnTimeRangeChange($event)); });
+    i0.ɵɵelementStart(0, "mj-filter-chip", 23);
+    i0.ɵɵlistener("Clicked", function AIAnalyticsResourceComponent_Conditional_10_For_2_Template_mj_filter_chip_Clicked_0_listener() { const chip_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTimeRangeChange(chip_r6.value)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("TimeRange", ctx_r2.CurrentTimeRange);
+    const chip_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Label", chip_r6.text)("Active", ctx_r1.CurrentTimeRange === chip_r6.value);
 } }
-function AIAnalyticsResourceComponent_Case_12_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-analytics-model-performance", 12);
-    i0.ɵɵlistener("TimeRangeChange", function AIAnalyticsResourceComponent_Case_12_Template_app_analytics_model_performance_TimeRangeChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnTimeRangeChange($event)); });
+function AIAnalyticsResourceComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵrepeaterCreate(1, AIAnalyticsResourceComponent_Conditional_10_For_2_Template, 1, 2, "mj-filter-chip", 22, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("TimeRange", ctx_r2.CurrentTimeRange);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.timeRangeChipOptions);
 } }
 function AIAnalyticsResourceComponent_Case_13_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-analytics-cost-budget", 11);
-    i0.ɵɵlistener("TimeRangeChange", function AIAnalyticsResourceComponent_Case_13_Template_app_analytics_cost_budget_TimeRangeChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnTimeRangeChange($event)); })("FiltersChange", function AIAnalyticsResourceComponent_Case_13_Template_app_analytics_cost_budget_FiltersChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnFiltersChange($event)); });
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-analytics-executive-summary", 24, 0);
+    i0.ɵɵlistener("SectionNavigate", function AIAnalyticsResourceComponent_Case_13_Template_app_analytics_executive_summary_SectionNavigate_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSectionChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("TimeRange", ctx_r2.CurrentTimeRange)("Filters", ctx_r2.CurrentFilters);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("TimeRange", ctx_r1.CurrentTimeRange)("Filters", ctx_r1.CurrentFilters);
 } }
 function AIAnalyticsResourceComponent_Case_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "app-analytics-error-analysis", 5);
+    i0.ɵɵelement(0, "app-analytics-prompt-runs", 13, 1);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("TimeRange", ctx_r2.CurrentTimeRange)("Filters", ctx_r2.CurrentFilters);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("TimeRange", ctx_r1.CurrentTimeRange)("Filters", ctx_r1.CurrentFilters);
 } }
 function AIAnalyticsResourceComponent_Case_15_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-analytics-usage-patterns", 12);
-    i0.ɵɵlistener("TimeRangeChange", function AIAnalyticsResourceComponent_Case_15_Template_app_analytics_usage_patterns_TimeRangeChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnTimeRangeChange($event)); });
-    i0.ɵɵelementEnd();
+    i0.ɵɵelement(0, "app-analytics-agent-runs", 13);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("TimeRange", ctx_r1.CurrentTimeRange)("Filters", ctx_r1.CurrentFilters);
+} }
+function AIAnalyticsResourceComponent_Case_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-analytics-model-performance", 14);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("TimeRange", ctx_r1.CurrentTimeRange)("SortBy", ctx_r1.CurrentSortBy)("SelectedVendor", ctx_r1.CurrentVendor);
+} }
+function AIAnalyticsResourceComponent_Case_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-analytics-cost-budget", 13);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("TimeRange", ctx_r1.CurrentTimeRange)("Filters", ctx_r1.CurrentFilters);
+} }
+function AIAnalyticsResourceComponent_Case_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-analytics-error-analysis", 13);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("TimeRange", ctx_r2.CurrentTimeRange);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("TimeRange", ctx_r1.CurrentTimeRange)("Filters", ctx_r1.CurrentFilters);
+} }
+function AIAnalyticsResourceComponent_Case_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-analytics-usage-patterns", 15);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("TimeRange", ctx_r1.CurrentTimeRange);
 } }
 let AIAnalyticsResourceComponent = class AIAnalyticsResourceComponent extends BaseResourceComponent {
     USER_SETTINGS_KEY = 'AI.Analytics.UserPreferences';
@@ -122,6 +138,8 @@ let AIAnalyticsResourceComponent = class AIAnalyticsResourceComponent extends Ba
     destroy$ = new Subject();
     settingsLoaded = false;
     cdr = inject(ChangeDetectorRef);
+    executiveSummary;
+    promptRuns;
     ActiveSection = 'executive-summary';
     CurrentTimeRange = '24h';
     CurrentFilters = {
@@ -130,16 +148,247 @@ let AIAnalyticsResourceComponent = class AIAnalyticsResourceComponent extends Ba
         Prompts: [],
         Statuses: []
     };
+    /** Single-value SortBy used by Model Performance (lives on the shared chrome). */
+    CurrentSortBy = 'cost-efficiency';
+    /** Single-value Vendor filter used by Model Performance (lives on the shared chrome). */
+    CurrentVendor = '';
+    /** SortBy options for Model Performance leaderboard. */
+    sortByOptions = [
+        { text: 'By Performance', value: 'cost-efficiency' },
+        { text: 'By Cost', value: 'cost' },
+        { text: 'By Speed', value: 'speed' },
+        { text: 'By Reliability', value: 'reliability' },
+        { text: 'By Usage', value: 'usage-volume' }
+    ];
+    /** Vendor options, lazily built from AIEngineBase for Model Performance leaderboard. */
+    get vendorOptions() {
+        return AIEngineBase.Instance?.Vendors?.map(v => ({ text: v.Name ?? '', value: v.ID ?? '' }))
+            ?.sort((a, b) => a.text.localeCompare(b.text)) ?? [];
+    }
+    /** Per-section filter-bar config — switched on ActiveSection. */
+    get FilterBarConfig() {
+        switch (this.ActiveSection) {
+            case 'executive-summary':
+                return { ShowModelFilter: false, ShowAgentFilter: false, ShowPromptFilter: false, ShowStatusFilter: false, ShowSortBy: false, ShowVendor: false, ShowCompareToggle: true, ShowExportButton: false, TimeRangeOptions: ['1h', '6h', '24h', '7d', '30d'] };
+            case 'prompt-runs':
+                return { ShowModelFilter: true, ShowAgentFilter: true, ShowPromptFilter: true, ShowStatusFilter: true, ShowSortBy: false, ShowVendor: false, ShowCompareToggle: false, ShowExportButton: true, TimeRangeOptions: ['1h', '6h', '24h', '7d', '30d'] };
+            case 'agent-runs':
+                return { ShowModelFilter: false, ShowAgentFilter: true, ShowPromptFilter: false, ShowStatusFilter: true, ShowSortBy: false, ShowVendor: false, ShowCompareToggle: false, ShowExportButton: false, TimeRangeOptions: ['1h', '6h', '24h', '7d', '30d'] };
+            case 'model-performance':
+                return { ShowModelFilter: false, ShowAgentFilter: false, ShowPromptFilter: false, ShowStatusFilter: false, ShowSortBy: true, ShowVendor: true, ShowCompareToggle: false, ShowExportButton: false, TimeRangeOptions: ['24h', '7d', '30d'] };
+            case 'cost-budget':
+                return { ShowModelFilter: true, ShowAgentFilter: false, ShowPromptFilter: false, ShowStatusFilter: false, ShowSortBy: false, ShowVendor: false, ShowCompareToggle: false, ShowExportButton: false, TimeRangeOptions: ['7d', '30d', '90d', 'MTD', 'YTD'] };
+            case 'error-analysis':
+                return { ShowModelFilter: true, ShowAgentFilter: false, ShowPromptFilter: true, ShowStatusFilter: false, ShowSortBy: false, ShowVendor: false, ShowCompareToggle: false, ShowExportButton: false, TimeRangeOptions: ['1h', '6h', '24h', '7d', '30d'] };
+            case 'usage-patterns':
+                return { ShowModelFilter: false, ShowAgentFilter: false, ShowPromptFilter: false, ShowStatusFilter: false, ShowSortBy: false, ShowVendor: false, ShowCompareToggle: false, ShowExportButton: false, TimeRangeOptions: ['1h', '6h', '24h', '7d', '30d'] };
+            default:
+                return { ShowModelFilter: false, ShowAgentFilter: false, ShowPromptFilter: false, ShowStatusFilter: false, ShowSortBy: false, ShowVendor: false, ShowCompareToggle: false, ShowExportButton: false, TimeRangeOptions: ['1h', '6h', '24h', '7d', '30d'] };
+        }
+    }
+    /**
+     * Always true now — every section uses the shared chrome filter bar.
+     * Kept as a getter for future per-section carve-outs.
+     */
+    get ShowSharedFilterBar() {
+        return true;
+    }
+    /** Status options used by the popover dropdown when the section has ShowStatusFilter. */
+    statusOptions = [
+        { text: 'Success', value: 'Success' },
+        { text: 'Error', value: 'Error' },
+        { text: 'Running', value: 'Running' },
+        { text: 'Pending', value: 'Pending' },
+        { text: 'Canceled', value: 'Canceled' },
+    ];
+    /** Built lazily from AIEngineBase. */
+    get modelOptions() {
+        return AIEngineBase.Instance?.Models?.map(m => ({ text: m.Name ?? '', value: m.ID }))
+            ?.sort((a, b) => a.text.localeCompare(b.text)) ?? [];
+    }
+    get agentOptions() {
+        return AIEngineBase.Instance?.Agents
+            ?.filter(a => a.Status === 'Active')
+            ?.map(a => ({ text: a.Name ?? '', value: a.ID }))
+            ?.sort((a, b) => a.text.localeCompare(b.text)) ?? [];
+    }
+    get promptOptions() {
+        return AIEngineBase.Instance?.Prompts?.map(p => ({ text: p.Name ?? '', value: p.ID }))
+            ?.sort((a, b) => a.text.localeCompare(b.text)) ?? [];
+    }
+    /** Time-range chip options for the toolbar slot. */
+    get timeRangeChipOptions() {
+        return this.FilterBarConfig.TimeRangeOptions.map(t => ({ text: t, value: t }));
+    }
+    /** Compare-mode visual state (kept on the shell now that analytics-filter-bar is gone). */
+    compareActive = false;
+    /** Build the FilterFieldConfig[] for the popover based on the active section. */
+    get analyticsFilterFields() {
+        const cfg = this.FilterBarConfig;
+        const fields = [];
+        if (cfg.ShowModelFilter) {
+            fields.push({
+                key: 'Models',
+                type: 'dropdown',
+                label: 'Model',
+                icon: 'fa-solid fa-microchip',
+                filterable: this.modelOptions.length > 10,
+                options: [{ text: 'All Models', value: '' }, ...this.modelOptions],
+            });
+        }
+        if (cfg.ShowAgentFilter) {
+            fields.push({
+                key: 'Agents',
+                type: 'dropdown',
+                label: 'Agent',
+                icon: 'fa-solid fa-robot',
+                filterable: this.agentOptions.length > 10,
+                options: [{ text: 'All Agents', value: '' }, ...this.agentOptions],
+            });
+        }
+        if (cfg.ShowPromptFilter) {
+            fields.push({
+                key: 'Prompts',
+                type: 'dropdown',
+                label: 'Prompt',
+                icon: 'fa-solid fa-comment-dots',
+                filterable: this.promptOptions.length > 10,
+                options: [{ text: 'All Prompts', value: '' }, ...this.promptOptions],
+            });
+        }
+        if (cfg.ShowStatusFilter) {
+            fields.push({
+                key: 'Statuses',
+                type: 'dropdown',
+                label: 'Status',
+                icon: 'fa-solid fa-toggle-on',
+                options: [{ text: 'All Statuses', value: '' }, ...this.statusOptions],
+            });
+        }
+        if (cfg.ShowSortBy) {
+            fields.push({
+                key: 'SortBy',
+                type: 'dropdown',
+                label: 'Sort By',
+                icon: 'fa-solid fa-arrow-down-wide-short',
+                options: this.sortByOptions,
+            });
+        }
+        if (cfg.ShowVendor) {
+            fields.push({
+                key: 'Vendor',
+                type: 'dropdown',
+                label: 'Vendor',
+                icon: 'fa-solid fa-building',
+                filterable: this.vendorOptions.length > 10,
+                options: [{ text: 'All Vendors', value: '' }, ...this.vendorOptions],
+            });
+        }
+        return fields;
+    }
+    /** Single-value flattened state for the centralized panel (the panel takes scalar values; we hold arrays in CurrentFilters). */
+    get analyticsFilterValues() {
+        return {
+            Models: this.CurrentFilters.Models?.[0] ?? '',
+            Agents: this.CurrentFilters.Agents?.[0] ?? '',
+            Prompts: this.CurrentFilters.Prompts?.[0] ?? '',
+            Statuses: this.CurrentFilters.Statuses?.[0] ?? '',
+            SortBy: this.CurrentSortBy,
+            Vendor: this.CurrentVendor,
+        };
+    }
+    /** Receive popover updates and translate scalar → array shape used by GlobalFilterState. */
+    onAnalyticsFilterValuesChange(values) {
+        const next = {
+            Models: values['Models'] ? [values['Models']] : [],
+            Agents: values['Agents'] ? [values['Agents']] : [],
+            Prompts: values['Prompts'] ? [values['Prompts']] : [],
+            Statuses: values['Statuses'] ? [values['Statuses']] : [],
+        };
+        this.OnFiltersChange(next);
+        if ('SortBy' in values) {
+            this.CurrentSortBy = values['SortBy'] || 'cost-efficiency';
+        }
+        if ('Vendor' in values) {
+            this.CurrentVendor = values['Vendor'] || '';
+        }
+    }
+    /** Reset only the popover filters — leaves TimeRange and CompareActive alone. */
+    resetPopoverFilters() {
+        this.OnFiltersChange({ Models: [], Agents: [], Prompts: [], Statuses: [] });
+        // SortBy + Vendor reset only when Model Performance is the active section.
+        if (this.ActiveSection === 'model-performance') {
+            this.CurrentSortBy = 'cost-efficiency';
+            this.CurrentVendor = '';
+        }
+    }
+    /** Active filter count for the popover badge. */
+    get ActiveFilterCount() {
+        const f = this.CurrentFilters;
+        let count = (f.Models?.length ?? 0) + (f.Agents?.length ?? 0) + (f.Prompts?.length ?? 0) + (f.Statuses?.length ?? 0);
+        // SortBy counts as "active" when it differs from the default.
+        if (this.FilterBarConfig.ShowSortBy && this.CurrentSortBy && this.CurrentSortBy !== 'cost-efficiency')
+            count++;
+        if (this.FilterBarConfig.ShowVendor && this.CurrentVendor)
+            count++;
+        return count;
+    }
+    /** Toggle Compare mode — the mjButton directive owns the [(selected)] flip, so this handler only forwards the new value. */
+    toggleCompare() {
+        this.OnCompareToggled(this.compareActive);
+    }
     NavItems = [
-        { Label: 'Executive Summary', Icon: 'fa-solid fa-gauge-high', Key: 'executive-summary' },
-        { Label: 'Prompt Runs', Icon: 'fa-solid fa-comment-dots', Key: 'prompt-runs' },
-        { Label: 'Agent Runs', Icon: 'fa-solid fa-robot', Key: 'agent-runs' },
-        { Label: 'Model Performance', Icon: 'fa-solid fa-microchip', Key: 'model-performance' },
+        { Label: 'Executive Summary', Icon: 'fa-solid fa-gauge-high', Key: 'executive-summary',
+            Description: 'High-level KPIs and trends across the platform' },
+        { Label: 'Prompt Runs', Icon: 'fa-solid fa-comment-dots', Key: 'prompt-runs',
+            Description: 'Detailed analysis of individual prompt executions' },
+        { Label: 'Agent Runs', Icon: 'fa-solid fa-robot', Key: 'agent-runs',
+            Description: 'Performance breakdown by agent' },
+        { Label: 'Model Performance', Icon: 'fa-solid fa-microchip', Key: 'model-performance',
+            Description: 'Compare models across cost, speed, and quality' },
         { Key: 'divider' },
-        { Label: 'Cost & Budget', Icon: 'fa-solid fa-coins', Key: 'cost-budget' },
-        { Label: 'Error Analysis', Icon: 'fa-solid fa-triangle-exclamation', Key: 'error-analysis' },
-        { Label: 'Usage Patterns', Icon: 'fa-solid fa-clock', Key: 'usage-patterns' },
+        { Label: 'Cost & Budget', Icon: 'fa-solid fa-coins', Key: 'cost-budget',
+            Description: 'Spend trends and budget tracking' },
+        { Label: 'Error Analysis', Icon: 'fa-solid fa-triangle-exclamation', Key: 'error-analysis',
+            Description: 'Failure patterns and root causes' },
+        { Label: 'Usage Patterns', Icon: 'fa-solid fa-clock', Key: 'usage-patterns',
+            Description: 'Volume, frequency, and concurrency over time' },
     ];
+    /**
+     * Active section metadata — drives <mj-page-header-interior> Title +
+     * Subtitle. Mirrors the pattern in KH Configuration / KH Analytics: one
+     * source of truth (NavItems) used both to build the rail and to render
+     * per-section identity.
+     */
+    get currentSection() {
+        return this.NavItems.find(n => n.Key === this.ActiveSection);
+    }
+    /**
+     * Wraps `NavItems` for `<mj-left-nav>`. The `{ Key: 'divider' }` entry
+     * splits the items into two `MJLeftNavSection`s (an unlabeled section per
+     * group) — the rail's natural section break replaces the bespoke
+     * `.nav-divider` line.
+     */
+    get navSections() {
+        const sections = [{ items: [] }];
+        for (const item of this.NavItems) {
+            if (item.Key === 'divider') {
+                sections.push({ items: [] });
+            }
+            else {
+                sections[sections.length - 1].items.push({
+                    id: item.Key,
+                    label: item.Label ?? '',
+                    icon: item.Icon
+                });
+            }
+        }
+        return sections;
+    }
+    /** Adapter for `<mj-left-nav>`'s `(ItemClicked)` output. */
+    onNavItemClicked(item) {
+        this.OnSectionChange(item.id);
+    }
     async ngOnInit() {
         super.ngOnInit();
         this.setupSettingsDebounce();
@@ -176,6 +425,14 @@ let AIAnalyticsResourceComponent = class AIAnalyticsResourceComponent extends Ba
         this.CurrentFilters = filters;
         this.saveUserSettings();
     }
+    /** Compare-toggle button — only visible on Executive Summary; forwards to that section. */
+    OnCompareToggled(value) {
+        this.executiveSummary?.OnCompareToggled?.(value);
+    }
+    /** Export button — only visible on Prompt Runs; forwards to that section. */
+    OnExportClicked() {
+        this.promptRuns?.ExportCSV?.();
+    }
     // ── Private Helpers ──
     setupSettingsDebounce() {
         this.settingsPersistSubject.pipe(debounceTime(500), takeUntil(this.destroy$)).subscribe(() => this.persistUserSettings());
@@ -246,24 +503,49 @@ let AIAnalyticsResourceComponent = class AIAnalyticsResourceComponent extends Ba
         }
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵAIAnalyticsResourceComponent_BaseFactory; return function AIAnalyticsResourceComponent_Factory(__ngFactoryType__) { return (ɵAIAnalyticsResourceComponent_BaseFactory || (ɵAIAnalyticsResourceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AIAnalyticsResourceComponent)))(__ngFactoryType__ || AIAnalyticsResourceComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAnalyticsResourceComponent, selectors: [["app-ai-analytics-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 16, vars: 1, consts: [[1, "analytics-shell"], [1, "analytics-nav"], [1, "nav-header"], [1, "fa-solid", "fa-chart-line"], [1, "analytics-content"], [3, "TimeRange", "Filters"], [3, "TimeRange"], [1, "nav-divider"], [1, "nav-item", 3, "active"], [1, "nav-item", 3, "click"], [3, "TimeRangeChange", "FiltersChange", "SectionNavigate", "TimeRange", "Filters"], [3, "TimeRangeChange", "FiltersChange", "TimeRange", "Filters"], [3, "TimeRangeChange", "TimeRange"]], template: function AIAnalyticsResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "nav", 1)(2, "div", 2);
-            i0.ɵɵelement(3, "i", 3);
-            i0.ɵɵelementStart(4, "span");
-            i0.ɵɵtext(5, "AI Analytics");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵrepeaterCreate(6, AIAnalyticsResourceComponent_For_7_Template, 2, 1, null, null, _forTrack0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAnalyticsResourceComponent, selectors: [["app-ai-analytics-resource"]], viewQuery: function AIAnalyticsResourceComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.executiveSummary = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptRuns = _t.first);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 20, vars: 11, consts: [["executiveSummary", ""], ["promptRuns", ""], ["Title", "AI Analytics", "Icon", "fa-solid fa-chart-line", "Subtitle", "Performance, cost, and usage analytics"], [1, "analytics-shell", 3, "Padding"], [3, "ItemClicked", "Sections", "ActiveId"], [3, "Title", "Subtitle"], ["actions", ""], [3, "ActiveCount", "ShowClearAll"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "toggleable", "selected"], ["mjButton", "", "variant", "secondary", "size", "sm"], ["toolbar", "", 1, "time-range-chips"], [3, "Padding"], [1, "analytics-content"], [3, "TimeRange", "Filters"], [3, "TimeRange", "SortBy", "SelectedVendor"], [3, "TimeRange"], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "selectedChange", "toggleable", "selected"], [1, "fa-solid", "fa-code-compare"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-download"], [3, "Label", "Active"], [3, "Clicked", "Label", "Active"], [3, "SectionNavigate", "TimeRange", "Filters"]], template: function AIAnalyticsResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout");
+            i0.ɵɵelement(1, "mj-page-header", 2);
+            i0.ɵɵelementStart(2, "mj-page-body", 3)(3, "mj-left-nav", 4);
+            i0.ɵɵlistener("ItemClicked", function AIAnalyticsResourceComponent_Template_mj_left_nav_ItemClicked_3_listener($event) { return ctx.onNavItemClicked($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "mj-left-nav-content")(5, "mj-page-header-interior", 5)(6, "div", 6);
+            i0.ɵɵconditionalCreate(7, AIAnalyticsResourceComponent_Conditional_7_Template, 2, 4, "mj-filter-popover", 7);
+            i0.ɵɵconditionalCreate(8, AIAnalyticsResourceComponent_Conditional_8_Template, 3, 2, "button", 8);
+            i0.ɵɵconditionalCreate(9, AIAnalyticsResourceComponent_Conditional_9_Template, 3, 0, "button", 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 4);
-            i0.ɵɵconditionalCreate(9, AIAnalyticsResourceComponent_Case_9_Template, 1, 2, "app-analytics-executive-summary", 5)(10, AIAnalyticsResourceComponent_Case_10_Template, 1, 2, "app-analytics-prompt-runs", 5)(11, AIAnalyticsResourceComponent_Case_11_Template, 1, 1, "app-analytics-agent-runs", 6)(12, AIAnalyticsResourceComponent_Case_12_Template, 1, 1, "app-analytics-model-performance", 6)(13, AIAnalyticsResourceComponent_Case_13_Template, 1, 2, "app-analytics-cost-budget", 5)(14, AIAnalyticsResourceComponent_Case_14_Template, 1, 2, "app-analytics-error-analysis", 5)(15, AIAnalyticsResourceComponent_Case_15_Template, 1, 1, "app-analytics-usage-patterns", 6);
-            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(10, AIAnalyticsResourceComponent_Conditional_10_Template, 3, 0, "div", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "mj-page-body-interior", 11)(12, "div", 12);
+            i0.ɵɵconditionalCreate(13, AIAnalyticsResourceComponent_Case_13_Template, 2, 2, "app-analytics-executive-summary", 13)(14, AIAnalyticsResourceComponent_Case_14_Template, 2, 2, "app-analytics-prompt-runs", 13)(15, AIAnalyticsResourceComponent_Case_15_Template, 1, 2, "app-analytics-agent-runs", 13)(16, AIAnalyticsResourceComponent_Case_16_Template, 1, 3, "app-analytics-model-performance", 14)(17, AIAnalyticsResourceComponent_Case_17_Template, 1, 2, "app-analytics-cost-budget", 13)(18, AIAnalyticsResourceComponent_Case_18_Template, 1, 2, "app-analytics-error-analysis", 13)(19, AIAnalyticsResourceComponent_Case_19_Template, 1, 1, "app-analytics-usage-patterns", 15);
+            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
-            let tmp_1_0;
-            i0.ɵɵadvance(6);
-            i0.ɵɵrepeater(ctx.NavItems);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional((tmp_1_0 = ctx.ActiveSection) === "executive-summary" ? 9 : tmp_1_0 === "prompt-runs" ? 10 : tmp_1_0 === "agent-runs" ? 11 : tmp_1_0 === "model-performance" ? 12 : tmp_1_0 === "cost-budget" ? 13 : tmp_1_0 === "error-analysis" ? 14 : tmp_1_0 === "usage-patterns" ? 15 : -1);
-        } }, dependencies: [i1.AnalyticsExecutiveSummaryComponent, i2.AnalyticsPromptRunsComponent, i3.AnalyticsAgentRunsComponent, i4.AnalyticsModelPerformanceComponent, i5.AnalyticsCostBudgetComponent, i6.AnalyticsErrorAnalysisComponent, i7.AnalyticsUsagePatternsComponent], styles: ["[_nghost-%COMP%] {\n            display: block;\n            height: 100%;\n        }\n\n        .analytics-shell[_ngcontent-%COMP%] {\n            display: flex;\n            height: 100%;\n            background: var(--mj-bg-page);\n        }\n\n        \n\n\n        .analytics-nav[_ngcontent-%COMP%] {\n            width: 220px;\n            min-width: 220px;\n            background: var(--mj-bg-surface);\n            border-right: 1px solid var(--mj-border-default);\n            display: flex;\n            flex-direction: column;\n            padding: 12px 0;\n            overflow-y: auto;\n        }\n\n        .nav-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            padding: 8px 18px 16px;\n            font-size: 15px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n            border-bottom: 1px solid var(--mj-border-subtle);\n            margin-bottom: 8px;\n        }\n\n        .nav-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            color: var(--mj-brand-primary);\n            font-size: 16px;\n        }\n\n        .nav-item[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            padding: 10px 18px;\n            border: none;\n            border-left: 3px solid transparent;\n            background: transparent;\n            color: var(--mj-text-secondary);\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n            text-align: left;\n            width: 100%;\n        }\n\n        .nav-item[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .nav-item.active[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-left-color: var(--mj-brand-primary);\n            font-weight: 600;\n        }\n\n        .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            width: 18px;\n            text-align: center;\n            font-size: 14px;\n        }\n\n        .nav-divider[_ngcontent-%COMP%] {\n            height: 1px;\n            background: var(--mj-border-subtle);\n            margin: 8px 18px;\n        }\n\n        \n\n\n        .analytics-content[_ngcontent-%COMP%] {\n            flex: 1;\n            overflow-y: auto;\n            padding: 24px;\n        }\n\n        \n\n\n        .section-placeholder[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            padding: 80px 24px;\n            color: var(--mj-text-muted);\n        }\n\n        .placeholder-icon[_ngcontent-%COMP%] {\n            font-size: 48px;\n            margin-bottom: 20px;\n            color: var(--mj-brand-primary);\n            opacity: 0.4;\n        }\n\n        .section-placeholder[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n            font-size: 20px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin: 0 0 8px;\n        }\n\n        .section-placeholder[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n            font-size: 14px;\n            color: var(--mj-text-muted);\n            margin: 0;\n            max-width: 420px;\n        }\n\n        \n\n\n        @media (max-width: 768px) {\n            .analytics-shell[_ngcontent-%COMP%] {\n                flex-direction: column;\n            }\n\n            .analytics-nav[_ngcontent-%COMP%] {\n                width: 100%;\n                min-width: unset;\n                flex-direction: row;\n                overflow-x: auto;\n                overflow-y: hidden;\n                border-right: none;\n                border-bottom: 1px solid var(--mj-border-default);\n                padding: 0 8px;\n                gap: 2px;\n            }\n\n            .nav-header[_ngcontent-%COMP%] {\n                display: none;\n            }\n\n            .nav-divider[_ngcontent-%COMP%] {\n                width: 1px;\n                height: 28px;\n                margin: auto 4px;\n            }\n\n            .nav-item[_ngcontent-%COMP%] {\n                white-space: nowrap;\n                border-left: none;\n                border-bottom: 3px solid transparent;\n                padding: 10px 14px;\n            }\n\n            .nav-item.active[_ngcontent-%COMP%] {\n                border-left-color: transparent;\n                border-bottom-color: var(--mj-brand-primary);\n            }\n\n            .analytics-content[_ngcontent-%COMP%] {\n                padding: 16px;\n            }\n        }"] });
+            let tmp_10_0;
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Padding", false);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Sections", ctx.navSections)("ActiveId", ctx.ActiveSection);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Title", (ctx.currentSection == null ? null : ctx.currentSection.Label) || "")("Subtitle", (ctx.currentSection == null ? null : ctx.currentSection.Description) || "");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.analyticsFilterFields.length > 0 ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.FilterBarConfig.ShowCompareToggle ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.FilterBarConfig.ShowExportButton ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.timeRangeChipOptions.length > 0 ? 10 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Padding", false);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional((tmp_10_0 = ctx.ActiveSection) === "executive-summary" ? 13 : tmp_10_0 === "prompt-runs" ? 14 : tmp_10_0 === "agent-runs" ? 15 : tmp_10_0 === "model-performance" ? 16 : tmp_10_0 === "cost-budget" ? 17 : tmp_10_0 === "error-analysis" ? 18 : tmp_10_0 === "usage-patterns" ? 19 : -1);
+        } }, dependencies: [i1.MJButtonDirective, i1.MJPageHeaderComponent, i1.MJPageLayoutComponent, i1.MJPageBodyComponent, i1.MJPageHeaderInteriorComponent, i1.MJPageBodyInteriorComponent, i1.MJLeftNavComponent, i1.MJLeftNavContentComponent, i1.MJFilterPopoverComponent, i1.MJFilterPanelComponent, i1.MJFilterChipComponent, i2.AnalyticsExecutiveSummaryComponent, i3.AnalyticsPromptRunsComponent, i4.AnalyticsAgentRunsComponent, i5.AnalyticsModelPerformanceComponent, i6.AnalyticsCostBudgetComponent, i7.AnalyticsErrorAnalysisComponent, i8.AnalyticsUsagePatternsComponent], styles: ["[_nghost-%COMP%] {\n            display: block;\n            height: 100%;\n        }\n\n        .analytics-shell[_ngcontent-%COMP%] {\n            display: flex;\n            flex: 1;\n            min-height: 0;\n            background: var(--mj-bg-page);\n        }\n\n        \n\n\n        \n\n\n\n\n        \n\n\n        .analytics-content[_ngcontent-%COMP%] {\n            flex: 1;\n            overflow-y: auto;\n            padding: 24px;\n        }\n\n        \n\n\n        .section-placeholder[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            padding: 80px 24px;\n            color: var(--mj-text-muted);\n        }\n\n        .placeholder-icon[_ngcontent-%COMP%] {\n            font-size: 48px;\n            margin-bottom: 20px;\n            color: var(--mj-brand-primary);\n            opacity: 0.4;\n        }\n\n        .section-placeholder[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n            font-size: 20px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin: 0 0 8px;\n        }\n\n        .section-placeholder[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n            font-size: 14px;\n            color: var(--mj-text-muted);\n            margin: 0;\n            max-width: 420px;\n        }\n\n        \n\n\n        \n\n\n        @media (max-width: 768px) {\n            .analytics-content[_ngcontent-%COMP%] {\n                padding: 16px;\n            }\n        }"] });
 };
 AIAnalyticsResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIAnalyticsResource')
@@ -272,64 +554,105 @@ export { AIAnalyticsResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAnalyticsResourceComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'app-ai-analytics-resource', template: `
-        <div class="analytics-shell">
-            <nav class="analytics-nav">
-                <div class="nav-header">
-                    <i class="fa-solid fa-chart-line"></i>
-                    <span>AI Analytics</span>
-                </div>
-                @for (item of NavItems; track item.Key) {
-                    @if (item.Key === 'divider') {
-                        <div class="nav-divider"></div>
-                    } @else {
-                        <button
-                            class="nav-item"
-                            [class.active]="ActiveSection === item.Key"
-                            (click)="OnSectionChange(item.Key)">
-                            <i [class]="item.Icon"></i>
-                            <span>{{ item.Label }}</span>
+      <mj-page-layout>
+        <!-- Outer chrome — pure identity. Every control (filter-popover,
+             TimeRange chips, Compare, Export) lives in the per-section
+             <mj-page-header-interior> card below because each section
+             configures its own filter fields and time-range options. -->
+        <mj-page-header
+            Title="AI Analytics"
+            Icon="fa-solid fa-chart-line"
+            Subtitle="Performance, cost, and usage analytics">
+        </mj-page-header>
+        <mj-page-body [Padding]="false" class="analytics-shell">
+            <mj-left-nav
+                [Sections]="navSections"
+                [ActiveId]="ActiveSection"
+                (ItemClicked)="onNavItemClicked($event)">
+            </mj-left-nav>
+
+            <mj-left-nav-content>
+            <!-- Per-section interior chrome owns the complete control surface
+                 for the active section: identity + actions + the section's
+                 own time-range chip strip. Even TimeRange options vary per
+                 section (Cost & Budget adds MTD / YTD, Model Performance
+                 drops 1h / 6h, etc.) so it belongs here rather than in the
+                 outer chrome. -->
+            <mj-page-header-interior
+                [Title]="currentSection?.Label || ''"
+                [Subtitle]="currentSection?.Description || ''">
+                <div actions>
+                    @if (analyticsFilterFields.length > 0) {
+                        <mj-filter-popover
+                            [ActiveCount]="ActiveFilterCount"
+                            [ShowClearAll]="ActiveFilterCount > 0"
+                            (ClearAllRequested)="resetPopoverFilters()">
+                            <mj-filter-panel
+                                [Fields]="analyticsFilterFields"
+                                [Values]="analyticsFilterValues"
+                                (ValuesChange)="onAnalyticsFilterValuesChange($event)"
+                                (Reset)="resetPopoverFilters()">
+                            </mj-filter-panel>
+                        </mj-filter-popover>
+                    }
+                    @if (FilterBarConfig.ShowCompareToggle) {
+                        <button mjButton variant="secondary" size="sm" [toggleable]="true" [(selected)]="compareActive" (selectedChange)="toggleCompare()">
+                            <i class="fa-solid fa-code-compare"></i> Compare
+                        </button>
+                    }
+                    @if (FilterBarConfig.ShowExportButton) {
+                        <button mjButton variant="secondary" size="sm" (click)="OnExportClicked()">
+                            <i class="fa-solid fa-download"></i> Export
                         </button>
                     }
+                </div>
+                @if (timeRangeChipOptions.length > 0) {
+                    <div toolbar class="time-range-chips">
+                        @for (chip of timeRangeChipOptions; track chip.value) {
+                            <mj-filter-chip
+                                [Label]="chip.text"
+                                [Active]="CurrentTimeRange === chip.value"
+                                (Clicked)="OnTimeRangeChange(chip.value)">
+                            </mj-filter-chip>
+                        }
+                    </div>
                 }
-            </nav>
-
+            </mj-page-header-interior>
+            <mj-page-body-interior [Padding]="false">
             <div class="analytics-content">
                 @switch (ActiveSection) {
                     @case ('executive-summary') {
                         <app-analytics-executive-summary
+                            #executiveSummary
                             [TimeRange]="CurrentTimeRange"
                             [Filters]="CurrentFilters"
-                            (TimeRangeChange)="OnTimeRangeChange($event)"
-                            (FiltersChange)="OnFiltersChange($event)"
                             (SectionNavigate)="OnSectionChange($event)"
                         ></app-analytics-executive-summary>
                     }
                     @case ('prompt-runs') {
                         <app-analytics-prompt-runs
+                            #promptRuns
                             [TimeRange]="CurrentTimeRange"
                             [Filters]="CurrentFilters"
-                            (TimeRangeChange)="OnTimeRangeChange($event)"
-                            (FiltersChange)="OnFiltersChange($event)"
                         ></app-analytics-prompt-runs>
                     }
                     @case ('agent-runs') {
                         <app-analytics-agent-runs
                             [TimeRange]="CurrentTimeRange"
-                            (TimeRangeChange)="OnTimeRangeChange($event)"
+                            [Filters]="CurrentFilters"
                         ></app-analytics-agent-runs>
                     }
                     @case ('model-performance') {
                         <app-analytics-model-performance
                             [TimeRange]="CurrentTimeRange"
-                            (TimeRangeChange)="OnTimeRangeChange($event)"
+                            [SortBy]="CurrentSortBy"
+                            [SelectedVendor]="CurrentVendor"
                         ></app-analytics-model-performance>
                     }
                     @case ('cost-budget') {
                         <app-analytics-cost-budget
                             [TimeRange]="CurrentTimeRange"
                             [Filters]="CurrentFilters"
-                            (TimeRangeChange)="OnTimeRangeChange($event)"
-                            (FiltersChange)="OnFiltersChange($event)"
                         ></app-analytics-cost-budget>
                     }
                     @case ('error-analysis') {
@@ -341,15 +664,23 @@ export { AIAnalyticsResourceComponent };
                     @case ('usage-patterns') {
                         <app-analytics-usage-patterns
                             [TimeRange]="CurrentTimeRange"
-                            (TimeRangeChange)="OnTimeRangeChange($event)"
                         ></app-analytics-usage-patterns>
                     }
                 }
             </div>
-        </div>
-    `, styles: ["\n        :host {\n            display: block;\n            height: 100%;\n        }\n\n        .analytics-shell {\n            display: flex;\n            height: 100%;\n            background: var(--mj-bg-page);\n        }\n\n        /* \u2500\u2500 Left Navigation \u2500\u2500 */\n\n        .analytics-nav {\n            width: 220px;\n            min-width: 220px;\n            background: var(--mj-bg-surface);\n            border-right: 1px solid var(--mj-border-default);\n            display: flex;\n            flex-direction: column;\n            padding: 12px 0;\n            overflow-y: auto;\n        }\n\n        .nav-header {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            padding: 8px 18px 16px;\n            font-size: 15px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n            border-bottom: 1px solid var(--mj-border-subtle);\n            margin-bottom: 8px;\n        }\n\n        .nav-header i {\n            color: var(--mj-brand-primary);\n            font-size: 16px;\n        }\n\n        .nav-item {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            padding: 10px 18px;\n            border: none;\n            border-left: 3px solid transparent;\n            background: transparent;\n            color: var(--mj-text-secondary);\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n            text-align: left;\n            width: 100%;\n        }\n\n        .nav-item:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .nav-item.active {\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-left-color: var(--mj-brand-primary);\n            font-weight: 600;\n        }\n\n        .nav-item i {\n            width: 18px;\n            text-align: center;\n            font-size: 14px;\n        }\n\n        .nav-divider {\n            height: 1px;\n            background: var(--mj-border-subtle);\n            margin: 8px 18px;\n        }\n\n        /* \u2500\u2500 Content Area \u2500\u2500 */\n\n        .analytics-content {\n            flex: 1;\n            overflow-y: auto;\n            padding: 24px;\n        }\n\n        /* \u2500\u2500 Section Placeholders \u2500\u2500 */\n\n        .section-placeholder {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            padding: 80px 24px;\n            color: var(--mj-text-muted);\n        }\n\n        .placeholder-icon {\n            font-size: 48px;\n            margin-bottom: 20px;\n            color: var(--mj-brand-primary);\n            opacity: 0.4;\n        }\n\n        .section-placeholder h2 {\n            font-size: 20px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin: 0 0 8px;\n        }\n\n        .section-placeholder p {\n            font-size: 14px;\n            color: var(--mj-text-muted);\n            margin: 0;\n            max-width: 420px;\n        }\n\n        /* \u2500\u2500 Responsive: collapse nav to horizontal strip \u2500\u2500 */\n\n        @media (max-width: 768px) {\n            .analytics-shell {\n                flex-direction: column;\n            }\n\n            .analytics-nav {\n                width: 100%;\n                min-width: unset;\n                flex-direction: row;\n                overflow-x: auto;\n                overflow-y: hidden;\n                border-right: none;\n                border-bottom: 1px solid var(--mj-border-default);\n                padding: 0 8px;\n                gap: 2px;\n            }\n\n            .nav-header {\n                display: none;\n            }\n\n            .nav-divider {\n                width: 1px;\n                height: 28px;\n                margin: auto 4px;\n            }\n\n            .nav-item {\n                white-space: nowrap;\n                border-left: none;\n                border-bottom: 3px solid transparent;\n                padding: 10px 14px;\n            }\n\n            .nav-item.active {\n                border-left-color: transparent;\n                border-bottom-color: var(--mj-brand-primary);\n            }\n\n            .analytics-content {\n                padding: 16px;\n            }\n        }\n    "] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAnalyticsResourceComponent, { className: "AIAnalyticsResourceComponent", filePath: "src/AI/components/analytics/ai-analytics-resource.component.ts", lineNumber: 279 }); })();
+            </mj-page-body-interior>
+            </mj-left-nav-content>
+        </mj-page-body>
+      </mj-page-layout>
+    `, styles: ["\n        :host {\n            display: block;\n            height: 100%;\n        }\n\n        .analytics-shell {\n            display: flex;\n            flex: 1;\n            min-height: 0;\n            background: var(--mj-bg-page);\n        }\n\n        /* \u2500\u2500 Left Navigation \u2500\u2500 */\n\n        /* Rail width + nav-item styling now owned by <mj-left-nav>; the\n           divider is expressed as a new MJLeftNavSection rather than a CSS\n           rule. */\n\n        /* \u2500\u2500 Content Area \u2500\u2500 */\n\n        .analytics-content {\n            flex: 1;\n            overflow-y: auto;\n            padding: 24px;\n        }\n\n        /* \u2500\u2500 Section Placeholders \u2500\u2500 */\n\n        .section-placeholder {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            padding: 80px 24px;\n            color: var(--mj-text-muted);\n        }\n\n        .placeholder-icon {\n            font-size: 48px;\n            margin-bottom: 20px;\n            color: var(--mj-brand-primary);\n            opacity: 0.4;\n        }\n\n        .section-placeholder h2 {\n            font-size: 20px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin: 0 0 8px;\n        }\n\n        .section-placeholder p {\n            font-size: 14px;\n            color: var(--mj-text-muted);\n            margin: 0;\n            max-width: 420px;\n        }\n\n        /* \u2500\u2500 Responsive: collapse nav to horizontal strip \u2500\u2500 */\n\n        /* Responsive \u2014 <mj-left-nav> handles its own collapse-to-row at\n           narrow viewports. We only need to tune the content padding. */\n        @media (max-width: 768px) {\n            .analytics-content {\n                padding: 16px;\n            }\n        }\n    "] }]
+    }], null, { executiveSummary: [{
+            type: ViewChild,
+            args: ['executiveSummary']
+        }], promptRuns: [{
+            type: ViewChild,
+            args: ['promptRuns']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAnalyticsResourceComponent, { className: "AIAnalyticsResourceComponent", filePath: "src/AI/components/analytics/ai-analytics-resource.component.ts", lineNumber: 231 }); })();
 export function LoadAIAnalyticsResource() {
     // Prevents tree-shaking of the @RegisterClass decorator
 }