feat: add health ping monitoring with GitHub-style contribution chart

.env.example

@@ -58,3 +58,6 @@ AUTH_PASSKEY_ENABLED=true
 
 # Retention
 RETENTION_CRON="* * * * *"
+
+# Health Ping (check database connectivity)
+HEALTH_PING_CRON="* * * * *"

app/(customer)/dashboard/(admin)/health/page.tsx

@@ -0,0 +1,64 @@
+import {PageParams} from "@/types/next";
+import {Page, PageContent, PageDescription, PageHeader, PageTitle} from "@/features/layout/page";
+import {currentUser} from "@/lib/auth/current-user";
+import {notFound} from "next/navigation";
+import {listOrganizations} from "@/lib/auth/auth";
+import {getDatabasesWithHealth, getHealthPingFailures} from "@/db/services/health-ping";
+import {getAllHealthDashboardPreferences} from "@/db/services/health-dashboard-preference";
+import {HealthStatusList} from "@/components/wrappers/dashboard/health/health-status-list";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Health Status",
+};
+
+export default async function RoutePage(props: PageParams<{}>) {
+    const user = await currentUser();
+    const organizations = await listOrganizations();
+
+    if (!user || !organizations) notFound();
+
+    const organizationIds = organizations.map((org) => org.id);
+    const databases = await getDatabasesWithHealth(organizationIds);
+    const databaseIds = databases.map((db) => db.id);
+
+    const [failedPings, preferences] = await Promise.all([
+        getHealthPingFailures(databaseIds, 180),
+        getAllHealthDashboardPreferences(user.id),
+    ]);
+
+    const prefsMap: Record<string, boolean> = {};
+    for (const pref of preferences) {
+        prefsMap[pref.databaseId] = pref.visible;
+    }
+
+    const serializedDatabases = databases.map((db) => ({
+        id: db.id,
+        name: db.name,
+        dbms: db.dbms,
+        lastContact: db.lastContact,
+    }));
+
+    const serializedFailures = failedPings.map((f) => ({
+        databaseId: f.databaseId,
+        timestamp: f.timestamp,
+    }));
+
+    return (
+        <Page>
+            <PageHeader>
+                <PageTitle>Health Status</PageTitle>
+            </PageHeader>
+            <PageDescription>
+                Monitor the health of your agents and databases. Toggle the switch to pin a chart to your main dashboard.
+            </PageDescription>
+            <PageContent>
+                <HealthStatusList
+                    databases={serializedDatabases}
+                    failedPings={serializedFailures}
+                    preferences={prefsMap}
+                />
+            </PageContent>
+        </Page>
+    );
+}

app/(customer)/dashboard/home/page.tsx

@@ -9,6 +9,10 @@ import {asc, inArray} from "drizzle-orm";
 import * as drizzleDb from "@/db";
 import {listOrganizations} from "@/lib/auth/auth";
 import {Metadata} from "next";
