@littlebearapps/platform-admin-sdk 2.0.0 → 2.1.0

package/templates/full/dashboard/src/components/usage/AIModelBreakdown.tsx

@@ -0,0 +1,364 @@
+/**
+ * AI Model Breakdown Component
+ *
+ * Displays per-model usage from Workers AI and AI Gateway.
+ * Shows costs, requests, and token counts by model.
+ */
+import { useState, useEffect } from 'react';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface WorkersAIModel {
+  model: string;
+  project: string;
+  requests: number;
+  inputTokens: number;
+  outputTokens: number;
+  costUsd: number;
+}
+
+interface AIGatewayModel {
+  provider: string;
+  model: string;
+  gatewayId: string;
+  requests: number;
+  cachedRequests: number;
+  tokensIn: number;
+  tokensOut: number;
+  costUsd: number;
+}
+
+interface ApiResponse {
+  success: boolean;
+  workersAI?: {
+    models: WorkersAIModel[];
+    totalCostUsd: number;
+    totalRequests: number;
+  };
+  aiGateway?: {
+    models: AIGatewayModel[];
+    totalCostUsd: number;
+    totalRequests: number;
+    byProvider: Record<string, { requests: number; costUsd: number }>;
+  };
+  error?: string;
+}
+
+interface Props {
+  period: string;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const PROVIDER_COLORS: Record<string, string> = {
+  openai: 'bg-green-500',
+  anthropic: 'bg-orange-500',
+  'google-ai-studio': 'bg-blue-500',
+  'workers-ai': 'bg-amber-500',
+  deepseek: 'bg-cyan-500',
+  minimax: 'bg-indigo-500',
+};
+
+const PROVIDER_LABELS: Record<string, string> = {
+  openai: 'OpenAI',
+  anthropic: 'Anthropic',
+  'google-ai-studio': 'Google AI',
+  'workers-ai': 'Workers AI',
+  deepseek: 'DeepSeek',
+  minimax: 'MiniMax',
+};
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatNumber(n: number): string {
+  if (n >= 1_000_000) {
+    return `${(n / 1_000_000).toFixed(1)}M`;
+  }
+  if (n >= 1_000) {
+    return `${(n / 1_000).toFixed(1)}K`;
+  }
+  return n.toLocaleString();
+}
+
+function formatModelName(model: string): string {
+  // Shorten common model prefixes
+  return model
+    .replace('@cf/meta/', '')
+    .replace('@cf/mistral/', '')
+    .replace('@cf/', '')
+    .replace('gpt-', 'GPT-')
+    .replace('claude-', 'Claude ')
+    .replace('gemini-', 'Gemini ');
+}
+
+// =============================================================================
+// COMPONENTS
+// =============================================================================
+
+function LoadingState() {
+  return (
+    <div className="animate-pulse space-y-3">
+      <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3" />
+      <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded" />
+      <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded" />
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+      <div className="text-3xl mb-2">🤖</div>
+      <p className="text-sm">No AI model usage data available</p>
+    </div>
+  );
+}
+
+function ProviderBar({
+  byProvider,
+  totalCost,
+}: {
+  byProvider: Record<string, { requests: number; costUsd: number }>;
+  totalCost: number;
+}) {
+  const providers = Object.entries(byProvider).sort((a, b) => b[1].costUsd - a[1].costUsd);
+
+  if (providers.length === 0 || totalCost === 0) return null;
+
+  return (
+    <div className="mb-4">
+      <div className="flex h-3 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700">
+        {providers.map(([provider, data]) => {
+          const width = (data.costUsd / totalCost) * 100;
+          if (width < 1) return null;
+          return (
+            <div
+              key={provider}
+              className={`${PROVIDER_COLORS[provider] || 'bg-gray-400'} transition-all`}
+              style={{ width: `${width}%` }}
+              title={`${PROVIDER_LABELS[provider] || provider}: $${data.costUsd.toFixed(2)}`}
+            />
+          );
+        })}
+      </div>
+      <div className="flex flex-wrap gap-3 mt-2">
+        {providers.map(([provider, data]) => (
+          <div key={provider} className="flex items-center gap-1.5 text-xs">
+            <span className={`w-2 h-2 rounded-full ${PROVIDER_COLORS[provider] || 'bg-gray-400'}`} />
+            <span className="text-gray-600 dark:text-gray-400">
+              {PROVIDER_LABELS[provider] || provider}
+            </span>
+            <span className="text-gray-900 dark:text-white font-medium">
+              ${data.costUsd.toFixed(2)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ModelTable({ models, type }: { models: (WorkersAIModel | AIGatewayModel)[]; type: 'workersai' | 'gateway' }) {
+  const [expanded, setExpanded] = useState(false);
+  const displayModels = expanded ? models : models.slice(0, 5);
+  const hasMore = models.length > 5;
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+            <th className="pb-2 font-medium">Model</th>
+            {type === 'gateway' && <th className="pb-2 font-medium">Provider</th>}
+            <th className="pb-2 font-medium text-right">Requests</th>
+            <th className="pb-2 font-medium text-right">Tokens</th>
+            <th className="pb-2 font-medium text-right">Cost</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+          {displayModels.map((m, idx) => {
+            const isGateway = 'provider' in m;
+            const tokens = isGateway
+              ? (m as AIGatewayModel).tokensIn + (m as AIGatewayModel).tokensOut
+              : (m as WorkersAIModel).inputTokens + (m as WorkersAIModel).outputTokens;
+
+            return (
+              <tr key={idx} className="text-gray-900 dark:text-white">
+                <td className="py-2">
+                  <code className="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                    {formatModelName(m.model)}
+                  </code>
+                </td>
+                {type === 'gateway' && (
+                  <td className="py-2 text-gray-600 dark:text-gray-400">
+                    {PROVIDER_LABELS[(m as AIGatewayModel).provider] || (m as AIGatewayModel).provider}
+                  </td>
+                )}
+                <td className="py-2 text-right font-mono">{formatNumber(m.requests)}</td>
+                <td className="py-2 text-right font-mono text-gray-600 dark:text-gray-400">
+                  {formatNumber(tokens)}
+                </td>
+                <td className="py-2 text-right font-medium">${m.costUsd.toFixed(2)}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {hasMore && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="mt-2 text-xs text-blue-600 dark:text-blue-400 hover:underline"
+        >
+          {expanded ? 'Show less' : `Show ${models.length - 5} more models`}
+        </button>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+
+export default function AIModelBreakdown({ period }: Props) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<ApiResponse | null>(null);
+  const [activeTab, setActiveTab] = useState<'gateway' | 'workersai'>('gateway');
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const response = await fetch(`/api/usage/ai-models?period=${period}`);
+        const result: ApiResponse = await response.json();
+
+        if (!result.success) {
+          throw new Error(result.error || 'Failed to load data');
+        }
+
+        setData(result);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [period]);
+
+  if (loading) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <h3 className="font-medium text-gray-900 dark:text-white mb-4">AI Model Usage</h3>
+        <LoadingState />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <h3 className="font-medium text-gray-900 dark:text-white mb-2">AI Model Usage</h3>
+        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+      </div>
+    );
+  }
+
+  const hasGatewayData = (data?.aiGateway?.models?.length ?? 0) > 0;
+  const hasWorkersAIData = (data?.workersAI?.models?.length ?? 0) > 0;
+
+  if (!hasGatewayData && !hasWorkersAIData) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <h3 className="font-medium text-gray-900 dark:text-white mb-2">AI Model Usage</h3>
+        <EmptyState />
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Header with tabs */}
+      <div className="border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between p-4 pb-0">
+          <h3 className="font-medium text-gray-900 dark:text-white">AI Model Usage</h3>
+          <div className="text-sm">
+            <span className="text-gray-500 dark:text-gray-400">Total: </span>
+            <span className="font-semibold text-gray-900 dark:text-white">
+              ${((data?.aiGateway?.totalCostUsd ?? 0) + (data?.workersAI?.totalCostUsd ?? 0)).toFixed(2)}
+            </span>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex px-4 mt-3">
+          <button
+            onClick={() => setActiveTab('gateway')}
+            className={`px-3 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+              activeTab === 'gateway'
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+            }`}
+          >
+            AI Gateway
+            {hasGatewayData && (
+              <span className="ml-1.5 text-xs bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded">
+                ${data?.aiGateway?.totalCostUsd?.toFixed(2)}
+              </span>
+            )}
+          </button>
+          <button
+            onClick={() => setActiveTab('workersai')}
+            className={`px-3 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+              activeTab === 'workersai'
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+            }`}
+          >
+            Workers AI
+            {hasWorkersAIData && (
+              <span className="ml-1.5 text-xs bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded">
+                ${data?.workersAI?.totalCostUsd?.toFixed(2)}
+              </span>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-4">
+        {activeTab === 'gateway' && data?.aiGateway && (
+          <>
+            <ProviderBar
+              byProvider={data.aiGateway.byProvider}
+              totalCost={data.aiGateway.totalCostUsd}
+            />
+            {hasGatewayData ? (
+              <ModelTable models={data.aiGateway.models} type="gateway" />
+            ) : (
+              <EmptyState />
+            )}
+          </>
+        )}
+
+        {activeTab === 'workersai' && data?.workersAI && (
+          hasWorkersAIData ? (
+            <ModelTable models={data.workersAI.models} type="workersai" />
+          ) : (
+            <EmptyState />
+          )
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/usage/unified/Recommendations.tsx

@@ -0,0 +1,149 @@
+/**
+ * Recommendations Component
+ *
+ * Displays actionable insights based on usage data, budget status,
+ * and service utilisation patterns.
+ */
+
+import { Lightbulb, AlertTriangle, TrendingUp, Zap } from 'lucide-react';
+import type { ServiceUtilisation, ProjectSummary, BurnRateData } from './types';
+
+interface RecommendationsProps {
+  services: ServiceUtilisation[];
+  projects: ProjectSummary[];
+  burnRate: BurnRateData | null;
+}
+
+interface Recommendation {
+  icon: 'warning' | 'tip' | 'trend' | 'action';
+  text: string;
+  action?: string;
+  link?: string;
+}
+
+const ICON_MAP = {
+  warning: AlertTriangle,
+  tip: Lightbulb,
+  trend: TrendingUp,
+  action: Zap,
+};
+
+const ICON_COLORS = {
+  warning: 'text-amber-400',
+  tip: 'text-blue-400',
+  trend: 'text-emerald-400',
+  action: 'text-purple-400',
+};
+
+export function Recommendations({ services, projects, burnRate }: RecommendationsProps) {
+  const recommendations: Recommendation[] = [];
+
+  // Check for over-limit services
+  const overLimit = services.filter((s) => s.percentage > 100);
+  for (const svc of overLimit) {
+    recommendations.push({
+      icon: 'warning',
+      text: `${svc.label} is ${(svc.percentage / 100).toFixed(1)}x over plan limits. Consider upgrading tier or implementing rate limiting.`,
+      action: 'Compare Plans',
+      link: '/usage/settings',
+    });
+  }
+
+  // Check for services approaching limits (>80%)
+  const approachingLimit = services.filter((s) => s.percentage > 80 && s.percentage <= 100);
+  for (const svc of approachingLimit) {
+    recommendations.push({
+      icon: 'trend',
+      text: `${svc.label} at ${svc.percentage.toFixed(0)}% of plan limit. Monitor closely or consider optimisation.`,
+    });
+  }
+
+  // Check for zero-usage projects
+  const zeroUsage = projects.filter((p) => p.mtdCost === 0);
+  if (zeroUsage.length > 0 && zeroUsage.length < projects.length) {
+    recommendations.push({
+      icon: 'tip',
+      text: `${zeroUsage.length} project(s) have $0 usage this period: ${zeroUsage.map((p) => p.projectName).join(', ')}. Consider reviewing if they're needed.`,
+      action: 'Review Inactive',
+    });
+  }
+
+  // Check for budget concerns
+  if (burnRate?.status === 'red') {
+    recommendations.push({
+      icon: 'warning',
+      text: `Projected spend $${burnRate.projectedMonthlyCost.toFixed(2)} may exceed budget. Review high-cost resources.`,
+      action: 'Adjust Budget',
+      link: '/usage/settings',
+    });
+  } else if (burnRate?.status === 'yellow') {
+    recommendations.push({
+      icon: 'trend',
+      text: `Burn rate elevated at $${burnRate.dailyBurnRate.toFixed(2)}/day. ${burnRate.daysRemaining} days remaining in billing period.`,
+    });
+  }
+
+  // Check for circuit breaker issues
+  const trippedProjects = projects.filter(
+    (p) => p.circuitBreakerStatus === 'tripped' || p.circuitBreakerStatus === 'degraded'
+  );
+  if (trippedProjects.length > 0) {
+    recommendations.push({
+      icon: 'action',
+      text: `${trippedProjects.length} project(s) have tripped circuit breakers: ${trippedProjects.map((p) => p.projectName).join(', ')}. Check for rate limiting issues.`,
+      action: 'View Details',
+    });
+  }
+
+  // Check for high cost concentration
+  if (projects.length > 1) {
+    const totalCost = projects.reduce((sum, p) => sum + p.mtdCost, 0);
+    if (totalCost > 0) {
+      const topProject = projects.reduce((max, p) => (p.mtdCost > max.mtdCost ? p : max));
+      const topPct = (topProject.mtdCost / totalCost) * 100;
+      if (topPct > 70) {
+        recommendations.push({
+          icon: 'tip',
+          text: `${topProject.projectName} accounts for ${topPct.toFixed(0)}% of total spend. Consider cost optimisation for this project.`,
+        });
+      }
+    }
+  }
+
+  // No recommendations - all is well
+  if (recommendations.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="mt-6 bg-gray-50/50 dark:bg-slate-900/30 border border-gray-200 dark:border-slate-800 rounded-sm p-4">
+      <h2 className="text-sm font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider mb-3 flex items-center gap-2">
+        <Lightbulb className="w-4 h-4" />
+        Recommendations
+      </h2>
+      <ul className="space-y-3">
+        {recommendations.slice(0, 5).map((rec, i) => {
+          const Icon = ICON_MAP[rec.icon];
+          const iconColor = ICON_COLORS[rec.icon];
+
+          return (
+            <li key={i} className="flex items-start gap-3 text-sm">
+              <Icon className={`w-4 h-4 mt-0.5 flex-shrink-0 ${iconColor}`} />
+              <span className="flex-1 text-gray-700 dark:text-slate-300">{rec.text}</span>
+              {rec.action && (
+                <a
+                  href={rec.link || '#'}
+                  className="text-blue-400 hover:text-blue-300 text-xs font-mono whitespace-nowrap"
+                >
+                  [{rec.action}]
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
+
+export default Recommendations;