@memberjunction/ng-dashboards 5.35.0 → 5.37.0

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

@@ -33,143 +33,101 @@ 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.Key;
-const _forTrack1 = ($index, $item) => $item.value;
-function AIAnalyticsResourceComponent_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+const _forTrack0 = ($index, $item) => $item.value;
+function AIAnalyticsResourceComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-filter-popover", 14);
-    i0.ɵɵlistener("ClearAllRequested", function AIAnalyticsResourceComponent_Conditional_2_Conditional_1_Template_mj_filter_popover_ClearAllRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.resetPopoverFilters()); });
-    i0.ɵɵelementStart(1, "mj-filter-panel", 15);
-    i0.ɵɵlistener("ValuesChange", function AIAnalyticsResourceComponent_Conditional_2_Conditional_1_Template_mj_filter_panel_ValuesChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAnalyticsFilterValuesChange($event)); })("Reset", function AIAnalyticsResourceComponent_Conditional_2_Conditional_1_Template_mj_filter_panel_Reset_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.resetPopoverFilters()); });
+    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 ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ActiveCount", ctx_r1.ActiveFilterCount)("ShowClearAll", ctx_r1.ActiveFilterCount > 0);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Fields", ctx_r1.analyticsFilterFields)("Values", ctx_r1.analyticsFilterValues);
 } }
-function AIAnalyticsResourceComponent_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function AIAnalyticsResourceComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 16);
-    i0.ɵɵtwoWayListener("selectedChange", function AIAnalyticsResourceComponent_Conditional_2_Conditional_2_Template_button_selectedChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.compareActive, $event) || (ctx_r1.compareActive = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("selectedChange", function AIAnalyticsResourceComponent_Conditional_2_Conditional_2_Template_button_selectedChange_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleCompare()); });
-    i0.ɵɵelement(1, "i", 17);
+    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 ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("toggleable", true);
     i0.ɵɵtwoWayProperty("selected", ctx_r1.compareActive);
 } }
-function AIAnalyticsResourceComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAnalyticsResourceComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 18);
-    i0.ɵɵlistener("click", function AIAnalyticsResourceComponent_Conditional_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnExportClicked()); });
-    i0.ɵɵelement(1, "i", 19);
+    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();
 } }
-function AIAnalyticsResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵconditionalCreate(1, AIAnalyticsResourceComponent_Conditional_2_Conditional_1_Template, 2, 4, "mj-filter-popover", 11);
-    i0.ɵɵconditionalCreate(2, AIAnalyticsResourceComponent_Conditional_2_Conditional_2_Template, 3, 2, "button", 12);
-    i0.ɵɵconditionalCreate(3, AIAnalyticsResourceComponent_Conditional_2_Conditional_3_Template, 3, 0, "button", 13);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.analyticsFilterFields.length > 0 ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.FilterBarConfig.ShowCompareToggle ? 2 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.FilterBarConfig.ShowExportButton ? 3 : -1);
-} }
-function AIAnalyticsResourceComponent_Conditional_3_For_2_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, "mj-filter-chip", 21);
-    i0.ɵɵlistener("Clicked", function AIAnalyticsResourceComponent_Conditional_3_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.ɵɵ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 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_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵrepeaterCreate(1, AIAnalyticsResourceComponent_Conditional_3_For_2_Template, 1, 2, "mj-filter-chip", 20, _forTrack1);
+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_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.timeRangeChipOptions);
 } }
-function AIAnalyticsResourceComponent_For_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 22);
-} }
-function AIAnalyticsResourceComponent_For_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function AIAnalyticsResourceComponent_Case_13_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 24);
-    i0.ɵɵlistener("click", function AIAnalyticsResourceComponent_For_7_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const item_r8 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSectionChange(item_r8.Key)); });
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const item_r8 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("active", ctx_r1.ActiveSection === item_r8.Key);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r8.Icon);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r8.Label);
-} }
-function AIAnalyticsResourceComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, AIAnalyticsResourceComponent_For_7_Conditional_0_Template, 1, 0, "div", 22)(1, AIAnalyticsResourceComponent_For_7_Conditional_1_Template, 4, 5, "button", 23);
-} if (rf & 2) {
-    const item_r8 = ctx.$implicit;
-    i0.ɵɵconditional(item_r8.Key === "divider" ? 0 : 1);
-} }
-function AIAnalyticsResourceComponent_Case_9_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-analytics-executive-summary", 25, 0);
-    i0.ɵɵlistener("SectionNavigate", function AIAnalyticsResourceComponent_Case_9_Template_app_analytics_executive_summary_SectionNavigate_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSectionChange($event)); });
+    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_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("TimeRange", ctx_r1.CurrentTimeRange)("Filters", ctx_r1.CurrentFilters);
 } }
-function AIAnalyticsResourceComponent_Case_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "app-analytics-prompt-runs", 8, 1);
+function AIAnalyticsResourceComponent_Case_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-analytics-prompt-runs", 13, 1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("TimeRange", ctx_r1.CurrentTimeRange)("Filters", ctx_r1.CurrentFilters);
 } }
