@littlebearapps/platform-admin-sdk 1.5.0 → 2.0.0

package/templates/shared/dashboard/src/components/usage/PlanAllowanceDashboard.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface Allowance {
+  resource: string;
+  allowance: number;
+  used: number;
+  pct: number;
+}
+
+function formatNumber(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
+  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 String(n);
+}
+
+function pctColor(pct: number): string {
+  if (pct >= 90) return 'bg-red-500';
+  if (pct >= 75) return 'bg-orange-500';
+  if (pct >= 50) return 'bg-yellow-500';
+  return 'bg-green-500';
+}
+
+export function PlanAllowanceDashboard() {
+  const [allowances, setAllowances] = useState<Allowance[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/usage/allowances')
+      .then(res => res.json())
+      .then((data: { allowances: Allowance[] }) => { setAllowances(data.allowances); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={4} />;
+
+  if (allowances.length === 0) {
+    return <p className="text-sm text-gray-500 dark:text-gray-400">No allowance data available.</p>;
+  }
+
+  return (
+    <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-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        Plan Allowances (MTD)
+      </h3>
+      <div className="space-y-3">
+        {allowances.map(a => (
+          <div key={a.resource}>
+            <div className="flex items-center justify-between text-sm mb-1">
+              <span className="text-gray-700 dark:text-gray-300">{a.resource.replace(/_/g, ' ')}</span>
+              <span className="text-gray-500 dark:text-gray-400">
+                {formatNumber(a.used)} / {formatNumber(a.allowance)} ({a.pct}%)
+              </span>
+            </div>
+            <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all ${pctColor(a.pct)}`}
+                style={{ width: `${Math.min(a.pct, 100)}%` }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/usage/ProjectCostBreakdown.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+import { EmptyState } from '../ui/EmptyState';
+
+interface ProjectCost {
+  project: string;
+  total_cost_usd: number;
+  d1_writes: number;
+  worker_requests: number;
+}
+
+export function ProjectCostBreakdown() {
+  const [projects, setProjects] = useState<ProjectCost[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/usage/projects')
+      .then((r) => r.json())
+      .then((data: { projects: ProjectCost[] }) => {
+        setProjects(data.projects ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={4} />;
+  if (projects.length === 0) return <EmptyState title="No project data" description="Project cost data will appear after usage collection runs." />;
+
+  const maxCost = Math.max(...projects.map((p) => p.total_cost_usd), 0.01);
+
+  return (
+    <div className="space-y-3">
+      {projects.map((p) => (
+        <div key={p.project} className="bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 p-3">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-sm font-medium text-gray-900 dark:text-white">{p.project}</span>
+            <span className="text-sm font-mono text-gray-700 dark:text-gray-300">
+              ${p.total_cost_usd.toFixed(2)}
+            </span>
+          </div>
+          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+            <div
+              className="bg-blue-500 h-1.5 rounded-full transition-all"
+              style={{ width: `${Math.min((p.total_cost_usd / maxCost) * 100, 100)}%` }}
+            />
+          </div>
+          <div className="flex gap-4 mt-1 text-xs text-gray-500 dark:text-gray-400">
+            <span>D1 writes: {p.d1_writes.toLocaleString()}</span>
+            <span>Requests: {p.worker_requests.toLocaleString()}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { HourlyUsageChart } from './HourlyUsageChart';
+export { PlanAllowanceDashboard } from './PlanAllowanceDashboard';
+export { AnomaliesWidget } from './AnomaliesWidget';
+export { ProjectCostBreakdown } from './ProjectCostBreakdown';

package/templates/shared/dashboard/src/lib/cloudflare/costs.ts

@@ -0,0 +1,21 @@
+/** Workers Paid Plan monthly allowances (used to compute net costs). */
+export const CF_PAID_ALLOWANCES: Record<string, number> = {
+  d1_reads: 25_000_000_000,
+  d1_writes: 50_000_000,
+  kv_reads: 10_000_000,
+  kv_writes: 1_000_000,
+  worker_requests: 10_000_000,
+  r2_reads: 10_000_000,
+  r2_writes: 1_000_000,
+};
+
+/** Per-unit pricing after allowances are exhausted (USD). */
+export const CF_PRICING: Record<string, number> = {
+  d1_reads: 0.001 / 4_000_000,    // $0.001 per 4M rows
+  d1_writes: 1.0 / 1_000_000,     // $1.00 per 1M rows
+  kv_reads: 0.50 / 1_000_000,     // $0.50 per 1M reads
+  kv_writes: 5.0 / 1_000_000,     // $5.00 per 1M writes
+  worker_requests: 0.30 / 1_000_000, // $0.30 per 1M requests
+  r2_reads: 0.36 / 1_000_000,     // $0.36 per 1M Class B
+  r2_writes: 4.50 / 1_000_000,    // $4.50 per 1M Class A
+};

package/templates/shared/dashboard/src/pages/api/costs/overview.ts

@@ -0,0 +1,65 @@
+import type { APIRoute } from 'astro';
+import { CF_PAID_ALLOWANCES, CF_PRICING } from '../../../lib/cloudflare/costs';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+}
+
+interface CostLine {
+  resource: string;
+  used: number;
+  allowance: number;
+  overage: number;
+  cost: number;
+}
+
+export const GET: APIRoute = async ({ locals }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+
+  const overview = {
+    lines: [] as CostLine[],
+    totalCost: 0,
+    period: 'mtd',
+    billingStart: '',
+  };
+
+  const now = new Date();
+  overview.billingStart = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10);
+
+  if (db) {
+    try {
+      const result = await db
+        .prepare(
+          `SELECT SUM(d1_reads) as d1_reads, SUM(d1_writes) as d1_writes,
+                  SUM(kv_reads) as kv_reads, SUM(kv_writes) as kv_writes,
+                  SUM(worker_requests) as worker_requests,
+                  SUM(r2_reads) as r2_reads, SUM(r2_writes) as r2_writes
+           FROM daily_usage_rollups
+           WHERE project = 'all' AND snapshot_date >= ?
+           LIMIT 1`
+        )
+        .bind(overview.billingStart)
+        .first<Record<string, number>>();
+
+      if (result) {
+        for (const [resource, allowance] of Object.entries(CF_PAID_ALLOWANCES)) {
+          const used = result[resource] ?? 0;
+          const overage = Math.max(0, used - allowance);
+          const unitPrice = CF_PRICING[resource] ?? 0;
+          const cost = Math.round(overage * unitPrice * 100) / 100;
+
+          overview.lines.push({ resource, used, allowance, overage, cost });
+          overview.totalCost += cost;
+        }
+        overview.totalCost = Math.round(overview.totalCost * 100) / 100;
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  return new Response(JSON.stringify(overview), {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=300' },
+  });
+};

package/templates/shared/dashboard/src/pages/api/costs/providers.ts

@@ -0,0 +1,47 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+}
+
+export const GET: APIRoute = async ({ locals }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+
+  const providers: Array<{
+    provider: string;
+    mtd_cost: number;
+    latest_date: string;
+  }> = [];
+
+  if (db) {
+    try {
+      const monthStart = new Date();
+      monthStart.setDate(1);
+      const cutoff = monthStart.toISOString().slice(0, 10);
+
+      const result = await db
+        .prepare(
+          `SELECT provider,
+                  SUM(cost_usd) as mtd_cost,
+                  MAX(snapshot_date) as latest_date
+           FROM third_party_usage
+           WHERE snapshot_date >= ?
+           GROUP BY provider
+           ORDER BY mtd_cost DESC
+           LIMIT 20`
+        )
+        .bind(cutoff)
+        .all();
+      if (result.results) {
+        providers.push(...(result.results as typeof providers));
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  return new Response(JSON.stringify({ providers }), {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=300' },
+  });
+};

package/templates/shared/dashboard/src/pages/api/infrastructure/services.ts

@@ -0,0 +1,55 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+  PLATFORM_CACHE?: KVNamespace;
+}
+
+export const GET: APIRoute = async ({ locals }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+  const kv = env?.PLATFORM_CACHE;
+
+  let services: Array<{
+    name: string;
+    type: string;
+    project: string;
+    status: string;
+  }> = [];
+
+  // Try KV first
+  if (kv) {
+    try {
+      const registry = await kv.get('SERVICE_REGISTRY', 'json');
+      if (registry && Array.isArray(registry)) {
+        services = registry as typeof services;
+      }
+    } catch {
+      // KV may not be available
+    }
+  }
+
+  // Fall back to D1
+  if (services.length === 0 && db) {
+    try {
+      const result = await db
+        .prepare(
+          `SELECT resource_name as name, resource_type as type,
+                  project_id as project, 'deployed' as status
+           FROM resource_project_mapping
+           ORDER BY project_id, resource_type
+           LIMIT 200`
+        )
+        .all();
+      if (result.results) {
+        services = result.results as typeof services;
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  return new Response(JSON.stringify({ services }), {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=120' },
+  });
+};

package/templates/shared/dashboard/src/pages/api/infrastructure/stats.ts

@@ -0,0 +1,99 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+  PLATFORM_CACHE?: KVNamespace;
+}
+
+export const GET: APIRoute = async ({ locals }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+  const kv = env?.PLATFORM_CACHE;
+
+  const stats = {
+    services: {
+      total: 0,
+      byStatus: { deployed: 0, development: 0, deprecated: 0, paused: 0 },
+      byType: {} as Record<string, number>,
+      byProject: {} as Record<string, number>,
+    },
+    alerts: {
+      total: 0,
+      unacknowledged: 0,
+      critical: 0,
+    },
+  };
+
+  // Try KV first (faster, populated by sync-config)
+  if (kv) {
+    try {
+      const services = await kv.get('SERVICE_REGISTRY', 'json');
+      if (services && Array.isArray(services)) {
+        stats.services.total = services.length;
+        for (const s of services as Array<{ status: string; type: string; project: string }>) {
+          const status = s.status as keyof typeof stats.services.byStatus;
+          if (status in stats.services.byStatus) {
+            stats.services.byStatus[status]++;
+          }
+          stats.services.byType[s.type] = (stats.services.byType[s.type] || 0) + 1;
+          stats.services.byProject[s.project] = (stats.services.byProject[s.project] || 0) + 1;
+        }
+      }
+    } catch {
+      // KV may not be available
+    }
+  }
+
+  // Fall back to D1 if KV had nothing
+  if (stats.services.total === 0 && db) {
+    try {
+      const rows = await db
+        .prepare(
+          `SELECT resource_type, project_id, COUNT(*) as cnt
+           FROM resource_project_mapping
+           GROUP BY resource_type, project_id
+           LIMIT 200`
+        )
+        .all<{ resource_type: string; project_id: string; cnt: number }>();
+      if (rows.results) {
+        for (const row of rows.results) {
+          stats.services.total += row.cnt;
+          stats.services.byStatus.deployed += row.cnt;
+          stats.services.byType[row.resource_type] = (stats.services.byType[row.resource_type] || 0) + row.cnt;
+          stats.services.byProject[row.project_id] = (stats.services.byProject[row.project_id] || 0) + row.cnt;
+        }
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  // Alert stats from notifications
+  if (db) {
+    try {
+      const alertResult = await db
+        .prepare(
+          `SELECT
+             COUNT(*) as total,
+             SUM(CASE WHEN category IN ('error', 'warning') THEN 1 ELSE 0 END) as unacknowledged,
+             SUM(CASE WHEN priority IN ('critical', 'high') AND category = 'error' THEN 1 ELSE 0 END) as critical
+           FROM notifications
+           WHERE created_at > unixepoch() - 86400 * 7
+             AND (expires_at IS NULL OR expires_at > unixepoch())
+           LIMIT 1`
+        )
+        .first<{ total: number; unacknowledged: number; critical: number }>();
+      if (alertResult) {
+        stats.alerts.total = alertResult.total || 0;
+        stats.alerts.unacknowledged = alertResult.unacknowledged || 0;
+        stats.alerts.critical = alertResult.critical || 0;
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  return new Response(JSON.stringify(stats), {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=120' },
+  });
+};

package/templates/shared/dashboard/src/pages/api/usage/allowances.ts

@@ -0,0 +1,56 @@
+import type { APIRoute } from 'astro';
+import { CF_PAID_ALLOWANCES } from '../../../lib/cloudflare/costs';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+}
+
+export const GET: APIRoute = async ({ locals }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+
+  const allowances: Array<{
+    resource: string;
+    allowance: number;
+    used: number;
+    pct: number;
+  }> = [];
+
+  if (db) {
+    try {
+      const monthStart = new Date();
+      monthStart.setDate(1);
+      const cutoff = monthStart.toISOString().slice(0, 10);
+
+      const result = await db
+        .prepare(
+          `SELECT SUM(d1_reads) as d1_reads, SUM(d1_writes) as d1_writes,
+                  SUM(kv_reads) as kv_reads, SUM(kv_writes) as kv_writes,
+                  SUM(worker_requests) as worker_requests
+           FROM daily_usage_rollups
+           WHERE project = 'all' AND snapshot_date >= ?
+           LIMIT 1`
+        )
+        .bind(cutoff)
+        .first<Record<string, number>>();
+
+      if (result) {
+        for (const [key, limit] of Object.entries(CF_PAID_ALLOWANCES)) {
+          const used = result[key] ?? 0;
+          allowances.push({
+            resource: key,
+            allowance: limit,
+            used,
+            pct: limit > 0 ? Math.round((used / limit) * 100) : 0,
+          });
+        }
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  return new Response(JSON.stringify({ allowances }), {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=300' },
+  });
+};

package/templates/shared/dashboard/src/pages/api/usage/anomalies.ts

@@ -0,0 +1,45 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+}
+
+export const GET: APIRoute = async ({ locals }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+
+  const anomalies: Array<{
+    id: number;
+    project: string;
+    metric: string;
+    current_value: number;
+    baseline_value: number;
+    deviation_pct: number;
+    detected_at: string;
+    status: string;
+  }> = [];
+
+  if (db) {
+    try {
+      const result = await db
+        .prepare(
+          `SELECT id, project, metric, current_value, baseline_value,
+                  deviation_pct, detected_at, status
+           FROM usage_anomalies
+           WHERE detected_at >= datetime('now', '-7 days')
+           ORDER BY detected_at DESC
+           LIMIT 20`
+        )
+        .all();
+      if (result.results) {
+        anomalies.push(...(result.results as typeof anomalies));
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  return new Response(JSON.stringify({ anomalies }), {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=120' },
+  });
+};

package/templates/shared/dashboard/src/pages/api/usage/billing.ts

@@ -0,0 +1,53 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+}
+
+export const GET: APIRoute = async ({ locals }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+
+  const now = new Date();
+  const billingStart = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10);
+  const billingEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().slice(0, 10);
+  const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
+  const daysSoFar = now.getDate();
+
+  const billing = {
+    cycleStart: billingStart,
+    cycleEnd: billingEnd,
+    daysInMonth,
+    daysSoFar,
+    currentSpend: 0,
+    dailyBurnRate: 0,
+    projectedMonthly: 0,
+    plan: 'workers_paid' as string,
+  };
+
+  if (db) {
+    try {
+      const result = await db
+        .prepare(
+          `SELECT SUM(total_cost_usd) as spend
+           FROM daily_usage_rollups
+           WHERE project = 'all' AND snapshot_date >= ?
+           LIMIT 1`
+        )
+        .bind(billingStart)
+        .first<{ spend: number | null }>();
+
+      if (result?.spend) {
+        billing.currentSpend = Math.round(result.spend * 100) / 100;
+        billing.dailyBurnRate = daysSoFar > 0 ? Math.round((billing.currentSpend / daysSoFar) * 100) / 100 : 0;
+        billing.projectedMonthly = Math.round(billing.dailyBurnRate * daysInMonth * 100) / 100;
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  return new Response(JSON.stringify(billing), {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=300' },
+  });
+};

package/templates/shared/dashboard/src/pages/api/usage/granular.ts

@@ -0,0 +1,50 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+}
+
+export const GET: APIRoute = async ({ locals, url }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+  const project = url.searchParams.get('project') ?? 'all';
+  const days = Math.min(Number(url.searchParams.get('days') ?? '7'), 30);
+
+  const rows: Array<{
+    snapshot_date: string;
+    d1_reads: number;
+    d1_writes: number;
+    kv_reads: number;
+    kv_writes: number;
+    r2_reads: number;
+    r2_writes: number;
+    worker_requests: number;
+    total_cost_usd: number;
+  }> = [];
+
+  if (db) {
+    try {
+      const cutoff = new Date(Date.now() - days * 86400000).toISOString().slice(0, 10);
+      const result = await db
+        .prepare(
+          `SELECT snapshot_date, d1_reads, d1_writes, kv_reads, kv_writes,
+                  r2_reads, r2_writes, worker_requests, total_cost_usd
+           FROM daily_usage_rollups
+           WHERE project = ? AND snapshot_date >= ?
+           ORDER BY snapshot_date ASC
+           LIMIT 30`
+        )
+        .bind(project, cutoff)
+        .all();
+      if (result.results) {
+        rows.push(...(result.results as typeof rows));
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  return new Response(JSON.stringify({ rows, project, days }), {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=60' },
+  });
+};

package/templates/shared/dashboard/src/pages/api/usage/hourly.ts

@@ -0,0 +1,45 @@
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PLATFORM_DB?: D1Database;
+}
+
+export const GET: APIRoute = async ({ locals, url }) => {
+  const env = locals.runtime?.env as Env | undefined;
+  const db = env?.PLATFORM_DB;
+  const hours = Math.min(Number(url.searchParams.get('hours') ?? '24'), 168);
+
+  const snapshots: Array<{
+    snapshot_hour: string;
+    d1_reads: number;
+    d1_writes: number;
+    kv_reads: number;
+    kv_writes: number;
+    total_cost_usd: number;
+  }> = [];
+
+  if (db) {
+    try {
+      const cutoff = new Date(Date.now() - hours * 3600000).toISOString().slice(0, 19).replace('T', ' ');
+      const result = await db
+        .prepare(
+          `SELECT snapshot_hour, d1_reads, d1_writes, kv_reads, kv_writes, total_cost_usd
+           FROM hourly_usage_snapshots
+           WHERE project = 'all' AND snapshot_hour >= ?
+           ORDER BY snapshot_hour ASC
+           LIMIT 168`
+        )
+        .bind(cutoff)
+        .all();
+      if (result.results) {
+        snapshots.push(...(result.results as typeof snapshots));
+      }
+    } catch {
+      // Table may not exist
+    }
+  }
+
+  return new Response(JSON.stringify({ snapshots, hours }), {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=60' },
+  });
+};