@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/shared/dashboard/src/components/usage/usage-colors.ts

@@ -0,0 +1,292 @@
+/**
+ * Usage Dashboard Color System
+ *
+ * Consistent, accessible color palette for resource types.
+ * Part of task-18: Usage Dashboard Interactive Chart & Table Enhancement
+ *
+ * Each resource type has light and dark mode variants optimised for:
+ * - WCAG 2.1 AA contrast on backgrounds
+ * - Visual distinction between resource types
+ * - Consistency with the existing design token system
+ */
+
+/**
+ * Resource type identifiers matching DailyCostBreakdown keys
+ */
+export type ResourceType =
+  | 'workers'
+  | 'd1'
+  | 'kv'
+  | 'r2'
+  | 'vectorize'
+  | 'aiGateway'
+  | 'durableObjects'
+  | 'workersAI'
+  | 'queues';
+
+/**
+ * Theme-aware color definition
+ */
+export interface ResourceColor {
+  light: {
+    fill: string;
+    fillHover: string;
+    text: string;
+  };
+  dark: {
+    fill: string;
+    fillHover: string;
+    text: string;
+  };
+}
+
+/**
+ * Resource display metadata
+ */
+export interface ResourceInfo {
+  key: ResourceType;
+  label: string;
+  shortLabel: string;
+  color: ResourceColor;
+}
+
+/**
+ * Color palette for each resource type
+ *
+ * Colours chosen for:
+ * - High contrast in both light and dark modes
+ * - Distinct hues for easy differentiation
+ * - Consistent saturation and brightness levels
+ */
+export const RESOURCE_COLORS: Record<ResourceType, ResourceColor> = {
+  workers: {
+    light: {
+      fill: '#f59e0b', // amber-500
+      fillHover: '#d97706', // amber-600
+      text: '#92400e', // amber-800
+    },
+    dark: {
+      fill: '#fbbf24', // amber-400
+      fillHover: '#f59e0b', // amber-500
+      text: '#fcd34d', // amber-300
+    },
+  },
+  d1: {
+    light: {
+      fill: '#3b82f6', // blue-500
+      fillHover: '#2563eb', // blue-600
+      text: '#1e40af', // blue-800
+    },
+    dark: {
+      fill: '#60a5fa', // blue-400
+      fillHover: '#3b82f6', // blue-500
+      text: '#93c5fd', // blue-300
+    },
+  },
+  kv: {
+    light: {
+      fill: '#10b981', // emerald-500
+      fillHover: '#059669', // emerald-600
+      text: '#065f46', // emerald-800
+    },
+    dark: {
+      fill: '#34d399', // emerald-400
+      fillHover: '#10b981', // emerald-500
+      text: '#6ee7b7', // emerald-300
+    },
+  },
+  r2: {
+    light: {
+      fill: '#8b5cf6', // violet-500
+      fillHover: '#7c3aed', // violet-600
+      text: '#5b21b6', // violet-800
+    },
+    dark: {
+      fill: '#a78bfa', // violet-400
+      fillHover: '#8b5cf6', // violet-500
+      text: '#c4b5fd', // violet-300
+    },
+  },
+  vectorize: {
+    light: {
+      fill: '#ec4899', // pink-500
+      fillHover: '#db2777', // pink-600
+      text: '#9d174d', // pink-800
+    },
+    dark: {
+      fill: '#f472b6', // pink-400
+      fillHover: '#ec4899', // pink-500
+      text: '#f9a8d4', // pink-300
+    },
+  },
+  aiGateway: {
+    light: {
+      fill: '#06b6d4', // cyan-500
+      fillHover: '#0891b2', // cyan-600
+      text: '#155e75', // cyan-800
+    },
+    dark: {
+      fill: '#22d3ee', // cyan-400
+      fillHover: '#06b6d4', // cyan-500
+      text: '#67e8f9', // cyan-300
+    },
+  },
+  durableObjects: {
+    light: {
+      fill: '#f97316', // orange-500
+      fillHover: '#ea580c', // orange-600
+      text: '#9a3412', // orange-800
+    },
+    dark: {
+      fill: '#fb923c', // orange-400
+      fillHover: '#f97316', // orange-500
+      text: '#fdba74', // orange-300
+    },
+  },
+  workersAI: {
+    light: {
+      fill: '#6366f1', // indigo-500
+      fillHover: '#4f46e5', // indigo-600
+      text: '#3730a3', // indigo-800
+    },
+    dark: {
+      fill: '#818cf8', // indigo-400
+      fillHover: '#6366f1', // indigo-500
+      text: '#a5b4fc', // indigo-300
+    },
+  },
+  queues: {
+    light: {
+      fill: '#14b8a6', // teal-500
+      fillHover: '#0d9488', // teal-600
+      text: '#115e59', // teal-800
+    },
+    dark: {
+      fill: '#2dd4bf', // teal-400
+      fillHover: '#14b8a6', // teal-500
+      text: '#5eead4', // teal-300
+    },
+  },
+};
+
+/**
+ * Resource display information
+ */
+export const RESOURCE_INFO: ResourceInfo[] = [
+  {
+    key: 'workers',
+    label: 'Workers',
+    shortLabel: 'WK',
+    color: RESOURCE_COLORS.workers,
+  },
+  {
+    key: 'd1',
+    label: 'D1 Database',
+    shortLabel: 'D1',
+    color: RESOURCE_COLORS.d1,
+  },
+  {
+    key: 'kv',
+    label: 'KV Storage',
+    shortLabel: 'KV',
+    color: RESOURCE_COLORS.kv,
+  },
+  {
+    key: 'r2',
+    label: 'R2 Storage',
+    shortLabel: 'R2',
+    color: RESOURCE_COLORS.r2,
+  },
+  {
+    key: 'vectorize',
+    label: 'Vectorize',
+    shortLabel: 'VZ',
+    color: RESOURCE_COLORS.vectorize,
+  },
+  {
+    key: 'aiGateway',
+    label: 'AI Gateway',
+    shortLabel: 'AI',
+    color: RESOURCE_COLORS.aiGateway,
+  },
+  {
+    key: 'durableObjects',
+    label: 'Durable Objects',
+    shortLabel: 'DO',
+    color: RESOURCE_COLORS.durableObjects,
+  },
+  {
+    key: 'workersAI',
+    label: 'Workers AI',
+    shortLabel: 'AI',
+    color: RESOURCE_COLORS.workersAI,
+  },
+  {
+    key: 'queues',
+    label: 'Queues',
+    shortLabel: 'Q',
+    color: RESOURCE_COLORS.queues,
+  },
+];
+
+/**
+ * Get Chart.js compatible color arrays for a given theme
+ */
+export function getChartColors(theme: 'light' | 'dark'): {
+  backgroundColor: string[];
+  borderColor: string[];
+  hoverBackgroundColor: string[];
+} {
+  const fills = RESOURCE_INFO.map((r) => r.color[theme].fill);
+  const hovers = RESOURCE_INFO.map((r) => r.color[theme].fillHover);
+
+  return {
+    backgroundColor: fills,
+    borderColor: fills.map((c) => c + 'cc'), // Add some transparency for border
+    hoverBackgroundColor: hovers,
+  };
+}
+
+/**
+ * Get color for a specific resource type
+ */
+export function getResourceColor(
+  resourceType: ResourceType,
+  theme: 'light' | 'dark'
+): ResourceColor['light'] | ResourceColor['dark'] {
+  return RESOURCE_COLORS[resourceType][theme];
+}
+
+/**
+ * Get resource info by key
+ */
+export function getResourceInfo(resourceType: ResourceType): ResourceInfo | undefined {
+  return RESOURCE_INFO.find((r) => r.key === resourceType);
+}
+
+/**
+ * CSS custom properties for resource colours (for injection into stylesheets)
+ */
+export function generateResourceColorCSS(): string {
+  const lines: string[] = [':root {'];
+
+  for (const [key, color] of Object.entries(RESOURCE_COLORS)) {
+    lines.push(`  --usage-resource-${key}: ${color.light.fill};`);
+    lines.push(`  --usage-resource-${key}-hover: ${color.light.fillHover};`);
+    lines.push(`  --usage-resource-${key}-text: ${color.light.text};`);
+  }
+
+  lines.push('}');
+  lines.push('');
+  lines.push('[data-theme="dark"] {');
+
+  for (const [key, color] of Object.entries(RESOURCE_COLORS)) {
+    lines.push(`  --usage-resource-${key}: ${color.dark.fill};`);
+    lines.push(`  --usage-resource-${key}-hover: ${color.dark.fillHover};`);
+    lines.push(`  --usage-resource-${key}-text: ${color.dark.text};`);
+  }
+
+  lines.push('}');
+
+  return lines.join('\n');
+}