-function AIAnalyticsResourceComponent_Case_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "app-analytics-agent-runs", 8);
+function AIAnalyticsResourceComponent_Case_15_Template(rf, ctx) { if (rf & 1) {
+    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_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "app-analytics-model-performance", 9);
+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_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "app-analytics-cost-budget", 8);
+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_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "app-analytics-error-analysis", 8);
+function AIAnalyticsResourceComponent_Case_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-analytics-error-analysis", 13);
 } if (rf & 2) {
     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) {
-    i0.ɵɵelement(0, "app-analytics-usage-patterns", 10);
+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);
@@ -380,15 +338,57 @@ let AIAnalyticsResourceComponent = class AIAnalyticsResourceComponent extends Ba
         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();
@@ -509,30 +509,43 @@ let AIAnalyticsResourceComponent = class AIAnalyticsResourceComponent extends Ba
             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: 16, vars: 4, consts: [["executiveSummary", ""], ["promptRuns", ""], ["Title", "Analytics", "Icon", "fa-solid fa-chart-line"], ["actions", ""], ["toolbar", "", 1, "time-range-chips"], [1, "analytics-shell", 3, "Padding"], [1, "analytics-nav"], [1, "analytics-content"], [3, "TimeRange", "Filters"], [3, "TimeRange", "SortBy", "SelectedVendor"], [3, "TimeRange"], [3, "ActiveCount", "ShowClearAll"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "toggleable", "selected"], ["mjButton", "", "variant", "secondary", "size", "sm"], [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"], [1, "nav-divider"], [1, "nav-item", 3, "active"], [1, "nav-item", 3, "click"], [3, "SectionNavigate", "TimeRange", "Filters"]], template: function AIAnalyticsResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 2);
-            i0.ɵɵconditionalCreate(2, AIAnalyticsResourceComponent_Conditional_2_Template, 4, 3, "div", 3);
-            i0.ɵɵconditionalCreate(3, AIAnalyticsResourceComponent_Conditional_3_Template, 3, 0, "div", 4);
+        } }, 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-page-body", 5)(5, "nav", 6);
-            i0.ɵɵrepeaterCreate(6, AIAnalyticsResourceComponent_For_7_Template, 2, 1, null, null, _forTrack0);
+            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", 7);
-            i0.ɵɵconditionalCreate(9, AIAnalyticsResourceComponent_Case_9_Template, 2, 2, "app-analytics-executive-summary", 8)(10, AIAnalyticsResourceComponent_Case_10_Template, 2, 2, "app-analytics-prompt-runs", 8)(11, AIAnalyticsResourceComponent_Case_11_Template, 1, 2, "app-analytics-agent-runs", 8)(12, AIAnalyticsResourceComponent_Case_12_Template, 1, 3, "app-analytics-model-performance", 9)(13, AIAnalyticsResourceComponent_Case_13_Template, 1, 2, "app-analytics-cost-budget", 8)(14, AIAnalyticsResourceComponent_Case_14_Template, 1, 2, "app-analytics-error-analysis", 8)(15, AIAnalyticsResourceComponent_Case_15_Template, 1, 1, "app-analytics-usage-patterns", 10);
-            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_4_0;
+            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.ShowSharedFilterBar ? 2 : -1);
+            i0.ɵɵconditional(ctx.analyticsFilterFields.length > 0 ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowSharedFilterBar && ctx.timeRangeChipOptions.length > 0 ? 3 : -1);
+            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.ɵɵrepeater(ctx.NavItems);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional((tmp_4_0 = ctx.ActiveSection) === "executive-summary" ? 9 : tmp_4_0 === "prompt-runs" ? 10 : tmp_4_0 === "agent-runs" ? 11 : tmp_4_0 === "model-performance" ? 12 : tmp_4_0 === "cost-budget" ? 13 : tmp_4_0 === "error-analysis" ? 14 : tmp_4_0 === "usage-patterns" ? 15 : -1);
-        } }, dependencies: [i1.MJButtonDirective, i1.MJPageHeaderComponent, i1.MJPageLayoutComponent, i1.MJPageBodyComponent, 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        .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-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        }"] });
+            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')
@@ -542,10 +555,32 @@ export { AIAnalyticsResourceComponent };
         type: Component,
         args: [{ standalone: false, selector: 'app-ai-analytics-resource', template: `
       <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="Analytics"
-            Icon="fa-solid fa-chart-line">
-            @if (ShowSharedFilterBar) {
+            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
@@ -571,36 +606,19 @@ export { AIAnalyticsResourceComponent };
                         </button>
                     }
                 </div>
-            }
-            @if (ShowSharedFilterBar && 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>
-            }
-        </mj-page-header>
-        <mj-page-body [Padding]="false" class="analytics-shell">
-            <nav class="analytics-nav">
-                @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>
-                        </button>
-                    }
+                @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') {
@@ -650,9 +668,11 @@ export { AIAnalyticsResourceComponent };
                     }
                 }
             </div>
+            </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        .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-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    "] }]
+    `, 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']
@@ -660,7 +680,7 @@ export { AIAnalyticsResourceComponent };
             type: ViewChild,
             args: ['promptRuns']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAnalyticsResourceComponent, { className: "AIAnalyticsResourceComponent", filePath: "src/AI/components/analytics/ai-analytics-resource.component.ts", lineNumber: 303 }); })();
+(() => { (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
 }