+import {getHealthDashboardPreferences} from "@/db/services/health-dashboard-preference";
+import {getHealthPingFailures} from "@/db/services/health-ping";
+import {HealthPingChart} from "@/components/wrappers/dashboard/health/health-ping-chart";
+import {Badge} from "@/components/ui/badge";
 
 export const metadata: Metadata = {
     title: "Home",
@@ -50,6 +54,15 @@ export default async function RoutePage(props: PageParams<{}>) {
 
     const availableBackups = backupsEvolution.filter(backup => backup.deletedAt == null);
 
+    // Health dashboard: fetch pinned databases and their failure data
+    const pinnedPrefs = await getHealthDashboardPreferences(user.id);
+    const pinnedDbIds = pinnedPrefs.map((p) => p.databaseId);
+    const pinnedDatabases = databasesOfAllProjects.filter((db) => pinnedDbIds.includes(db.id));
+
+    let pinnedFailures: {databaseId: string; databaseName: string; timestamp: Date}[] = [];
+    if (pinnedDbIds.length > 0) {
+        pinnedFailures = await getHealthPingFailures(pinnedDbIds, 180);
+    }
 
     return (
         <Page>
@@ -124,6 +137,32 @@ export default async function RoutePage(props: PageParams<{}>) {
                         </CardContent>
                     </Card>
                 </div>
+                {pinnedDatabases.length > 0 && (
+                    <div className="flex flex-col gap-4">
+                        <div className="flex items-center gap-2">
+                            <h2 className="text-lg font-semibold">Health Monitoring</h2>
+                            <Badge variant="secondary" className="text-xs">Agent Health</Badge>
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            {pinnedDatabases.map((database) => {
+                                const dbFailures = pinnedFailures
+                                    .filter((f) => f.databaseId === database.id)
+                                    .map((f) => ({timestamp: f.timestamp}));
+
+                                return (
+                                    <HealthPingChart
+                                        key={database.id}
+                                        databaseName={database.name}
+                                        databaseId={database.id}
+                                        dbms={database.dbms}
+                                        lastContact={database.lastContact}
+                                        failedPings={dbFailures}
+                                    />
+                                );
+                            })}
+                        </div>
+                    </div>
+                )}
                 {/*Do not delete*/}
                 {/*<div className="flex flex-1 flex-col gap-4">*/}
                 {/*    <div className="grid auto-rows-min gap-4 md:grid-cols-3">*/}

src/components/wrappers/dashboard/common/sidebar/menu-sidebar-main.tsx

@@ -7,7 +7,8 @@ import {
     Layers,
     ChartArea,
     ShieldHalf,
-    Building, UserRoundCog, Mail, PackageOpen, Logs, Megaphone, Blocks, Warehouse, BookOpen
+    Building, UserRoundCog, Mail, PackageOpen, Logs, Megaphone, Blocks, Warehouse, BookOpen,
+    HeartPulse
 } from "lucide-react";
 import {SidebarGroupItem, SidebarMenuCustomBase} from "@/components/wrappers/dashboard/common/sidebar/menu-sidebar";
 import {authClient} from "@/lib/auth/auth-client";
@@ -62,6 +63,12 @@ export const SidebarMenuCustomMain = () => {
                     details: true,
                     type: "item"
                 },
+                {
+                    title: "Health Status",
+                    url: "/health",
+                    icon: HeartPulse,
+                    type: "item"
+                },
                 {
                     title: "Notifications",
                     url: "/notifications",

src/components/wrappers/dashboard/database/channels-policy/policy.schema.ts

@@ -3,7 +3,7 @@ import {z} from "zod";
 export const PolicySchema = z.object({
     channelId: z.string().min(1, "Please select channel"),
     eventKinds: z.array(z.enum([
-        'error_backup', 'error_restore', 'success_restore', 'success_backup', 'weekly_report'
+        'error_backup', 'error_restore', 'success_restore', 'success_backup', 'weekly_report', 'health_ping_fail'
     ]))
         .optional(),
     enabled: z.boolean().default(true),
@@ -24,6 +24,7 @@ export const EVENT_KIND_OPTIONS = [
     {label: "Success Restore", value: "success_restore"},
     {label: "Success Backup", value: "success_backup"},
     // {label: "Weekly Report", value: "weekly_report"},
+    {label: "Health Ping Fail", value: "health_ping_fail"},
 ];
 
 export const EVENT_KIND_BACKUP_ONLY_OPTIONS = [

src/components/wrappers/dashboard/health/health-ping-chart.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import {useMemo} from "react";
+import {cn} from "@/lib/utils";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {ConnectionIndicator} from "@/components/wrappers/common/connection-indicator";
+
+export type HealthPingChartProps = {
+    databaseName: string;
+    databaseId: string;
+    dbms: string;
+    lastContact: Date | null;
+    failedPings: {timestamp: Date}[];
+    days?: number;
+};
+
+type CellData = {
+    date: Date;
+    dayLabel: string;
+    failures: number;
+    isFuture: boolean;
+    isToday: boolean;
+};
+
+function buildGrid(pastDays: number, futureDays: number, failedPings: {timestamp: Date}[]): CellData[] {
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+    const cells: CellData[] = [];
+
+    const failuresByDay = new Map<string, number>();
+    for (const ping of failedPings) {
+        const d = new Date(ping.timestamp);
+        const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+        failuresByDay.set(key, (failuresByDay.get(key) || 0) + 1);
+    }
+
+    for (let i = pastDays; i >= -futureDays; i--) {
+        const date = new Date(now);
+        date.setDate(date.getDate() - i);
+
+        const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+        const isToday = i === 0;
+        const isFuture = i < 0;
+        const failures = isFuture ? 0 : (failuresByDay.get(key) || 0);
+
+        const dayLabel = date.toLocaleDateString(undefined, {
+            weekday: "short",
+            month: "short",
+            day: "numeric",
+        });
+
+        cells.push({date, dayLabel, failures, isFuture, isToday});
+    }
+
+    return cells;
+}
+
+function getCellColor(cell: CellData): string {
+    if (cell.isFuture) return "bg-muted";
+    if (cell.failures > 0) {
+        if (cell.failures >= 10) return "bg-red-600";
+        if (cell.failures >= 5) return "bg-red-500";
+        return "bg-red-400";
+    }
+    return "bg-green-500";
+}
+
+export const HealthPingChart = ({
+    databaseName,
+    databaseId,
+    dbms,
+    lastContact,
+    failedPings,
+    days = 90,
+}: HealthPingChartProps) => {
+    const cells = useMemo(() => buildGrid(days, days, failedPings), [days, failedPings]);
+
+    const weeks: (CellData | null)[][] = useMemo(() => {
+        const result: (CellData | null)[][] = [];
+        for (let i = 0; i < cells.length; i += 7) {
+            const week: (CellData | null)[] = cells.slice(i, i + 7);
+            while (week.length < 7) {
+                week.push(null);
+            }
+            result.push(week);
+        }
+        return result;
+    }, [cells]);
+
+    const pastCells = cells.filter((c) => !c.isFuture);
+    const totalFailures = failedPings.length;
+    const healthyDays = pastCells.filter((c) => c.failures === 0).length;
+
+    return (
+        <Card className="w-full">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <div className="flex items-center gap-3">
+                    <ConnectionIndicator date={lastContact}/>
+                    <div>
+                        <CardTitle className="text-sm font-medium">{databaseName}</CardTitle>
+                        <p className="text-xs text-muted-foreground uppercase">{dbms}</p>
+                    </div>
+                </div>
+                <div className="text-right">
+                    <p className="text-xs text-muted-foreground">
+                        {healthyDays}/{pastCells.length} healthy days
+                    </p>
+                    {totalFailures > 0 && (
+                        <p className="text-xs text-red-500">{totalFailures} failure(s)</p>
+                    )}
+                </div>
+            </CardHeader>
+            <CardContent>
+                <div className="flex gap-0.5 overflow-x-auto pb-2">
+                    {weeks.map((week, weekIdx) => (
+                        <div key={weekIdx} className="flex flex-col gap-0.5">
+                            {week.map((cell, dayIdx) => (
+                                cell === null ? (
+                                    <div
+                                        key={`${weekIdx}-${dayIdx}`}
+                                        className="w-3 h-3 rounded-full bg-muted"
+                                    />
+                                ) : cell.isFuture ? (
+                                    <Tooltip key={`${weekIdx}-${dayIdx}`}>
+                                        <TooltipTrigger asChild>
+                                            <div className="w-3 h-3 rounded-full bg-muted cursor-default"/>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            <p className="font-medium">{cell.dayLabel}</p>
+                                            <p>Forecast</p>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                ) : (
+                                    <Tooltip key={`${weekIdx}-${dayIdx}`}>
+                                        <TooltipTrigger asChild>
+                                            <div
+                                                className={cn(
+                                                    "w-3 h-3 rounded-full cursor-default transition-colors",
+                                                    getCellColor(cell),
+                                                    cell.isToday && "ring-2 ring-foreground/50"
+                                                )}
+                                            />
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            <p className="font-medium">
+                                                {cell.dayLabel}
+                                                {cell.isToday && " (Today)"}
+                                            </p>
+                                            <p>
+                                                {cell.failures === 0
+                                                    ? "Healthy"
+                                                    : `${cell.failures} failure(s)`}
+                                            </p>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                )
+                            ))}
+                        </div>
+                    ))}
+                </div>
+                <div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
+                    <span>Less</span>
+                    <div className="flex gap-0.5">
+                        <div className="w-3 h-3 rounded-full bg-green-500"/>
+                        <div className="w-3 h-3 rounded-full bg-red-400"/>
+                        <div className="w-3 h-3 rounded-full bg-red-500"/>
+                        <div className="w-3 h-3 rounded-full bg-red-600"/>
+                    </div>
+                    <span>More</span>
+                    <span className="ml-2">|</span>
+                    <div className="w-3 h-3 rounded-full bg-muted"/>
+                    <span>Forecast</span>
+                </div>
+            </CardContent>
+        </Card>
+    );
+};