show cert status in public reosurces table

messages/en-US.json

@@ -1597,6 +1597,7 @@
     "createAdminAccount": "Create Admin Account",
     "setupErrorCreateAdmin": "An error occurred while creating the server admin account.",
     "certificateStatus": "Certificate",
+    "certificateStatusAutoRefreshHint": "Status refreshes automatically.",
     "loading": "Loading",
     "loadingAnalytics": "Loading Analytics",
     "restart": "Restart",

src/app/[orgId]/settings/resources/proxy/page.tsx

@@ -120,6 +120,7 @@ export default async function ProxyResourcesPage(
                   : "not_protected",
             enabled: resource.enabled,
             domainId: resource.domainId || undefined,
+            fullDomain: resource.fullDomain ?? null,
             ssl: resource.ssl,
             targets: resource.targets?.map((target) => ({
                 targetId: target.targetId,

src/components/CertificateStatus.tsx

@@ -1,10 +1,187 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { CheckCircle2, Clock, Loader2, RotateCw, XCircle } from "lucide-react";
+import { FileBadge, RotateCw } from "lucide-react";
 import { useCertificate } from "@app/hooks/useCertificate";
+import type { GetCertificateResponse } from "@server/routers/certificates/types";
 import { useTranslations } from "next-intl";
 
+export type CertificateStatusContentProps = {
+    cert: GetCertificateResponse | null;
+    certLoading: boolean;
+    certError: string | null;
+    refreshing: boolean;
+    refreshCert: () => Promise<void>;
+    showLabel?: boolean;
+    className?: string;
+    onRefresh?: () => void;
+};
+
+/** Presentation-only certificate row (shared hook state possible via props). */
+export function CertificateStatusContent({
+    cert,
+    certLoading,
+    certError,
+    refreshing,
+    refreshCert,
+    showLabel = true,
+    className = "",
+    onRefresh
+}: CertificateStatusContentProps) {
+    const t = useTranslations();
+
+    const labelClass =
+        "inline-flex shrink-0 items-center self-center text-sm font-medium leading-none";
+    const valueClass = "inline-flex items-center gap-2 text-sm leading-none";
+
+    const handleRefresh = async () => {
+        await refreshCert();
+        onRefresh?.();
+    };
+
+    const getStatusColor = (status: string) => {
+        switch (status) {
+            case "valid":
+                return "text-green-500";
+            case "pending":
+            case "requested":
+                return "text-yellow-500";
+            case "expired":
+            case "failed":
+                return "text-red-500";
+            default:
+                return "text-muted-foreground";
+        }
+    };
+
+    const shouldShowRefreshButton = (status: string, updatedAt: number) => {
+        return (
+            status === "failed" ||
+            status === "expired" ||
+            (status === "requested" &&
+                updatedAt &&
+                new Date(updatedAt * 1000).getTime() <
+                    Date.now() - 5 * 60 * 1000)
+        );
+    };
+
+    if (certLoading) {
+        return (
+            <div className={`flex items-center gap-2 ${className}`}>
+                {showLabel && (
+                    <span className={labelClass}>
+                        {t("certificateStatus")}:
+                    </span>
+                )}
+                <span className={valueClass}>
+                    <FileBadge
+                        className="h-4 w-4 shrink-0 animate-pulse text-muted-foreground"
+                        aria-hidden
+                    />
+                    {t("loading")}
+                </span>
+            </div>
+        );
+    }
+
+    if (certError) {
+        return (
+            <div className={`flex items-center gap-2 ${className}`}>
+                {showLabel && (
+                    <span className={labelClass}>
+                        {t("certificateStatus")}:
+                    </span>
+                )}
+                <span className={valueClass}>
+                    <FileBadge
+                        className="h-4 w-4 shrink-0 text-red-500"
+                        aria-hidden
+                    />
+                    {certError}
+                </span>
+            </div>
+        );
+    }
+
+    if (!cert) {
+        return (
+            <div className={`flex items-center gap-2 ${className}`}>
+                {showLabel && (
+                    <span className={labelClass}>
+                        {t("certificateStatus")}:
+                    </span>
+                )}
+                <span className={valueClass}>
+                    <FileBadge
+                        className="h-4 w-4 shrink-0 text-muted-foreground"
+                        aria-hidden
+                    />
+                    {t("none", { defaultValue: "None" })}
+                </span>
+            </div>
+        );
+    }
+
+    const isPending = cert.status === "pending";
+    const disableRestartButton = cert.domainType === "wildcard";
+
+    return (
+        <div className={`flex items-center gap-2 ${className}`}>
+            {showLabel && (
+                <span className={labelClass}>{t("certificateStatus")}:</span>
+            )}
+            {isPending && !disableRestartButton ? (
+                <Button
+                    variant="ghost"
+                    className="h-auto min-h-0 shrink-0 p-0 text-sm font-normal leading-none inline-flex items-center self-center"
+                    onClick={handleRefresh}
+                    disabled={refreshing}
+                    title={t("restartCertificate", {
+                        defaultValue: "Restart Certificate"
+                    })}
+                >
+                    <span className="inline-flex items-center gap-2 leading-none">
+                        <FileBadge
+                            className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
+                            aria-hidden
+                        />
+                        {cert.status.charAt(0).toUpperCase() +
+                            cert.status.slice(1)}
+                        <RotateCw
+                            className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
+                        />
+                    </span>
+                </Button>
+            ) : (
+                <span className={valueClass}>
+                    <FileBadge
+                        className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
+                        aria-hidden
+                    />
+                    {cert.status.charAt(0).toUpperCase() + cert.status.slice(1)}
+                    {shouldShowRefreshButton(cert.status, cert.updatedAt) &&
+                    !disableRestartButton ? (
+                        <Button
+                            size="icon"
+                            variant="ghost"
+                            className="inline-flex h-auto min-h-0 w-3 shrink-0 items-center justify-center self-center p-0"
+                            onClick={handleRefresh}
+                            disabled={refreshing}
+                            title={t("restartCertificate", {
+                                defaultValue: "Restart Certificate"
+                            })}
+                        >
+                            <RotateCw
+                                className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
+                            />
+                        </Button>
+                    ) : null}
+                </span>
+            )}
+        </div>
+    );
+}
+
 type CertificateStatusProps = {
     orgId: string;
     domainId: string;
@@ -28,9 +205,7 @@ export default function CertificateStatus({
     polling = false,
     pollingInterval = 5000
 }: CertificateStatusProps) {
-    const t = useTranslations();
+    const hook = useCertificate({
-    const { cert, certLoading, certError, refreshing, refreshCert } =
-        useCertificate({
         orgId,
         domainId,
         fullDomain,
@@ -39,163 +214,16 @@ export default function CertificateStatus({
         pollingInterval
     });
 
-    const handleRefresh = async () => {
-        await refreshCert();
-        onRefresh?.();
-    };
-
-    const getStatusColor = (status: string) => {
-        switch (status) {
-            case "valid":
-                return "text-green-500";
-            case "pending":
-            case "requested":
-                return "text-yellow-500";
-            case "expired":
-            case "failed":
-                return "text-red-500";
-            default:
-                return "text-muted-foreground";
-        }
-    };
-
-    const getStatusIcon = (status: string) => {
-        switch (status) {
-            case "valid":
-                return CheckCircle2;
-            case "pending":
-            case "requested":
-                return Clock;
-            case "expired":
-            case "failed":
-                return XCircle;
-            default:
-                return Clock;
-        }
-    };
-
-    const shouldShowRefreshButton = (status: string, updatedAt: number) => {
     return (
-            status === "failed" ||
+        <CertificateStatusContent
-            status === "expired" ||
+            cert={hook.cert}
-            (status === "requested" &&
+            certLoading={hook.certLoading}
-                updatedAt &&
+            certError={hook.certError}
-                new Date(updatedAt * 1000).getTime() <
+            refreshing={hook.refreshing}
-                    Date.now() - 5 * 60 * 1000)
+            refreshCert={hook.refreshCert}
-        );
+            showLabel={showLabel}
-    };
+            className={className}
-
+            onRefresh={onRefresh}
-    if (certLoading) {
-        return (
-            <div className={`flex items-center gap-2 ${className}`}>
-                {showLabel && (
-                    <span className="text-sm font-medium">
-                        {t("certificateStatus")}:
-                    </span>
-                )}
-                <span className="inline-flex items-center gap-1.5 text-sm">
-                    <Loader2
-                        className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground"
-                        aria-hidden
         />
-                    {t("loading")}
-                </span>
-            </div>
-        );
-    }
-
-    if (certError) {
-        return (
-            <div className={`flex items-center gap-2 ${className}`}>
-                {showLabel && (
-                    <span className="text-sm font-medium">
-                        {t("certificateStatus")}:
-                    </span>
-                )}
-                <span className="inline-flex items-center gap-1.5 text-sm">
-                    <XCircle className="h-4 w-4 shrink-0 text-red-500" />
-                    {certError}
-                </span>
-            </div>
-        );
-    }
-
-    if (!cert) {
-        return (
-            <div className={`flex items-center gap-2 ${className}`}>
-                {showLabel && (
-                    <span className="text-sm font-medium">
-                        {t("certificateStatus")}:
-                    </span>
-                )}
-                <span className="inline-flex items-center gap-1.5 text-sm">
-                    <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
-                    {t("none", { defaultValue: "None" })}
-                </span>
-            </div>
-        );
-    }
-
-    const isPending = cert.status === "pending";
-    const disableRestartButton = cert.domainType === "wildcard";
-    const StatusIcon = getStatusIcon(cert.status);
-
-    return (
-        <div className={`flex items-center gap-2 ${className}`}>
-            {showLabel && (
-                <span className="text-sm font-medium">
-                    {t("certificateStatus")}:
-                </span>
-            )}
-            {isPending && !disableRestartButton ? (
-                <Button
-                    variant="ghost"
-                    className="h-auto p-0 text-sm font-normal"
-                    onClick={handleRefresh}
-                    disabled={refreshing}
-                    title={t("restartCertificate", {
-                        defaultValue: "Restart Certificate"
-                    })}
-                >
-                    <span className="inline-flex items-center gap-2">
-                        <StatusIcon
-                            className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
-                        />
-                        {cert.status.charAt(0).toUpperCase() +
-                            cert.status.slice(1)}
-                        <RotateCw
-                            className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`}
-                        />
-                    </span>
-                </Button>
-            ) : (
-                <span className="text-sm">
-                    <span className="inline-flex items-center gap-2">
-                        <StatusIcon
-                            className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
-                        />
-                        {cert.status.charAt(0).toUpperCase() +
-                            cert.status.slice(1)}
-                        {shouldShowRefreshButton(cert.status, cert.updatedAt) &&
-                        !disableRestartButton ? (
-                            <Button
-                                size="icon"
-                                variant="ghost"
-                                className="p-0 w-3 h-auto align-middle"
-                                onClick={handleRefresh}
-                                disabled={refreshing}
-                                title={t("restartCertificate", {
-                                    defaultValue: "Restart Certificate"
-                                })}
-                            >
-                                <RotateCw
-                                    className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`}
-                                />
-                            </Button>
-                        ) : null}
-                    </span>
-                </span>
-            )}
-        </div>
     );
 }

src/components/ClientResourcesTable.tsx

@@ -51,7 +51,7 @@ import {
     ResourceSitesStatusCell,
     type ResourceSiteRow
 } from "@app/components/ResourceSitesStatusCell";
-import { PrivateResourceCertAccessIndicator } from "@app/components/PrivateResourceCertAccessIndicator";
+import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
 
 export type InternalResourceSiteRow = ResourceSiteRow;
 
@@ -453,6 +453,13 @@ export default function ClientResourcesTable({
 
                     return (
                         <div className="flex items-center gap-2 min-w-0">
+                            {did ? (
+                                <ResourceAccessCertIndicator
+                                    orgId={resourceRow.orgId}
+                                    domainId={domainId}
+                                    fullDomain={fullDomain}
+                                />
+                            ) : null}
                             <div className="">
                                 <CopyToClipboard
                                     text={url}
@@ -460,13 +467,6 @@ export default function ClientResourcesTable({
                                     displayText={url}
                                 />
                             </div>
-                            {did ? (
-                                <PrivateResourceCertAccessIndicator
-                                    orgId={resourceRow.orgId}
-                                    domainId={domainId}
-                                    fullDomain={fullDomain}
-                                />
-                            ) : null}
                         </div>
                     );
                 }

src/components/ProxyResourcesTable.tsx

@@ -64,6 +64,7 @@ import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
 import { ControlledDataTable } from "./ui/controlled-data-table";
 import UptimeMiniBar from "./UptimeMiniBar";
+import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
 
 export type TargetHealth = {
     targetId: number;
@@ -86,6 +87,8 @@ export type ResourceRow = {
     proxyPort: number | null;
     enabled: boolean;
     domainId?: string;
+    /** Hostname for certificate API (without scheme); distinct from `domain` URL shown in Access column */
+    fullDomain?: string | null;
     ssl: boolean;
     targetHost?: string;
     targetPort?: number;
@@ -488,7 +491,12 @@ export default function ProxyResourcesTable({
             ),
             cell: ({ row }) => {
                 const resourceRow = row.original;
-                return <TargetStatusCell targets={resourceRow.targets} healthStatus={resourceRow.health} />;
+                return (
+                    <TargetStatusCell
+                        targets={resourceRow.targets}
+                        healthStatus={resourceRow.health}
+                    />
+                );
             },
             sortingFn: (rowA, rowB) => {
                 const statusA = rowA.original.health;
@@ -520,24 +528,51 @@ export default function ProxyResourcesTable({
             header: () => <span className="p-3">{t("access")}</span>,
             cell: ({ row }) => {
                 const resourceRow = row.original;
+
+                if (!resourceRow.http) {
                     return (
-                    <div className="flex items-center space-x-2">
+                        <div className="flex items-center gap-2 min-w-0">
-                        {!resourceRow.http ? (
                             <CopyToClipboard
                                 text={resourceRow.proxyPort?.toString() || ""}
                                 isLink={false}
                             />
-                        ) : !resourceRow.domainId ? (
+                        </div>
+                    );
+                }
+
+                if (!resourceRow.domainId) {
+                    return (
+                        <div className="flex items-center gap-2 min-w-0">
                             <InfoPopup
                                 info={t("domainNotFoundDescription")}
                                 text={t("domainNotFound")}
                             />
-                        ) : (
+                        </div>
+                    );
+                }
+
+                const domainId = resourceRow.domainId;
+                const certHostname = resourceRow.fullDomain;
+                const showHttpsCertIndicator =
+                    resourceRow.ssl &&
+                    certHostname != null &&
+                    certHostname !== "";
+
+                return (
+                    <div className="flex items-center gap-2 min-w-0">
+                        {showHttpsCertIndicator ? (
+                            <ResourceAccessCertIndicator
+                                orgId={resourceRow.orgId}
+                                domainId={domainId}
+                                fullDomain={certHostname}
+                            />
+                        ) : null}
+                        <div className="">
                             <CopyToClipboard
                                 text={resourceRow.domain}
                                 isLink={true}
                             />
-                        )}
+                        </div>
                     </div>
                 );
             }

src/components/ResourceAccessCertIndicator.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import CertificateStatus from "@app/components/CertificateStatus";
+import { CertificateStatusContent } from "@app/components/CertificateStatus";
 import {
     Popover,
     PopoverAnchor,
@@ -8,11 +8,17 @@ import {
 } from "@app/components/ui/popover";
 import { useCertificate } from "@app/hooks/useCertificate";
 import { cn } from "@app/lib/cn";
-import { CheckCircle2, Clock, XCircle } from "lucide-react";
+import { FileBadge } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useRef, useState } from "react";
+import {
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+    type ReactNode
+} from "react";
 
-type PrivateResourceCertAccessIndicatorProps = {
+type ResourceAccessCertIndicatorProps = {
     orgId: string;
     domainId: string;
     fullDomain: string;
@@ -33,37 +39,32 @@ function getStatusColor(status: string) {
     }
 }
 
-function getStatusIcon(status: string) {
+/** Compact cert icon + hover popover with full certificate status (shared by proxy and client resource tables). */
-    switch (status) {
+export function ResourceAccessCertIndicator({
-        case "valid":
-            return CheckCircle2;
-        case "pending":
-        case "requested":
-            return Clock;
-        case "expired":
-        case "failed":
-            return XCircle;
-        default:
-            return Clock;
-    }
-}
-
-export function PrivateResourceCertAccessIndicator({
     orgId,
     domainId,
     fullDomain
-}: PrivateResourceCertAccessIndicatorProps) {
+}: ResourceAccessCertIndicatorProps) {
     const t = useTranslations();
     const [open, setOpen] = useState(false);
     const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-    const { cert, certLoading, certError } = useCertificate({
+    const certificate = useCertificate({
         orgId,
         domainId,
         fullDomain,
-        autoFetch: true
+        autoFetch: true,
+        polling: open,
+        pollingInterval: 5000
     });
 
+    const { cert, certLoading, certError, refreshing, fetchCert } = certificate;
+
+    useEffect(() => {
+        if (!open) return;
+        void fetchCert(false);
+    }, [open, fetchCert]);
+
     const clearCloseTimer = useCallback(() => {
         if (closeTimerRef.current != null) {
             clearTimeout(closeTimerRef.current);
@@ -85,24 +86,46 @@ export function PrivateResourceCertAccessIndicator({
         return () => clearCloseTimer();
     }, [clearCloseTimer]);
 
+    let triggerBody: ReactNode;
     if (certLoading) {
-        return (
+        triggerBody = (
             <div
-                className="h-4 w-4 shrink-0 rounded-[2px] bg-muted animate-pulse"
+                className={cn(
+                    "h-4 w-4 shrink-0 rounded-[2px] animate-pulse",
+                    "bg-neutral-200 dark:bg-neutral-700"
+                )}
                 aria-busy="true"
                 aria-label={t("loading")}
             />
         );
-    }
+    } else if (refreshing) {
-
+        triggerBody = (
-    let TriggerIcon = Clock;
+            <FileBadge
-    let triggerIconClass = "text-muted-foreground";
+                className={cn(
-    if (certError) {
+                    "h-4 w-4 shrink-0 animate-spin",
-        TriggerIcon = XCircle;
+                    cert ? getStatusColor(cert.status) : "text-muted-foreground"
-        triggerIconClass = "text-red-500";
+                )}
+                aria-hidden
+            />
+        );
+    } else if (certError) {
+        triggerBody = (
+            <FileBadge className="h-4 w-4 shrink-0 text-red-500" aria-hidden />
+        );
     } else if (cert) {
-        TriggerIcon = getStatusIcon(cert.status);
+        triggerBody = (
-        triggerIconClass = getStatusColor(cert.status);
+            <FileBadge
+                className={cn("h-4 w-4", getStatusColor(cert.status))}
+                aria-hidden
+            />
+        );
+    } else {
+        triggerBody = (
+            <FileBadge
+                className="h-4 w-4 shrink-0 text-muted-foreground"
+                aria-hidden
+            />
+        );
     }
 
     return (
@@ -125,10 +148,7 @@ export function PrivateResourceCertAccessIndicator({
                     aria-haspopup="dialog"
                     aria-label={t("certificateStatus")}
                 >
-                    <TriggerIcon
+                    {triggerBody}
-                        className={cn("h-4 w-4", triggerIconClass)}
-                        aria-hidden
-                    />
                 </button>
             </PopoverAnchor>
             <PopoverContent
@@ -140,13 +160,19 @@ export function PrivateResourceCertAccessIndicator({
                 onMouseLeave={scheduleClose}
                 onOpenAutoFocus={(e) => e.preventDefault()}
             >
-                <CertificateStatus
+                <div className="space-y-3">
-                    orgId={orgId}
+                    <CertificateStatusContent
-                    domainId={domainId}
+                        cert={certificate.cert}
-                    fullDomain={fullDomain}
+                        certLoading={certificate.certLoading}
-                    autoFetch
+                        certError={certificate.certError}
+                        refreshing={certificate.refreshing}
+                        refreshCert={certificate.refreshCert}
                         showLabel
                     />
+                    <p className="text-sm text-muted-foreground">
+                        {t("certificateStatusAutoRefreshHint")}
+                    </p>
+                </div>
             </PopoverContent>
         </Popover>
     );

src/hooks/useCertificate.ts

@@ -20,7 +20,7 @@ type UseCertificateReturn = {
     certLoading: boolean;
     certError: string | null;
     refreshing: boolean;
-    fetchCert: () => Promise<void>;
+    fetchCert: (showLoading?: boolean) => Promise<void>;
     refreshCert: () => Promise<void>;
     clearCert: () => void;
 };
@@ -102,15 +102,33 @@ export function useCertificate({
         }
     }, [autoFetch, orgId, domainId, fullDomain, fetchCert]);
 
-    // Polling effect
     useEffect(() => {
         if (!polling || !orgId || !domainId || !fullDomain) return;
 
-        const interval = setInterval(() => {
+        const POLL_JITTER_MS = 1000;
-            fetchCert(false); // Don't show loading for polling
+        let cancelled = false;
-        }, pollingInterval);
+        let timeoutId: ReturnType<typeof setTimeout>;
 
-        return () => clearInterval(interval);
+        const scheduleNext = () => {
+            const jitter = (Math.random() * 2 - 1) * POLL_JITTER_MS;
+            const delayMs = Math.max(
+                1000,
+                Math.round(pollingInterval + jitter)
+            );
+
+            timeoutId = setTimeout(() => {
+                if (cancelled) return;
+                void fetchCert(false);
+                scheduleNext();
+            }, delayMs);
+        };
+
+        scheduleNext();
+
+        return () => {
+            cancelled = true;
+            clearTimeout(timeoutId);
+        };
     }, [polling, orgId, domainId, fullDomain, pollingInterval, fetchCert]);
 
     return {