feat(ui): show instance health badges and health panel

app/dashboard/page.tsx

@@ -17,6 +17,16 @@ type ActionLogSummary = Pick<
   Database["public"]["Tables"]["actions_log"]["Row"],
   "target_id" | "status" | "action" | "created_at" | "error_message"
 >;
+type HealthLogSummary = Pick<
+  Database["public"]["Tables"]["actions_log"]["Row"],
+  | "id"
+  | "target_id"
+  | "status"
+  | "action"
+  | "created_at"
+  | "error_message"
+  | "metadata"
+>;
 
 function normalizeDomainLike(value: string) {
   return value.trim().toLowerCase().replace(/\.$/, "");
@@ -49,6 +59,7 @@ export default async function DashboardPage() {
     { data: domains },
     { data: billing },
     { data: autoSyncLogs },
+    { data: healthLogs },
   ] = (await Promise.all([
     supabase
       .from("agencies")
@@ -58,7 +69,7 @@ export default async function DashboardPage() {
     supabase
       .from("plesk_instances")
       .select(
-        "id, name, base_url, auth_type, status, error_message, last_connected_at, last_sync_at, last_sync_status, last_sync_error, last_sync_subscriptions, last_sync_domains, auto_sync_enabled, auto_sync_frequency_minutes, last_auto_sync_at, next_auto_sync_at, auto_sync_lock_until",
+        "id, name, base_url, auth_type, status, error_message, last_connected_at, last_sync_at, last_sync_status, last_sync_error, last_sync_subscriptions, last_sync_domains, auto_sync_enabled, auto_sync_frequency_minutes, last_auto_sync_at, next_auto_sync_at, auto_sync_lock_until, health_enabled, health_status, health_last_checked_at, health_last_ok_at, health_last_error, health_last_latency_ms, health_check_frequency_minutes, health_next_check_at, health_lock_until",
       )
       .eq("agency_id", context.agencyId)
       .order("created_at", { ascending: false }),
@@ -89,6 +100,21 @@ export default async function DashboardPage() {
       .eq("action", "plesk_sync_auto")
       .order("created_at", { ascending: false })
       .limit(200),
+    supabase
+      .from("actions_log")
+      .select(
+        "id, target_id, status, action, created_at, error_message, metadata",
+      )
+      .eq("agency_id", context.agencyId)
+      .eq("target_type", "plesk_instance")
+      .in("action", [
+        "health_check_started",
+        "health_check_ok",
+        "health_check_degraded",
+        "health_check_failed",
+      ])
+      .order("created_at", { ascending: false })
+      .limit(400),
   ])) as [
     { data: AgencySummary | null },
     {
@@ -110,6 +136,15 @@ export default async function DashboardPage() {
         last_auto_sync_at: string | null;
         next_auto_sync_at: string | null;
         auto_sync_lock_until: string | null;
+        health_enabled: boolean;
+        health_status: "ok" | "degraded" | "down" | "unknown";
+        health_last_checked_at: string | null;
+        health_last_ok_at: string | null;
+        health_last_error: string | null;
+        health_last_latency_ms: number | null;
+        health_check_frequency_minutes: number;
+        health_next_check_at: string | null;
+        health_lock_until: string | null;
       }> | null;
       error: { message: string } | null;
     },
@@ -138,6 +173,7 @@ export default async function DashboardPage() {
     },
     { data: BillingSummary | null },
     { data: ActionLogSummary[] | null },
+    { data: HealthLogSummary[] | null },
   ];
 
   const domainInstanceIds = Array.from(
@@ -230,6 +266,33 @@ export default async function DashboardPage() {
     });
   }
 
+  const healthEventsByInstance = new Map<
+    string,
+    Array<{
+      id: string;
+      action: string;
+      status: string;
+      created_at: string;
+      error_message: string | null;
+      metadata: unknown;
+    }>
+  >();
+
+  for (const log of healthLogs ?? []) {
+    if (!log.target_id) continue;
+    const existing = healthEventsByInstance.get(log.target_id) ?? [];
+    if (existing.length >= 10) continue;
+    existing.push({
+      id: log.id,
+      action: log.action,
+      status: log.status,
+      created_at: log.created_at,
+      error_message: log.error_message,
+      metadata: log.metadata,
+    });
+    healthEventsByInstance.set(log.target_id, existing);
+  }
+
   return (
     <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-8">
       <header className="flex items-center justify-between">
@@ -312,6 +375,9 @@ export default async function DashboardPage() {
           };
         })}
         autoSyncByInstance={Object.fromEntries(autoSyncByInstance.entries())}
+        healthEventsByInstance={Object.fromEntries(
+          healthEventsByInstance.entries(),
+        )}
       />
     </main>
   );

components/dashboard/dashboard-controls.tsx

