@littlebearapps/platform-admin-sdk 1.5.0 → 2.0.0

package/templates/shared/.github/workflows/dashboard-deploy.yml.hbs

@@ -0,0 +1,39 @@
+name: Deploy Dashboard
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'dashboard/**'
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: dashboard/package-lock.json
+
+      - name: Install dependencies
+        working-directory: dashboard
+        run: npm ci
+
+      - name: Build
+        working-directory: dashboard
+        run: npm run build
+
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: $\{{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: $\{{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages deploy dist --project-name={{projectSlug}}-dashboard
+          workingDirectory: dashboard

package/templates/shared/.github/workflows/security.yml

@@ -0,0 +1,33 @@
+# Security Scanning
+#
+# Runs dependency audit and secret detection on pushes and PRs.
+
+name: Security
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  audit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - run: npm ci
+
+      - name: Audit dependencies
+        run: npm audit --audit-level=high
+        continue-on-error: true
+
+      - name: Check for secrets
+        uses: trufflesecurity/trufflehog@main
+        with:
+          extra_args: --only-verified

package/templates/shared/dashboard/src/components/Nav.astro.hbs

@@ -13,6 +13,7 @@ const navItems: NavItem[] = [
 {{#if isStandard}}
   { href: '/health', label: 'Health', icon: 'activity' },
   { href: '/errors', label: 'Errors', icon: 'alert-triangle' },
+  { href: '/circuit-breakers', label: 'Breakers', icon: 'zap' },
 {{/if}}
 {{#if isFull}}
   { href: '/notifications', label: 'Notifications', icon: 'bell' },
@@ -47,6 +48,7 @@ function isActive(href: string): boolean {
           {item.icon === 'server' && '\u229E'}
           {item.icon === 'activity' && '\u2661'}
           {item.icon === 'alert-triangle' && '\u25B3'}
+          {item.icon === 'zap' && '\u26A1'}
           {item.icon === 'bell' && '\uD83D\uDD14'}
           {item.icon === 'settings' && '\u2699'}
         </span>

package/templates/shared/dashboard/src/components/infrastructure/AlertHistory.tsx

@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+import { EmptyState } from '../ui/EmptyState';
+
+interface Alert {
+  id: number;
+  title: string;
+  severity: string;
+  source: string;
+  created_at: string;
+  resolved_at?: string;
+}
+
+export function AlertHistory() {
+  const [alerts, setAlerts] = useState<Alert[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/usage/anomalies?limit=20')
+      .then((r) => r.json())
+      .then((data: { anomalies: Alert[] }) => {
+        setAlerts(data.anomalies ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={3} />;
+  if (alerts.length === 0) return <EmptyState title="No alerts" description="No recent alerts or anomalies detected." />;
+
+  const severityColour: Record<string, string> = {
+    critical: 'text-red-600 dark:text-red-400',
+    warning: 'text-yellow-600 dark:text-yellow-400',
+    info: 'text-blue-600 dark:text-blue-400',
+  };
+
+  return (
+    <div className="space-y-2">
+      {alerts.map((a) => (
+        <div
+          key={a.id}
+          className="flex items-start justify-between gap-3 py-2 px-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700"
+        >
+          <div className="min-w-0">
+            <p className={`text-sm font-medium ${severityColour[a.severity] ?? 'text-gray-900 dark:text-white'}`}>
+              {a.title}
+            </p>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{a.source}</p>
+          </div>
+          <span className="text-xs text-gray-400 dark:text-gray-500 shrink-0">
+            {new Date(a.created_at).toLocaleDateString()}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/infrastructure/InfrastructureStats.tsx

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface Stats {
+  services: {
+    total: number;
+    byStatus: Record<string, number>;
+    byType: Record<string, number>;
+    byProject: Record<string, number>;
+  };
+  alerts: {
+    total: number;
+    unacknowledged: number;
+    critical: number;
+  };
+}
+
+export function InfrastructureStats() {
+  const [data, setData] = useState<Stats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/infrastructure/stats')
+      .then(res => res.json())
+      .then((stats: Stats) => { setData(stats); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={4} />;
+
+  if (!data) {
+    return <p className="text-sm text-gray-500 dark:text-gray-400">No infrastructure data available.</p>;
+  }
+
+  const cards = [
+    { label: 'Total Services', value: data.services.total, icon: '\u229E' },
+    { label: 'Deployed', value: data.services.byStatus.deployed ?? 0, icon: '\u2713' },
+    { label: 'Alerts', value: data.alerts.total, icon: '\u25B3' },
+    { label: 'Critical', value: data.alerts.critical, icon: '\u26A0' },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        {cards.map(card => (
+          <div key={card.label} className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="opacity-50">{card.icon}</span>
+              <span className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">{card.label}</span>
+            </div>
+            <p className="text-2xl font-bold text-gray-900 dark:text-white">{card.value}</p>
+          </div>
+        ))}
+      </div>
+
+      {Object.keys(data.services.byType).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-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+            By Resource Type
+          </h3>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+            {Object.entries(data.services.byType).map(([type, count]) => (
+              <div key={type} className="flex items-center justify-between py-1">
+                <span className="text-sm text-gray-600 dark:text-gray-300">{type}</span>
+                <span className="text-sm font-medium text-gray-900 dark:text-white">{count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/infrastructure/ServiceRegistry.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { EmptyState } from '../ui/EmptyState';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface Service {
+  script_name: string;
+  project: string;
+  resource_type: string;
+  last_seen_at?: string;
+}
+
+export function ServiceRegistry() {
+  const [services, setServices] = useState<Service[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/infrastructure/services')
+      .then((r) => r.json())
+      .then((data: { services: Service[] }) => {
+        setServices(data.services ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={5} />;
+  if (services.length === 0) return <EmptyState title="No services" description="Register services via services.yaml." />;
+
+  const grouped = services.reduce<Record<string, Service[]>>((acc, s) => {
+    const key = s.project || 'unassigned';
+    (acc[key] ??= []).push(s);
+    return acc;
+  }, {});
+
+  return (
+    <div className="space-y-4">
+      {Object.entries(grouped).map(([project, svcList]) => (
+        <div key={project}>
+          <h4 className="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 mb-1">{project}</h4>
+          <div className="space-y-1">
+            {svcList.map((s) => (
+              <div
+                key={s.script_name}
+                className="flex items-center justify-between py-1 px-2 text-sm bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700"
+              >
+                <span className="font-mono text-gray-900 dark:text-white">{s.script_name}</span>
+                <span className="text-xs text-gray-400 dark:text-gray-500">{s.resource_type}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/infrastructure/UptimeStatus.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface ServiceStatus {
+  name: string;
+  status: 'healthy' | 'degraded' | 'down' | 'unknown';
+  lastCheck: string;
+  uptimePct?: number;
+}
+
+export function UptimeStatus() {
+  const [services, setServices] = useState<ServiceStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/infrastructure/services')
+      .then((r) => r.json())
+      .then((data: { services: ServiceStatus[] }) => {
+        setServices(data.services ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={3} />;
+
+  const statusColour: Record<string, string> = {
+    healthy: 'bg-green-500',
+    degraded: 'bg-yellow-500',
+    down: 'bg-red-500',
+    unknown: 'bg-gray-400',
+  };
+
+  return (
+    <div className="space-y-2">
+      {services.length === 0 ? (
+        <p className="text-sm text-gray-500 dark:text-gray-400">No service data available.</p>
+      ) : (
+        services.map((s) => (
+          <div
+            key={s.name}
+            className="flex items-center justify-between py-1.5 px-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700"
+          >
+            <div className="flex items-center gap-2">
+              <span className={`w-2 h-2 rounded-full ${statusColour[s.status] ?? statusColour.unknown}`} />
+              <span className="text-sm text-gray-900 dark:text-white">{s.name}</span>
+            </div>
+            {s.uptimePct !== undefined && (
+              <span className="text-xs text-gray-500 dark:text-gray-400">{s.uptimePct.toFixed(1)}%</span>
+            )}
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { InfrastructureStats } from './InfrastructureStats';
+export { UptimeStatus } from './UptimeStatus';
+export { ServiceRegistry } from './ServiceRegistry';
+export { AlertHistory } from './AlertHistory';

package/templates/shared/dashboard/src/components/ui/Breadcrumbs.tsx

@@ -0,0 +1,27 @@
+interface Crumb {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  items: Crumb[];
+}
+
+export function Breadcrumbs({ items }: Props) {
+  return (
+    <nav className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 mb-4">
+      {items.map((item, i) => (
+        <span key={i} className="flex items-center gap-1.5">
+          {i > 0 && <span className="opacity-40">/</span>}
+          {item.href ? (
+            <a href={item.href} className="hover:text-gray-900 dark:hover:text-white transition-colors">
+              {item.label}
+            </a>
+          ) : (
+            <span className="text-gray-900 dark:text-white font-medium">{item.label}</span>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}

package/templates/shared/dashboard/src/components/ui/EmptyState.tsx

@@ -0,0 +1,26 @@
+interface Props {
+  icon?: string;
+  title: string;
+  description?: string;
+  action?: { label: string; href: string };
+}
+
+export function EmptyState({ icon = '\u2205', title, description, action }: Props) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <span className="text-4xl mb-3 opacity-40">{icon}</span>
+      <h3 className="text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
+      {description && (
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 max-w-sm">{description}</p>
+      )}
+      {action && (
+        <a
+          href={action.href}
+          className="mt-4 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline"
+        >
+          {action.label}
+        </a>
+      )}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/ui/ErrorBoundary.tsx

@@ -0,0 +1,42 @@
+import { Component } from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error('[ErrorBoundary]', error, errorInfo);
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        this.props.fallback ?? (
+          <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-sm font-medium text-red-800 dark:text-red-300">Something went wrong</p>
+            <p className="text-xs text-red-600 dark:text-red-400 mt-1">{this.state.error?.message}</p>
+          </div>
+        )
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/templates/shared/dashboard/src/components/ui/LoadingSkeleton.tsx

@@ -0,0 +1,18 @@
+interface Props {
+  lines?: number;
+  className?: string;
+}
+
+export function LoadingSkeleton({ lines = 3, className = '' }: Props) {
+  return (
+    <div className={`animate-pulse space-y-3 ${className}`}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          className="h-4 bg-gray-200 dark:bg-gray-700 rounded"
+          style={{ width: `${85 - i * 15}%` }}
+        />
+      ))}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/ui/PageShell.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { Breadcrumbs } from './Breadcrumbs';
+
+interface PageShellProps {
+  title: string;
+  description?: string;
+  breadcrumbs?: Array<{ label: string; href?: string }>;
+  actions?: ReactNode;
+  children: ReactNode;
+}
+
+export function PageShell({ title, description, breadcrumbs, actions, children }: PageShellProps) {
+  return (
+    <div className="space-y-4">
+      {breadcrumbs && breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} />}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-white">{title}</h1>
+          {description && <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{description}</p>}
+        </div>
+        {actions && <div className="shrink-0">{actions}</div>}
+      </div>
+      {children}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/ui/Toast.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+
+interface Props {
+  type: 'success' | 'error' | 'info';
+  message: string;
+  duration?: number;
+  onDismiss?: () => void;
+}
+
+const styles: Record<Props['type'], string> = {
+  success: 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200',
+  error: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+  info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200',
+};
+
+export function Toast({ type, message, duration = 5000, onDismiss }: Props) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (duration <= 0) return;
+    const timer = setTimeout(() => {
+      setVisible(false);
+      onDismiss?.();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onDismiss]);
+
+  if (!visible) return null;
+
+  return (
+    <div className={`fixed bottom-4 right-4 z-50 border rounded-lg px-4 py-3 shadow-lg max-w-sm ${styles[type]}`}>
+      <div className="flex items-center justify-between gap-3">
+        <p className="text-sm font-medium">{message}</p>
+        <button
+          onClick={() => { setVisible(false); onDismiss?.(); }}
+          className="text-current opacity-50 hover:opacity-100 shrink-0"
+          aria-label="Dismiss"
+        >
+          x
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -1,3 +1,9 @@
 export { Sparkline } from './Sparkline';
 export { StatusDot } from './StatusDot';
 export { AlertBanner } from './AlertBanner';
+export { EmptyState } from './EmptyState';
+export { LoadingSkeleton } from './LoadingSkeleton';
+export { Breadcrumbs } from './Breadcrumbs';
+export { Toast } from './Toast';
+export { ErrorBoundary } from './ErrorBoundary';
+export { PageShell } from './PageShell';

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

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react';
+import { EmptyState } from '../ui/EmptyState';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface Anomaly {
+  id: number;
+  project: string;
+  metric: string;
+  current_value: number;
+  baseline_value: number;
+  deviation_pct: number;
+  detected_at: string;
+  status: string;
+}
+
+export function AnomaliesWidget() {
+  const [anomalies, setAnomalies] = useState<Anomaly[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/usage/anomalies')
+      .then(res => res.json())
+      .then((data: { anomalies: Anomaly[] }) => { setAnomalies(data.anomalies); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={3} />;
+
+  if (anomalies.length === 0) {
+    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">
+          Anomalies
+        </h3>
+        <EmptyState title="No anomalies detected" description="Usage patterns look normal." />
+      </div>
+    );
+  }
+
+  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">
+        Recent Anomalies
+      </h3>
+      <div className="space-y-2">
+        {anomalies.map(a => (
+          <div key={a.id} className="flex items-center justify-between py-1.5 border-b border-gray-100 dark:border-gray-700 last:border-0">
+            <div>
+              <p className="text-sm text-gray-900 dark:text-white">
+                {a.metric.replace(/_/g, ' ')} — {a.project}
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                {new Date(a.detected_at).toLocaleDateString()}
+              </p>
+            </div>
+            <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
+              a.deviation_pct > 200
+                ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+            }`}>
+              +{a.deviation_pct}%
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { Sparkline } from '../ui/Sparkline';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface Snapshot {
+  snapshot_hour: string;
+  d1_reads: number;
+  d1_writes: number;
+  kv_reads: number;
+  kv_writes: number;
+  total_cost_usd: number;
+}
+
+interface Props {
+  hours?: number;
+}
+
+export function HourlyUsageChart({ hours = 24 }: Props) {
+  const [snapshots, setSnapshots] = useState<Snapshot[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`/api/usage/hourly?hours=${hours}`)
+      .then(res => res.json())
+      .then((data: { snapshots: Snapshot[] }) => { setSnapshots(data.snapshots); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, [hours]);
+
+  if (loading) return <LoadingSkeleton lines={3} />;
+
+  const costData = snapshots.map(s => s.total_cost_usd);
+  const d1WriteData = snapshots.map(s => s.d1_writes);
+
+  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">
+        Hourly Usage ({hours}h)
+      </h3>
+      {snapshots.length === 0 ? (
+        <p className="text-sm text-gray-400">No hourly data available yet.</p>
+      ) : (
+        <div className="space-y-4">
+          <div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Cost (USD)</p>
+            <Sparkline data={costData} height={40} color="blue" />
+          </div>
+          <div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">D1 Writes</p>
+            <Sparkline data={d1WriteData} height={40} color="amber" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}