@littlebearapps/platform-admin-sdk 1.4.2 → 2.0.0

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

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+interface Props {
+  type: 'error' | 'warning' | 'info';
+  message: string;
+  detail?: string;
+  dismissable?: boolean;
+}
+
+export function AlertBanner({ type, message, detail, dismissable = true }: Props) {
+  const [dismissed, setDismissed] = useState(false);
+  if (dismissed) return null;
+
+  const styles = {
+    error: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+    warning: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200',
+    info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200',
+  };
+
+  return (
+    <div className={`border rounded-lg p-4 ${styles[type]}`}>
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <p className="font-medium">{message}</p>
+          {detail && <p className="text-sm mt-1 opacity-80">{detail}</p>}
+        </div>
+        {dismissable && (
+          <button
+            onClick={() => setDismissed(true)}
+            className="text-current opacity-50 hover:opacity-100 p-1"
+            aria-label="Dismiss"
+          >
+            x
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

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/Sparkline.tsx

@@ -0,0 +1,127 @@
+/**
+ * Sparkline Component
+ *
+ * Inline SVG sparkline for activity trends.
+ * Minimal, industrial aesthetic.
+ */
+
+import { useMemo } from 'react';
+
+interface SparklineProps {
+  data: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+  strokeWidth?: number;
+  showFill?: boolean;
+  className?: string;
+}
+
+export function Sparkline({
+  data,
+  width = 60,
+  height = 20,
+  color = '#3b82f6',
+  strokeWidth = 1.5,
+  showFill = true,
+  className = '',
+}: SparklineProps) {
+  const pathData = useMemo(() => {
+    if (data.length < 2) return { line: '', fill: '' };
+
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+
+    // Padding to prevent clipping
+    const padding = 2;
+    const chartWidth = width - padding * 2;
+    const chartHeight = height - padding * 2;
+
+    const points = data.map((value, index) => {
+      const x = padding + (index / (data.length - 1)) * chartWidth;
+      const y = padding + chartHeight - ((value - min) / range) * chartHeight;
+      return { x, y };
+    });
+
+    // Build line path
+    const linePath = points
+      .map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`))
+      .join(' ');
+
+    // Build fill path (close at bottom)
+    const fillPath = `${linePath} L ${points[points.length - 1].x} ${height - padding} L ${padding} ${height - padding} Z`;
+
+    return { line: linePath, fill: fillPath };
+  }, [data, width, height]);
+
+  if (data.length < 2) {
+    return (
+      <svg
+        width={width}
+        height={height}
+        className={className}
+        viewBox={`0 0 ${width} ${height}`}
+        aria-hidden="true"
+      >
+        <line
+          x1={2}
+          y1={height / 2}
+          x2={width - 2}
+          y2={height / 2}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeOpacity={0.3}
+          strokeDasharray="2 2"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox={`0 0 ${width} ${height}`}
+      aria-hidden="true"
+    >
+      {/* Fill gradient */}
+      {showFill && (
+        <>
+          <defs>
+            <linearGradient
+              id={`sparkline-fill-${color.replace('#', '')}`}
+              x1="0"
+              y1="0"
+              x2="0"
+              y2="1"
+            >
+              <stop offset="0%" stopColor={color} stopOpacity={0.3} />
+              <stop offset="100%" stopColor={color} stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <path d={pathData.fill} fill={`url(#sparkline-fill-${color.replace('#', '')})`} />
+        </>
+      )}
+      {/* Line */}
+      <path
+        d={pathData.line}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* End dot */}
+      <circle
+        cx={width - 2}
+        cy={pathData.line ? parseFloat(pathData.line.split(' ').slice(-1)[0]) : height / 2}
+        r={2}
+        fill={color}
+      />
+    </svg>
+  );
+}
+
+export default Sparkline;

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

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+
+interface Props {
+  status: 'green' | 'yellow' | 'red' | 'gray';
+  size?: 'sm' | 'md';
+}
+
+export function StatusDot({ status, size = 'sm' }: Props) {
+  return (
+    <span
+      className={clsx(
+        'inline-block rounded-full',
+        size === 'sm' ? 'w-2 h-2' : 'w-3 h-3',
+        status === 'green' && 'bg-green-500',
+        status === 'yellow' && 'bg-yellow-500',
+        status === 'red' && 'bg-red-500',
+        status === 'gray' && 'bg-gray-400',
+      )}
+    />
+  );
+}

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

@@ -0,0 +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>
+  );
+}

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/env.d.ts.hbs

@@ -0,0 +1,34 @@
+/// <reference types="astro/client" />
+
+interface Env {
+  PLATFORM_DB: D1Database;
+  PLATFORM_CACHE: KVNamespace;
+  USAGE_API: Fetcher;
+{{#if isStandard}}
+  ERROR_COLLECTOR_API: Fetcher;
+{{/if}}
+{{#if isFull}}
+  PATTERN_DISCOVERY_API: Fetcher;
+  NOTIFICATIONS_API: Fetcher;
+  SETTINGS_API: Fetcher;
+  SEARCH_API: Fetcher;
+{{/if}}
+  CF_ACCESS_AUD?: string;
+  CF_ACCESS_ISSUER?: string;
+  CF_ACCESS_TEAM_DOMAIN?: string;
+}
+
+declare namespace App {
+  interface Locals {
+    runtime?: {
+      env: Env;
+    };
+    user?: {
+      email?: string;
+      name?: string;
+      sub?: string;
+      audience?: unknown;
+      issuer?: unknown;
+    };
+  }
+}