@memberjunction/ng-core-entity-forms 2.112.0 → 2.113.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/global';
+import { RunView } from '@memberjunction/core';
 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,54 +849,31 @@ 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
@@ -975,7 +952,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) {
@@ -990,11 +967,13 @@ 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 || [];
@@ -1016,7 +995,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() {
@@ -1027,7 +1006,7 @@ export class AIAgentRunAnalyticsComponent {
             byAction: new Map(),
             byType: new Map(),
             statusBreakdown: { success: 0, failed: 0, timeout: 0 },
-            errorAnalysis: new Map(),
+            errorAnalysis: new Map()
         };
     }
     initializeTimelineMetrics() {
@@ -1036,7 +1015,7 @@ export class AIAgentRunAnalyticsComponent {
             stepsByType: new Map(),
             parallelExecutions: 0,
             deepestNesting: 0,
-            criticalPath: { steps: [], totalTime: 0 },
+            criticalPath: { steps: [], totalTime: 0 }
         };
     }
     calculatePromptMetrics() {
@@ -1115,7 +1094,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 {
@@ -1174,35 +1153,29 @@ 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());
@@ -1211,38 +1184,34 @@ 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) {
@@ -1256,7 +1225,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 = [];
@@ -1303,7 +1272,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;
@@ -1313,37 +1282,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')
@@ -1355,7 +1324,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;
@@ -1365,47 +1334,41 @@ 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')
@@ -1417,7 +1380,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;
@@ -1426,32 +1389,30 @@ 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')
@@ -1462,15 +1423,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)
@@ -1480,73 +1441,71 @@ 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')
@@ -1558,7 +1517,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;
@@ -1567,44 +1526,41 @@ 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')
@@ -1616,7 +1572,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;
@@ -1625,29 +1581,30 @@ 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})`;
@@ -1655,10 +1612,9 @@ 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')
@@ -1667,8 +1623,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);
@@ -1684,14 +1640,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;
             });
         }
@@ -1737,7 +1693,7 @@ export class AIAgentRunAnalyticsComponent {
                     totalCost: 0,
                     avgCost: 0,
                     inputTokens: 0,
-                    outputTokens: 0,
+                    outputTokens: 0
                 });
             }
             const data = modelData.get(key);
@@ -1754,14 +1710,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';
     }
@@ -1777,7 +1733,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;
@@ -1791,7 +1747,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
@@ -1802,37 +1758,31 @@ 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')
@@ -1840,10 +1790,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')
@@ -1863,18 +1813,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)
@@ -1884,44 +1834,42 @@ 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')
@@ -1929,33 +1877,29 @@ 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')
@@ -1976,7 +1920,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
@@ -1987,32 +1931,30 @@ 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')
@@ -2020,15 +1962,13 @@ 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')
@@ -2040,7 +1980,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
@@ -2051,61 +1991,58 @@ 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')
@@ -2113,10 +2050,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')
@@ -2160,13 +2097,15 @@ 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 [];
         }
@@ -2175,9 +2114,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
@@ -2270,5 +2209,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: 79 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunAnalyticsComponent, { className: "AIAgentRunAnalyticsComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-analytics.component.ts", lineNumber: 69 }); })();
 //# sourceMappingURL=ai-agent-run-analytics.component.js.map