@memberjunction/ng-core-entity-forms 2.111.1 → 2.112.0

package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js

@@ -1,6 +1,6 @@
-import { Component, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ViewChild, ChangeDetectionStrategy, } from '@angular/core';
 import { Subject } from 'rxjs';
-import { RunView } from '@memberjunction/core';
+import { RunView } from '@memberjunction/global';
 import * as d3 from 'd3';
 import * as i0 from "@angular/core";
 import * as i1 from "./ai-agent-run-cost.service";
@@ -791,7 +791,7 @@ export class AIAgentRunAnalyticsComponent {
             promptCost: false,
             promptCount: false,
             actionSuccess: false,
-            stepType: false
+            stepType: false,
         };
         this.viewMode = 'grid';
         // Loading state
@@ -816,7 +816,7 @@ export class AIAgentRunAnalyticsComponent {
             prompts: true,
             actions: true,
             models: true,
-            timeline: true
+            timeline: true,
         };
     }
     ngOnInit() {
@@ -829,7 +829,7 @@ export class AIAgentRunAnalyticsComponent {
         this.destroy$.next();
         this.destroy$.complete();
         // Clear all active timeouts
-        this.activeTimeouts.forEach(timeoutId => {
+        this.activeTimeouts.forEach((timeoutId) => {
             clearTimeout(timeoutId);
         });
         this.activeTimeouts.length = 0;
@@ -849,31 +849,54 @@ export class AIAgentRunAnalyticsComponent {
             this.promptTimeDistributionChart,
             this.promptTokenDistributionChart,
             this.promptCostDistributionChart,
-            this.promptCountByNameChart
+            this.promptCountByNameChart,
         ];
         // More comprehensive D3 cleanup
-        chartRefs.forEach(chartRef => {
+        chartRefs.forEach((chartRef) => {
             if (chartRef?.nativeElement) {
                 const element = chartRef.nativeElement;
                 const d3Element = d3.select(element);
                 // Remove ALL possible event listeners (comprehensive list)
                 const allEventTypes = [
-                    'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout',
-                    'mousemove', 'mouseenter', 'mouseleave', 'contextmenu',
-                    'touchstart', 'touchend', 'touchmove', 'touchcancel',
-                    'wheel', 'scroll', 'resize', 'focus', 'blur',
-                    'keydown', 'keyup', 'keypress',
-                    'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'
+                    'click',
+                    'dblclick',
+                    'mousedown',
+                    'mouseup',
+                    'mouseover',
+                    'mouseout',
+                    'mousemove',
+                    'mouseenter',
+                    'mouseleave',
+                    'contextmenu',
+                    'touchstart',
+                    'touchend',
+                    'touchmove',
+                    'touchcancel',
+                    'wheel',
+                    'scroll',
+                    'resize',
+                    'focus',
+                    'blur',
+                    'keydown',
+                    'keyup',
+                    'keypress',
+                    'drag',
+                    'dragstart',
+                    'dragend',
+                    'dragover',
+                    'dragenter',
+                    'dragleave',
+                    'drop',
                 ];
                 // Remove event listeners from all child elements
                 d3Element.selectAll('*').each(function () {
                     const node = d3.select(this);
-                    allEventTypes.forEach(eventType => {
+                    allEventTypes.forEach((eventType) => {
                         node.on(eventType, null);
                     });
                 });
                 // Remove event listeners from the main element too
-                allEventTypes.forEach(eventType => {
+                allEventTypes.forEach((eventType) => {
                     d3Element.on(eventType, null);
                 });
                 // Cancel any ongoing transitions
@@ -952,7 +975,7 @@ export class AIAgentRunAnalyticsComponent {
             {
                 EntityName: 'MJ: AI Agent Run Steps',
                 ExtraFilter: `AgentRunID IN ('${agentRunIds.join("','")}')`,
-            }
+            },
         ]);
         // Process results
         if (results[0].Success && results[0].Results && results[0].Results.length > 0) {
@@ -967,13 +990,11 @@ export class AIAgentRunAnalyticsComponent {
             const actionSteps = results[2].Results || [];
             // Now load the actual action logs
             if (actionSteps.length > 0) {
-                const actionLogIds = actionSteps
-                    .map(s => s.TargetLogID)
-                    .filter(id => id != null);
+                const actionLogIds = actionSteps.map((s) => s.TargetLogID).filter((id) => id != null);
                 if (actionLogIds.length > 0) {
                     const actionResult = await rv.RunView({
                         EntityName: 'Action Execution Logs',
-                        ExtraFilter: `ID IN ('${actionLogIds.join("','")}')`
+                        ExtraFilter: `ID IN ('${actionLogIds.join("','")}')`,
                     });
                     if (actionResult.Success) {
                         this.allActionLogs = actionResult.Results || [];
@@ -995,7 +1016,7 @@ export class AIAgentRunAnalyticsComponent {
             byPrompt: new Map(),
             statusBreakdown: { success: 0, failed: 0, timeout: 0 },
             costBreakdown: { totalCost: 0, byModel: new Map(), byVendor: new Map() },
-            tokenUsage: { totalInput: 0, totalOutput: 0, byModel: new Map() }
+            tokenUsage: { totalInput: 0, totalOutput: 0, byModel: new Map() },
         };
     }
     initializeActionMetrics() {
@@ -1006,7 +1027,7 @@ export class AIAgentRunAnalyticsComponent {
             byAction: new Map(),
             byType: new Map(),
             statusBreakdown: { success: 0, failed: 0, timeout: 0 },
-            errorAnalysis: new Map()
+            errorAnalysis: new Map(),
         };
     }
     initializeTimelineMetrics() {
@@ -1015,7 +1036,7 @@ export class AIAgentRunAnalyticsComponent {
             stepsByType: new Map(),
             parallelExecutions: 0,
             deepestNesting: 0,
-            criticalPath: { steps: [], totalTime: 0 }
+            criticalPath: { steps: [], totalTime: 0 },
         };
     }
     calculatePromptMetrics() {
@@ -1094,7 +1115,7 @@ export class AIAgentRunAnalyticsComponent {
             actionMetric.avgTime = actionMetric.totalTime / actionMetric.count;
             // Track success rate
             if (actionLog.ResultCode === 'Success') {
-                const successCount = (actionMetric.successRate * (actionMetric.count - 1) + 1);
+                const successCount = actionMetric.successRate * (actionMetric.count - 1) + 1;
                 actionMetric.successRate = successCount / actionMetric.count;
             }
             else {
@@ -1153,29 +1174,35 @@ export class AIAgentRunAnalyticsComponent {
         // Model distribution pie chart
         this.modelDistributionChartData = {
             labels: Array.from(this.promptMetrics.byModel.keys()),
-            datasets: [{
-                    data: Array.from(this.promptMetrics.byModel.values()).map(m => m.count),
-                    backgroundColor: this.generateColors(this.promptMetrics.byModel.size)
-                }]
+            datasets: [
+                {
+                    data: Array.from(this.promptMetrics.byModel.values()).map((m) => m.count),
+                    backgroundColor: this.generateColors(this.promptMetrics.byModel.size),
+                },
+            ],
         };
         // Execution time by vendor bar chart
         this.executionTimeChartData = {
             labels: Array.from(this.promptMetrics.byVendor.keys()),
-            datasets: [{
+            datasets: [
+                {
                     label: 'Average Execution Time (ms)',
-                    data: Array.from(this.promptMetrics.byVendor.values()).map(v => v.avgTime),
+                    data: Array.from(this.promptMetrics.byVendor.values()).map((v) => v.avgTime),
                     backgroundColor: 'rgba(54, 162, 235, 0.5)',
                     borderColor: 'rgba(54, 162, 235, 1)',
-                    borderWidth: 1
-                }]
+                    borderWidth: 1,
+                },
+            ],
         };
         // Cost by vendor doughnut chart
         this.costByVendorChartData = {
             labels: Array.from(this.promptMetrics.costBreakdown.byVendor.keys()),
-            datasets: [{
+            datasets: [
+                {
                     data: Array.from(this.promptMetrics.costBreakdown.byVendor.values()),
-                    backgroundColor: this.generateColors(this.promptMetrics.costBreakdown.byVendor.size)
-                }]
+                    backgroundColor: this.generateColors(this.promptMetrics.costBreakdown.byVendor.size),
+                },
+            ],
         };
         // Token usage stacked bar chart
         const tokenModels = Array.from(this.promptMetrics.tokenUsage.byModel.keys());
@@ -1184,34 +1211,38 @@ export class AIAgentRunAnalyticsComponent {
             datasets: [
                 {
                     label: 'Input Tokens',
-                    data: tokenModels.map(m => this.promptMetrics.tokenUsage.byModel.get(m)?.input || 0),
-                    backgroundColor: 'rgba(255, 99, 132, 0.5)'
+                    data: tokenModels.map((m) => this.promptMetrics.tokenUsage.byModel.get(m)?.input || 0),
+                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                 },
                 {
                     label: 'Output Tokens',
-                    data: tokenModels.map(m => this.promptMetrics.tokenUsage.byModel.get(m)?.output || 0),
-                    backgroundColor: 'rgba(75, 192, 192, 0.5)'
-                }
-            ]
+                    data: tokenModels.map((m) => this.promptMetrics.tokenUsage.byModel.get(m)?.output || 0),
+                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                },
+            ],
         };
         // Action success rate bar chart
         this.actionSuccessRateChartData = {
             labels: Array.from(this.actionMetrics.byAction.keys()),
-            datasets: [{
+            datasets: [
+                {
                     label: 'Success Rate (%)',
-                    data: Array.from(this.actionMetrics.byAction.values()).map(a => a.successRate * 100),
+                    data: Array.from(this.actionMetrics.byAction.values()).map((a) => a.successRate * 100),
                     backgroundColor: 'rgba(75, 192, 192, 0.5)',
                     borderColor: 'rgba(75, 192, 192, 1)',
-                    borderWidth: 1
-                }]
+                    borderWidth: 1,
+                },
+            ],
         };
         // Step type distribution pie chart
         this.stepTypeDistributionChartData = {
             labels: Array.from(this.timelineMetrics.stepsByType.keys()),
-            datasets: [{
+            datasets: [
+                {
                     data: Array.from(this.timelineMetrics.stepsByType.values()),
-                    backgroundColor: this.generateColors(this.timelineMetrics.stepsByType.size)
-                }]
+                    backgroundColor: this.generateColors(this.timelineMetrics.stepsByType.size),
+                },
+            ],
         };
     }
     generateColors(count) {
@@ -1225,7 +1256,7 @@ export class AIAgentRunAnalyticsComponent {
             'rgba(199, 199, 199, 0.5)',
             'rgba(83, 102, 255, 0.5)',
             'rgba(255, 99, 255, 0.5)',
-            'rgba(99, 255, 132, 0.5)'
+            'rgba(99, 255, 132, 0.5)',
         ];
         // Repeat colors if needed
         const result = [];
@@ -1272,7 +1303,7 @@ export class AIAgentRunAnalyticsComponent {
         const element = this.modelDistributionChart.nativeElement;
         const data = Array.from(this.promptMetrics.byModel.entries()).map(([name, metrics]) => ({
             name,
-            value: metrics.count
+            value: metrics.count,
         }));
         if (data.length === 0)
             return;
@@ -1282,37 +1313,37 @@ export class AIAgentRunAnalyticsComponent {
         const width = isExpanded ? 500 : 300;
         const height = isExpanded ? 400 : 220;
         const radius = Math.min(width, height) / 2 - 40;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width)
             .attr('height', height)
             .append('g')
             .attr('transform', `translate(${width / 2}, ${height / 2})`);
         const color = d3.scaleOrdinal(d3.schemeCategory10);
-        const pie = d3.pie()
-            .value(d => d.value)
+        const pie = d3
+            .pie()
+            .value((d) => d.value)
             .sort(null);
-        const arc = d3.arc()
-            .innerRadius(0)
-            .outerRadius(radius);
-        const arcs = svg.selectAll('arc')
-            .data(pie(data))
-            .enter()
-            .append('g');
-        arcs.append('path')
+        const arc = d3.arc().innerRadius(0).outerRadius(radius);
+        const arcs = svg.selectAll('arc').data(pie(data)).enter().append('g');
+        arcs
+            .append('path')
             .attr('d', arc)
             .attr('fill', (d, i) => color(i.toString()))
             .attr('stroke', 'white')
             .style('stroke-width', '2px');
         // Add labels
-        arcs.append('text')
+        arcs
+            .append('text')
             .attr('transform', (d) => `translate(${arc.centroid(d)})`)
             .attr('text-anchor', 'middle')
             .style('font-size', '12px')
             .style('fill', 'white')
-            .text((d) => d.data.value > 0 ? d.data.value : '');
+            .text((d) => (d.data.value > 0 ? d.data.value : ''));
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', 0)
             .attr('y', -radius - 25)
             .attr('text-anchor', 'middle')
@@ -1324,7 +1355,7 @@ export class AIAgentRunAnalyticsComponent {
         const element = this.executionTimeChart.nativeElement;
         const data = Array.from(this.promptMetrics.byVendor.entries()).map(([name, metrics]) => ({
             name,
-            value: metrics.avgTime
+            value: metrics.avgTime,
         }));
         if (data.length === 0)
             return;
@@ -1334,41 +1365,47 @@ export class AIAgentRunAnalyticsComponent {
         const margin = { top: 40, right: 20, bottom: 70, left: 60 };
         const width = (isExpanded ? 600 : 320) - margin.left - margin.right;
         const height = (isExpanded ? 350 : 200) - margin.top - margin.bottom;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width + margin.left + margin.right)
             .attr('height', height + margin.top + margin.bottom)
             .append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
-        const x = d3.scaleBand()
+        const x = d3
+            .scaleBand()
             .range([0, width])
-            .domain(data.map(d => d.name))
+            .domain(data.map((d) => d.name))
             .padding(0.1);
-        const y = d3.scaleLinear()
-            .domain([0, d3.max(data, d => d.value) || 0])
+        const y = d3
+            .scaleLinear()
+            .domain([0, d3.max(data, (d) => d.value) || 0])
             .range([height, 0]);
         // Add bars
-        svg.selectAll('.bar')
+        svg
+            .selectAll('.bar')
             .data(data)
-            .enter().append('rect')
+            .enter()
+            .append('rect')
             .attr('class', 'bar')
-            .attr('x', d => x(d.name) || 0)
+            .attr('x', (d) => x(d.name) || 0)
             .attr('width', x.bandwidth())
-            .attr('y', d => y(d.value))
-            .attr('height', d => height - y(d.value))
+            .attr('y', (d) => y(d.value))
+            .attr('height', (d) => height - y(d.value))
             .attr('fill', '#36a2eb');
         // Add x axis
-        svg.append('g')
+        svg
+            .append('g')
             .attr('transform', `translate(0,${height})`)
             .call(d3.axisBottom(x))
             .selectAll('text')
             .attr('transform', 'rotate(-45)')
             .style('text-anchor', 'end');
         // Add y axis
-        svg.append('g')
-            .call(d3.axisLeft(y).tickFormat(d => `${d}ms`));
+        svg.append('g').call(d3.axisLeft(y).tickFormat((d) => `${d}ms`));
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', width / 2)
             .attr('y', -20)
             .attr('text-anchor', 'middle')
@@ -1380,7 +1417,7 @@ export class AIAgentRunAnalyticsComponent {
         const element = this.costByVendorChart.nativeElement;
         const data = Array.from(this.promptMetrics.costBreakdown.byVendor.entries()).map(([name, cost]) => ({
             name,
-            value: cost
+            value: cost,
         }));
         if (data.length === 0)
             return;
@@ -1389,30 +1426,32 @@ export class AIAgentRunAnalyticsComponent {
         const width = 300;
         const height = 220;
         const radius = Math.min(width, height) / 2 - 40;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width)
             .attr('height', height)
             .append('g')
             .attr('transform', `translate(${width / 2}, ${height / 2})`);
         const color = d3.scaleOrdinal(d3.schemeSet2);
-        const pie = d3.pie()
-            .value(d => d.value)
+        const pie = d3
+            .pie()
+            .value((d) => d.value)
             .sort(null);
-        const arc = d3.arc()
+        const arc = d3
+            .arc()
             .innerRadius(radius * 0.5) // Doughnut chart
             .outerRadius(radius);
-        const arcs = svg.selectAll('arc')
-            .data(pie(data))
-            .enter()
-            .append('g');
-        arcs.append('path')
+        const arcs = svg.selectAll('arc').data(pie(data)).enter().append('g');
+        arcs
+            .append('path')
             .attr('d', arc)
             .attr('fill', (d, i) => color(i.toString()))
             .attr('stroke', 'white')
             .style('stroke-width', '2px');
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', 0)
             .attr('y', -radius - 25)
             .attr('text-anchor', 'middle')
@@ -1423,15 +1462,15 @@ export class AIAgentRunAnalyticsComponent {
     renderTokenUsageChart() {
         const element = this.tokenUsageChart.nativeElement;
         const models = Array.from(this.promptMetrics.tokenUsage.byModel.keys());
-        const inputData = models.map(model => ({
+        const inputData = models.map((model) => ({
             model,
             type: 'Input',
-            value: this.promptMetrics.tokenUsage.byModel.get(model)?.input || 0
+            value: this.promptMetrics.tokenUsage.byModel.get(model)?.input || 0,
         }));
-        const outputData = models.map(model => ({
+        const outputData = models.map((model) => ({
             model,
             type: 'Output',
-            value: this.promptMetrics.tokenUsage.byModel.get(model)?.output || 0
+            value: this.promptMetrics.tokenUsage.byModel.get(model)?.output || 0,
         }));
         const data = [...inputData, ...outputData];
         if (data.length === 0)
@@ -1441,71 +1480,73 @@ export class AIAgentRunAnalyticsComponent {
         const margin = { top: 40, right: 100, bottom: 70, left: 60 };
         const width = 320 - margin.left - margin.right;
         const height = 200 - margin.top - margin.bottom;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width + margin.left + margin.right)
             .attr('height', height + margin.top + margin.bottom)
             .append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
-        const x0 = d3.scaleBand()
-            .rangeRound([0, width])
-            .paddingInner(0.1)
-            .domain(models);
-        const x1 = d3.scaleBand()
-            .padding(0.05)
-            .domain(['Input', 'Output'])
-            .rangeRound([0, x0.bandwidth()]);
-        const y = d3.scaleLinear()
+        const x0 = d3.scaleBand().rangeRound([0, width]).paddingInner(0.1).domain(models);
+        const x1 = d3.scaleBand().padding(0.05).domain(['Input', 'Output']).rangeRound([0, x0.bandwidth()]);
+        const y = d3
+            .scaleLinear()
             .rangeRound([height, 0])
-            .domain([0, d3.max(data, d => d.value) || 0]);
-        const color = d3.scaleOrdinal()
-            .domain(['Input', 'Output'])
-            .range(['#ff6384', '#4bc0c0']);
-        const grouped = d3.group(data, d => d.model);
-        svg.append('g')
+            .domain([0, d3.max(data, (d) => d.value) || 0]);
+        const color = d3.scaleOrdinal().domain(['Input', 'Output']).range(['#ff6384', '#4bc0c0']);
+        const grouped = d3.group(data, (d) => d.model);
+        svg
+            .append('g')
             .selectAll('g')
             .data(grouped)
-            .enter().append('g')
-            .attr('transform', d => `translate(${x0(d[0]) || 0},0)`)
+            .enter()
+            .append('g')
+            .attr('transform', (d) => `translate(${x0(d[0]) || 0},0)`)
             .selectAll('rect')
-            .data(d => d[1])
-            .enter().append('rect')
-            .attr('x', d => x1(d.type) || 0)
-            .attr('y', d => y(d.value))
+            .data((d) => d[1])
+            .enter()
+            .append('rect')
+            .attr('x', (d) => x1(d.type) || 0)
+            .attr('y', (d) => y(d.value))
             .attr('width', x1.bandwidth())
-            .attr('height', d => height - y(d.value))
-            .attr('fill', d => color(d.type));
+            .attr('height', (d) => height - y(d.value))
+            .attr('fill', (d) => color(d.type));
         // Add x axis
-        svg.append('g')
+        svg
+            .append('g')
             .attr('transform', `translate(0,${height})`)
             .call(d3.axisBottom(x0))
             .selectAll('text')
             .attr('transform', 'rotate(-45)')
             .style('text-anchor', 'end');
         // Add y axis
-        svg.append('g')
-            .call(d3.axisLeft(y));
+        svg.append('g').call(d3.axisLeft(y));
         // Add legend
-        const legend = svg.append('g')
+        const legend = svg
+            .append('g')
             .attr('font-family', 'sans-serif')
             .attr('font-size', 10)
             .attr('text-anchor', 'end')
             .selectAll('g')
             .data(['Input', 'Output'])
-            .enter().append('g')
+            .enter()
+            .append('g')
             .attr('transform', (d, i) => `translate(0,${i * 20})`);
-        legend.append('rect')
+        legend
+            .append('rect')
             .attr('x', width + 70)
             .attr('width', 19)
             .attr('height', 19)
-            .attr('fill', d => color(d));
-        legend.append('text')
+            .attr('fill', (d) => color(d));
+        legend
+            .append('text')
             .attr('x', width + 65)
             .attr('y', 9.5)
             .attr('dy', '0.32em')
-            .text(d => d);
+            .text((d) => d);
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', width / 2)
             .attr('y', -20)
             .attr('text-anchor', 'middle')
@@ -1517,7 +1558,7 @@ export class AIAgentRunAnalyticsComponent {
         const element = this.actionSuccessRateChart.nativeElement;
         const data = Array.from(this.actionMetrics.byAction.entries()).map(([name, metrics]) => ({
             name,
-            value: metrics.successRate * 100
+            value: metrics.successRate * 100,
         }));
         if (data.length === 0)
             return;
@@ -1526,41 +1567,44 @@ export class AIAgentRunAnalyticsComponent {
         const margin = { top: 40, right: 20, bottom: 100, left: 60 };
         const width = 320 - margin.left - margin.right;
         const height = 200 - margin.top - margin.bottom;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width + margin.left + margin.right)
             .attr('height', height + margin.top + margin.bottom)
             .append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
-        const x = d3.scaleBand()
+        const x = d3
+            .scaleBand()
             .range([0, width])
-            .domain(data.map(d => d.name))
+            .domain(data.map((d) => d.name))
             .padding(0.1);
-        const y = d3.scaleLinear()
-            .domain([0, 100])
-            .range([height, 0]);
+        const y = d3.scaleLinear().domain([0, 100]).range([height, 0]);
         // Add bars with color based on success rate
-        svg.selectAll('.bar')
+        svg
+            .selectAll('.bar')
             .data(data)
-            .enter().append('rect')
+            .enter()
+            .append('rect')
             .attr('class', 'bar')
-            .attr('x', d => x(d.name) || 0)
+            .attr('x', (d) => x(d.name) || 0)
             .attr('width', x.bandwidth())
-            .attr('y', d => y(d.value))
-            .attr('height', d => height - y(d.value))
-            .attr('fill', d => d.value > 90 ? '#4bc0c0' : d.value > 70 ? '#ffce56' : '#ff6384');
+            .attr('y', (d) => y(d.value))
+            .attr('height', (d) => height - y(d.value))
+            .attr('fill', (d) => (d.value > 90 ? '#4bc0c0' : d.value > 70 ? '#ffce56' : '#ff6384'));
         // Add x axis
-        svg.append('g')
+        svg
+            .append('g')
             .attr('transform', `translate(0,${height})`)
             .call(d3.axisBottom(x))
             .selectAll('text')
             .attr('transform', 'rotate(-45)')
             .style('text-anchor', 'end');
         // Add y axis
-        svg.append('g')
-            .call(d3.axisLeft(y).tickFormat(d => `${d}%`));
+        svg.append('g').call(d3.axisLeft(y).tickFormat((d) => `${d}%`));
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', width / 2)
             .attr('y', -20)
             .attr('text-anchor', 'middle')
@@ -1572,7 +1616,7 @@ export class AIAgentRunAnalyticsComponent {
         const element = this.stepTypeChart.nativeElement;
         const data = Array.from(this.timelineMetrics.stepsByType.entries()).map(([name, value]) => ({
             name,
-            value
+            value,
         }));
         if (data.length === 0)
             return;
@@ -1581,30 +1625,29 @@ export class AIAgentRunAnalyticsComponent {
         const width = 300;
         const height = 220;
         const radius = Math.min(width, height) / 2 - 40;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width)
             .attr('height', height)
             .append('g')
             .attr('transform', `translate(${width / 2}, ${height / 2})`);
         const color = d3.scaleOrdinal(d3.schemeSet3);
-        const pie = d3.pie()
-            .value(d => d.value)
+        const pie = d3
+            .pie()
+            .value((d) => d.value)
             .sort(null);
-        const arc = d3.arc()
-            .innerRadius(0)
-            .outerRadius(radius);
-        const arcs = svg.selectAll('arc')
-            .data(pie(data))
-            .enter()
-            .append('g');
-        arcs.append('path')
+        const arc = d3.arc().innerRadius(0).outerRadius(radius);
+        const arcs = svg.selectAll('arc').data(pie(data)).enter().append('g');
+        arcs
+            .append('path')
             .attr('d', arc)
             .attr('fill', (d, i) => color(i.toString()))
             .attr('stroke', 'white')
             .style('stroke-width', '2px');
         // Add labels
-        arcs.append('text')
+        arcs
+            .append('text')
             .attr('transform', (d) => {
             const centroid = arc.centroid(d);
             return `translate(${centroid})`;
@@ -1612,9 +1655,10 @@ export class AIAgentRunAnalyticsComponent {
             .attr('text-anchor', 'middle')
             .style('font-size', '12px')
             .style('fill', 'white')
-            .text((d) => d.data.value > 0 ? d.data.value : '');
+            .text((d) => (d.data.value > 0 ? d.data.value : ''));
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', 0)
             .attr('y', -radius - 25)
             .attr('text-anchor', 'middle')
@@ -1623,8 +1667,8 @@ export class AIAgentRunAnalyticsComponent {
             .text('Step Type Distribution');
     }
     calculatePromptSuccessRate(promptName) {
-        const successfulRuns = this.allPromptRuns.filter(run => run.Prompt === promptName && run.Success === true).length;
-        const totalRuns = this.allPromptRuns.filter(run => run.Prompt === promptName).length;
+        const successfulRuns = this.allPromptRuns.filter((run) => run.Prompt === promptName && run.Success === true).length;
+        const totalRuns = this.allPromptRuns.filter((run) => run.Prompt === promptName).length;
         if (totalRuns === 0)
             return '0';
         return ((successfulRuns / totalRuns) * 100).toFixed(1);
@@ -1640,14 +1684,14 @@ export class AIAgentRunAnalyticsComponent {
         if (this.viewMode === 'grid') {
             this.viewMode = 'expanded';
             // Expand all charts
-            Object.keys(this.expandedCharts).forEach(key => {
+            Object.keys(this.expandedCharts).forEach((key) => {
                 this.expandedCharts[key] = true;
             });
         }
         else {
             this.viewMode = 'grid';
             // Collapse all charts
-            Object.keys(this.expandedCharts).forEach(key => {
+            Object.keys(this.expandedCharts).forEach((key) => {
                 this.expandedCharts[key] = false;
             });
         }
@@ -1693,7 +1737,7 @@ export class AIAgentRunAnalyticsComponent {
                     totalCost: 0,
                     avgCost: 0,
                     inputTokens: 0,
-                    outputTokens: 0
+                    outputTokens: 0,
                 });
             }
             const data = modelData.get(key);
@@ -1710,14 +1754,14 @@ export class AIAgentRunAnalyticsComponent {
     }
     getStepTypeIcon(stepType) {
         const iconMap = {
-            'Prompts': 'fa-microchip',
-            'Actions': 'fa-cog',
+            Prompts: 'fa-microchip',
+            Actions: 'fa-cog',
             'Sub-Agent': 'fa-robot',
-            'Start': 'fa-play-circle',
-            'End': 'fa-stop-circle',
-            'Decision': 'fa-code-branch',
-            'Loop': 'fa-sync',
-            'Error': 'fa-exclamation-triangle'
+            Start: 'fa-play-circle',
+            End: 'fa-stop-circle',
+            Decision: 'fa-code-branch',
+            Loop: 'fa-sync',
+            Error: 'fa-exclamation-triangle',
         };
         return iconMap[stepType] || 'fa-circle';
     }
@@ -1733,7 +1777,7 @@ export class AIAgentRunAnalyticsComponent {
             'rgba(199, 199, 199, 0.5)',
             'rgba(83, 102, 255, 0.5)',
             'rgba(255, 99, 255, 0.5)',
-            'rgba(99, 255, 132, 0.5)'
+            'rgba(99, 255, 132, 0.5)',
         ];
         // Use a simple hash of the model name to consistently pick a color
         let hash = 0;
@@ -1747,7 +1791,7 @@ export class AIAgentRunAnalyticsComponent {
         const data = Array.from(this.promptMetrics.byPrompt.entries())
             .map(([name, metrics]) => ({
             name: name.length > 20 ? name.substring(0, 20) + '...' : name,
-            value: metrics.avgTime
+            value: metrics.avgTime,
         }))
             .sort((a, b) => b.value - a.value)
             .slice(0, 10); // Top 10 prompts by avg time
@@ -1758,31 +1802,37 @@ export class AIAgentRunAnalyticsComponent {
         const margin = { top: 40, right: 20, bottom: 120, left: 80 };
         const width = 320 - margin.left - margin.right;
         const height = 200 - margin.top - margin.bottom;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width + margin.left + margin.right)
             .attr('height', height + margin.top + margin.bottom)
             .append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
-        const x = d3.scaleBand()
+        const x = d3
+            .scaleBand()
             .range([0, width])
-            .domain(data.map(d => d.name))
+            .domain(data.map((d) => d.name))
             .padding(0.1);
-        const y = d3.scaleLinear()
-            .domain([0, d3.max(data, d => d.value) || 0])
+        const y = d3
+            .scaleLinear()
+            .domain([0, d3.max(data, (d) => d.value) || 0])
             .range([height, 0]);
         // Add bars
-        svg.selectAll('.bar')
+        svg
+            .selectAll('.bar')
             .data(data)
-            .enter().append('rect')
+            .enter()
+            .append('rect')
             .attr('class', 'bar')
-            .attr('x', d => x(d.name) || 0)
+            .attr('x', (d) => x(d.name) || 0)
             .attr('width', x.bandwidth())
-            .attr('y', d => y(d.value))
-            .attr('height', d => height - y(d.value))
+            .attr('y', (d) => y(d.value))
+            .attr('height', (d) => height - y(d.value))
             .attr('fill', '#667eea');
         // Add x axis
-        svg.append('g')
+        svg
+            .append('g')
             .attr('transform', `translate(0,${height})`)
             .call(d3.axisBottom(x))
             .selectAll('text')
@@ -1790,10 +1840,10 @@ export class AIAgentRunAnalyticsComponent {
             .style('text-anchor', 'end')
             .style('font-size', '10px');
         // Add y axis
-        svg.append('g')
-            .call(d3.axisLeft(y).tickFormat(d => `${d}ms`));
+        svg.append('g').call(d3.axisLeft(y).tickFormat((d) => `${d}ms`));
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', width / 2)
             .attr('y', -20)
             .attr('text-anchor', 'middle')
@@ -1813,18 +1863,18 @@ export class AIAgentRunAnalyticsComponent {
             promptTokenData.set(promptName, existing);
         }
         const topPrompts = Array.from(promptTokenData.entries())
-            .sort((a, b) => (b[1].input + b[1].output) - (a[1].input + a[1].output))
+            .sort((a, b) => b[1].input + b[1].output - (a[1].input + a[1].output))
             .slice(0, 8)
             .map(([name]) => name);
-        const inputData = topPrompts.map(prompt => ({
+        const inputData = topPrompts.map((prompt) => ({
             prompt: prompt.length > 15 ? prompt.substring(0, 15) + '...' : prompt,
             type: 'Input',
-            value: promptTokenData.get(prompt)?.input || 0
+            value: promptTokenData.get(prompt)?.input || 0,
         }));
-        const outputData = topPrompts.map(prompt => ({
+        const outputData = topPrompts.map((prompt) => ({
             prompt: prompt.length > 15 ? prompt.substring(0, 15) + '...' : prompt,
             type: 'Output',
-            value: promptTokenData.get(prompt)?.output || 0
+            value: promptTokenData.get(prompt)?.output || 0,
         }));
         const data = [...inputData, ...outputData];
         if (data.length === 0)
@@ -1834,42 +1884,44 @@ export class AIAgentRunAnalyticsComponent {
         const margin = { top: 40, right: 100, bottom: 100, left: 80 };
         const width = 320 - margin.left - margin.right;
         const height = 200 - margin.top - margin.bottom;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width + margin.left + margin.right)
             .attr('height', height + margin.top + margin.bottom)
             .append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
-        const x0 = d3.scaleBand()
+        const x0 = d3
+            .scaleBand()
             .rangeRound([0, width])
             .paddingInner(0.1)
-            .domain(topPrompts.map(p => p.length > 15 ? p.substring(0, 15) + '...' : p));
-        const x1 = d3.scaleBand()
-            .padding(0.05)
-            .domain(['Input', 'Output'])
-            .rangeRound([0, x0.bandwidth()]);
-        const y = d3.scaleLinear()
+            .domain(topPrompts.map((p) => (p.length > 15 ? p.substring(0, 15) + '...' : p)));
+        const x1 = d3.scaleBand().padding(0.05).domain(['Input', 'Output']).rangeRound([0, x0.bandwidth()]);
+        const y = d3
+            .scaleLinear()
             .rangeRound([height, 0])
-            .domain([0, d3.max(data, d => d.value) || 0]);
-        const color = d3.scaleOrdinal()
-            .domain(['Input', 'Output'])
-            .range(['#764ba2', '#667eea']);
-        const grouped = d3.group(data, d => d.prompt);
-        svg.append('g')
+            .domain([0, d3.max(data, (d) => d.value) || 0]);
+        const color = d3.scaleOrdinal().domain(['Input', 'Output']).range(['#764ba2', '#667eea']);
+        const grouped = d3.group(data, (d) => d.prompt);
+        svg
+            .append('g')
             .selectAll('g')
             .data(grouped)
-            .enter().append('g')
-            .attr('transform', d => `translate(${x0(d[0]) || 0},0)`)
+            .enter()
+            .append('g')
+            .attr('transform', (d) => `translate(${x0(d[0]) || 0},0)`)
             .selectAll('rect')
-            .data(d => d[1])
-            .enter().append('rect')
-            .attr('x', d => x1(d.type) || 0)
-            .attr('y', d => y(d.value))
+            .data((d) => d[1])
+            .enter()
+            .append('rect')
+            .attr('x', (d) => x1(d.type) || 0)
+            .attr('y', (d) => y(d.value))
             .attr('width', x1.bandwidth())
-            .attr('height', d => height - y(d.value))
-            .attr('fill', d => color(d.type));
+            .attr('height', (d) => height - y(d.value))
+            .attr('fill', (d) => color(d.type));
         // Add x axis
-        svg.append('g')
+        svg
+            .append('g')
             .attr('transform', `translate(0,${height})`)
             .call(d3.axisBottom(x0))
             .selectAll('text')
@@ -1877,29 +1929,33 @@ export class AIAgentRunAnalyticsComponent {
             .style('text-anchor', 'end')
             .style('font-size', '10px');
         // Add y axis
-        svg.append('g')
-            .call(d3.axisLeft(y).tickFormat(d => d3.format('.2s')(d)));
+        svg.append('g').call(d3.axisLeft(y).tickFormat((d) => d3.format('.2s')(d)));
         // Add legend
-        const legend = svg.append('g')
+        const legend = svg
+            .append('g')
             .attr('font-family', 'sans-serif')
             .attr('font-size', 10)
             .attr('text-anchor', 'end')
             .selectAll('g')
             .data(['Input', 'Output'])
-            .enter().append('g')
+            .enter()
+            .append('g')
             .attr('transform', (d, i) => `translate(0,${i * 20})`);
-        legend.append('rect')
+        legend
+            .append('rect')
             .attr('x', width + 70)
             .attr('width', 19)
             .attr('height', 19)
-            .attr('fill', d => color(d));
-        legend.append('text')
+            .attr('fill', (d) => color(d));
+        legend
+            .append('text')
             .attr('x', width + 65)
             .attr('y', 9.5)
             .attr('dy', '0.32em')
-            .text(d => d);
+            .text((d) => d);
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', width / 2)
             .attr('y', -20)
             .attr('text-anchor', 'middle')
@@ -1920,7 +1976,7 @@ export class AIAgentRunAnalyticsComponent {
             .filter(([_, cost]) => cost > 0)
             .map(([name, cost]) => ({
             name: name.length > 20 ? name.substring(0, 20) + '...' : name,
-            value: cost
+            value: cost,
         }))
             .sort((a, b) => b.value - a.value)
             .slice(0, 10); // Top 10 prompts by cost
@@ -1931,30 +1987,32 @@ export class AIAgentRunAnalyticsComponent {
         const width = 300;
         const height = 220;
         const radius = Math.min(width, height) / 2 - 40;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width)
             .attr('height', height)
             .append('g')
             .attr('transform', `translate(${width / 2}, ${height / 2})`);
         const color = d3.scaleOrdinal(d3.schemePurples[9].slice(2));
-        const pie = d3.pie()
-            .value(d => d.value)
+        const pie = d3
+            .pie()
+            .value((d) => d.value)
             .sort((a, b) => b.value - a.value);
-        const arc = d3.arc()
+        const arc = d3
+            .arc()
             .innerRadius(radius * 0.5)
             .outerRadius(radius);
-        const arcs = svg.selectAll('arc')
-            .data(pie(data))
-            .enter()
-            .append('g');
-        arcs.append('path')
+        const arcs = svg.selectAll('arc').data(pie(data)).enter().append('g');
+        arcs
+            .append('path')
             .attr('d', arc)
             .attr('fill', (d, i) => color(i.toString()))
             .attr('stroke', 'white')
             .style('stroke-width', '2px');
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', 0)
             .attr('y', -radius - 25)
             .attr('text-anchor', 'middle')
@@ -1962,13 +2020,15 @@ export class AIAgentRunAnalyticsComponent {
             .style('font-weight', 'bold')
             .text('Cost Distribution by Prompt');
         // Add total cost in center
-        svg.append('text')
+        svg
+            .append('text')
             .attr('text-anchor', 'middle')
             .attr('dy', '-0.5em')
             .style('font-size', '14px')
             .style('font-weight', 'bold')
             .text('Total Cost');
-        svg.append('text')
+        svg
+            .append('text')
             .attr('text-anchor', 'middle')
             .attr('dy', '1em')
             .style('font-size', '18px')
@@ -1980,7 +2040,7 @@ export class AIAgentRunAnalyticsComponent {
         const data = Array.from(this.promptMetrics.byPrompt.entries())
             .map(([name, metrics]) => ({
             name: name.length > 20 ? name.substring(0, 20) + '...' : name,
-            value: metrics.count
+            value: metrics.count,
         }))
             .sort((a, b) => b.value - a.value)
             .slice(0, 10); // Top 10 prompts by count
@@ -1991,58 +2051,61 @@ export class AIAgentRunAnalyticsComponent {
         const margin = { top: 40, right: 20, bottom: 120, left: 60 };
         const width = 320 - margin.left - margin.right;
         const height = 200 - margin.top - margin.bottom;
-        const svg = d3.select(element)
+        const svg = d3
+            .select(element)
             .append('svg')
             .attr('width', width + margin.left + margin.right)
             .attr('height', height + margin.top + margin.bottom)
             .append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
-        const x = d3.scaleBand()
+        const x = d3
+            .scaleBand()
             .range([0, width])
-            .domain(data.map(d => d.name))
+            .domain(data.map((d) => d.name))
             .padding(0.1);
-        const y = d3.scaleLinear()
-            .domain([0, d3.max(data, d => d.value) || 0])
+        const y = d3
+            .scaleLinear()
+            .domain([0, d3.max(data, (d) => d.value) || 0])
             .range([height, 0]);
         // Create gradient
-        const gradient = svg.append('defs')
+        const gradient = svg
+            .append('defs')
             .append('linearGradient')
             .attr('id', 'promptCountGradient')
             .attr('x1', '0%')
             .attr('y1', '0%')
             .attr('x2', '0%')
             .attr('y2', '100%');
-        gradient.append('stop')
-            .attr('offset', '0%')
-            .attr('stop-color', '#667eea')
-            .attr('stop-opacity', 1);
-        gradient.append('stop')
-            .attr('offset', '100%')
-            .attr('stop-color', '#764ba2')
-            .attr('stop-opacity', 1);
+        gradient.append('stop').attr('offset', '0%').attr('stop-color', '#667eea').attr('stop-opacity', 1);
+        gradient.append('stop').attr('offset', '100%').attr('stop-color', '#764ba2').attr('stop-opacity', 1);
         // Add bars
-        svg.selectAll('.bar')
+        svg
+            .selectAll('.bar')
             .data(data)
-            .enter().append('rect')
+            .enter()
+            .append('rect')
             .attr('class', 'bar')
-            .attr('x', d => x(d.name) || 0)
+            .attr('x', (d) => x(d.name) || 0)
             .attr('width', x.bandwidth())
-            .attr('y', d => y(d.value))
-            .attr('height', d => height - y(d.value))
+            .attr('y', (d) => y(d.value))
+            .attr('height', (d) => height - y(d.value))
             .attr('fill', 'url(#promptCountGradient)');
         // Add value labels on bars
-        svg.selectAll('.bar-label')
+        svg
+            .selectAll('.bar-label')
             .data(data)
-            .enter().append('text')
+            .enter()
+            .append('text')
             .attr('class', 'bar-label')
-            .attr('x', d => (x(d.name) || 0) + x.bandwidth() / 2)
-            .attr('y', d => y(d.value) - 5)
+            .attr('x', (d) => (x(d.name) || 0) + x.bandwidth() / 2)
+            .attr('y', (d) => y(d.value) - 5)
             .attr('text-anchor', 'middle')
             .style('font-size', '12px')
             .style('font-weight', 'bold')
-            .text(d => d.value);
+            .text((d) => d.value);
         // Add x axis
-        svg.append('g')
+        svg
+            .append('g')
             .attr('transform', `translate(0,${height})`)
             .call(d3.axisBottom(x))
             .selectAll('text')
@@ -2050,10 +2113,10 @@ export class AIAgentRunAnalyticsComponent {
             .style('text-anchor', 'end')
             .style('font-size', '10px');
         // Add y axis
-        svg.append('g')
-            .call(d3.axisLeft(y));
+        svg.append('g').call(d3.axisLeft(y));
         // Add title
-        svg.append('text')
+        svg
+            .append('text')
             .attr('x', width / 2)
             .attr('y', -20)
             .attr('text-anchor', 'middle')
@@ -2097,15 +2160,13 @@ export class AIAgentRunAnalyticsComponent {
         const stepsResult = await rv.RunView({
             EntityName: 'MJ: AI Agent Run Steps',
             ExtraFilter: `AgentRunID IN ('${agentRunIds.join("','")}') AND StepType = 'Prompt'`,
-            ResultType: 'simple'
+            ResultType: 'simple',
         });
         if (!stepsResult.Success || !stepsResult.Results || stepsResult.Results.length === 0) {
             return [];
         }
         // Extract the TargetLogID values (these are the prompt run IDs)
-        const promptRunIds = stepsResult.Results
-            .map(step => step.TargetLogID)
-            .filter(id => id); // Remove any null/undefined values
+        const promptRunIds = stepsResult.Results.map((step) => step.TargetLogID).filter((id) => id); // Remove any null/undefined values
         if (promptRunIds.length === 0) {
             return [];
         }
@@ -2114,9 +2175,9 @@ export class AIAgentRunAnalyticsComponent {
             EntityName: 'MJ: AI Prompt Runs',
             ExtraFilter: `ID IN ('${promptRunIds.join("','")}')`,
             OrderBy: 'RunAt',
-            ResultType: 'simple'
+            ResultType: 'simple',
         });
-        return promptResult.Success ? (promptResult.Results || []) : [];
+        return promptResult.Success ? promptResult.Results || [] : [];
     }
     /**
      * TrackBy function for keyvalue pipe
@@ -2209,5 +2270,5 @@ export class AIAgentRunAnalyticsComponent {
             type: ViewChild,
             args: ['promptCountByNameChart', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunAnalyticsComponent, { className: "AIAgentRunAnalyticsComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-analytics.component.ts", lineNumber: 69 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunAnalyticsComponent, { className: "AIAgentRunAnalyticsComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-analytics.component.ts", lineNumber: 79 }); })();
 //# sourceMappingURL=ai-agent-run-analytics.component.js.map