@littlebearapps/platform-admin-sdk 1.5.0 → 2.1.0

package/templates/full/dashboard/src/components/reports/DigestStats.tsx

@@ -0,0 +1,151 @@
+/**
+ * Digest Statistics Cards Component
+ * Shows warning digest summary stats and trends
+ */
+import { useState, useEffect } from 'react';
+import type { DigestStats as DigestStatsType } from '../../lib/reports/types';
+
+interface StatCardProps {
+  label: string;
+  value: number | string;
+  subValue?: string;
+  colour: string;
+  icon: string;
+}
+
+function StatCard({ label, value, subValue, colour, icon }: StatCardProps) {
+  return (
+    <div className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${colour}`}>
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{label}</p>
+          <p className="text-2xl font-bold mt-1">{value}</p>
+          {subValue && (
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{subValue}</p>
+          )}
+        </div>
+        <span className="text-2xl">{icon}</span>
+      </div>
+    </div>
+  );
+}
+
+export function DigestStats() {
+  const [stats, setStats] = useState<DigestStatsType | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchStats() {
+      try {
+        const response = await fetch('/api/reports/digests/stats');
+        if (!response.ok) throw new Error('Failed to fetch stats');
+        const data = await response.json();
+        setStats(data);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchStats();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 animate-pulse">
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-12"></div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-300">
+        Error loading stats: {error}
+      </div>
+    );
+  }
+
+  if (!stats) return null;
+
+  // Calculate trend (comparing today vs yesterday)
+  const todayOcc = stats.todayDigests.occurrences;
+  const yesterdayOcc = stats.yesterdayDigests.occurrences;
+  const trend = yesterdayOcc > 0
+    ? Math.round(((todayOcc - yesterdayOcc) / yesterdayOcc) * 100)
+    : todayOcc > 0 ? 100 : 0;
+  const trendText = trend > 0 ? `+${trend}%` : trend < 0 ? `${trend}%` : 'Same';
+
+  return (
+    <div className="space-y-4">
+      {/* Main Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        <StatCard
+          label="Today's Warnings"
+          value={stats.todayDigests.occurrences}
+          subValue={`${stats.todayDigests.count} digest(s)`}
+          colour="border-l-4 border-l-yellow-500"
+          icon="⚠️"
+        />
+        <StatCard
+          label="Yesterday"
+          value={stats.yesterdayDigests.occurrences}
+          subValue={`${stats.yesterdayDigests.count} digest(s)`}
+          colour="border-l-4 border-l-gray-400"
+          icon="📅"
+        />
+        <StatCard
+          label="Daily Trend"
+          value={trendText}
+          subValue={trend > 0 ? 'Increase' : trend < 0 ? 'Decrease' : 'No change'}
+          colour={`border-l-4 ${trend > 20 ? 'border-l-red-500' : trend < -20 ? 'border-l-green-500' : 'border-l-blue-500'}`}
+          icon={trend > 0 ? '📈' : trend < 0 ? '📉' : '➡️'}
+        />
+        <StatCard
+          label="Total Digests"
+          value={stats.totalDigests}
+          colour="border-l-4 border-l-purple-500"
+          icon="📊"
+        />
+        <StatCard
+          label="Total Occurrences"
+          value={stats.totalOccurrences.toLocaleString()}
+          colour="border-l-4 border-l-indigo-500"
+          icon="🔢"
+        />
+        <StatCard
+          label="Active Scripts"
+          value={stats.byScript.length}
+          colour="border-l-4 border-l-teal-500"
+          icon="📜"
+        />
+      </div>
+
+      {/* Top Warnings Summary */}
+      {stats.topWarnings.length > 0 && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Top Warning Types</h3>
+          <div className="space-y-2">
+            {stats.topWarnings.slice(0, 3).map((warning, i) => (
+              <div key={i} className="flex items-center justify-between text-sm">
+                <span className="text-gray-600 dark:text-gray-400 truncate max-w-md">
+                  {warning.normalized_message.slice(0, 60)}
+                  {warning.normalized_message.length > 60 && '...'}
+                </span>
+                <span className="text-gray-900 dark:text-white font-medium ml-2">
+                  {warning.occurrences.toLocaleString()} ({warning.days_occurred}d)
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/reports/GapDetectionReport.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../../components/ui/LoadingSkeleton';
+import { EmptyState } from '../../components/ui/EmptyState';
+
+interface UsageReport {
+  snapshot_date: string;
+  d1_reads: number;
+  d1_writes: number;
+  kv_reads: number;
+  kv_writes: number;
+  worker_requests: number;
+  total_cost_usd: number;
+}
+
+export function GapDetectionReport() {
+  const [daily, setDaily] = useState<UsageReport[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/reports/usage?days=14')
+      .then((r) => r.json())
+      .then((data: { daily: UsageReport[] }) => {
+        setDaily(data.daily ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={5} />;
+  if (daily.length === 0) return <EmptyState title="No usage data" description="Daily rollup data will appear after collection." />;
+
+  const gapDays = daily.filter((d) => d.d1_reads === 0 && d.d1_writes === 0 && d.worker_requests === 0);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-3">
+        <span className="text-sm font-medium text-gray-900 dark:text-white">14-Day Coverage</span>
+        <span className={`text-xs px-2 py-0.5 rounded-full ${
+          gapDays.length === 0
+            ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+            : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+        }`}>
+          {daily.length - gapDays.length}/{daily.length} days
+        </span>
+      </div>
+
+      <div className="flex gap-0.5">
+        {daily.map((d) => {
+          const hasData = d.d1_reads > 0 || d.d1_writes > 0 || d.worker_requests > 0;
+          return (
+            <div
+              key={d.snapshot_date}
+              title={`${d.snapshot_date}: $${d.total_cost_usd.toFixed(2)}`}
+              className={`h-6 flex-1 rounded-sm ${
+                hasData ? 'bg-green-500 dark:bg-green-600' : 'bg-red-300 dark:bg-red-700'
+              }`}
+            />
+          );
+        })}
+      </div>
+
+      {gapDays.length > 0 && (
+        <p className="text-xs text-yellow-600 dark:text-yellow-400">
+          {gapDays.length} day(s) with zero data: {gapDays.map((d) => d.snapshot_date).join(', ')}
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/reports/HealthTrendsReport.tsx

@@ -0,0 +1,192 @@
+/**
+ * Health Trends Report Component
+ * Shows project health score trends over time
+ */
+import { useState, useEffect } from 'react';
+
+interface HealthTrend {
+  project: string;
+  audit_date: string;
+  composite_score: number;
+  sdk_score: number;
+  observability_score: number;
+  cost_score: number;
+  security_score: number;
+  trend: 'improving' | 'stable' | 'declining';
+  score_delta: number;
+}
+
+function StatCard({ label, value, colour, subValue }: { label: string; value: number | string; colour: string; subValue?: string }) {
+  return (
+    <div className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${colour}`}>
+      <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{label}</p>
+      <p className="text-2xl font-bold mt-1">{value}</p>
+      {subValue && <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{subValue}</p>}
+    </div>
+  );
+}
+
+function TrendBadge({ trend, delta }: { trend: string; delta: number }) {
+  const config: Record<string, { colour: string; icon: string }> = {
+    improving: { colour: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300', icon: '↑' },
+    stable: { colour: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300', icon: '→' },
+    declining: { colour: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300', icon: '↓' },
+  };
+  const { colour, icon } = config[trend] || config.stable;
+  return (
+    <span className={`px-2 py-0.5 text-xs font-semibold rounded inline-flex items-center gap-1 ${colour}`}>
+      {icon} {delta > 0 ? '+' : ''}{delta}
+    </span>
+  );
+}
+
+function ScoreBar({ score, max = 5, label }: { score: number; max?: number; label: string }) {
+  const percentage = (score / max) * 100;
+  const colour = percentage >= 80 ? 'bg-green-500' : percentage >= 60 ? 'bg-yellow-500' : 'bg-red-500';
+  return (
+    <div className="flex items-center gap-2">
+      <span className="w-24 text-xs text-gray-600 dark:text-gray-400">{label}</span>
+      <div className="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div className={`h-full ${colour}`} style={{ width: `${percentage}%` }} />
+      </div>
+      <span className="w-8 text-xs text-gray-900 dark:text-white text-right">{score}/{max}</span>
+    </div>
+  );
+}
+
+export function HealthTrendsReport() {
+  const [trends, setTrends] = useState<HealthTrend[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [days, setDays] = useState(30);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const response = await fetch(`/api/usage/health-trends?days=${days}`);
+        if (!response.ok) throw new Error('Failed to fetch health trends');
+        const data = await response.json();
+
+        // API returns { success, data: [{ project, trends: [{ date, compositeScore, rubricScores, trend, delta }] }] }
+        // Flatten nested project→trends structure into flat array
+        const apiData = data.data || [];
+        const flatTrends: HealthTrend[] = [];
+        for (const proj of apiData) {
+          for (const t of proj.trends || []) {
+            flatTrends.push({
+              project: proj.project,
+              audit_date: t.date,
+              composite_score: t.compositeScore,
+              sdk_score: t.rubricScores?.sdk ?? 0,
+              observability_score: t.rubricScores?.observability ?? 0,
+              cost_score: t.rubricScores?.cost ?? 0,
+              security_score: t.rubricScores?.security ?? 0,
+              trend: t.trend,
+              score_delta: t.delta,
+            });
+          }
+        }
+        setTrends(flatTrends);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [days]);
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="bg-white dark:bg-gray-800 rounded-lg border p-4 animate-pulse">
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+              <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-12"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-300">
+        Error loading health trends: {error}
+      </div>
+    );
+  }
+
+  const improving = trends.filter(t => t.trend === 'improving').length;
+  const stable = trends.filter(t => t.trend === 'stable').length;
+  const declining = trends.filter(t => t.trend === 'declining').length;
+  const avgScore = trends.length > 0
+    ? Math.round(trends.reduce((sum, t) => sum + t.composite_score, 0) / trends.length)
+    : 0;
+
+  // Group by project for latest trends
+  const latestByProject = new Map<string, HealthTrend>();
+  trends.forEach(t => {
+    if (!latestByProject.has(t.project) || t.audit_date > latestByProject.get(t.project)!.audit_date) {
+      latestByProject.set(t.project, t);
+    }
+  });
+  const latestTrends = Array.from(latestByProject.values()).sort((a, b) => b.composite_score - a.composite_score);
+
+  return (
+    <div className="space-y-6">
+      {/* Filter */}
+      <div className="flex items-center gap-4">
+        <label className="text-sm text-gray-600 dark:text-gray-400">Time range:</label>
+        <select
+          value={days}
+          onChange={(e) => setDays(Number(e.target.value))}
+          className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+        >
+          <option value={7}>Last 7 days</option>
+          <option value={30}>Last 30 days</option>
+          <option value={90}>Last 90 days</option>
+        </select>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatCard label="Improving" value={improving} colour="border-l-4 border-l-green-500" />
+        <StatCard label="Stable" value={stable} colour="border-l-4 border-l-gray-400" />
+        <StatCard label="Declining" value={declining} colour="border-l-4 border-l-red-500" />
+        <StatCard label="Avg Score" value={avgScore} colour="border-l-4 border-l-purple-500" />
+      </div>
+
+      {/* Project Health Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {latestTrends.map((t) => (
+          <div key={t.project} className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="font-semibold text-gray-900 dark:text-white">{t.project}</h3>
+              <TrendBadge trend={t.trend} delta={t.score_delta} />
+            </div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+              {t.composite_score}<span className="text-sm font-normal text-gray-500">/100</span>
+            </div>
+            <div className="space-y-2">
+              <ScoreBar score={t.sdk_score} label="SDK" />
+              <ScoreBar score={t.observability_score} label="Observability" />
+              <ScoreBar score={t.cost_score} label="Cost" />
+              <ScoreBar score={t.security_score} label="Security" />
+            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-3">Last audit: {t.audit_date}</p>
+          </div>
+        ))}
+      </div>
+
+      {latestTrends.length === 0 && (
+        <div className="bg-gray-50 dark:bg-gray-800 rounded-lg border p-8 text-center text-gray-500 dark:text-gray-400">
+          No health trend data available. Run the platform auditor to generate health scores.
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/reports/SdkAuditReport.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../../components/ui/LoadingSkeleton';
+import { EmptyState } from '../../components/ui/EmptyState';
+
+interface AuditReport {
+  id: number;
+  project: string;
+  scan_type: string;
+  ai_judge_score: number;
+  sdk_score: number;
+  observability_score: number;
+  cost_protection_score: number;
+  security_score: number;
+  scan_date: string;
+}
+
+export function SdkAuditReport() {
+  const [reports, setReports] = useState<AuditReport[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/reports/audit?limit=20')
+      .then((r) => r.json())
+      .then((data: { reports: AuditReport[] }) => {
+        setReports(data.reports ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={5} />;
+  if (reports.length === 0) return <EmptyState title="No audit reports" description="Run the platform auditor to generate reports." />;
+
+  const scoreColour = (score: number): string => {
+    if (score >= 90) return 'text-green-600 dark:text-green-400';
+    if (score >= 70) return 'text-yellow-600 dark:text-yellow-400';
+    return 'text-red-600 dark:text-red-400';
+  };
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-gray-200 dark:border-gray-700">
+            <th className="text-left py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Project</th>
+            <th className="text-left py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Type</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Overall</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">SDK</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Obs</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Cost</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Sec</th>
+            <th className="text-right py-2 px-2 font-medium text-gray-500 dark:text-gray-400">Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          {reports.map((r) => (
+            <tr key={r.id} className="border-b border-gray-100 dark:border-gray-800">
+              <td className="py-1.5 px-2 text-gray-900 dark:text-white">{r.project}</td>
+              <td className="py-1.5 px-2 text-gray-500 dark:text-gray-400">{r.scan_type}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.ai_judge_score)}`}>{r.ai_judge_score}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.sdk_score)}`}>{r.sdk_score}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.observability_score)}`}>{r.observability_score}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.cost_protection_score)}`}>{r.cost_protection_score}</td>
+              <td className={`py-1.5 px-2 text-right font-mono ${scoreColour(r.security_score)}`}>{r.security_score}</td>
+              <td className="py-1.5 px-2 text-right text-gray-400 dark:text-gray-500">{new Date(r.scan_date).toLocaleDateString()}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/reports/index.ts

@@ -0,0 +1,2 @@
+export { SdkAuditReport } from './SdkAuditReport';
+export { GapDetectionReport } from './GapDetectionReport';