@memberjunction/ng-dashboards 5.26.0 → 5.27.0

package/dist/AI/components/analytics/agent-runs/agent-run-analysis.component.js

@@ -0,0 +1,710 @@
+/**
+ * @fileoverview Agent Run Analysis -- Cost Attribution Focus.
+ *
+ * Displays agent run stats, cost attribution horizontal stacked bars per agent,
+ * and a sortable recent agent runs table. All data loaded via RunView from
+ * "MJ: AI Agent Runs" and "MJ: AI Prompt Runs" entities.
+ */
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject } from '@angular/core';
+import { Subject } from 'rxjs';
+import { RunView } from '@memberjunction/core';
+import { UUIDsEqual } from '@memberjunction/global';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "../analytics-filter-bar.component";
+import * as i3 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.AgentID;
+const _forTrack1 = ($index, $item) => $item.field;
+const _forTrack2 = ($index, $item) => $item.ID;
+const _forTrack3 = ($index, $item) => $item.Label;
+function AnalyticsAgentRunsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-loading", 2);
+    i0.ɵɵelementEnd();
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵtext(1, "No agent cost data for selected period");
+    i0.ɵɵelementEnd();
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_For_43_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 26);
+} if (rf & 2) {
+    const seg_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("width", seg_r1.Percent, "%")("background", seg_r1.Color);
+    i0.ɵɵproperty("title", seg_r1.Label + ": " + ctx_r1.FormatCurrency(seg_r1.Value, 4));
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_For_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 22);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 23);
+    i0.ɵɵrepeaterCreate(4, AnalyticsAgentRunsComponent_Conditional_2_For_43_For_5_Template, 1, 5, "div", 24, _forTrack3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 25);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const row_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", row_r3.AgentName);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r3.AgentName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(row_r3.Segments);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatCurrency(row_r3.TotalCost));
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_Conditional_44_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵelement(1, "span", 28);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", item_r4.Color);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r4.Label, " ");
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵrepeaterCreate(1, AnalyticsAgentRunsComponent_Conditional_2_Conditional_44_For_2_Template, 3, 3, "div", 27, _forTrack3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.LegendItems);
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_For_57_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(ctx_r1.SortDir === "asc" ? "fa-solid fa-caret-up" : "fa-solid fa-caret-down");
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_For_57_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "th", 29);
+    i0.ɵɵlistener("click", function AnalyticsAgentRunsComponent_Conditional_2_For_57_Template_th_click_0_listener() { const col_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnSort(col_r6.field)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵconditionalCreate(2, AnalyticsAgentRunsComponent_Conditional_2_For_57_Conditional_2_Template, 1, 2, "i", 30);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("sorted", ctx_r1.SortField === col_r6.field);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", col_r6.label, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.SortField === col_r6.field ? 2 : -1);
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_Conditional_59_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 31);
+    i0.ɵɵtext(2, "No runs found");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("colspan", ctx_r1.TableColumns.length);
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_For_61_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 32);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td")(4, "span", 33);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "td", 34);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "td", 34);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "td", 34);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "td", 35);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const run_r7 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(run_r7.Agent);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(run_r7.StatusClass);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(run_r7.Status);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(run_r7.StepCount);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(run_r7.Duration);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(run_r7.Cost);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(run_r7.Time);
+} }
+function AnalyticsAgentRunsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "div", 5);
+    i0.ɵɵtext(3, "Total Runs");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 6);
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "number");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 4)(8, "div", 5);
+    i0.ɵɵtext(9, "Total Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 6);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 7)(13, "div", 5);
+    i0.ɵɵtext(14, "Prompt Runs");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 6);
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "number");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 7)(19, "div", 5);
+    i0.ɵɵtext(20, "Avg Cost/Run");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 6);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(23, "div", 8)(24, "div", 5);
+    i0.ɵɵtext(25, "Success Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 6);
+    i0.ɵɵtext(27);
+    i0.ɵɵpipe(28, "number");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(29, "div", 7)(30, "div", 5);
+    i0.ɵɵtext(31, "Avg Duration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "div", 6);
+    i0.ɵɵtext(33);
+    i0.ɵɵpipe(34, "number");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(35, "div", 9)(36, "div", 10)(37, "div", 11);
+    i0.ɵɵelement(38, "i", 12);
+    i0.ɵɵtext(39, " Cost Attribution by Agent ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(40, "div", 13);
+    i0.ɵɵconditionalCreate(41, AnalyticsAgentRunsComponent_Conditional_2_Conditional_41_Template, 2, 0, "div", 14);
+    i0.ɵɵrepeaterCreate(42, AnalyticsAgentRunsComponent_Conditional_2_For_43_Template, 8, 3, "div", 15, _forTrack0);
+    i0.ɵɵconditionalCreate(44, AnalyticsAgentRunsComponent_Conditional_2_Conditional_44_Template, 3, 0, "div", 16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(45, "div", 9)(46, "div", 10)(47, "div", 11);
+    i0.ɵɵelement(48, "i", 17);
+    i0.ɵɵtext(49, " Recent Agent Runs ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(50, "span", 18);
+    i0.ɵɵtext(51);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(52, "div", 19)(53, "table", 20)(54, "thead")(55, "tr");
+    i0.ɵɵrepeaterCreate(56, AnalyticsAgentRunsComponent_Conditional_2_For_57_Template, 3, 4, "th", 21, _forTrack1);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(58, "tbody");
+    i0.ɵɵconditionalCreate(59, AnalyticsAgentRunsComponent_Conditional_2_Conditional_59_Template, 3, 1, "tr");
+    i0.ɵɵrepeaterCreate(60, AnalyticsAgentRunsComponent_Conditional_2_For_61_Template, 14, 8, "tr", null, _forTrack2);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 10, ctx_r1.Stats.TotalRuns));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatCurrency(ctx_r1.Stats.TotalCost));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 12, ctx_r1.Stats.PromptRuns));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatCurrency(ctx_r1.Stats.AvgCostPerRun, 4));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(28, 14, ctx_r1.Stats.SuccessRate, "1.1-1"), "%");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(34, 17, ctx_r1.Stats.AvgDurationSeconds, "1.1-1"), "s");
+    i0.ɵɵadvance(8);
+    i0.ɵɵconditional(ctx_r1.CostAttributionRows.length === 0 ? 41 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.CostAttributionRows);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.CostAttributionRows.length > 0 ? 44 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1("", ctx_r1.RecentRuns.length, " runs");
+    i0.ɵɵadvance(5);
+    i0.ɵɵrepeater(ctx_r1.TableColumns);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.RecentRuns.length === 0 ? 59 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.RecentRuns);
+} }
+const AGENT_RUN_FIELDS = [
+    'ID', 'StartedAt', 'CompletedAt', 'Status', 'Success',
+    'TotalCost', 'TotalTokensUsed', 'AgentID', 'Agent', 'ErrorMessage'
+];
+const PROMPT_RUN_FIELDS = [
+    'ID', 'AgentRunID', 'Cost', 'TotalCost', 'Model', 'Vendor'
+];
+const COST_COLORS = [
+    'var(--mj-brand-primary)',
+    'var(--mj-brand-accent, var(--mj-brand-primary-hover))',
+    'var(--mj-status-info)',
+    'var(--mj-text-disabled)'
+];
+export class AnalyticsAgentRunsComponent {
+    TimeRange = '7d';
+    Filters = { Agents: [], Statuses: [] };
+    TimeRangeChange = new EventEmitter();
+    FiltersChange = new EventEmitter();
+    cdr = inject(ChangeDetectorRef);
+    destroy$ = new Subject();
+    IsLoading = false;
+    Stats = {
+        TotalRuns: 0,
+        TotalCost: 0,
+        PromptRuns: 0,
+        AvgCostPerRun: 0,
+        SuccessRate: 0,
+        AvgDurationSeconds: 0
+    };
+    CostAttributionRows = [];
+    LegendItems = [];
+    RecentRuns = [];
+    SortField = 'Time';
+    SortDir = 'desc';
+    TableColumns = [
+        { field: 'Agent', label: 'Agent' },
+        { field: 'Status', label: 'Status' },
+        { field: 'StepCount', label: 'Steps' },
+        { field: 'Duration', label: 'Duration' },
+        { field: 'Cost', label: 'Cost' },
+        { field: 'Time', label: 'Time' }
+    ];
+    /** Bridge the local filter shape to the global shape the filter bar expects */
+    get globalFilters() {
+        return {
+            Models: [],
+            Agents: this.Filters.Agents,
+            Prompts: [],
+            Statuses: this.Filters.Statuses
+        };
+    }
+    agentRuns = [];
+    promptRuns = [];
+    ngOnInit() {
+        this.LoadData();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // ── Public Event Handlers ──
+    OnTimeRangeChange(range) {
+        this.TimeRange = range;
+        this.TimeRangeChange.emit(range);
+        this.LoadData();
+    }
+    OnFiltersChange(filters) {
+        this.Filters = { Agents: filters.Agents, Statuses: filters.Statuses };
+        this.FiltersChange.emit(this.Filters);
+        this.LoadData();
+    }
+    OnSort(field) {
+        if (this.SortField === field) {
+            this.SortDir = this.SortDir === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.SortField = field;
+            this.SortDir = field === 'Time' ? 'desc' : 'asc';
+        }
+        this.sortRecentRuns();
+        this.cdr.detectChanges();
+    }
+    FormatCurrency(value, decimals = 2) {
+        if (value === 0)
+            return '$0.00';
+        if (value < 0.01 && decimals < 4)
+            decimals = 4;
+        return '$' + value.toFixed(decimals);
+    }
+    // ── Data Loading ──
+    async LoadData() {
+        this.IsLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const rv = new RunView();
+            const dateFilter = this.buildDateFilter('StartedAt');
+            const agentFilter = this.buildAgentFilter();
+            const statusFilter = this.buildStatusFilter();
+            const extraFilter = [dateFilter, agentFilter, statusFilter].filter(Boolean).join(' AND ');
+            const promptDateFilter = this.buildDateFilter('RunAt');
+            const [agentResult, promptResult] = await rv.RunViews([
+                {
+                    EntityName: 'MJ: AI Agent Runs',
+                    ExtraFilter: extraFilter,
+                    Fields: AGENT_RUN_FIELDS,
+                    OrderBy: 'StartedAt DESC',
+                    ResultType: 'simple'
+                },
+                {
+                    EntityName: 'MJ: AI Prompt Runs',
+                    ExtraFilter: promptDateFilter,
+                    Fields: PROMPT_RUN_FIELDS,
+                    OrderBy: 'RunAt DESC',
+                    ResultType: 'simple'
+                }
+            ]);
+            this.agentRuns = (agentResult?.Results ?? []);
+            this.promptRuns = (promptResult?.Results ?? []);
+            this.computeStats();
+            this.computeCostAttribution();
+            this.buildRecentRuns();
+            this.sortRecentRuns();
+        }
+        catch (e) {
+            console.error('Agent Run Analysis load error:', e);
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // ── Computations ──
+    computeStats() {
+        const runs = this.agentRuns;
+        const total = runs.length;
+        const totalCost = runs.reduce((s, r) => s + (r.TotalCost ?? 0), 0);
+        const completed = runs.filter(r => r.Status === 'Completed');
+        const successCount = runs.filter(r => r.Success === true).length;
+        const durations = completed
+            .filter(r => r.CompletedAt)
+            .map(r => {
+            const start = new Date(r.StartedAt).getTime();
+            const end = new Date(r.CompletedAt).getTime();
+            return (end - start) / 1000;
+        })
+            .filter(d => d > 0);
+        const avgDuration = durations.length > 0
+            ? durations.reduce((s, d) => s + d, 0) / durations.length
+            : 0;
+        const linkedPromptRuns = this.promptRuns.filter(p => p.AgentRunID != null && this.agentRunIdSet.has(p.AgentRunID));
+        this.Stats = {
+            TotalRuns: total,
+            TotalCost: totalCost,
+            PromptRuns: linkedPromptRuns.length,
+            AvgCostPerRun: total > 0 ? totalCost / total : 0,
+            SuccessRate: total > 0 ? (successCount / total) * 100 : 0,
+            AvgDurationSeconds: avgDuration
+        };
+    }
+    get agentRunIdSet() {
+        return new Set(this.agentRuns.map(r => r.ID));
+    }
+    computeCostAttribution() {
+        const agentCostMap = new Map();
+        // Group prompt runs by agent run, then by vendor
+        for (const pr of this.promptRuns) {
+            if (!pr.AgentRunID)
+                continue;
+            const agentRun = this.agentRuns.find(ar => UUIDsEqual(ar.ID, pr.AgentRunID));
+            if (!agentRun)
+                continue;
+            const agentKey = agentRun.AgentID;
+            if (!agentCostMap.has(agentKey)) {
+                agentCostMap.set(agentKey, {
+                    name: agentRun.Agent ?? 'Unknown',
+                    vendorCosts: new Map(),
+                    totalCost: 0
+                });
+            }
+            const entry = agentCostMap.get(agentKey);
+            const vendor = pr.Vendor ?? 'Other';
+            const cost = pr.Cost ?? pr.TotalCost ?? 0;
+            entry.vendorCosts.set(vendor, (entry.vendorCosts.get(vendor) ?? 0) + cost);
+            entry.totalCost += cost;
+        }
+        // Collect all vendors for consistent coloring
+        const allVendors = new Set();
+        for (const entry of agentCostMap.values()) {
+            for (const v of entry.vendorCosts.keys()) {
+                allVendors.add(v);
+            }
+        }
+        const vendorList = Array.from(allVendors);
+        // Build legend
+        this.LegendItems = vendorList.map((v, i) => ({
+            Label: v,
+            Color: COST_COLORS[i % COST_COLORS.length]
+        }));
+        // Sort by total cost descending
+        const sorted = Array.from(agentCostMap.entries())
+            .sort((a, b) => b[1].totalCost - a[1].totalCost);
+        this.CostAttributionRows = sorted.map(([agentId, entry]) => {
+            const segments = vendorList.map((vendor, i) => {
+                const val = entry.vendorCosts.get(vendor) ?? 0;
+                return {
+                    Label: vendor,
+                    Value: val,
+                    Percent: entry.totalCost > 0 ? (val / entry.totalCost) * 100 : 0,
+                    Color: COST_COLORS[i % COST_COLORS.length]
+                };
+            }).filter(s => s.Value > 0);
+            return {
+                AgentName: entry.name,
+                AgentID: agentId,
+                TotalCost: entry.totalCost,
+                Segments: segments
+            };
+        });
+    }
+    buildRecentRuns() {
+        // Count prompt runs per agent run
+        const promptCountMap = new Map();
+        for (const pr of this.promptRuns) {
+            if (pr.AgentRunID) {
+                promptCountMap.set(pr.AgentRunID, (promptCountMap.get(pr.AgentRunID) ?? 0) + 1);
+            }
+        }
+        this.RecentRuns = this.agentRuns.slice(0, 100).map(r => ({
+            ID: r.ID,
+            Agent: r.Agent ?? 'Unknown',
+            Status: r.Status,
+            StatusClass: this.getStatusClass(r.Status),
+            StepCount: promptCountMap.get(r.ID) ?? 0,
+            Duration: this.formatDuration(r.StartedAt, r.CompletedAt),
+            Cost: this.FormatCurrency(r.TotalCost ?? 0),
+            Time: this.formatRelativeTime(r.StartedAt)
+        }));
+    }
+    sortRecentRuns() {
+        const dir = this.SortDir === 'asc' ? 1 : -1;
+        this.RecentRuns.sort((a, b) => {
+            switch (this.SortField) {
+                case 'Agent': return dir * a.Agent.localeCompare(b.Agent);
+                case 'Status': return dir * a.Status.localeCompare(b.Status);
+                case 'StepCount': return dir * (a.StepCount - b.StepCount);
+                case 'Duration': return dir * a.Duration.localeCompare(b.Duration);
+                case 'Cost': return dir * a.Cost.localeCompare(b.Cost);
+                case 'Time': return dir * a.Time.localeCompare(b.Time);
+                default: return 0;
+            }
+        });
+    }
+    // ── Helpers ──
+    buildDateFilter(field) {
+        const now = new Date();
+        const ms = this.timeRangeToMs(this.TimeRange);
+        const start = new Date(now.getTime() - ms);
+        return `${field} >= '${start.toISOString()}'`;
+    }
+    buildAgentFilter() {
+        if (this.Filters.Agents.length === 0)
+            return '';
+        const ids = this.Filters.Agents.map(id => `'${id}'`).join(',');
+        return `AgentID IN (${ids})`;
+    }
+    buildStatusFilter() {
+        if (this.Filters.Statuses.length === 0)
+            return '';
+        const values = this.Filters.Statuses.map(s => `'${s}'`).join(',');
+        return `Status IN (${values})`;
+    }
+    timeRangeToMs(range) {
+        const map = {
+            '1h': 3600000,
+            '6h': 21600000,
+            '24h': 86400000,
+            '7d': 604800000,
+            '30d': 2592000000
+        };
+        return map[range] ?? 604800000;
+    }
+    getStatusClass(status) {
+        return 'status-pill status-' + status.toLowerCase().replace(/\s+/g, '');
+    }
+    formatDuration(startStr, endStr) {
+        if (!endStr)
+            return '--';
+        const ms = new Date(endStr).getTime() - new Date(startStr).getTime();
+        if (ms < 1000)
+            return ms + 'ms';
+        if (ms < 60000)
+            return (ms / 1000).toFixed(1) + 's';
+        return (ms / 60000).toFixed(1) + 'm';
+    }
+    formatRelativeTime(dateStr) {
+        const now = Date.now();
+        const then = new Date(dateStr).getTime();
+        const diffMs = now - then;
+        const diffMin = Math.floor(diffMs / 60000);
+        if (diffMin < 1)
+            return 'just now';
+        if (diffMin < 60)
+            return diffMin + 'm ago';
+        const diffHr = Math.floor(diffMin / 60);
+        if (diffHr < 24)
+            return diffHr + 'h ago';
+        const diffDay = Math.floor(diffHr / 24);
+        return diffDay + 'd ago';
+    }
+    static ɵfac = function AnalyticsAgentRunsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AnalyticsAgentRunsComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsAgentRunsComponent, selectors: [["app-analytics-agent-runs"]], inputs: { TimeRange: "TimeRange", Filters: "Filters" }, outputs: { TimeRangeChange: "TimeRangeChange", FiltersChange: "FiltersChange" }, standalone: false, decls: 3, vars: 9, consts: [[3, "TimeRangeChange", "FiltersChange", "TimeRange", "Filters", "ShowModelFilter", "ShowPromptFilter", "ShowAgentFilter", "ShowStatusFilter", "ShowCompareToggle", "ShowExportButton"], [1, "loading-container"], ["text", "Loading agent runs..."], [1, "stats-grid"], [1, "stat-card", "accent-brand"], [1, "stat-label"], [1, "stat-value"], [1, "stat-card"], [1, "stat-card", "accent-success"], [1, "panel"], [1, "panel-header"], [1, "panel-header__title"], [1, "fa-solid", "fa-chart-bar", "panel-header__icon"], [1, "panel-body"], [1, "panel-empty"], [1, "attribution-row"], [1, "legend-row"], [1, "fa-solid", "fa-list", "panel-header__icon"], [1, "panel-header__subtitle"], [1, "table-wrapper"], [1, "data-table"], [1, "sortable-header", 3, "sorted"], [1, "attribution-name", 3, "title"], [1, "attribution-bar-container"], [1, "attribution-segment", 3, "width", "background", "title"], [1, "attribution-total"], [1, "attribution-segment", 3, "title"], [1, "legend-item"], [1, "legend-swatch"], [1, "sortable-header", 3, "click"], [3, "class"], [1, "empty-row"], [1, "cell-agent"], [1, "status-pill"], [1, "cell-numeric"], [1, "cell-time"]], template: function AnalyticsAgentRunsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-analytics-filter-bar", 0);
+            i0.ɵɵlistener("TimeRangeChange", function AnalyticsAgentRunsComponent_Template_app_analytics_filter_bar_TimeRangeChange_0_listener($event) { return ctx.OnTimeRangeChange($event); })("FiltersChange", function AnalyticsAgentRunsComponent_Template_app_analytics_filter_bar_FiltersChange_0_listener($event) { return ctx.OnFiltersChange($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(1, AnalyticsAgentRunsComponent_Conditional_1_Template, 2, 0, "div", 1)(2, AnalyticsAgentRunsComponent_Conditional_2_Template, 62, 20);
+        } if (rf & 2) {
+            i0.ɵɵproperty("TimeRange", ctx.TimeRange)("Filters", ctx.globalFilters)("ShowModelFilter", false)("ShowPromptFilter", false)("ShowAgentFilter", true)("ShowStatusFilter", true)("ShowCompareToggle", false)("ShowExportButton", false);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsLoading ? 1 : 2);
+        } }, dependencies: [i1.LoadingComponent, i2.AnalyticsFilterBarComponent, i3.DecimalPipe], styles: ["[_nghost-%COMP%] { display: block; }\n\n        .loading-container[_ngcontent-%COMP%] {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        \n\n        .stats-grid[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n            gap: 12px;\n            margin: 16px 0;\n        }\n\n        .stat-card[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 10px;\n            padding: 14px 16px;\n            text-align: center;\n            border-top: 3px solid var(--mj-border-subtle);\n            transition: transform 0.2s ease, box-shadow 0.2s ease;\n        }\n\n        .stat-card[_ngcontent-%COMP%]:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n        }\n\n        .stat-card.accent-brand[_ngcontent-%COMP%] { border-top-color: var(--mj-brand-primary); }\n        .stat-card.accent-success[_ngcontent-%COMP%] { border-top-color: var(--mj-status-success); }\n        .stat-card.accent-warning[_ngcontent-%COMP%] { border-top-color: var(--mj-status-warning); }\n\n        .stat-label[_ngcontent-%COMP%] {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            margin-bottom: 4px;\n        }\n\n        .stat-value[_ngcontent-%COMP%] {\n            font-size: 22px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n            letter-spacing: -0.02em;\n        }\n\n        \n\n        .panel[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            margin-bottom: 16px;\n            overflow: hidden;\n        }\n\n        .panel-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 14px 18px;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .panel-header__title[_ngcontent-%COMP%] {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .panel-header__icon[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: var(--mj-brand-primary);\n        }\n\n        .panel-header__subtitle[_ngcontent-%COMP%] {\n            font-size: 12px;\n            color: var(--mj-text-muted);\n        }\n\n        .panel-body[_ngcontent-%COMP%] {\n            padding: 16px 18px;\n        }\n\n        .panel-empty[_ngcontent-%COMP%] {\n            text-align: center;\n            padding: 24px;\n            color: var(--mj-text-disabled);\n            font-size: 13px;\n        }\n\n        \n\n        .attribution-row[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 8px 0;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .attribution-row[_ngcontent-%COMP%]:last-of-type {\n            border-bottom: none;\n        }\n\n        .attribution-name[_ngcontent-%COMP%] {\n            width: 140px;\n            min-width: 140px;\n            font-size: 13px;\n            font-weight: 500;\n            color: var(--mj-text-primary);\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .attribution-bar-container[_ngcontent-%COMP%] {\n            flex: 1;\n            display: flex;\n            height: 24px;\n            border-radius: 6px;\n            overflow: hidden;\n            background: var(--mj-bg-surface-sunken);\n        }\n\n        .attribution-segment[_ngcontent-%COMP%] {\n            height: 100%;\n            min-width: 2px;\n            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .attribution-total[_ngcontent-%COMP%] {\n            width: 80px;\n            min-width: 80px;\n            text-align: right;\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            font-variant-numeric: tabular-nums;\n        }\n\n        .legend-row[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 16px;\n            padding: 12px 0 4px;\n            flex-wrap: wrap;\n        }\n\n        .legend-item[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            font-size: 11px;\n            color: var(--mj-text-muted);\n        }\n\n        .legend-swatch[_ngcontent-%COMP%] {\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n            flex-shrink: 0;\n        }\n\n        \n\n        .table-wrapper[_ngcontent-%COMP%] {\n            overflow-x: auto;\n        }\n\n        .data-table[_ngcontent-%COMP%] {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 13px;\n        }\n\n        .data-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .data-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n            padding: 10px 14px;\n            text-align: left;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .data-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.4px;\n            background: var(--mj-bg-surface-card);\n            position: sticky;\n            top: 0;\n        }\n\n        .sortable-header[_ngcontent-%COMP%] {\n            cursor: pointer;\n            user-select: none;\n            white-space: nowrap;\n            transition: color 0.15s;\n        }\n\n        .sortable-header[_ngcontent-%COMP%]:hover {\n            color: var(--mj-brand-primary);\n        }\n\n        .sortable-header.sorted[_ngcontent-%COMP%] {\n            color: var(--mj-brand-primary);\n        }\n\n        .sortable-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            margin-left: 4px;\n            font-size: 10px;\n        }\n\n        .data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n            transition: background 0.15s;\n        }\n\n        .data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n        }\n\n        .cell-agent[_ngcontent-%COMP%] {\n            font-weight: 500;\n            color: var(--mj-text-primary);\n            max-width: 200px;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .cell-numeric[_ngcontent-%COMP%] {\n            text-align: right;\n            font-variant-numeric: tabular-nums;\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-time[_ngcontent-%COMP%] {\n            white-space: nowrap;\n            color: var(--mj-text-muted);\n            font-size: 12px;\n        }\n\n        .empty-row[_ngcontent-%COMP%] {\n            text-align: center;\n            color: var(--mj-text-disabled);\n            padding: 24px;\n        }\n\n        \n\n        .status-pill[_ngcontent-%COMP%] {\n            display: inline-block;\n            padding: 3px 10px;\n            border-radius: 12px;\n            font-size: 11px;\n            font-weight: 600;\n            letter-spacing: 0.3px;\n        }\n\n        .status-completed[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n            color: var(--mj-status-success);\n        }\n\n        .status-running[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n        }\n\n        .status-failed[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n            color: var(--mj-status-error);\n        }\n\n        .status-cancelled[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n            color: var(--mj-status-warning);\n        }\n\n        .status-paused[_ngcontent-%COMP%], .status-awaitingfeedback[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-text-disabled) 12%, var(--mj-bg-surface));\n            color: var(--mj-text-muted);\n        }\n\n        \n\n        @media (max-width: 1200px) {\n            .stats-grid[_ngcontent-%COMP%] {\n                grid-template-columns: repeat(3, 1fr);\n            }\n        }\n\n        @media (max-width: 768px) {\n            .stats-grid[_ngcontent-%COMP%] {\n                grid-template-columns: repeat(2, 1fr);\n            }\n\n            .attribution-name[_ngcontent-%COMP%] {\n                width: 100px;\n                min-width: 100px;\n            }\n\n            .attribution-total[_ngcontent-%COMP%] {\n                width: 60px;\n                min-width: 60px;\n            }\n\n            .stat-value[_ngcontent-%COMP%] {\n                font-size: 18px;\n            }\n        }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AnalyticsAgentRunsComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'app-analytics-agent-runs', template: `
+        <!-- Filter Bar -->
+        <app-analytics-filter-bar
+            [TimeRange]="TimeRange"
+            [Filters]="globalFilters"
+            [ShowModelFilter]="false"
+            [ShowPromptFilter]="false"
+            [ShowAgentFilter]="true"
+            [ShowStatusFilter]="true"
+            [ShowCompareToggle]="false"
+            [ShowExportButton]="false"
+            (TimeRangeChange)="OnTimeRangeChange($event)"
+            (FiltersChange)="OnFiltersChange($event)"
+        ></app-analytics-filter-bar>
+
+        @if (IsLoading) {
+            <div class="loading-container">
+                <mj-loading text="Loading agent runs..."></mj-loading>
+            </div>
+        } @else {
+            <!-- Stats Bar -->
+            <div class="stats-grid">
+                <div class="stat-card accent-brand">
+                    <div class="stat-label">Total Runs</div>
+                    <div class="stat-value">{{ Stats.TotalRuns | number }}</div>
+                </div>
+                <div class="stat-card accent-brand">
+                    <div class="stat-label">Total Cost</div>
+                    <div class="stat-value">{{ FormatCurrency(Stats.TotalCost) }}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-label">Prompt Runs</div>
+                    <div class="stat-value">{{ Stats.PromptRuns | number }}</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-label">Avg Cost/Run</div>
+                    <div class="stat-value">{{ FormatCurrency(Stats.AvgCostPerRun, 4) }}</div>
+                </div>
+                <div class="stat-card accent-success">
+                    <div class="stat-label">Success Rate</div>
+                    <div class="stat-value">{{ Stats.SuccessRate | number:'1.1-1' }}%</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-label">Avg Duration</div>
+                    <div class="stat-value">{{ Stats.AvgDurationSeconds | number:'1.1-1' }}s</div>
+                </div>
+            </div>
+
+            <!-- Cost Attribution Panel -->
+            <div class="panel">
+                <div class="panel-header">
+                    <div class="panel-header__title">
+                        <i class="fa-solid fa-chart-bar panel-header__icon"></i>
+                        Cost Attribution by Agent
+                    </div>
+                </div>
+                <div class="panel-body">
+                    @if (CostAttributionRows.length === 0) {
+                        <div class="panel-empty">No agent cost data for selected period</div>
+                    }
+                    @for (row of CostAttributionRows; track row.AgentID) {
+                        <div class="attribution-row">
+                            <div class="attribution-name" [title]="row.AgentName">{{ row.AgentName }}</div>
+                            <div class="attribution-bar-container">
+                                @for (seg of row.Segments; track seg.Label) {
+                                    <div
+                                        class="attribution-segment"
+                                        [style.width.%]="seg.Percent"
+                                        [style.background]="seg.Color"
+                                        [title]="seg.Label + ': ' + FormatCurrency(seg.Value, 4)"
+                                    ></div>
+                                }
+                            </div>
+                            <div class="attribution-total">{{ FormatCurrency(row.TotalCost) }}</div>
+                        </div>
+                    }
+                    @if (CostAttributionRows.length > 0) {
+                        <div class="legend-row">
+                            @for (item of LegendItems; track item.Label) {
+                                <div class="legend-item">
+                                    <span class="legend-swatch" [style.background]="item.Color"></span>
+                                    {{ item.Label }}
+                                </div>
+                            }
+                        </div>
+                    }
+                </div>
+            </div>
+
+            <!-- Recent Agent Runs Table -->
+            <div class="panel">
+                <div class="panel-header">
+                    <div class="panel-header__title">
+                        <i class="fa-solid fa-list panel-header__icon"></i>
+                        Recent Agent Runs
+                    </div>
+                    <span class="panel-header__subtitle">{{ RecentRuns.length }} runs</span>
+                </div>
+                <div class="table-wrapper">
+                    <table class="data-table">
+                        <thead>
+                            <tr>
+                                @for (col of TableColumns; track col.field) {
+                                    <th
+                                        class="sortable-header"
+                                        [class.sorted]="SortField === col.field"
+                                        (click)="OnSort(col.field)">
+                                        {{ col.label }}
+                                        @if (SortField === col.field) {
+                                            <i [class]="SortDir === 'asc' ? 'fa-solid fa-caret-up' : 'fa-solid fa-caret-down'"></i>
+                                        }
+                                    </th>
+                                }
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @if (RecentRuns.length === 0) {
+                                <tr><td [attr.colspan]="TableColumns.length" class="empty-row">No runs found</td></tr>
+                            }
+                            @for (run of RecentRuns; track run.ID) {
+                                <tr>
+                                    <td class="cell-agent">{{ run.Agent }}</td>
+                                    <td><span class="status-pill" [class]="run.StatusClass">{{ run.Status }}</span></td>
+                                    <td class="cell-numeric">{{ run.StepCount }}</td>
+                                    <td class="cell-numeric">{{ run.Duration }}</td>
+                                    <td class="cell-numeric">{{ run.Cost }}</td>
+                                    <td class="cell-time">{{ run.Time }}</td>
+                                </tr>
+                            }
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        }
+    `, styles: ["\n        :host { display: block; }\n\n        .loading-container {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        /* \u2500\u2500 Stats Grid \u2500\u2500 */\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n            gap: 12px;\n            margin: 16px 0;\n        }\n\n        .stat-card {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 10px;\n            padding: 14px 16px;\n            text-align: center;\n            border-top: 3px solid var(--mj-border-subtle);\n            transition: transform 0.2s ease, box-shadow 0.2s ease;\n        }\n\n        .stat-card:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n        }\n\n        .stat-card.accent-brand { border-top-color: var(--mj-brand-primary); }\n        .stat-card.accent-success { border-top-color: var(--mj-status-success); }\n        .stat-card.accent-warning { border-top-color: var(--mj-status-warning); }\n\n        .stat-label {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            margin-bottom: 4px;\n        }\n\n        .stat-value {\n            font-size: 22px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n            letter-spacing: -0.02em;\n        }\n\n        /* \u2500\u2500 Panel \u2500\u2500 */\n        .panel {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            margin-bottom: 16px;\n            overflow: hidden;\n        }\n\n        .panel-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 14px 18px;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .panel-header__title {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .panel-header__icon {\n            font-size: 13px;\n            color: var(--mj-brand-primary);\n        }\n\n        .panel-header__subtitle {\n            font-size: 12px;\n            color: var(--mj-text-muted);\n        }\n\n        .panel-body {\n            padding: 16px 18px;\n        }\n\n        .panel-empty {\n            text-align: center;\n            padding: 24px;\n            color: var(--mj-text-disabled);\n            font-size: 13px;\n        }\n\n        /* \u2500\u2500 Cost Attribution \u2500\u2500 */\n        .attribution-row {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 8px 0;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .attribution-row:last-of-type {\n            border-bottom: none;\n        }\n\n        .attribution-name {\n            width: 140px;\n            min-width: 140px;\n            font-size: 13px;\n            font-weight: 500;\n            color: var(--mj-text-primary);\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .attribution-bar-container {\n            flex: 1;\n            display: flex;\n            height: 24px;\n            border-radius: 6px;\n            overflow: hidden;\n            background: var(--mj-bg-surface-sunken);\n        }\n\n        .attribution-segment {\n            height: 100%;\n            min-width: 2px;\n            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .attribution-total {\n            width: 80px;\n            min-width: 80px;\n            text-align: right;\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            font-variant-numeric: tabular-nums;\n        }\n\n        .legend-row {\n            display: flex;\n            gap: 16px;\n            padding: 12px 0 4px;\n            flex-wrap: wrap;\n        }\n\n        .legend-item {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            font-size: 11px;\n            color: var(--mj-text-muted);\n        }\n\n        .legend-swatch {\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n            flex-shrink: 0;\n        }\n\n        /* \u2500\u2500 Table \u2500\u2500 */\n        .table-wrapper {\n            overflow-x: auto;\n        }\n\n        .data-table {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 13px;\n        }\n\n        .data-table th,\n        .data-table td {\n            padding: 10px 14px;\n            text-align: left;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .data-table th {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.4px;\n            background: var(--mj-bg-surface-card);\n            position: sticky;\n            top: 0;\n        }\n\n        .sortable-header {\n            cursor: pointer;\n            user-select: none;\n            white-space: nowrap;\n            transition: color 0.15s;\n        }\n\n        .sortable-header:hover {\n            color: var(--mj-brand-primary);\n        }\n\n        .sortable-header.sorted {\n            color: var(--mj-brand-primary);\n        }\n\n        .sortable-header i {\n            margin-left: 4px;\n            font-size: 10px;\n        }\n\n        .data-table tbody tr {\n            transition: background 0.15s;\n        }\n\n        .data-table tbody tr:hover {\n            background: var(--mj-bg-surface-hover);\n        }\n\n        .cell-agent {\n            font-weight: 500;\n            color: var(--mj-text-primary);\n            max-width: 200px;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .cell-numeric {\n            text-align: right;\n            font-variant-numeric: tabular-nums;\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-time {\n            white-space: nowrap;\n            color: var(--mj-text-muted);\n            font-size: 12px;\n        }\n\n        .empty-row {\n            text-align: center;\n            color: var(--mj-text-disabled);\n            padding: 24px;\n        }\n\n        /* \u2500\u2500 Status Pills \u2500\u2500 */\n        .status-pill {\n            display: inline-block;\n            padding: 3px 10px;\n            border-radius: 12px;\n            font-size: 11px;\n            font-weight: 600;\n            letter-spacing: 0.3px;\n        }\n\n        .status-completed {\n            background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n            color: var(--mj-status-success);\n        }\n\n        .status-running {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n        }\n\n        .status-failed {\n            background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n            color: var(--mj-status-error);\n        }\n\n        .status-cancelled {\n            background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n            color: var(--mj-status-warning);\n        }\n\n        .status-paused, .status-awaitingfeedback {\n            background: color-mix(in srgb, var(--mj-text-disabled) 12%, var(--mj-bg-surface));\n            color: var(--mj-text-muted);\n        }\n\n        /* \u2500\u2500 Responsive \u2500\u2500 */\n        @media (max-width: 1200px) {\n            .stats-grid {\n                grid-template-columns: repeat(3, 1fr);\n            }\n        }\n\n        @media (max-width: 768px) {\n            .stats-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n\n            .attribution-name {\n                width: 100px;\n                min-width: 100px;\n            }\n\n            .attribution-total {\n                width: 60px;\n                min-width: 60px;\n            }\n\n            .stat-value {\n                font-size: 18px;\n            }\n        }\n    "] }]
+    }], null, { TimeRange: [{
+            type: Input
+        }], Filters: [{
+            type: Input
+        }], TimeRangeChange: [{
+            type: Output
+        }], FiltersChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsAgentRunsComponent, { className: "AnalyticsAgentRunsComponent", filePath: "src/AI/components/analytics/agent-runs/agent-run-analysis.component.ts", lineNumber: 556 }); })();
+export function LoadAnalyticsAgentRuns() { }
+//# sourceMappingURL=agent-run-analysis.component.js.map