@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/filters/ProjectSelect.astro

@@ -0,0 +1,284 @@
+---
+/**
+ * ProjectSelect Component
+ *
+ * Project filter dropdown using nanostores for reactive state.
+ * Fetches projects dynamically from the D1 registry via /api/usage/projects.
+ * No page reload on selection.
+ *
+ * Part of task-21: Usage Dashboard Refactor Phase 3 - Integrated Filter Bar
+ * Updated: task-XX: D1-backed project registry
+ */
+
+interface Props {
+  /** Initial project from URL (for SSR hydration) */
+  initialProject?: string;
+}
+
+const { initialProject = 'all' } = Astro.props;
+
+// Fallback projects shown during initial render (before API response)
+const fallbackProjects = [{ value: 'all', label: 'All Projects' }];
+---
+
+<div class="project-select" data-component="project-select" data-initial={initialProject}>
+  <label for="project-filter" class="select-label">Project</label>
+  <div class="select-wrapper">
+    <select id="project-filter" class="select-input">
+      {
+        fallbackProjects.map((proj) => (
+          <option value={proj.value} selected={initialProject === proj.value}>
+            {proj.label}
+          </option>
+        ))
+      }
+    </select>
+    <svg
+      class="select-chevron"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 4.5L6 7.5L9 4.5"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+    </svg>
+  </div>
+</div>
+
+<style>
+  .project-select {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .select-label {
+    font-size: 0.625rem;
+    font-weight: 600;
+    color: var(--usage-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .select-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .select-input {
+    appearance: none;
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+    font-family: inherit;
+    font-weight: 500;
+    color: var(--usage-text-primary);
+    background-color: var(--usage-bg-tertiary);
+    border: 1px solid var(--usage-border-primary);
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    min-width: 140px;
+  }
+
+  .select-input:hover {
+    border-color: var(--usage-border-hover);
+    background-color: var(--usage-bg-secondary);
+  }
+
+  .select-input:focus {
+    outline: none;
+    border-color: var(--usage-accent-primary);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--usage-accent-primary) 25%, transparent);
+  }
+
+  .select-chevron {
+    position: absolute;
+    right: 0.75rem;
+    pointer-events: none;
+    color: var(--usage-text-secondary);
+    transition: transform 0.15s ease;
+  }
+
+  .select-wrapper:has(.select-input:focus) .select-chevron {
+    transform: rotate(180deg);
+  }
+
+  @media (max-width: 640px) {
+    .select-input {
+      padding: 0.375rem 1.75rem 0.375rem 0.5rem;
+      font-size: 0.75rem;
+      min-width: 120px;
+    }
+
+    .select-chevron {
+      right: 0.5rem;
+    }
+  }
+
+  /* Dark mode overrides */
+  :global([data-theme='dark']) .select-label,
+  :global(.dark) .select-label {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .select-input,
+  :global(.dark) .select-input {
+    background-color: #21262d;
+    border-color: #30363d;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .select-input:hover,
+  :global(.dark) .select-input:hover {
+    background-color: #161b22;
+    border-color: #484f58;
+  }
+
+  :global([data-theme='dark']) .select-input option,
+  :global(.dark) .select-input option {
+    background-color: #161b22;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .select-chevron,
+  :global(.dark) .select-chevron {
+    color: #8b949e;
+  }
+</style>
+
+<script>
+  import { $project } from '../state/usageStore';
+  import { setProject } from '../state/usageActions';
+
+  interface ProjectOption {
+    value: string;
+    label: string;
+    resourceCount?: number;
+  }
+
+  // Cache fetched projects
+  let projectsCache: ProjectOption[] | null = null;
+
+  /**
+   * Fetch projects from the D1 registry API
+   */
+  async function fetchProjects(): Promise<ProjectOption[]> {
+    if (projectsCache) return projectsCache;
+
+    try {
+      // Include credentials to pass Cloudflare Access JWT cookie
+      const response = await fetch('/api/usage/projects', {
+        credentials: 'include',
+      });
+      if (!response.ok) {
+        console.warn('[ProjectSelect] Failed to fetch projects, using fallback');
+        return getFallbackProjects();
+      }
+
+      const data = await response.json();
+      if (!data.success || !Array.isArray(data.projects)) {
+        return getFallbackProjects();
+      }
+
+      // Map to options: "All Projects" first, then sorted by resource count
+      const options: ProjectOption[] = [
+        { value: 'all', label: 'All Projects', resourceCount: data.totalResources },
+      ];
+
+      for (const project of data.projects) {
+        options.push({
+          value: project.projectId,
+          label: `${project.displayName} (${project.resourceCount})`,
+          resourceCount: project.resourceCount,
+        });
+      }
+
+      projectsCache = options;
+      return options;
+    } catch (error) {
+      console.error('[ProjectSelect] Error fetching projects:', error);
+      return getFallbackProjects();
+    }
+  }
+
+  /**
+   * Fallback projects if API fails
+   */
+  function getFallbackProjects(): ProjectOption[] {
+    return [
+      { value: 'all', label: 'All Projects' },
+      { value: 'brand-copilot', label: 'Brand Copilot' },
+      { value: 'scout', label: 'Scout' },
+      { value: 'platform', label: 'Platform' },
+      { value: 'aus-history', label: 'Australian History MCP' },
+      { value: 'cloakpipe', label: 'CloakPipe' },
+      { value: 'shared', label: 'Shared' },
+    ];
+  }
+
+  /**
+   * Populate the select element with project options
+   */
+  function populateSelect(
+    select: HTMLSelectElement,
+    projects: ProjectOption[],
+    currentValue: string
+  ): void {
+    // Clear existing options
+    select.innerHTML = '';
+
+    // Add options
+    for (const proj of projects) {
+      const option = document.createElement('option');
+      option.value = proj.value;
+      option.textContent = proj.label;
+      if (proj.value === currentValue) {
+        option.selected = true;
+      }
+      select.appendChild(option);
+    }
+  }
+
+  async function initProjectSelect(): Promise<void> {
+    const container = document.querySelector('[data-component="project-select"]');
+    if (!container) return;
+
+    const select = container.querySelector<HTMLSelectElement>('#project-filter');
+    if (!select) return;
+
+    const initialProject = container.getAttribute('data-initial') || 'all';
+
+    // Fetch and populate projects from D1 registry
+    const projects = await fetchProjects();
+    populateSelect(select, projects, initialProject);
+
+    // Handle selection changes
+    select.addEventListener('change', () => {
+      setProject(select.value);
+    });
+
+    // Subscribe to store changes and update UI
+    $project.subscribe((project) => {
+      if (select.value !== project) {
+        select.value = project;
+      }
+    });
+  }
+
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => initProjectSelect());
+  } else {
+    initProjectSelect();
+  }
+
+  // Re-initialize on Astro page transitions
+  document.addEventListener('astro:page-load', () => initProjectSelect());
+</script>

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

@@ -0,0 +1,263 @@
+/**
+ * DashboardShell Component
+ * Industrial Command Center orchestrator - data fetching, state, auto-refresh
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { Activity, RefreshCw, AlertTriangle } from 'lucide-react';
+import { clsx } from 'clsx';
+import {
+  type Period,
+  type UsageRow,
+  type ProjectStatus,
+  type StatusResponse,
+  type QueryResponse,
+} from './types';
+import { UsageChart } from './UsageChart';
+import { UsageTable } from './UsageTable';
+
+interface DashboardShellProps {
+  initialPeriod?: Period;
+}
+
+const REFRESH_INTERVAL = 60_000; // 60 seconds
+
+/**
+ * Period button component
+ */
+function PeriodButton({
+  period,
+  currentPeriod,
+  onClick,
+}: {
+  period: Period;
+  currentPeriod: Period;
+  onClick: (p: Period) => void;
+}) {
+  const isActive = period === currentPeriod;
+  return (
+    <button
+      type="button"
+      onClick={() => onClick(period)}
+      className={clsx(
+        'px-3 py-1.5 text-xs font-mono font-semibold uppercase tracking-wider rounded-sm transition-all',
+        isActive
+          ? 'bg-gray-200 dark:bg-slate-700 text-gray-900 dark:text-slate-100 shadow-inner'
+          : 'bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-800 dark:hover:text-slate-300'
+      )}
+    >
+      {period}
+    </button>
+  );
+}
+
+/**
+ * Live indicator with pulse
+ */
+function LiveIndicator({ isRefreshing }: { isRefreshing: boolean }) {
+  return (
+    <div className="flex items-center gap-2">
+      {isRefreshing ? (
+        <RefreshCw className="w-3.5 h-3.5 text-gray-500 dark:text-slate-400 animate-spin" />
+      ) : (
+        <span className="relative flex h-2.5 w-2.5">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+          <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" />
+        </span>
+      )}
+      <span className="text-xs font-mono text-gray-500 dark:text-slate-500 uppercase tracking-wider">
+        {isRefreshing ? 'Updating' : 'Live'}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Error state component
+ */
+function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return (
+    <div className="bg-rose-500/10 border border-rose-500/30 rounded-sm p-6 flex items-start gap-4">
+      <AlertTriangle className="w-5 h-5 text-rose-400 flex-shrink-0 mt-0.5" />
+      <div className="flex-1">
+        <h3 className="text-rose-200 font-semibold text-sm">Failed to load data</h3>
+        <p className="text-rose-300/80 text-xs mt-1 font-mono">{message}</p>
+        <button
+          type="button"
+          onClick={onRetry}
+          className="mt-3 px-3 py-1.5 bg-rose-500/20 hover:bg-rose-500/30 text-rose-200 text-xs font-mono rounded-sm transition-colors"
+        >
+          Retry
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Loading skeleton
+ */
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6 animate-pulse">
+      {/* Header skeleton */}
+      <div className="flex justify-between items-center">
+        <div className="h-8 bg-gray-200 dark:bg-slate-800 rounded w-48" />
+        <div className="h-8 bg-gray-200 dark:bg-slate-800 rounded w-32" />
+      </div>
+
+      {/* Chart skeleton */}
+      <div className="space-y-3">
+        <div className="h-5 bg-gray-200 dark:bg-slate-800 rounded w-36" />
+        <div className="h-64 bg-gray-100 dark:bg-slate-900 rounded-sm border border-gray-200 dark:border-slate-800" />
+      </div>
+
+      {/* Table skeleton */}
+      <div className="space-y-3">
+        <div className="h-5 bg-gray-200 dark:bg-slate-800 rounded w-24" />
+        <div className="h-48 bg-gray-100 dark:bg-slate-900 rounded-sm border border-gray-200 dark:border-slate-800" />
+      </div>
+    </div>
+  );
+}
+
+export function DashboardShell({ initialPeriod = '24h' }: DashboardShellProps) {
+  const [period, setPeriod] = useState<Period>(initialPeriod);
+  const [loading, setLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [usageData, setUsageData] = useState<UsageRow[]>([]);
+  const [statusMap, setStatusMap] = useState<Record<string, ProjectStatus>>({});
+
+  /**
+   * Fetch data from both endpoints
+   */
+  const fetchData = useCallback(
+    async (isBackground = false) => {
+      if (isBackground) {
+        setIsRefreshing(true);
+      } else {
+        setLoading(true);
+        setError(null);
+      }
+
+      try {
+        const [statusRes, queryRes] = await Promise.all([
+          fetch(`/api/usage/status?period=${period}`),
+          fetch(`/api/usage/query?period=${period}`),
+        ]);
+
+        if (!statusRes.ok) {
+          throw new Error(`Status endpoint failed: ${statusRes.status}`);
+        }
+        if (!queryRes.ok) {
+          throw new Error(`Query endpoint failed: ${queryRes.status}`);
+        }
+
+        const statusData: StatusResponse = await statusRes.json();
+        const queryData: QueryResponse = await queryRes.json();
+
+        if (!statusData.success || !queryData.success) {
+          throw new Error('API returned unsuccessful response');
+        }
+
+        setStatusMap(statusData.projects);
+        setUsageData(queryData.data);
+        setError(null);
+      } catch (err) {
+        if (!isBackground) {
+          setError(err instanceof Error ? err.message : 'Unknown error occurred');
+        }
+        console.error('[DashboardShell] Fetch error:', err);
+      } finally {
+        setLoading(false);
+        setIsRefreshing(false);
+      }
+    },
+    [period]
+  );
+
+  /**
+   * Handle period change - update URL and refetch
+   */
+  const handlePeriodChange = useCallback((newPeriod: Period) => {
+    setPeriod(newPeriod);
+
+    // Update URL without reload
+    const url = new URL(window.location.href);
+    url.searchParams.set('period', newPeriod);
+    history.replaceState(null, '', url.toString());
+  }, []);
+
+  // Initial fetch and period change
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // Auto-refresh interval
+  useEffect(() => {
+    const interval = setInterval(() => {
+      fetchData(true);
+    }, REFRESH_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  if (loading) {
+    return (
+      <div className="p-6 bg-gray-50 dark:bg-slate-950 min-h-screen">
+        <LoadingSkeleton />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6 bg-gray-50 dark:bg-slate-950 min-h-screen">
+        <ErrorState message={error} onRetry={() => fetchData()} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 bg-gray-50 dark:bg-slate-950 min-h-screen space-y-6">
+      {/* Header */}
+      <header className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <Activity className="w-5 h-5 text-gray-600 dark:text-slate-400" />
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-slate-100 tracking-tight">
+            Usage Monitor
+          </h1>
+          <LiveIndicator isRefreshing={isRefreshing} />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <PeriodButton period="24h" currentPeriod={period} onClick={handlePeriodChange} />
+          <PeriodButton period="7d" currentPeriod={period} onClick={handlePeriodChange} />
+        </div>
+      </header>
+
+      {/* Chart section */}
+      <section>
+        <h2 className="text-sm font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider mb-3">
+          Activity Timeline
+        </h2>
+        <UsageChart data={usageData} loading={isRefreshing && usageData.length === 0} />
+      </section>
+
+      {/* Table section */}
+      <section>
+        <h2 className="text-sm font-semibold text-gray-600 dark:text-slate-400 uppercase tracking-wider mb-3">
+          Projects
+        </h2>
+        <UsageTable
+          data={usageData}
+          statusMap={statusMap}
+          loading={isRefreshing && Object.keys(statusMap).length === 0}
+        />
+      </section>
+    </div>
+  );
+}
+
+export default DashboardShell;

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

@@ -0,0 +1,77 @@
+/**
+ * StatusBadge Component
+ * Industrial Command Center aesthetic - sharp corners, pulse dot, monospace
+ */
+
+import { type OperationalStatus, STATUS_COLORS } from './types';
+import { clsx } from 'clsx';
+
+interface StatusBadgeProps {
+  status: OperationalStatus;
+  size?: 'sm' | 'md';
+  showLabel?: boolean;
+}
+
+export function StatusBadge({ status, size = 'md', showLabel = true }: StatusBadgeProps) {
+  const colors = STATUS_COLORS[status];
+
+  const sizeClasses = {
+    sm: 'px-1.5 py-0.5 text-[10px] gap-1',
+    md: 'px-2 py-1 text-xs gap-1.5',
+  };
+
+  const dotSizes = {
+    sm: 'w-1.5 h-1.5',
+    md: 'w-2 h-2',
+  };
+
+  return (
+    <span
+      className={clsx(
+        // Base styles - sharp industrial corners
+        'inline-flex items-center rounded-sm font-mono font-semibold uppercase tracking-wider',
+        // Size
+        sizeClasses[size],
+        // Colours
+        colors.bg,
+        colors.text,
+        // Subtle glow effect
+        'shadow-sm',
+        colors.glow
+      )}
+    >
+      {/* Pulse dot indicator */}
+      <span className="relative flex">
+        <span
+          className={clsx(
+            dotSizes[size],
+            'rounded-full',
+            status === 'RUN' ? 'bg-emerald-400' : status === 'WARN' ? 'bg-amber-400' : 'bg-rose-400'
+          )}
+        />
+        {/* Pulse animation for RUN status */}
+        {status === 'RUN' && (
+          <span
+            className={clsx(
+              'absolute inset-0 rounded-full bg-emerald-400 animate-ping opacity-75',
+              dotSizes[size]
+            )}
+          />
+        )}
+        {/* Slower pulse for WARN status */}
+        {status === 'WARN' && (
+          <span
+            className={clsx(
+              'absolute inset-0 rounded-full bg-amber-400 animate-pulse opacity-50',
+              dotSizes[size]
+            )}
+          />
+        )}
+      </span>
+
+      {showLabel && <span>{status}</span>}
+    </span>
+  );
+}
+
+export default StatusBadge;