@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

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

@@ -0,0 +1,339 @@
+/**
+ * Feature Usage Report Component
+ * Shows daily feature usage metrics with project column, filtering, and pagination
+ */
+import { useState, useEffect } from 'react';
+
+interface FeatureUsage {
+  feature_id: string;
+  project: string;
+  usage_date: string;
+  requests: number;
+  d1_reads: number;
+  d1_writes: number;
+  kv_reads: number;
+  kv_writes: number;
+  ai_neurons: number;
+  queue_messages: number;
+}
+
+interface FeatureSummary {
+  feature_id: string;
+  project: string;
+  total_requests: number;
+  total_d1_ops: number;
+  total_ai_neurons: number;
+  days_active: 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 mt-0.5">{subValue}</p>}
+    </div>
+  );
+}
+
+function formatNumber(n: number): string {
+  if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+
+function extractProject(featureKey: string): string {
+  const parts = featureKey.split(':');
+  return parts.length > 1 ? parts[0] : 'unknown';
+}
+
+export function FeatureUsageReport() {
+  const [usage, setUsage] = useState<FeatureUsage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [days, setDays] = useState(7);
+  const [sortBy, setSortBy] = useState<'requests' | 'd1' | 'ai' | 'project'>('requests');
+  const [projectFilter, setProjectFilter] = useState<string>('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const response = await fetch(`/api/usage/features/history?days=${days}`);
+        if (!response.ok) throw new Error('Failed to fetch feature usage');
+        const data = await response.json();
+
+        // API returns { success, features: { [featureKey]: [{ date, d1Writes, d1Reads, ... }] } }
+        const featuresObj = data.features || {};
+        const usageData: FeatureUsage[] = [];
+        for (const [featureKey, entries] of Object.entries(featuresObj)) {
+          for (const entry of entries as Array<Record<string, unknown>>) {
+            usageData.push({
+              feature_id: featureKey,
+              project: extractProject(featureKey),
+              usage_date: (entry.date as string) || '',
+              requests: (entry.requests as number) || 0,
+              d1_reads: (entry.d1Reads as number) || 0,
+              d1_writes: (entry.d1Writes as number) || 0,
+              kv_reads: (entry.kvReads as number) || 0,
+              kv_writes: (entry.kvWrites as number) || 0,
+              ai_neurons: (entry.aiNeurons as number) || 0,
+              queue_messages: (entry.queueMessages as number) || 0,
+            });
+          }
+        }
+
+        setUsage(usageData);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [days]);
+
+  // Reset page when filters change
+  useEffect(() => { setPage(1); }, [sortBy, projectFilter, pageSize, 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 feature usage: {error}
+      </div>
+    );
+  }
+
+  // Aggregate by feature
+  const byFeature = new Map<string, FeatureSummary>();
+  usage.forEach(u => {
+    const existing = byFeature.get(u.feature_id);
+    const d1Ops = u.d1_reads + u.d1_writes;
+    if (existing) {
+      existing.total_requests += u.requests;
+      existing.total_d1_ops += d1Ops;
+      existing.total_ai_neurons += u.ai_neurons;
+      existing.days_active += 1;
+    } else {
+      byFeature.set(u.feature_id, {
+        feature_id: u.feature_id,
+        project: u.project,
+        total_requests: u.requests,
+        total_d1_ops: d1Ops,
+        total_ai_neurons: u.ai_neurons,
+        days_active: 1,
+      });
+    }
+  });
+
+  // Get unique projects for filter
+  const allFeatures = Array.from(byFeature.values());
+  const projects = [...new Set(allFeatures.map(f => f.project))].sort();
+
+  // Apply project filter
+  const filtered = projectFilter === 'all'
+    ? allFeatures
+    : allFeatures.filter(f => f.project === projectFilter);
+
+  // Sort
+  const features = [...filtered].sort((a, b) => {
+    if (sortBy === 'project') return a.project.localeCompare(b.project);
+    if (sortBy === 'requests') return b.total_requests - a.total_requests;
+    if (sortBy === 'd1') return b.total_d1_ops - a.total_d1_ops;
+    return b.total_ai_neurons - a.total_ai_neurons;
+  });
+
+  // Pagination
+  const totalPages = Math.ceil(features.length / pageSize);
+  const paginatedFeatures = features.slice((page - 1) * pageSize, page * pageSize);
+
+  const totalRequests = allFeatures.reduce((sum, f) => sum + f.total_requests, 0);
+  const totalD1Ops = allFeatures.reduce((sum, f) => sum + f.total_d1_ops, 0);
+  const totalAiNeurons = allFeatures.reduce((sum, f) => sum + f.total_ai_neurons, 0);
+
+  return (
+    <div className="space-y-6">
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-4">
+        <div className="flex items-center gap-2">
+          <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={14}>Last 14 days</option>
+            <option value={30}>Last 30 days</option>
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Project:</label>
+          <select
+            value={projectFilter}
+            onChange={(e) => setProjectFilter(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="all">All Projects ({projects.length})</option>
+            {projects.map(p => (
+              <option key={p} value={p}>{p}</option>
+            ))}
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Sort by:</label>
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as 'requests' | 'd1' | 'ai' | 'project')}
+            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="requests">Requests</option>
+            <option value="d1">D1 Operations</option>
+            <option value="ai">AI Neurons</option>
+            <option value="project">Project</option>
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Show:</label>
+          <select
+            value={pageSize}
+            onChange={(e) => setPageSize(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={10}>10</option>
+            <option value={25}>25</option>
+            <option value={50}>50</option>
+            <option value={100}>100</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatCard label="Total Requests" value={formatNumber(totalRequests)} colour="border-l-4 border-l-blue-500" />
+        <StatCard label="D1 Operations" value={formatNumber(totalD1Ops)} colour="border-l-4 border-l-green-500" />
+        <StatCard label="AI Neurons" value={formatNumber(totalAiNeurons)} colour="border-l-4 border-l-orange-500" />
+        <StatCard
+          label="Active Features"
+          value={features.length}
+          colour="border-l-4 border-l-purple-500"
+          subValue={projectFilter !== 'all' ? `of ${allFeatures.length} total` : `across ${projects.length} projects`}
+        />
+      </div>
+
+      {/* Feature Table */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <div>
+            <h3 className="font-semibold text-gray-900 dark:text-white">Feature Usage ({days} Days)</h3>
+            <p className="text-xs text-gray-500 mt-0.5">
+              {features.length} feature{features.length !== 1 ? 's' : ''}
+              {projectFilter !== 'all' && ` in ${projectFilter}`}
+            </p>
+          </div>
+          {totalPages > 1 && (
+            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+              <button
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page === 1}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Prev
+              </button>
+              <span>{page} / {totalPages}</span>
+              <button
+                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Next
+              </button>
+            </div>
+          )}
+        </div>
+        {features.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">No feature usage data available</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 dark:bg-gray-900/50">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Project</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Feature</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Requests</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">D1 Ops</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">AI Neurons</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Days Active</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginatedFeatures.map((f) => {
+                  // Strip project prefix from feature_id for display
+                  const featureDisplay = f.feature_id.startsWith(f.project + ':')
+                    ? f.feature_id.slice(f.project.length + 1)
+                    : f.feature_id;
+                  return (
+                    <tr key={f.feature_id} className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                      <td className="px-4 py-3">
+                        <span className="inline-block px-2 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
+                          {f.project}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 font-medium text-gray-900 dark:text-white text-sm">{featureDisplay}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatNumber(f.total_requests)}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatNumber(f.total_d1_ops)}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatNumber(f.total_ai_neurons)}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{f.days_active}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+        {/* Bottom pagination */}
+        {totalPages > 1 && (
+          <div className="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
+            <span>
+              Showing {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, features.length)} of {features.length}
+            </span>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page === 1}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Prev
+              </button>
+              <span>{page} / {totalPages}</span>
+              <button
+                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </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/search/SearchResultGroup.tsx

@@ -0,0 +1,46 @@
+/**
+ * SearchResultGroup Component
+ *
+ * Renders a group header for search results by content type.
+ *
+ * @module dashboard/components/search/SearchResultGroup
+ * @created 2026-02-03
+ * @task task-303.3
+ */
+
+import type { SearchContentType } from '../../lib/search/types';
+
+/** Labels for each content type */
+const CONTENT_TYPE_LABELS: Record<SearchContentType, string> = {
+  error: 'Errors',
+  pattern: 'Patterns',
+  setting: 'Settings',
+  page: 'Pages',
+  service: 'Services',
+  opportunity: 'Opportunities',
+  draft: 'Drafts',
+  project: 'Projects',
+};
+
+interface SearchResultGroupProps {
+  contentType: SearchContentType;
+  count: number;
+}
+
+export function SearchResultGroup({
+  contentType,
+  count,
+}: SearchResultGroupProps): JSX.Element {
+  const label = CONTENT_TYPE_LABELS[contentType] || contentType;
+
+  return (
+    <div className="px-3 py-2 flex items-center justify-between">
+      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+        {label}
+      </span>
+      <span className="text-xs text-gray-400 dark:text-gray-500">
+        {count} {count === 1 ? 'result' : 'results'}
+      </span>
+    </div>
+  );
+}