@littlebearapps/platform-admin-sdk 1.4.2 → 1.5.0

package/templates/shared/dashboard/src/components/resources/AllowanceStatus.tsx

@@ -0,0 +1,44 @@
+interface Allowance {
+  service: string;
+  metric: string;
+  used: number;
+  included: number;
+  unit: string;
+}
+
+interface Props {
+  allowances: Allowance[];
+}
+
+export function AllowanceStatus({ allowances }: Props) {
+  if (allowances.length === 0) {
+    return (
+      <div className="text-center py-4 text-sm text-gray-500 dark:text-gray-400">
+        No allowance data available yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {allowances.map((a) => {
+        const pct = a.included > 0 ? Math.min((a.used / a.included) * 100, 100) : 0;
+        const colour = pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-yellow-500' : 'bg-green-500';
+
+        return (
+          <div key={`${a.service}-${a.metric}`}>
+            <div className="flex justify-between text-sm mb-1">
+              <span className="text-gray-700 dark:text-gray-300">{a.service} — {a.metric}</span>
+              <span className="text-gray-500 dark:text-gray-400">
+                {a.used.toLocaleString()} / {a.included.toLocaleString()} {a.unit}
+              </span>
+            </div>
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+              <div className={`${colour} h-2 rounded-full transition-all`} style={{ width: `${pct}%` }} />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/resources/CostCentreOverview.tsx

@@ -0,0 +1,42 @@
+interface CostRow {
+  service: string;
+  mtdCost: number;
+  pctOfTotal: number;
+}
+
+interface Props {
+  costs: CostRow[];
+}
+
+export function CostCentreOverview({ costs }: Props) {
+  if (costs.length === 0) {
+    return (
+      <div className="text-center py-4 text-sm text-gray-500 dark:text-gray-400">
+        No cost data available yet.
+      </div>
+    );
+  }
+
+  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-3 text-gray-500 dark:text-gray-400 font-medium">Service</th>
+            <th className="text-right py-2 px-3 text-gray-500 dark:text-gray-400 font-medium">MTD Cost</th>
+            <th className="text-right py-2 px-3 text-gray-500 dark:text-gray-400 font-medium">% of Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          {costs.map((row) => (
+            <tr key={row.service} className="border-b border-gray-100 dark:border-gray-800">
+              <td className="py-2 px-3 text-gray-900 dark:text-white">{row.service}</td>
+              <td className="py-2 px-3 text-right text-gray-900 dark:text-white">${row.mtdCost.toFixed(2)}</td>
+              <td className="py-2 px-3 text-right text-gray-500 dark:text-gray-400">{row.pctOfTotal}%</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/resources/ResourceTabs.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+
+type Tab = 'overview' | 'workers' | 'databases' | 'storage';
+
+export function ResourceTabs() {
+  const [activeTab, setActiveTab] = useState<Tab>('overview');
+  const [status, setStatus] = useState<{ latestSnapshot: string | null; trackedFeatures: number } | null>(null);
+
+  useEffect(() => {
+    fetch('/api/usage/status')
+      .then(res => res.json())
+      .then(setStatus)
+      .catch(() => {});
+  }, []);
+
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'workers', label: 'Workers' },
+    { id: 'databases', label: 'Databases' },
+    { id: 'storage', label: 'Storage' },
+  ];
+
+  return (
+    <div>
+      <div className="border-b border-gray-200 dark:border-gray-700 mb-4">
+        <nav className="flex gap-4">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`py-2 px-1 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === tab.id
+                  ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                  : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      <div className="space-y-4">
+        {activeTab === 'overview' && (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="metric-card">
+              <div className="metric-title">Last Snapshot</div>
+              <div className="metric-value text-lg">{status?.latestSnapshot ?? 'N/A'}</div>
+            </div>
+            <div className="metric-card">
+              <div className="metric-title">Tracked Features</div>
+              <div className="metric-value">{status?.trackedFeatures ?? 0}</div>
+            </div>
+            <div className="metric-card">
+              <div className="metric-title">Status</div>
+              <div className="metric-value text-lg text-green-600 dark:text-green-400">Active</div>
+            </div>
+          </div>
+        )}
+        {activeTab !== 'overview' && (
+          <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+            <p>Resource details for {activeTab} will appear here once data is collected.</p>
+            <p className="text-sm mt-2">Configure collectors in services.yaml and run sync:config.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,3 @@
+export { ResourceTabs } from './ResourceTabs';
+export { CostCentreOverview } from './CostCentreOverview';
+export { AllowanceStatus } from './AllowanceStatus';

package/templates/shared/dashboard/src/components/settings/SettingsCard.tsx

@@ -0,0 +1,21 @@
+interface Props {
+  label: string;
+  value: string;
+  description: string;
+}
+
+export function SettingsCard({ label, value, description }: Props) {
+  return (
+    <div 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">
+        <div>
+          <h3 className="text-sm font-medium text-gray-900 dark:text-white">{label}</h3>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{description}</p>
+        </div>
+        <span className="text-sm font-mono text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
+          {value}
+        </span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export { SettingsCard } from './SettingsCard';

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/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/index.ts

@@ -0,0 +1,3 @@
+export { Sparkline } from './Sparkline';
+export { StatusDot } from './StatusDot';
+export { AlertBanner } from './AlertBanner';

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;
+    };
+  }
+}

package/templates/shared/dashboard/src/layouts/DashboardLayout.astro

@@ -0,0 +1,37 @@
+---
+import Nav from '../components/Nav.astro';
+import Header from '../components/Header.astro';
+import '../styles/global.css';
+
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title} | Platform Dashboard</title>
+    <script is:inline>
+      if (localStorage.getItem('theme') === 'dark' ||
+          (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+      }
+    </script>
+  </head>
+  <body class="h-full bg-gray-50 dark:bg-gray-900">
+    <div class="flex h-full">
+      <Nav />
+      <div class="flex-1 flex flex-col min-w-0">
+        <Header />
+        <main class="flex-1 overflow-y-auto p-4 lg:p-6">
+          <slot />
+        </main>
+      </div>
+    </div>
+  </body>
+</html>

package/templates/shared/dashboard/src/lib/fetch.ts

@@ -0,0 +1,29 @@
+const inflight = new Map<string, Promise<unknown>>();
+
+export async function fetchWithDedup<T>(url: string, init?: RequestInit): Promise<T> {
+  const key = `${init?.method ?? 'GET'}:${url}`;
+
+  if (inflight.has(key)) {
+    return inflight.get(key) as Promise<T>;
+  }
+
+  const promise = (async () => {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 10000);
+
+    try {
+      const res = await fetch(url, { ...init, signal: controller.signal });
+      clearTimeout(timeout);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      return (await res.json()) as T;
+    } catch (error) {
+      clearTimeout(timeout);
+      throw error;
+    } finally {
+      inflight.delete(key);
+    }
+  })();
+
+  inflight.set(key, promise);
+  return promise;
+}

package/templates/shared/dashboard/src/lib/types.ts

@@ -0,0 +1,72 @@
+export interface OverviewSummary {
+  health: {
+    servicesTotal: number;
+    servicesUp: number;
+    servicesDown: number;
+    uptimePct: number;
+    lastAuditScore: number | null;
+    lastAuditDate: string | null;
+  };
+  errors: {
+    p0Count: number;
+    p1Count: number;
+    p2Count: number;
+    p3Count: number;
+    p4Count: number;
+    newToday: number;
+    dailyTrend: number[];
+    topErrors: Array<{
+      fingerprint: string;
+      message: string;
+      script_name: string;
+      priority: string;
+      occurrence_count: number;
+    }>;
+  };
+  costs: {
+    mtdSpend: number;
+    dailyBurnRate: number;
+    projectedMonthly: number;
+    budgetPct: number;
+    monthlyBudget: number;
+    dailyTrend: number[];
+  };
+  activity: {
+    notifications: Array<{
+      id: string;
+      title: string;
+      category: string;
+      priority: string;
+      source: string;
+      created_at: number;
+      action_url: string | null;
+    }>;
+    pendingPatterns: number;
+  };
+  alerts: {
+    hasP0P1: boolean;
+    trippedBreakers: number;
+    warningBreakers: number;
+    servicesDown: number;
+  };
+  dataQuality?: {
+    latestSnapshot: string | null;
+    snapshotAgeMinutes: number;
+    status: 'fresh' | 'stale' | 'unknown';
+  };
+}
+
+export interface CircuitBreakerState {
+  key: string;
+  feature: string;
+  status: string;
+  reason: string | null;
+  trippedAt: string | null;
+}
+
+export interface UsageStatus {
+  status: string;
+  latestSnapshot: string | null;
+  latestCost: number;
+  trackedFeatures: number;
+}

package/templates/shared/dashboard/src/middleware/auth.ts

@@ -0,0 +1,100 @@
+import type { MiddlewareHandler } from 'astro';
+import { createRemoteJWKSet, jwtVerify } from 'jose';
+
+type AccessEnv = {
+  CF_ACCESS_AUD?: string;
+  CF_ACCESS_ISSUER?: string;
+  CF_ACCESS_TEAM_DOMAIN?: string;
+};
+
+const jwksCache = new Map<string, ReturnType<typeof createRemoteJWKSet>>();
+
+function resolveIssuer(env: AccessEnv): string | null {
+  if (env.CF_ACCESS_ISSUER) {
+    return env.CF_ACCESS_ISSUER.replace(/\/$/, '');
+  }
+  if (env.CF_ACCESS_TEAM_DOMAIN) {
+    const domain = env.CF_ACCESS_TEAM_DOMAIN.replace(/https?:\/\//, '').replace(/\/$/, '');
+    return `https://${domain}`;
+  }
+  return null;
+}
+
+function parseAudiences(env: AccessEnv): string[] {
+  if (!env.CF_ACCESS_AUD) return [];
+  return env.CF_ACCESS_AUD.split(',').map((aud) => aud.trim()).filter(Boolean);
+}
+
+function getRemoteJwks(issuer: string) {
+  if (!jwksCache.has(issuer)) {
+    const jwksUrl = new URL('/cdn-cgi/access/certs', issuer);
+    jwksCache.set(issuer, createRemoteJWKSet(jwksUrl));
+  }
+  return jwksCache.get(issuer)!;
+}
+
+function isDevelopment() {
+  return typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.DEV;
+}
+
+export const onRequest: MiddlewareHandler = async (context, next) => {
+  const url = new URL(context.request.url);
+  const pathname = url.pathname;
+
+  // Allow API routes to handle their own auth if needed
+  if (pathname.startsWith('/api/')) {
+    return next();
+  }
+
+  const runtimeEnv = (context.locals.runtime?.env ?? {}) as AccessEnv;
+  const issuer = resolveIssuer(runtimeEnv);
+  const audiences = parseAudiences(runtimeEnv);
+
+  // Bypass auth during build/prerender
+  if (!issuer && audiences.length === 0) {
+    const jwt = context.request.headers.get('cf-access-jwt-assertion');
+    if (!jwt) {
+      return next();
+    }
+  }
+
+  const jwt =
+    context.request.headers.get('cf-access-jwt-assertion') ??
+    context.request.headers.get('Cf-Access-Jwt-Assertion');
+
+  if (!jwt) {
+    if (isDevelopment() && !issuer) {
+      console.warn('[auth] Missing Access JWT in development; skipping validation');
+      return next();
+    }
+    return new Response('Unauthorized', { status: 401 });
+  }
+
+  if (!issuer || audiences.length === 0) {
+    if (isDevelopment()) {
+      console.warn('[auth] Missing Access configuration in development; skipping validation');
+      return next();
+    }
+    console.error('[auth] Access configuration missing: expected CF_ACCESS_ISSUER (or CF_ACCESS_TEAM_DOMAIN) and CF_ACCESS_AUD');
+    return new Response('Server configuration error', { status: 500 });
+  }
+
+  try {
+    const jwks = getRemoteJwks(issuer);
+    const verification = await jwtVerify(jwt, jwks, { issuer, audience: audiences });
+    const payload = verification.payload as Record<string, unknown>;
+
+    context.locals.user = {
+      email: typeof payload.email === 'string' ? payload.email : undefined,
+      name: typeof payload.name === 'string' ? payload.name : undefined,
+      sub: typeof payload.sub === 'string' ? payload.sub : undefined,
+      audience: payload.aud,
+      issuer: payload.iss,
+    };
+
+    return next();
+  } catch (error) {
+    console.error('[auth] Access JWT validation failed', error);
+    return new Response('Unauthorized', { status: 401 });
+  }
+};

package/templates/shared/dashboard/src/middleware/index.ts

@@ -0,0 +1 @@
+export { onRequest } from './auth';