package/templates/shared/dashboard/src/pages/api/usage/ai-models.ts

@@ -0,0 +1,235 @@
+/**
+ * AI Model Usage Breakdown API Endpoint
+ *
+ * Returns per-model usage and cost data from:
+ * - Workers AI (workersai_model_daily)
+ * - AI Gateway (aigateway_model_daily)
+ *
+ * @module pages/api/usage/ai-models
+ */
+
+import type { APIRoute } from 'astro';
+import type { D1Database } from '@cloudflare/workers-types';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface WorkersAIModel {
+  model: string;
+  project: string;
+  requests: number;
+  inputTokens: number;
+  outputTokens: number;
+  costUsd: number;
+}
+
+interface AIGatewayModel {
+  provider: string;
+  model: string;
+  gatewayId: string;
+  requests: number;
+  cachedRequests: number;
+  tokensIn: number;
+  tokensOut: number;
+  costUsd: number;
+}
+
+interface SuccessResponse {
+  success: true;
+  workersAI: {
+    models: WorkersAIModel[];
+    totalCostUsd: number;
+    totalRequests: number;
+  };
+  aiGateway: {
+    models: AIGatewayModel[];
+    totalCostUsd: number;
+    totalRequests: number;
+    byProvider: Record<string, { requests: number; costUsd: number }>;
+  };
+  period: { startDate: string; endDate: string };
+  responseTimeMs: number;
+}
+
+interface ErrorResponse {
+  success: false;
+  error: string;
+  code: string;
+}
+
+// =============================================================================
+// HANDLER
+// =============================================================================
+
+export const GET: APIRoute = async ({ locals, url }) => {
+  const startTime = Date.now();
+
+  const env = locals.runtime?.env as { PLATFORM_DB?: D1Database } | undefined;
+
+  if (!env?.PLATFORM_DB) {
+    const response: ErrorResponse = {
+      success: false,
+      error: 'Database binding not available',
+      code: 'BINDING_ERROR',
+    };
+    return new Response(JSON.stringify(response), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  // Parse query params
+  const periodParam = url.searchParams.get('period') ?? '30d';
+  const now = new Date();
+  let startDate: string;
+
+  if (periodParam === '7d') {
+    const d = new Date(now);
+    d.setDate(d.getDate() - 7);
+    startDate = d.toISOString().slice(0, 10);
+  } else if (periodParam === '24h') {
+    startDate = now.toISOString().slice(0, 10);
+  } else {
+    const d = new Date(now);
+    d.setDate(d.getDate() - 30);
+    startDate = d.toISOString().slice(0, 10);
+  }
+
+  const endDate = now.toISOString().slice(0, 10);
+
+  try {
+    // Query Workers AI model usage
+    const workersAIResult = await env.PLATFORM_DB.prepare(
+      `
+      SELECT
+        model,
+        project,
+        SUM(requests) as requests,
+        SUM(input_tokens) as input_tokens,
+        SUM(output_tokens) as output_tokens,
+        SUM(cost_usd) as cost_usd
+      FROM workersai_model_daily
+      WHERE snapshot_date >= ? AND snapshot_date <= ?
+      GROUP BY model, project
+      ORDER BY cost_usd DESC
+    `
+    )
+      .bind(startDate, endDate)
+      .all<{
+        model: string;
+        project: string;
+        requests: number;
+        input_tokens: number;
+        output_tokens: number;
+        cost_usd: number;
+      }>();
+
+    // Query AI Gateway model usage
+    const aiGatewayResult = await env.PLATFORM_DB.prepare(
+      `
+      SELECT
+        provider,
+        model,
+        gateway_id,
+        SUM(requests) as requests,
+        SUM(cached_requests) as cached_requests,
+        SUM(tokens_in) as tokens_in,
+        SUM(tokens_out) as tokens_out,
+        SUM(cost_usd) as cost_usd
+      FROM aigateway_model_daily
+      WHERE snapshot_date >= ? AND snapshot_date <= ?
+      GROUP BY provider, model, gateway_id
+      ORDER BY cost_usd DESC
+    `
+    )
+      .bind(startDate, endDate)
+      .all<{
+        provider: string;
+        model: string;
+        gateway_id: string;
+        requests: number;
+        cached_requests: number;
+        tokens_in: number;
+        tokens_out: number;
+        cost_usd: number;
+      }>();
+
+    // Transform Workers AI results
+    const workersAIModels: WorkersAIModel[] = (workersAIResult.results ?? []).map((row) => ({
+      model: row.model,
+      project: row.project,
+      requests: row.requests ?? 0,
+      inputTokens: row.input_tokens ?? 0,
+      outputTokens: row.output_tokens ?? 0,
+      costUsd: row.cost_usd ?? 0,
+    }));
+
+    const workersAITotalCost = workersAIModels.reduce((sum, m) => sum + m.costUsd, 0);
+    const workersAITotalRequests = workersAIModels.reduce((sum, m) => sum + m.requests, 0);
+
+    // Transform AI Gateway results
+    const aiGatewayModels: AIGatewayModel[] = (aiGatewayResult.results ?? []).map((row) => ({
+      provider: row.provider,
+      model: row.model,
+      gatewayId: row.gateway_id,
+      requests: row.requests ?? 0,
+      cachedRequests: row.cached_requests ?? 0,
+      tokensIn: row.tokens_in ?? 0,
+      tokensOut: row.tokens_out ?? 0,
+      costUsd: row.cost_usd ?? 0,
+    }));
+
+    const aiGatewayTotalCost = aiGatewayModels.reduce((sum, m) => sum + m.costUsd, 0);
+    const aiGatewayTotalRequests = aiGatewayModels.reduce((sum, m) => sum + m.requests, 0);
+
+    // Group AI Gateway by provider
+    const byProvider: Record<string, { requests: number; costUsd: number }> = {};
+    for (const m of aiGatewayModels) {
+      if (!byProvider[m.provider]) {
+        byProvider[m.provider] = { requests: 0, costUsd: 0 };
+      }
+      byProvider[m.provider].requests += m.requests;
+      byProvider[m.provider].costUsd += m.costUsd;
+    }
+
+    const response: SuccessResponse = {
+      success: true,
+      workersAI: {
+        models: workersAIModels,
+        totalCostUsd: Math.round(workersAITotalCost * 100) / 100,
+        totalRequests: workersAITotalRequests,
+      },
+      aiGateway: {
+        models: aiGatewayModels,
+        totalCostUsd: Math.round(aiGatewayTotalCost * 100) / 100,
+        totalRequests: aiGatewayTotalRequests,
+        byProvider,
+      },
+      period: { startDate, endDate },
+      responseTimeMs: Date.now() - startTime,
+    };
+
+    return new Response(JSON.stringify(response), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control': 'public, max-age=300',
+      },
+    });
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    console.error('[AI-MODELS] Error:', errorMessage);
+
+    const response: ErrorResponse = {
+      success: false,
+      error: 'Failed to fetch AI model usage',
+      code: 'INTERNAL_ERROR',
+    };
+
+    return new Response(JSON.stringify(response), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};