bmad-elsabro 1.0.0

package/renderer/components/TokenAnalytics.tsx

@@ -0,0 +1,607 @@
+/**
+ * TokenAnalytics Component
+ *
+ * Comprehensive analytics dashboard for historical token usage trends.
+ * Displays charts and statistics for token consumption across modes, workflows, and time periods.
+ *
+ * Features:
+ * - Time series line chart for daily usage trends
+ * - Mode distribution donut chart
+ * - Workflow usage bar chart
+ * - Summary statistics with trends
+ * - Date range selector
+ * - Period grouping (day/week/month)
+ * - Dark/light theme support
+ * - Export analytics data
+ *
+ * @module renderer/components/TokenAnalytics
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+  formatNumber,
+  formatCompactNumber,
+  formatCurrency,
+  formatDate,
+  formatPercentage,
+  calculatePercentageChange,
+  dateDataToTimeSeries,
+  generateLineChartPath,
+  generateBarChart,
+  generateDonutChart,
+  getModeColor,
+  generateGradientColors,
+  groupByPeriod,
+  ChartDataPoint,
+  TimeSeriesPoint,
+} from '../lib/chart-utils';
+
+/**
+ * Analytics data structure
+ */
+export interface AnalyticsData {
+  total_tokens: number;
+  total_cost: number;
+  by_mode: Record<string, { tokens: number; count: number }>;
+  by_workflow: Record<string, { tokens: number; count: number }>;
+  by_date: Record<string, { tokens: number; count: number }>;
+}
+
+/**
+ * Date range preset
+ */
+type DateRangePreset = 'today' | '7days' | '30days' | '90days' | 'all' | 'custom';
+
+/**
+ * Period grouping option
+ */
+type PeriodGrouping = 'day' | 'week' | 'month';
+
+/**
+ * Props for TokenAnalytics component
+ */
+export interface TokenAnalyticsProps {
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+
+  /**
+   * Initial date range preset
+   * @default '30days'
+   */
+  defaultRange?: DateRangePreset;
+
+  /**
+   * Callback when date range changes
+   */
+  onDateRangeChange?: (startTime: number, endTime: number) => void;
+}
+
+/**
+ * Calculate date range from preset
+ */
+function getDateRangeFromPreset(preset: DateRangePreset): { start: number; end: number } {
+  const now = Date.now();
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  switch (preset) {
+    case 'today':
+      return { start: today.getTime(), end: now };
+    case '7days':
+      return { start: now - 7 * 24 * 60 * 60 * 1000, end: now };
+    case '30days':
+      return { start: now - 30 * 24 * 60 * 60 * 1000, end: now };
+    case '90days':
+      return { start: now - 90 * 24 * 60 * 60 * 1000, end: now };
+    case 'all':
+      return { start: 0, end: now };
+    default:
+      return { start: now - 30 * 24 * 60 * 60 * 1000, end: now };
+  }
+}
+
+/**
+ * TokenAnalytics Component
+ *
+ * Displays comprehensive analytics dashboard for token usage
+ *
+ * @example
+ * ```tsx
+ * <TokenAnalytics defaultRange="30days" />
+ * ```
+ */
+export const TokenAnalytics: React.FC<TokenAnalyticsProps> = ({
+  className = '',
+  defaultRange = '30days',
+  onDateRangeChange,
+}) => {
+  const [dateRange, setDateRange] = useState<DateRangePreset>(defaultRange);
+  const [periodGrouping, setPeriodGrouping] = useState<PeriodGrouping>('day');
+  const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [previousData, setPreviousData] = useState<AnalyticsData | null>(null);
+
+  /**
+   * Fetch analytics data from IPC
+   */
+  useEffect(() => {
+    const fetchAnalytics = async () => {
+      setIsLoading(true);
+
+      try {
+        const { start, end } = getDateRangeFromPreset(dateRange);
+
+        // Fetch current period data
+        const data = await window.electron.token.getAnalytics(start, end);
+        setAnalyticsData(data);
+
+        // Fetch previous period data for comparison
+        const periodLength = end - start;
+        const previousStart = start - periodLength;
+        const previousEnd = start;
+        const prevData = await window.electron.token.getAnalytics(previousStart, previousEnd);
+        setPreviousData(prevData);
+
+        // Notify parent component
+        if (onDateRangeChange) {
+          onDateRangeChange(start, end);
+        }
+      } catch (error) {
+        console.error('[TokenAnalytics] Failed to fetch analytics:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchAnalytics();
+  }, [dateRange, onDateRangeChange]);
+
+  /**
+   * Process time series data
+   */
+  const timeSeriesData = useMemo<TimeSeriesPoint[]>(() => {
+    if (!analyticsData?.by_date) return [];
+
+    const series = dateDataToTimeSeries(analyticsData.by_date);
+    return groupByPeriod(series, periodGrouping);
+  }, [analyticsData, periodGrouping]);
+
+  /**
+   * Process mode distribution data
+   */
+  const modeDistribution = useMemo<ChartDataPoint[]>(() => {
+    if (!analyticsData?.by_mode) return [];
+
+    return Object.entries(analyticsData.by_mode).map(([mode, data]) => ({
+      label: mode,
+      value: data.tokens,
+      color: getModeColor(mode),
+      metadata: { count: data.count },
+    }));
+  }, [analyticsData]);
+
+  /**
+   * Process workflow distribution data
+   */
+  const workflowDistribution = useMemo<ChartDataPoint[]>(() => {
+    if (!analyticsData?.by_workflow) return [];
+
+    const entries = Object.entries(analyticsData.by_workflow)
+      .sort((a, b) => b[1].tokens - a[1].tokens)
+      .slice(0, 10); // Top 10 workflows
+
+    const colors = generateGradientColors(entries.length);
+
+    return entries.map(([workflow, data], index) => ({
+      label: workflow,
+      value: data.tokens,
+      color: colors[index],
+      metadata: { count: data.count },
+    }));
+  }, [analyticsData]);
+
+  /**
+   * Calculate percentage change from previous period
+   */
+  const tokensTrend = useMemo(() => {
+    if (!analyticsData || !previousData) return null;
+    return calculatePercentageChange(analyticsData.total_tokens, previousData.total_tokens);
+  }, [analyticsData, previousData]);
+
+  /**
+   * Calculate cost trend
+   */
+  const costTrend = useMemo(() => {
+    if (!analyticsData || !previousData) return null;
+    return calculatePercentageChange(analyticsData.total_cost, previousData.total_cost);
+  }, [analyticsData, previousData]);
+
+  /**
+   * Generate line chart
+   */
+  const lineChart = useMemo(() => {
+    return generateLineChartPath(timeSeriesData, 600, 200, { smooth: true });
+  }, [timeSeriesData]);
+
+  /**
+   * Generate donut chart for modes
+   */
+  const donutChart = useMemo(() => {
+    return generateDonutChart(modeDistribution, {
+      radius: 80,
+      innerRadius: 50,
+    });
+  }, [modeDistribution]);
+
+  /**
+   * Generate bar chart for workflows
+   */
+  const barChart = useMemo(() => {
+    return generateBarChart(workflowDistribution, 150);
+  }, [workflowDistribution]);
+
+  /**
+   * Handle date range change
+   */
+  const handleDateRangeChange = (preset: DateRangePreset) => {
+    setDateRange(preset);
+  };
+
+  /**
+   * Handle export analytics
+   */
+  const handleExport = () => {
+    if (!analyticsData) return;
+
+    const exportData = {
+      dateRange: getDateRangeFromPreset(dateRange),
+      analytics: analyticsData,
+      exportedAt: new Date().toISOString(),
+    };
+
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `token-analytics-${dateRange}-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  if (isLoading) {
+    return (
+      <div className={`flex items-center justify-center h-full ${className}`}>
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
+          <p className="text-gray-600 dark:text-gray-400">Loading analytics...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!analyticsData) {
+    return (
+      <div className={`flex items-center justify-center h-full ${className}`}>
+        <div className="text-center">
+          <p className="text-gray-600 dark:text-gray-400">No analytics data available</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`h-full overflow-y-auto bg-gray-50 dark:bg-gray-900 ${className}`}>
+      <div className="max-w-7xl mx-auto p-6">
+        {/* Header */}
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+            Token Analytics
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            Historical usage trends and insights
+          </p>
+        </div>
+
+        {/* Controls */}
+        <div className="mb-6 flex flex-wrap items-center gap-4">
+          {/* Date Range Selector */}
+          <div className="flex items-center gap-2 bg-white dark:bg-gray-800 rounded-lg p-1 border border-gray-200 dark:border-gray-700">
+            {(['today', '7days', '30days', '90days', 'all'] as DateRangePreset[]).map((preset) => {
+              const labels = {
+                today: 'Today',
+                '7days': '7 Days',
+                '30days': '30 Days',
+                '90days': '90 Days',
+                all: 'All Time',
+              };
+
+              return (
+                <button
+                  key={preset}
+                  onClick={() => handleDateRangeChange(preset)}
+                  className={`
+                    px-3 py-1.5 text-sm rounded-md transition-colors
+                    ${
+                      dateRange === preset
+                        ? 'bg-blue-500 text-white'
+                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                    }
+                  `}
+                >
+                  {labels[preset]}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Period Grouping */}
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-600 dark:text-gray-400">Group by:</span>
+            <select
+              value={periodGrouping}
+              onChange={(e) => setPeriodGrouping(e.target.value as PeriodGrouping)}
+              className="px-3 py-1.5 text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-gray-900 dark:text-white"
+            >
+              <option value="day">Day</option>
+              <option value="week">Week</option>
+              <option value="month">Month</option>
+            </select>
+          </div>
+
+          {/* Export Button */}
+          <button
+            onClick={handleExport}
+            className="ml-auto px-4 py-1.5 text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+          >
+            📊 Export
+          </button>
+        </div>
+
+        {/* Summary Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+          {/* Total Tokens */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+            <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Tokens</div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+              {formatCompactNumber(analyticsData.total_tokens)}
+            </div>
+            {tokensTrend !== null && (
+              <div
+                className={`text-sm ${
+                  tokensTrend > 0
+                    ? 'text-red-600 dark:text-red-400'
+                    : tokensTrend < 0
+                    ? 'text-green-600 dark:text-green-400'
+                    : 'text-gray-600 dark:text-gray-400'
+                }`}
+              >
+                {formatPercentage(tokensTrend)} vs previous period
+              </div>
+            )}
+          </div>
+
+          {/* Total Cost */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+            <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Estimated Cost</div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+              {formatCurrency(analyticsData.total_cost)}
+            </div>
+            {costTrend !== null && (
+              <div
+                className={`text-sm ${
+                  costTrend > 0
+                    ? 'text-red-600 dark:text-red-400'
+                    : costTrend < 0
+                    ? 'text-green-600 dark:text-green-400'
+                    : 'text-gray-600 dark:text-gray-400'
+                }`}
+              >
+                {formatPercentage(costTrend)} vs previous period
+              </div>
+            )}
+          </div>
+
+          {/* Operations Count */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+            <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Operations</div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+              {formatNumber(
+                Object.values(analyticsData.by_mode).reduce((sum, m) => sum + m.count, 0)
+              )}
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">
+              Avg: {formatCompactNumber(
+                analyticsData.total_tokens /
+                  Object.values(analyticsData.by_mode).reduce((sum, m) => sum + m.count, 0) || 0
+              )} tokens/op
+            </div>
+          </div>
+        </div>
+
+        {/* Charts Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+          {/* Time Series Chart */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 lg:col-span-2">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              Token Usage Over Time
+            </h2>
+            {timeSeriesData.length > 0 ? (
+              <div className="relative">
+                <svg viewBox="0 0 600 220" className="w-full h-auto">
+                  {/* Grid lines */}
+                  <g className="stroke-gray-200 dark:stroke-gray-700" strokeWidth="1">
+                    {[0, 1, 2, 3, 4].map((i) => (
+                      <line
+                        key={i}
+                        x1="20"
+                        y1={20 + i * 50}
+                        x2="580"
+                        y2={20 + i * 50}
+                        strokeDasharray="4 4"
+                        opacity="0.5"
+                      />
+                    ))}
+                  </g>
+
+                  {/* Line */}
+                  <path
+                    d={lineChart.path}
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    className="text-blue-500"
+                  />
+
+                  {/* Points */}
+                  {lineChart.points.map((point, index) => (
+                    <g key={index}>
+                      <circle
+                        cx={point.x}
+                        cy={point.y}
+                        r="4"
+                        fill="currentColor"
+                        className="text-blue-500"
+                      />
+                      {timeSeriesData[index] && (
+                        <title>
+                          {formatDate(timeSeriesData[index].date)}:{' '}
+                          {formatNumber(timeSeriesData[index].value)} tokens
+                        </title>
+                      )}
+                    </g>
+                  ))}
+
+                  {/* Y-axis labels */}
+                  <g className="text-xs fill-gray-600 dark:fill-gray-400">
+                    {[0, 1, 2, 3, 4].map((i) => {
+                      const value =
+                        lineChart.maxValue - (i / 4) * (lineChart.maxValue - lineChart.minValue);
+                      return (
+                        <text key={i} x="5" y={25 + i * 50} textAnchor="start">
+                          {formatCompactNumber(value)}
+                        </text>
+                      );
+                    })}
+                  </g>
+                </svg>
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                No data available for this period
+              </div>
+            )}
+          </div>
+
+          {/* Mode Distribution */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              Mode Distribution
+            </h2>
+            {donutChart.length > 0 ? (
+              <div className="flex items-center gap-6">
+                <svg viewBox="0 0 200 200" className="w-48 h-48 flex-shrink-0">
+                  {donutChart.map((segment, index) => (
+                    <path
+                      key={index}
+                      d={segment.path}
+                      fill={segment.color}
+                      className="hover:opacity-80 transition-opacity cursor-pointer"
+                    >
+                      <title>
+                        {segment.label}: {formatNumber(segment.value)} tokens (
+                        {segment.percentage.toFixed(1)}%)
+                      </title>
+                    </path>
+                  ))}
+                  <text
+                    x="100"
+                    y="100"
+                    textAnchor="middle"
+                    className="text-2xl font-bold fill-gray-900 dark:fill-white"
+                  >
+                    {formatCompactNumber(analyticsData.total_tokens)}
+                  </text>
+                  <text
+                    x="100"
+                    y="115"
+                    textAnchor="middle"
+                    className="text-xs fill-gray-600 dark:fill-gray-400"
+                  >
+                    tokens
+                  </text>
+                </svg>
+
+                <div className="flex-1 space-y-2">
+                  {donutChart.map((segment, index) => (
+                    <div key={index} className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <div
+                          className="w-3 h-3 rounded-full"
+                          style={{ backgroundColor: segment.color }}
+                        />
+                        <span className="text-sm text-gray-700 dark:text-gray-300 capitalize">
+                          {segment.label}
+                        </span>
+                      </div>
+                      <div className="text-sm font-medium text-gray-900 dark:text-white">
+                        {segment.percentage.toFixed(1)}%
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                No mode data available
+              </div>
+            )}
+          </div>
+
+          {/* Workflow Distribution */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              Top Workflows
+            </h2>
+            {barChart.bars.length > 0 ? (
+              <div className="space-y-3">
+                {barChart.bars.map((bar, index) => (
+                  <div key={index}>
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="text-sm text-gray-700 dark:text-gray-300 truncate max-w-[60%]">
+                        {bar.label || 'Unknown'}
+                      </span>
+                      <span className="text-sm font-medium text-gray-900 dark:text-white">
+                        {formatCompactNumber(bar.value)}
+                      </span>
+                    </div>
+                    <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
+                      <div
+                        className="h-full rounded-full transition-all duration-300"
+                        style={{
+                          width: `${(bar.height / 150) * 100}%`,
+                          backgroundColor: bar.color,
+                        }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                No workflow data available
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+TokenAnalytics.displayName = 'TokenAnalytics';
+
+export default TokenAnalytics;