@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/shared/dashboard/src/components/costs/ProviderCostsGrid.tsx

@@ -0,0 +1,401 @@
+/**
+ * Provider Costs Grid Component
+ *
+ * Displays third-party provider usage and costs in a card grid.
+ * Fetches data from /api/costs/providers endpoint.
+ *
+ * GitHub gets special treatment: subscription fees (GHEC, GHAS) shown
+ * separately from usage overage (Actions, Storage).
+ */
+import { useState, useEffect } from 'react';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface ProviderResource {
+  provider: string;
+  resourceType: string;
+  resourceName?: string;
+  usageValue: number;
+  usageUnit: string;
+  costUsd: number;
+  snapshotDate: string;
+  label?: string;
+  category?: string;
+}
+
+interface ProviderSummary {
+  provider: string;
+  displayName: string;
+  totalCostUsd: number;
+  resources: ProviderResource[];
+  latestSnapshot: string;
+  subscriptionCostUsd?: number;
+}
+
+interface ApiResponse {
+  success: boolean;
+  providers?: ProviderSummary[];
+  totalCostUsd?: number;
+  period?: { startDate: string; endDate: string };
+  error?: string;
+}
+
+interface Props {
+  period: string;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const PROVIDER_ICONS: Record<string, string> = {
+  github: '🐙',
+  openai: '🤖',
+  anthropic: '🧠',
+  apify: '🕷️',
+  resend: '✉️',
+  minimax: '🎯',
+  gemini: '💎',
+};
+
+const PROVIDER_GRADIENTS: Record<string, string> = {
+  github: 'from-gray-700 to-gray-900',
+  openai: 'from-green-500 to-emerald-600',
+  anthropic: 'from-orange-500 to-amber-600',
+  apify: 'from-teal-500 to-green-600',
+  resend: 'from-violet-500 to-purple-600',
+  minimax: 'from-indigo-500 to-blue-600',
+  gemini: 'from-blue-400 to-indigo-500',
+};
+
+const PERIOD_LABELS: Record<string, string> = {
+  '24h': 'Today',
+  '7d': 'Last 7 days',
+  '30d': 'Last 30 days',
+};
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatResourceLabel(resource: ProviderResource): string {
+  if (resource.label) return resource.label;
+  // Fallback: convert snake_case to Title Case
+  return resource.resourceType.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function formatValue(value: number, unit: string): string {
+  if (unit === 'dollars' || unit === 'usd') {
+    return `$${value.toFixed(2)}`;
+  }
+  if (unit === 'tokens') {
+    if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M tokens`;
+    if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K tokens`;
+    return `${value.toLocaleString()} tokens`;
+  }
+  if (unit === 'minutes') {
+    return `${value.toLocaleString()} min`;
+  }
+  if (unit === 'requests') {
+    return `${value.toLocaleString()} req`;
+  }
+  if (unit === 'user_months') {
+    return `${value.toFixed(1)} user-mo`;
+  }
+  if (unit === 'seats') {
+    return `${value.toLocaleString()} seats`;
+  }
+  if (unit === 'gb_hours') {
+    return `${value.toFixed(1)} GB-hr`;
+  }
+  if (unit === 'percent') {
+    return `${value.toFixed(1)}%`;
+  }
+  if (unit === 'bytes') {
+    if (value > 1024 * 1024 * 1024) return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+    if (value > 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(2)} MB`;
+    return `${(value / 1024).toFixed(2)} KB`;
+  }
+  if (unit === 'gb') {
+    return `${value.toFixed(2)} GB`;
+  }
+  if (unit === 'units') {
+    return `${value.toFixed(2)} units`;
+  }
+  return `${value.toLocaleString()}${unit ? ` ${unit}` : ''}`;
+}
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('en-AU', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  });
+}
+
+// =============================================================================
+// COMPONENTS
+// =============================================================================
+
+function LoadingState() {
+  return (
+    <div className="space-y-4">
+      <div className="animate-pulse">
+        <div className="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="h-48 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+          <div className="h-48 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+          <div className="h-48 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ErrorState({ message }: { message: string }) {
+  return (
+    <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+      <div className="flex items-center gap-3">
+        <span className="text-xl">⚠️</span>
+        <div>
+          <strong className="text-red-800 dark:text-red-200">Error loading data</strong>
+          <p className="text-sm text-red-600 dark:text-red-300 mt-1">{message}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="text-center py-12">
+      <div className="text-6xl mb-4">📊</div>
+      <h3 className="text-lg font-medium text-gray-900 dark:text-white">No provider data</h3>
+      <p className="text-gray-500 dark:text-gray-400 mt-1">
+        Third-party usage data will appear here once collected.
+      </p>
+    </div>
+  );
+}
+
+function TotalCostHero({ totalCost, period }: { totalCost: number; period: string }) {
+  return (
+    <div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl p-6 text-white">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-purple-100 text-sm font-medium">Total Third-Party Usage Costs</p>
+          <p className="text-4xl font-bold mt-1">${totalCost.toFixed(2)}</p>
+          <p className="text-purple-200 text-sm mt-2">
+            {PERIOD_LABELS[period] || 'Last 30 days'} — excludes fixed subscriptions
+          </p>
+        </div>
+        <div className="text-6xl opacity-20">💳</div>
+      </div>
+    </div>
+  );
+}
+
+function ResourceRow({ resource }: { resource: ProviderResource }) {
+  const isSubscription = resource.category === 'subscription';
+
+  return (
+    <div className="flex justify-between items-center text-sm py-1.5">
+      <span className="text-gray-600 dark:text-gray-400 truncate mr-2 flex items-center gap-1.5">
+        {isSubscription && (
+          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300">
+            LICENSE
+          </span>
+        )}
+        {formatResourceLabel(resource)}
+      </span>
+      <div className="flex items-center gap-2 whitespace-nowrap">
+        <span className="text-gray-900 dark:text-white font-medium">
+          {formatValue(resource.usageValue, resource.usageUnit)}
+        </span>
+        {resource.costUsd > 0 && (
+          <span className="text-gray-400 dark:text-gray-500 text-xs">
+            (${resource.costUsd.toFixed(2)})
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function GitHubCard({ provider }: { provider: ProviderSummary }) {
+  const icon = PROVIDER_ICONS.github;
+  const gradient = PROVIDER_GRADIENTS.github;
+  const subscriptionResources = provider.resources.filter((r) => r.category === 'subscription');
+  const usageResources = provider.resources.filter((r) => r.category !== 'subscription');
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Header */}
+      <div className={`bg-gradient-to-r ${gradient} p-4 text-white`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-2xl">{icon}</span>
+            <span className="font-semibold">{provider.displayName}</span>
+          </div>
+          <div className="text-right">
+            <span className="text-xl font-bold">${provider.totalCostUsd.toFixed(2)}</span>
+            <p className="text-xs text-gray-300 mt-0.5">usage overage</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="p-4 space-y-3">
+        {/* Usage section */}
+        {usageResources.length > 0 && (
+          <div>
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">
+              Usage (above allowances)
+            </p>
+            <div className="divide-y divide-gray-100 dark:divide-gray-700">
+              {usageResources.map((r, idx) => (
+                <ResourceRow key={idx} resource={r} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Subscription section */}
+        {subscriptionResources.length > 0 && (
+          <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+            <div className="flex justify-between items-center mb-1">
+              <p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                Subscriptions (fixed monthly)
+              </p>
+              {provider.subscriptionCostUsd != null && provider.subscriptionCostUsd > 0 && (
+                <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
+                  ${provider.subscriptionCostUsd.toFixed(2)}/mo
+                </span>
+              )}
+            </div>
+            <div className="divide-y divide-gray-100 dark:divide-gray-700">
+              {subscriptionResources.map((r, idx) => (
+                <ResourceRow key={idx} resource={r} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        <p className="text-xs text-gray-400 mt-2">
+          Last updated: {formatDate(provider.latestSnapshot)}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function StandardCard({ provider }: { provider: ProviderSummary }) {
+  const icon = PROVIDER_ICONS[provider.provider] || '📦';
+  const gradient = PROVIDER_GRADIENTS[provider.provider] || 'from-gray-500 to-gray-600';
+  const displayResources = provider.resources.slice(0, 6);
+  const moreCount = provider.resources.length - 6;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Header with gradient */}
+      <div className={`bg-gradient-to-r ${gradient} p-4 text-white`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-2xl">{icon}</span>
+            <span className="font-semibold">{provider.displayName}</span>
+          </div>
+          <span className="text-xl font-bold">${provider.totalCostUsd.toFixed(2)}</span>
+        </div>
+      </div>
+
+      {/* Resources */}
+      <div className="p-4">
+        <div className="divide-y divide-gray-100 dark:divide-gray-700">
+          {displayResources.map((r, idx) => (
+            <ResourceRow key={idx} resource={r} />
+          ))}
+        </div>
+        {moreCount > 0 && (
+          <p className="text-xs text-gray-400 mt-1">+{moreCount} more resources</p>
+        )}
+        <p className="text-xs text-gray-400 mt-3">
+          Last updated: {formatDate(provider.latestSnapshot)}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function ProviderCard({ provider }: { provider: ProviderSummary }) {
+  if (provider.provider === 'github') {
+    return <GitHubCard provider={provider} />;
+  }
+  return <StandardCard provider={provider} />;
+}
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+
+export default function ProviderCostsGrid({ period }: Props) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [providers, setProviders] = useState<ProviderSummary[]>([]);
+  const [totalCost, setTotalCost] = useState(0);
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const response = await fetch(`/api/costs/providers?period=${period}`);
+        const data: ApiResponse = await response.json();
+
+        if (!data.success) {
+          throw new Error(data.error || 'Failed to load data');
+        }
+
+        setProviders(data.providers || []);
+        setTotalCost(data.totalCostUsd || 0);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [period]);
+
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  if (error) {
+    return <ErrorState message={error} />;
+  }
+
+  if (providers.length === 0) {
+    return (
+      <div className="space-y-6">
+        <TotalCostHero totalCost={0} period={period} />
+        <EmptyState />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <TotalCostHero totalCost={totalCost} period={period} />
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {providers.map((provider) => (
+          <ProviderCard key={provider.provider} provider={provider} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/costs/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Costs Components Export
+ */
+export { default as ProviderCostsGrid } from './ProviderCostsGrid';

package/templates/shared/dashboard/src/components/overview/AlertBanner.tsx

@@ -0,0 +1,94 @@
+/**
+ * Global Alert Banner
+ * Displays at the top of every page when there are critical issues:
+ * - P0/P1 open errors
+ * - Tripped circuit breakers
+ * - Services down (Gatus)
+ */
+import { useState, useEffect } from 'react';
+
+interface AlertData {
+  hasP0P1: boolean;
+  trippedBreakers: number;
+  servicesDown: number;
+  p0Count?: number;
+  p1Count?: number;
+}
+
+export function AlertBanner() {
+  const [alerts, setAlerts] = useState<AlertData | null>(null);
+
+  useEffect(() => {
+    fetch('/api/overview/summary')
+      .then(res => res.json())
+      .then(data => {
+        if (data.alerts) {
+          setAlerts({
+            ...data.alerts,
+            p0Count: data.errors?.p0Count ?? 0,
+            p1Count: data.errors?.p1Count ?? 0,
+          });
+        }
+      })
+      .catch(() => {
+        // Silently fail - banner just won't show
+      });
+  }, []);
+
+  if (!alerts) return null;
+
+  const hasIssues = alerts.hasP0P1 || alerts.trippedBreakers > 0 || alerts.servicesDown > 0;
+  if (!hasIssues) return null;
+
+  const items: Array<{ label: string; count: number; href: string; colour: string }> = [];
+
+  if (alerts.p0Count && alerts.p0Count > 0) {
+    items.push({
+      label: 'P0 error',
+      count: alerts.p0Count,
+      href: '/health?tab=errors',
+      colour: 'bg-red-500',
+    });
+  }
+  if (alerts.p1Count && alerts.p1Count > 0) {
+    items.push({
+      label: 'P1 error',
+      count: alerts.p1Count,
+      href: '/health?tab=errors',
+      colour: 'bg-orange-500',
+    });
+  }
+  if (alerts.trippedBreakers > 0) {
+    items.push({
+      label: 'tripped breaker',
+      count: alerts.trippedBreakers,
+      href: '/resources?tab=features',
+      colour: 'bg-yellow-500',
+    });
+  }
+  if (alerts.servicesDown > 0) {
+    items.push({
+      label: 'service down',
+      count: alerts.servicesDown,
+      href: '/health?tab=infrastructure',
+      colour: 'bg-red-500',
+    });
+  }
+
+  return (
+    <div className="bg-red-600 dark:bg-red-900 text-white px-4 py-2 text-sm flex items-center justify-center gap-4 flex-wrap">
+      <span className="font-semibold">Attention Required</span>
+      {items.map((item, i) => (
+        <a
+          key={i}
+          href={item.href}
+          className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-white/20 hover:bg-white/30 transition-colors"
+        >
+          <span className={`w-2 h-2 rounded-full ${item.colour} animate-pulse`} />
+          {item.count} {item.label}{item.count !== 1 ? 's' : ''}
+          <span className="opacity-75">→</span>
+        </a>
+      ))}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/overview/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Overview Components Barrel Export
+ */
+export { MissionControl } from './MissionControl';
+export { AlertBanner } from './AlertBanner';
+export { HealthQuadrant } from './HealthQuadrant';
+export { ErrorsQuadrant } from './ErrorsQuadrant';
+export { CostQuadrant } from './CostQuadrant';
+export { ActivityFeed } from './ActivityFeed';

package/templates/shared/dashboard/src/components/resources/CostChart.tsx

@@ -0,0 +1,170 @@
+/**
+ * CostChart — Stacked bar chart for daily costs by provider
+ *
+ * Pure CSS bars (no chart library). Shows daily cost breakdown across all
+ * providers, or filtered to a single provider when a card is selected.
+ * Matches existing HourlyUsageChart pattern.
+ */
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface ChartDataPoint {
+  date: string;
+  providers: Record<string, number>;
+}
+
+interface Props {
+  data: ChartDataPoint[];
+  selectedProvider: string | null;
+  providerColours: Record<string, string>;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const DEFAULT_COLOURS: Record<string, string> = {
+  cloudflare: '#f97316', // orange-500
+  github: '#6b7280',     // gray-500
+  openai: '#10b981',     // emerald-500
+  anthropic: '#f59e0b',  // amber-500
+  gemini: '#6366f1',     // indigo-500
+  apify: '#14b8a6',      // teal-500
+  resend: '#8b5cf6',     // violet-500
+  minimax: '#3b82f6',    // blue-500
+};
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatDateLabel(dateStr: string): string {
+  const d = new Date(dateStr + 'T00:00:00Z');
+  return d.toLocaleDateString('en-AU', { day: 'numeric', month: 'short' });
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function CostChart({ data, selectedProvider, providerColours }: Props) {
+  const colours = { ...DEFAULT_COLOURS, ...providerColours };
+
+  if (data.length === 0) {
+    return (
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 text-center">
+        <p className="text-sm text-gray-500 dark:text-gray-400">No chart data available for this period.</p>
+      </div>
+    );
+  }
+
+  // Compute max total for scaling
+  const barData = data.map(point => {
+    const entries = Object.entries(point.providers);
+    const filtered = selectedProvider
+      ? entries.filter(([p]) => p === selectedProvider)
+      : entries;
+    const total = filtered.reduce((s, [, v]) => s + v, 0);
+    return { date: point.date, segments: filtered, total };
+  });
+
+  const maxTotal = Math.max(...barData.map(d => d.total), 0.01);
+
+  // Determine label density (show every Nth label to avoid crowding)
+  const labelStep = data.length > 30 ? 7 : data.length > 14 ? 3 : data.length > 7 ? 2 : 1;
+
+  // Collect all providers for legend
+  const allProviders = new Set<string>();
+  for (const point of data) {
+    for (const p of Object.keys(point.providers)) {
+      if (!selectedProvider || p === selectedProvider) allProviders.add(p);
+    }
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+      {/* Legend */}
+      <div className="flex flex-wrap gap-3 mb-3">
+        {Array.from(allProviders).map(p => (
+          <div key={p} className="flex items-center gap-1.5">
+            <div
+              className="w-2.5 h-2.5 rounded-sm flex-shrink-0"
+              style={{ backgroundColor: colours[p] ?? '#9ca3af' }}
+            />
+            <span className="text-[10px] text-gray-600 dark:text-gray-400 capitalize">{p}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Y-axis max label */}
+      <div className="flex items-end mb-1">
+        <span className="text-[9px] text-gray-400 dark:text-gray-500 w-12 text-right mr-2">
+          ${maxTotal.toFixed(2)}
+        </span>
+        <div className="flex-1 border-b border-dashed border-gray-200 dark:border-gray-700" />
+      </div>
+
+      {/* Bars */}
+      <div className="flex items-end gap-px" style={{ height: '120px' }}>
+        {barData.map((bar, idx) => {
+          const heightPct = maxTotal > 0 ? (bar.total / maxTotal) * 100 : 0;
+          return (
+            <div key={bar.date} className="flex-1 flex flex-col justify-end h-full group relative">
+              {/* Stacked bar */}
+              <div
+                className="w-full rounded-t-sm overflow-hidden flex flex-col-reverse transition-all"
+                style={{ height: `${heightPct}%`, minHeight: bar.total > 0 ? '2px' : '0px' }}
+              >
+                {bar.segments.map(([provider, cost]) => {
+                  const segPct = bar.total > 0 ? (cost / bar.total) * 100 : 0;
+                  return (
+                    <div
+                      key={provider}
+                      style={{
+                        height: `${segPct}%`,
+                        backgroundColor: colours[provider] ?? '#9ca3af',
+                        minHeight: cost > 0 ? '1px' : '0px',
+                      }}
+                    />
+                  );
+                })}
+              </div>
+
+              {/* Tooltip */}
+              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block z-10 pointer-events-none">
+                <div className="bg-gray-900 text-white text-[10px] rounded px-2 py-1.5 whitespace-nowrap shadow-lg">
+                  <div className="font-medium mb-0.5">{formatDateLabel(bar.date)}</div>
+                  {bar.segments.map(([p, cost]) => (
+                    <div key={p} className="flex items-center gap-1">
+                      <div className="w-1.5 h-1.5 rounded-sm" style={{ backgroundColor: colours[p] }} />
+                      <span className="capitalize">{p}:</span>
+                      <span className="font-medium">${cost.toFixed(2)}</span>
+                    </div>
+                  ))}
+                  <div className="border-t border-gray-700 mt-0.5 pt-0.5 font-medium">
+                    Total: ${bar.total.toFixed(2)}
+                  </div>
+                </div>
+              </div>
+
+              {/* X-axis label (sparse) */}
+              {idx % labelStep === 0 && (
+                <span className="text-[8px] text-gray-400 dark:text-gray-500 mt-1 text-center block truncate">
+                  {formatDateLabel(bar.date)}
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Zero line */}
+      <div className="flex items-start mt-0.5">
+        <span className="text-[9px] text-gray-400 dark:text-gray-500 w-12 text-right mr-2">$0</span>
+        <div className="flex-1 border-t border-gray-200 dark:border-gray-700" />
+      </div>
+    </div>
+  );
+}