@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/react/UsageChart.tsx

@@ -0,0 +1,391 @@
+/**
+ * UsageChart Component
+ * Industrial Command Center aesthetic - stacked bar/area chart with radar grid texture
+ */
+
+import { useMemo } from 'react';
+import {
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  type TooltipProps,
+} from 'recharts';
+import { format, parseISO } from 'date-fns';
+import { type UsageRow, type ChartDataPoint, METRIC_COLORS } from './types';
+import type { GranularResponse, ToolType } from '../unified/types';
+import { TOOL_CONFIG } from '../unified/types';
+
+interface UsageChartProps {
+  data: UsageRow[];
+  loading?: boolean;
+  period?: '24h' | '7d' | '30d';
+  /** When 'stacked', renders a BarChart with all 9 tools from granularData */
+  chartType?: 'area' | 'stacked';
+  /** Granular usage data for stacked bar chart (all 9 tools per day) */
+  granularData?: GranularResponse | null;
+}
+
+/**
+ * Format large numbers with K/M suffix
+ */
+function formatNumber(value: number): string {
+  if (isNaN(value) || value === 0) return '0';
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+  return value.toFixed(0);
+}
+
+/**
+ * Transform raw usage rows into chart data points
+ * Groups by time_bucket and aggregates metrics
+ */
+function transformData(rows: UsageRow[]): ChartDataPoint[] {
+  const grouped = new Map<string, ChartDataPoint>();
+
+  for (const row of rows) {
+    const existing = grouped.get(row.time_bucket);
+    if (existing) {
+      existing.d1 += (row.d1_reads || 0) + (row.d1_writes || 0);
+      existing.kv += (row.kv_reads || 0) + (row.kv_writes || 0);
+      existing.workers += row.workers_requests || 0;
+      existing.total = existing.d1 + existing.kv + existing.workers;
+    } else {
+      const d1 = (row.d1_reads || 0) + (row.d1_writes || 0);
+      const kv = (row.kv_reads || 0) + (row.kv_writes || 0);
+      const workers = row.workers_requests || 0;
+      grouped.set(row.time_bucket, {
+        time: row.time_bucket,
+        timestamp: new Date(row.time_bucket).getTime(),
+        d1,
+        kv,
+        workers,
+        total: d1 + kv + workers,
+      });
+    }
+  }
+
+  return Array.from(grouped.values()).sort((a, b) => a.timestamp - b.timestamp);
+}
+
+/**
+ * Custom tooltip with dark industrial styling
+ */
+function CustomTooltip({ active, payload, label }: TooltipProps<number, string>) {
+  if (!active || !payload || !payload.length) return null;
+
+  let formattedTime: string;
+  try {
+    formattedTime = format(parseISO(label), 'MMM d, HH:mm');
+  } catch {
+    formattedTime = label;
+  }
+
+  return (
+    <div className="bg-white dark:bg-slate-900 border border-gray-300 dark:border-slate-700 rounded-sm p-3 shadow-xl">
+      <p className="text-gray-600 dark:text-slate-400 text-xs font-mono mb-2">{formattedTime}</p>
+      <div className="space-y-1">
+        {payload.map((entry) => (
+          <div key={entry.name} className="flex items-center justify-between gap-4">
+            <span className="flex items-center gap-2">
+              <span className="w-2 h-2 rounded-sm" style={{ backgroundColor: entry.color }} />
+              <span className="text-gray-700 dark:text-slate-300 text-xs uppercase tracking-wide">
+                {entry.name}
+              </span>
+            </span>
+            <span className="text-gray-900 dark:text-slate-100 text-xs font-mono font-semibold">
+              {formatNumber(entry.value as number)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Custom tooltip for stacked bar chart with all 9 tools
+ */
+function StackedTooltip({ active, payload, label }: TooltipProps<number, string>) {
+  if (!active || !payload || !payload.length) return null;
+
+  // Format date (YYYY-MM-DD format from granular API)
+  let formattedDate: string;
+  try {
+    formattedDate = format(parseISO(label), 'MMM d, yyyy');
+  } catch {
+    formattedDate = label;
+  }
+
+  // Calculate total
+  const total = payload.reduce((sum, entry) => sum + ((entry.value as number) || 0), 0);
+
+  // Sort by value descending for display
+  const sortedPayload = [...payload].sort(
+    (a, b) => ((b.value as number) || 0) - ((a.value as number) || 0)
+  );
+
+  return (
+    <div className="bg-white dark:bg-slate-900 border border-gray-300 dark:border-slate-700 rounded-sm p-3 shadow-xl min-w-[180px]">
+      <p className="text-gray-600 dark:text-slate-400 text-xs font-mono mb-2 border-b border-gray-200 dark:border-slate-700 pb-2">
+        {formattedDate}
+      </p>
+      <div className="space-y-1">
+        {sortedPayload
+          .filter((entry) => (entry.value as number) > 0)
+          .map((entry) => (
+            <div key={entry.name} className="flex items-center justify-between gap-4">
+              <span className="flex items-center gap-2">
+                <span className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: entry.color }} />
+                <span className="text-gray-700 dark:text-slate-300 text-xs">{entry.name}</span>
+              </span>
+              <span className="text-gray-900 dark:text-slate-100 text-xs font-mono font-semibold">
+                {formatNumber(entry.value as number)}
+              </span>
+            </div>
+          ))}
+      </div>
+      <div className="border-t border-gray-200 dark:border-slate-700 mt-2 pt-2 flex justify-between">
+        <span className="text-gray-600 dark:text-slate-400 text-xs font-semibold">Total</span>
+        <span className="text-gray-900 dark:text-slate-100 text-xs font-mono font-bold">
+          {formatNumber(total)}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Loading skeleton with industrial styling
+ */
+function ChartSkeleton() {
+  return (
+    <div className="h-64 bg-gray-50 dark:bg-slate-900/50 rounded-sm border border-gray-200 dark:border-slate-800 animate-pulse flex items-center justify-center">
+      <div className="text-gray-400 dark:text-slate-600 font-mono text-sm">
+        Loading activity data...
+      </div>
+    </div>
+  );
+}
+
+export function UsageChart({
+  data,
+  loading = false,
+  period = '24h',
+  chartType = 'area',
+  granularData,
+}: UsageChartProps) {
+  const chartData = useMemo(() => transformData(data), [data]);
+
+  // Transform granular data for stacked bar chart (all 9 tools)
+  const stackedChartData = useMemo(() => {
+    if (!granularData?.byDate) return [];
+    return granularData.byDate.map((day) => ({
+      ...day,
+      // Ensure all tool values exist for stacking
+      workers: day.workers || 0,
+      d1: day.d1 || 0,
+      kv: day.kv || 0,
+      r2: day.r2 || 0,
+      vectorize: day.vectorize || 0,
+      durableObjects: day.durableObjects || 0,
+      queues: day.queues || 0,
+      workersAI: day.workersAI || 0,
+      pages: day.pages || 0,
+    }));
+  }, [granularData]);
+
+  // Sorted tool keys by order from TOOL_CONFIG
+  const sortedToolKeys = useMemo(() => {
+    return (Object.keys(TOOL_CONFIG) as ToolType[]).sort(
+      (a, b) => TOOL_CONFIG[a].order - TOOL_CONFIG[b].order
+    );
+  }, []);
+
+  // Format X-axis ticks based on period and chart type
+  const formatXAxisTick = (value: string) => {
+    try {
+      const date = parseISO(value);
+      // For stacked chart (daily data) or longer periods, show date (MMM d)
+      // For 24h area chart, show time (HH:mm)
+      if (chartType === 'stacked' || period !== '24h') {
+        return format(date, 'MMM d');
+      }
+      return format(date, 'HH:mm');
+    } catch {
+      return value;
+    }
+  };
+
+  if (loading) return <ChartSkeleton />;
+
+  // Stacked bar chart rendering for all 9 tools
+  if (chartType === 'stacked') {
+    if (stackedChartData.length === 0) {
+      return (
+        <div className="h-64 bg-gray-50 dark:bg-slate-900/50 rounded-sm border border-gray-200 dark:border-slate-800 flex items-center justify-center">
+          <div className="text-gray-500 dark:text-slate-500 font-mono text-sm">
+            No granular usage data available
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="h-64 bg-white dark:bg-slate-950 rounded-sm border border-gray-200 dark:border-slate-800 p-4 relative overflow-hidden">
+        {/* Subtle grid texture overlay for radar feel */}
+        <div
+          className="absolute inset-0 opacity-5 pointer-events-none"
+          style={{
+            backgroundImage: `
+              linear-gradient(to right, #475569 1px, transparent 1px),
+              linear-gradient(to bottom, #475569 1px, transparent 1px)
+            `,
+            backgroundSize: '20px 20px',
+          }}
+        />
+
+        <div className="w-full h-full min-h-[200px]">
+          <ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={180}>
+            <BarChart data={stackedChartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#334155" strokeOpacity={0.5} />
+              <XAxis
+                dataKey="date"
+                stroke="#64748b"
+                fontSize={10}
+                fontFamily="ui-monospace, monospace"
+                tickFormatter={formatXAxisTick}
+                tick={{ fill: '#64748b' }}
+                axisLine={{ stroke: '#475569' }}
+                tickLine={{ stroke: '#475569' }}
+              />
+              <YAxis
+                stroke="#64748b"
+                fontSize={10}
+                fontFamily="ui-monospace, monospace"
+                tickFormatter={formatNumber}
+                tick={{ fill: '#64748b' }}
+                axisLine={{ stroke: '#475569' }}
+                tickLine={{ stroke: '#475569' }}
+                width={45}
+              />
+              <Tooltip content={<StackedTooltip />} />
+              <Legend
+                wrapperStyle={{ fontSize: '10px', fontFamily: 'ui-monospace, monospace' }}
+                iconType="square"
+                iconSize={8}
+              />
+              {sortedToolKeys.map((toolKey) => (
+                <Bar
+                  key={toolKey}
+                  dataKey={toolKey}
+                  name={TOOL_CONFIG[toolKey].label}
+                  stackId="usage"
+                  fill={TOOL_CONFIG[toolKey].color}
+                />
+              ))}
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    );
+  }
+
+  if (chartData.length === 0) {
+    return (
+      <div className="h-64 bg-gray-50 dark:bg-slate-900/50 rounded-sm border border-gray-200 dark:border-slate-800 flex items-center justify-center">
+        <div className="text-gray-500 dark:text-slate-500 font-mono text-sm">
+          No activity data available
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-64 bg-white dark:bg-slate-950 rounded-sm border border-gray-200 dark:border-slate-800 p-4 relative overflow-hidden">
+      {/* Subtle grid texture overlay for radar feel */}
+      <div
+        className="absolute inset-0 opacity-5 pointer-events-none"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, #475569 1px, transparent 1px),
+            linear-gradient(to bottom, #475569 1px, transparent 1px)
+          `,
+          backgroundSize: '20px 20px',
+        }}
+      />
+
+      <div className="w-full h-full min-h-[200px]">
+        <ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={180}>
+          <AreaChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+            {/* Grid with industrial styling */}
+            <CartesianGrid strokeDasharray="3 3" stroke="#334155" strokeOpacity={0.5} />
+
+            {/* X-Axis - Time */}
+            <XAxis
+              dataKey="time"
+              stroke="#64748b"
+              fontSize={10}
+              fontFamily="ui-monospace, monospace"
+              tickFormatter={formatXAxisTick}
+              tick={{ fill: '#64748b' }}
+              axisLine={{ stroke: '#475569' }}
+              tickLine={{ stroke: '#475569' }}
+            />
+
+            {/* Y-Axis - Count */}
+            <YAxis
+              stroke="#64748b"
+              fontSize={10}
+              fontFamily="ui-monospace, monospace"
+              tickFormatter={formatNumber}
+              tick={{ fill: '#64748b' }}
+              axisLine={{ stroke: '#475569' }}
+              tickLine={{ stroke: '#475569' }}
+              width={45}
+            />
+
+            <Tooltip content={<CustomTooltip />} />
+
+            {/* Stacked areas - Workers (bottom), KV (middle), D1 (top) */}
+            <Area
+              type="monotone"
+              dataKey="workers"
+              name="Workers"
+              stackId="1"
+              stroke={METRIC_COLORS.workers.stroke}
+              fill={METRIC_COLORS.workers.fill}
+              strokeWidth={2}
+            />
+            <Area
+              type="monotone"
+              dataKey="kv"
+              name="KV"
+              stackId="1"
+              stroke={METRIC_COLORS.kv.stroke}
+              fill={METRIC_COLORS.kv.fill}
+              strokeWidth={2}
+            />
+            <Area
+              type="monotone"
+              dataKey="d1"
+              name="D1"
+              stackId="1"
+              stroke={METRIC_COLORS.d1.stroke}
+              fill={METRIC_COLORS.d1.fill}
+              strokeWidth={2}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+export default UsageChart;

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

@@ -0,0 +1,30 @@
+/**
+ * Interactive Usage Dashboard - React Components
+ * Industrial Command Center aesthetic
+ */
+
+// Types
+export type {
+  OperationalStatus,
+  Period,
+  CircuitBreakerState,
+  ProjectStatus,
+  UsageRow,
+  ChartDataPoint,
+  ProjectTableRow,
+  StatusResponse,
+  QueryResponse,
+  MetricType,
+} from './types';
+
+export { METRIC_COLORS, STATUS_COLORS, CB_COLORS } from './types';
+
+// Components
+export { StatusBadge } from './StatusBadge';
+export { UsageChart } from './UsageChart';
+export { DashboardShell } from './DashboardShell';
+
+{{#if isStandard}}
+// Standard tier components
+export { UsageTable } from './UsageTable';
+{{/if}}

package/templates/shared/dashboard/src/components/usage/react/types.ts

@@ -0,0 +1,137 @@
+/**
+ * Interactive Usage Dashboard Types
+ * Industrial Command Center aesthetic - data-dense, monospace metrics
+ */
+
+export type OperationalStatus = 'RUN' | 'WARN' | 'STOP';
+export type Period = '24h' | '7d';
+export type CircuitBreakerState = 'active' | 'tripped';
+
+/**
+ * Project status summary for table display
+ */
+export interface ProjectStatus {
+  status: OperationalStatus;
+  spend: number;
+  cap: number;
+  percentage: number;
+  circuitBreaker: CircuitBreakerState;
+  lastSeen?: string; // ISO timestamp from heartbeat
+}
+
+/**
+ * Raw usage row from the API - time-series data
+ */
+export interface UsageRow {
+  time_bucket: string;
+  project_id: string;
+  d1_writes: number;
+  d1_reads: number;
+  kv_reads: number;
+  kv_writes: number;
+  workers_requests: number;
+  interaction_count: number;
+}
+
+/**
+ * Aggregated data point for chart display
+ */
+export interface ChartDataPoint {
+  time: string;
+  timestamp: number;
+  d1: number;
+  kv: number;
+  workers: number;
+  total: number;
+}
+
+/**
+ * Table row with project summary
+ */
+export interface ProjectTableRow {
+  id: string;
+  name: string;
+  status: OperationalStatus;
+  activity: number;
+  activityTrend: number[]; // Last 6 data points for sparkline
+  spend: number;
+  cap: number;
+  percentage: number;
+  circuitBreaker: CircuitBreakerState;
+  lastSeen?: string; // ISO timestamp from heartbeat
+}
+
+/**
+ * API response: project status endpoint
+ */
+export interface StatusResponse {
+  success: true;
+  projects: Record<string, ProjectStatus>;
+  timestamp: string;
+}
+
+/**
+ * API response: usage query endpoint
+ */
+export interface QueryResponse {
+  success: true;
+  data: UsageRow[];
+}
+
+/**
+ * Metric type for chart colour mapping
+ */
+export type MetricType = 'd1' | 'kv' | 'workers';
+
+/**
+ * Chart colour configuration
+ */
+export const METRIC_COLORS: Record<MetricType, { fill: string; stroke: string }> = {
+  d1: { fill: 'rgba(16, 185, 129, 0.3)', stroke: '#10b981' }, // emerald
+  kv: { fill: 'rgba(245, 158, 11, 0.3)', stroke: '#f59e0b' }, // amber
+  workers: { fill: 'rgba(59, 130, 246, 0.3)', stroke: '#3b82f6' }, // blue
+};
+
+/**
+ * Status colour configuration
+ */
+export const STATUS_COLORS: Record<OperationalStatus, { bg: string; text: string; glow: string }> =
+  {
+    RUN: {
+      bg: 'bg-emerald-500/20',
+      text: 'text-emerald-400',
+      glow: 'shadow-emerald-500/20',
+    },
+    WARN: {
+      bg: 'bg-amber-500/20',
+      text: 'text-amber-400',
+      glow: 'shadow-amber-500/20',
+    },
+    STOP: {
+      bg: 'bg-rose-500/20',
+      text: 'text-rose-400',
+      glow: 'shadow-rose-500/20',
+    },
+  };
+
+/**
+ * Circuit breaker colour configuration
+ */
+export const CB_COLORS: Record<CircuitBreakerState, string> = {
+  active: 'bg-emerald-500',
+  tripped: 'bg-rose-500',
+};
+
+/**
+ * Health status based on heartbeat recency
+ */
+export type HealthStatus = 'online' | 'idle' | 'unknown';
+
+/**
+ * Health indicator colour configuration
+ */
+export const HEALTH_COLORS: Record<HealthStatus, { dot: string; text: string }> = {
+  online: { dot: '🟢', text: 'text-emerald-400' },
+  idle: { dot: '🟡', text: 'text-amber-400' },
+  unknown: { dot: '⚪', text: 'text-slate-500' },
+};