@@ -23,6 +23,15 @@ type Instance = {
   last_auto_sync_at: string | null;
   next_auto_sync_at: string | null;
   auto_sync_lock_until: string | null;
+  health_enabled: boolean;
+  health_status: "ok" | "degraded" | "down" | "unknown";
+  health_last_checked_at: string | null;
+  health_last_ok_at: string | null;
+  health_last_error: string | null;
+  health_last_latency_ms: number | null;
+  health_check_frequency_minutes: number;
+  health_next_check_at: string | null;
+  health_lock_until: string | null;
 };
 
 type Subscription = {
@@ -54,8 +63,44 @@ type Props = {
     string,
     { status: string; created_at: string; error_message: string | null }
   >;
+  healthEventsByInstance: Record<
+    string,
+    Array<{
+      id: string;
+      action: string;
+      status: string;
+      created_at: string;
+      error_message: string | null;
+      metadata: unknown;
+    }>
+  >;
 };
 
+function getHealthBadge(status: string | null) {
+  const normalized = (status ?? "unknown").toLowerCase();
+
+  if (normalized === "ok") {
+    return { label: "OK", className: "bg-emerald-100 text-emerald-700" };
+  }
+
+  if (normalized === "degraded") {
+    return { label: "Degraded", className: "bg-amber-100 text-amber-700" };
+  }
+
+  if (normalized === "down") {
+    return { label: "Down", className: "bg-rose-100 text-rose-700" };
+  }
+
+  return { label: "Unknown", className: "bg-slate-100 text-slate-600" };
+}
+
+function mapHealthResult(action: string) {
+  if (action === "health_check_ok") return "ok";
+  if (action === "health_check_degraded") return "degraded";
+  if (action === "health_check_failed") return "failed";
+  return "started";
+}
+
 function getDomainStatusBadge(status: string | null) {
   const normalized = (status ?? "unknown").toLowerCase();
 
@@ -120,6 +165,7 @@ export function DashboardControls({
   subscriptions,
   domains,
   autoSyncByInstance,
+  healthEventsByInstance,
 }: Props) {
   const autoSyncFrequencyOptions = [15, 30, 60, 180, 360, 1440];
   const [instanceName, setInstanceName] = useState("");
@@ -245,6 +291,22 @@ export function DashboardControls({
     }
   }
 
+  async function onRunHealthCheck(instanceId: string) {
+    setLoading(true);
+    setMessage(null);
+    try {
+      await runRequest(`/api/plesk/instances/${instanceId}/health`);
+      setMessage("Health check completed.");
+      window.location.reload();
+    } catch (error) {
+      setMessage(
+        error instanceof Error ? error.message : "Health check failed",
+      );
+    } finally {
+      setLoading(false);
+    }
+  }
+
   async function onUpdateAutoSync(
     instanceId: string,
     input: { auto_sync_enabled: boolean; auto_sync_frequency_minutes: number },
@@ -442,12 +504,17 @@ export function DashboardControls({
                   key={instance.id}
                   className="rounded border border-slate-200 p-3"
                 >
+                  {(() => {
+                    const health = getHealthBadge(instance.health_status);
+
+                    return (
                       <div className="flex items-start justify-between gap-2">
                         <div>
                           {autoSyncByInstance[instance.id] ? (
                             <span
                               className={`inline-flex rounded px-2 py-0.5 text-[11px] font-medium ${
-                            autoSyncByInstance[instance.id].status === "success"
+                                autoSyncByInstance[instance.id].status ===
+                                "success"
                                   ? "bg-emerald-100 text-emerald-700"
                                   : "bg-rose-100 text-rose-700"
                               }`}
@@ -463,10 +530,32 @@ export function DashboardControls({
                           </p>
                           <p className="mt-1 text-xs text-slate-600">
                             Status:{" "}
-                        <span className="font-medium">{instance.status}</span>
+                            <span className="font-medium">
+                              {instance.status}
+                            </span>
                           </p>
                           <p className="text-xs text-slate-500">
-                        Subscriptions: {instance.last_sync_subscriptions ?? 0}
+                            Health:{" "}
+                            <span
+                              title={instance.health_last_error ?? undefined}
+                              className={`inline-flex rounded px-2 py-0.5 text-[11px] font-medium ${health.className}`}
+                            >
+                              {health.label}
+                            </span>
+                          </p>
+                          <p className="text-xs text-slate-500">
+                            Health last checked:{" "}
+                            {formatDateTime(instance.health_last_checked_at)}
+                          </p>
+                          <p className="text-xs text-slate-500">
+                            Health latency:{" "}
+                            {instance.health_last_latency_ms != null
+                              ? `${instance.health_last_latency_ms} ms`
+                              : "—"}
+                          </p>
+                          <p className="text-xs text-slate-500">
+                            Subscriptions:{" "}
+                            {instance.last_sync_subscriptions ?? 0}
                           </p>
                           <p className="text-xs text-slate-500">
                             Domains: {instance.last_sync_domains ?? 0}
@@ -487,7 +576,8 @@ export function DashboardControls({
                             </span>
                           </p>
                           <p className="text-xs text-slate-500">
-                        Last sync time: {formatDateTime(instance.last_sync_at)}
+                            Last sync time:{" "}
+                            {formatDateTime(instance.last_sync_at)}
                           </p>
                           <p className="text-xs text-slate-500">
                             Last connected:{" "}
@@ -497,7 +587,9 @@ export function DashboardControls({
                           </p>
                           <p className="text-xs text-slate-500">
                             Auto-sync:{" "}
-                        {instance.auto_sync_enabled ? "Enabled" : "Disabled"}
+                            {instance.auto_sync_enabled
+                              ? "Enabled"
+                              : "Disabled"}
                           </p>
                           <p className="text-xs text-slate-500">
                             Auto-sync frequency:{" "}
@@ -543,6 +635,14 @@ export function DashboardControls({
                               {autoSyncByInstance[instance.id].error_message}
                             </p>
                           ) : null}
+                          {instance.health_last_error ? (
+                            <p
+                              className="mt-1 text-xs text-rose-600"
+                              title={instance.health_last_error}
+                            >
+                              Health error: {instance.health_last_error}
+                            </p>
+                          ) : null}
                         </div>
                         <div className="flex flex-col gap-2">
                           <div className="flex items-center gap-2">
@@ -569,7 +669,9 @@ export function DashboardControls({
                             onChange={(e: ChangeEvent<HTMLSelectElement>) =>
                               onUpdateAutoSync(instance.id, {
                                 auto_sync_enabled: instance.auto_sync_enabled,
-                            auto_sync_frequency_minutes: Number(e.target.value),
+                                auto_sync_frequency_minutes: Number(
+                                  e.target.value,
+                                ),
                               })
                             }
                             disabled={loading}
@@ -588,6 +690,13 @@ export function DashboardControls({
                           >
                             Test Connection
                           </button>
+                          <button
+                            onClick={() => onRunHealthCheck(instance.id)}
+                            disabled={loading}
+                            className="rounded border px-3 py-1.5 text-xs"
+                          >
+                            Run Health Check
+                          </button>
                           <button
                             onClick={() => onSync(instance.id)}
                             disabled={loading}
@@ -597,6 +706,108 @@ export function DashboardControls({
                           </button>
                         </div>
                       </div>
+                    );
+                  })()}
+
+                  <div className="mt-3 rounded border border-slate-100 bg-slate-50 p-3">
+                    <p className="text-xs font-semibold uppercase tracking-wide text-slate-600">
+                      Health Panel
+                    </p>
+                    <div className="mt-2 grid gap-1 text-xs text-slate-600 sm:grid-cols-2">
+                      <p>
+                        Current Status:{" "}
+                        <span className="font-medium">
+                          {getHealthBadge(instance.health_status).label}
+                        </span>
+                      </p>
+                      <p>
+                        Last Checked:{" "}
+                        <span className="font-medium">
+                          {formatDateTime(instance.health_last_checked_at)}
+                        </span>
+                      </p>
+                      <p>
+                        Last Successful Check:{" "}
+                        <span className="font-medium">
+                          {formatDateTime(instance.health_last_ok_at)}
+                        </span>
+                      </p>
+                      <p>
+                        Latency:{" "}
+                        <span className="font-medium">
+                          {instance.health_last_latency_ms != null
+                            ? `${instance.health_last_latency_ms} ms`
+                            : "—"}
+                        </span>
+                      </p>
+                      <p className="sm:col-span-2">
+                        Last Error:{" "}
+                        <span className="font-medium">
+                          {instance.health_last_error ?? "—"}
+                        </span>
+                      </p>
+                    </div>
+
+                    <div className="mt-3 overflow-x-auto">
+                      <table className="min-w-full text-left text-xs">
+                        <thead>
+                          <tr className="border-b border-slate-200 text-slate-500">
+                            <th className="px-2 py-1">Time</th>
+                            <th className="px-2 py-1">Event</th>
+                            <th className="px-2 py-1">Result</th>
+                            <th className="px-2 py-1">Message</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {(healthEventsByInstance[instance.id] ?? [])
+                            .length === 0 ? (
+                            <tr>
+                              <td
+                                className="px-2 py-2 text-slate-500"
+                                colSpan={4}
+                              >
+                                No health events yet.
+                              </td>
+                            </tr>
+                          ) : (
+                            (healthEventsByInstance[instance.id] ?? []).map(
+                              (event) => (
+                                <tr
+                                  key={event.id}
+                                  className="border-b border-slate-100 align-top"
+                                >
+                                  <td className="px-2 py-1">
+                                    {formatDateTime(event.created_at)}
+                                  </td>
+                                  <td className="px-2 py-1">{event.action}</td>
+                                  <td className="px-2 py-1">
+                                    {mapHealthResult(event.action)}
+                                  </td>
+                                  <td className="px-2 py-1">
+                                    {event.error_message ?? "—"}
+                                    {event.metadata ? (
+                                      <details>
+                                        <summary className="cursor-pointer text-[11px] text-brand-700">
+                                          metadata
+                                        </summary>
+                                        <pre className="mt-1 max-w-[440px] overflow-auto rounded bg-white p-2 text-[10px] text-slate-700">
+                                          {JSON.stringify(
+                                            event.metadata,
+                                            null,
+                                            2,
+                                          )}
+                                        </pre>
+                                      </details>
+                                    ) : null}
+                                  </td>
+                                </tr>
+                              ),
+                            )
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
                 </div>
               ))
             )}