@littlebearapps/platform-admin-sdk 1.4.2 → 1.5.0

package/templates/shared/dashboard/src/components/Header.astro

@@ -0,0 +1,29 @@
+---
+---
+
+<header class="sticky top-0 z-10 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 lg:px-6 py-3">
+  <div class="flex items-center justify-between">
+    <div class="lg:hidden">
+      <h1 class="text-lg font-bold text-gray-900 dark:text-white">Platform</h1>
+    </div>
+
+    <div class="flex items-center gap-3 ml-auto">
+      <!-- Dark mode toggle -->
+      <button
+        id="theme-toggle"
+        class="p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+        aria-label="Toggle dark mode"
+      >
+        <span id="theme-light" class="hidden dark:inline">Sun</span>
+        <span id="theme-dark" class="dark:hidden">Moon</span>
+      </button>
+    </div>
+  </div>
+</header>
+
+<script is:inline>
+  document.getElementById('theme-toggle')?.addEventListener('click', () => {
+    const isDark = document.documentElement.classList.toggle('dark');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  });
+</script>

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

@@ -0,0 +1,57 @@
+---
+const pathname = Astro.url.pathname;
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: string;
+}
+
+const navItems: NavItem[] = [
+  { href: '/dashboard', label: 'Overview', icon: 'home' },
+  { href: '/resources', label: 'Resources', icon: 'server' },
+{{#if isStandard}}
+  { href: '/health', label: 'Health', icon: 'activity' },
+  { href: '/errors', label: 'Errors', icon: 'alert-triangle' },
+{{/if}}
+{{#if isFull}}
+  { href: '/notifications', label: 'Notifications', icon: 'bell' },
+{{/if}}
+  { href: '/settings', label: 'Settings', icon: 'settings' },
+];
+
+function isActive(href: string): boolean {
+  return pathname === href || pathname.startsWith(href + '/');
+}
+---
+
+<aside class="hidden lg:flex lg:flex-col lg:w-56 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
+  <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+    <h1 class="text-lg font-bold text-gray-900 dark:text-white">Platform</h1>
+    <p class="text-xs text-gray-500 dark:text-gray-400">Dashboard</p>
+  </div>
+
+  <nav class="flex-1 p-3 space-y-1">
+    {navItems.map((item) => (
+      <a
+        href={item.href}
+        class:list={[
+          'flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors',
+          isActive(item.href)
+            ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 font-medium'
+            : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50',
+        ]}
+      >
+        <span class="w-5 h-5 flex items-center justify-center text-current opacity-60">
+          {item.icon === 'home' && '\u2302'}
+          {item.icon === 'server' && '\u229E'}
+          {item.icon === 'activity' && '\u2661'}
+          {item.icon === 'alert-triangle' && '\u25B3'}
+          {item.icon === 'bell' && '\uD83D\uDD14'}
+          {item.icon === 'settings' && '\u2699'}
+        </span>
+        {item.label}
+      </a>
+    ))}
+  </nav>
+</aside>

package/templates/shared/dashboard/src/components/overview/ActivityFeed.tsx

@@ -0,0 +1,134 @@
+/**
+ * Activity Feed Quadrant - Mission Control
+ * Shows last 5 notifications, pending patterns count, recent alerts
+ */
+
+interface ActivityData {
+  notifications: Array<{
+    id: string;
+    title: string;
+    category: string;
+    priority: string;
+    source: string;
+    created_at: number;
+    action_url: string | null;
+  }>;
+  pendingPatterns: number;
+}
+
+interface Props {
+  data: ActivityData;
+  loading: boolean;
+}
+
+const categoryLabels: Record<string, string> = {
+  error: '[ERR]',
+  warning: '[WARN]',
+  info: '[INFO]',
+  success: '[OK]',
+};
+
+const sourceLabels: Record<string, string> = {
+  'error-collector': 'Error',
+  'pattern-discovery': 'Pattern',
+  'circuit-breaker': 'CB',
+  usage: 'Usage',
+  gatus: 'Monitor',
+  system: 'System',
+};
+
+function formatTimestamp(ts: number): string {
+  if (!ts) return '';
+  const now = Date.now();
+  const diffMs = now - ts * 1000;
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m`;
+  if (diffHours < 24) return `${diffHours}h`;
+  if (diffDays < 7) return `${diffDays}d`;
+  return new Date(ts * 1000).toLocaleDateString('en-AU', { day: 'numeric', month: 'short' });
+}
+
+export function ActivityFeed({ data, loading }: Props) {
+  if (loading) {
+    return <QuadrantSkeleton />;
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          Activity
+        </h3>
+        {data.pendingPatterns > 0 && (
+          <span className="text-xs px-2 py-1 rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">
+            {data.pendingPatterns} pattern{data.pendingPatterns !== 1 ? 's' : ''} pending
+          </span>
+        )}
+      </div>
+
+      {data.notifications.length > 0 ? (
+        <div className="space-y-3">
+          {data.notifications.map((n) => (
+            <div key={n.id} className="flex items-start gap-2">
+              <span className="text-xs font-mono flex-shrink-0 mt-0.5 text-gray-500 dark:text-gray-400">
+                {categoryLabels[n.category] ?? '[INFO]'}
+              </span>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm text-gray-900 dark:text-white truncate">
+                  {n.action_url ? (
+                    <a
+                      href={n.action_url}
+                      className="hover:text-blue-600 dark:hover:text-blue-400"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {n.title}
+                    </a>
+                  ) : (
+                    n.title
+                  )}
+                </div>
+                <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                  <span>{sourceLabels[n.source] ?? n.source}</span>
+                  <span>&middot;</span>
+                  <span>{formatTimestamp(n.created_at)}</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-4 text-sm text-gray-500 dark:text-gray-400">
+          No recent activity
+        </div>
+      )}
+
+      <div className="mt-4 pt-3 border-t border-gray-100 dark:border-gray-700">
+        <a
+          href="/notifications"
+          className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+        >
+          View all notifications &rarr;
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function QuadrantSkeleton() {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="animate-pulse space-y-3">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16" />
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full" />
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full" />
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-2/3" />
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6" />
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/overview/CostQuadrant.tsx

@@ -0,0 +1,131 @@
+/**
+ * Cost Quadrant - Mission Control
+ * Shows MTD spend, daily burn rate, projected monthly, sparkline, vs budget gauge
+ */
+import { Sparkline } from '../ui/Sparkline';
+
+interface CostData {
+  mtdSpend: number;
+  dailyBurnRate: number;
+  projectedMonthly: number;
+  budgetPct: number;
+  monthlyBudget: number;
+  dailyTrend: number[];
+}
+
+interface Props {
+  data: CostData;
+  loading: boolean;
+}
+
+export function CostQuadrant({ data, loading }: Props) {
+  if (loading) {
+    return <QuadrantSkeleton />;
+  }
+
+  const budgetStatus =
+    data.budgetPct > 150
+      ? { label: 'Over Budget', colour: 'text-red-600 dark:text-red-400' }
+      : data.budgetPct > 100
+        ? { label: 'Warning', colour: 'text-yellow-600 dark:text-yellow-400' }
+        : { label: 'On Track', colour: 'text-green-600 dark:text-green-400' };
+
+  const gaugeColour =
+    data.budgetPct > 150
+      ? 'bg-red-500'
+      : data.budgetPct > 100
+        ? 'bg-yellow-500'
+        : 'bg-green-500';
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          Cost Status
+        </h3>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        {/* MTD Spend */}
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">
+            ${data.mtdSpend.toFixed(2)}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+            MTD Spend
+          </div>
+        </div>
+
+        {/* Daily Burn */}
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">
+            ${data.dailyBurnRate.toFixed(2)}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+            Daily Burn
+          </div>
+        </div>
+
+        {/* Projected */}
+        <div>
+          <div className="text-lg font-semibold text-gray-900 dark:text-white">
+            ${data.projectedMonthly.toFixed(2)}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            Projected
+          </div>
+        </div>
+
+        {/* Budget Status */}
+        <div>
+          <div className={`text-lg font-semibold ${budgetStatus.colour}`}>
+            {budgetStatus.label}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            {data.budgetPct}% of ${data.monthlyBudget ?? 100}
+          </div>
+        </div>
+      </div>
+
+      {/* 7-day cost trend sparkline */}
+      {data.dailyTrend.length >= 2 && (
+        <div className="flex items-center gap-2 mb-3 px-1">
+          <span className="text-xs text-gray-400 dark:text-gray-500">7d</span>
+          <Sparkline
+            data={data.dailyTrend}
+            width={120}
+            height={24}
+            color={data.budgetPct > 100 ? '#f59e0b' : '#10b981'}
+            strokeWidth={1.5}
+            showFill
+          />
+        </div>
+      )}
+
+      {/* Budget gauge bar */}
+      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+        <div
+          className={`${gaugeColour} h-2 rounded-full transition-all duration-500`}
+          style={{ width: `${Math.min(data.budgetPct, 100)}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function QuadrantSkeleton() {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="animate-pulse space-y-4">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24" />
+        <div className="grid grid-cols-2 gap-4">
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+        </div>
+        <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full" />
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/overview/ErrorsQuadrant.tsx

@@ -0,0 +1,113 @@
+/**
+ * Errors Quadrant - Mission Control
+ * Shows P0/P1 count, P2/P3 count, new today, sparkline, top 3 errors
+ */
+import { Sparkline } from '../ui/Sparkline';
+
+interface ErrorData {
+  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;
+  }>;
+}
+
+interface Props {
+  data: ErrorData;
+  loading: boolean;
+}
+
+const priorityColours: Record<string, string> = {
+  P0: 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300',
+  P1: 'bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-300',
+  P2: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300',
+  P3: 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300',
+  P4: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+};
+
+export function ErrorsQuadrant({ data, loading }: Props) {
+  if (loading) return <QuadrantSkeleton />;
+
+  const criticalCount = data.p0Count + data.p1Count;
+  const otherCount = data.p2Count + data.p3Count;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          Active Errors
+        </h3>
+      </div>
+      <div className="grid grid-cols-3 gap-3 mb-4">
+        <div>
+          <div className={`text-2xl font-bold ${criticalCount > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white'}`}>
+            {criticalCount}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">P0/P1</div>
+        </div>
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">{otherCount}</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">P2/P3</div>
+        </div>
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">{data.newToday}</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">Today</div>
+        </div>
+      </div>
+      {data.dailyTrend.length >= 2 && (
+        <div className="flex items-center gap-2 mb-3 px-1">
+          <span className="text-xs text-gray-400 dark:text-gray-500">7d</span>
+          <Sparkline data={data.dailyTrend} width={120} height={24} color={criticalCount > 0 ? '#ef4444' : '#6b7280'} strokeWidth={1.5} showFill />
+        </div>
+      )}
+      {data.topErrors.length > 0 && (
+        <div className="space-y-2 border-t border-gray-100 dark:border-gray-700 pt-3">
+          {data.topErrors.map((error) => (
+            <div key={error.fingerprint} className="flex items-center gap-2">
+              <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${priorityColours[error.priority] ?? priorityColours.P4}`}>
+                {error.priority}
+              </span>
+              <span className="text-xs text-gray-600 dark:text-gray-400 truncate flex-1">
+                {error.message || error.script_name}
+              </span>
+              <span className="text-xs text-gray-400 flex-shrink-0">x{error.occurrence_count}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      {data.topErrors.length === 0 && criticalCount === 0 && otherCount === 0 && (
+        <div className="text-center py-2">
+          <div className="text-green-600 dark:text-green-400 text-sm font-medium">No open errors</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function QuadrantSkeleton() {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="animate-pulse space-y-4">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24" />
+        <div className="grid grid-cols-3 gap-3">
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+        </div>
+        <div className="space-y-2">
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/overview/HealthQuadrant.tsx

@@ -0,0 +1,87 @@
+/**
+ * Health Quadrant - Mission Control
+ * Shows uptime %, services status
+ */
+
+interface HealthData {
+  servicesTotal: number;
+  servicesUp: number;
+  servicesDown: number;
+  uptimePct: number;
+  lastAuditScore: number | null;
+  lastAuditDate: string | null;
+}
+
+interface Props {
+  data: HealthData;
+  loading: boolean;
+}
+
+export function HealthQuadrant({ data, loading }: Props) {
+  if (loading) return <QuadrantSkeleton />;
+
+  const healthScore = data.lastAuditScore ?? 0;
+  const scoreColour =
+    healthScore >= 90 ? 'text-green-600 dark:text-green-400'
+      : healthScore >= 70 ? 'text-yellow-600 dark:text-yellow-400'
+        : 'text-red-600 dark:text-red-400';
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          System Health
+        </h3>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <div className={`text-3xl font-bold ${scoreColour}`}>
+            {data.lastAuditScore !== null ? data.lastAuditScore : '\u2014'}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Audit Score</div>
+        </div>
+        <div>
+          <div className="text-3xl font-bold text-gray-900 dark:text-white">
+            {data.uptimePct.toFixed(1)}%
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Uptime (24h)</div>
+        </div>
+        <div>
+          <div className="text-lg font-semibold text-gray-900 dark:text-white">
+            {data.servicesUp}/{data.servicesTotal}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">Services Up</div>
+        </div>
+        <div>
+          {data.servicesDown > 0 ? (
+            <>
+              <div className="text-lg font-semibold text-red-600 dark:text-red-400">{data.servicesDown}</div>
+              <div className="text-xs text-red-500 dark:text-red-400">Down</div>
+            </>
+          ) : (
+            <>
+              <div className="text-lg font-semibold text-green-600 dark:text-green-400">All Clear</div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">No issues</div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function QuadrantSkeleton() {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="animate-pulse space-y-4">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24" />
+        <div className="grid grid-cols-2 gap-4">
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/overview/MissionControl.tsx

@@ -0,0 +1,139 @@
+/**
+ * Mission Control - Overview Page Main Component
+ * Fetches /api/overview/summary and renders 4 quadrants + alert banner
+ */
+import { useState, useEffect } from 'react';
+import { HealthQuadrant } from './HealthQuadrant';
+import { ErrorsQuadrant } from './ErrorsQuadrant';
+import { CostQuadrant } from './CostQuadrant';
+import { ActivityFeed } from './ActivityFeed';
+
+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 function MissionControl() {
+  const [data, setData] = useState<OverviewSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/overview/summary')
+      .then(res => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((summary: OverviewSummary) => {
+        setData(summary);
+        setLoading(false);
+      })
+      .catch(err => {
+        setError(err instanceof Error ? err.message : 'Failed to load overview');
+        setLoading(false);
+      });
+  }, []);
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+        <div className="flex items-center gap-2">
+          <div>
+            <strong className="text-red-800 dark:text-red-200">Error loading overview</strong>
+            <p className="text-sm text-red-600 dark:text-red-300 mt-1">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const dq = data?.dataQuality;
+  const dqDot = dq?.status === 'fresh' ? 'bg-green-500' : dq?.status === 'stale' ? 'bg-yellow-500' : 'bg-gray-400';
+  const dqText = dq?.status === 'fresh'
+    ? `Data ${dq.snapshotAgeMinutes}m ago`
+    : dq?.status === 'stale'
+      ? `Data ${Math.round((dq.snapshotAgeMinutes ?? 0) / 60)}h old`
+      : 'Data age unknown';
+
+  return (
+    <div className="space-y-2">
+      {!loading && (
+        <div className="flex items-center justify-end gap-1.5 text-xs text-gray-400 dark:text-gray-500">
+          <span className={`inline-block w-1.5 h-1.5 rounded-full ${dqDot}`} />
+          {dqText}
+        </div>
+      )}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <HealthQuadrant
+          data={data?.health ?? { servicesTotal: 0, servicesUp: 0, servicesDown: 0, uptimePct: 100, lastAuditScore: null, lastAuditDate: null }}
+          loading={loading}
+        />
+        <ErrorsQuadrant
+          data={data?.errors ?? { p0Count: 0, p1Count: 0, p2Count: 0, p3Count: 0, p4Count: 0, newToday: 0, dailyTrend: [], topErrors: [] }}
+          loading={loading}
+        />
+        <CostQuadrant
+          data={data?.costs ?? { mtdSpend: 0, dailyBurnRate: 0, projectedMonthly: 0, budgetPct: 0, monthlyBudget: 100, dailyTrend: [] }}
+          loading={loading}
+        />
+        <ActivityFeed
+          data={data?.activity ?? { notifications: [], pendingPatterns: 0 }}
+          loading={loading}
+        />
+      </div>
+    </div>
+  );
+}