pulsenode/components/widgets/http/Widget.tsx

"use client";

import type { Widget } from "@/lib/config/schema";
import { useWidgetSubscription } from "@/lib/ws/client";
import { SkeletonLines } from "@/components/widgets/Skeleton";

type HttpWidget = Extract<Widget, { type: "http" }>;

function statusColor(up: boolean | undefined, consecutiveFailures: number): string {
  if (up === undefined) return "bg-fg-muted";
  if (up) return "bg-status-up";
  return consecutiveFailures > 2 ? "bg-status-down" : "bg-status-degraded";
}

export function HttpWidget({ widget, widgetId }: { widget: HttpWidget; widgetId: string }) {
  const result = useWidgetSubscription(widgetId);
  const data = result?.type === "http" ? result.data : null;
  const errorMessage = result?.type === "error" ? result.message : null;
  const pulse = data?.up ? "status-pulse" : "";

  return (
    <div className="flex flex-col gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-4">
      <div className="flex items-center justify-between gap-2">
        <span className="text-sm font-medium text-fg">{widget.name}</span>
        <span
          className={`h-2.5 w-2.5 shrink-0 rounded-full ${statusColor(data?.up, data?.consecutiveFailures ?? 0)} ${pulse}`}
          title={data ? (data.up ? "up" : `down (${data.consecutiveFailures} checks failed)`) : "unknown"}
        />
      </div>
      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
      {!result && !errorMessage && <SkeletonLines />}
      {data && (
        <dl className="flex flex-col gap-1 text-xs text-fg-muted">
          <div>
            Status: <span className="font-mono tabular-nums text-fg">{data.statusCode ?? "—"}</span>
          </div>
          <div>
            Latency: <span className="font-mono tabular-nums text-fg">{data.latencyMs}ms</span>
          </div>
          {!data.up && data.error && <div className="text-status-down">{data.error}</div>}
        </dl>
      )}
    </div>
  );
}