@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/scripts/ai-tab-controller.ts

@@ -0,0 +1,419 @@
+/**
+ * AI Tab Controller
+ *
+ * Handles AI Gateway and Workers AI data loading and rendering.
+ * Extracted from index.astro for task-22.5 (slim to <300 lines)
+ */
+
+import { formatAINumber, formatAICurrency } from './formatters';
+
+// ========== Types ==========
+
+export interface AIGatewayData {
+  totalRequests: number;
+  totalCachedRequests: number;
+  cacheHitRate: number;
+  tokensIn: number;
+  tokensOut: number;
+  totalCostUsd: number;
+  byProvider: Record<
+    string,
+    {
+      requests: number;
+      cachedRequests: number;
+      tokensIn: number;
+      tokensOut: number;
+      costUsd: number;
+    }
+  >;
+  byModel: Record<
+    string,
+    {
+      requests: number;
+      cachedRequests: number;
+      tokensIn: number;
+      tokensOut: number;
+      costUsd: number;
+    }
+  >;
+}
+
+export interface WorkersAIData {
+  totalRequests: number;
+  totalInputTokens: number;
+  totalOutputTokens: number;
+  totalCostUsd: number;
+  byProject: Record<string, { requests: number; costUsd: number; isEstimated: boolean }>;
+  byModel: Record<string, { requests: number; costUsd: number }>;
+  aiGateway?: AIGatewayData;
+}
+
+// ========== State ==========
+
+let aiDataLoaded = false;
+let aiDataCache: WorkersAIData | null = null;
+
+// ========== DOM Helpers ==========
+
+function clearElement(el: HTMLElement): void {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+}
+
+function createLoadingIndicator(message: string): HTMLElement {
+  const div = document.createElement('div');
+  div.className = 'ai-loading-indicator';
+  div.textContent = message;
+  return div;
+}
+
+function createErrorState(message: string): HTMLElement {
+  const div = document.createElement('div');
+  div.className = 'ai-error-state';
+  div.textContent = message;
+  return div;
+}
+
+function createEmptyState(message: string): HTMLElement {
+  const div = document.createElement('div');
+  div.className = 'ai-empty-state';
+  div.textContent = message;
+  return div;
+}
+
+// ========== Data Loading ==========
+
+export async function loadAITabData(period: string = '7d'): Promise<void> {
+  if (aiDataLoaded && aiDataCache) {
+    renderAIData(aiDataCache);
+    return;
+  }
+
+  // Show loading state
+  const containers = ['ai-gateway-content', 'ai-by-project', 'ai-by-model'];
+  containers.forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) {
+      clearElement(el);
+      el.appendChild(createLoadingIndicator('Loading AI data...'));
+    }
+  });
+
+  try {
+    // Include credentials to pass Cloudflare Access JWT cookie
+    const response = await fetch(`/api/usage/workersai?period=${period}`, {
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const json = await response.json();
+
+    if (!json.success || !json.data) {
+      throw new Error(json.error || 'Invalid response');
+    }
+
+    aiDataCache = json.data;
+    aiDataLoaded = true;
+    renderAIData(json.data);
+  } catch (error) {
+    console.error('Failed to load AI data:', error);
+    const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+    containers.forEach((id) => {
+      const el = document.getElementById(id);
+      if (el) {
+        clearElement(el);
+        el.appendChild(createErrorState('Failed to load AI data: ' + errorMsg));
+      }
+    });
+
+    const statIds = ['ai-total-requests', 'ai-total-cost', 'ai-input-tokens', 'ai-output-tokens'];
+    statIds.forEach((id) => {
+      const el = document.getElementById(id);
+      if (el) el.textContent = 'Error';
+    });
+  }
+}
+
+// ========== Rendering ==========
+
+function renderAIData(data: WorkersAIData): void {
+  // Update stats
+  const totalRequestsEl = document.getElementById('ai-total-requests');
+  const totalCostEl = document.getElementById('ai-total-cost');
+  const inputTokensEl = document.getElementById('ai-input-tokens');
+  const outputTokensEl = document.getElementById('ai-output-tokens');
+
+  if (totalRequestsEl) totalRequestsEl.textContent = formatAINumber(data.totalRequests);
+  if (totalCostEl) totalCostEl.textContent = formatAICurrency(data.totalCostUsd);
+  if (inputTokensEl) inputTokensEl.textContent = formatAINumber(data.totalInputTokens);
+  if (outputTokensEl) outputTokensEl.textContent = formatAINumber(data.totalOutputTokens);
+
+  // Render AI Gateway content with real data if available
+  renderAIGatewaySection(data.aiGateway);
+
+  // Render by project table
+  renderByProjectTable(data.byProject);
+
+  // Render by model table
+  renderByModelTable(data.byModel);
+}
+
+function renderAIGatewaySection(aiGateway?: AIGatewayData): void {
+  const gatewayEl = document.getElementById('ai-gateway-content');
+  if (!gatewayEl) return;
+
+  clearElement(gatewayEl);
+
+  // If no AI Gateway data, show placeholder
+  if (!aiGateway) {
+    const emptyDiv = createEmptyState('No AI Gateway data available for this period');
+    gatewayEl.appendChild(emptyDiv);
+    return;
+  }
+
+  // Create metrics grid
+  const metricsGrid = document.createElement('div');
+  metricsGrid.className = 'ai-gateway-metrics-grid';
+
+  const metrics = [
+    { value: formatAINumber(aiGateway.totalRequests), label: 'Gateway Requests' },
+    { value: `${aiGateway.cacheHitRate.toFixed(1)}%`, label: 'Cache Hit Rate' },
+    { value: formatAINumber(aiGateway.tokensIn), label: 'Tokens In' },
+    { value: formatAINumber(aiGateway.tokensOut), label: 'Tokens Out' },
+  ];
+
+  metrics.forEach((metric) => {
+    const metricDiv = document.createElement('div');
+    metricDiv.className = 'ai-gateway-metric';
+
+    const valueDiv = document.createElement('div');
+    valueDiv.className = 'metric-value';
+    valueDiv.textContent = metric.value;
+    metricDiv.appendChild(valueDiv);
+
+    const labelDiv = document.createElement('div');
+    labelDiv.className = 'metric-label';
+    labelDiv.textContent = metric.label;
+    metricDiv.appendChild(labelDiv);
+
+    metricsGrid.appendChild(metricDiv);
+  });
+
+  gatewayEl.appendChild(metricsGrid);
+
+  // Add provider breakdown if available
+  const providers = Object.entries(aiGateway.byProvider);
+  if (providers.length > 0) {
+    const providerSection = document.createElement('div');
+    providerSection.className = 'ai-gateway-providers';
+
+    const providerHeader = document.createElement('h4');
+    providerHeader.textContent = 'By Provider';
+    providerSection.appendChild(providerHeader);
+
+    const providerTable = document.createElement('table');
+    providerTable.className = 'ai-table ai-table-compact';
+
+    // Header
+    const thead = document.createElement('thead');
+    const headerRow = document.createElement('tr');
+    ['Provider', 'Requests', 'Cached', 'Cost'].forEach((text) => {
+      const th = document.createElement('th');
+      th.textContent = text;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    providerTable.appendChild(thead);
+
+    // Body
+    const tbody = document.createElement('tbody');
+    providers.sort((a, b) => b[1].requests - a[1].requests);
+    providers.forEach(([provider, data]) => {
+      const row = document.createElement('tr');
+
+      const nameCell = document.createElement('td');
+      nameCell.className = 'provider-name';
+      nameCell.textContent = provider;
+      row.appendChild(nameCell);
+
+      const requestsCell = document.createElement('td');
+      requestsCell.textContent = formatAINumber(data.requests);
+      row.appendChild(requestsCell);
+
+      const cachedCell = document.createElement('td');
+      cachedCell.textContent = formatAINumber(data.cachedRequests);
+      row.appendChild(cachedCell);
+
+      const costCell = document.createElement('td');
+      costCell.className = 'cost-cell';
+      costCell.textContent = formatAICurrency(data.costUsd);
+      row.appendChild(costCell);
+
+      tbody.appendChild(row);
+    });
+    providerTable.appendChild(tbody);
+    providerSection.appendChild(providerTable);
+    gatewayEl.appendChild(providerSection);
+  }
+}
+
+function renderByProjectTable(
+  byProject: Record<string, { requests: number; costUsd: number; isEstimated: boolean }>
+): void {
+  const containerEl = document.getElementById('ai-by-project');
+  if (!containerEl) return;
+
+  clearElement(containerEl);
+
+  const projects = Object.entries(byProject);
+  if (projects.length === 0) {
+    containerEl.appendChild(createEmptyState('No Workers AI usage data available'));
+    return;
+  }
+
+  // Sort by cost descending
+  projects.sort((a, b) => b[1].costUsd - a[1].costUsd);
+
+  const table = document.createElement('table');
+  table.className = 'ai-table';
+
+  // Header
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+  ['Project', 'Requests', 'Est. Cost'].forEach((text) => {
+    const th = document.createElement('th');
+    th.textContent = text;
+    headerRow.appendChild(th);
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  // Body
+  const tbody = document.createElement('tbody');
+  let hasEstimated = false;
+
+  projects.forEach(([projectName, projectData]) => {
+    const row = document.createElement('tr');
+
+    // Project name cell
+    const nameCell = document.createElement('td');
+    nameCell.className = 'project-name';
+    nameCell.textContent = projectName;
+
+    if (projectData.isEstimated) {
+      hasEstimated = true;
+      const badge = document.createElement('span');
+      badge.className = 'estimated-badge';
+      badge.textContent = '~estimated';
+      nameCell.appendChild(badge);
+    }
+    row.appendChild(nameCell);
+
+    // Requests cell
+    const requestsCell = document.createElement('td');
+    requestsCell.textContent = formatAINumber(projectData.requests);
+    row.appendChild(requestsCell);
+
+    // Cost cell
+    const costCell = document.createElement('td');
+    costCell.className = 'cost-cell';
+    costCell.textContent = formatAICurrency(projectData.costUsd);
+    row.appendChild(costCell);
+
+    tbody.appendChild(row);
+  });
+
+  table.appendChild(tbody);
+  containerEl.appendChild(table);
+
+  if (hasEstimated) {
+    const note = document.createElement('p');
+    note.className = 'ai-note';
+    note.textContent =
+      '* Estimated costs are calculated from request counts and average token usage.';
+    containerEl.appendChild(note);
+  }
+}
+
+function renderByModelTable(byModel: Record<string, { requests: number; costUsd: number }>): void {
+  const containerEl = document.getElementById('ai-by-model');
+  if (!containerEl) return;
+
+  clearElement(containerEl);
+
+  const models = Object.entries(byModel);
+  if (models.length === 0) {
+    containerEl.appendChild(createEmptyState('No model-level data available'));
+    return;
+  }
+
+  // Sort by cost descending
+  models.sort((a, b) => b[1].costUsd - a[1].costUsd);
+
+  const table = document.createElement('table');
+  table.className = 'ai-table';
+
+  // Header
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+  ['Model', 'Requests', 'Est. Cost'].forEach((text) => {
+    const th = document.createElement('th');
+    th.textContent = text;
+    headerRow.appendChild(th);
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  // Body
+  const tbody = document.createElement('tbody');
+
+  models.forEach(([modelName, modelData]) => {
+    const row = document.createElement('tr');
+
+    // Model name cell (formatted)
+    const nameCell = document.createElement('td');
+    nameCell.className = 'model-name';
+    nameCell.textContent = modelName.replace('@cf/', '').replace('meta/', '');
+    row.appendChild(nameCell);
+
+    // Requests cell
+    const requestsCell = document.createElement('td');
+    requestsCell.textContent = formatAINumber(modelData.requests);
+    row.appendChild(requestsCell);
+
+    // Cost cell
+    const costCell = document.createElement('td');
+    costCell.className = 'cost-cell';
+    costCell.textContent = formatAICurrency(modelData.costUsd);
+    row.appendChild(costCell);
+
+    tbody.appendChild(row);
+  });
+
+  table.appendChild(tbody);
+  containerEl.appendChild(table);
+}
+
+// ========== Reset State ==========
+
+export function resetAITabState(): void {
+  aiDataLoaded = false;
+  aiDataCache = null;
+}
+
+// ========== Event Listener Setup ==========
+
+export function setupAITabEventListeners(): void {
+  // Reload AI data when period changes
+  document.addEventListener('period-change', () => {
+    resetAITabState();
+    const aiPanel = document.getElementById('tab-ai');
+    if (aiPanel && aiPanel.style.display !== 'none') {
+      loadAITabData();
+    }
+  });
+}

package/templates/shared/dashboard/src/components/usage/scripts/constants.ts

@@ -0,0 +1,60 @@
+/**
+ * Usage Dashboard Constants
+ *
+ * Static label mappings and configuration.
+ * Extracted from index.astro for task-22.5 (slim to <300 lines)
+ */
+
+// Period display labels
+export const PERIOD_LABELS: Record<string, string> = {
+  '24h': 'Last 24 Hours',
+  '7d': 'Last 7 Days',
+  '30d': 'Last 30 Days',
+  custom: 'Custom Range',
+};
+
+// Project display labels
+export const PROJECT_LABELS: Record<string, string> = {
+  all: 'All Projects',
+  'brand-copilot': 'Brand Copilot',
+  scout: 'Scout',
+  platform: 'Platform',
+};
+
+// Valid period values
+export const VALID_PERIODS = ['24h', '7d', '30d', 'custom'] as const;
+export type Period = (typeof VALID_PERIODS)[number];
+
+// Valid project values
+export const VALID_PROJECTS = ['all', 'brand-copilot', 'scout', 'platform'] as const;
+export type Project = (typeof VALID_PROJECTS)[number];
+
+// Valid compare mode values
+export const VALID_COMPARE_MODES = ['none', 'lastMonth', 'custom'] as const;
+export type CompareMode = (typeof VALID_COMPARE_MODES)[number];
+
+// Get SSR config from data attributes (set by Astro template)
+export function getSSRConfig(): { period: string; project: string; compare: CompareMode } {
+  const configEl = document.getElementById('usage-ssr-config');
+  if (!configEl) {
+    return { period: '30d', project: 'all', compare: 'none' };
+  }
+  const compareValue = configEl.dataset.compare || 'none';
+  return {
+    period: configEl.dataset.period || '30d',
+    project: configEl.dataset.project || 'all',
+    compare: (VALID_COMPARE_MODES.includes(compareValue as CompareMode)
+      ? compareValue
+      : 'none') as CompareMode,
+  };
+}
+
+// Get period label
+export function getPeriodLabel(period: string): string {
+  return PERIOD_LABELS[period] || 'Last 30 Days';
+}
+
+// Get project label
+export function getProjectLabel(project: string): string {
+  return PROJECT_LABELS[project] || 'All Projects';
+}

package/templates/shared/dashboard/src/components/usage/scripts/formatters.ts

@@ -0,0 +1,62 @@
+/**
+ * Usage Dashboard - Format Utilities
+ *
+ * Extracted from index.astro for task-22.5 (slim to <300 lines)
+ */
+
+/**
+ * Format a number with K/M/B suffixes
+ */
+export function formatNumber(num: number | undefined | null): string {
+  if (num === undefined || num === null || isNaN(num)) return '0';
+  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(2)}B`;
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(2)}M`;
+  if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+  return num.toLocaleString();
+}
+
+/**
+ * Format bytes to human-readable string using decimal (SI) units.
+ *
+ * IMPORTANT: Uses decimal (SI) units because Cloudflare bills in decimal GB:
+ * - 1 GB = 1,000,000,000 bytes (decimal/SI - used for billing)
+ * - 1 GiB = 1,073,741,824 bytes (binary - NOT used by Cloudflare)
+ *
+ * This ensures displayed values match Cloudflare billing/CSV exports.
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(2)} GB`;
+  if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(2)} MB`;
+  if (bytes >= 1_000) return `${(bytes / 1_000).toFixed(2)} KB`;
+  return `${bytes} B`;
+}
+
+/**
+ * Format currency value
+ */
+export function formatCurrency(amount: number, decimals = 2): string {
+  return '$' + amount.toFixed(decimals);
+}
+
+/**
+ * Format percentage
+ */
+export function formatPercent(value: number): string {
+  return value.toFixed(1) + '%';
+}
+
+/**
+ * Format AI-specific numbers with appropriate precision
+ */
+export function formatAINumber(num: number): string {
+  if (num >= 1_000_000) return (num / 1_000_000).toFixed(2) + 'M';
+  if (num >= 1_000) return (num / 1_000).toFixed(1) + 'K';
+  return num.toLocaleString();
+}
+
+/**
+ * Format AI currency (higher precision)
+ */
+export function formatAICurrency(amount: number): string {
+  return '$' + amount.toFixed(4);
+}