@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,1633 @@
+/**
+ * Overview Tab Controller
+ *
+ * Handles Overview tab data loading, card rendering, and table management.
+ * Extracted from index.astro for task-22.5 (slim to <300 lines)
+ */
+
+import { formatNumber, formatBytes, formatCurrency } from './formatters';
+import { getSSRConfig } from './constants';
+import { CF_PRICING } from '../../../lib/cloudflare/costs';
+import { fetchDailyData, syncFromURL, initSubscriptions } from '../state/usageActions';
+
+// ========== Types ==========
+
+export interface UsageData {
+  workers: WorkerData[];
+  d1: D1Data[];
+  kv: KVData[];
+  r2: R2Data[];
+  vectorize: VectorizeData[];
+  aiGateway: AIGatewayData[];
+  pages: PagesData[];
+  durableObjects: DurableObjectsData;
+}
+
+export interface WorkerData {
+  scriptName: string;
+  requests: number;
+  errors: number;
+  cpuTime?: number;
+  wallTime?: number;
+}
+
+export interface D1Data {
+  databaseId: string;
+  databaseName: string;
+  rowsRead: number;
+  rowsWritten: number;
+}
+
+export interface KVData {
+  namespaceId: string;
+  namespaceName: string;
+  reads: number;
+  writes: number;
+  deletes: number;
+  lists: number;
+}
+
+export interface R2Data {
+  bucketName: string;
+  storageBytes: number;
+  readOps: number;
+  writeOps: number;
+}
+
+export interface VectorizeData {
+  id: string;
+  name: string;
+  vectorCount: number;
+  dimensions: number;
+}
+
+export interface AIGatewayData {
+  name: string;
+  requests: number;
+  tokens: number;
+}
+
+export interface PagesData {
+  projectName: string;
+  productionDeployments: number;
+  previewDeployments: number;
+}
+
+export interface DurableObjectsData {
+  requests: number;
+  wallTime: number;
+}
+
+export interface CostBreakdown {
+  workers: number;
+  d1: number;
+  kv: number;
+  r2: number;
+  vectorize: number;
+  aiGateway: number;
+  pages: number;
+  durableObjects: number;
+  total: number;
+}
+
+export interface ThresholdWarning {
+  level: 'warning' | 'high' | 'critical';
+  resource: string;
+  resourceName: string;
+  metric: string;
+  current: number;
+  limit: number;
+  percentage: number;
+}
+
+export interface ThresholdData {
+  warnings: ThresholdWarning[];
+  overallLevel: 'healthy' | 'warning' | 'high' | 'critical';
+}
+
+export interface UnifiedResource {
+  id: string;
+  name: string;
+  type: string;
+  project: string;
+  usage: {
+    value: number;
+    formatted: string;
+    unit: string;
+  };
+  costCurrent: number;
+  costPrior: number;
+  costDelta: number;
+  costDeltaPct: number | 'NEW' | null;
+  status: 'healthy' | 'warning' | 'high' | 'critical';
+}
+
+// ========== Constants ==========
+
+const TYPE_ICONS: Record<string, string> = {
+  worker: '\u2699\uFE0F',
+  d1: '\uD83D\uDDC3\uFE0F',
+  kv: '\uD83D\uDD11',
+  r2: '\uD83D\uDEE2\uFE0F',
+  vectorize: '\uD83E\uDDE0',
+  pages: '\uD83D\uDCC4',
+  do: '\uD83D\uDD17',
+  'ai-gateway': '\uD83E\uDD16',
+};
+
+const TYPE_LABELS: Record<string, string> = {
+  worker: 'Worker',
+  d1: 'D1 Database',
+  kv: 'KV Namespace',
+  r2: 'R2 Bucket',
+  vectorize: 'Vectorize',
+  pages: 'Pages',
+  do: 'Durable Object',
+  'ai-gateway': 'AI Gateway',
+};
+
+const STATUS_COLOURS: Record<string, string> = {
+  healthy: '#10B981',
+  warning: '#F59E0B',
+  high: '#F97316',
+  critical: '#EF4444',
+};
+
+// ========== Status Helpers ==========
+
+export function getStatusFromPercentage(
+  percentage: number
+): 'healthy' | 'warning' | 'high' | 'critical' {
+  if (percentage >= 90) return 'critical';
+  if (percentage >= 75) return 'high';
+  if (percentage >= 50) return 'warning';
+  return 'healthy';
+}
+
+function getStatusFromErrorRate(
+  errors: number,
+  requests: number
+): 'healthy' | 'warning' | 'high' | 'critical' {
+  if (requests === 0) return 'healthy';
+  const errorRate = (errors / requests) * 100;
+  if (errorRate >= 10) return 'critical';
+  if (errorRate >= 5) return 'high';
+  if (errorRate >= 1) return 'warning';
+  return 'healthy';
+}
+
+// ========== Project Identification ==========
+
+export function identifyProject(resourceName: string): string {
+  const name = resourceName.toLowerCase();
+  if (
+    name.includes('brand-copilot') ||
+    name.includes('brand_copilot') ||
+    name.includes('brandcopilot')
+  ) {
+    return 'brand-copilot';
+  }
+  if (name.includes('scout')) {
+    return 'scout';
+  }
+  if (name.includes('platform') || name.includes('admin')) {
+    return 'platform';
+  }
+  return resourceName;
+}
+
+// ========== Workers Breakdown ==========
+
+/**
+ * Project breakdown data for the WorkersBreakdownTable component
+ */
+interface ProjectBreakdown {
+  project: string;
+  totalRequests: number;
+  totalErrors: number;
+  workerCount: number;
+  workers: Array<{
+    scriptName: string;
+    requests: number;
+    errors: number;
+    cpuTime: number;
+  }>;
+}
+
+/**
+ * Group workers by project for the breakdown table.
+ * Uses identifyProject() to categorize workers.
+ */
+export function buildWorkersBreakdown(workers: WorkerData[]): ProjectBreakdown[] {
+  if (!workers || workers.length === 0) return [];
+
+  // Group workers by project
+  const projectMap = new Map<string, ProjectBreakdown>();
+
+  for (const worker of workers) {
+    const project = identifyProject(worker.scriptName);
+
+    if (!projectMap.has(project)) {
+      projectMap.set(project, {
+        project,
+        totalRequests: 0,
+        totalErrors: 0,
+        workerCount: 0,
+        workers: [],
+      });
+    }
+
+    const breakdown = projectMap.get(project)!;
+    breakdown.totalRequests += worker.requests || 0;
+    breakdown.totalErrors += worker.errors || 0;
+    breakdown.workerCount += 1;
+    breakdown.workers.push({
+      scriptName: worker.scriptName,
+      requests: worker.requests || 0,
+      errors: worker.errors || 0,
+      cpuTime: worker.cpuTime || 0,
+    });
+  }
+
+  // Convert to array and sort by total requests (descending)
+  const breakdowns = Array.from(projectMap.values());
+  breakdowns.sort((a, b) => b.totalRequests - a.totalRequests);
+
+  // Sort workers within each project by requests (descending)
+  for (const breakdown of breakdowns) {
+    breakdown.workers.sort((a, b) => b.requests - a.requests);
+  }
+
+  return breakdowns;
+}
+
+/**
+ * Update the WorkersBreakdownTable component with current data.
+ */
+export function updateWorkersBreakdownTable(workers: WorkerData[]): void {
+  const breakdown = buildWorkersBreakdown(workers);
+
+  if (typeof window !== 'undefined' && window.updateWorkersBreakdown) {
+    window.updateWorkersBreakdown(breakdown);
+  }
+}
+
+// ========== Format Helpers ==========
+
+function formatDeltaPct(deltaPct: number | 'NEW' | null): string {
+  if (deltaPct === 'NEW') return 'NEW';
+  if (deltaPct === null) return '-';
+  const sign = deltaPct >= 0 ? '+' : '';
+  return sign + deltaPct.toFixed(1) + '%';
+}
+
+function getDeltaClass(deltaPct: number | 'NEW' | null): string {
+  if (deltaPct === 'NEW') return 'delta-new';
+  if (deltaPct === null) return 'delta-neutral';
+  if (deltaPct > 5) return 'delta-up';
+  if (deltaPct < -5) return 'delta-down';
+  return 'delta-neutral';
+}
+
+/**
+ * Apply comparison data to resources.
+ * Updates costPrior, costDelta, and costDeltaPct for each resource.
+ */
+function applyComparisonData(
+  resources: UnifiedResource[],
+  priorResources: UnifiedResource[]
+): UnifiedResource[] {
+  const priorMap = new Map(priorResources.map((r) => [r.id, r]));
+
+  return resources.map((resource) => {
+    const prior = priorMap.get(resource.id);
+
+    if (!prior) {
+      // New resource - mark as NEW
+      return {
+        ...resource,
+        costDeltaPct: 'NEW' as const,
+      };
+    }
+
+    const costDelta = resource.costCurrent - prior.costCurrent;
+    // Use $0.01 threshold to avoid extreme percentages from near-zero baselines
+    // Cap at 999% for display sanity
+    const costDeltaPct =
+      prior.costCurrent >= 0.01
+        ? Math.min((costDelta / prior.costCurrent) * 100, 999)
+        : resource.costCurrent > 0
+          ? 'NEW'
+          : 0;
+
+    return {
+      ...resource,
+      costPrior: prior.costCurrent,
+      costDelta,
+      costDeltaPct:
+        typeof costDeltaPct === 'number' ? Math.round(costDeltaPct * 10) / 10 : costDeltaPct,
+    };
+  });
+}
+
+// ========== Transform Functions ==========
+
+export function transformToUnifiedResources(
+  data: UsageData,
+  costs: CostBreakdown,
+  projectMapping: (name: string) => string
+): UnifiedResource[] {
+  const resources: UnifiedResource[] = [];
+
+  // Transform Workers - calculate per-resource cost based on actual usage
+  if (data.workers && data.workers.length > 0) {
+    data.workers.forEach((worker) => {
+      // Workers pricing: $0.30 per million requests + $0.02 per million CPU ms
+      const requestCost =
+        ((worker.requests || 0) / 1_000_000) * CF_PRICING.workers.requestsPerMillion;
+      const cpuCost = ((worker.cpuTime || 0) / 1_000_000) * CF_PRICING.workers.cpuMsPerMillion;
+      const costPerWorker = requestCost + cpuCost;
+      resources.push({
+        id: `worker-${worker.scriptName}`,
+        name: worker.scriptName,
+        type: 'worker',
+        project: projectMapping(worker.scriptName),
+        usage: {
+          value: worker.requests || 0,
+          unit: 'requests',
+          formatted: formatNumber(worker.requests || 0),
+        },
+        costCurrent: costPerWorker,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: getStatusFromErrorRate(worker.errors || 0, worker.requests || 0),
+      });
+    });
+  }
+
+  // Transform D1 - split into separate rows for reads and writes
+  if (data.d1 && data.d1.length > 0) {
+    data.d1.forEach((db) => {
+      const dbName = db.databaseName || db.databaseId;
+      const rowsRead = db.rowsRead || 0;
+      const rowsWritten = db.rowsWritten || 0;
+
+      // D1 pricing: $0.001 per billion rows read
+      const rowsReadCost = (rowsRead / 1_000_000_000) * CF_PRICING.d1.rowsReadPerBillion;
+      // D1 pricing: $1.00 per million rows written
+      const rowsWrittenCost = (rowsWritten / 1_000_000) * CF_PRICING.d1.rowsWrittenPerMillion;
+
+      // Row for D1 reads
+      if (rowsRead > 0) {
+        resources.push({
+          id: `d1-${db.databaseId}-reads`,
+          name: `${dbName} (reads)`,
+          type: 'd1',
+          project: projectMapping(dbName),
+          usage: {
+            value: rowsRead,
+            unit: 'rows read',
+            formatted: formatNumber(rowsRead),
+          },
+          costCurrent: rowsReadCost,
+          costPrior: 0,
+          costDelta: 0,
+          costDeltaPct: null,
+          status: 'healthy',
+        });
+      }
+
+      // Row for D1 writes
+      if (rowsWritten > 0) {
+        resources.push({
+          id: `d1-${db.databaseId}-writes`,
+          name: `${dbName} (writes)`,
+          type: 'd1',
+          project: projectMapping(dbName),
+          usage: {
+            value: rowsWritten,
+            unit: 'rows written',
+            formatted: formatNumber(rowsWritten),
+          },
+          costCurrent: rowsWrittenCost,
+          costPrior: 0,
+          costDelta: 0,
+          costDeltaPct: null,
+          status: 'healthy',
+        });
+      }
+
+      // If no reads or writes, still show the database with zero
+      if (rowsRead === 0 && rowsWritten === 0) {
+        resources.push({
+          id: `d1-${db.databaseId}`,
+          name: dbName,
+          type: 'd1',
+          project: projectMapping(dbName),
+          usage: {
+            value: 0,
+            unit: 'rows',
+            formatted: '0',
+          },
+          costCurrent: 0,
+          costPrior: 0,
+          costDelta: 0,
+          costDeltaPct: null,
+          status: 'healthy',
+        });
+      }
+    });
+  }
+
+  // Transform KV - calculate per-resource cost based on actual usage
+  if (data.kv && data.kv.length > 0) {
+    data.kv.forEach((ns) => {
+      const totalOps = (ns.reads || 0) + (ns.writes || 0) + (ns.deletes || 0) + (ns.lists || 0);
+      // KV pricing: $0.50/M reads + $5.00/M writes + $5.00/M deletes + $5.00/M lists
+      const costPerKv =
+        ((ns.reads || 0) / 1_000_000) * CF_PRICING.kv.readsPerMillion +
+        ((ns.writes || 0) / 1_000_000) * CF_PRICING.kv.writesPerMillion +
+        ((ns.deletes || 0) / 1_000_000) * CF_PRICING.kv.deletesPerMillion +
+        ((ns.lists || 0) / 1_000_000) * CF_PRICING.kv.listsPerMillion;
+      resources.push({
+        id: `kv-${ns.namespaceId}`,
+        name: ns.namespaceName || ns.namespaceId,
+        type: 'kv',
+        project: projectMapping(ns.namespaceName || ns.namespaceId),
+        usage: {
+          value: totalOps,
+          unit: 'operations',
+          formatted: formatNumber(totalOps),
+        },
+        costCurrent: costPerKv,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy',
+      });
+    });
+  }
+
+  // Transform R2 - calculate per-resource cost based on actual usage
+  if (data.r2 && data.r2.length > 0) {
+    data.r2.forEach((bucket) => {
+      // R2 pricing: $0.015/GB storage + $4.50/M Class A ops (writes) + $0.36/M Class B ops (reads)
+      // Note: Cloudflare uses decimal GB (1 GB = 1,000,000,000 bytes) for billing
+      const costPerBucket =
+        ((bucket.storageBytes || 0) / 1_000_000_000) * CF_PRICING.r2.storagePerGbMonth +
+        ((bucket.writeOps || 0) / 1_000_000) * CF_PRICING.r2.classAPerMillion +
+        ((bucket.readOps || 0) / 1_000_000) * CF_PRICING.r2.classBPerMillion;
+      resources.push({
+        id: `r2-${bucket.bucketName}`,
+        name: bucket.bucketName,
+        type: 'r2',
+        project: projectMapping(bucket.bucketName),
+        usage: {
+          value: bucket.storageBytes || 0,
+          unit: 'storage',
+          formatted: formatBytes(bucket.storageBytes || 0),
+        },
+        costCurrent: costPerBucket,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy',
+      });
+    });
+  }
+
+  // Transform Vectorize - calculate per-resource cost based on actual usage
+  if (data.vectorize && data.vectorize.length > 0) {
+    data.vectorize.forEach((index) => {
+      // Vectorize pricing: $0.01 per million stored dimensions
+      const storedDimensions = (index.vectorCount || 0) * (index.dimensions || 0);
+      const costPerIndex =
+        (storedDimensions / 1_000_000) * CF_PRICING.vectorize.storedDimensionsPerMillion;
+      resources.push({
+        id: `vectorize-${index.id}`,
+        name: index.name || index.id,
+        type: 'vectorize',
+        project: projectMapping(index.name || index.id),
+        usage: {
+          value: index.vectorCount || 0,
+          unit: 'vectors',
+          formatted: formatNumber(index.vectorCount || 0),
+        },
+        costCurrent: costPerIndex,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy',
+      });
+    });
+  }
+
+  // Transform AI Gateway
+  if (data.aiGateway && data.aiGateway.length > 0) {
+    const costPerGateway = (costs.aiGateway || 0) / data.aiGateway.length;
+    data.aiGateway.forEach((gateway) => {
+      resources.push({
+        id: `aigateway-${gateway.name}`,
+        name: gateway.name,
+        type: 'ai-gateway',
+        project: projectMapping(gateway.name),
+        usage: {
+          value: gateway.requests || 0,
+          unit: 'requests',
+          formatted: formatNumber(gateway.requests || 0),
+        },
+        costCurrent: costPerGateway,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy',
+      });
+    });
+  }
+
+  // Transform Pages - calculate per-resource cost based on actual usage
+  if (data.pages && data.pages.length > 0) {
+    data.pages.forEach((page) => {
+      const totalDeployments = (page.productionDeployments || 0) + (page.previewDeployments || 0);
+      // Pages pricing: $0.15 per build after 500 free
+      const costPerPage = totalDeployments * CF_PRICING.pages.buildCost;
+      resources.push({
+        id: `pages-${page.projectName}`,
+        name: page.projectName,
+        type: 'pages',
+        project: projectMapping(page.projectName),
+        usage: {
+          value: totalDeployments,
+          unit: 'deployments',
+          formatted: formatNumber(totalDeployments),
+        },
+        costCurrent: costPerPage,
+        costPrior: 0,
+        costDelta: 0,
+        costDeltaPct: null,
+        status: 'healthy',
+      });
+    });
+  }
+
+  // Transform Durable Objects (aggregate)
+  if (data.durableObjects && data.durableObjects.requests > 0) {
+    resources.push({
+      id: 'do-aggregate',
+      name: 'Durable Objects (All)',
+      type: 'do',
+      project: 'platform',
+      usage: {
+        value: data.durableObjects.requests || 0,
+        unit: 'requests',
+        formatted: formatNumber(data.durableObjects.requests || 0),
+      },
+      costCurrent: costs.durableObjects || 0,
+      costPrior: 0,
+      costDelta: 0,
+      costDeltaPct: null,
+      status: 'healthy',
+    });
+  }
+
+  return resources;
+}
+
+// ========== DOM Builders ==========
+
+export function buildUsageCard(
+  label: string,
+  icon: string,
+  primaryValue: string,
+  primaryLabel: string,
+  secondaryItems?: Array<{ label: string; value: string }>
+): HTMLElement {
+  const card = document.createElement('div');
+  card.className = 'usage-card';
+
+  const header = document.createElement('div');
+  header.className = 'usage-card-header';
+
+  const iconSpan = document.createElement('span');
+  iconSpan.className = 'usage-card-icon';
+  iconSpan.textContent = icon;
+
+  const labelSpan = document.createElement('span');
+  labelSpan.className = 'usage-card-label';
+  labelSpan.textContent = label;
+
+  header.appendChild(iconSpan);
+  header.appendChild(labelSpan);
+
+  const content = document.createElement('div');
+  content.className = 'usage-card-content';
+
+  const primary = document.createElement('div');
+  primary.className = 'usage-card-primary';
+
+  const valueSpan = document.createElement('span');
+  valueSpan.className = 'usage-card-value';
+  valueSpan.textContent = primaryValue;
+
+  const labelText = document.createElement('span');
+  labelText.className = 'usage-card-primary-label';
+  labelText.textContent = primaryLabel;
+
+  primary.appendChild(valueSpan);
+  primary.appendChild(labelText);
+  content.appendChild(primary);
+
+  if (secondaryItems && secondaryItems.length > 0) {
+    const secondary = document.createElement('div');
+    secondary.className = 'usage-card-secondary';
+
+    secondaryItems.forEach((item) => {
+      const itemDiv = document.createElement('div');
+      itemDiv.className = 'usage-card-secondary-item';
+
+      const itemLabel = document.createElement('span');
+      itemLabel.className = 'secondary-label';
+      itemLabel.textContent = item.label;
+
+      const itemValue = document.createElement('span');
+      itemValue.className = 'secondary-value';
+      itemValue.textContent = item.value;
+
+      itemDiv.appendChild(itemLabel);
+      itemDiv.appendChild(itemValue);
+      secondary.appendChild(itemDiv);
+    });
+
+    content.appendChild(secondary);
+  }
+
+  card.appendChild(header);
+  card.appendChild(content);
+  return card;
+}
+
+export function buildSparklineCard(config: {
+  label: string;
+  icon: string;
+  primaryValue: string;
+  primaryLabel: string;
+  sparklineData?: number[];
+  trend: 'up' | 'down' | 'stable';
+  percentChange?: number;
+  status: 'healthy' | 'warning' | 'high' | 'critical';
+  secondaryValue?: string;
+  secondaryLabel?: string;
+  comparisonText?: string;
+  cardId: string;
+}): HTMLElement {
+  const {
+    label,
+    icon,
+    primaryValue,
+    primaryLabel,
+    sparklineData,
+    trend,
+    percentChange,
+    status,
+    secondaryValue,
+    secondaryLabel,
+    comparisonText,
+    cardId,
+  } = config;
+
+  const card = document.createElement('div');
+  card.className = 'sparkline-card';
+  card.setAttribute('role', 'region');
+  card.setAttribute('aria-label', label);
+  card.setAttribute('data-card-id', cardId);
+
+  const statusColour = STATUS_COLOURS[status] || STATUS_COLOURS.healthy;
+  const isErrorMetric = label.toLowerCase().includes('error');
+  const trendColour =
+    trend === 'stable'
+      ? '#6B7280'
+      : trend === 'up'
+        ? isErrorMetric
+          ? '#EF4444'
+          : '#10B981'
+        : isErrorMetric
+          ? '#10B981'
+          : '#EF4444';
+  const trendArrow = trend === 'up' ? '\u2191' : trend === 'down' ? '\u2193' : '\u2192';
+
+  // Header
+  const header = document.createElement('div');
+  header.className = 'card-header';
+
+  const headerLeft = document.createElement('div');
+  headerLeft.className = 'header-left';
+
+  const statusDot = document.createElement('span');
+  statusDot.className = 'status-dot';
+  statusDot.style.backgroundColor = statusColour;
+  statusDot.title = 'Status: ' + status;
+
+  const cardIcon = document.createElement('span');
+  cardIcon.className = 'card-icon';
+  cardIcon.textContent = icon;
+
+  const cardLabel = document.createElement('span');
+  cardLabel.className = 'card-label';
+  cardLabel.textContent = label;
+
+  headerLeft.appendChild(statusDot);
+  headerLeft.appendChild(cardIcon);
+  headerLeft.appendChild(cardLabel);
+  header.appendChild(headerLeft);
+
+  if (trend !== 'stable') {
+    const trendBadge = document.createElement('div');
+    trendBadge.className = 'trend-badge';
+    trendBadge.style.color = trendColour;
+    trendBadge.style.backgroundColor = trendColour + '15';
+
+    const arrow = document.createElement('span');
+    arrow.className = 'trend-arrow';
+    arrow.textContent = trendArrow;
+
+    const value = document.createElement('span');
+    value.className = 'trend-value';
+    value.textContent = Math.abs(percentChange || 0).toFixed(1) + '%';
+
+    trendBadge.appendChild(arrow);
+    trendBadge.appendChild(value);
+    header.appendChild(trendBadge);
+  }
+
+  card.appendChild(header);
+
+  // Primary
+  const primary = document.createElement('div');
+  primary.className = 'card-primary';
+
+  const primaryValueSpan = document.createElement('span');
+  primaryValueSpan.className = 'primary-value';
+  primaryValueSpan.textContent = primaryValue;
+
+  const primaryLabelSpan = document.createElement('span');
+  primaryLabelSpan.className = 'primary-label';
+  primaryLabelSpan.textContent = primaryLabel;
+
+  primary.appendChild(primaryValueSpan);
+  primary.appendChild(primaryLabelSpan);
+  card.appendChild(primary);
+
+  // Sparkline container
+  if (sparklineData && sparklineData.length > 1) {
+    const sparklineContainer = document.createElement('div');
+    sparklineContainer.className = 'sparkline-container';
+
+    const canvas = document.createElement('canvas');
+    canvas.id = 'sparkline-' + cardId;
+    canvas.className = 'sparkline-canvas';
+    canvas.setAttribute('aria-label', label + ' trend over time');
+
+    sparklineContainer.appendChild(canvas);
+    card.appendChild(sparklineContainer);
+
+    setTimeout(() => renderSparkline(canvas.id, sparklineData, trendColour), 0);
+  }
+
+  // Footer
+  if (secondaryValue || comparisonText) {
+    const footer = document.createElement('div');
+    footer.className = 'card-footer';
+
+    if (secondaryValue) {
+      const secondaryMetric = document.createElement('div');
+      secondaryMetric.className = 'secondary-metric';
+
+      const secVal = document.createElement('span');
+      secVal.className = 'secondary-value';
+      secVal.textContent = secondaryValue;
+      secondaryMetric.appendChild(secVal);
+
+      if (secondaryLabel) {
+        const secLabel = document.createElement('span');
+        secLabel.className = 'secondary-label';
+        secLabel.textContent = secondaryLabel;
+        secondaryMetric.appendChild(secLabel);
+      }
+
+      footer.appendChild(secondaryMetric);
+    }
+
+    if (comparisonText) {
+      const comparison = document.createElement('div');
+      comparison.className = 'comparison-text';
+      comparison.textContent = comparisonText;
+      footer.appendChild(comparison);
+    }
+
+    card.appendChild(footer);
+  }
+
+  return card;
+}
+
+// ========== Chart Rendering ==========
+
+async function renderSparkline(canvasId: string, data: number[], colour: string): Promise<void> {
+  const canvas = document.getElementById(canvasId) as HTMLCanvasElement | null;
+  if (!canvas) return;
+
+  try {
+    const { Chart, registerables } = await import('chart.js');
+    Chart.register(...registerables);
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: data.map((_, i) => String(i)),
+        datasets: [
+          {
+            data: data,
+            borderColor: colour,
+            backgroundColor: colour + '20',
+            fill: true,
+            tension: 0.4,
+            pointRadius: 0,
+            borderWidth: 2,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: { display: false }, tooltip: { enabled: false } },
+        scales: { x: { display: false }, y: { display: false } },
+      },
+    });
+  } catch (e) {
+    console.error('Failed to render sparkline:', e);
+  }
+}
+
+export async function buildCostBreakdownCard(
+  container: HTMLElement,
+  items: Array<{ label: string; amount: number; colour: string }>
+): Promise<void> {
+  container.textContent = '';
+
+  if (items.length === 0 || items.every((i) => i.amount === 0)) {
+    const empty = document.createElement('div');
+    empty.className = 'empty-state';
+    empty.textContent = 'No cost data available';
+    container.appendChild(empty);
+    return;
+  }
+
+  const wrapper = document.createElement('div');
+  wrapper.className = 'cost-breakdown-wrapper';
+
+  const chartContent = document.createElement('div');
+  chartContent.className = 'cost-breakdown-content';
+
+  const chartContainer = document.createElement('div');
+  chartContainer.className = 'cost-donut-container';
+
+  const canvas = document.createElement('canvas');
+  canvas.id = 'cost-breakdown-chart';
+  canvas.className = 'cost-donut-chart';
+  chartContainer.appendChild(canvas);
+
+  chartContent.appendChild(chartContainer);
+
+  // Legend
+  const legend = document.createElement('div');
+  legend.className = 'cost-legend';
+
+  items.forEach((item) => {
+    if (item.amount === 0) return;
+    const legendItem = document.createElement('div');
+    legendItem.className = 'legend-item';
+
+    const colour = document.createElement('span');
+    colour.className = 'legend-colour';
+    colour.style.backgroundColor = item.colour;
+
+    const labelSpan = document.createElement('span');
+    labelSpan.className = 'legend-label';
+    labelSpan.textContent = item.label;
+
+    const valueSpan = document.createElement('span');
+    valueSpan.className = 'legend-value';
+    valueSpan.textContent = '$' + item.amount.toFixed(2);
+
+    legendItem.appendChild(colour);
+    legendItem.appendChild(labelSpan);
+    legendItem.appendChild(valueSpan);
+    legend.appendChild(legendItem);
+  });
+
+  chartContent.appendChild(legend);
+  wrapper.appendChild(chartContent);
+  container.appendChild(wrapper);
+
+  // Render chart
+  try {
+    const { Chart, registerables } = await import('chart.js');
+    Chart.register(...registerables);
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: items.map((i) => i.label),
+        datasets: [
+          {
+            data: items.map((i) => i.amount),
+            backgroundColor: items.map((i) => i.colour),
+            borderColor: 'transparent',
+            borderWidth: 0,
+            hoverOffset: 4,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: true,
+        cutout: '65%',
+        plugins: {
+          legend: { display: false },
+          tooltip: { enabled: true, backgroundColor: '#1f2937' },
+        },
+      },
+    });
+  } catch (e) {
+    console.error('Failed to render donut chart:', e);
+  }
+}
+
+// ========== Threshold Banner ==========
+
+export function buildCompactThresholdBanner(thresholds: ThresholdData): HTMLElement | null {
+  const alertWarnings = thresholds.warnings.filter(
+    (w) => w.level === 'warning' || w.level === 'high' || w.level === 'critical'
+  );
+  if (alertWarnings.length === 0) return null;
+
+  const criticalCount = alertWarnings.filter((w) => w.level === 'critical').length;
+  const highCount = alertWarnings.filter((w) => w.level === 'high').length;
+  const warningCount = alertWarnings.filter((w) => w.level === 'warning').length;
+
+  const bannerStyle =
+    thresholds.overallLevel === 'critical'
+      ? 'banner-critical'
+      : thresholds.overallLevel === 'high'
+        ? 'banner-high'
+        : 'banner-warning';
+
+  const banner = document.createElement('div');
+  banner.className = 'compact-threshold-banner ' + bannerStyle;
+  banner.setAttribute('role', 'alert');
+
+  const summary = document.createElement('div');
+  summary.className = 'banner-summary';
+
+  const badges = document.createElement('div');
+  badges.className = 'severity-badges';
+
+  if (criticalCount > 0) {
+    badges.appendChild(createSeverityBadge(criticalCount, 'critical', 'Critical'));
+  }
+  if (highCount > 0) {
+    badges.appendChild(createSeverityBadge(highCount, 'high', 'High'));
+  }
+  if (warningCount > 0) {
+    badges.appendChild(createSeverityBadge(warningCount, 'warning', 'Warning'));
+  }
+
+  summary.appendChild(badges);
+
+  const bars = document.createElement('div');
+  bars.className = 'threshold-bars';
+
+  alertWarnings.slice(0, 4).forEach((w) => {
+    const container = document.createElement('div');
+    container.className = 'mini-bar-container';
+    container.title = w.resourceName + ': ' + w.percentage.toFixed(0) + '%';
+
+    const bar = document.createElement('div');
+    bar.className = 'mini-bar bar-' + w.level;
+    bar.style.width = Math.min(w.percentage, 100) + '%';
+
+    container.appendChild(bar);
+    bars.appendChild(container);
+  });
+
+  if (alertWarnings.length > 4) {
+    const more = document.createElement('span');
+    more.className = 'more-count';
+    more.textContent = '+' + (alertWarnings.length - 4);
+    bars.appendChild(more);
+  }
+
+  summary.appendChild(bars);
+
+  const expandBtn = document.createElement('button');
+  expandBtn.className = 'expand-button';
+  expandBtn.setAttribute('aria-expanded', 'false');
+
+  const expandIcon = document.createElement('span');
+  expandIcon.className = 'expand-icon';
+  expandIcon.textContent = '\u25BC';
+  expandBtn.appendChild(expandIcon);
+
+  summary.appendChild(expandBtn);
+  banner.appendChild(summary);
+
+  // Details section
+  const details = document.createElement('div');
+  details.className = 'banner-details';
+  details.hidden = true;
+
+  const grid = document.createElement('div');
+  grid.className = 'details-grid';
+
+  alertWarnings.forEach((w) => {
+    grid.appendChild(createThresholdDetailItem(w));
+  });
+
+  details.appendChild(grid);
+  banner.appendChild(details);
+
+  expandBtn.addEventListener('click', () => {
+    const isExpanded = expandBtn.getAttribute('aria-expanded') === 'true';
+    expandBtn.setAttribute('aria-expanded', String(!isExpanded));
+    details.hidden = isExpanded;
+  });
+
+  return banner;
+}
+
+function createSeverityBadge(count: number, level: string, label: string): HTMLElement {
+  const badge = document.createElement('span');
+  badge.className = 'severity-badge badge-' + level;
+
+  const countSpan = document.createElement('span');
+  countSpan.className = 'badge-count';
+  countSpan.textContent = String(count);
+
+  const labelSpan = document.createElement('span');
+  labelSpan.className = 'badge-label';
+  labelSpan.textContent = label;
+
+  badge.appendChild(countSpan);
+  badge.appendChild(labelSpan);
+  return badge;
+}
+
+function createThresholdDetailItem(w: ThresholdWarning): HTMLElement {
+  const item = document.createElement('div');
+  item.className = 'detail-item detail-' + w.level;
+
+  const header = document.createElement('div');
+  header.className = 'detail-header';
+
+  const dot = document.createElement('span');
+  dot.className = 'detail-dot dot-' + w.level;
+
+  const name = document.createElement('span');
+  name.className = 'detail-name';
+  name.textContent = w.resourceName;
+
+  const level = document.createElement('span');
+  level.className = 'detail-level level-' + w.level;
+  level.textContent = w.level.toUpperCase();
+
+  header.appendChild(dot);
+  header.appendChild(name);
+  header.appendChild(level);
+  item.appendChild(header);
+
+  const metric = document.createElement('div');
+  metric.className = 'detail-metric';
+  metric.textContent = w.metric;
+  item.appendChild(metric);
+
+  const progress = document.createElement('div');
+  progress.className = 'detail-progress';
+
+  const barDiv = document.createElement('div');
+  barDiv.className = 'detail-bar';
+
+  const fill = document.createElement('div');
+  fill.className = 'detail-fill fill-' + w.level;
+  fill.style.width = Math.min(w.percentage, 100) + '%';
+  barDiv.appendChild(fill);
+
+  const values = document.createElement('span');
+  values.className = 'detail-values';
+  values.textContent = formatNumber(w.current) + ' / ' + formatNumber(w.limit);
+
+  const pct = document.createElement('span');
+  pct.className = 'detail-percent';
+  pct.textContent = w.percentage.toFixed(0) + '%';
+
+  progress.appendChild(barDiv);
+  progress.appendChild(values);
+  progress.appendChild(pct);
+  item.appendChild(progress);
+
+  return item;
+}
+
+// ========== Resource Table Rendering ==========
+
+export function renderUnifiedResourceTable(resources: UnifiedResource[]): void {
+  const tbody = document.getElementById('unified-resource-table-tbody');
+  if (!tbody) {
+    console.warn('Could not find unified-resource-table-tbody');
+    return;
+  }
+
+  tbody.textContent = '';
+
+  if (resources.length === 0) {
+    const emptyRow = document.createElement('tr');
+    emptyRow.className = 'empty-row';
+
+    const emptyCell = document.createElement('td');
+    emptyCell.colSpan = 7;
+    emptyCell.className = 'empty-cell';
+
+    const emptyState = document.createElement('div');
+    emptyState.className = 'empty-state';
+
+    const emptyIcon = document.createElement('span');
+    emptyIcon.className = 'empty-icon';
+    emptyIcon.textContent = '\uD83D\uDCCA';
+
+    const emptyText = document.createElement('span');
+    emptyText.className = 'empty-text';
+    emptyText.textContent = 'No resources found';
+
+    emptyState.appendChild(emptyIcon);
+    emptyState.appendChild(emptyText);
+    emptyCell.appendChild(emptyState);
+    emptyRow.appendChild(emptyCell);
+    tbody.appendChild(emptyRow);
+    return;
+  }
+
+  resources.forEach((resource) => {
+    tbody.appendChild(createResourceRow(resource));
+  });
+
+  updateMobileCards(resources);
+}
+
+function createResourceRow(resource: UnifiedResource): HTMLElement {
+  const row = document.createElement('tr');
+  row.className = 'resource-row';
+  row.dataset.resourceId = resource.id;
+  row.dataset.resourceType = resource.type;
+  row.dataset.expandable = 'true';
+  row.tabIndex = 0;
+  row.setAttribute('role', 'row');
+
+  // Name cell
+  const nameCell = document.createElement('td');
+  nameCell.className = 'cell-name';
+  nameCell.dataset.label = 'Name';
+  const nameContent = document.createElement('div');
+  nameContent.className = 'name-content';
+  const nameSpan = document.createElement('span');
+  nameSpan.className = 'resource-name';
+  nameSpan.textContent = resource.name;
+  nameContent.appendChild(nameSpan);
+  nameCell.appendChild(nameContent);
+
+  // Type cell
+  const typeCell = document.createElement('td');
+  typeCell.className = 'cell-type';
+  typeCell.dataset.label = 'Type';
+  const typeBadge = document.createElement('span');
+  typeBadge.className = 'type-badge';
+  typeBadge.dataset.type = resource.type;
+  const typeIcon = document.createElement('span');
+  typeIcon.className = 'type-icon';
+  typeIcon.textContent = TYPE_ICONS[resource.type] || '\u2753';
+  const typeLabel = document.createElement('span');
+  typeLabel.className = 'type-label';
+  typeLabel.textContent = ' ' + (TYPE_LABELS[resource.type] || resource.type);
+  typeBadge.appendChild(typeIcon);
+  typeBadge.appendChild(typeLabel);
+  typeCell.appendChild(typeBadge);
+
+  // Project cell
+  const projectCell = document.createElement('td');
+  projectCell.className = 'cell-project';
+  projectCell.dataset.label = 'Project';
+  const projectName = document.createElement('span');
+  projectName.className = 'project-name';
+  projectName.textContent = resource.project || 'Unknown';
+  projectCell.appendChild(projectName);
+
+  // Usage cell
+  const usageCell = document.createElement('td');
+  usageCell.className = 'cell-usage';
+  usageCell.style.textAlign = 'right';
+  usageCell.dataset.label = 'Usage';
+  usageCell.dataset.value = String(resource.usage.value);
+  const usageContent = document.createElement('div');
+  usageContent.className = 'usage-content';
+  const usageValue = document.createElement('span');
+  usageValue.className = 'usage-value';
+  usageValue.textContent = resource.usage.formatted;
+  const usageUnit = document.createElement('span');
+  usageUnit.className = 'usage-unit';
+  usageUnit.textContent = ' ' + resource.usage.unit;
+  usageContent.appendChild(usageValue);
+  usageContent.appendChild(usageUnit);
+  usageCell.appendChild(usageContent);
+
+  // Cost cell
+  const costCell = document.createElement('td');
+  costCell.className = 'cell-cost';
+  costCell.style.textAlign = 'right';
+  costCell.dataset.label = 'Cost';
+  costCell.dataset.value = String(resource.costCurrent);
+  const costValue = document.createElement('span');
+  costValue.className = 'cost-value';
+  costValue.textContent = formatCurrency(resource.costCurrent);
+  costCell.appendChild(costValue);
+
+  // Change cell
+  const deltaCell = document.createElement('td');
+  deltaCell.className = 'cell-delta';
+  deltaCell.style.textAlign = 'right';
+  deltaCell.dataset.label = 'Change';
+  deltaCell.dataset.value = String(resource.costDeltaPct);
+  const deltaValue = document.createElement('span');
+  deltaValue.className = 'delta-value ' + getDeltaClass(resource.costDeltaPct);
+  deltaValue.textContent = formatDeltaPct(resource.costDeltaPct);
+  deltaCell.appendChild(deltaValue);
+
+  // Status cell
+  const statusCell = document.createElement('td');
+  statusCell.className = 'cell-status';
+  statusCell.dataset.label = 'Status';
+  const statusIndicator = document.createElement('span');
+  statusIndicator.className = 'status-indicator';
+  statusIndicator.dataset.status = resource.status;
+  statusIndicator.style.backgroundColor = STATUS_COLOURS[resource.status] || '#888';
+  statusIndicator.title = `Status: ${resource.status}`;
+  statusCell.appendChild(statusIndicator);
+
+  row.appendChild(nameCell);
+  row.appendChild(typeCell);
+  row.appendChild(projectCell);
+  row.appendChild(usageCell);
+  row.appendChild(costCell);
+  row.appendChild(deltaCell);
+  row.appendChild(statusCell);
+
+  return row;
+}
+
+function updateMobileCards(resources: UnifiedResource[]): void {
+  const cardsContainer = document.getElementById('unified-resource-table-cards');
+  if (!cardsContainer) return;
+
+  cardsContainer.textContent = '';
+
+  resources.forEach((resource) => {
+    const card = document.createElement('div');
+    card.className = 'resource-card';
+    card.dataset.resourceId = resource.id;
+
+    const cardHeader = document.createElement('div');
+    cardHeader.className = 'card-header';
+
+    const cardName = document.createElement('span');
+    cardName.className = 'card-name';
+    cardName.textContent = resource.name;
+
+    const cardType = document.createElement('span');
+    cardType.className = 'card-type';
+    cardType.textContent = TYPE_LABELS[resource.type] || resource.type;
+
+    cardHeader.appendChild(cardName);
+    cardHeader.appendChild(cardType);
+    card.appendChild(cardHeader);
+
+    const cardBody = document.createElement('div');
+    cardBody.className = 'card-body';
+
+    const rows = [
+      { label: 'Project', value: resource.project || 'Unknown' },
+      { label: 'Usage', value: resource.usage.formatted + ' ' + resource.usage.unit },
+      { label: 'Cost', value: formatCurrency(resource.costCurrent) },
+    ];
+
+    rows.forEach((row) => {
+      const rowDiv = document.createElement('div');
+      rowDiv.className = 'card-row';
+
+      const rowLabel = document.createElement('span');
+      rowLabel.className = 'row-label';
+      rowLabel.textContent = row.label;
+
+      const rowValue = document.createElement('span');
+      rowValue.className = 'row-value';
+      rowValue.textContent = row.value;
+
+      rowDiv.appendChild(rowLabel);
+      rowDiv.appendChild(rowValue);
+      cardBody.appendChild(rowDiv);
+    });
+
+    card.appendChild(cardBody);
+    cardsContainer.appendChild(card);
+  });
+}
+
+// ========== Table Sorting ==========
+
+export function initSortableHeaders(): void {
+  document.querySelectorAll('.sortable-table th.sortable').forEach((th) => {
+    th.addEventListener('click', () => {
+      const table = th.closest('table');
+      if (!table) return;
+
+      const column = th.getAttribute('data-sort');
+      const dataType = th.getAttribute('data-type') || 'string';
+      if (!column) return;
+
+      sortTable(table, column, dataType);
+    });
+  });
+}
+
+function sortTable(table: HTMLTableElement, column: string, dataType: string): void {
+  const tbody = table.querySelector('tbody');
+  if (!tbody) return;
+
+  const rows = Array.from(tbody.querySelectorAll('tr'));
+  const th = table.querySelector(`th[data-sort="${column}"]`);
+  const currentOrder = th?.getAttribute('data-order') || 'none';
+  const newOrder = currentOrder === 'asc' ? 'desc' : 'asc';
+
+  // Reset all headers
+  table.querySelectorAll('th').forEach((h) => h.setAttribute('data-order', 'none'));
+  th?.setAttribute('data-order', newOrder);
+
+  rows.sort((a, b) => {
+    const aCell =
+      a.querySelector(`td[data-label="${column}"]`) || a.cells[getColumnIndex(table, column)];
+    const bCell =
+      b.querySelector(`td[data-label="${column}"]`) || b.cells[getColumnIndex(table, column)];
+
+    const aVal = aCell?.getAttribute('data-value') || aCell?.textContent?.trim() || '';
+    const bVal = bCell?.getAttribute('data-value') || bCell?.textContent?.trim() || '';
+
+    if (dataType === 'number') {
+      const aNum = parseFloat(aVal) || 0;
+      const bNum = parseFloat(bVal) || 0;
+      return newOrder === 'asc' ? aNum - bNum : bNum - aNum;
+    }
+
+    return newOrder === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+  });
+
+  rows.forEach((row) => tbody.appendChild(row));
+}
+
+function getColumnIndex(table: HTMLTableElement, column: string): number {
+  const headers = Array.from(table.querySelectorAll('th'));
+  return headers.findIndex((h) => h.getAttribute('data-sort') === column);
+}
+
+// ========== Responsive Handling ==========
+
+export function handleResponsiveSwitch(): void {
+  const tableView = document.getElementById('unified-resource-table');
+  const cardsView = document.getElementById('unified-resource-table-cards');
+
+  if (!tableView || !cardsView) return;
+
+  if (window.innerWidth < 768) {
+    tableView.style.display = 'none';
+    cardsView.style.display = 'block';
+  } else {
+    tableView.style.display = 'block';
+    cardsView.style.display = 'none';
+  }
+}
+
+// ========== Data Loading ==========
+
+export async function loadUsageData(nocache = false): Promise<void> {
+  const { period, project, compare } = getSSRConfig();
+
+  // Show loading state - handle both overview section and main page containers
+  const loadingContainer = document.getElementById('overview-loading');
+  const contentContainer = document.getElementById('overview-content');
+  const mainLoadingState = document.getElementById('loading-state');
+  const mainDataContainer = document.getElementById('data-container');
+  const mainErrorBanner = document.getElementById('error-banner');
+
+  if (loadingContainer) loadingContainer.style.display = 'block';
+  if (contentContainer) contentContainer.style.display = 'none';
+
+  try {
+    const params = new URLSearchParams({ period, project });
+
+    // Add nocache parameter if requested (bypasses KV cache)
+    if (nocache) {
+      params.set('nocache', 'true');
+    }
+
+    // If comparison mode is active, fetch from /api/usage/compare instead
+    if (compare !== 'none') {
+      params.set('compare', compare);
+      // Include credentials to pass Cloudflare Access JWT cookie
+      const response = await fetch(`/api/usage/compare?${params}`, {
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const json = await response.json();
+
+      if (!json.success) {
+        throw new Error(json.error || 'Invalid response');
+      }
+
+      // Compare API returns { current: { data, costs, ... }, prior: { data, costs, ... } }
+      renderOverviewData({
+        usage: json.current.data,
+        costs: json.current.costs,
+        thresholds: json.thresholds || { alerts: [], counts: { low: 0, medium: 0, high: 0 } },
+        priorUsage: json.prior.data,
+        priorCosts: json.prior.costs,
+      });
+    } else {
+      // Standard usage fetch (no comparison)
+      // Include credentials to pass Cloudflare Access JWT cookie
+      const response = await fetch(`/api/usage?${params}`, {
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const json = await response.json();
+
+      if (!json.success) {
+        throw new Error(json.error || 'Invalid response');
+      }
+
+      // API returns { data: UsageData, costs: CostBreakdown, thresholds: ThresholdData }
+      renderOverviewData({
+        usage: json.data,
+        costs: json.costs,
+        thresholds: json.thresholds,
+      });
+    }
+
+    // Hide main page loading state, show data container
+    if (mainLoadingState) mainLoadingState.style.display = 'none';
+    if (mainDataContainer) mainDataContainer.style.display = 'block';
+    if (mainErrorBanner) mainErrorBanner.style.display = 'none';
+  } catch (error) {
+    console.error('Failed to load usage data:', error);
+    const errorContainer = document.getElementById('overview-error');
+    if (errorContainer) {
+      errorContainer.style.display = 'block';
+      errorContainer.textContent =
+        'Failed to load usage data: ' + (error instanceof Error ? error.message : 'Unknown error');
+    }
+    // Show main page error banner
+    if (mainErrorBanner) {
+      mainErrorBanner.style.display = 'block';
+      const errorMsg = document.getElementById('error-message');
+      if (errorMsg) {
+        errorMsg.textContent = error instanceof Error ? error.message : 'Unknown error';
+      }
+    }
+    if (mainLoadingState) mainLoadingState.style.display = 'none';
+  } finally {
+    if (loadingContainer) loadingContainer.style.display = 'none';
+    if (contentContainer) contentContainer.style.display = 'block';
+  }
+}
+
+function renderOverviewData(data: {
+  usage: UsageData;
+  costs: CostBreakdown;
+  thresholds: ThresholdData;
+  priorUsage?: UsageData;
+  priorCosts?: CostBreakdown;
+}): void {
+  const { usage, costs, thresholds, priorUsage, priorCosts } = data;
+
+  // Render threshold banner
+  const bannerContainer = document.getElementById('threshold-banner-container');
+  if (bannerContainer) {
+    bannerContainer.textContent = '';
+    const banner = buildCompactThresholdBanner(thresholds);
+    if (banner) {
+      bannerContainer.appendChild(banner);
+    }
+  }
+
+  // Render cost breakdown chart (Bug fix: ID was 'cost-breakdown-container', corrected to 'cost-donut-container')
+  const costContainer = document.getElementById('cost-donut-container');
+  if (costContainer) {
+    const items = [
+      { label: 'Workers', amount: costs.workers || 0, colour: '#3B82F6' },
+      { label: 'D1', amount: costs.d1 || 0, colour: '#10B981' },
+      { label: 'KV', amount: costs.kv || 0, colour: '#F59E0B' },
+      { label: 'R2', amount: costs.r2 || 0, colour: '#EF4444' },
+      { label: 'Vectorize', amount: costs.vectorize || 0, colour: '#8B5CF6' },
+      { label: 'AI Gateway', amount: costs.aiGateway || 0, colour: '#EC4899' },
+      { label: 'Pages', amount: costs.pages || 0, colour: '#6366F1' },
+      { label: 'Durable Objects', amount: costs.durableObjects || 0, colour: '#14B8A6' },
+    ].filter((i) => i.amount > 0);
+
+    buildCostBreakdownCard(costContainer, items);
+  }
+
+  // Update total cost display (Bug fix: ID was 'total-cost-value', corrected to 'cost-value')
+  const totalCostEl = document.getElementById('cost-value');
+  if (totalCostEl) {
+    totalCostEl.textContent = formatCurrency(costs.total || 0);
+  }
+
+  // Transform current resources
+  let resources = transformToUnifiedResources(usage, costs, identifyProject);
+
+  // If comparison data is available, apply it to calculate deltas
+  if (priorUsage && priorCosts) {
+    const priorResources = transformToUnifiedResources(priorUsage, priorCosts, identifyProject);
+    resources = applyComparisonData(resources, priorResources);
+  }
+
+  // Render resources table
+  renderUnifiedResourceTable(resources);
+
+  // Update workers breakdown table (Enhancement #1: per-project Workers breakdown)
+  if (usage.workers && usage.workers.length > 0) {
+    updateWorkersBreakdownTable(usage.workers);
+  }
+
+  // Update resource count
+  const countEl = document.getElementById('resource-count-value');
+  if (countEl) {
+    countEl.textContent = String(resources.length);
+  }
+}
+
+// ========== Initialization ==========
+
+export function initOverviewTab(): void {
+  loadUsageData();
+  initSortableHeaders();
+  handleResponsiveSwitch();
+  window.addEventListener('resize', handleResponsiveSwitch);
+
+  // Initialize daily chart data (nanostores)
+  syncFromURL(); // Read initial state from URL params
+  initSubscriptions(); // Set up auto-fetching when filters change
+  fetchDailyData(); // Fetch initial daily data for chart
+
+  // Refresh button handler (bypasses cache)
+  const refreshBtn = document.getElementById('refresh-data');
+  if (refreshBtn) {
+    refreshBtn.addEventListener('click', async () => {
+      const icon = refreshBtn.querySelector('.refresh-icon');
+      if (icon) {
+        icon.classList.add('spinning');
+      }
+      refreshBtn.setAttribute('disabled', 'true');
+
+      try {
+        await fetchDailyData({ nocache: true });
+        // Also reload resource table data
+        await loadUsageData(true);
+      } finally {
+        if (icon) {
+          icon.classList.remove('spinning');
+        }
+        refreshBtn.removeAttribute('disabled');
+      }
+    });
+  }
+}