@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/standard/dashboard/src/components/infrastructure/HealthchecksStatus.tsx

@@ -0,0 +1,293 @@
+/**
+ * Healthchecks Status Component
+ * Shows Gatus heartbeat statuses with flip history
+ */
+import { useState, useEffect } from 'react';
+import { fetchHealthchecks, fetchHealthcheckFlips, type FlipsResponse } from '../../lib/infrastructure/api';
+import type { HealthcheckJob } from '../../lib/infrastructure/types';
+
+const statusColours: Record<string, string> = {
+  up: 'bg-green-500',
+  down: 'bg-red-500',
+  grace: 'bg-yellow-500',
+  paused: 'bg-gray-400',
+  new: 'bg-blue-500',
+};
+
+const statusText: Record<string, string> = {
+  up: 'Healthy',
+  down: 'Down',
+  grace: 'Grace Period',
+  paused: 'Paused',
+  new: 'New',
+};
+
+function formatPeriod(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+  if (seconds < 86400) return `${Math.round(seconds / 3600)}h`;
+  return `${Math.round(seconds / 86400)}d`;
+}
+
+function formatTimeSince(timestamp: number | null): string {
+  if (!timestamp) return 'Never';
+  const now = Math.floor(Date.now() / 1000);
+  const diff = now - timestamp;
+  if (diff < 60) return 'Just now';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp * 1000);
+  const now = new Date();
+  const isToday = date.toDateString() === now.toDateString();
+
+  if (isToday) {
+    return date.toLocaleTimeString('en-AU', { hour: '2-digit', minute: '2-digit' });
+  }
+  return date.toLocaleDateString('en-AU', {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
+
+interface FlipHistoryProps {
+  checkId: string;
+  isExpanded: boolean;
+}
+
+function FlipHistory({ checkId, isExpanded }: FlipHistoryProps) {
+  const [flipsData, setFlipsData] = useState<FlipsResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isExpanded) return;
+
+    async function loadFlips() {
+      setLoading(true);
+      setError(null);
+      try {
+        const data = await fetchHealthcheckFlips(checkId);
+        setFlipsData(data);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Failed to load flips');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadFlips();
+  }, [checkId, isExpanded]);
+
+  if (!isExpanded) return null;
+
+  if (loading) {
+    return (
+      <div className="px-4 pb-4 pt-0">
+        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 animate-pulse">
+          <div className="h-4 bg-gray-200 dark:bg-gray-600 rounded w-32 mb-2"></div>
+          <div className="h-3 bg-gray-200 dark:bg-gray-600 rounded w-48"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="px-4 pb-4 pt-0">
+        <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-3 text-sm text-red-600 dark:text-red-400">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  if (!flipsData || flipsData.flips.length === 0) {
+    return (
+      <div className="px-4 pb-4 pt-0">
+        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 text-sm text-gray-500 dark:text-gray-400">
+          No status changes recorded in the last 30 days
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-4 pb-4 pt-0">
+      <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3">
+        <div className="flex items-center justify-between mb-2">
+          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            Recent Status Changes
+          </h4>
+          {flipsData.flipsToday > 0 && (
+            <span className="text-xs px-2 py-0.5 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">
+              {flipsData.flipsToday} flip{flipsData.flipsToday !== 1 ? 's' : ''} today
+            </span>
+          )}
+        </div>
+
+        <div className="space-y-1">
+          {flipsData.flips.slice(0, 10).map((flip, index) => (
+            <div
+              key={index}
+              className="flex items-center gap-2 text-sm"
+            >
+              <span className={`w-2 h-2 rounded-full ${flip.up ? 'bg-green-500' : 'bg-red-500'}`}></span>
+              <span className={flip.up ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400'}>
+                {flip.up ? 'Recovered' : 'Failed'}
+              </span>
+              <span className="text-gray-500 dark:text-gray-400">
+                {formatTimestamp(flip.timestamp)}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {flipsData.lastFailure && (
+          <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-600 text-xs text-gray-500 dark:text-gray-400">
+            Last failure: {formatTimeSince(flipsData.lastFailure)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function HealthchecksStatus() {
+  const [checks, setChecks] = useState<HealthcheckJob[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [expandedCheck, setExpandedCheck] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const data = await fetchHealthchecks();
+        setChecks(data);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <div className="space-y-3">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="animate-pulse flex items-center gap-3">
+              <div className="w-3 h-3 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+              <div className="flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  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 text-red-700 dark:text-red-300">
+        Error loading healthchecks: {error}
+      </div>
+    );
+  }
+
+  if (checks.length === 0) {
+    return (
+      <div className="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-8 text-center">
+        <span className="text-4xl mb-2 block">&#x23F0;</span>
+        <p className="text-gray-600 dark:text-gray-400">No cron jobs configured</p>
+      </div>
+    );
+  }
+
+  const upCount = checks.filter((c) => c.status === 'up').length;
+  const downCount = checks.filter((c) => c.status === 'down').length;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Summary Header */}
+      <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+        <div>
+          <span className="text-lg font-semibold text-gray-900 dark:text-white">
+            {upCount}/{checks.length} Healthy
+          </span>
+          {downCount > 0 && (
+            <span className="ml-3 text-sm text-red-600 dark:text-red-400">
+              {downCount} down
+            </span>
+          )}
+        </div>
+        <a
+          href="https://status.littlebearapps.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400"
+        >
+          Open Status Page
+        </a>
+      </div>
+
+      {/* Check List */}
+      <div className="divide-y divide-gray-200 dark:divide-gray-700">
+        {checks.map((check) => (
+          <div key={check.id}>
+            <div
+              className="p-4 flex items-center gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer"
+              onClick={() => setExpandedCheck(expandedCheck === check.id ? null : check.id)}
+            >
+              <div className={`w-3 h-3 rounded-full ${statusColours[check.status]}`} title={statusText[check.status]}></div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <p className="font-medium text-gray-900 dark:text-white truncate">{check.name}</p>
+                  {/* Show indicator if check has recent activity */}
+                  {check.status === 'down' && (
+                    <span className="px-1.5 py-0.5 text-xs bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded">
+                      DOWN
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 mt-1">
+                  {check.tags.map((tag) => (
+                    <span key={tag} className="px-1.5 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              <div className="text-right">
+                <p className="text-sm text-gray-700 dark:text-gray-300">
+                  Every {formatPeriod(check.period)}
+                </p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Last: {formatTimeSince(check.lastPing)}
+                </p>
+              </div>
+              {/* Expand indicator */}
+              <svg
+                className={`w-5 h-5 text-gray-400 transition-transform ${expandedCheck === check.id ? 'rotate-180' : ''}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </div>
+
+            {/* Flip History (expandable) */}
+            <FlipHistory checkId={check.id} isExpanded={expandedCheck === check.id} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/standard/dashboard/src/components/infrastructure/InfrastructureTabs.tsx

@@ -0,0 +1,268 @@
+/**
+ * Infrastructure Tabs Component
+ * Organises infrastructure content into navigable tabs
+ */
+import { useState, useEffect } from 'react';
+import { InfrastructureStats } from './InfrastructureStats';
+import { ServiceRegistry } from './ServiceRegistry';
+import { UptimeStatus } from './UptimeStatus';
+import { HealthchecksStatus } from './HealthchecksStatus';
+import { AlertHistory } from './AlertHistory';
+
+type TabId = 'overview' | 'monitoring' | 'services' | 'alerts';
+
+interface Tab {
+  id: TabId;
+  label: string;
+  icon: string;
+}
+
+const tabs: Tab[] = [
+  { id: 'overview', label: 'Overview', icon: '📊' },
+  { id: 'monitoring', label: 'Monitoring', icon: '📡' },
+  { id: 'services', label: 'Services', icon: '⚙️' },
+  { id: 'alerts', label: 'Alerts', icon: '🔔' },
+];
+
+interface AutomationData {
+  cloakpipeErrors: number;
+  homeostatTotals: { total_fixes: number; successful_fixes: number };
+  gatekeeperTotals: { total_publishes: number; successful_publishes: number };
+}
+
+interface Props {
+  automationData?: AutomationData;
+}
+
+export function InfrastructureTabs({ automationData }: Props) {
+  const [activeTab, setActiveTab] = useState<TabId>('overview');
+
+  // Sync with URL hash
+  useEffect(() => {
+    const hash = window.location.hash.slice(1) as TabId;
+    if (hash && tabs.some((t) => t.id === hash)) {
+      setActiveTab(hash);
+    }
+  }, []);
+
+  const handleTabChange = (tabId: TabId) => {
+    setActiveTab(tabId);
+    window.history.replaceState(null, '', `#${tabId}`);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Tab Navigation */}
+      <div className="border-b border-gray-200 dark:border-gray-700">
+        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => handleTabChange(tab.id)}
+              className={`
+                whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm
+                ${
+                  activeTab === tab.id
+                    ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+                }
+              `}
+            >
+              <span className="mr-2">{tab.icon}</span>
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Tab Content */}
+      <div className="min-h-[400px]">
+        {activeTab === 'overview' && (
+          <OverviewTab
+            automationData={automationData}
+            onNavigate={handleTabChange}
+          />
+        )}
+        {activeTab === 'monitoring' && <MonitoringTab />}
+        {activeTab === 'services' && <ServicesTab />}
+        {activeTab === 'alerts' && <AlertsTab />}
+      </div>
+    </div>
+  );
+}
+
+// Overview Tab - Summary of everything
+function OverviewTab({
+  automationData,
+  onNavigate,
+}: {
+  automationData?: AutomationData;
+  onNavigate: (tab: TabId) => void;
+}) {
+  return (
+    <div className="space-y-6">
+      {/* Stats Cards */}
+      <InfrastructureStats />
+
+      {/* Quick Status Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {/* Monitoring Quick View */}
+        <QuickViewCard
+          title="Monitoring"
+          icon="📡"
+          onClick={() => onNavigate('monitoring')}
+        >
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            View uptime monitors and cron job health
+          </p>
+        </QuickViewCard>
+
+        {/* Services Quick View */}
+        <QuickViewCard
+          title="Services"
+          icon="⚙️"
+          onClick={() => onNavigate('services')}
+        >
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Browse and filter the service registry
+          </p>
+        </QuickViewCard>
+
+        {/* Alerts Quick View */}
+        <QuickViewCard
+          title="Alerts"
+          icon="🔔"
+          onClick={() => onNavigate('alerts')}
+        >
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            View and acknowledge recent alerts
+          </p>
+        </QuickViewCard>
+      </div>
+
+      {/* Automation Pipeline (Legacy) - Collapsed by default */}
+      {automationData && (
+        <details className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+          <summary className="px-4 py-3 cursor-pointer text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
+            Automation Pipeline (CloakPipe/HomeoStat/GateKeeper)
+          </summary>
+          <div className="px-4 pb-4">
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+              <AutomationCard
+                title="CloakPipe"
+                value={automationData.cloakpipeErrors}
+                label="Errors logged (24h)"
+              />
+              <AutomationCard
+                title="HomeoStat"
+                value={`${automationData.homeostatTotals.successful_fixes}/${automationData.homeostatTotals.total_fixes}`}
+                label="Successful fixes (24h)"
+              />
+              <AutomationCard
+                title="GateKeeper"
+                value={`${automationData.gatekeeperTotals.successful_publishes}/${automationData.gatekeeperTotals.total_publishes}`}
+                label="Successful publishes (24h)"
+              />
+            </div>
+          </div>
+        </details>
+      )}
+    </div>
+  );
+}
+
+// Monitoring Tab - Uptime + Healthchecks
+function MonitoringTab() {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <section>
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Uptime &amp; Services
+        </h2>
+        <UptimeStatus />
+      </section>
+
+      <section>
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Cron Jobs &amp; Servers
+        </h2>
+        <HealthchecksStatus />
+      </section>
+    </div>
+  );
+}
+
+// Services Tab - Full Service Registry
+function ServicesTab() {
+  return (
+    <section>
+      <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+        Service Registry
+      </h2>
+      <ServiceRegistry />
+    </section>
+  );
+}
+
+// Alerts Tab - Alert History
+function AlertsTab() {
+  return (
+    <section>
+      <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+        Alert History
+      </h2>
+      <AlertHistory />
+    </section>
+  );
+}
+
+// Helper Components
+function QuickViewCard({
+  title,
+  icon,
+  onClick,
+  children,
+}: {
+  title: string;
+  icon: string;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="w-full text-left bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 hover:border-blue-500 dark:hover:border-blue-400 transition-colors"
+    >
+      <div className="flex items-center gap-2 mb-2">
+        <span>{icon}</span>
+        <h3 className="font-medium text-gray-900 dark:text-white">{title}</h3>
+        <span className="ml-auto text-gray-400">→</span>
+      </div>
+      {children}
+    </button>
+  );
+}
+
+function AutomationCard({
+  title,
+  value,
+  label,
+}: {
+  title: string;
+  value: number | string;
+  label: string;
+}) {
+  return (
+    <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-3">
+      <div className="text-sm font-medium text-gray-600 dark:text-gray-400">
+        {title}
+      </div>
+      <div className="text-xl font-bold mt-1 text-gray-900 dark:text-white">
+        {value}
+      </div>
+      <div className="mt-1 text-xs text-gray-500 dark:text-gray-500">
+        {label}
+      </div>
+    </div>
+  );
+}

package/templates/standard/dashboard/src/pages/analytics.astro

@@ -0,0 +1,64 @@
+---
+import DashboardLayout from '../layouts/DashboardLayout.astro';
+
+interface ProductMetricRow {
+  source: string;
+  metric_type: string;
+  value: number;
+  timestamp: number;
+}
+
+const runtime = (Astro.locals as App.Locals | undefined)?.runtime;
+const db = runtime?.env?.PLATFORM_DB;
+
+const metricsByType: Record<string, number> = {};
+
+if (db) {
+  const result = await db
+    .prepare(
+      `SELECT source, metric_type, value, timestamp
+       FROM product_metrics
+       WHERE source IN ('plausible', 'ga4')
+       ORDER BY timestamp DESC
+       LIMIT 100`
+    )
+    .all<ProductMetricRow>();
+
+  for (const row of result.results ?? []) {
+    const key = `${row.source}:${row.metric_type}`;
+    if (!(key in metricsByType)) {
+      metricsByType[key] = row.value ?? 0;
+    }
+  }
+}
+
+const pageviews = metricsByType['plausible:pageviews'] ?? 0;
+const activeUsers = metricsByType['plausible:active_users'] ?? 0;
+const installs = metricsByType['ga4:installs'] ?? 0;
+---
+
+<DashboardLayout title="Analytics">
+  <div class="space-y-6">
+    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Product Analytics</h2>
+
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
+      <div class="metric-card">
+        <div class="metric-title">Pageviews</div>
+        <div class="metric-value">{pageviews.toLocaleString()}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">Last 30 days (Plausible)</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Active Users</div>
+        <div class="metric-value">{activeUsers.toLocaleString()}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">Last 30 days (Plausible)</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Chrome Installs</div>
+        <div class="metric-value">{installs.toLocaleString()}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">Last 30 days (GA4)</div>
+      </div>
+    </div>
+  </div>
+</DashboardLayout>